/***********************************************************************************************
	
	Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
	
	UPDATE LOG:
	
	March, 10th, 2006 : Added support for a message while large image is loading
	
	Get this and other scripts at www.dhtmlgoodies.com
	
	You can use this script freely as long as this copyright message is kept intact.
	
	***********************************************************************************************/ 
   	
	var displayWaitMessage=true;	// Display a please wait message while images are loading?
  	
   		
	var activeImage = false;
	var imageGalleryLeftPos = false;
	var imageGalleryWidth = false;
	var imageGalleryObj = false;
	var maxGalleryXPos = false;
	var slideSpeed = 0;
	var imageGalleryCaptions = new Array();
	var baseUrl = 'desktopmodules/GBL_Itempane/controls/';
	function startSlide(e)
	{
		if(document.all)e = event;
		var id = this.id;
		this.getElementsByTagName('IMG')[0].src = baseUrl + 'images/' + this.id + '_over.gif';	
		if(this.id=='arrow_right'){
			slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = -1*slideSpeedMultiply;
			slideSpeed = Math.max(-10,slideSpeed);
		}else{			
			slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
			slideSpeed = 1*slideSpeedMultiply;
			slideSpeed = Math.min(10,slideSpeed);
			if(slideSpeed<0)slideSpeed=10;
		}
	}
	
	function releaseSlide()
	{
		var id = this.id;
		this.getElementsByTagName('IMG')[0].src = baseUrl + 'images/' + this.id + '.gif';
		slideSpeed=0;
	}
		
	function gallerySlide()
	{
		if(slideSpeed!=0){
			var leftPos = imageGalleryObj.offsetLeft;
			leftPos = leftPos/1 + slideSpeed;
			if(leftPos>maxGalleryXPos){
				leftPos = maxGalleryXPos;
				slideSpeed = 0;
				
			}
			if(leftPos<minGalleryXPos){
				leftPos = minGalleryXPos;
				slideSpeed=0;
			}
			
			imageGalleryObj.style.left = leftPos + 'px';
		}
		setTimeout('gallerySlide()',20);
		
	}
	
	function showImage()
	{
		if(activeImage){
			activeImage.style.filter = 'alpha(opacity=50)';	
			activeImage.style.opacity = 0.5;
		}	
		this.style.filter = 'alpha(opacity=100)';
		this.style.opacity = 1;	
		activeImage = this;	
	}
	
	function initSlideShow() {
	    if (document.getElementById('theImages') != null) {
	        document.getElementById('arrow_left').onmousemove = startSlide;
	        document.getElementById('arrow_left').onmouseout = releaseSlide;
	        document.getElementById('arrow_right').onmousemove = startSlide;
	        document.getElementById('arrow_right').onmouseout = releaseSlide;

	        imageGalleryObj = document.getElementById('theImages');
	        imageGalleryLeftPos = imageGalleryObj.offsetLeft;
	        imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 80;
	        maxGalleryXPos = imageGalleryObj.offsetLeft;
	        minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
	        var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');

	        for (var no = 0; no < slideshowImages.length; no++) {
	            slideshowImages[no].onmouseover = showImage;
	        }

	        var divs = imageGalleryObj.getElementsByTagName('DIV');
	        for (var no = 0; no < divs.length; no++) {
	            if (divs[no].className == 'imageCaption') imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
	        }
	        gallerySlide();
	        
	    }
	    var tabBox = document.getElementById('boxContainer')
	    if (tabBox != null) {
	        initTabs();
	    }
	}
	function initTabs() {
	    var tabContainer = document.getElementById('boxContainer');
	    var buttonContainer = document.getElementById('buttonContainer');
	    var buttons = new Array();
	    buttons = buttonContainer.getElementsByTagName('div');
//	    if (navigator.appName != 'Netscape') {
//	        tabContainer.style.width = (buttons.length * 103);
//	    }
	    showhideTabs('box1');
//	    hideEmptyCols();
	    // alert(navigator.appCodeName);
	}
	function showPreview(imagePath,imageIndex){
		var subImages = document.getElementById('ImagePane').getElementsByTagName('IMG');
		if(subImages.length==0){
		    var img = document.createElement('IMG');
			document.getElementById('ImagePane').appendChild(img);
		}else img = subImages[0];
		
		if(displayWaitMessage){
			document.getElementById('waitMessage').style.display='inline';
		}
		document.getElementById('largeImageCaption').style.display='none';
		img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
		img.src = imagePath.replace('prodthumbs','prodimgs');
		MojoZoom.init();
	}
	function hideWaitMessageAndShowCaption(imageIndex)
	{
		document.getElementById('waitMessage').style.display='none';	
//		document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
//		document.getElementById('largeImageCaption').style.display='block';

}
var MojoZoom = (function() {

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

    var defaultWidth = 256;
    var defaultHeight = 256;

    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 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);
                linkParent.setAttribute("target", "_blank");
                oldParent.replaceChild(linkParent, img);
                linkParent.appendChild(img);
            } else {
                var linkParent = oldParent;
            }

            linkParent.style.position = "relative";
            linkParent.style.display = "block";
            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;
            if (!zoomImgCtr) {
                zoomImgCtr = dc("div");
                zoomImgCtr.className = "mojozoom_imgctr";

                var imgPos = getElementPos(img);
                zoomImgCtr.style.left = w + imgPos.x + "px";
                zoomImgCtr.style.top = imgPos.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 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 zoomFill = dc("div");
                zoomFill.className = "mojozoom_fill";
                zoom.appendChild(zoomFill);

                var zoomBorder = dc("div");
                zoomBorder.className = "mojozoom_border";
                zoom.appendChild(zoomBorder);

                zoom.style.width = markerWidth + "px";
                zoom.style.height = markerHeight + "px";


                if (alwaysShow) {
                    zoom.style.left = "0px";
                    zoom.style.top = "0px";

                    zoomImg.style.left = "0px";
                    zoomImg.style.top = "0px";
                }

                var isInImage = false;

                if (!alwaysShow) {
                    addEvent(zoomInput, "mouseout",
					function(e) {
					    var target = e.target || e.srcElement;
					    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 (relTarget != target) {
					        isInImage = false;
					        ctr.style.display = "none";
					        zoomImgCtr.style.visibility = "hidden";
					    }
					}
				);
                    // a bit of a hack, mouseout is sometimes not caught if moving mouse really fast
                    addEvent(document.body, "mouseover",
					function(e) {
					    if (isInImage && !(e.toElement == zoomBorder || e.target == zoomBorder)) {
					        ctr.style.display = "none";
					        zoomImgCtr.style.visibility = "hidden";
					        isInImage = false;
					    }
					}
				);
                }

                addEvent(zoomInput, "mousemove",
				function(e) {
				    isInImage = true;

				    var imgPos = getElementPos(img);

				    if (useDefaultCtr) {
				        zoomImgCtr.style.left = w + imgPos.x + "px";
				        zoomImgCtr.style.top = imgPos.y + "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);

				    zoom.style.left = left + "px";
				    zoom.style.top = top + "px";

				    zoomImg.style.left = -((pos.x * ratioW - ctrWidth / 2) | 0) + "px";
				    zoomImg.style.top = -((pos.y * ratioH - ctrHeight / 2) | 0) + "px";
				}
			);
            });

            // 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 zoomdiv = document.getElementById("ImagePane");
        if (zoomdiv != null) {
            var images = zoomdiv.getElementsByTagName("img");
            for (var i = 0; i < images.length; i++) {
                var img = images[i];
                var zoomSrc = img.getAttribute("src").replace('prodimgs', 'prodbigimgs');
                if (zoomSrc.indexOf('MakeThumbImage.aspx') > 0) {
                    var srcUrl = img.getAttribute("src").toString();
                    var queryString = srcUrl.substring(srcUrl.indexOf('?'));
                    var params = new Array();
                    params = queryString.split('&');
                    var Src = params[0].substring(params[0].indexOf('=') + 1);
                    zoomSrc = Src.replace('%2f','/');
                }
                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);


	window.onload = initSlideShow;