/*
 *  JavaScript ImageCrop 1.1
 *  Authors: Alexander Schulze
 *  Contact: webmaster@lxhome.de
 *           http://www.lxhome.de
 *
 *  Versionsänderungen:
 *  ===================
 *
 *  1.1   Bugfix:  verschieben ohne Selektion
 *        Bugfix:  Selektionsproblem im Firefox
 *        Feature: verschieben auch schneller mit SHIFT
 *        Feature: Größenänderung auf PGUP/PGDN wegen TypeAheadFind
 *        Feature: größtmögliche Auswahl treffen mit POS1
 *        Feature: Auswahl aufheben per END
 *  1.0   erster Release
 */

var Wand  = window.document.getElementById('wand');
var Crop  = window.document.getElementById('crop');
var C_T   = window.document.getElementById('c_t').style;
var C_B   = window.document.getElementById('c_b').style;
var C_L   = window.document.getElementById('c_l').style;
var C_R   = window.document.getElementById('c_r').style;
var icl   = document.getElementById('ic_left');
var ict   = document.getElementById('ic_top');
var icw   = document.getElementById('ic_width');
var ich   = document.getElementById('ic_height');

var startX, startY;
var height, width;

var aspectRatio;

var WandAction = false;

// wenn Mouse über zuzuschneidendem Bild, Events registrieren
document.onmousedown = doNothing;
document.onmouseup   = doNothing;
document.onmousemove = doNothing;

Crop.onmousedown = selectStart;
Crop.onmouseup   = selectEnd;
Crop.onmousemove = selectSize;

Wand.onmousedown = moveStart;
Wand.onmouseup   = moveEnd;
Wand.onmousemove = moveMove;

// Tastendrücke an diese Funktion leiten
document.onkeydown = keyMove;

function doNothing()
{
  return false;
}

function checkCrop()
{
  if ( ich.value == 0 && icw.value == 0 )
    return false;
  else
    return true;
}

function selectStart ( e )
{
  e = ( !e ) ? window.event : e;
  
  startX = e.clientX;
  startY = e.clientY + document.body.scrollTop;

  Wand.style.width  = '0px';
  Wand.style.height = '0px';
  Wand.style.top    = '0px';
  Wand.style.left   = '0px';
  
  WandAction     = true;
  Wand.className = 'crosshair';
  
  Wand.onmousedown = selectStart;
  Wand.onmouseup   = selectEnd;
  Wand.onmousemove = selectSize;
  
  icl.value = 0;
  ict.value = 0;
  icw.value = 0;
  ich.value = 0;
  
  C_T.height = '0px';
  C_L.width  = '0px';
  C_R.width  = '0px';
  C_B.height = '0px';
}

function selectSize ( e )
{
  if ( WandAction )
  {
    e = ( !e ) ? window.event : e;

    width  = Math.abs ( startX - e.clientX );
    height = Math.abs ( startY - e.clientY - document.body.scrollTop );
    
    if ( fixAspectRatio != 0 )
    {
      if ( width / height > fixAspectRatio )
        width = Math.round ( fixAspectRatio * height );
      else if ( width / height < fixAspectRatio )
        height = Math.round ( width / fixAspectRatio );
    }
    
    Wand.style.width  = width  + 'px';
    Wand.style.height = height + 'px';
    
    C_L.height = height + 'px';
    C_R.height = height + 'px';

    // waagerecht
    if ( startX > e.clientX )
    {
      Wand.style.left   = startX - width + 'px';
      C_L.width         = startX - Crop.offsetLeft - width + 'px';
    }
    else
    {
      Wand.style.left = startX + 'px';
      C_L.width       = startX - Crop.offsetLeft + 'px';
    }

    // senkrecht
    if ( startY > e.clientY + document.body.scrollTop )
    {
      Wand.style.top      = startY + document.body.scrollTop - height + 'px';
      C_T.height          = startY + document.body.scrollTop - height - Crop.offsetTop + 'px';
      C_L.top             = startY + document.body.scrollTop - height - Crop.offsetTop + 'px';
      C_R.top             = startY + document.body.scrollTop - height - Crop.offsetTop + 'px';
    }
    else
    {
      Wand.style.top    = startY + 'px';
      C_T.height        = startY - Crop.offsetTop + 'px';
      C_L.top           = startY - Crop.offsetTop + 'px';
      C_R.top           = startY - Crop.offsetTop + 'px';
    }
    
    C_R.width  = parseInt ( Crop.style.width  ) - parseInt ( C_L.width  ) - width  + 'px';
    C_B.height = parseInt ( Crop.style.height ) - parseInt ( C_T.height ) - height + 'px';
  }
}

function selectEnd ( e )
{
  e = ( !e ) ? window.event : e;
  
  if ( startX == e.clientX || startY == e.clientY + document.body.scrollTop )
  {
    icl.value = 0;
    ict.value = 0;
    icw.value = 0;
    ich.value = 0;
  }
  else
  {
    icl.value   = ( startX > e.clientX )
    ? e.clientX - Crop.offsetLeft
    : startX    - Crop.offsetLeft;
    ict.value   = ( startY > e.clientY + document.body.scrollTop )
    ? e.clientY - Crop.offsetTop - document.body.scrollTop
    : startY    - Crop.offsetTop;
    icw.value   = width;
    ich.value   = height;

    if ( WandAction )
    {
      Wand.className = 'move';

      Wand.onmousedown = moveStart;
      Wand.onmouseup   = moveEnd;
      Wand.onmousemove = moveMove;
    }
  }
  
  aspectRatio = height / width;
  WandAction = false;
}

function moveStart ( e )
{
  e = ( !e ) ? window.event : e;
  
  WandAction = true;
  
  Crop.onmousedown = moveStart;
  Crop.onmouseup   = moveEnd;
  Crop.onmousemove = moveMove;
  
  startX = e.clientX;
  startY = e.clientY;
}

function moveMove ( e )
{
  if ( WandAction )
  {
    e = ( !e ) ? window.event : e;
    
    var t = parseInt ( Wand.style.top  ) - startY + e.clientY;
    var l = parseInt ( Wand.style.left ) - startX + e.clientX;
    
    // prüfen, ob Selektion außerhalb des Bildes geht
    if ( t - Crop.offsetTop  < 0 ) t = Crop.offsetTop;
    if ( l - Crop.offsetLeft < 0 ) l = Crop.offsetLeft;

    if ( t - Crop.offsetTop  + height > parseInt ( Crop.style.height) )
      t = parseInt ( Crop.style.height ) - height + Crop.offsetTop;
    if ( l - Crop.offsetLeft + width  > parseInt ( Crop.style.width ) )
      l = parseInt ( Crop.style.width  ) - width  + Crop.offsetLeft;
    
    Wand.style.top  = t + 'px';
    Wand.style.left = l + 'px';

    startX    = e.clientX;
    startY    = e.clientY;
    
    
    C_T.height = t - Crop.offsetTop  + 'px';
    C_L.top    = t - Crop.offsetTop  + 'px';
    C_L.width  = l - Crop.offsetLeft + 'px';
    C_R.top    = t - Crop.offsetTop  + 'px';
    C_R.width  = parseInt ( Crop.style.width  ) - parseInt ( C_L.width  ) - width  + 'px';
    C_B.height = parseInt ( Crop.style.height ) - parseInt ( C_T.height ) - height + 'px';
  }
}

function moveEnd ( e )
{
  e = ( !e ) ? window.event : e;
  
  var t = parseInt ( Wand.style.top  ) - startY + e.clientY;
  var l = parseInt ( Wand.style.left ) - startX + e.clientX;
  
  ict.value = t - Crop.offsetTop;
  icl.value = l - Crop.offsetLeft;
  
  Crop.onmousedown = selectStart;
  Crop.onmouseup   = selectEnd;
  Crop.onmousemove = selectSize;
  
  WandAction = false;
}

function keyMove ( e )
{
  if ( document.all )
  {
    var k = window.event.keyCode;
    var s = window.event.shiftKey;
  }
  else
  {
    var k = e.which;
    var s = e.shiftKey;
  }
    
  if ( height == 0 || width == 0 )
    return
    
  if ( s )
    value = 10;
  else
    value = 1;
  
  // links
  if ( k == 37 && ( parseInt ( Wand.style.left ) - Crop.offsetLeft - value >= 0 ) )
  {
    Wand.style.left  = ( parseInt ( Wand.style.left ) - value ) + 'px';
    icl.value -= value;
    
    C_L.width = parseInt ( C_L.width ) - value + 'px';
    C_R.width = parseInt ( C_R.width ) + value + 'px';
  }
  
  // hoch
  if ( k == 38 && ( parseInt ( Wand.style.top ) - Crop.offsetTop - value  >= 0 ) )
  {
    Wand.style.top  = ( parseInt ( Wand.style.top ) - value ) + 'px';
    ict.value -= value;
    
    C_T.height = parseInt ( C_T.height ) - value + 'px';
    C_B.height = parseInt ( C_B.height ) + value + 'px';
    C_R.top    = parseInt ( C_R.top    ) - value + 'px';
    C_L.top    = parseInt ( C_L.top    ) - value + 'px';
  }

  // rechts
  if ( k == 39 && ( parseInt ( Wand.style.left ) - Crop.offsetLeft + width + value <= parseInt ( Crop.style.width ) ) )
  {
    Wand.style.left = ( parseInt ( Wand.style.left ) + value ) + 'px';
    icl.value += value;
    
    C_L.width = parseInt ( C_L.width ) + value + 'px';
    C_R.width = parseInt ( C_R.width ) - value + 'px';
  }
  
  // runter
  if ( k == 40 && ( parseInt ( Wand.style.top ) - Crop.offsetTop + height + value <= parseInt ( Crop.style.height ) ) )
  {
    Wand.style.top = ( parseInt ( Wand.style.top ) + value ) + 'px';
    ict.value += value;
    
    C_T.height = parseInt ( C_T.height ) + value + 'px';
    C_B.height = parseInt ( C_B.height ) - value + 'px';
    C_R.top    = parseInt ( C_R.top    ) + value + 'px';
    C_L.top    = parseInt ( C_L.top    ) + value + 'px';
  }
  
  // proportional vergrößern (PGUP)
  if ( ( k == 33 )
       && ( parseInt ( Wand.style.top  ) - Crop.offsetTop + height + value <= parseInt ( Crop.style.height ) )
       && ( parseInt ( Wand.style.left ) - Crop.offsetLeft + width + value <= parseInt ( Crop.style.width  ) ) )
  {
    width += value;
    height = Math.round ( aspectRatio * width );
    
    Wand.style.width  = width  + 'px';
    Wand.style.height = height + 'px';
    
    icw.value = width;
    ich.value = height;
    
    C_R.width  = parseInt ( Crop.style.width  ) - parseInt ( C_L.width  ) - width  + 'px';
    C_L.height = height + 'px';
    C_R.height = height + 'px';
    C_B.height = parseInt ( Crop.style.height ) - parseInt ( C_T.height ) - height + 'px';
  }
  
  // proportional verkleinern (PGDN)
  if ( k == 34 && height > value && width > value )
  {
    width -= value;
    height = Math.round ( aspectRatio * width );
    
    Wand.style.width  = width  + 'px';
    Wand.style.height = height + 'px';
    
    icw.value  = width;
    ich.value = height;
    
    C_R.width  = parseInt ( Crop.style.width  ) - parseInt ( C_L.width  ) - width  + 'px';
    C_L.height = height + 'px';
    C_R.height = height + 'px';
    C_B.height = parseInt ( Crop.style.height ) - parseInt ( C_T.height ) - height + 'px';
  }
  
  // größtmögliche Auswahl treffen (POS1)
  if ( k == 36 )
  {
    width  = parseInt ( Crop.style.width  );
    height = parseInt ( Crop.style.height );
    
    if ( fixAspectRatio != 0 )
    {
      if ( width / height > fixAspectRatio )
        width = Math.round ( fixAspectRatio * height );
      else if ( width / height < fixAspectRatio )
        height = Math.round ( width / fixAspectRatio );
    }
      
    icl.value = 0;
    ict.value = 0;
    ich.value = height;
    icw.value = width;
    
    Wand.style.top    = Crop.offsetTop  + 'px';
    Wand.style.left   = Crop.offsetLeft + 'px';
    Wand.style.height = height  + 'px';
    Wand.style.width  = width   + 'px';
    
    C_L.top    = '0px';
    C_R.top    = '0px';
    C_L.height = height + 'px';
    C_R.height = height + 'px';
    C_R.width  = parseInt ( Crop.style.width  ) -  width + 'px';
    C_B.height = parseInt ( Crop.style.height ) - height + 'px';
    
    Wand.className = 'move';

    Wand.onmousedown = moveStart;
    Wand.onmouseup   = moveEnd;
    Wand.onmousemove = moveMove;
  }
  
  // Auswahl aufheben
  if ( k == 35 )
  {
    Wand.style.width  = '0px';
    Wand.style.height = '0px';
    Wand.style.top    = '0px';
    Wand.style.left   = '0px';
    
    Wand.onmousedown = selectStart;
    Wand.onmouseup   = selectEnd;
    Wand.onmousemove = selectSize;
  
    icl.value = 0;
    ict.value = 0;
    icw.value = 0;
    ich.value = 0;
  
    C_T.height = '0px';
    C_L.width  = '0px';
    C_R.width  = '0px';
    C_B.height = '0px'; 
  }
}