window.onload = function()
	{
	if (document.getElementById('col-3'))
		{
		var container = document.getElementById('col-3');

		// Create zoom controls
		var zoomControls = document.createElement('div');
		zoomControls.id = 'zoomControls';
		zoomControls.style.display = 'none';


		// Create zoom controls level
		var zoomControlsLevel = document.createElement('div');
		zoomControlsLevel.id = 'zoomControlsLevel';
		zoomControlsLevel.appendChild( document.createTextNode('Zoom: 100%') );
		zoomControls.appendChild( zoomControlsLevel );

		// Create zoom controls level
		var zoomControlsHelp = document.createElement('div');
		zoomControlsHelp.id = 'zoomControlsHelp';
		zoomControlsHelp.appendChild( document.createTextNode('Click and drag your mouse on the image to pan') );
		zoomControls.appendChild( zoomControlsHelp );

		// Create zoom controls IN
		var zoomControlsIN = document.createElement('a');
		zoomControlsIN.id = 'zoomControlsIn';
		zoomControlsIN.href = 'javascript:void(0);'; 
		zoomControlsIN.onclick = function(){zoomIn();}
		zoomControlsIN.onfocus = function(){this.blur();}
		zoomControls.appendChild( zoomControlsIN );

		// Create zoom controls OUT
		var zoomControlsOUT = document.createElement('a');
		zoomControlsOUT.id = 'zoomControlsOut';
		zoomControlsOUT.href = 'javascript:void(0);'; 
		zoomControlsOUT.onclick = function(){zoomOut();}
		zoomControlsOUT.onfocus = function(){this.blur();}
		zoomControls.appendChild( zoomControlsOUT );

		// Create zoom controls RESET
		var zoomControlsRESET = document.createElement('a');
		zoomControlsRESET.id = 'zoomControlsReset';
		zoomControlsRESET.href = 'javascript:void(0);'; 
		zoomControlsRESET.onclick = function(){zoomReset();}
		zoomControlsRESET.onfocus = function(){this.blur();}
		zoomControls.appendChild( zoomControlsRESET );

		// Create zoom controls BR
		var zoomControlsBR = document.createElement('br');
		zoomControls.appendChild( zoomControlsBR );		

		// Add zoom controls into document
		container.insertBefore(zoomControls, container.childNodes[0]);

		zoomViewInit();
		}
	}


ua = navigator.userAgent.toLowerCase();
macintosh = (ua.indexOf("macintosh") != -1 || ua.indexOf("powerpc") != -1) ? 1 : 0;
isPresto = ((ua.indexOf("opera") != -1) ? 1 : 0);
isKhtml = ((ua.indexOf('konqueror') != -1 || ua.indexOf('khtml') != -1 || (ua.indexOf('safari') != -1 && macintosh) && !this.isPresto ) ? 1 : 0);
isGecko = ((navigator.product && navigator.product.toLowerCase() == "gecko" && !this.isKhtml && !this.isPresto) ? 1 : 0);
isTasman = ((navigator.appName && navigator.appName == 'Microsoft Internet Explorer' && macintosh && ua.indexOf('msie 5') != -1 && !this.isPresto && !this.isKhtml && !this.isGecko) ? 1 : 0);
isTrident = ((navigator.appName && navigator.appName == 'Microsoft Internet Explorer' && ua.indexOf('msie') && !this.isPresto && !this.isKhtml && !this.isGecko && !this.isTasman) ? 1 : 0);

FALSE = 0;
TRUE = 1;
NULL = null;
MAX_ZOOM_LEVEL = 5;

tilesX = 0;				// the location of the tile container div, relative to the frame
tilesY = 0;
previousMouseX = 0;									// the previous mouse location, used to calculate the offset to move the tiles div
previousMouseY = 0;
imageBeingDragged = FALSE;
zoom = 1;
updateTilesTimeout = NULL;
urlPrefix = '';
tilesLoading = 0;
tilesLoadingGfx = NULL;
grabberObjs = new Array();
zoomViewInitialized = FALSE;

function zoomViewInit()
	{
	urlPrefix = document.getElementById('zoomViewI1').src.substring(0, document.getElementById('zoomViewI1').src.indexOf('&'));

	// Workaround for mouse event cascading issue
	for (i = 1; i < 5; i++)
		{
		grabberObjs[i] = document.getElementById('zoomViewGrabber' + i);
		if(isTrident || isGecko)
			{
			grabberObjs[i].style.background = '#fff';
			}
		}
	updateGrabber();

	// Add event handlers of tile container
	document.getElementById('zoomViewImageContent').onmousedown = function(event)
		{
		this.style.cursor = 'move';
		dragItem(this.id, event);
		}
	document.getElementById('zoomViewImageContent').onmousemove = function(event)
		{
		moveItem(this.id, event);
		}
	document.getElementById('zoomViewImageContent').onmouseup = function(event)
		{
		this.style.cursor = 'default';
		dropItem(this.id, event);
		}

	// Update buttons
	updateButtons();

	zoomViewInitialized = TRUE;
	}


function setProductView(mode)
	{
	if (zoomViewInitialized == false)
		{
		return;
		}
	switch (mode)
		{
		// Standard View
		case 1:
			var id = 'productImageStandard';
			document.getElementById('productImageZoomView').style.display = 'none';
			document.getElementById('productImageStandard').style.display = 'block';
			document.getElementById('zoomControls').style.display = 'none';
			break;

		// Zoom View
		case 2:
			var id = 'productImageZoomView';
			document.getElementById('productImageZoomView').style.display = 'block';
			document.getElementById('productImageStandard').style.display = 'none';
			document.getElementById('zoomControls').style.display = 'block';
			break;
		}

	obj = document.getElementById(id);
	elementY = obj.offsetTop;

	// If its parent is relative or absolutely positioned, find it's offset and add it to the total
	while (obj.offsetParent)
		{
		obj = obj.offsetParent;
		elementY += obj.offsetTop;
		}
	
	// Make the scroll stop just above the target (looks nicer)
	yPos = elementY - 15;
	if (yPos < 0)
		{
		yPos = 0;
		}

	// Scroll window
	window.scrollTo(0, yPos);
	}


function zoomIn()
	{
	// Check if we're at maximum zoom
	if(zoom == MAX_ZOOM_LEVEL)
		{
		return;
		}

	// Increase the zoom level
	zoom++;

	// Scale image container
	document.getElementById('zoomViewImageContent').className = 'tileSize' + zoom;

	// Recenter the container
	tilesX -= ((zoom == 1) ? 0 : 200);
	tilesY -= ((zoom == 1) ? 0 : 250);

	// check if image has reached edge
	boundImage();

	// Update offset
	document.getElementById('zoomViewImageContent').style.left = tilesX + 'px';
	document.getElementById('zoomViewImageContent').style.top = tilesY + 'px';

	// Update displayed zoom
	updateZoomDisplay();

	// Update buttons
	updateButtons();

	// Reset the loading tiles counter
	tilesLoading = 0;

	// Workaround for mouse event cascading issue in msie
	updateGrabber();

	// update the tiles
	clearTimeout(updateTilesTimeout);
	updateTilesTimeout = setTimeout("updateTitles();", 100);
	}


function zoomOut()
	{
	// Check if we're at minimum zoom
	if(zoom == 1)
		{
		return;
		}

	// Decrease zoom level
	zoom--;

	// Scale image container
	document.getElementById('zoomViewImageContent').className = 'tileSize' + zoom;

	// Recenter the container
	tilesX += ((zoom == MAX_ZOOM_LEVEL) ? 0 : 200);
	tilesY += ((zoom == MAX_ZOOM_LEVEL) ? 0 : 250);

	// check if image has reached edge
	boundImage();

	// Update offset
	document.getElementById('zoomViewImageContent').style.left = tilesX + 'px';
	document.getElementById('zoomViewImageContent').style.top = tilesY + 'px';

	// Update displayed zoom
	updateZoomDisplay();

	// Update buttons
	updateButtons();

	// Reset the loading tiles counter
	tilesLoading = 0;

	// Workaround for mouse event cascading issue in msie
	updateGrabber();

	// update the tiles
	clearTimeout(updateTilesTimeout);
	updateTilesTimeout = setTimeout("updateTitles();", 100);
	}


function zoomReset()
	{
	tilesX = 0;
	tilesY = 0;
	zoom = 1;

	document.getElementById('zoomViewImageContent').className = 'tileSize' + zoom;
	document.getElementById('zoomViewImageContent').style.left = tilesX + 'px';
	document.getElementById('zoomViewImageContent').style.top = tilesY + 'px';

	// Update displayed zoom
	updateZoomDisplay();

	// Update buttons
	updateButtons();

	// Workaround for mouse event cascading issue in msie
	updateGrabber();

	// update the tiles
	clearTimeout(updateTilesTimeout);
	updateTilesTimeout = setTimeout("updateTitles();", 100);

	// Reset the loading tiles counter
	tilesLoading = 0;
	}



// initialises the dragging of the zoom image div
function dragItem(id, event)
	{
	if(imageBeingDragged == TRUE) return;
	// find the location of the zoomview content div
	var obj = document.getElementById(id);
	x = obj.offsetLeft + (isGecko ? 1 : 0);
	y = obj.offsetTop + (isGecko ? 1 : 0);
	// store the initial location
	imageBeingDragged = TRUE;
	tilesX = x;
	tilesY = y;
	// get mouse location for internet explorer
	if(isTasman || isTrident)
		{
		previousMouseX = window.event.clientX;
		previousMouseY = window.event.clientY;
		}
	// get mouse location for gecko & khtml
	else
		{
		previousMouseX = event.pageX;
		previousMouseY = event.pageY;
		}
	// update the div position
	document.getElementById(id).style.left = x + 'px';
	document.getElementById(id).style.top = y + 'px';
	}



// Move the zoom image div
function moveItem(id, event)
	{
	if(imageBeingDragged == FALSE || zoom == 1) return;
	// get mouse location for internet explorer
	if(isTasman || isTrident)
		{
		var mouseX = window.event.clientX;
		var mouseY = window.event.clientY;
		}
	// get mouse location for gecko & khtml
	else
		{
		var mouseX = event.pageX;
		var mouseY = event.pageY;
		}
	// calculate offset and update div location vars
	tilesX += (mouseX - previousMouseX);
	tilesY += (mouseY - previousMouseY);
	// update the stored mouse location
	previousMouseX = mouseX;
	previousMouseY = mouseY;

	// check if image has reached edge
	boundImage();

	// move the div
	document.getElementById(id).style.left = tilesX + 'px';
	document.getElementById(id).style.top = tilesY + 'px';

	// update the tiles
	clearTimeout(updateTilesTimeout);
	updateTilesTimeout = setTimeout("updateTitles();", 100);

	// Reset the loading tiles counter
	tilesLoading = 0;
	}



// handles the zoom image div being dropped
function dropItem(id, event)
	{
	// reset the variables for the dragged attachment filename div
	imageBeingDragged = FALSE;
	}



function boundImage()
	{
	// bound bottom right corner
	if(tilesX < ((zoom-1)*-400)) tilesX = ((zoom-1)*-400);
	if(tilesY < ((zoom-1)*-500)) tilesY = ((zoom-1)*-500);
	// bound top left corner
	if(tilesX > 0) tilesX = 0;
	if(tilesY > 0) tilesY = 0;
	}



function updateZoomDisplay()
	{
	document.getElementById('zoomControlsLevel').replaceChild(document.createTextNode('Zoom: ' + (100 * zoom) + '%'), document.getElementById('zoomControlsLevel').lastChild);
	}



function updateTitles()
	{
	for (var i=1; i < 21; i++)
		{
		if( tileInViewPort(i) )
			{
			document.getElementById('zoomViewI' + i).src = urlPrefix + '&zoom=' + zoom + '&tile=' + i;
			document.getElementById('zoomViewI'+i).onload = function()
				{
				tilesLoading--;
				}
			tilesLoading++;
			}
		}
	}



function tileInViewPort(tileID)
	{
	// calculate container height and width
	var width = 400 * zoom;
	var height = 500 * zoom;
	// calculate the tile's location
	var tileLeft = parseInt((tileID-1) % 4) * (zoom * 100);
	var tileRight = tileLeft + (zoom * 100);
	var tileTop = Math.floor((tileID-1) / 4) * (zoom * 100);
	var tileBottom = tileTop + (zoom * 100);
	// Calculate the viewport's location
	var viewportLeft = Math.abs(tilesX) -1 ;
	var viewportRight = viewportLeft + 401;
	var viewportTop = Math.abs(tilesY) - 1;
	var viewportBottom = viewportTop + 501;
	// Test if the tile is the viewport
	var withinX = (viewportLeft <= tileLeft && tileLeft <= viewportRight) || (viewportLeft <= tileRight && tileRight <= viewportRight) ? TRUE : FALSE;
	var withinY = (viewportTop <= tileTop && tileTop <= viewportBottom) || (viewportTop <= tileBottom && tileBottom <= viewportBottom) ? TRUE : FALSE;
	// Check if tile inside both X and Y bounds
	if(withinX && withinY)
		{
		return TRUE;
		}
	else
		{
		return FALSE;
		}
	}


function loadingHourglass()
	{
	}


function updateButtons()
	{
	switch(zoom)
		{
		case MAX_ZOOM_LEVEL:
			document.getElementById('zoomControlsIn').className = 'disabled';
			document.getElementById('zoomControlsOut').className = '';
			break;
		case 1:
			document.getElementById('zoomControlsIn').className = '';
			document.getElementById('zoomControlsOut').className = 'disabled';
			break;
		default:
			document.getElementById('zoomControlsIn').className = '';
			document.getElementById('zoomControlsOut').className = '';
			break;
		}
	}


function updateGrabber()
	{
	var x = (zoom * 400) / 2;
	var y = (zoom * 500) / 2;
	// Update grabber tiles' size
	for (i = 1; i < 5; i++)
		{
		grabberObjs[i].style.width = x + 'px';
		grabberObjs[i].style.height = y + 'px';
		}
	// Update grabber tiles' location
	grabberObjs[2].style.left = x + 'px';
	grabberObjs[3].style.top = y + 'px';
	grabberObjs[4].style.left = x + 'px';
	grabberObjs[4].style.top = y + 'px';
	}