/*
	@Class: ZoomImage
	
	@Brief: The Zoom Image Class will take an existing 
			image, generate an overlay mask of the zoomable area, 
			and then create an overlay image that shows the much 
			larger area. 
			
	@Author: Ian Holt (ian@o3world.com)
	
	@Notes: This class requires MooTools
*/

var ZoomImage = new Class({
	options: {
		drag: 'drag',
		zoom: 'zoom',
		bg:   'large_image',
		tint: 'tint'
	}, 
	
	initialize: function(options) {
		// Start-Up Code	
		this.setOptions(options);
		
		this.imgHolder  = $(this.options.drag + 'Layer');
		this.background = $(this.options.bg + '_bg');
		this.tint       = $(this.options.tint);
		this.dragBox    = $(this.options.drag + 'Box');
		this.zoomBox    = $(this.options.zoom + 'Layer');
		this.bgImg      = $(this.options.bg);
		this.dragImg    = $(this.options.drag + 'Img');
		this.zoomImg    = $(this.options.zoom + 'Img');
        
		//this.qtyDropDown = $('qtyDropDown');
		//this.zoomToolPic = $('zoomToolPic');
		this.tint.setStyles({'width': this.bgImg.offsetWidth, 'height': this.bgImg.offsetHeight });
	        
		var sDeltaW     = this.bgImg.offsetWidth - this.dragBox.offsetWidth;
		var sDeltaH     = this.bgImg.offsetHeight - this.dragBox.offsetHeight;
		
		var zDeltaH     = this.zoomImg.offsetHeight - this.zoomBox.offsetHeight;
		var zDeltaW     = this.zoomImg.offsetWidth - this.zoomBox.offsetWidth;
		
		this.hScale     = zDeltaH / sDeltaH;
		this.wScale     = zDeltaW / sDeltaW;
		
		this.halfW      = this.dragBox.offsetWidth  / 2;
		this.halfH      = this.dragBox.offsetHeight / 2;

		this.enableZoom = true;
		
		this.setupBoundBox();
		
		this._mouseover = this.mouseOverHandler.bindWithEvent(this);
		this._mouseout  = this.mouseOutHandler.bindWithEvent(this);
		this._mousemove = this.mouseMoveHandler.bindWithEvent(this);

		this.attach();
	},
	
	attach: function() {
		this.tint.addEvent( 'mouseover', this._mouseover );
		this.dragBox.addEvent( 'mouseover', this._mouseover );
		this.dragBox.addEvent( 'mouseout', this._mouseout );
	},
	
	detach: function() {
		this.tint.setStyles({'width': 0, 'height': 0 });
		this.tint.removeEvent( 'mouseover', this._mouseover );
		this.dragBox.removeEvent( 'mouseover', this._mouseover );
		this.dragBox.removeEvent( 'mouseout', this._mouseout );
	},
		
	setupBoundBox : function() {
		var position = this.background.getPosition();
		var bgPos    = [position.x, position.y];
			
		this.boundBox  = {
			left : position.x, 
			top  : position.y, 
			right: position.x + this.tint.offsetWidth, 
			btm  : position.y + this.tint.offsetHeight 
		};
		this.dragBound = { 
			left : 0, 
			right: this.tint.offsetWidth - 2 * this.halfW, 
			top  : 0, 
			btm  : this.tint.offsetHeight - 2 * this.halfH 
		};

		this.imgHolder.setStyles({'left': position.x, 'top' : position.y, 'display' : 'block'});
		this.zoomBox.setStyles({'left': ( position.x + this.tint.offsetWidth ), 'top' : ( position.y )});
	},
	
	mouseOutHandler : function(e) {

		if( !this.enableZoom ) {
			this.tint.removeEvent( 'mouseout', this._mouseout );
			return;
		}
		document.removeListener( 'mousemove', this._mousemove );
  
		// if( this.fadeEffect )
		//this.fadeEffect.cancel();
		
		this.dragBox.style.visibility     = 'hidden';
		this.zoomBox.setStyles({'zIndex': -10, 'opacity': 0, 'filter': 'alpha(opacity:0)'});
		this.tint.setStyles({'opacity': 0,'filter': 'alpha(opacity:0)', 'visibility': 'visible'});
		
		//this.zoomToolPic.src = '/assets/common/zoomOver.gif';
		//this.zoomToolPic.alt = 'roll on to zoom in';
	},

	mouseOverHandler : function(e) {
       
		if( !this.enableZoom ) {
			//this.setNoZoomMsg('no zoom image available.');
			this.tint.addEvent( 'mouseout', this._mouseout );
			return;
		}
		document.addListener( 'mousemove', this._mousemove );
       
		this.dragBox.style.visibility = 'visible';
		this.zoomBox.setStyles({'zIndex': 10, 'opacity': 0,'filter': 'alpha(opacity:0)', 'visibility':'visible'});
		var myEffects = new Fx.Styles(this.zoomBox, {duration: 1, transition: Fx.Transitions.linear});
		myEffects.start({ 'opacity': [0,1] });
		this.tint.setStyles({'opacity': .45,'filter': 'alpha(opacity:45)'});
       
	   	/*
		this.qtyDropDown.style.visibility = 'hidden';
		this.zoomToolPic.src = '/assets/common/zoomOut.gif';
		this.zoomToolPic.alt = 'roll off to zoom out';

		if( !this.hasEngaged ) {
			var time = new Date();
			this.engageTime = time.getTime();
		}
		*/
    },

	mouseMoveHandler : function(e) {
        
		// var x = Event.pointerX(e), y = Event.pointerY(e);
		var x = e.page.x;
		var y = e.page.y;
		if( this.isMouseOut(x, y, this.boundBox) ) { 
			this.mouseOutHandler(e); 
			return; 
		}
		x = x - this.halfW - this.boundBox.left; 
		y = y - this.halfH - this.boundBox.top;
		var left = x > this.dragBound.right ? this.dragBound.right : x < this.dragBound.left ? 0 : x;
		var top  = y > this.dragBound.btm ? this.dragBound.btm : y < this.dragBound.top ? 0 : y;

		this.dragImg = $(this.options.drag + 'Img');
		this.zoomImg    = $(this.options.zoom + 'Img');

		if( this.dragBox )
			this.dragBox.setStyles({ 'left': left, 'top': top });
		if( this.dragImg )
			this.dragImg.setStyles({ 'left': (-left-1), 'top': -top });
		if( this.zoomImg )
			this.zoomImg.setStyles({ 'left': -left*this.wScale, 'top': -top*this.hScale });
		
    },
	
	isMouseOut: function(x, y, boundBox) {
		return (x < boundBox.left ) || (x > boundBox.right) || (y < boundBox.top ) || (y > boundBox.btm) ;
	}
	
});

ZoomImage.implement(new Options, new Events);