//
// NOTE: changeSwatch in shop/custom-shop.js changes the LargeImage div background if colour is
// selected by the user

var ie = document.all;										// ... IE browser
var ob = document.getElementById && !ie;	// ... other browsers
var smallDir = 'large';									// ... directory where small image is kept
var largeDir = 'xx_large';									// ... directory where large image is kept
var largeSrc = '';												// ... source of large image
var largeOffset = 6;									  	// ... space between small and large image
var scale = 4;														// ... scale of magnification
var zoomW = 76;														// ... width of zoom lens
var zoomH = 54;														// ... height of zoom lens
var smallX = 0;														// ... position of small image from left
var smallY = 0;														// ... position of small image from top
var largeW = 290;													// ... width of large image
var pageCenter = 'No';										// ... is the page centered Yes/No
var siteW = 753;													// ... width of the site
var pageLoaded = false;
var largeSrc = null;

function preLoad() {
	pageLoaded = true;
	// ... preload large image into cache
	largeSrc = new Image(document.getElementById('MainImage').width * scale,document.getElementById('MainImage').height * scale);
	largeSrc.src = document.getElementById('MainImage').src.replace(smallDir,largeDir);
	//Remove alt text from small image
	document.getElementById('MainImage').alt = '';
}
function showBig(e) {

  if (!pageLoaded) return; // wait till preLoad has been called - other get errors
  if (largeSrc == null) preLoad();
  // ... check browser isn't Opera
	if (window.opera == null) {
		// ... change hint text
		if((document.getElementById('HoverHint') != null) && (document.getElementById('MainImage') != null)) {
			if(document.getElementById('MainImage').src.indexOf('noimage') == -1) {
				document.getElementById('HoverHint').innerHTML = 'Roll over image to zoom';
			}
		}
		var obj = null;
		if (e) obj = e.target;
		else obj = event.srcElement

		var ev = e || event;
		if (largeSrc.complete == true) {
			if (obj.className == 'Hover') {
					if (document.getElementById('LargeImage') == null) {
						// ... create large image
						var largeImg = document.createElement('div');
						largeImg.id = 'LargeImage';
						// largeImg.style.height = document.getElementById('MainImage').height + 'px';
						largeImg.style.height = '200px';
						largeImg.style.width = largeW + 'px';
						var coors = findPos();
						// ... set position of large image
						largeImg.style.top = coors[1] + 'px';
						if (pageCenter == 'Yes') {
							largeImg.style.left = coors[0] + document.getElementById('MainImage').width + largeOffset - ((document.body.clientWidth - siteW) / 2) + 'px';
						} else {
							largeImg.style.left = coors[0] + document.getElementById('MainImage').width + largeOffset + 'px';
						}
						// ... set background for large image
						largeImg.style.background = '#FFF url(' + largeSrc.src + ') 0 0 no-repeat';
						document.getElementById('ProductPicture').appendChild(largeImg);
						// ... create zoom
						var zoom = document.createElement('div');
						zoom.id = 'Zoom';
						zoom.className = 'Hover';
						document.getElementById('ProductPicture').appendChild(zoom);
						// ... create zoom title
						var zoomTitle = document.createElement('div');
						zoomTitle.id = 'ZoomTitle';
						document.getElementById('ProductPicture').appendChild(zoomTitle);
					}
					// ... show large image
					document.getElementById('LargeImage').style.display = 'block';
					//document.getElementById('DetailPage').className = 'Zoom';
					document.getElementById('LargeImage').style.backgroundPosition = (-1 * (((ev.clientX - smallX) * scale) - (largeW / 2))) + 'px ' + (-1 * ((((ev.clientY - smallY) - 10 - zoomH + document.documentElement.scrollTop + document.body.scrollTop) * scale))) + 'px'
					// ... show zoom
					document.getElementById('Zoom').style.display = 'block';
					document.getElementById('Zoom').style.top = ((ev.clientY + document.body.scrollTop) - (zoomH + 10)) + document.documentElement.scrollTop + document.body.scrollTop + 'px';
					if (pageCenter == 'Yes') {
						document.getElementById('Zoom').style.left = (((ev.clientX + document.body.scrollLeft) - (zoomW / 2)) - ((document.body.clientWidth - siteW) / 2)) + 'px';
					} else {
						document.getElementById('Zoom').style.left = ((ev.clientX + document.body.scrollLeft) - (zoomW / 2)) + 'px';
					}
					// ... show zoom title
					document.getElementById('ZoomTitle').style.display = 'block';
					document.getElementById('ZoomTitle').style.top = smallY + 'px';
					if (pageCenter == 'Yes') {
						document.getElementById('ZoomTitle').style.left = (smallX + (document.getElementById('MainImage').width + largeW) + (largeOffset - 70)) - ((document.body.clientWidth - siteW) / 2) + 'px';
					} else {
						document.getElementById('ZoomTitle').style.left = smallX + (document.getElementById('MainImage').width + largeW) + (largeOffset - 70) + 'px';
					}
			} else {
					// ... hide large image
					if (document.getElementById('LargeImage') != null) {
						document.getElementById('LargeImage').style.display = 'none';
						document.getElementById('Zoom').style.display = 'none';
						document.getElementById('ZoomTitle').style.display = 'none';
					}
					if (document.getElementById('Loading') != null) {
						document.getElementById('Loading').style.display = 'none';
					}
					//SetTimeout("document.getElementById('DetailPage').className = ''", 20);
			}
		} else if (largeSrc.complete != true) {
			if (obj.id == 'MainImage') {
					if (document.getElementById('Loading') == null) {
						// ... create loading
						var loadingScreen = document.createElement('div');
						loadingScreen.id = 'Loading';
						// loadingScreen.style.height = document.getElementById('MainImage').height + 'px';
						loadingScreen.style.height = '200px';
						loadingScreen.style.width = largeW + 'px';
						var coors = findPos();
						// ... set position of loading
						loadingScreen.style.top = coors[1] + 'px';
						if (pageCenter == 'Yes') {
							loadingScreen.style.left = coors[0] + document.getElementById('MainImage').width + largeOffset - ((document.body.clientWidth - siteW) / 2) + 'px';
						} else {
							loadingScreen.style.left = coors[0] + document.getElementById('MainImage').width + largeOffset + 'px';
						}
						document.getElementById('ProductPicture').appendChild(loadingScreen);
					}
					// ... show loading
					document.getElementById('Loading').style.display = 'block';
					//document.getElementById('DetailPage').className = 'Zoom';
				} else {
				// ... hide loading
				if (document.getElementById('Loading') != null) {
					document.getElementById('Loading').style.display = 'none';;
				}
				//document.getElementById('DetailPage').className = '';
			}
		}
	}
}
function findPos() {
	// ... find position of small image
	if (document.getElementById('MainImage').offsetParent) {
		smallX = document.getElementById('MainImage').offsetLeft;
		smallY = document.getElementById('MainImage').offsetTop;
		var op = document.getElementById('MainImage')
		while (op = op.offsetParent) {
			smallX += op.offsetLeft;
			smallY += op.offsetTop;
		}
	}
	return [smallX,smallY];
}
document.onmousemove = showBig;


// put preLoad in body onload event
try {
	if( typeof(attachEvent) != "undefined" ) {
	  attachEvent('onload',preLoad);
	} else if(typeof ( addEventListener ) != "undefined"  ) {
	  addEventListener('load',preLoad,true);
	}
	else{
		setTimeout('preLoad', 500);
	}
}
catch(err) {
	//alert(err.description);
}