var def_box="1.0";		// box.js version

function Dimension(width,height)
{
  this.width = width;
  this.height = height;
}
Dimension.prototype.toString =  function()
{
  return this.width+"x"+this.height;
}


function Boundry(top,left,width,height)
{
  this.top = top;
  this.left = left;
  this.dimension = new Dimension(width,height);
  this.right = this.left+this.dimension.width;
  this.bottom = this.top+this.dimension.height;
}
Boundry.prototype.toString =  function()
{
  return this.top+","+this.right+","+this.bottom+","+this.left+" - "+this.dimension.toString()
}
Boundry.prototype.pointInBounds =  function( dimension )
{

  return (this.left <= dimension.width && dimension.width <= this.right) &&
         (this.top <= dimension.height && dimension.height <= this.bottom );
}
Boundry.prototype.center =  function( offsetX, offsetY )
{
  offsetX = isNaN(parseInt(offsetX))?50:offsetX;
  offsetY = isNaN(parseInt(offsetY))?50:offsetY;
  return new Dimension( (this.left + Math.round(this.dimension.width*(offsetX/100)) ), (this.top + Math.round(this.dimension.height*(offsetY/100)) ) );
}
Boundry.prototype.topLeft =  function()
{
  return new Dimension( this.left, this.top );
}

Boundry.prototype.moveTo =  function( dimension, offsetX, offsetY )
{
  offsetX = isNaN(parseInt(offsetX))?50:offsetX;
  offsetY = isNaN(parseInt(offsetY))?50:offsetY;
  this.left = dimension.width - (this.dimension.width*(offsetX/100));
  this.right = this.left + this.dimension.width;
  this.top = dimension.height - (this.dimension.height*(offsetY/100));
  this.right = this.top + this.dimension.height;
}

Boundry.prototype.grow = function( pixelX, pixelY )
{
  this.left   = Math.max(0, this.left-(pixelX/2));
  this.dimension.width  = this.dimension.width+pixelX;
  this.top    = Math.max(0, this.top-(pixelY/2));
  this.dimension.height = this.dimension.height+pixelY;

  this.right  = this.left+this.dimension.width;
  this.bottom = this.top+this.dimension.height;
}

Boundry.prototype.growToFit = function( pixelStep, fitDim )
{
  var percentGrowth = 0;
  var center        = this.center();
  var newWidth      = 0;
  var newHeight     = 0;

  if( fitDim.width > fitDim.height )
  {
    percentGrowth = (pixelStep / (fitDim.width-this.dimension.width));
    newWidth      = Math.round( Math.min(fitDim.width, this.dimension.width + pixelStep) );
    newHeight     = Math.round( Math.min(fitDim.height, this.dimension.height + ((fitDim.height-this.dimension.height)*percentGrowth)) );
  }
  else
  {
    percentGrowth = (pixelStep / (fitDim.height-this.dimension.height));
    newHeight     = Math.round( Math.min(fitDim.height, this.dimension.height + pixelStep) );
    newWidth      = Math.round( Math.min(fitDim.width, this.dimension.width + ((fitDim.width-this.dimension.width)*percentGrowth)) );
  }

  this.left             = Math.max(0, center.width - Math.round(newWidth/2) );
  this.dimension.width  = newWidth;
  this.top              = Math.max(0, center.height - Math.round(newHeight/2) );
  this.dimension.height = newHeight;

  this.right  = this.left+this.dimension.width;
  this.bottom = this.top+this.dimension.height;
}

Boundry.prototype.shrink = function( pixelX, pixelY )
{
  this.left   = this.left+(pixelX/2);
  this.dimension.width  = Math.max(0, this.dimension.width-pixelX);
  this.top    = this.top+(pixelY/2);
  this.dimension.height = Math.max(0, this.dimension.height-pixelY);

  this.right  = this.left+this.dimension.width;
  this.bottom = this.top+this.dimension.height;
}

Boundry.fromLayer = function( layerId )
{
  return new Boundry( getlayertop(layerId),
                      getlayerleft(layerId),
                      getlayerwidth(layerId),
                      getlayerheight(layerId)
                    );
}

Boundry.prototype.setLayer = function( layerId )
{
  sizelayer(layerId, this.dimension.width, this.dimension.height);
  movelayer(layerId, this.left, this.top);
}

Boundry.fromLayerClip = function( layerId )
{
  var width = getlayerwidth(layerId);
  var height = getlayerheight(layerId);
  var clipT = getcliptop(layerId);
  var clipL = getclipleft(layerId);
  var clipB = getclipbottom(layerId);
  var clipR = getclipright(layerId);
  clipT = isNaN(clipT)?0:clipT;
  clipB = isNaN(clipB)?height:clipB;
  clipL = isNaN(clipL)?0:clipL;
  clipR = isNaN(clipR)?width:clipR;

  var clip = new Boundry( clipT, clipL, (clipR-clipL), (clipB-clipT) );
  return clip;
}

Boundry.prototype.setLayerClip = function( layerId )
{
  cliplayer( layerId, this.left+"px", this.right+"px", this.top+"px", this.bottom+"px" );
}

Boundry.prototype.setWidth = function( width )
{
  var diff = width-this.dimension.width;
  this.dimension.width = width;
  this.left  -= (diff/2);
  if(this.left < 0){ this.left = 0; }
  this.right = this.left + width;
}

Boundry.prototype.setHeight = function( height )
{
  var diff = height-this.dimension.height;
  this.dimension.height = height;
  this.top  -= (diff/2);
  if(this.top < 0){ this.top = 0; }
  this.bottom = this.top + height;
}


function addEventListener( element, event_name, observer, capturing )
{
  if ( element.addEventListener ) // the DOM2, W3C way
  {
    element.addEventListener( event_name, observer, capturing );
  }
  else if ( element.attachEvent ) // the IE way
  {
    element.attachEvent( "on" + event_name, observer );
  }
}


addEventListener( document , "mousemove", captureMousePosition, false)

// Global variables
var mouseX = 0; // Horizontal position of the mouse on the screen
var mouseY = 0; // Vertical position of the mouse on the screen
var checkBounds = null;
function captureMousePosition(ev)
{
  if( checkBounds == null )
  {
	return;
  }

  var NS4=(document.layers)?true:false;
  var ttIE5 = (document.all)?true:false;
  var ttIE4 = (navigator.userAgent.indexOf('MSIE 4') != -1)?true:false;
  var opera = (navigator.userAgent.indexOf('Opera') != -1)?true:false;


  mouseX = (ev.clientX) ? ev.clientX : ev.x ;
  mouseX += (document.body.scrollLeft && !ttIE4) ? (document.body.scrollLeft) : (0);
  mouseX += (document.documentElement && !opera) ? (document.documentElement.scrollLeft) : (0);


  mouseY = (ev.pageY) ? ev.pageY : ev.y ;
  mouseY += (document.documentElement && ttIE5 && !opera) ? (document.documentElement.scrollTop) : (0);

  if( !checkBounds.pointInBounds( new Dimension( mouseX, mouseY ) ) )
  {
    imgHide()
  }
}

var clipBound;
var prvwBound;
var clipTO = null;
function imgReveal( img )
{
  clearTimeout(clipTO);
  if( $("#imgPrvwLink").length == 0 ){$("body").append("<a href=\"#\" id=\"imgPrvwLink\"><span id=\"imgPrvw\"><img id=\"imgPrvwAsset\"></span></a>")}

  imgSrc = img.style.backgroundImage;
  getElt("imgPrvwLink").href = getElt( "a."+ img.id.split(".")[1] ).href;	// set preview image href
  imgSrc = img.style.backgroundImage;
  imgUri = imgSrc.substring(4,imgSrc.length-1).replace(/\"/g,"");

  srcBound = Boundry.fromLayer( img.id );

  checkBounds = srcBound;  // set mouseout hot spot



  ldImg = getElt("imgPrvwAsset")
  ldImg.src = ""+imgUri;
  getElt("imgPrvw").style.backgroundImage = "url(" + imgUri + ")";

  prvwBound = Boundry.fromLayer( ldImg.id );
  prvwBound.moveTo( srcBound.center() );
  prvwBound.setLayer("imgPrvw");

  clipBound = new Boundry( (prvwBound.dimension.height/2)-(srcBound.dimension.height/2),(prvwBound.dimension.width/2)-(srcBound.dimension.width/2), srcBound.dimension.width, srcBound.dimension.height );

  clipBound.setLayerClip("imgPrvw");

  showlayer("imgPrvw");
  imgOpen( "imgPrvw", Math.round(Math.max( (prvwBound.dimension.width - clipBound.dimension.width), (prvwBound.dimension.height - clipBound.dimension.height) )/8) );

}

function imgOpen( layerid, growPixels )
{
  var layer = Boundry.fromLayer(layerid);
  var clip = Boundry.fromLayerClip(layerid);

  clip.growToFit( growPixels, layer.dimension );

  clip.setLayerClip(layerid);

  if( layer.dimension.width>clip.dimension.width || layer.dimension.height>clip.dimension.height)
  {
    clipTO = setTimeout( "imgOpen('"+layerid+"', "+growPixels+")", 30);
  }
}

function imgHide()
{
  hidelayer("imgPrvw");
  checkBounds = null;
  clearTimeout(clipTO);
}