How to rotate an image clockwise or counterclockwise, whichever is shorter?
<p>I'm making a web page that includes a clock with an arrow in the center.  When the user clicks on an hour, the arrow rotates to point to what he/she has clicked.</p>

<p>I'm using a jQuery image rotate plugin (jQueryRotate) to rotate the arrow.</p>

<p>Here is the current code to compute the number of degrees to rotate:</p>

<pre><code>var numTiles = $("ul li").size(); // Number of tiles is however many are listed in the UL, which is 12  
var sel = 0; // Default hour selection  
var rot = 0; // Default rotation is at the top (0 degrees)  
var gap = 360 / numTiles; // Degrees between each tile

function rotateArrow(num) {  
  rot = num * gap;  
  $("#arrow").rotateAnimation(rot);  
  sel = num;  
}  
</code></pre>

<p>When the user clicks one of the hours, it passes num as a value of 1 through 12.</p>

<p>It works fine, but the problem is that if the arrow is pointing to 1 o'clock, and the user clicks 11 o'clock, the arrow rotates clockwise 300 degrees, when it would make more sense to rotate 60 degrees counterclockwise.</p>

<p>So, how can I write an equation to take the current hour (num) and the hour clicked (sel), and output a value as a positive or negative number, which equals the number of degrees to rotate that is most efficient, rather than just rotate only in one direction?</p>

<p>Any advice is appreciated.  Let me know if you have any questions.  Thanks!</p>
