/***
 * --------------------------------------------------------------------------
 * iZoom (v. rc-1 - 2008-5-21 )
 * @author			courtney ringer
 * @infos			http://www.whitesharkcreations.com
 * --------------------------------------------------------------------------
 */
var iZoom = Class.create();
iZoom.prototype = {
	/* ----------------------- */
	initialize: function(el){
		this.background = $(el);
		if (!this.background) return false;
		this.loaderImg = '../images/izoom/indicator-large2.gif';
		this.createThumbnails();
 		this.preloader();
	},
	/* ----------------------- */		
	createThumbnails : function(){
		$$('a[rel$='+this.background.id+']').each(function(element){
			this.removeThumbnail(element);
			element.observe('click', function(e){
				Event.stop(e);
				this.swapImage(element);
			}.bind(this));
		}.bind(this));		
	},
	/* ----------------------- */		
	removeThumbnail : function(thumbObj) {		
		thumbImage = thumbObj.getElementsBySelector("img")[0];		
		new Ajax.Request(thumbImage.src, { method: 'get',
			onSuccess: function(transport) { thumbObj.setStyle({"visibility": "visible"}); },						 
			onFailure: function(transport) { thumbObj.remove(); }
		}); 		
	},
	/* ----------------------- */	
	preloader : function() {
		this.loaderHandler("on");
		this.imageSmall = this.background.getElementsBySelector("img")[0].src;
		this.imageBig = this.background.href;
		this.images = [this.imageBig];
		this.loadedImages = new Image();
		this.loadedImages.onload=function(){this.createZoom()}.bind(this)
		this.loadedImages.src = this.images;
	},	
	/* ----------------------- */	
    createZoom : function() {
		/*** Create Elements */	
		this.createElements();
		/*** Set Dimensions */	
		var sDeltaW = this.background.offsetWidth - this.dragBox.offsetWidth;		
		var sDeltaH = this.background.offsetHeight - this.dragBox.offsetHeight;	
		var zDeltaH = this.zoomImg.height - this.zoomBox.offsetHeight;
		var zDeltaW = this.zoomImg.width - this.zoomBox.offsetWidth;
		this.hScale = zDeltaH / sDeltaH;
		this.wScale = zDeltaW / sDeltaW;
		this.halfW = this.dragBox.offsetWidth / 2;
		this.halfH = this.dragBox.offsetHeight / 2;							
		/*** Setup Methods */
		this.assignEvents();				
		this.setupBoundBox();		
		this.loaderHandler("off");		
    },		
	/* ----------------------- */	
    createElements : function() {
		// Image Holder
		new Insertion.After(this.background,"<div id='dragLayer'></div>");
		this.imgHolder = $("dragLayer");
		// Tint	
		new Insertion.Bottom(this.imgHolder,"<div id='tint'></div>");
		this.tint = $("tint");
		// Drag Box	
		new Insertion.Bottom(this.imgHolder,"<div id='dragBox'></div>");
		this.dragBox = $("dragBox");
		// Drag Image
		new Insertion.Bottom(this.dragBox,"<img id='dragImg' src='"+this.imageSmall+"' />");	
		this.dragImg = $("dragImg");
		// Zoom Box	
		new Insertion.After(this.imgHolder,"<div id='zoomLayer'></div>");
		this.zoomBox = $("zoomLayer");
		// Zoom Image
		new Insertion.Bottom(this.zoomBox,"<img id='zoomImg' src='"+this.imageBig+"' />");	
		this.zoomImg = $("zoomImg");	
    },	
	/* ----------------------- */	
    assignEvents : function() {				
        this._mouseover = this.mouseOverHandler.bind(this);
		this._mouseout = this.mouseOutHandler.bind(this);
		this._mousemove = this.mouseMoveHandler.bind(this);
		this.tint.observe("mouseover",this._mouseover);
		Event.observe(window, "resize",this.setupBoundBox.bind(this));
    },
	/* ----------------------- */
    setupBoundBox : function() {		
        var bgPos = Position.cumulativeOffset(this.background);
		this.boundBox = {left:bgPos[0], top:bgPos[1], right: bgPos[0] + this.tint.offsetWidth, btm: bgPos[1] + 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.setStyle({left : bgPos[0] + 'px', top : bgPos[1] + 'px', display : 'block'});
        this.zoomBox.setStyle({left:(bgPos[0] + this.tint.offsetWidth) + 'px', top:(bgPos[1] + this.tint.offsetHeight - this.zoomBox.offsetHeight) + 'px'});		
        this.tint.setOpacity(0.01);
    },
	/* ----------------------- */	
	loaderHandler : function(state) {
		var bgState = state == "off" ? "visible" : "hidden";
		var bgImage = state == "off" ? "none" : this.loaderImg;		
		this.background.getElementsBySelector("img")[0].setStyle({"visibility": bgState});
		this.background.setStyle({"background": 'url("'+bgImage+'")'});
	},
	/* ----------------------- */	
	swapImage : function(element) {		
		this.background.getElementsBySelector("img")[0].src = element.getElementsBySelector("img")[0].src;
		this.background.href = element.href;
		this.imgHolder.remove();
		this.zoomBox.remove();
		this.preloader();
	},	
	/* ----------------------- */	
	/* -- Mouse Handling	   */		
	/* ----------------------- */	
    mouseOutHandler : function(e) {		
		Event.stopObserving(document.body, "mousemove", this._mousemove );
        //if(this.fadeEffect) this.fadeEffect.set(0);
        this.dragBox.style.visibility = 'hidden';        
        this.zoomBox.setStyle({zIndex:'-10', opacity:0, filter:'alpha(opacity:0)'});
		this.tint.setOpacity(0.01);
    },
	/* ----------------------- */
	mouseOverHandler : function(e) {
		Event.observe(document.body, "mousemove", this._mousemove );		
        this.dragBox.style.visibility = 'visible';
        this.zoomBox.setStyle({zIndex:'10', opacity:1,filter:'alpha(opacity:100)',visibility:'visible'});				
		//this.fadeEffect = new Fx.Style(this.zoomBox.id, 'opacity', {wait:false}).start(0,1);
		this.tint.setOpacity(.45);		
    },	
	/* ----------------------- */
	mouseMoveHandler : function(e) {	
        var x = this.pointerX(e), y = this.pointerY(e);		
        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.dragBox.setStyle({left:left+'px', top:top+'px'});
        this.dragImg.setStyle({left:(-left)+'px', top:-top+'px'});
        this.zoomImg.setStyle({left:-left*this.wScale + 'px', top:-top*this.hScale + 'px'});
    },
	/* ----------------------- */	
	/* -- Helper Methods */			
	/* ----------------------- */	
	isMouseOut: function(x, y, boundBox) {
		return (x < boundBox.left ) || (x > boundBox.right) || (y < boundBox.top ) || (y > boundBox.btm) ;
	},	
	/* ----------------------- */
	pointerX: function(e) {
		return e.pageX || (e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft));
	},
	/* ----------------------- */
	pointerY: function(e) {
		return e.pageY || (e.clientY + (document.documentElement.scrollTop || document.body.scrollTop));
	}	
};
Event.observe(window, 'load', function(){var iZoomObj = new iZoom("iZoom");}, false);