/*
 * 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]
 */
 
 
 /*
  * Code heavily modified by SOtech for the bespoke functionality required
  * by The Movie Shop website.
  */

var MojoZoom = (function() {

    var $ = function(id) { return document.getElementById(id); };
    var dc = function(tag) { return document.createElement(tag); };
    var defaultWidth = 650;
    var defaultHeight = 390;
    var hide = 0;
    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);
        }
        return doHandler;
    }

    function removeEvent(element, ev, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(ev, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + ev, handler);
        }
    }



    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 getClickMousePos(element, e) {

        var scrollX = document.body.scrollLeft || document.documentElement.scrollLeft;
        var scrollY = document.body.scrollTop || document.documentElement.scrollTop;

        var pos = getElementPos(element);

        return {
            x: e.clientX - pos.x + scrollX,
            y: e.clientY - pos.y + scrollY
        }
    }

    var thatEvent;
    var thatElement;
    var thatEvent2;
    var thatEvent3;
    var mouseMoveFunction;
    var isInImage;
    var imageLoaded;
    var loadFunction;
    var zoomInput;
    var zoomImg;

    function makeZoomable(img, zoomSrc, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow, zoomLink) {
        if (zoomWidth == 0) { hide = 1; }
        else { hide = 0; }



        // 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, zoomLink);
                }, 1);
            });
            return;
        }

        img.__mojoZoomQueued = false;
        img.__zoomOn = false;
        img.__closeLink = undefined;

        // 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() {
            var zoomInput = img.parentNode;

            if (thatEvent != undefined) {
                removeEvent(thatElement, "click", thatEvent);
            }

            thatElement = zoomInput;

            thatEvent = addEvent(zoomInput, "click", function(e) {


                if (img.__zoomOn) {

                    if (!imageLoaded) {
                        zoomImgCtr.style.visibility = "hidden";
                        zoomLink.innerHTML = "Zoom +";
                        isInImage = false;
                        img.__zoomOn = false;

                        if (mouseMoveFunction != undefined) {
                            removeEvent(zoomInput, "mousemove", mouseMoveFunction)
                        }
                        if (loadFunction != undefined) {
                            removeEvent(zoomImg, "load", loadFunction)
                        }
                    }

                    img.__zoomOn = false;

                    return;
                }

                imageLoaded = false;

                img.__zoomOn = true;

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

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

                var oldParent = img.parentNode;
                if (oldParent.nodeName != "SPAN") {
                    var linkParent = dc("span");
                    oldParent.replaceChild(linkParent, img);
                    linkParent.appendChild(img);
                    linkParent.appendChild(zoomLink);
                } 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";

                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);

                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 (hide==1){alert ("1");return;}
                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 - 1) + "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";

                zoomImgCtr.style.visibility = "visible";

                zoomLink.innerHTML = "Close Zoom -";


                if (img.__closeLink != undefined) {
                    zoomImgCtr.removeChild(img.__closeLink);
                }

                var closeLink = dc("div");
                closeLink.className = "closeLink";
                closeLink.innerHTML = "<img src=\"images/closezoom.png\" />";

                closeLink.style.left = defaultWidth - 60 + "px";
                closeLink.style.top = "5px";

                zoomImgCtr.appendChild(closeLink);

                addEvent(closeLink, "click", function() {
                    ctr.style.display = "none";
                    zoomImgCtr.style.visibility = "hidden";
                    zoomLink.innerHTML = "Zoom +";
                    isInImage = false;
                    img.__zoomOn = false;
                    if (mouseMoveFunction != undefined) {
                        removeEvent(zoomInput, "mousemove", mouseMoveFunction)
                    }
                    if (loadFunction != undefined) {
                        removeEvent(zoomImg, "load", loadFunction)
                    }
                })

                img.__closeLink = closeLink;
                
                // add this removal code to any counterpart images
                var counterpartImagesDiv = document.getElementById("counterpartImages");
                var imgs=counterpartImagesDiv.getElementsByTagName('img') 
                for (var i=0;i<imgs.length;i++){ 
                    addEvent(imgs[i], "click", function(e) {
                        ctr.style.display = "none";
                        zoomImgCtr.style.visibility = "hidden";
                        zoomLink.innerHTML = "Zoom +";
                        isInImage = false;
                        img.__zoomOn = false;
                        if (mouseMoveFunction != undefined) {
                            removeEvent(zoomInput, "mousemove", mouseMoveFunction)
                        }
                        if (loadFunction != undefined) {
                            removeEvent(zoomImg, "load", loadFunction)
                        }

                    });
                }
                

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

                    imageLoaded = true;

                    // 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";
                    }

                    isInImage = false;


                    if (hide != 1) {
                        isInImage = true;
                        var imgPos = getElementPos(img);

                        if (useDefaultCtr) {
                            zoomImgCtr.style.left = w + imgPos.x + "px";
                            zoomImgCtr.style.top = (imgPos.y - 1) + "px";
                        }
                        ctr.style.display = "block";
                        zoomImgCtr.style.visibility = "visible";

                        var pos = getClickMousePos(zoomInput, e);


                        var x = markerWidth / 2;
                        var y = markerHeight / 2;


                        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";


                    }

                    mouseMoveFunction = addEvent(zoomInput, "mousemove",
				        function(e) {
				            if (hide != 1) {
				                isInImage = true;
				                var imgPos = getElementPos(img);

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

				                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";

				            }
				        });


                    if (thatEvent2 != undefined) {
                        removeEvent(zoomInput, "click", thatEvent2)
                    }

                    thatEvent2 = addEvent(zoomInput, "click", function(e) {
                        if (isInImage) {
                            ctr.style.display = "none";
                            zoomImgCtr.style.visibility = "hidden";
                            isInImage = false;
                            zoomLink.innerHTML = "Zoom +";
                            if (mouseMoveFunction != undefined) {
                                removeEvent(zoomInput, "mousemove", mouseMoveFunction)
                            }
                            if (loadFunction != undefined) {
                                removeEvent(zoomImg, "load", loadFunction)
                            }
                        }
                    });


                    if (thatEvent3 != undefined) {
                        removeEvent(zoomLink, "click", thatEvent3)
                    }
                    thatEvent3 = addEvent(zoomLink, "click", function(e) {

                        if (isInImage) {
                            ctr.style.display = "none";
                            zoomImgCtr.style.visibility = "hidden";
                            isInImage = false;
                            zoomLink.innerHTML = "Zoom +";
                            if (mouseMoveFunction != undefined) {
                                removeEvent(zoomInput, "mousemove", mouseMoveFunction)
                            }
                            if (loadFunction != undefined) {
                                removeEvent(zoomImg, "load", loadFunction)
                            }
                        }

                    });
                   

                })


                // 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() {
                    /* use below code if you want to avoid image caching */
                    //var currentDate = new Date();
                    //zoomImg.src = zoomSrc + "&time=" + currentDate.getTime();

                    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");
            var zoomLink = img.getAttribute("data-zoomlink");
            if (zoomSrc) {
                makeZoomable(img, zoomSrc, document.getElementById(img.getAttribute("id") + "_zoom"), null, null, img.getAttribute("data-zoomalwaysshow") == "true", document.getElementById(zoomLink));
            }
        }
    }

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

})();

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