function returnObjById(id) {
	if (document.getElementById) {
		var returnVar = document.getElementById(id);
	} else {
		if (document.all) {
			var returnVar = document.all[id];
		} else {
			if (document.layers) {
				var returnVar = document.layers[id];
			}
		}
	}
	return returnVar;
}
function extract_param(pname, str) {
	var p = str.indexOf(pname+"=");
	if (p<0) return "";
	else {
		var r = str.indexOf("&", p+(pname.length)+1);
		if (r<0) return str.substring(p+(pname.length)+1);
		else return str.substring(p+(pname.length)+1, r);
	}
}

var currentView = "1";
var selectedThumb = 1;
// is there a 2nd zoom level?
var currentImgZoom2 = false;

// colorId is not used.
// zoomLevel (global var) is either 'zoom2', 'zoom', 'main' or 'anim'.
// fZoomLevel is '', 'zoom2', 'zoom' or 'main' -- '' doesn't update zoomLevel; other values do.
// view is a thumbId (when called by updateProductImage(thumbId)) or ''.
// if loadOnly, do not swap the loaded image into the place of the main img.
function setProductImage(colorId,fZoomLevel,view,loadOnly) {
	var mainImg = returnObjById("mainimg");
	var zoom2Img = returnObjById("zoom2img");
	var loadImg = new Image;
	var mainImgPath = mainImg.src;
	var newFilePath;
	var target_width = 375;
	var target_height = 450;
	var old_zoomLevel = zoomLevel;
	if (fZoomLevel != '') {
		zoomLevel = fZoomLevel;
	}
	if (zoomLevel == "zoom") {
		target_width = 1000;
		target_height = 1200;
	}
	if (view != "") {
		// loading new img.
		var thumbImg = returnObjById("product_thumb"+(view>=0 ? view : '')+"_img");
		newFilePath = extract_param("image", thumbImg.src);
		var maxw = extract_param("maxw", thumbImg.src);
		// if starting image is not high-res, don't zoom:
		if (maxw >= 0 && maxw < 1000) {
			target_width = 375;
			target_height = 450;
			setZoomIcons(false, false);

			//alert('loaded img after zoom2; zoomlevel = '+zoomLevel);
			// if currently at zoom level, undo it before hiding zoom controls
			if (old_zoomLevel == "zoom" || old_zoomLevel == "zoom2") {
				zoomLevel = "main";
				showZoomInstructions(false);
				setPanCursor();
				mainImg.style.width = target_width+'px';
				mainImg.style.height = target_height+'px';
				mainImg.style.top = '0px';
				mainImg.style.left = '0px';
			}

			// disable zooming
			var zc = returnObjById("zoomcontrol");
			if (zc) {
				zc.style.visibility = "hidden";
			}
		} else {
			// enable zooming
			var zc = returnObjById("zoomcontrol");
			if (zc) {
				zc.style.visibility = "visible";
			}
			if (zoomLevel=='main') {
				showZoomInstructions(false);
				setPanCursor();
				mainImg.style.width = target_width+'px';
				mainImg.style.height = target_height+'px';
				mainImg.style.top = '0px';
				mainImg.style.left = '0px';
			}
			setZoomIcons((zoomLevel=='main' || (zoomLevel=='zoom' && currentImgZoom2) ? true : false), (zoomLevel=='main' ? false : true));
			//alert('setZoomIcons('+(zoomLevel=='main' || (zoomLevel=='zoom' && currentImgZoom2) ? true : false)+', '+(zoomLevel=='main' ? false : true)+'); zoomlevel='+zoomLevel);
		}
	} else if (zoomLevel!="zoom2") {
		newFilePath = extract_param("image", mainImgPath);
	}
	if (zoomLevel == "zoom" || zoomLevel == "main") {
		newFilePath = "resize_image.php?image="+newFilePath+"&width="+target_width+"&height="+target_height;
		loadImg.onload = function() {
			if (!loadOnly) {
				mainImg.src = loadImg.src;
				mainImg.style.display = 'block';
				zoom2Img.style.display = 'none';
			}
		}
	} else if (zoomLevel == "zoom2") {
		newFilePath = zoom2_img;
		loadImg.onload = function() {
			if (!loadOnly) {
				zoom2Img.src = loadImg.src;
				zoom2Img.style.width = zoomimagewidth+'px';
				zoom2Img.style.height = zoomimageheight+'px';
				zoom2Img.style.top = -(zoomimageheight-main_h)/2+'px';
				zoom2Img.style.left = -(zoomimagewidth-main_w)/2+'px';
				mainImg.style.display = 'none';
				zoom2Img.style.display = 'block';
				//alert("path = "+newFilePath+"; top = "+zoom2Img.style.top+"; left = "+zoom2Img.style.left);
			}
		}
	}
	//if(view!='') alert('setProductImage: new path='+newFilePath+'; thumbImg? '+(thumbImg ? 'yes' : 'no')+';');
	loadImg.src = newFilePath;
}
function updateProductImage(thumbId) {
	//alert('update image: zoomlevel='+zoomLevel);
	if (zoomLevel!='zoom' && zoomLevel!='main') {
		// reset zoom level if at level 2
		setProductImage('','main',thumbId,false);
	} else {
		// keep same zoom level
		setProductImage('','',thumbId,false);
	}
	allowZoomControls(true);
}
function updateProductImageV(thumbId) {
	updateProductImage(thumbId);
}
function makeUpDownArray(lft,pct,onlyEvens) {
	var updnAr = new Array();
	var noJumps = 10;
	var start = 1;
	if (onlyEvens) start++;
	var nxt = start;
	var lftOvr = ( lft % 2 );
	lft = parseInt((parseInt(lft) / 2) - 1);
	var nextInt = start;
	updnAr[0] = start;
	var done = false;
	var k = 1;
	while (!done) {
		nxt = nxt * pct;
		nextInt = parseInt(nxt);
		if (onlyEvens) {
			if ( ( nextInt % 2) == 1 ) {
				nextInt++;
			}
		}
		if (nextInt < lft) {
			updnAr[k] = nextInt;
		} else {
			if (lft < updnAr[k-1] ) {
				updnAr[k-1] = updnAr[k-1] + lft;
			} else {
				updnAr[k] = lft;
			}
			done = true;
		}
		lft = lft - nextInt;
		k++;
	}
	var g = updnAr.length;
	for (var w=(updnAr.length-1); w > -1; w--) {
		updnAr[g] = updnAr[w];
		if (lftOvr == 1) { 
			updnAr[w] = updnAr[w] + 1;
			lftOvr = 0;
		}
		g++;
	}
	return updnAr;
}
function setZoomIcons(zoominable, zoomoutable) {
	var zoomIn = returnObjById("zoomin");
	var zoomOut = returnObjById("zoomout");
	if (zoominable) {
		zoomIn.src = '/imgs/zoom_plus_on.png';
		zoomIn.style.cursor = 'pointer';
	} else {
		zoomIn.src = '/imgs/zoom_plus_off.png';
		zoomIn.style.cursor = 'default';
	}
	if (zoomoutable) {
		zoomOut.src = '/imgs/zoom_minus_on.png';
		zoomOut.style.cursor = 'pointer';
	} else {
		zoomOut.src = '/imgs/zoom_minus_off.png';
		zoomOut.style.cursor = 'default';
	}
}
function showZoomInstructions(show) {
	var zoomInst = returnObjById("zoommessage");
	if (show) {
		zoomInst.style.visibility = 'visible';
	} else {
		zoomInst.style.visibility = 'hidden';
	}
}

function allowZoomControls(yes_or_no) {
	if (yes_or_no) zoomAllowed = true;
	else zoomAllowed = false;
}

var zoom_w = 1000;
var zoom_h = 1200;
var main_w = 375;
var main_h = 450;
var zoomLevel = "main";
var origImg = new Image;
var zoomAllowed = true;
function zoomJoes(inout) {
	if (!zoomAllowed) return;
	var pimg = returnObjById("mainimg");
	var zimg = returnObjById("zoom2img");
	// the numbers below are deltas between zoomed width/ht and normal width/ht:
	var easearray = makeUpDownArray(zoom_w-main_w,1.30,true);
	var easearray2 = makeUpDownArray(zoom_h-main_h,1.30,true);
	// iff there is a zoom2_img URL defined then we can zoom to level 2
	if (zoom2_img != '') {
		currentImgZoom2 = true;
	} else {
		currentImgZoom2 = false;
	}
	if (inout) {
		if (zoomLevel == "main") {
			// level: main -> zoom
			zoomLevel = "anim";
			allowZoomControls(false);
			setZoomIcons(currentImgZoom2, true);
			setProductImage('','zoom','',true);
			var wid = main_w;
			var hei = main_h;
			var k=0;
			for (var i=0; i<easearray.length; i++) {
				wid = easearray[i] + wid;
				hei = easearray2[i] + hei;
				setTimeout("returnObjById('mainimg').style.width='"+wid+"px'",i*33);
				setTimeout("returnObjById('mainimg').style.left='"+(-1*((wid-main_w)/2))+"px'",i*33);
				setTimeout("returnObjById('mainimg').style.height='"+hei+"px'",i*33);
				setTimeout("returnObjById('mainimg').style.top='"+(-1*((hei-main_h)/2))+"px'",i*33);
				k = i*33;
			}
			setTimeout("setProductImage('','zoom','',false)",k);
			i++;
			k = i*33;
			setTimeout("initimagepan()",k);
			setTimeout("setPanCursor()",k);
			setTimeout("showZoomInstructions(true)",k);
			setTimeout("allowZoomControls(true)",k);
		}
		else if (zoomLevel == "zoom" && currentImgZoom2) {
			// level: zoom -> zoom2
			zoomLevel = "anim";
			allowZoomControls(false);
			setZoomIcons(false, true);
			setProductImage('','zoom2','',true);
			$('#mainimg').fadeOut("normal", function() {
				setProductImage('','zoom2','',false);
				initimagepan();
				setPanCursor();
				allowZoomControls(true);
				});
		}
	} else {
		if (zoomLevel == "zoom2") {
			// level: zoom2 -> zoom
			zoomLevel = "anim";
			allowZoomControls(false);
			setZoomIcons(true, true);
			showZoomInstructions(true);
			//setProductImage('','zoom','',true);
			returnObjById('mainimg').style.width = zoom_w+'px';
			returnObjById('mainimg').style.height = zoom_h+'px';
			returnObjById('mainimg').style.top = -(zoom_h-main_h)/2+'px';
			returnObjById('mainimg').style.left = -(zoom_w-main_w)/2+'px';
			$('#zoom2img').fadeOut("normal", function() {
				setProductImage('','zoom','',false);
				initimagepan();
				setPanCursor();
				allowZoomControls(true);
				});
		}
		else if (zoomLevel == "zoom") {
			// level: zoom -> main
			zoomLevel = "anim";
			allowZoomControls(false);
			setZoomIcons(true, false);
			showZoomInstructions(false);
			var wid = zoom_w;
			var hei = zoom_h;
			var j = 0;
			if (pimg.style.left != "-312px" || pimg.style.top != "-375px") {
				var steps = 6;
				var toMoveLeft = parseInt(( parseInt(pimg.style.left) - parseInt("-312")) / steps);
				var toMoveTop = parseInt(( parseInt(pimg.style.top) - parseInt("-375")) / steps);
				for (m=0; m<steps; m++) {
					setTimeout("returnObjById('mainimg').style.top = ( parseInt(returnObjById('mainimg').style.top) - " + toMoveTop + ") + 'px'", m*33);
					setTimeout("returnObjById('mainimg').style.left = ( parseInt(returnObjById('mainimg').style.left) - " + toMoveLeft + ") + 'px'", m*33);
					j++;
				}
				setTimeout("returnObjById('mainimg').style.top = '-312px'", j*33);
				setTimeout("returnObjById('mainimg').style.left = '-375px'", j*33);
				j--;
			}
			for (var i=0; i<easearray.length; i++) {
				wid = wid - easearray[i];
				hei = hei - easearray2[i];
				setTimeout("returnObjById('mainimg').style.width='"+wid+"px'",(i+j)*33);
				setTimeout("returnObjById('mainimg').style.left='"+(-1*((wid-main_w)/2))+"px'",(i+j)*33);
				setTimeout("returnObjById('mainimg').style.height='"+hei+"px'",(i+j)*33);
				setTimeout("returnObjById('mainimg').style.top='"+(-1*((hei-main_h)/2))+"px'",(i+j)*33);
				k = (i+j)*33;
			}
			i++;
			k = (i+j)*33;
			setTimeout("setProductImage('','main','',false)",k);
			setTimeout("setPanCursor()",k);
			setTimeout("allowZoomControls(true)",k);
		}
	}
}
function setPanCursor() {
	var pimg = returnObjById("mainimg");
	var zimg = returnObjById("zoom2img");
	if (zoomLevel == "main") {
		pimg.style.cursor="default";
		zimg.style.cursor="default";
	}
	if (zoomLevel == "zoom" || zoomLevel == "zoom2") {
		pimg.style.cursor="move";
		zimg.style.cursor="move";
	}
}
// pan zoom image
var panareawidth = 0;
var panareaheight = 0;
var panimagewidth = 0;
var panimageheight = 0;
var panimageoffsetx = 0;
var panimageoffsety = 0;
var panimagecenterx = 0;
var panimagecentery = 0;
var panposx = 0;
var panposy = 0;
var panliftx = 0;
var panlifty = 0;
var panelex = 0;
var paneley = 0;
var panpandragobj = null;
var whichelem;
function pannocascade() { 
	return false;
}
var paninited = false;
function initimagepan(objectId) {
	if (!paninited) {
		whichelem = objectId;
		var thepanarea = returnObjById("loadarea");
		var o = (zoomLevel=="zoom2" ? 'zoom2img' : 'mainimg');
		if (thepanarea) {
			var thepanimage = returnObjById(o);
			panareawidth = thepanarea.style.width;
			panareawidth = panareawidth.replace(/px/,"");
			panareaheight = thepanarea.style.height;
			panareaheight = panareaheight.replace(/px/,"");
			panimagewidth = thepanimage.width;
			panimageheight = thepanimage.height;
			zoomposadjustw = panimagewidth / 2;
			zoomposadjusth = panimageheight / 2;
		} else {
			alert ("Please wrap a container around your pandrag objects");
		}
		document.onmousemove = panupdate;
		panupdate();
	}
}
function panupdate(e) {
	panpositionnow(e);
}
function panpositionnow(e) {
	if (!e) {
		var e = window.event;
	}
	if (e) { 
		if (e.pageX || e.pageY) {
			panposx = e.pageX;
			panposy = e.pageY;
			algor = '[e.pageX]';
		} else { 
			if (e.clientX || e.clientY) {
				panposx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
				panposy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
				algor = '[e.clientX]';
				if (e.pageX || e.pageY) algor += '[e.pageX]';
			}
		}
	}
}
function panme(origObj) {
	if (zoomLevel == "zoom" || zoomLevel == "zoom2") {
		var o = (zoomLevel=="zoom2" ? 'zoom2img' : 'mainimg');
		document.onmousedown = pannocascade;
		panpandragobj = new Object(origObj);
		panpandragobj.style.zIndex = 1;
		document.onmousemove = pandrag;
		document.onmouseup = pandrop;
		panliftx = panposx;
		panlifty = panposy;
		panelex = orix = returnObjById(o).offsetLeft;
		paneley = oriy = returnObjById(o).offsetTop;
		panupdate();
	}
}
function pandrag(e) {
	var o = (zoomLevel=="zoom2" ? 'zoom2img' : 'mainimg');
	panimageoffsetx = returnObjById(o).offsetLeft;
	panimageoffsety = returnObjById(o).offsetTop;
	if (panpandragobj) {			
		panelex = orix + (panposx-panliftx);
		paneley = oriy + (panposy-panlifty);
		panpandragobj.style.position = "absolute";
		var maxpanx = (panimagewidth - panareawidth) * -1;
		var maxpany = (panimageheight - panareaheight) * -1;
		if (panelex <= 0 && panelex > maxpanx) {
			panpandragobj.style.left = (panelex).toString(10) + 'px';
		}
		if (paneley <= 0 && paneley > maxpany) {
			panpandragobj.style.top	= (paneley).toString(10) + 'px';
		}
	}
	panupdate(e);
	return false;
}
function pandrop() {
	panupdate();
	panpandragobj.style.zIndex = 0;
	document.onmousemove = panupdate;
	document.onmouseup = null;
	document.onmousedown = null;
}