function ProductZoomTarget() {
  this.dispose = function() {
    if ( !this.htmlElement )
      return ;
   this.htmlElement.style.visibility = 'hidden';
  }
  this.isReady = function() {
    return ( this.htmlElement );
  }
  this.create = function( e ) {
    var mouse_xy = Mouse.getXY( e );

    if ( this.htmlElement ) {
      this.htmlElement.style.visibility = 'visible';
      ProductZoomTrigger.zoomArea.moveTo( mouse_xy.x + 20, mouse_xy.y );
      return ;
    }
    this.htmlElement = document.createElement( 'div' );
    this.htmlElement.id = 'productZoomArea';
   this.htmlElement.style.background = 'url(' + ProductZoomTarget.LOADING_PIX_URL + ') no-repeat #fff -100px -100px';
    ProductZoomTrigger.zoomArea.moveTo( mouse_xy.x + 20, mouse_xy.y);
    document.getElementsByTagName( 'body' )[ 0 ].appendChild( this.htmlElement );
  }
  this.setImage = function( imgElement ) {
    if ( this.htmlElement.childNodes.length > 0 ) {
      this.htmlElement.replaceChild( imgElement, this.htmlElement.firstChild );
    } else {
      this.htmlElement.appendChild( imgElement );
    } 
  }
  this.moveTo = function( x, y ) {
    this.htmlElement.style.top = y + 'px';
    this.htmlElement.style.left = x + 'px';
  }

  this.htmlElement = null;
}

ProductZoomTarget.LOADING_PIX_URL = '/pix/loading.gif';

function ProductZoomTrigger( triggerElement ) {
  this.onZoomLoaded = function( imageLoaded ) {
    ProductZoomTrigger.maxY = DocumentDimension.getViewportHeight() + DocumentDimension.getScrollHeight();
    ProductZoomTrigger.zoomArea.setImage( imageLoaded );
 
  }
  this.onMouseMove = function( e ) {
    if ( !ProductZoomTrigger.zoomArea.isReady() )
      return ;

    var mouse_xy = Mouse.getXY( e );
    var y = mouse_xy.y;
    if ( y >= ProductZoomTrigger.maxY - 102 ) {
      while( y >= ProductZoomTrigger.maxY - 102 )
        y -= 1;
    }

    ProductZoomTrigger.zoomArea.moveTo( mouse_xy.x + 20, y - 100 );
  }
  this.onMouseOver = function( e ) {
    var regExp = new RegExp( '/v80_' );
    if ( regExp.test( this.trigger.src ) ) {
      ProductZoomTrigger.zoomArea.create( e );
      this.over = true;
      new ImagePreloader( this.trigger.src.replace( regExp, '/v200_' ), Delegate.create( this, 'onZoomLoaded' ) );
    }
  }
  this.onMouseOut = function( e ) {
    ProductZoomTrigger.zoomArea.dispose();
    this.over = false;
  }

  this.trigger = triggerElement;
  this.over = false;

  addListener( this.trigger, 'mouseover', Delegate.create( this, 'onMouseOver' ) );
 addListener( this.trigger, 'mouseout', Delegate.create( this, 'onMouseOut' ) );
 addListener( this.trigger, 'mousemove', Delegate.create( this, 'onMouseMove' ) );
}

ProductZoomTrigger.zoomArea = new ProductZoomTarget();
ProductZoomTrigger.maxY = 0;

addListener( window, 'load', function() {
  new ImagePreloader( ProductZoomTarget.LOADING_PIX_URL, function() {
	  var imgs = document.getElementsByTagName( 'img' );
	  for( var i=0; i<imgs.length; i++ )
	    if ( imgs[ i ].className.indexOf( 'zoomable' ) != -1 )
	      {
	      new ProductZoomTrigger( imgs[ i ] );
	      }
  } );
} );