/*
DHTML Zoom Script 1.0
03/30/09
Eric Tsuei

Notes:
- var count, productStyle, rfx_embed_base, webRoot is set globally outside of this .js file
*/
//Static Objects
var defaultZoom = new Image(); defaultZoom.src = rfx_embed_base+"/PG_"+productStyle+"_ZM1.jpg";defaultZoom.onload = function(){setZoomParam()};
var currentImage = 1;
var dragObject = null;
var mainObject = null;
var zoomObject = null;
var zoomImage = null;
var zoomBoxObject = null;
var mainSize = 308;
var zoomMaxSize = null;
var zoomBoxSize = null;
var zoomOffsetDiffx = null;
var zoomOffsetDiffy = null;
var selectBox = new Array();
//JSON Objects
var mouseOffset={};
var mainOffset={}; mainOffset.left=mainOffset.trueLeft=mainOffset.top=mainOffset.right=mainOffset.bottom=null;
var zoomContainer={}; zoomContainer.width=zoomContainer.height=mainSize;
var zoomDif={}; 
var tH={}; tH.top=tH.right=tH.bottom=tH.left=tH.Size=null;
var standardImages= {}; standardImages.img = new Array();
var zoomImages = {}; zoomImages.img = new Array();
var thumbImages = {}; thumbImages.img = new Array();

function init(){
	//Initialize Values]
	selectBox = $$('select');
	mainObject = $('piContainer');mainObject.style.width=mainObject.style.height=mainSize+"px";mainObject.style.background = "url("+rfx_embed_base+"/PG_"+productStyle+"_FS.jpg) no-repeat 0px 0px";
	zoomObject = $('zoomContainer');zoomObject.style.width=zoomObject.style.height=mainSize+"px";
	zoomImage = $('zoomImage');zoomImage.style.width = zoomImage.style.height = mainSize;zoomImage.style.background = "url("+rfx_embed_base+"/PG_"+productStyle+"_ZM1.jpg) no-repeat 0px 0px";
	zoomBoxObject = $('zBox');zoomBoxObject.style.width=zoomBoxObject.style.height=zoomBoxSize+"px";zoomBoxObject.style.background = "url("+rfx_embed_base+"/PG_"+productStyle+"_FS.jpg) no-repeat 0px 0px";
	//Mouse On&Off Events
	document.onmousemove = mouseMove;
	mainObject.onmouseover = zoomBoxObject.onmouseover = function(){zoomOn()}
	mainObject.onmouseout = function(){zoomOff()}
	//Intiailize Offsets & Thresholds
	offsetThreshInit();
	//Position Zoom Container
	zoomObject.style.top = mainOffset.top+55+"px"; //change this to move the zoomed image up and down
	zoomObject.style.left = mainOffset.trueLeft+318+"px";
	preloadImages(count);
	displayThumbScroll(count);
}
function mouseMove(ev){ 
	ev = ev || window.event; 
	var mousePos = mouseCoords(ev);
	var borderDif = 2;//Compensate for 1px Border
	var x; var y;
	if(dragObject){
		if(mousePos.y<tH.top){ y = 0;
		}else if(mousePos.y>(tH.bottom-borderDif)){ y = mainSize-zoomBoxSize-borderDif;
		}else{ y = mousePos.y-mainOffset.top-tH.Size;
		}
		if(mousePos.x<tH.left){ x = 0;
		}else if(mousePos.x>(tH.right-borderDif)){ x = mainSize-zoomBoxSize-borderDif;
		}else{x = mousePos.x-mainOffset.left-tH.Size;
		}
		dragObject.style.top = y+mainOffset.top+"px";
		dragObject.style.left = x+mainOffset.trueLeft+"px";
		dragObject.style.backgroundPosition = "-"+x+"px -"+y+"px";
		zoomImage.style.backgroundPosition = ((Math.round((x)/zoomDif.x)-zoomOffsetDiffx)*-1)+"px "+((Math.round(y/zoomDif.y)-zoomOffsetDiffy)*-1)+"px";
	}
} 
function mouseCoords(ev){ 
	if(ev.pageX || ev.pageY){ 
		return {x:ev.pageX, y:ev.pageY}; 
	} 
	return { 
		x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
		y:ev.clientY + document.body.scrollTop  - document.body.clientTop 
	}; 
}
function offsetThreshInit(){
	mainOffset.left=mainOffset.trueLeft=mainOffset.right=mainOffset.top=mainOffset.bottom=tH.Size=tH.top=tH.bottom=tH.left=tH.right=0;
	mainOffset.trueLeft = 259;
	mainOffset.left = $('piContainer').cumulativeOffset().left;	
	mainOffset.top = $('piContainer').cumulativeOffset().top-7;
	mainOffset.right = mainOffset.left+mainSize;
	mainOffset.bottom = mainOffset.top+mainSize;
	tH.Size=Math.round(zoomBoxSize/2);
	tH.top=mainOffset.top+tH.Size;
	tH.bottom=mainOffset.bottom-tH.Size;
	tH.left=mainOffset.left+tH.Size;
	tH.right=mainOffset.right-tH.Size;
}
function zoomOn(){
	dragObject = $('zBox');
	ie6SelectFix(true);
	zoomBoxObject.style.display='block';
	zoomObject.style.display='block';
	$('piOverlay').style.display='block';
	
}
function zoomOff(){
	dragObject = null;
	ie6SelectFix(false);
	zoomBoxObject.style.display='none';
	zoomObject.style.display='none';
	$('piOverlay').style.display='none';
}
function setZoomParam(){
	zoomMaxSize = (defaultZoom.width>=defaultZoom.height)?defaultZoom.width:defaultZoom.height;
	(zoomMaxSize>308)?zoomMaxSize:zoomMaxSize=308;
	zoomBoxSize = Math.round((308/zoomMaxSize)*308);
	zoomDif.x=zoomDif.y=(mainSize/zoomMaxSize);
}
function preloadImages(count){
	//Load Regular,Zoom,Thumbs
	standardImages.img[1]=new Image();zoomImages.img[1]=new Image();thumbImages.img[1]=new Image();
	standardImages.img[1].src = rfx_embed_base+"/PG_"+productStyle+"_FS.jpg";
	zoomImages.img[1].src = rfx_embed_base+"/PG_"+productStyle+"_ZM1.jpg";
	thumbImages.img[1].src = rfx_embed_base+"/PG_"+productStyle+"_TN.jpg";
	for(var i=2;i<count+1;i++){
		standardImages.img[i] = new Image();
		zoomImages.img[i] = new Image();
		thumbImages.img[i] = new Image();
		standardImages.img[i].src = rfx_embed_base+"/PG_"+productStyle+"__"+i+"_FS.jpg";
		zoomImages.img[i].src = rfx_embed_base+"/PG_"+productStyle+"__"+i+"_ZM1.jpg";
		thumbImages.img[i].src = rfx_embed_base+"/PG_"+productStyle+"__"+i+"_TN.jpg";
	}zoomImages.img[1].onload = function(){setImage(1,1)}
	//Thumbnails
	for(var i=1;i<count+1;i++){
		var tempObj=document.createElement('div');
		tempObj.id="thumb_"+i;tempObj.value=i;
		tempObj.style.background="url("+thumbImages.img[i].src+") no-repeat center center";
		tempObj.onclick = function(){setImage(currentImage,this.value)}
		$('productThumbs').appendChild(tempObj);
		$('thumb_'+i).addClassName('piThumb');
	}var pH = document.createElement('div'); $('productThumbs').appendChild(pH);
	//HoverText Image
	$('piHoverText').style.background = "url("+webRoot+"/images/zoomInTxt.gif) no-repeat bottom center";
}
function displayThumbScroll(count){
	var pT = $j('#productThumbs');
	var pTH = pT.height();
	var pTTop = 0;
	if(count>5){
		$j('#pTArrowUp,#pTArrowDown').css({display:'block'});
		$j('#pTArrowUp').click(function(){
			if(pTTop>0){
				pTTop=pTTop-260;
				pT.animate({top:'-'+pTTop+'px'},300,'swing');
			}else{
				return;
			}
		});
		$j('#pTArrowDown').click(function(){
			if(pTH>=(pTTop+260)){
				pTTop=pTTop+260;
				pT.animate({top:"-"+pTTop+'px'},300,'swing');
			}else{
				return;
			}
		});
	}
}
function setImage(currentImage,newImage){
	mainObject.style.background = "url("+standardImages.img[newImage].src+") no-repeat 0px 0px";
	zoomImage.style.background = "url("+zoomImages.img[newImage].src+") no-repeat 0px 0px";
	zoomBoxObject.style.background = "url("+standardImages.img[newImage].src+") no-repeat 0px 0px";
	zoomOffsetDiffx = (zoomMaxSize-zoomImages.img[newImage].width)/2;
	zoomOffsetDiffy = (zoomMaxSize-zoomImages.img[newImage].height)/2;
}
function ie6SelectFix(display){
	if(display){
	for(var i=0;i<selectBox.length;i++){selectBox[i].style.visibility = "hidden";}
	}else{
	for(var i=0;i<selectBox.length;i++){selectBox[i].style.visibility = "visible";}
	}
}
Event.observe(window,'load',function(){init()});
Event.observe(window,'resize',function(){offsetThreshInit();});
Event.observe(window,'focus',function(){offsetThreshInit();});