/**************************************************************************
 * Image cropping GUI using CSS/JS/DOM
 * http://stefan-pochmann.info/articles/crop/
 * 
 * Sorry it's not documented much yet, might do that later. Roughly:
 * - Three layers, bottom green, middle opaque image, top clipped image
 * - The inside crop area is from [x0,y0] to (x1,y1) which are used for
 *   the clipping coordinates of the top image.  
 * - analyzeCoordinates detects whether the mouse is on the north, south,
 *   east, west borders of the crop area or on its center.
 * - The appropriate mouse cursor icon for these areas gets shown. 
 * - Clicking in one of these areas starts an adjustment.
 * - During adjustment x0/y0/x1/y1 are adjusted depending on the action.
 * - At the end, doCrop hides the cropping interface and shows the cropped
 *   part of a higher resolution version of the image.
 **************************************************************************/

var width=966, height=500, widthLarge=2592, heightLarge=1342;
var canvas, shaded, crop, adjusting=false;

function init () {
  canvas = document.getElementById( "canvas" );
  shaded = document.getElementById( "shaded" );
  crop   = document.getElementById( "crop"   );
  canvas.style.width  = shaded.style.width  = crop.style.width  = width + "px";
  canvas.style.height = shaded.style.height = crop.style.height = height + "px";
  x0 = Math.floor( width  * 0.1 );
  y0 = Math.floor( height * 0.1 );
  x1 = width  - x0;
  y1 = height - y0;
  showMask();
}
 
function startAdjust ( event ) {
  analyzeCoordinates( event );
  if ( N || S || W || E || C ) {
    adjusting = true;
    offX = x - (E ? x1 : x0);
    offY = y - (S ? y1 : y0);
  }
}
function stopAdjust ( event ) {
  adjusting = false;
}

function showMask () {
  crop.style.clip = "rect(" + y0 + "px," + x1 + "px," + y1 + "px," + x0 + "px)";
}
function isIn ( n, min, max ) {
  return n >= min  &&  n <= max;
}
function limit ( n, min, max ) {
  return n<min ? min : (n>max ? max : n);
}

function analyzeCoordinates ( event ) {
  x = event.clientX - canvas.offsetLeft;
  y = event.clientY - canvas.offsetTop + Math.max( document.body.scrollTop, document.documentElement.scrollTop );
  if ( ! adjusting ) {
    d = 10;
    N = isIn( x, x0-d, x1+d ) && isIn( y, y0-d, y0+d );
    S = isIn( x, x0-d, x1+d ) && isIn( y, y1-d, y1+d );
    W = isIn( x, x0-d, x0+d ) && isIn( y, y0-d, y1+d );
    E = isIn( x, x1-d, x1+d ) && isIn( y, y0-d, y1+d );
    C = isIn( x, x0+d, x1-d ) && isIn( y, y0+d, y1-d );
  } else {
    x -= offX;
    y -= offY;
  }
}
function doAdjust ( event ) {
  analyzeCoordinates( event );
  if ( ! adjusting ) {
    dir = (N ? 'n' : '') + (S ? 's' : '') + (W ? 'w' : '') + (E ? 'e' : '');
    canvas.style.cursor = dir == '' ? (C ? 'move' : 'crosshair') : dir+'-resize';
  } else {
    if ( N ) y0 = limit( y, 0, y1-30 );
    if ( W ) x0 = limit( x, 0, x1-30 );
    if ( S ) y1 = limit( y, y0+30, height );
    if ( E ) x1 = limit( x, x0+30, width );
    if ( C ) {
      w = x1 - x0;
      h = y1 - y0;
      x0 = limit( x, 0, width-w );
      y0 = limit( y, 0, height-h );
      x1 = x0 + w;
      y1 = y0 + h;
    }
    showMask();
  }
}
function doCrop () {
  canvas.style.display = 'none';
  var large = document.getElementById( "large" ).style;
  large.display = 'block';
  large.width  = (x1 - x0)/width  * widthLarge  + "px";
  large.height = (y1 - y0)/height * heightLarge + "px";
  large.backgroundPosition = -x0/width*widthLarge + "px " + -y0/height*heightLarge + "px";
}