var _MediumImageContainerId, _AngleThumbnailsId, _ZoomboxId;
var _ZoomImageX = 0;
var _ZoomImageY = 0;
var _ZoomInterval; 
var _MouseX = 0;
var _MouseY = 0;
var _HideInterval;
var FADE_TIME = 500;
var _SelectedAngleIndex = 0;
var _MediumImages, _ChangeAngleLinks, _ZoomImageContainers, _ZoomImages;
var _SavedAngleThumbnailClicks = new Array();
var _ContainerWidth, _ContainerHeight, _ZoomImageWidth, _ZoomImageHeight;

/* Call this method on load */
function registerProductPageScripts(mediumImageContainerId, angleThumbnailsId, zoomboxId)
{
	_MediumImageContainerId = mediumImageContainerId;
	_AngleThumbnailsId = angleThumbnailsId;
	_ZoomboxId = zoomboxId;
	
	_MediumImages = $(_MediumImageContainerId).getElementsByTagName('img');
	
	//alert($(_AngleThumbnailsId));
//	alert(typeof $(_AngleThumbnailsId) != 'undefined');
	
	
	if($(_AngleThumbnailsId))
	{
	    _ChangeAngleLinks = $(_AngleThumbnailsId).getElementsByTagName('a');
	}
	
	_ZoomImageContainers = $(_ZoomboxId).getElementsByTagName('div');
	_ZoomImages = $(_ZoomboxId).getElementsByTagName('img');
	
	Event.observe(document.body, 'mousemove', setMouseCoords);

	for(var i=0;i<_MediumImages.length;i++)
	{
		Event.observe(_MediumImages[i], 'click', new Function("showZoomImage(" + i + ");"));
	}

	Event.observe($(_MediumImageContainerId), 'mouseover', function() { clearTimeout(_HideInterval); });
	Event.observe($(_MediumImageContainerId), 'mouseout', hideZoomImageDelayed);
}

/* Sets _MouseX and _MouseY variables with the current mouse position */
function setMouseCoords(e)
{
    if(!e) var e = window.event;
    
    if(e.pageX || e.pageY)
    {
           _MouseX = e.pageX;
           _MouseY = e.pageY;
    }
    else if(e.clientX || e.clientY)
    {		
       _MouseX = Event.pointerX(e); 
       _MouseY = Event.pointerY(e); 	
    }
}

function showZoomImage(index)
{           
	_ZoomImageX = 0;
	_ZoomImageY = 0;
	_ZoomImages[index].style.left = 0;
	_ZoomImages[index].style.top = 0;
	_ContainerWidth = _ZoomImageContainers[index].offsetWidth;
	_ContainerHeight = _ZoomImageContainers[index].offsetHeight;			
	_ZoomImageWidth = _ZoomImages[index].offsetWidth;
	_ZoomImageHeight = _ZoomImages[index].offsetHeight;

    _ZoomImages[index].style.visibility = 'visible';
    _ZoomImageContainers[index].style.visibility = 'visible';

	clearInterval (_ZoomInterval);	        
    _ZoomInterval = setInterval("animateZoomImage(" + index + ")",20);
    
    _MediumImages[index].title = ''; // Clear tooltip (otherwise it gets annoying)
}

function hideZoomImageDelayed()
{
	clearTimeout(_HideInterval);
    hideInterval = setTimeout("hideZoomImage()",250);
}

function hideZoomImage()
{
	clearInterval (_ZoomInterval);
	
	for(var i=0;i<_ZoomImages.length;i++)
	{
		if(_ZoomImageContainers[i].style.visibility != 'hidden')
		{
			_ZoomImages[i].style.visibility = 'hidden';
			_ZoomImageContainers[i].style.visibility = 'hidden';
		}
    }
}

function animateZoomImage(index)
{
	var EASING = 0.18;
	var SMALL_HEIGHT = 575;
	var SMALL_WIDTH = 280;
	
    var xPos =  _MouseX;
    var yPos =  _MouseY;	

    var mediumImageOffsets = _MediumImages[index].cumulativeOffset();

    var factorX = (_ZoomImageWidth-_ContainerWidth)/SMALL_WIDTH;
    var factorY = (_ZoomImageHeight-_ContainerHeight)/SMALL_HEIGHT;	

    var targetX = 0 - (factorX * (xPos-mediumImageOffsets[0]));
    var targetY = 0 - (factorY * (yPos-mediumImageOffsets[1]));		

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

    _ZoomImageX +=  ((targetX-_ZoomImageX)*EASING); 
    _ZoomImageY +=  ((targetY-_ZoomImageY)*EASING);	

	_ZoomImageX = Math.round(_ZoomImageX);
    _ZoomImageY = Math.round(_ZoomImageY);
	
    _ZoomImages[index].style.left = _ZoomImageX + 'px';
    _ZoomImages[index].style.top = _ZoomImageY + 'px';
}
        
/* Disable clicking of angle pics */
function disableAnglePicClicking(i)
{
	for(var j=0; j<_ChangeAngleLinks.length;j++)
	{
		_SavedAngleThumbnailClicks[j] = _ChangeAngleLinks[j].onclick;
		_ChangeAngleLinks[j].onclick = function () { return false; }
	}
	
	Event.stopObserving(_MediumImages[i], 'click', new Function("showZoomImage(" + i + ");"));
}

/* Reenable clicking of angle pics */
function reenableAnglePicClicking(i)
{
	for(var j=0; j<_ChangeAngleLinks.length;j++)
	{
		_ChangeAngleLinks[j].onclick = _SavedAngleThumbnailClicks[j];
	}
	
	Event.observe(_MediumImages[i], 'click', new Function("showZoomImage(" + i + ");"));
}

/* SWAP IMAGE STEPS */

function swapZoomImage(index)
{		
	if (index==_SelectedAngleIndex) return;
	swapZoomImageStep1(index);
}

function swapZoomImageStep1(index)
{
	clearInterval (_ZoomInterval);
	clearTimeout(_HideInterval);
	disableAnglePicClicking(index);
	
			
	// Fade out the old image
	Effect.Appear(_MediumImages[_SelectedAngleIndex], {from:1.0,to:0.0,duration:FADE_TIME/1000});
	
//	alert(_ChangeAngleLinks[_SelectedAngleIndex].id);
//	alert(_ChangeAngleLinks[_SelectedAngleIndex].className);

//    alert(_SelectedAngleIndex);
//    alert(index);
    
    // change highlight
    _ChangeAngleLinks[_SelectedAngleIndex].className = "";
    _ChangeAngleLinks[index].className = "selected";
	
	// Wait for the fade out to complete, then begin the next step in the process
	setTimeout('swapZoomImageStep2(\'' + index + '\');', FADE_TIME);
}

function swapZoomImageStep2(index)
{
	// Complete hide the old image, so that the fade in works correctly
	_MediumImages[_SelectedAngleIndex].style.display = 'none';
	
	// Fade in the new image
	Effect.Appear(_MediumImages[index], {duration: FADE_TIME/1000});

	setTimeout('swapZoomImageStep3(' + index + ');', FADE_TIME);
}

function swapZoomImageStep3(index)
{
	_SelectedAngleIndex = index;
	reenableAnglePicClicking(index);
}