/*
 * MojoZoom 0.1.4 - JavaScript Image Zoom
 * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/
 * Licensed under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt]
 */
var MojoZoom = (function() {

	var $ = function(id) {return document.getElementById(id);};
	var dc = function(tag) {return document.createElement(tag);};

    //show scrolling zoom-images with this size
	var defaultWidth = 300; 
	var defaultHeight = 200; 
    //show images smaller than minZoomWidth or Height without scrolling
    var minZoomWidth = 360;
    var minZoomHeight = 240;

	function addEvent(element, ev, handler) 
	{
		var doHandler = function(e) {
			return handler(e||window.event);
		}
		if (element.addEventListener) { 
            element.addEventListener(ev, doHandler, false); 
		} else if (element.attachEvent) { 
			element.attachEvent("on" + ev, doHandler); 
		}
	}
	function getElementPos(element)
	{
		var x = element.offsetLeft;
		var y = element.offsetTop;
		var parent = element.offsetParent;
		while (parent) {
			x += parent.offsetLeft;
			y += parent.offsetTop;
			parent = parent.offsetParent;
		}
		return {
			x : x,
			y : y
		}
	}

	function getEventMousePos(element, e) {
		var scrollX = document.body.scrollLeft || document.documentElement.scrollLeft;
		var scrollY = document.body.scrollTop || document.documentElement.scrollTop;

		if (e.currentTarget) {
			var pos = getElementPos(element);
			return {
				x : e.clientX - pos.x + scrollX,
				y : e.clientY - pos.y + scrollY
			}
		}
		return {
			x : e.offsetX,
			y : e.offsetY
		}
	}

    function getVisibleArea() {
    if ( typeof(window.innerHeight) == 'number' ) {
 		var winWidth = window.innerWidth;
        var winHeight = window.innerHeight; 
    } else if ( document.documentElement) {
        var winWidth = document.documentElement.clientWidth;
        var winHeight = document.documentElement.clientHeight; 
    } else {
        var winWidth = document.body.clientWidth;
        var winHeight = document.body.clientHeight;  
    }
    if ( typeof(window.pageYOffset) == 'number') {
        var scrollX = window.pageXOffset;
        var scrollY = window.pageYOffset;     
    } else if (document.documentElement){       
        var scrollX = document.documentElement.scrollLeft;
        var scrollY = document.documentElement.scrollTop;
    } else {
        var scrollX = document.body.scrollLeft;
        var scrollY = document.body.scrollTop;    
    }
    return {
            x : scrollX,
            y : scrollY,
            w : winWidth,
            h : winHeight
        }
    }
    
	function makeZoomable(img, zoomSrc, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow) {
		// make sure the image is loaded, if not then add an onload event and return
		if (!img.complete && !img.__mojoZoomQueued) {
			addEvent(img, "load", function() {
				img.__mojoZoomQueued = true;
				setTimeout(function() {
				makeZoomable(img, zoomSrc, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow);
				}, 1);
			});
			return;
		}

		img.__mojoZoomQueued = false;

		// Wrap everything in a timeout.
		// this fixes a problem where, if makeZoomable is called a second time after changing the src,
		// FF would not have figured out the new offsetHeight of the image yet. A small timeout helps though it's rather hackish.
		setTimeout(function(){

		// sorry
		var isIE = !!document.all && !!window.attachEvent && !window.opera;

		var w = img.offsetWidth;
		var h = img.offsetHeight;

		var oldParent = img.parentNode;
		if (oldParent.nodeName != "A") {
			var linkParent = dc("a");
			linkParent.setAttribute("href", zoomSrc);
			oldParent.replaceChild(linkParent, img);
			linkParent.appendChild(img);
		} else {
			var linkParent = oldParent;
		}

		linkParent.style.position = "relative";
		linkParent.style.display = "inline";
		linkParent.style.width = w+"px";
		linkParent.style.height = h+"px";

		var imgLeft = img.offsetLeft;
		var imgTop = img.offsetTop;

		var zoom = dc("div");
		zoom.className = "mojozoom_marker";

		var zoomImg = dc("img");
		zoomImg.className = "mojozoom_img";

		zoomImg.style.position = "absolute";
		zoomImg.style.left = "-9999px";
		zoomImg.style.top = "-9999px";
		document.body.appendChild(zoomImg);

		var parent = img.parentNode;

		var ctr = dc("div");
		with (ctr.style) {
			position = "absolute";
			left = imgLeft+"px";
			top = imgTop+"px";
			width = w+"px";
			height = h+"px";
			overflow = "hidden";
			display = "none";
		}

		ctr.appendChild(zoom);
		parent.appendChild(ctr);

		var zoomInput = parent;

		// clear old overlay
		if (img.__mojoZoomOverlay)
			parent.removeChild(img.__mojoZoomOverlay);
		img.__mojoZoomOverlay = ctr;

		// clear old high-res image
		if (img.__mojoZoomImage && img.__mojoZoomImage.parentNode)
			img.__mojoZoomImage.parentNode.removeChild(img.__mojoZoomImage);
		img.__mojoZoomImage = zoomImg;

		var useDefaultCtr = false;

        //limit position of zoom-image to visible area

        var visArea = getVisibleArea();
        var imgPos = getElementPos(img);
        if ((imgPos.x+w/2) > (visArea.x+visArea.w/2)) {
            var posOffset_x = -(zoomWidth ? zoomWidth : defaultWidth) - w - 40;
        } else {
            var posOffset_x = 0;
        }
        if (((imgPos.y+h/2)-(zoomHeight ? zoomHeight : defaultHeight)/2)<visArea.y) {
            var posOffset_y = -imgPos.y+visArea.y;
         } else {
            if ((imgPos.y+h/2+(zoomHeight ? zoomHeight : defaultHeight)/2) > (visArea.y+visArea.h)) {
                var posOffset_y = -imgPos.y + visArea.y + visArea.h - (zoomHeight ? zoomHeight : defaultHeight);
            } else {
                var posOffset_y = h/2-(zoomHeight ? zoomHeight : defaultHeight)/2;
            }
        }
            
		if (!zoomImgCtr) {
			zoomImgCtr = dc("div");
			zoomImgCtr.className = "mojozoom_imgctr";
			zoomImgCtr.style.left = w + imgPos.x + posOffset_x+"px";
			zoomImgCtr.style.top = imgPos.y + posOffset_y+"px";

			zoomImgCtr.style.width = (zoomWidth ? zoomWidth : defaultWidth) +"px";
			zoomImgCtr.style.height = (zoomHeight ? zoomHeight : defaultHeight) +"px";

			document.body.appendChild(zoomImgCtr);
			useDefaultCtr = true;
		}
		zoomImgCtr.style.overflow = "hidden";

		if (!alwaysShow) {
			zoomImgCtr.style.visibility = "hidden";
		}

		addEvent(zoomImg, "load", function() {

			// bail out if img has been removed from dom
			if (!zoomImg.parentNode) return;
            var time_elapsed;
            var mouse_out_timer = 0;

			var zoomWidth = zoomImg.offsetWidth;
			var zoomHeight = zoomImg.offsetHeight;

			var ctrWidth = zoomImgCtr.offsetWidth;
			var ctrHeight = zoomImgCtr.offsetHeight;

			var ratioW = zoomWidth / w;
			var ratioH = zoomHeight / h;

			var markerWidth = Math.round(ctrWidth / ratioW);
			var markerHeight = Math.round(ctrHeight / ratioH);

			document.body.removeChild(zoomImg);
			zoomImgCtr.appendChild(zoomImg);

			var zoomBorder = dc("div");
			zoomBorder.className = "mojozoom_border";    
			zoom.appendChild(zoomBorder);
			var zoomFill = dc("div");
			zoomFill.className = "mojozoom_fill";
			zoom.appendChild(zoomFill);            
			zoom.style.width = (markerWidth-2)+"px";
			zoom.style.height = (markerHeight-2)+"px";


			if (alwaysShow) {
				zoom.style.left = "0px";
				zoom.style.top = "0px";
	
				zoomImg.style.left = "0px";
				zoomImg.style.top = "0px";
			}
            var isInImage = false;
			if (!alwaysShow) {
                if (document.all && !window.opera) {
                    out_event = "mouseleave";
                } else {
                    out_event = "mouseout";
                }
				addEvent(zoomInput, out_event, 
					function(e) {
    
						var target = e.target || e.fromElement;
						if (!target) return;
						//if (target.nodeName != "DIV") return;
						var relTarget = e.relatedTarget || e.toElement;
                        
						if (!relTarget) return;
						while (relTarget != target && relTarget.nodeName != "BODY" && relTarget.parentNode) {
							relTarget = relTarget.parentNode;
						}
                        if ((mouse_out_timer ==0) && (relTarget != target)) {
                        
							mouse_out_timer = 1;
                            if (isIE) {
 									ctr.style.display = "none";
                                    zoomImgCtr.style.visibility = "hidden";	 
                            } else {
                                 //delay the mouseout-event to prevent flickering 
                                setTimeout(function() { 
                                    if (mouse_out_timer == 1) {
                                        ctr.style.display = "none";
                                        zoomImgCtr.style.visibility = "hidden";	                                           
                                    }
                                    }, 50); 
                            }

						}
					}
				);
			}
			time_elapsed = true;
			addEvent(zoomInput, "mousemove", function(e) { 
                mouse_out_timer = 0;
                //limit mousemove-events to one per 10ms to prevent the slow IE from bucking trough the image...
				if (time_elapsed) {
                    //limit position of zoom-image to visible area
					var imgPos = getElementPos(img);
                    var visArea = getVisibleArea();
                    isInImage = true;
                    //resize for images smaller than zoomSize
					if (zoomWidth <= minZoomWidth) {
						ctrWidth = zoomWidth;
						markerWidth = 0;
					}
					if (zoomHeight <= minZoomHeight) {
						ctrHeight = zoomHeight;
						markerHeight = 0;
					}
                    if ((imgPos.x+w/2) > (visArea.x+visArea.w/2)) {
                        var posOffset_x = -ctrWidth - w - 40;
                    } else {
                        var posOffset_x = 0;
                    }
                    if (((imgPos.y+h/2)-ctrHeight/2)<visArea.y) {
                        var posOffset_y = -imgPos.y +visArea.y+2;
                     } else {
                        if ((imgPos.y+h/2+ctrHeight/2) > (visArea.y+visArea.h)) {
                            var posOffset_y = -imgPos.y + visArea.y + visArea.h - ctrHeight-2;
                        } else {
                            var posOffset_y = h/2-ctrHeight/2;
                        }
                    }
                    if (useDefaultCtr) {
						zoomImgCtr.style.left = w + imgPos.x + posOffset_x +"px";
						zoomImgCtr.style.top = imgPos.y + posOffset_y + "px";
                        zoomImgCtr.style.width = ctrWidth + "px";
                        zoomImgCtr.style.height = ctrHeight + "px";
					}
					ctr.style.display = "block";
					zoomImgCtr.style.visibility = "visible";

					var pos = getEventMousePos(zoomInput, e);
					if (e.srcElement && isIE) {
						if (e.srcElement == zoom) return;
						if (e.srcElement != zoomInput) {
							var zoomImgPos = getElementPos(e.srcElement);
							pos.x -= (imgPos.x - zoomImgPos.x);
							pos.y -= (imgPos.y - zoomImgPos.y);
						}
					}
					var x = markerWidth/2;
					var y = markerHeight/2;

					if (!isIE) {
						pos.x -= imgLeft;
						pos.y -= imgTop;
					}

					if (pos.x < x) pos.x = x;
					if (pos.x > (w-x)) pos.x = w-x;
					if (pos.y < y) pos.y = y;
					if (pos.y > (h-y)) pos.y = h-y;

                    var left = ((pos.x - x)|0);
                    var top = ((pos.y - y)|0);
                    //don't move at images smaller or equal to zoomSize
                    if (zoomWidth==ctrWidth && zoomHeight==ctrHeight) {
                        zoom.style.visibility = "hidden";
					}
					if (zoomWidth==ctrWidth) {
						zoomImg.style.left = 0;
					} else {
						zoom.style.left = left + "px";
						zoomImg.style.left = -((pos.x*ratioW - ctrWidth/2)|0)+"px";
					}
					if (zoomHeight==ctrHeight) {
						zoomImg.style.top = 0;
					} else {
						zoom.style.top = top + "px";
						zoomImg.style.top = -((pos.y*ratioH - ctrHeight/2)|0)+"px";
					}
                    time_elapsed = false;
                }
                //delay next event 
                setTimeout(function() { time_elapsed = true;} , 20);
			});

		});

		// I've no idea. Simply setting the src will make IE screw it self into a 100% CPU fest. In a timeout, it's ok.
		setTimeout(function() { 
			zoomImg.src = zoomSrc;
		}, 1);

		}, 1);
	}

	function init() {
		var images = document.getElementsByTagName("img");
		for (var i=0;i<images.length;i++) {
			var img = images[i];
			var zoomSrc = img.getAttribute("data-zoomsrc");
			if (zoomSrc) {
				makeZoomable(img, zoomSrc, document.getElementById(img.getAttribute("id") + "_zoom"), null, null, img.getAttribute("data-zoomalwaysshow")=="true");
			}
		}
	}

	return {
		addEvent : addEvent,
		init : init,
		makeZoomable : makeZoomable
	};

})();

MojoZoom.addEvent(window, "load", MojoZoom.init);

function viewlayer(va,onoff) {
	var obj=document.getElementById(va);
	if(onoff) obj.style.visibility="visible";
	else obj.style.visibility="hidden";
}
function select_img( va, num, w) {
    document.getElementById(va + '_img_nav').style.width = w + 'px';
    if (document.getElementById(va + '1')) {
        viewlayer(va+ '1', num==1);
        if (num==1) {
            document.getElementById(va + '_img1').src = "/images/img_1r.gif";
        } else {
            document.getElementById(va + '_img1').src = "/images/img_1.gif";
        }
    }
    if (document.getElementById(va + '2')) {
        viewlayer(va + '2', num==2);
        if (num==2) {
            document.getElementById(va + '_img2').src = "/images/img_2r.gif";
        } else {
            document.getElementById(va + '_img2').src = "/images/img_2.gif";
        }
    }
    if (document.getElementById(va + '3')) {
        viewlayer(va + '3', num==3);
        if (num==3) {
            document.getElementById(va + '_img3').src = "/images/img_3r.gif";
        } else {
            document.getElementById(va + '_img3').src = "/images/img_3.gif";
        }
    }
    if (document.getElementById(va + '4')) {
        viewlayer(va + '4', num==4);
        if (num==4) {
            document.getElementById(va + '_img4').src = "/images/img_4r.gif";
        } else {
            document.getElementById(va + '_img4').src = "/images/img_4.gif";
        }
    }
    if (document.getElementById(va + '5')) {
        viewlayer(va + '5', num==5);
        if (num==5) {
            document.getElementById(va + '_img5').src = "/images/img_5r.gif";
        } else {
            document.getElementById(va + '_img5').src = "/images/img_5.gif";
        }
    }    
}