/*
 *
 * (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:70,
        draggerStyle:"2px dotted red",
        navOpacity:.8,
        loaderUrl:"/img/common/loading_02.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;

      $(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("<a id='zoom' class='zoomzoom' href='javascript:void(0);'><img src='/img/products/detail/btn_dummy_24x23.gif' width='24' height='23' /></a>");
	  var zoom=$(imgNav).find("#zoom");
      $(zoom).css({
        display: $.browser.msie ? "block" : "none",
        position: "absolute",
		left:"10px"
		//bottom: $.browser.msie ? "20px" : "10px"
		//bottom: "10px"
      });
	  
	  $(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);
        });
      });
	 
	 /* zoomボタンの処理 */
		$("a#zoom").bind("click",function(){
			var nnclass = $(this).attr("class");
			
			if(nnclass == "zoomzoom") {
				$("a#zoom").removeClass("zoomzoom");
			}
			else {
				$("a#zoom").addClass("zoomzoom");
			}
			fitonScreen();
		});
		
      $("a.mbnav").each(function(i){
        $(this).click(function(){
          $('a#zoom').addClass("zoomzoom");
		  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");
        });
		var ambnav=$(document).find(".mbnav");
		
        $(ambnav).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(){
			$("#zoom").fadeIn(500);
		});
      
	  }

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

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

        $("#loader").fadeOut(500, function(){
			canClick=true;
		
		});
		$(titles).bind("click",function(){return true;});
	    $(imageContainer).bind("mouseover",function(){
			$(nav).show();
		});
	   
	   /*$(imageContainer).click(function(){
          if($.browser.msie) $(nav).show();
          else
            $(nav).show();
        });
        $(imageContainer).mouseleave(function(){
          if($.browser.msie) $(nav).hide();
          else
            $(nav).hide();
        });*/

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

        $(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();
        imageH2=$(image).outerHeight();
        imageW2=$(image).outerWidth();

		onScreen=true;
		var controller=((navW*imageContainerH)/navH)<imageContainerW;
		  if(controller) {
			$(image).css("width",imageContainerW);
			//$(image).height("");
		  }else {
			$(image).css("height",imageContainerH);
			//$(image).width("");
		  }
		  
		  $(draggableElement).css("top",0);
          $(draggableElement).css("left",0);
          $(draggableElement).bind("mousemove",imgNav.doNothing=function(){return false;});
        $(image).hide();
		$(image).fadeIn(1500,"linear");
        /*$(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).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:"pointer"});
          },
          stop:function(e,ui){
            refreshThumbPos(ui.position.left,ui.position.top);
            $(draggableElement).css({cursor:"pointer"});
            $(nav).show();
          }
        });
        $(draggableElement).bind("dblclick", function(){fitonScreen();});

        //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,
		  display: "none",
          position: "absolute",
          border : imgNav.options.draggerStyle,
          backgroundColor: $.browser.msie?"white":"transparent",
          opacity: $.browser.msie?.5:1
        });
        $(nav).hide(1);
        $(navLocator).bind("dblclick",function(){fitonScreen();});
        $(navLocator).draggable({
          containment: 'parent',
          start:function(){
            $(navLocator).css({cursor:"pointer"});
          },
          drag:function(e,ui){
            refreshImagePos(ui.position.left,ui.position.top);
          },
          stop:function(){
            $(navLocator).css({cursor:"pointer"});
          }
        });

        //THUMB
        $(nav).append("<image class='navigationThumb'>");
        navigationThumb= $(imgNav).find(".navigationThumb");
        $(navigationThumb).attr("src",u);
        $(navigationThumb).bind("dblclick",function(){fitonScreen();});
        
		
        image_isHoriz= imageH < imageW;
        cont_isHoriz= imageContainerH < imageContainerW;
        ratio= imageH/navH;
        resetAllValue();
      }

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

		  $(navLocator).hide();
          $(draggableElement).css("top",0);
          $(draggableElement).css("left",0);
          $(draggableElement).bind("mousemove",imgNav.doNothing=function(){return false;});
          $(additionalContent).hide();
		  //$('a#zoom').addClass("zoomzoom");
		  $(image).fadeIn(500,"linear");
        }
		
		else{
		  $(image).hide();
		  var controller=((navW*imageContainerH)/navH)<imageContainerW;
		  if(controller) {
			$(image).css("width",imageW2);
		  }else {
			$(image).css("height",imageH2);
		  }
          
          
          //$(image).css("height",1984);
          //$(image).height("");
          onScreen=false;
          //$(navLocator).css("top",0);
          //$(navLocator).css("left",0);
          //$(draggableElement).css("top",0);
          //$(draggableElement).css("left",0);
          //$(draggableElement).css("top",draggableElement.oldY);
          //$(draggableElement).css("left",draggableElement.oldX);
          $(draggableElement).css("top",(imageH2-imageContainerH)/2*(-1));
          $(draggableElement).css("left",(imageW2-imageContainerW)/2*(-1));
          $(navLocator).show();
          $(navLocator).css("top",19.5);
          $(navLocator).css("left",19.5);
		  $(draggableElement).unbind("mousemove",imgNav.doNothing);
          $(additionalContent).show();
		  //$('a#zoom').removeClass("zoomzoom");
		  $(image).fadeIn(500,"linear");
        }
        resetAllValue();
        var x=$(navLocator).offsetLeft;
        var y=$(navLocator).offsetTop;
        
		/* IE６では引数が無効のため削除 */
		if(!$.browser.msie) {
			refreshImagePos(x,y);
		}
      }

      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/8: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",5);
            $(nav).css("top",5);
            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);