/*

	Zoom Tool v1.0
	Copyright 2006 | 3000k, Inc
	
	Licensed to  Red Galoshes under an unlimited, worldwide, perpetual use right. Limited transferability (RG 
	may transfer the license if part or all of the company is sold or merges with another, but it may not sell 
	the zoom code separately for profit.)




	// -------------------------------------------------------- //
	// Instructions												//
	// -------------------------------------------------------- //
	
	1) Include this file in your webpage:
		<script src="js/zoomtool.js" type="text/javascript"></script>

	2) Include the CSS file:
		<link rel="stylesheet" href="css/zoomtool.css" type="text/css" media="screen" />
	
	3) Place all the GUI images in a folder. Make sure the CSS styles that reference the GUI images
		point to the right directory.

	4) In the head of your age create a new zoomTool obj called myZoom and add your images with
		or with out titles and captions.

		<script type="text/javascript">
			myZoom = new zoomTool("myZoom");
			myZoom.addImage("007561.jpg","title #1","caption #1");		
			myZoom.addImage("007563.jpg","title #2","caption #2");		
			myZoom.addImage("007602.jpg","title #3","caption #3");		
		</script>

	5) To enable zoomtool on a link simply add rel="zoomtool" to the anchor tag. The anchor MUST
		point to one of the images added to the image array using addImage.
		
		<a href="http://media.redgaloshes.com/01/007561.jpg" rel="zoomtool">007561</a>

	Questions, comments, bugs? send to lokesh@3000k.com

*/




//
//  Configuration
//

var zoomWindowWidth = 432;
var zoomWindowHeight = 432;

// base url for images
var imageUrl = "http://media.redgaloshes.com/";

// Red Galoshes dynamically generated image directories for different image sizes
var thumbSize = "06/";
var normalSize = "01/";
var largeSize = "07/";




// -------------------------------------------------------- //
// You shouldn't need to edit anything below this line.		//
// -------------------------------------------------------- //




//
// Global Variables
//
var imagesLoadedCounter = 0;

var zIndexBase = 1000;

var isIE5x =  browserDetect();





//
//	zoomTool Object
//		- addImage
//		- createZoomToolHTML
//		- removeZoomToolHTML
//		- loadRelatedImages
//		- updateRelatedImages
//		- switchImage
//		- toggleInterface
//		- panThumbs
//		- panImage
//		- shift
//		- zoom
//		- showImage
//		- preloadInterface
//		- preloadImages
//		- open
//		- close
//


function zoomTool(name) {

	var imageId;	// stores active image number

	imageArray = new Array();	// stores image names, titles, captions
	

/*--------------------------------------------------------------------------*/

	//
	//	Adds images to imageArray
	//
	this.addImage = function(image,title,caption) {

		tempArray = new Array();
		tempArray['image'] = image;
		tempArray['title'] = title;
		tempArray['caption'] = caption;
		imageArray.push(tempArray);
	
	}


/*--------------------------------------------------------------------------*/

	//
	//	Creates html on the fly for the overlay, image container, interface incl/thumbs container.
	//

	this.createZoomToolHTML =  function() {
	
		var objBody = document.getElementsByTagName("body").item(0);

		// create overlay
		var objOverlay = document.createElement("div");
		objOverlay.setAttribute('id','overlay');
		objOverlay.style.display = 'none';
		objOverlay.style.position = 'absolute';
		objOverlay.style.top = '0';
		objOverlay.style.left = '0';
		objOverlay.style.zIndex = zIndexBase;
		objOverlay.style.width = '100%';
		objBody.insertBefore(objOverlay, objBody.firstChild);

		// create zoomwindow and all interface elements with the exception of the thumbs and their container
		var objZoomWindow = document.createElement("div");
		objZoomWindow.setAttribute('id','zoomWindow');
		objZoomWindow.style.display = 'none';
		objZoomWindow.style.position = 'absolute';
		objZoomWindow.style.zIndex = zIndexBase + 10;	
		objZoomWindow.innerHTML = '<div id="imageContainer" style="position: relative; width: '+ zoomWindowWidth +'px; height: '+ zoomWindowHeight +'px; overflow: hidden;"><img src="http://media.redgaloshes.com/zoomtool/close-off.gif"  onmouseover="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/close-on.gif\';" onmouseout="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/close-off.gif\';" id="closeButton" onclick="'+ name +'.close();" alt="Click to Close" style="position: absolute; top: 0; right: 0; z-index: '+ zIndexBase +'; cursor: pointer;" /><div id="caption" style=" display: none; z-index: '+ zIndexBase +';"></div><a id="imageLink"><img id="image" style="display: none; position: relative;" alt="" /></a></div><div id="interface"><div id="relatedImages"><div id="thumbsMask"><div id="thumbsContainer"></div></div></div><div id="panContainer"><img src="http://media.redgaloshes.com/zoomtool/pan-up-off.gif" onmouseout="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/pan-up-off.gif\';" id="panUp" /><img src="http://media.redgaloshes.com/zoomtool/pan-right-off.gif" onmouseover="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/pan-right-on.gif\';" onmouseout="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/pan-right-off.gif\';" id="panRight" onclick="myZoom.panImage(\'right\');return false;" style="cursor:pointer;" /><img src="http://media.redgaloshes.com/zoomtool/pan-down-off.gif" onmouseover="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/pan-down-on.gif\';" onmouseout="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/pan-down-off.gif\';" id="panDown" onclick="myZoom.panImage(\'down\');return false;" style="cursor:pointer;" /><img src="http://media.redgaloshes.com/zoomtool/pan-left-off.gif" onmouseover="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/pan-left-on.gif\';" onmouseout="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/pan-left-off.gif\';" id="panLeft" onclick="myZoom.panImage(\'left\');return false;" style="cursor:pointer;" /></div><div id="zoomContainer"><img src="http://media.redgaloshes.com/zoomtool/zoom-in-off.gif" onmouseover="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/zoom-in-on.gif\';" onmouseout="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/zoom-in-off.gif\';" id="zoomIn" onclick="myZoom.zoom(\'in\');return false;" style="cursor:pointer;" /><img src="http://media.redgaloshes.com/zoomtool/zoom-out-off.gif" onmouseout="javascript:this.src=\'http://media.redgaloshes.com/zoomtool/zoom-out-off.gif\';" id="zoomOut"/></div></div></div>';
		objBody.insertBefore(objZoomWindow, objOverlay.nextSibling);

		this.loadRelatedImages();
}	

/*--------------------------------------------------------------------------*/

	//
	//	Removes overlay, interface, image, etc.
	//
	this.removeZoomToolHTML =  function() {
	
		var objBody = document.getElementsByTagName("body").item(0);
		var objOverlay = document.getElementById("overlay");
		var objZoomWindow = document.getElementById("zoomWindow");
		
		objBody.removeChild(objOverlay);
		objBody.removeChild(objZoomWindow);
	}

/*--------------------------------------------------------------------------*/

	//
	//	Displays thumbnails of related images.
	//	Depending on the number of related images, displays appropriately sized container and panning arrows.
	//	

	this.loadRelatedImages =  function() {
	
		var objRelatedImages = document.getElementById('relatedImages');
		var objThumbsMask = document.getElementById('thumbsMask');
		var objThumbsContainer = document.getElementById('thumbsContainer');

		objThumbsContainer.innerHTML = '';

		var strThumbs = '';
		
		if(imageArray.length == 1){	
	
			// if only 1 image, don't display any thumbs
	
		} else if(imageArray.length == 2) {

			objRelatedImages.style.background = 'url(http://media.redgaloshes.com/zoomtool/thumbs-2.gif) top left no-repeat';
			objRelatedImages.setAttribute('onmouseover','this.style.background = "url(http://media.redgaloshes.com/zoomtool/thumbs-2-on.gif) top left no-repeat";');
			objRelatedImages.setAttribute('onmouseout','this.style.background = "url(http://media.redgaloshes.com/zoomtool/thumbs-2-off.gif) top left no-repeat";');


			objThumbsMask.style.top = '6px';
			objThumbsMask.style.left = '8px';

			for(i=0; i<imageArray.length; i++){

				if(i == imageId){
					state = 'active';
				} else { 
					state = 'inactive';
				}
				strThumbs = strThumbs + '<div class="thumb"><a href="#"><img src="'+ imageUrl +''+ thumbSize + imageArray[i]['image'] +'" class="'+ state +'" onclick="'+ name +'.switchImage('+ i +'); return false;" /></a></div>';
			}

			objThumbsContainer.innerHTML = strThumbs;

	
		} else if(imageArray.length == 3) {

			objRelatedImages.style.background = 'url(http://media.redgaloshes.com/zoomtool/thumbs-3.gif) top left no-repeat';
			objRelatedImages.setAttribute('onmouseover','this.style.background = "url(http://media.redgaloshes.com/zoomtool/thumbs-3-on.gif) top left no-repeat";');
			objRelatedImages.setAttribute('onmouseout','this.style.background = "url(http://media.redgaloshes.com/zoomtool/thumbs-3-off.gif) top left no-repeat";');
			
			objThumbsMask.style.top = '6px';
			objThumbsMask.style.left = '8px';

			for(i=0; i<imageArray.length; i++){

				if(i == imageId){
					state = 'active';
				} else { 
					state = 'inactive';
				}
				strThumbs = strThumbs + '<div class="thumb"><a href="#"><img src="http://media.redgaloshes.com/'+ thumbSize + imageArray[i]['image'] +'" class="'+ state +'" onclick="'+ name +'.switchImage('+ i +'); return false;" /></a></div>';
			}

			objThumbsContainer.innerHTML = strThumbs;

		} else if(imageArray.length >= 4) {

			objRelatedImages.style.background = 'url(http://media.redgaloshes.com/zoomtool/thumbs-4-off.gif) top left no-repeat';
			objRelatedImages.setAttribute('onmouseover','this.style.background = "url(http://media.redgaloshes.com/zoomtool/thumbs-4-on.gif) top left no-repeat";');
			objRelatedImages.setAttribute('onmouseout','this.style.background = "url(http://media.redgaloshes.com/zoomtool/thumbs-4-off.gif) top left no-repeat";');


			objThumbsMask.style.top = '6px';
			objThumbsMask.style.left = '19px';

			// center active thumb

			if(imageId == 0){	// first thumb
	
				startPosition = 0;
			
			} else if(imageId == (imageArray.length - 1)){	// last thumb
				
				startPosition = (imageId * -50) + 100;
				
			} else {
				
				startPosition = (imageId * -50) + 50;
				
			}

			objThumbsContainer.style.left = startPosition + 'px';

			for(i=0; i<imageArray.length; i++){

				if(i == imageId){
					state = 'active';
				} else { 
					state = 'inactive';
				}
				strThumbs = strThumbs + '<div class="thumb '+ state +'"><a href="#"><img src="'+ imageUrl + thumbSize + imageArray[i]['image'] +'" onclick="'+ name +'.switchImage('+ i +'); return false;" /></a></div>';
			}
	
			objThumbsContainer.innerHTML = strThumbs;

			var objThumbLeftArrow = document.createElement("img");
			objThumbLeftArrow.setAttribute('src','http://media.redgaloshes.com/zoomtool/thumbs-left-off.gif');
			objThumbLeftArrow.setAttribute('id','thumbsLeftArrow');
			objThumbLeftArrow.onmouseover = function() { this.src = 'http://media.redgaloshes.com/zoomtool/thumbs-left-on.gif'; };
			objThumbLeftArrow.onmouseout = function() { this.src = 'http://media.redgaloshes.com/zoomtool/thumbs-left-off.gif'; };
			objThumbLeftArrow.onclick = function() { myZoom.panThumbs('left'); };
			if(isIE5x){ objThumbleftArrow.style.cursor = 'hand'; } else {objThumbLeftArrow.style.cursor = 'pointer';}
			objRelatedImages.appendChild(objThumbLeftArrow);

			var objThumbRightArrow = document.createElement("img");
			objThumbRightArrow.setAttribute('src','http://media.redgaloshes.com/zoomtool/thumbs-right-off.gif');
			objThumbRightArrow.setAttribute('id','thumbsRightArrow');
			objThumbRightArrow.onmouseover = function() { this.src = 'http://media.redgaloshes.com/zoomtool/thumbs-right-on.gif'; };
			objThumbRightArrow.onmouseout = function() { this.src = 'http://media.redgaloshes.com/zoomtool/thumbs-right-off.gif'; };
			objThumbRightArrow.onclick = function() { myZoom.panThumbs('right'); };
			if(isIE5x){ objThumbRightArrow.style.cursor = 'hand'; } else {objThumbRightArrow.style.cursor = 'pointer';}
			objRelatedImages.appendChild(objThumbRightArrow);
			

			if(imageId < 2){
				myZoom.toggleInterface('thumbsLeftArrow','off');
			} else if(imageId >= (imageArray.length - 2)){
				myZoom.toggleInterface('thumbsRightArrow','off');				
			}

		}
		
	}

/*--------------------------------------------------------------------------*/

	//
	//	Updates 'active' thumbnail 
	//

	this.updateRelatedImages =  function(newImage) {

		objThumb = document.getElementById('thumbsContainer').firstChild;

		if(imageArray.length >= 2) {
	
			for(i=0; i<imageArray.length; i++){
							
				if(i == imageId){
					objThumb.className = 'thumb active';					
				} else {
					objThumb.className = 'thumb';					
				}
			objThumb = objThumb.nextSibling;
	
			}

		}



	}

/*--------------------------------------------------------------------------*/

	//
	//	Updates current imageId and calls showImage and loadRelatedImages functions.
	//

	this.switchImage =  function(newImage) {

		imageId = newImage;
		this.zoom('out');
		this.updateRelatedImages();

	}

/*--------------------------------------------------------------------------*/

	//
	//	Turns ON or OFF each of the interface elements
	//

	this.toggleInterface =  function(interfaceElement, status) {

		objInterfaceElement = document.getElementById(interfaceElement);

		switch(interfaceElement) {
	
			case 'thumbsLeftArrow':

				if(status == 'off'){
					// turn off
					objInterfaceElement.setAttribute('src','http://media.redgaloshes.com/zoomtool/thumbs-left-off.gif');
					objInterfaceElement.onmouseover = null;
					objInterfaceElement.onclick = null;
					objInterfaceElement.style.cursor = 'auto';	
					objInterfaceElement.status = false;
				} else {
					// turn on
					objInterfaceElement.onmouseover = function () { this.src='http://media.redgaloshes.com/zoomtool/thumbs-left-on.gif'; };
					objInterfaceElement.onclick = function() { myZoom.panThumbs('left'); };
					objInterfaceElement.cssText = 'cursor: pointer; cursor: hand;';
					if(isIE5x){ objInterfaceElement.style.cursor = 'hand'; } else {objInterfaceElement.style.cursor = 'pointer';}
					objInterfaceElement.status = true;					
				}
			break
				
			case 'thumbsRightArrow':

				if(status == 'off'){
					// turn off
					objInterfaceElement.setAttribute('src','http://media.redgaloshes.com/zoomtool/thumbs-right-off.gif');
					objInterfaceElement.onmouseover = null;
					objInterfaceElement.onclick = null;
					objInterfaceElement.style.cursor = 'auto';	
					objInterfaceElement.status = false;
				} else {
					// turn on
					objInterfaceElement.onmouseover = function () { this.src='http://media.redgaloshes.com/zoomtool/thumbs-right-on.gif'; };
					objInterfaceElement.onclick = function() { myZoom.panThumbs('right'); };
					if(isIE5x){ objInterfaceElement.style.cursor = 'hand'; } else {objInterfaceElement.style.cursor = 'pointer';}
					objInterfaceElement.status = true;					
				}
			break

			case 'zoomIn':
	
				if(status == 'off'){
					// turn off
					objInterfaceElement.setAttribute('src','http://media.redgaloshes.com/zoomtool/zoom-in-off.gif');
					objInterfaceElement.onmouseover = null;
					objInterfaceElement.onclick = null;
					objInterfaceElement.style.cursor = 'auto';	
					objInterfaceElement.status = false;
				} else {
					// turn on
					objInterfaceElement.onmouseover = function () { this.src='http://media.redgaloshes.com/zoomtool/zoom-in-on.gif'; };
					objInterfaceElement.onclick = function() { myZoom.zoom('in'); };
					if(isIE5x){ objInterfaceElement.style.cursor = 'hand'; } else {objInterfaceElement.style.cursor = 'pointer';}
					objInterfaceElement.status = true;					
				}
			break

			case 'zoomOut':
	
				if(status == 'off'){
					// turn off
					objInterfaceElement.setAttribute('src','http://media.redgaloshes.com/zoomtool/zoom-out-off.gif');
					objInterfaceElement.onmouseover = null;
					objInterfaceElement.onclick = null;
					objInterfaceElement.style.cursor = 'auto';	
					objInterfaceElement.status = false;
				} else {
					// turn on
					objInterfaceElement.onmouseover = function () { this.src='http://media.redgaloshes.com/zoomtool/zoom-out-on.gif'; };
					objInterfaceElement.onclick = function() { myZoom.zoom('out'); };
					if(isIE5x){ objInterfaceElement.style.cursor = 'hand'; } else {objInterfaceElement.style.cursor = 'pointer';}
					objInterfaceElement.status = true;					
				}
			break

			case 'panUp':
	
				if(status == 'off'){
					// turn off
					objInterfaceElement.setAttribute('src','http://media.redgaloshes.com/zoomtool/pan-up-off.gif');
					objInterfaceElement.onmouseover = null;
					objInterfaceElement.onclick = null;
					objInterfaceElement.style.cursor = 'auto';	
					objInterfaceElement.status = false;
				} else {
					// turn on
					objInterfaceElement.onmouseover = function () { this.src='http://media.redgaloshes.com/zoomtool/pan-up-on.gif'; };
					objInterfaceElement.onclick = function() { myZoom.panImage('up'); };
					if(isIE5x){ objInterfaceElement.style.cursor = 'hand'; } else {objInterfaceElement.style.cursor = 'pointer';}
					objInterfaceElement.status = true;					
				}
			break

			case 'panRight':
	
				if(status == 'off'){
					// turn off
					objInterfaceElement.setAttribute('src','http://media.redgaloshes.com/zoomtool/pan-right-off.gif');
					objInterfaceElement.onmouseover = null;
					objInterfaceElement.onclick = null;
					objInterfaceElement.style.cursor = 'auto';	
					objInterfaceElement.status = false;
				} else {
					// turn on
					objInterfaceElement.onmouseover = function () { this.src='http://media.redgaloshes.com/zoomtool/pan-right-on.gif'; };
					objInterfaceElement.onclick = function() { myZoom.panImage('right'); };
					if(isIE5x){ objInterfaceElement.style.cursor = 'hand'; } else {objInterfaceElement.style.cursor = 'pointer';}
					objInterfaceElement.status = true;					
				}
			break

			case 'panDown':
	
				if(status == 'off'){
					// turn off
					objInterfaceElement.setAttribute('src','http://media.redgaloshes.com/zoomtool/pan-down-off.gif');
					objInterfaceElement.onmouseover = null;
					objInterfaceElement.onclick = null;
					objInterfaceElement.style.cursor = 'auto';	
					objInterfaceElement.status = false;
				} else {
					// turn on
					objInterfaceElement.onmouseover = function () { this.src='http://media.redgaloshes.com/zoomtool/pan-down-on.gif'; };
					objInterfaceElement.onclick = function() { myZoom.panImage('down'); };
					if(isIE5x){ objInterfaceElement.style.cursor = 'hand'; } else {objInterfaceElement.style.cursor = 'pointer';}
					objInterfaceElement.status = true;					
				}
			break

			case 'panLeft':
	
				if(status == 'off'){
					// turn off
					objInterfaceElement.setAttribute('src','http://media.redgaloshes.com/zoomtool/pan-left-off.gif');
					objInterfaceElement.onmouseover = null;
					objInterfaceElement.onclick = null;
					objInterfaceElement.style.cursor = 'auto';	
					objInterfaceElement.status = false;
				} else {
					// turn on
					objInterfaceElement.onmouseover = function () { this.src='http://media.redgaloshes.com/zoomtool/pan-left-on.gif'; };
					objInterfaceElement.onclick = function() { myZoom.panImage('left'); };
					if(isIE5x){ objInterfaceElement.style.cursor = 'hand'; } else {objInterfaceElement.style.cursor = 'pointer';}
					objInterfaceElement.status = true;					
				}
			break
			default:
				alert('default');
		}

	}

	
	
	
	
	
/*--------------------------------------------------------------------------*/

	//
	//	Takes direction and passes it along to the shift function.
	//

	this.panThumbs =  function(direction) {
	
		if((direction == 'left' )){
			shiftDistance = 50;
			// if right arrow is currently turned off, turn back on as you are shifting to the left
			if(!(document.getElementById('thumbsRightArrow').status)){ myZoom.toggleInterface('thumbsRightArrow', 'on'); }
		
		} else {
			shiftDistance = -50;		
	
			// if left arrow is currently turned off, turn back on as you are shifting to the right
			if(!(document.getElementById('thumbsLeftArrow').status)){ myZoom.toggleInterface('thumbsLeftArrow', 'on'); }
		}
		
		this.shift('thumbsContainer', direction, shiftDistance, 24, 15, 1);

	}

/*--------------------------------------------------------------------------*/

	//
	//	Takes direction and passes it along to the shift function.
	//

	this.panImage =  function(direction) {
	
		if((direction == 'left' )|| (direction == 'up')){
			shiftDistance = 150;
		} else {
			shiftDistance = -150;		
		}
		
		this.shift('image', direction, shiftDistance, 25, 15, 1);

	}
/*--------------------------------------------------------------------------*/

	//
	//	Uses shiftInterval to set a repeating action for moving object a pixel or two every few milliseconds.
	//
	
	this.shift = function(obj, direction, shiftDistance, steps, intervals, power) {

		
		objMove = document.getElementById(obj);

		// if animation function running, clear and replace
		if(objMove.shiftInterval){ window.clearInterval(objMove.shiftInterval);}

		var currentStep = 0;
		objMove.shiftInterval = window.setInterval(

			function() { 

				stepDistance = Math.round((1 / steps) * shiftDistance);
				
				if((direction == 'left' )|| (direction == 'right')){

					leftValue = objMove.style.left;
					leftValue = (leftValue.replace("px",""));		
					leftValue = leftValue * 1;
					newPosition = leftValue + stepDistance;

					if(obj == 'image'){

						if((newPosition > (zoomWindowWidth - objMove.width)) && (newPosition <= 0)){	// constrain panning
							objMove.style.left = newPosition + "px"; 
						} else {
							window.clearInterval(objMove.shiftInterval);	// out of range, clear animation function							
						}

					} else if(obj == 'thumbsContainer'){

						if((newPosition > ((imageArray.length -3) * -50)) && (newPosition <= 0 )){	// constrain panning
							objMove.style.left = newPosition + "px"; 
						} else {
							window.clearInterval(objMove.shiftInterval);	// out of range, clear animation function
						}
	
						if(newPosition <= ((imageArray.length -3) * -50)){		// disable right arrow
							myZoom.toggleInterface('thumbsRightArrow','off');
						}
						

						if(newPosition >= 0 ){									// disable left arrow
							myZoom.toggleInterface('thumbsLeftArrow','off');
						}

						
					}

				} else {
	
					topValue = objMove.style.top;
					topValue = (topValue.replace("px",""));
					topValue = topValue * 1;
					newPosition = topValue + stepDistance;

					if((newPosition > (zoomWindowHeight - objMove.height)) && (newPosition <= 0)){	// constrain panning
						objMove.style.top = newPosition + "px"; 
					} else {
						window.clearInterval(objMove.shiftInterval);	// out of range, clear animation function						
					}

				}

				currentStep++;

				if (currentStep > steps) { window.clearInterval(objMove.shiftInterval); }
				
			},intervals
		)
	}
	

/*--------------------------------------------------------------------------*/

	//
	//	Zooms IN or OUT image and enables/diables appropriate interface controls
	//
	
	this.zoom =  function(direction) {

		if(direction == 'in'){
			this.toggleInterface('zoomIn','off');
			this.toggleInterface('zoomOut','on');
			this.showImage(largeSize);
		} else {
			this.toggleInterface('zoomIn','on');
			this.toggleInterface('zoomOut','off');
			this.showImage(normalSize);
		}

	}


/*--------------------------------------------------------------------------*/

	//
	//	Preloads image and enable/disables panning for images depending on size. 
	//
	
	this.showImage = function(size){

		var objImage = document.getElementById('image');
		var objImageLink = document.getElementById('imageLink');	
		var objCaption = document.getElementById('caption');		
		
		objImage.style.display = 'none';	// hide old image

		// preload imagele
		imgPreload = new Image();
	
		imgPreload.onload=function(){
			objImage.src = imgPreload.src;

			// center image before displaying
			objImage.style.top = (zoomWindowHeight - imgPreload.height)/ 2 + 'px';
			objImage.style.left = (zoomWindowWidth - imgPreload.width)/ 2 + 'px';
			
			// if image is bigger then viewing window, enable panning
			if((imgPreload.width > zoomWindowWidth) || (imgPreload.height > zoomWindowHeight)) {

				objImageLink.style.cursor = 'move';
				Drag.init( objImage ,null, zoomWindowWidth - imgPreload.width, 0, zoomWindowHeight - imgPreload.height, 0);

				myZoom.toggleInterface('panUp','on');
				myZoom.toggleInterface('panRight','on');
				myZoom.toggleInterface('panDown','on');
				myZoom.toggleInterface('panLeft','on');
				
			} else {
	
				objImageLink.style.cursor = 'auto';			
				objImage.onmousedown = null;	// stop drag

				myZoom.toggleInterface('panUp','off');
				myZoom.toggleInterface('panRight','off');
				myZoom.toggleInterface('panDown','off');
				myZoom.toggleInterface('panLeft','off');
			}

			// If caption exists for current image, display
			if(imageArray[imageId]['caption']){
				objCaption.innerHTML = imageArray[imageId]['caption'];
				objCaption.style.display = 'block';
			} else {
				objCaption.style.display = 'none';
			}

			// A small pause between the image loading and displaying is required with IE,
			// this prevents the previous image displaying for a short burst causing flicker.
			if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(750); } 

			objImage.style.display = 'block';
			
			// if this is the first image loaded, begin preloading the rest
			if(imagesLoadedCounter == 0){
				imagesLoadedCounter++;	
				myZoom.preloadImages();
			}
			
		}

		imgPreload.src = imageUrl + size + imageArray[imageId]['image'];		
	}

/*--------------------------------------------------------------------------*/

	//
	//	Preloads interface elements. Product images are preloaded only after first the initial product
	//	image is displayed (preloadImages function).
	//

	this.preloadInterface = function(){

		 // set interface elements in image list
		interfaceImages = new Array();
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/overlay.png");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-2-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-3-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-4-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-container-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/zoom-container-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-left-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-right-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-down-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-left-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-right-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-top-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/zoom-in-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/zoom-out-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/close-off.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-container-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-down-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-left-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-right-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/pan-top-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-2-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-3-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-4-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-left-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/thumbs-right-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/zoom-container-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/zoom-in-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/zoom-out-on.gif");
		interfaceImages.push("http://media.redgaloshes.com/zoomtool/close-on.gif");


		preloadInterface = new Array();

		// preload interface elements
		for(i=0; i < interfaceImages.length; i++) {
	
			preloadInterface[i] = new Image();

		
			// when last interface element is finished loading, display first image
			if(i == (interfaceImages.length - 1)){

				preloadInterface[i].onload = function(){			
					myZoom.showImage(normalSize);
				}
			}

			preloadInterface[i].src = interfaceImages[i];
		}

	}



/*--------------------------------------------------------------------------*/

	//
	//	Preloads images in the imageArray.
	//

	this.preloadImages = function(){

		preloadNormal = new Array();
		preloadLarge = new Array();	

		// preload product images
		for(i=0; i<imageArray.length; i++) {
			
			preloadNormal[i] = new Image();
			preloadNormal[i].src = imageUrl + normalSize + imageArray[i]['image'];
			preloadLarge[i] = new Image();
			preloadLarge[i].src = imageUrl + largeSize + imageArray[i]['image'];
		}

	}

/*--------------------------------------------------------------------------*/
	
	//
	//	Initial function call. Checks the image array and sets the active imageId.
	//	Displays zoomtool and centers in viewport. Then loads active image and begins preloading others.
	//
	
	this.open = function(objLink) {

		// get image name from href value
		var regex=/[0-9]{6}.jpg/gi;
		var image = objLink.href.match(regex);

		imageId=0;
		while(imageArray[imageId]['image'] != image){ imageId++; }

		this.createZoomToolHTML();

		var arrayPageSize = ZT_getPageSize();
		var arrayPageScroll = getPageScroll();
	
		var objOverlay = document.getElementById('overlay');
		objOverlay.style.height = (arrayPageSize[1] + 'px');
		objOverlay.style.display = 'block';

		var objZoomWindow = document.getElementById('zoomWindow');
		var objImage = document.getElementById('image');
		var objLoadingImage = document.getElementById('loadingImage');
	
		hideSelectBoxes();
	
		// center zoomWindow and make sure that the top and left values are not negative
		var zoomWindowTop = arrayPageScroll[1] + ((arrayPageSize[3] - 80 - zoomWindowHeight) / 2);
		var zoomWindowLeft = ((arrayPageSize[0] - 20 - zoomWindowWidth) / 2);
	
		objZoomWindow.style.top = (zoomWindowTop < 0) ? "0px" : zoomWindowTop + "px";
		objZoomWindow.style.left = (zoomWindowLeft < 0) ? "0px" : zoomWindowLeft + "px";
	
		objZoomWindow.style.width = zoomWindowWidth + 'px';
		objZoomWindow.style.display = 'block';

		// once interface is preloaded, first image will be displayed and preloading of other
		// product images will begin
		this.preloadInterface();
	}


/*--------------------------------------------------------------------------*/

	this.close = function() {

		this.removeZoomToolHTML();
		showSelectBoxes();		
	}

/*--------------------------------------------------------------------------*/

}







//
//
function showSelectBoxes(){
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "visible";
	}
}

//
//
function hideSelectBoxes(){
	selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) {
		selects[i].style.visibility = "hidden";
	}
}





//
// getPageScroll()
// Returns array with x,y page scroll values.
// Core code from - quirksmode.org
//
function getPageScroll(){

	var yScroll;

	if (self.pageYOffset) {
		yScroll = self.pageYOffset;
	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
		yScroll = document.documentElement.scrollTop;
	} else if (document.body) {// all other Explorers
		yScroll = document.body.scrollTop;
	}

	arrayPageScroll = new Array('',yScroll) 
	return arrayPageScroll;
}




//
// ZT_getPageSize()
// Returns array with page width, height and window width, height
// Core code from - quirksmode.org
// Edit for Firefox by pHaez
//
function ZT_getPageSize(){
	
	var xScroll, yScroll;
	
	if (window.innerHeight && window.scrollMaxY) {	
		xScroll = document.body.scrollWidth;
		yScroll = window.innerHeight + window.scrollMaxY;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		xScroll = document.body.scrollWidth;
		yScroll = document.body.scrollHeight;
	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
		xScroll = document.body.offsetWidth;
		yScroll = document.body.offsetHeight;
	}
	
	var windowWidth, windowHeight;
	if (self.innerHeight) {	// all except Explorer
		windowWidth = self.innerWidth;
		windowHeight = self.innerHeight;
	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
		windowWidth = document.documentElement.clientWidth;
		windowHeight = document.documentElement.clientHeight;
	} else if (document.body) { // other Explorers
		windowWidth = document.body.clientWidth;
		windowHeight = document.body.clientHeight;
	}	
	
	// for small pages with total height less then height of the viewport
	if(yScroll < windowHeight){
		pageHeight = windowHeight;
	} else { 
		pageHeight = yScroll;
	}

	// for small pages with total width less then width of the viewport
	if(xScroll < windowWidth){	
		pageWidth = windowWidth;
	} else {
		pageWidth = xScroll;
	}


	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
	return arrayPageSize;
}




//
// pause(numberMillis)
// Pauses code execution for specified time. Uses busy code, not good.
// Code from http://www.faqts.com/knowledge_base/view.phtml/aid/1602
//
function pause(numberMillis) {
	var now = new Date();
	var exitTime = now.getTime() + numberMillis;
	while (true) {
		now = new Date();
		if (now.getTime() > exitTime)
			return;
	}
}





//
// drag functionality
//
var Drag = {

	obj : null,

	init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
	{
		o.onmousedown	= Drag.start;

		o.hmode			= bSwapHorzRef ? false : true ;
		o.vmode			= bSwapVertRef ? false : true ;

		o.root = oRoot && oRoot != null ? oRoot : o ;

		if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
		if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
		if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
		if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

		o.minX	= typeof minX != 'undefined' ? minX : null;
		o.minY	= typeof minY != 'undefined' ? minY : null;
		o.maxX	= typeof maxX != 'undefined' ? maxX : null;
		o.maxY	= typeof maxY != 'undefined' ? maxY : null;

		o.xMapper = fXMapper ? fXMapper : null;
		o.yMapper = fYMapper ? fYMapper : null;

		o.root.onDragStart	= new Function();
		o.root.onDragEnd	= new Function();
		o.root.onDrag		= new Function();
	},

	start : function(e)
	{
		var o = Drag.obj = this;
		e = Drag.fixE(e);
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		o.root.onDragStart(x, y);

		o.lastMouseX	= e.clientX;
		o.lastMouseY	= e.clientY;

		if (o.hmode) {
			if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
			if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
		} else {
			if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
			if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
		}

		if (o.vmode) {
			if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;
			if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
		} else {
			if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
			if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
		}

		document.onmousemove	= Drag.drag;
		document.onmouseup		= Drag.end;

		return false;
	},

	drag : function(e)
	{
		e = Drag.fixE(e);
		var o = Drag.obj;

		var ey	= e.clientY;
		var ex	= e.clientX;
		var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
		var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
		var nx, ny;

		if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
		if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
		if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
		if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

		nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
		ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

		if (o.xMapper)		nx = o.xMapper(y)
		else if (o.yMapper)	ny = o.yMapper(x)

		Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
		Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
		Drag.obj.lastMouseX	= ex;
		Drag.obj.lastMouseY	= ey;

		Drag.obj.root.onDrag(nx, ny);
		return false;
	},

	end : function()
	{
		document.onmousemove = null;
		document.onmouseup   = null;
		Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
									parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
		Drag.obj = null;
	},

	fixE : function(e)
	{
		if (typeof e == 'undefined') e = window.event;
		if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
		if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
		return e;
	}
};




//
// browserDetect()
// Stripped down code solely for detecting IE 5.x
//
function browserDetect() {
	
	var ua = navigator.userAgent.toLowerCase(); 
	
	// browser name
	isIE = (ua.indexOf('msie') != -1 && (ua.indexOf('webtv') == -1) ); 
	
	// browser version
	versionMinor = parseFloat(navigator.appVersion); 
	
	// correct version number
	if (isIE && versionMinor >= 4) {
		versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
	}
	
	versionMajor = parseInt(versionMinor); 
	
	return(isIE && versionMajor == 5);

}

//
// addLoadEvent()
// Adds event to window.onload without overwriting currently assigned onload functions.
//
function addLoadEvent(func)
{	
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
    	window.onload = func;
	} else {
		window.onload = function(){
		oldonload();
		func();
		}
	}
}



//
// initZoomtool()
// Function runs on window load, going through link tags looking for rel="zoomtool".
// These links receive onclick events that enable the lightbox display for their targets.
//
function initZoomtool()
{
	if (!document.getElementsByTagName){ return; }
	var anchors = document.getElementsByTagName("a");

	// loop through all anchor tags
	for (var i=0; i<anchors.length; i++){
		var anchor = anchors[i];

		if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "zoomtool")){
			anchor.onclick = function () {myZoom.open(this); return false;}
		}
	}
}


addLoadEvent(initZoomtool);	// run initZoomtool on window.onLoad