/*
 *
 * (mb)ImageNavigator
 * 				developed by Matteo Bicocchi on JQuery
 *         © 2002-2009 Open Lab srl, Matteo Bicocchi
 *			    www.open-lab.com - info@open-lab.com
 *       	version 2.0
 *       	tested on: 	Explorer and FireFox for PC
 *                  		FireFox and Safari for Mac Os X
 *                  		FireFox for Linux
 *         GPL (GPL-LICENSE.txt) licenses.
 *
 *
 */


(function($) {
    jQuery.fn.imageNavigator = function (options) {
        return this.each(function ()
        {

            this.options = {
                areaWidth: 500,
                areaHeight:500,
                defaultnavWidth:150,
                cursor: "move",
                draggerStyle:"2px dotted red",
                navOpacity:.8,
                loaderUrl:"loading.gif",
                additionalContenet:""
            };
            $.extend(this.options, options);

            options = this.options;
            var imgNav = this;

            var additionalContent, draggableElement, applContainer,image,imageW,imageH,imageContainer,imageContainerW,imageContainerH,navLocator,navigationThumb,navigationThumbW,navigationThumbH,nav,navW,navH,image_isHoriz,cont_isHoriz,ratio,actualIdx = 0,onScreen = false,navCoordinateX,navCoordinateY;

            var reducedImageContainer, zplusContainer; 

            $(imgNav).css({
                width : imgNav.options.areaWidth
            });

            var images = $(imgNav).find(".imagesContainer");
            $(imgNav).empty();

            if ($.metadata) {
                $.metadata.setType("class");
                $(images).each(function() {
                    if ($(this).metadata().imageUrl) $(this).attr("imageUrl", $(this).metadata().imageUrl);
                    if ($(this).metadata().navPosition) $(this).attr("navPosition", $(this).metadata().navPosition);
                    if ($(this).metadata().navWidth) $(this).attr("navWidth", $(this).metadata().navWidth);
                    if ($(this).metadata().NavCoordinates) $(this).attr("NavCoordinates", $(this).metadata().NavCoordinates);
                });
            }

            var imageURL = $(images[0]).attr("imageUrl");
            var navPos = $(images[0]).attr("navPosition");
            var navWidth = $(images[0]).attr("navWidth") ? $(this).attr("navWidth") : imgNav.options.defaultnavWidth;//100;

            var titles = $(images).find(".title");
            var descriptions = $(images).find(".description");
            var additionalContents = $(images).find(".additionalContent");

            $(imgNav).append("<div class='imageContainer'></div>");

            imageContainer = $(imgNav).find(".imageContainer");
            $(imageContainer).css({
                overflow:"hidden",
                position: "relative",
                width:this.options.areaWidth + "px",
                height:this.options.areaHeight + "px"
            });
            var loader = "<table id='loader' style='display:none;' cellpadding='0' cellspacing='0' width='100%' height='100%'><tr><td valign='middle' align='center'><img src='" + imgNav.options.loaderUrl + "' alt='loading'></td></tr></table>";
            $(imageContainer).append(loader);

            $(imgNav).prepend("<div class='imagesIndex'></div>");
            var imagesIndex = $(imgNav).find(".imagesIndex");
            $(imagesIndex).css({
                position: "relative",
                width:this.options.areaWidth,
                padding: "0"
            });
            $(imagesIndex).append(titles);

            var canClick = true;
            $(titles).each(function(i) {
                $(this).click(function() {
                    if (!canClick) return;
                    actualIdx = i;
                    canClick = false;
                    imageURL = $(images[i]).attr("imageUrl");
                    navPos = $(images[i]).attr("navPosition");
                    navWidth = $(images[i]).attr("navWidth") ? $(images[i]).attr("navWidth") : imgNav.options.defaultnavWidth;//100;
                    if ($(images[i]).attr("NavCoordinates")) {
                        navCoordinateX = $(images[i]).attr("NavCoordinates").split(",")[0];
                        navCoordinateY = $(images[i]).attr("NavCoordinates").split(",")[1];

                        //console.log(navCoordinateX,navCoordinateY);
                    }

                    if (image)
                        $(image).fadeOut(500, function() {
                            startNav(imageURL);
                        });
                    else
                        startNav(imageURL);
                });
            });

            $(imgNav).append("<div class='descriptionBox'></div>");
            var descriptionBox = $(imgNav).find(".descriptionBox");
            $(descriptionBox).html(descriptions[0]);

            function startNav(u) {
                navW = null;
                ratio = null;
                if (applContainer) {
                    $(applContainer).remove();
                }
                $(titles).each(function(i) {
                    if (i == actualIdx)
                        $(this).addClass("selected");
                    else
                        $(this).removeClass("selected");
                });
                navW = navWidth;
                var imageObj = new Image();
                imageObj.src = null;
                u = u + "?rdm=" + Math.random();
                imageObj.src = u;
                imageObj.onload = function() {
                    buildnav(u);
                };
                imageObj.onerror = imageFailed;
                $("#loader").fadeIn(500);
            }

            function imageFailed() {
                alert("non riesco a caricare: " + this.src);
            }

            function bindClickOnContainer() {
                $(imageContainer).click(function() {
                    if ($.browser.msie) $(nav).show();
                    else
                        $(nav).show();
                });
                $(imageContainer).mouseleave(function() {
                    if ($.browser.msie) $(nav).hide();
                    else
                        $(nav).hide();
                });
            }
            function unbindClickOnContainer() {
                $(imageContainer).mouseleave();
                $(imageContainer).unbind("click");
                $(imageContainer).unbind("mouseleave");
            }

            function buildnav(u) {
                imageContainerW = $(imageContainer).width();
                imageContainerH = $(imageContainer).height();

                $("#loader").fadeOut(500, function() {
                    canClick = true;
                });
                $(titles).bind("click", function() {
                    return true;
                });
                //bindClickOnContainer();

                //applContainer
                $(imageContainer).append("<div class='applContainer'></div>");
                applContainer = $(imgNav).find(".applContainer");
                $(applContainer).css({
                    position:"relative",
                    height:$(imageContainer).height()
                });

                $(applContainer).append("<div class='zplusContainer'></div>");
                zplusContainer = $(applContainer).find(".zplusContainer");
                $(zplusContainer).append("<p>ZOOM+</p>");
                $(zplusContainer).css({
                    zIndex: 10001,
                    position: "absolute",
                    height: "18px",
                    width: "50px",
                    color: "white",
                    cursor: "pointer",
                    "text-align": "center",
                    backgroundColor: "black"
                });
                var functionZoomPlus, functionZoomMoins;
                functionZoomPlus = function() {
                    //alert('CLICK');
                    bindClickOnContainer();
                    $(zplusContainer).unbind('click');
                    $(zplusContainer).css({
                        color: "gray",
                        cursor: "wait"
                    });
                    $(reducedImageContainer).hide(1000, function() {
                        $(zplusContainer).click(functionZoomMoins);
                        $(zplusContainer).css({
                            color: "white",
                            cursor: "pointer"
                        });
                        $(zplusContainer).find("p").html("ZOOM-");
                    });
                };
                functionZoomMoins = function() {
                    //alert('CLICK');
                    unbindClickOnContainer();
                    $(zplusContainer).unbind('click');
                    $(zplusContainer).css({
                        color: "gray",
                        cursor: "wait"
                    });
                    $(reducedImageContainer).show(1000, function() {
                        $(zplusContainer).click(functionZoomPlus);
                        $(zplusContainer).css({
                            color: "white",
                            cursor: "pointer"
                        });
                        $(zplusContainer).find("p").html("ZOOM+");
                    });
                };
                $(zplusContainer).click(functionZoomPlus);
                
                $(applContainer).append("<div class='reducedImageContainer'></div>");
                reducedImageContainer = $(applContainer).find(".reducedImageContainer");
                $(reducedImageContainer).css({
                    zIndex: 10000,
                    position: "absolute"
                });
                $(reducedImageContainer).append("<img src='" + u + "' alt='' style='height: " + imageContainerH + "px; width: " + imageContainerW + "px;'>");



                $(applContainer).append("<div class='draggableElement'></div>");
                draggableElement = $(applContainer).find(".draggableElement");

                //todo: add a div for image containment

                //image
                $(draggableElement).append("<image class='navImage'>");
                image = $(draggableElement).find(".navImage");

                //additionalContent
                $(draggableElement).append("<div class='additionalContent'></div>");
                additionalContent = $(draggableElement).find(".additionalContent");
                $(additionalContent).css({position:"absolute", top:"0"});
                $(draggableElement).css({
                    position:"absolute"
                });

                $(descriptionBox).html(descriptions[actualIdx]);
                $(additionalContent).html(additionalContents[actualIdx]);

                $(image).attr("src", u);
                $(image).hide();
                imageH = $(image).outerHeight();
                imageW = $(image).outerWidth();
                $(image).fadeIn(1000, function() {

                    var t,l;
                    if (!$(images[actualIdx]).attr("NavCoordinates")) {
                        t = -(imageH / 2 - ($(nav).height() * 3));
                        l = -(imageW / 2 - ($(nav).width() * 3));
                    } else {
                        t = -(navCoordinateY - ($(imageContainer).height() / 2));
                        l = -(navCoordinateX - ($(imageContainer).width() / 2));
                        if (t > 0) t = 0;
                        if (l > 0) l = 0;
                    }
                    //console.log(!$(images[actualIdx]).attr("NavCoordinates"), t, l)
                    $(draggableElement).css({
                        top:t,
                        left:l,
                        cursor:"move"
                    });
                    /*$(draggableElement).animate({
                        top:t,
                        left:l
                    }, 500, "linear");*/
                    refreshThumbPos(l, t);
                });
                $(draggableElement).draggable({
                    containment:[$(imageContainer).offset().left - imageW + $(imageContainer).outerWidth(),$(imageContainer).offset().top - imageH + $(imageContainer).outerHeight(),$(imageContainer).offset().left,$(imageContainer).offset().top],
                    start:function() {
                        $(nav).hide();
                        //$(draggableElement).css({cursor:"move"});
                    },
                    stop:function(e, ui) {
                        refreshThumbPos(ui.position.left, ui.position.top);
                        //$(draggableElement).css({cursor:"default"});
                        $(nav).show();
                    }
                });

                //nav SCREEN
                $(applContainer).append("<div class='nav'></div>");
                nav = $(imgNav).find(".nav");
                $(nav).css({
                    position:"absolute",
                    opacity: imgNav.options.navOpacity
                });



                //ZONE SELECTOR
                $(nav).append("<div id='navLocator'></div>");
                navLocator = $(imgNav).find("#navLocator");
                $(navLocator).css({
                    zIndex: 10000,
                    position: "absolute",
                    cursor: "move",
                    border : imgNav.options.draggerStyle,
                    backgroundColor: $.browser.msie ? "white" : "transparent",
                    opacity: $.browser.msie ? .5 : 1
                });
                $(nav).hide(1);
                $(navLocator).draggable({
                    containment: 'parent',
                    start:function() {
                        $(navLocator).css({cursor:"move"});
                    },
                    drag:function(e, ui) {
                        refreshImagePos(ui.position.left, ui.position.top);
                    },
                    stop:function() {
                        //$(navLocator).css({cursor:"default"});
                    }
                });

                //THUMB
                $(nav).append("<image class='navigationThumb'>");
                navigationThumb = $(imgNav).find(".navigationThumb");
                $(navigationThumb).attr("src", u);

                image_isHoriz = imageH < imageW;
                cont_isHoriz = imageContainerH < imageContainerW;
                ratio = imageH / navH;
                resetAllValue();
                
                $(nav).hide();
            }

            function refreshImagePos(x, y) {
                ratio = imageH / navH;
                var posX = -(arguments[0] + 1) * ratio;
                var posY = -(arguments [1] + 1) * ratio;
                $(draggableElement).css("top", posY);
                $(draggableElement).css("left", posX);
            }

            function refreshThumbPos(x, y) {
                ratio = imageH / navH;
                var posX = -(arguments[0] + 1) / ratio;
                var posY = -(arguments [1] + 1) / ratio;
                $(navLocator).css({
                    top:posY,
                    left:posX
                });
            }

            function setnavDim() {
                navW = !navW ? imageContainerW / 4 : navW;
                navH = (navW * imageH) / imageW;
                $(navigationThumb).height(parseFloat(navH));
                navigationThumbW = $(navigationThumb).width();
                navigationThumbH = $(navigationThumb).height();
                //			$(nav).css({
                //				overflow:"hidden",
                //				width:navigationThumbW,
                //				height: navigationThumbH+10
                //			})
            }

            function setnavLocatorDim() {
                $(navLocator).width((imageContainerW * navW) / imageW);
                $(navLocator).height((imageContainerH * navH) / imageH);
            }

            function setnavPos() {
                switch (navPos) {
                    case "TL":
                        $(nav).css("left", 0);
                        $(nav).css("top", 0);
                        break;
                    case "TR":
                        $(nav).css("top", 0);
                        $(nav).css("left", (imageContainerW - navigationThumbW));
                        break;
                    case "BL":
                        $(nav).css("top", (imageContainerH - navigationThumbH));
                        break;
                    case "BR":
                        $(nav).css("left", (imageContainerW - navigationThumbW));
                        $(nav).css("top", (imageContainerH - navigationThumbH));
                        break;
                    default:
                        var dim = ($(imageContainer).width()) - navigationThumbW;
                        $(nav).css("left", dim);
                        break;
                }
            }

            function resetAllValue() {
                imageContainerW = $(imageContainer).width();
                imageContainerH = $(imageContainer).height();
                cont_isHoriz = imageContainerH < imageContainerW;
                imageH = $(image).height();
                imageW = $(image).width();

                setnavDim();
                setnavLocatorDim();
                setnavPos();

            }

            function fullScreen() {
                if (!image) return;
                $(image).width("");
                $(image).height("");
                if ($.browser.msie) $(nav).show();
                else
                    $(nav).fadeIn(500);
                imageContainer.oldW = $(imageContainer).css("width");
                imageContainer.oldH = $(imageContainer).css("height");
                imageContainer.style.width = $(window).outerWidth();
                $(window).bind("resize", function() {
                    fullScreen();
                });
                resetAllValue();
            }

            startNav(imageURL);
        });
    };

    jQuery.fn.extend(
    {
        getMouseX : function (e)
        {
            var mouseX;
            if ($.browser.msie) {
                mouseX = event.clientX + document.body.scrollLeft;
            } else {
                mouseX = e.pageX;
            }
            if (mouseX < 0) {
                mouseX = 0;
            }
            return mouseX;
        },
        getMouseY : function (e)
        {
            var mouseY;
            if ($.browser.msie) {
                mouseY = event.clientY + document.body.scrollTop;
            } else {
                mouseY = e.pageY;
            }
            if (mouseY < 0) {
                mouseY = 0;
            }
            return mouseY;
        }
    });

})(jQuery);