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

        this.options={
            areaWidth: 500,
            areaHeight:500,
            defaultnavWidth:150,
            draggerStyle:"2px solid red"
        }
        $.extend (this.options, options);
        var imgNav= this;

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

        $(imgNav).css({
            width : imgNav.options.areaWidth,
        //height:  imgNav.options.areaHeight,
            marginRight:-imgNav.options.areaWidth
        })

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

        var imageURL=$(images[0]).attr("imageUrl");
        imageURL+= "?rdm="+Math.random();
        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");


        $(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",
            backgroundColor:"#f3f3f3"
        });

        var loader="<table id='loader' style='display:none;' cellpadding='0' cellspacing='0' width='100%' height='100%'><tr><td valign='middle' align='center'><img src='"+contextPath+"/applications/webwork/site_"+installationId+"/local/portlet/imageNavigator/loading.gif' 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"
        });
        //$(this).append(imagesIndex);
        $(imagesIndex).append(titles);


        $(titles).each(function(i){
            $(this).click(function(){
                actualIdx=i;

                imageURL=$(images[i]).attr("imageUrl");
                imageURL+= "?rdm="+Math.random();
                //alert(imageURL);
                navPos=$(images[i]).attr("navPosition");
                navWidth= $(images[i]).attr("navWidth")?$(images[i]).attr("navWidth"):imgNav.options.defaultnavWidth;//100;
                var s =image ? $(image).fadeOut(500, function() {
                    startNav(imageURL);
                }) : startNav(imageURL)
            })
        })

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

        $(imgNav).prepend("<div class='showFullImage'></div>");
        var showFullImage= $(imgNav).find(".showFullImage");
        $(showFullImage).css({
            position:"absolute",
            zIndex:1000,
            textAlign:"right",
            marginTop:15,
            padding:3,
            cursor:"pointer",
            width: imgNav.options.areaWidth,
            color: "white"
        })
        $(showFullImage).append(getI18n("OPEN_FULL_SCREEN"))
        $(showFullImage).click(function(){
            centerPopup(imageURL, "immagineGrande", 800, 600, "yes", "yes")
        })
        function startNav(u) {
            clearAllVar();
            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,Math.random())};
            imageObj.onerror = imageFailed;
            $("#loader").fadeIn(500);
        }

        function clearAllVar(){
            navW=null;
            ratio=null;
        }

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

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

            $("#loader").fadeOut(300);
            var isIn=false,out;
            $(imageContainer).mouseover(function(){
                if(!isIn) {
                    if($.browser.msie) $(nav).show();
                    else
                        $(nav).fadeIn(500)
                }
                isIn=true;
                clearTimeout(out)
            })
            $(imageContainer).mouseout(function(){
                out=setTimeout(function(){
                    if($.browser.msie) $(nav).hide();
                    else
                        $(nav).fadeOut(500)
                    isIn=false;
                },300)
            })

            $(descriptionBox).html(descriptions[actualIdx])

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

            //image
            $(applContainer).append("<image class='navImage' style = 'visibility:visible'>");
            image= $(imgNav).find(".navImage");
            $(image).css({position:"absolute"});
            var t=imgY?-imgY:-(imageH/2-($(nav).height()/2));
            var l=imgX?-imgX:-(imageW/2-($(nav).width()/2));
            $(image).attr("src",u);
            $(image).hide();
            var tt=$.browser.msie?0:800;
            if(!$.browser.msie){

              $(image).fadeIn(tt, function(){
                    $(image).animate({
                        top:t,
                        left:l
                    }, tt);
                    refreshThumbPos(l,t);
                });
            }else{
              $(image).show();
                setTimeout(function(){
                    $(image).css({
                        top:t,
                        left:l
                    })
                    refreshThumbPos(l,t);
                    $(image).show();                    
                },1000)
            }

            /*
                    var t=imgY?-imgY:-(imageH/2-($(nav).height()/2));
                    var l=imgX?-imgX:-(imageW/2-($(nav).width()/2));
                      $(image).animate({
                            opacity:1,
                            top:t,
                            left:l
                    }, 1000,function(t,l){

                    refreshThumbPos(l,t);

                    });
            */
            imageH=$(image).height();
            imageW=$(image).width();
            $(image).Draggable({
                zindex:1,

                containment : [
                    -($(image).width()-$(imgNav).width()),
                    -($(image).height()-$(image).height()/1.8),
                    ($(image).width()*2)-$(imgNav).width(),
                    ($(image).height()*2)-($(image).height()/1.8)
                    ],
                insideParent:true,
                onDrag:function(x,y){
                    $(document.body).css({cursor:"move"})
                    refreshThumbPos(x,y)},
                onStop:function(){ $(document.body).css({cursor:"default"})}
            });
            $(image).dblclick(function(){fitonScreen()});


            //nav SCREEN
            $(applContainer).append("<div class='nav'></div>");
            nav = $(imgNav).find(".nav");
            $(nav).css({
                zIndex: 1000,
                position: "absolute",
                border: "1px solid #ffffff"
            })

            if($.browser.msie) $(nav).show();
            else{
                $(nav).css("opacity",.85);
                $(nav).fadeIn(500);
            }

            //ZONE SELECTOR
            $(nav).append("<div id='navLocator'></div>");
            navLocator= $(imgNav).find("#navLocator");
            $(navLocator).css({
                zIndex: 10000,
                position : "absolute",
                border : imgNav.options.draggerStyle,
                backgroundColor: $.browser.msie?"white":"transparent",
                opacity: $.browser.msie?.5:1,
                top:0,
                left:0
            });
            //$(navLocator).attr("properties","b-d-x-y");
            $(navLocator).dblclick(function(){fitonScreen()});
            $(navLocator).Draggable({
                containment : 'parent',
                onDrag:function(x,y){
                    refreshImagePos(x,y);
                    $(document.body).css({cursor:"move"})
                },
                onStop:function(){$(document.body).css({cursor:"default"})}
            });

            //THUMB
            $(nav).append("<image class='navigationThumb'>");
            navigationThumb= $(imgNav).find(".navigationThumb");
            $(navigationThumb).attr("src",imageURL);
            $(navigationThumb).css({
                visibility:"visible"
            });
            $(navigationThumb).dblclick(function(){fitonScreen()});

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

        function fitonScreen(){
            if(!onScreen){
                navLocator.oldX=$(navLocator).css("left");
                navLocator.oldY=$(navLocator).css("top");
                image.oldX=$(image).css("left");
                image.oldY=$(image).css("top");
                var controller=((navW*imageContainerH)/navH)<imageContainerW;
                if(controller)
                    $(image).css("width",imageContainerW)
                else
                    $(image).css("height",imageContainerH);
                onScreen=true;
                $(navLocator).css("top",0);
                $(navLocator).css("left",0);
                $(image).css("top",0);
                $(image).css("left",0);

                $(image).bind("mousemove",imgNav.doNothing=function(){return false})

            } else{

                $(image).width("");
                $(image).height("");
                onScreen=false;
                $(image).css("top",image.oldY);
                $(image).css("left",image.oldX);
                $(navLocator).css("top",navLocator.oldY);
                $(navLocator).css("left",navLocator.oldX);
                $(image).unbind("mousemove",imgNav.doNothing)

            }
            resetAllValue();
            var x=$(navLocator).offsetLeft;
            var y=$(navLocator).offsetTop;
            refreshImagePos(x,y);
        }

        function refreshImagePos(x,y){
            /*
                        document.title=el.offsetLeft
                        var posX=-(obj("navLocator").offsetLeft)*ratio;
                        var posY=-(obj("navLocator").offsetTop)*ratio;
            */
            ratio= imageH/navH;
            var posX=-(arguments[0]+1)*ratio;
            var posY=-(arguments [1]+1)*ratio;
            $(image).css("top",posY);
            $(image).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);
            $(navLocator).css("left",posX);
        }

        function setnavDim(){

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

        function setnavLocatorDim(){
            var navLocator_W=$(navLocator).width((imageContainerW*navW)/imageW);
            var navLocator_H=$(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-2));
                    break;
                case "BL":
                    $(nav).css("top",(imageContainerH-navigationThumbH-2));
                    break;
                case "BR":
                    $(nav).css("left",(imageContainerW-navigationThumbW-2));
                    $(nav).css("top",(imageContainerH-navigationThumbH-2));
                    break;
                default:
                    var dim=($(imageContainer).width())-navigationThumbW-2;
                    $(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= getWindowDimensionW();
            $(window).bind("resize", function(){fullScreen()});

            resetAllValue();
        }

        function resetScreen(){
            if(!image) return;
            $(image).css({
                width: "",
                height: ""
            })
            if($.browser.msie) $(nav).show();
            else
                $(nav).fadeIn(500)

            $(imageContainer).css({
                width: imageContainer.oldW,
                height: imageContainer.oldH
            })
            $(window).unbind("resize");
            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;
    }
})