var dragObject  = null;
var mouseOffset = null;
var dragContainer = null;

function getCanvasWidth() { 
   return document.body.offsetWidth || innerWidth; 
} 

function getCanvasHeight() { 
   return document.body.offsetHeight || innerHeight; 
} 

function makeContainer(item){
	dragContainer = item;
	dragContainer.style.position = 'relative';
	dragContainer.style.overflow = 'hidden';
}

function getMouseOffset(target, ev){
	ev = ev || window.event;

	var docPos    = getPosition(target);
	var mousePos  = mouseCoords(ev);

	return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}

function getPosition(obj){
	var left = 0;
	var	top = 0;
	
	if (obj.offsetParent) {

		left += obj.offsetLeft ;
		top += obj.offsetTop;		
		
		while (obj = obj.offsetParent) {
			if (parseInt(obj.style.left)) {
				left -= parseInt(obj.style.left);
				top -= parseInt(obj.style.top);
			}
		}
	}
	return {x:left, y:top};
}

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 mouseMove(ev){
	ev           = ev || window.event;
	var mousePos = mouseCoords(ev);
	var targWidth, targHeight, targPos;
	var browseWidth, browseHeight;

	browseWidth		=	getCanvasWidth();
	browseHeight	=	getCanvasHeight();

	if(dragObject){	
		if (dragContainer) {
			targWidth  = parseInt(dragContainer.offsetWidth);
			targHeight = parseInt(dragContainer.offsetHeight);
			if (((mousePos.y - mouseOffset.y) < 0) && ((mousePos.y - mouseOffset.y + dragObject.height) > (targHeight)))	{dragObject.style.top	= (mousePos.y - mouseOffset.y) + 'px';}
			if (((mousePos.x - mouseOffset.x) < 0) && ((mousePos.x - mouseOffset.x + dragObject.width) > (targWidth)))	{dragObject.style.left	= (mousePos.x - mouseOffset.x) + 'px';}
		} else {
			dragObject = null;
		}
		return false;
	}
}

function mouseUp(){
		dragObject = null;
}

function makeDraggable(item){
	if(!item) return;
	try {item.style.cursor = 'pointer';} catch (e) {} //cursor property breaks IE5.5
	item.onmousedown = function(ev){		
		dragObject  = this;
		dragObject.style.position = 'absolute';
		mouseOffset = getMouseOffset(this, ev);
		return false;
	}
}

function enableDrag(spContainer, imgDrag, imgWidth, imgHeight) {

	var dragItem = null;
	var dragCont = null;
	var contW, contH = 0;
	var top, left;
	
	document.onmousemove = mouseMove;
	document.onmouseup   = mouseUp;
	
	dragCont = document.getElementById(spContainer);
	makeContainer(dragCont);

	dragItem = document.getElementById(imgDrag);
	makeDraggable(dragItem);
	dragItem.style.position = 'absolute';
	
	dragItem.style.height = imgHeight + 'px'; dragItem.style.width = imgWidth + 'px';
	
	dragItem.style.top = 0; dragItem.style.left = 0;
	dragItem.top = 0; dragItem.left = 0;
		
	top = -((parseInt(dragItem.style.height)/2) - (parseInt(dragCont.style.height)/2));
	left = -((parseInt(dragItem.style.width)/2) - (parseInt(dragCont.style.width)/2));
	
	dragItem.style.top = top +'px';
	dragItem.style.left = left+'px';
	
	dragItem.top = dragItem.style.top;
	dragItem.left = dragItem.style.left;
	
	dragItem.alt = 'Click and hold to drag image';	
}
		function LoadTmpHolder()	{	  
			    HideZoomImage();
				var	i
				for (i=0; i < arrMainImage.length; i++)
						{
							tmpHolder[0]	=	arrMainImage[i];
						}
				if	(arrThumbImage[0] != null)	{
					tmpHolder[1] = arrThumbImage[0];
					};
				if	(arrThumbImage[1] != null)	{
					tmpHolder[2] = arrThumbImage[1];
					};
				if	(arrThumbImage[2] != null)	{
					tmpHolder[3] = arrThumbImage[2];
					};	
			}

			function ReplaceImageFromThumb(imgThumbIndex) {
				var	tmp1 = tmpHolder[imgThumbIndex];
				var tmp2 = tmpHolder[0];
				
				tmpHolder[0] = tmp1;
				tmpHolder[imgThumbIndex] = tmp2;
				
				HideZoomImage();
				PopulateImages();
			}
			
			function PopulateImages(){
				document.getElementById('imgMainImageZoom').src = '';
				if (document.getElementById('imgMainImage') != null)	{
					if	(tmpHolder[0] != null)	{
						document.getElementById('imgMainImage').src = tmpHolder[0][1];
						};
					if	(tmpHolder[1] != null)	{
						document.getElementById('imgThumb2').src = tmpHolder[1][0];
						};
					if	(tmpHolder[2] != null)	{
						document.getElementById('imgThumb3').src = tmpHolder[2][0];
						};
					if	(tmpHolder[3] != null)	{
						document.getElementById('imgThumb4').src = tmpHolder[3][0];
						};
				};
			}
			
			function ShowZoomImage()	{
				if	(tmpHolder[0] != null)	{
					oZoomImage = new Image();
					oZoomImage.src = tmpHolder[0][2];					
										
					if (document.getElementById) { // DOM 3: IE5+, NS6, Firefox#
						document.getElementById("imgMainImage").style.display = "none";
						document.getElementById("dvMainImageZoom").style.display = "block";						
						document.getElementById("hypZoomPlus").style.display = "none";
						document.getElementById("hypZoomMinus").style.display = "block";
						
						if (document.getElementById("hypDragImage") != null) {document.getElementById("hypDragImage").style.display = "block"};
						
					} else if (document.layers) { // Netscape 4
					
						document.imgMainImage.style.display = "none";
						document.dvMainImageZoom.style.display = "block";						
						document.hypZoomPlus.style.display = "none";
						document.hypZoomMinus.style.display = "block";
						
						if (document.hypDragImage != null) {document.hypDragImage.style.display = "block"};
						
					} else if (document.all) { // IE 4
					
						document.all.imgMainImage.style.display = "none";
						document.all.dvMainImageZoom.style.display = "block";						
						document.all.hypZoomPlus.style.display = "none";
						document.all.hypZoomMinus.style.display = "block";
						
						if (document.all.hypDragImage != null ){document.all.hypDragImage.style.display = "block"};						
					}
				}
				
				if (!oZoomImage.complete) {
					document.getElementById('dvMainImageZoom').innerHTML = document.getElementById('content_product_loading' ).innerHTML;
					tZoomLoaded = setInterval(checkZoomLoaded,'500');
				} else {
					checkZoomLoaded();
				}
				
			}
				
			function checkZoomLoaded(){
				if (oZoomImage.complete){
					document.getElementById('dvMainImageZoom').innerHTML = '<img id="imgMainImageZoom" src="' + oZoomImage.src + '" />';
					clearTimeout(tZoomLoaded);		
					enableDrag('dvMainImageZoom', 'imgMainImageZoom', 761, 1110);					
				}
			}
			
			function HideZoomImage()	{
				if (document.getElementById) { // DOM 3: IE5+, NS6, Firefox#
					if (document.getElementById("imgMainImage") != null) {document.getElementById("imgMainImage").style.display = "block";};
					document.getElementById("dvMainImageZoom").style.display = "none";
					if (document.getElementById("hypZoomPlus") != null) {document.getElementById("hypZoomPlus").style.display = "block";};
					if (document.getElementById("hypZoomMinus") != null) {document.getElementById("hypZoomMinus").style.display = "none";};
					if (document.getElementById("hypDragImage") != null) {document.getElementById("hypDragImage").style.display = "none";};
				} else if (document.layers) { // Netscape 4
					if (document.imgMainImage != null) {document.imgMainImage.style.display = "block";};
					document.dvMainImageZoom.style.display = "none";
					if (document.hypZoomPlus != null) {document.hypZoomPlus.style.display = "block";};
					if (document.hypZoomMinus != null) {document.hypZoomMinus.style.display = "none";};
					if (document.hypDragImage != null) {document.hypDragImage.style.display = "none";};
				} else if (document.all) { // IE 4
					if (document.all.imgMainImage != null) {document.all.imgMainImage.style.display = "block";};
					document.all.dvMainImageZoom.style.display = "none";
					if (document.all.hypZoomPlus != null) {document.all.hypZoomPlus.style.display = "block";};
					if (document.all.hypZoomMinus != null) {document.all.hypZoomMinus.style.display = "none";};
					if (document.all.hypDragImage != null) {document.all.hypDragImage.style.display = "none";};
				}
				HideVideo();
			}
			
			function drpdwnColourChange(drpdwnColour)	{
			    var drpdwnSize = document.getElementById('drpdwnSize');
				var drpdwnindex  = drpdwnColour.selectedIndex;
				var SelectedColour = drpdwnColour.options[drpdwnindex].value;
								
				if (drpdwnindex != 0)	{
					LoadTmpHolder(drpdwnColour.options[drpdwnindex].value);
					PopulateImages();
				}
				PopulateDropDowns();														
			}
			
			var	selectedSizeIndex;
		
							
			function ShowVideo() {
			
				if (document.getElementById) { // DOM 3: IE5+, NS6, Firefox#
					if (document.getElementById("pnlMainImage") != null) {document.getElementById("pnlMainImage").style.visibility = "hidden";};					
					document.getElementById("hypPhotoImage").style.display = "block";
				} else if (document.layers) { // Netscape 4
					if (document.pnlMainImage != null) {document.pnlMainImage.style.visibility = "hidden";};
					document.hypPhotoImage.style.display = "block";
				} else if (document.all) { // IE 4
					if (document.all.pnlMainImage != null) {document.all.pnlMainImage.style.visibility = "hidden";};
					document.all.hypPhotoImage.style.display = "block";
				}
			}
			
			function HideVideo() {				
				if (document.getElementById) { // DOM 3: IE5+, NS6, Firefox
					if (document.getElementById("pnlMainImage") != null) {document.getElementById("pnlMainImage").style.visibility = "visible";};
					if (document.getElementById("hypPhotoImage") != null) {document.getElementById("hypPhotoImage").style.display = "none";};
				} else if (document.layers) { // Netscape 4
					if (document.pnlMainImage != null) {ddocument.pnlMainImage.style.visibility = "visible";};
					if (document.hypPhotoImage != null) {ddocument.hypPhotoImage.style.display = "none";};
				} else if (document.all) { // IE 4
					if (document.all.pnlMainImage != null) {document.all.pnlMainImage.style.visibility = "visible";};
					if (document.all.hypPhotoImage != null) {document.all.hypPhotoImage.style.display = "none";};
				}
			}