var bigWidth; //width of the zoom image 
var smallWidth; // width of zoomed image
var bigHeight; // height of the zoom image
var bigX = 0; // zoom image x position
var bigY = 0; // zooom image y position
var smallHeight;
var bigBoxWidth;
var bigBoxHeight;
var factorY;
var factorX;
var easing = 0.18;
var zoomInterval = 0; 
var mouseX = 0;
var mosueY = 0;



var i = 0;
var g = 92*5;
var idc = 0;
var delay = 0;
var rollOverInetrval;
var hideInterval;
var zoomImageShown = false;

 //slider var
  
 
var sHeight;
var thumbsPos = new Array();
var thumbsPosDown = new Array();


var scrollHeight; 
var w=60;
var divw=350;
var imgAmount;

 
 
 
 
function initProductPage()
{
	
	document.body.onmousemove=setMouseCoords;

	smallWidth = 330;
	smallHeight = 345;

	bigBoxWidth = document.getElementById('zoom-box').offsetWidth;
	bigBoxHeight = document.getElementById('zoom-box').offsetHeight;


	document.getElementById('medium-image').onclick=showBig;  
	document.getElementById('large-image').onmouseover=clearIntrv; 
	document.getElementById('large-image').onmouseout=hideBig;


	bigWidth = document.getElementById('zoom-image').offsetWidth ;
	bigHeight = document.getElementById('zoom-image').offsetHeight ;
	
	
	sHeight = w; 
	
	YAHOO.util.Event.addListener("up-arrow", "click", moveLeft);
	YAHOO.util.Event.addListener("down-arrow", "click", moveRight);
	countsImages ('thumbnails-container');

}



function countsImages (element_id)
{
	
	images    = document.getElementById(element_id).getElementsByTagName('img'); 
	imgAmount = (images.length -1);
	 
	idcc      = (images.length -1);
	 

	for(var d=0;d<images.length; d++)
	{
		 
		thumbsPos.push(sHeight*(d));
		thumbsPosDown.unshift(sHeight*(d));
		
		document.getElementById(images[d].id).style.left = thumbsPos[d]+'px';
		//YAHOO.util.Event.addListener(images[d].id, "click", moveRight);
	 
		
		
		
		
	}
}



 


//scroll fucntionality 

function countElements(container_id, tag)
{
	var container = document.getElementById(container_id);
	var elem_count = container.getElementsByTagName(tag).length;
	return elem_count;
}

 
 
function moveLeft(e)
{		
	if(idc>0)
	{
		idc--;		
	}		
	else
	{
		idc=images.length-1;
	}	
	
    var tempPoss = thumbsPos.shift();
	thumbsPos.push(tempPoss);
	document.getElementById(images[idc].id).style.left = (w*-1)+'px';	
	
	for(var d=0;d<images.length;d++)
	{
	
	 
		var moves = new YAHOO.util.Anim(images[d].id, {left: {to: thumbsPos[d]}} ,  0.6 ,YAHOO.util.Easing.easeOutStrong); 		
		moves.animate();
				
				
	}
	 

 }
 
 


 
 
//move thumbnails up 
function moveRight(e) 
{ 				
	if(document.getElementById(images[idc].id).offsetLeft<w) 
	{		
		document.getElementById(images[idc].id).style.left = (divw+w)+'px';
	}
	if(idc<imgAmount)
	{						
		idc++;
	}
	else 
	{
		idc=0;
	}
		
	var tempPos = thumbsPos.pop();
	thumbsPos.unshift(tempPos);
	
	for(var d=0;d<images.length;d++)
	{	
		var move = new YAHOO.util.Anim(images[d].id, {left: {to: thumbsPos[d]}} ,  0.6 ,YAHOO.util.Easing.easeOutStrong); 		
		move.animate();	
	}
	
}









function setMouseCoords(e)
{
	var ie = document.all?true:false;
	if(!e)
	{
		   e = window.event;
	}
	if(e.pageX || e.pageY)
	{
		   mouseX = e.pageX;
		   mouseY = e.pageY;
		
	
	
	}
	else if(e.clientX || e.clientY)
	{		
	   mouseX = YAHOO.util.Event.getPageX(e); 
	   mouseY = YAHOO.util.Event.getPageY(e); 	
	}
}


//show zoom image 
function showBig()
{


  var imgpath=  document.getElementById('zoom-image').src;
 
  
  if( imgpath.search("~~~~~") == -1 ){

    clearIntrv();	
	
  	document.getElementById('zoom-image').style.visibility = 'visible';
  	document.getElementById('zoom-box').style.visibility = 'visible';
  	largeImageShown = true;
  
  	zoomInterval = setInterval("animateBigImage()",20);
	
	}
}





function loadBig(img,prodId,channel, cache_url) {

        prepViewLargeImageLink(prodId, img, channel, cache_url)
        document.getElementById("medium-image").src =  cache_url+"/images/products/"+prodId+"/" + img + "_l.jpg";
        loadZoomImage(img,prodId, cache_url);
 
    }


function loadZoomImage(img,prodId, cache_url){
	    document.getElementById("zoom-image").src = cache_url+"/images/products/"+prodId+"/" + img + "_xl.jpg";
}




function clearIntrv(){
	clearTimeout(hideInterval);
		
}



function hideBig(){
	
	hideInterval = setTimeout("hideDelay()",250);
	
}






function hideDelay(){
	
	if(document.getElementById('zoom-image').style.visibility != 'hidden')
	{
		
		clearInterval (zoomInterval);	
		document.getElementById('zoom-image').style.visibility = 'hidden';
		document.getElementById('zoom-box').style.visibility = 'hidden';
			
	}

	
}

function hideBigBox()
{	
	document.getElementById('zoom-image').style.visibility = 'hidden';
}


//zoom function 
function animateBigImage()
{
	var xPos =  mouseX;
	var yPos =  mouseY;	
	var bigXPos = YAHOO.util.Dom.getX('zoom-image');
	var bigYPos = YAHOO.util.Dom.getY('zoom-image');

	var largeXOffset = YAHOO.util.Dom.getX('medium-image');
	var largeYOffset = YAHOO.util.Dom.getY('medium-image');

	//var bigXPos = document.getElementById('zoom-image').offsetLeft;
	//var bigYPos = document.getElementById('zoom-image').offsetTop;	

	factorX = (bigWidth- bigBoxWidth)/smallWidth;
	factorY = (bigHeight-bigBoxHeight)/smallHeight ;	

	var targetX = 0 - (factorX * (xPos-largeXOffset));
	var targetY = 0 - (factorY * (yPos-largeYOffset));		

	targetX = Math.round(targetX);
	targetY = Math.round(targetY);

	bigX +=  ((targetX-bigX)*easing); 
	bigY +=  ((targetY-bigY)*easing);	

	bigY = Math.round(bigY);
	bigX = Math.round(bigX);
	
	document.getElementById("zoom-image").style.left  = bigX + 'px';
	document.getElementById("zoom-image").style.top = bigY + 'px';
 	//var move = new YAHOO.util.Anim('bImg', {top: { to: bigY }, left:{to:bigX}}, 1 ,YAHOO.util.Easing.easeOut); 
}

//scroll fucntionality