title: How to rotate an image clockwise or counterclockwise, whichever is shorter?
body: <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>