/* -----------------------------------------------------------------------------
  GALLY
  Template for Piwigo
  ------------------------------------------------------------------------------
  file: gally/gallyjs-tpp.js
  file release: 1.4.0
  ------------------------------------------------------------------------------
  author: grum at piwigo.org
  << May the Little SpaceFrog be with you >>
  ------------------------------------------------------------------------------
  JS for the pictures pages

  need jQuery 1.2.6

  see the release_notes.txt file for more informations
----------------------------------------------------------------------------- */

var gallyPP=null;

$(document).ready(
  function()
  {
    gallyPP=new GallyPP();
  }
);

function GallyPP () {
  var tabs={
        show:'n',
        current:-1,
        selected:-1
      },
      interface={
        visible:false,
        initialized:0,
        timerDelay:null
      },
      image={
        isScrollable:false,
        highWidth:0,
        highHeight:0,
        leftPos:0,
        zoomMode:''
      },
      container=null,

  /**
   * initialize the object
   */
  init = function()
  {
    var regexp = /[1234567]\./i;

    if(jQuery.browser.msie && jQuery.browser.version.match(regexp))
    {
      // this features don't work with the f*****g msie browser version <= 7.0
      // it seems to be functionnal with ie 8.0
      options.interfaceAnimated="none";
      options.imageAutoScroll=false;
    }

    if(options.imageAutoScroll)
    {
      $("html").css("overflow-x", "hidden");
    }
    else
    {
      $("html").css("overflow-x", "scroll");
    }

    if(options.imageCenterTopBorder == "imageHeaderBar")
    {
      options.imageCenterTopMin+=$("#imageHeaderBar").get(0).offsetTop+$("#imageHeaderBar").get(0).offsetHeight;
    }

    if(!options.interfaceCanSwitch)
    {
      options.interfaceHidden=false;
    }

    image.zoomMode=options.defaultZoomSize;

    switchInterface('0', true);
    initializeImageMode("init");


    if((options.interfaceOnImage=="always" || (options.interfaceOnImage=="noscroll" && !image.isScrollable)) && options.interfaceCanSwitch)
    {
      $("#theImg").bind("mouseenter", function () { switchInterface('y', true); } )
                  .bind("mouseleave", function () { switchInterface('n', true); } )
                  .bind("mousemove", function () { switchInterface('y', true); } );
    }

    if(options.interfaceCanSwitch)
    {
      $("#imageHeaderBar").bind("mouseenter", function () { switchInterface('y', false); } )
                          .bind("mousemove", function () { switchInterface('y', false); } );
      $("#imageToolBar").bind("mouseenter", function () { switchInterface('y', true); } )
                        .bind("mouseleave", function () { switchInterface('n', true); } )
                        .bind("mousemove", function () { switchInterface('y', true); } );


      $("#navThumbPrev").bind("mouseenter", function () { switchInterface('Y', true); } )
                        .bind("mouseleave", function () { switchInterface('n', true); } )
                        .bind("mousemove", function () { switchInterface('y', true); } );

      $("#navThumbNext").bind("mouseenter", function () { switchInterface('Y', true); } )
                        .bind("mouseleave", function () { switchInterface('n', true); } )
                        .bind("mousemove", function () { switchInterface('y', true); } );
    }


    $("#navThumbPrev").css("top", $("#navThumbPrev").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");
    $("#navThumbNext").css("top", $("#navThumbNext").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");

    $("#theImage").css("top", $("#theImage").attr("offsetTop")+$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight")+"px");

    $("#contentid").attr("rows", options.commentRows);

    /* fx duration option set to 0 doesn't work so... */
    if(options.animateDelay>0)
    {
      $("#theTabs").tabs({ fx: { opacity: 'toggle', duration:options.animateDelay } } );
    }
    else
    {
      $("#theTabs").tabs();
    }
    switchTabs('n');


    if(options.interfaceCanSwitch)
    {
      $('#theTabsContainer').bind("mouseenter", function () { switchInterface('Y', false); } )
                            .bind("mouseleave", function () { switchInterface('n'); } )
                            .bind("mousemove", function () { switchInterface('y', false); } );
    }

    $("#theTabs").bind('tabsselect', function(event, ui)
      {
        /* The "collapsible" option don't work with jQuery 1.2.6
         * This function aims to reproduct this functionnality
        */
        tabs.selected=ui.index;
      }
    );

    $('.tab a').click(function()
      {
        /* The "collapsible" option don't work with jQuery 1.2.6
         * This function aims to reproduct this functionnality
        */
        $(this).get(0).blur();
        if(tabs.selected == tabs.current)
        {
          if (tabs.current!=-1) switchTabs('n');
          tabs.current=-1;
          tabs.selected=-1;
        }
        else
        {
          if(tabs.current==-1) switchTabs('y');
          tabs.current=tabs.selected;
        }
      }
    );

    $(window).resize( function () { initializeImageMode("resize"); } );

    interface.initialized=1;
    $(document).trigger('gallyInterfaceReady');
  },

  simulateHighRes = function ()
  {
    if(image.isScrollable && options.imageHaveHighRes==false && options.imageSimulateHighRes)
    {
      $('#theImgContainer').bind('click', function ()
        {
          openDisplayHigh($('#theImg').attr('src'));
        }
      ).addClass('pointer');
    }

  },

  initializeImageMode = function (mode)
  {
    var thumbWidth=0,
        imgTop=0,
        cssValues = new Object;

    if(mode=="init")
    {
      theHeaderHeight=$("#theHeader").attr("offsetHeight")+$("#theHeaderAlt").attr("offsetHeight");

      $("#imageToolBar").css("top", $("#imageToolBar").attr("offsetTop")+theHeaderHeight+$("#imageHeaderBar").attr("offsetHeight")+"px");

      if(options.tabsPosition=="bottom")
      {
        copyrightArea = $("#copyright").attr("clientHeight")+1;
        $("#theTabsContainer").css("bottom", copyrightArea+"px");
      }
      else if(options.tabsPosition=="top")
      {
        toolBarArea = $("#imageToolBar").attr("offsetTop")+$("#imageToolBar").attr("offsetHeight");
        $("#theTabsContainer").css("top", toolBarArea+"px");
      }

      if($("#navThumbPrev").length>0)
      {
        $("#navThumbPrev").css("height", $("#copyright").attr("offsetTop")-$("#navThumbPrev").attr("offsetTop")-options.tabsHidden+"px");
      }
      if($("#navThumbNext").length>0)
      {
        $("#navThumbNext").css("height", $("#copyright").attr("offsetTop")-$("#navThumbNext").attr("offsetTop")-options.tabsHidden+"px");
      }
    }

    cssValues.height = $("#theImg").attr("height")+"px";

    // autoscroll
    if(options.imageAutoScroll && ($("#theImg").attr("scrollWidth")>($("#theImage").attr("clientWidth")-2*options.marginContainer)))
    {
      cssValues.width = ($("#theImage").attr("clientWidth")- 2*(options.marginContainer+options.paddingContainer))+"px";

      $("#theImage").bind("mousemove",
        function(event){
          if($("#navThumbPrev").length>0) thumbWidth=$("#navThumbPrev").attr("clientWidth");
          deadArea = Math.max(options.imageScrollMinDeadArea, thumbWidth*1.2);
          mouse=Math.max(Math.min(event.clientX-image.leftPos, this.clientWidth - deadArea), deadArea);
          $("#theImg")
            .css("left",Math.round(($("#theImg").attr("scrollWidth")-this.clientWidth) * -(mouse-deadArea)/(this.clientWidth-2*deadArea))+"px")
            .trigger('scrolled');
        }
      );
      image.isScrollable=true;
    }
    else
    {
      $("#theImage").unbind("mousemove");
      $("#theImg").css("left", "0px");
      cssValues.width = $("#theImg").attr("scrollWidth")+"px";
      image.isScrollable=false;
    }
    $("#theImgContainer").css(cssValues);

    // imagecenter
    if($("#copyright").css("position")=="fixed")
    {
      $("#theImage").css("padding-bottom", $("#copyright").attr("offsetHeight")+"px");
    }
    switch(options.imageCenterMode)
    {
      case "img":
        imgTop = $("#theImgContainer").attr('offsetHeight');
        break;
      case "all":
        imgTop = $("#theImage").attr('offsetHeight');
        break;
      default:
        imgTop = -10000;
        break;
    }
    imgTop = ($("#copyright").attr("offsetTop") - ($("#imageHeaderBar").attr("offsetTop") + $("#imageHeaderBar").attr("offsetHeight")) - imgTop)/2 + options.imageCenterOffset;

    if(imgTop<options.imageCenterTopMin)
    {
      imgTop=options.imageCenterTopMin;
    }
    imgTop=imgTop+"px";

    $("#theImage").css("top", imgTop);


    image.leftPos=$('#theImage').offset().left;

    simulateHighRes();

  },

  switchInterface = function (show, resetTimer)
  {
    if((interface.initialized==1)&&(options.interfaceHidden))
    {
      interface.initialized=2;
      if(show=="Y") return('');
    }

    if(!options.interfaceHidden && show=="0")  { show="1"; }

    // works with jQuery 1.2.6 (support function need jQuery 1.3)
    if(options.interfaceAnimated=="fade")
    {
      switch(show)
      {
        case '0':
          $(".uiImg").css({opacity: 0, visibility:"hidden"});
          interface.visible=false;
          break;
        case '1':
          if(!interface.visible) $(".uiImg").css({opacity: 1, visibility:"visible"});
          interface.visible=true;
          if(resetTimer) resetInterfaceTimer();
          break;
        case '2':
          //if(interface.visible) break;
        case 'Y':
        case 'y':
          if(!interface.visible) $(".uiImg").css("visibility","visible").stop(true, false).fadeTo(options.animateDelay, 1);
          interface.visible=true;
          if(resetTimer) resetInterfaceTimer();
          break;
        default:
          $(".uiImg").stop(true, false).fadeTo(options.animateDelay, 0, function ()
            {
              this.style.visibility="hidden";
              interface.visible=false;
            }
          );
          clearInterfaceTimer();
          break;
      }
    }
    else
    {
      //other value....
      switch(show)
      {
        case 'y':
        case 'Y':
        case '1':
        case '2':
          if(!interface.visible) $(".uiImg").css("visibility", "visible");
          interface.visible=true;
          if(resetTimer) resetInterfaceTimer();
          break;
        default:
          $(".uiImg").css("visibility", "hidden");
          interface.visible=false;
          clearInterfaceTimer();
          break;
      }
    }
  },

  switchTabs = function(show)
  {
    if(show!='')
    {
      tabs.show=show;
    }
    else
    {
      if(tabs.show!='n')
      {
        tabs.show='n';
      }
      else
      {
        tabs.show='y';
      }
    }

    if(options.tabsAnimated)
    {
      if(tabs.show=='y')
      {
        $("#theTabsContainer").animate({height:options.tabsVisible+"px"}, options.animateDelay).trigger('resize');
      }
      else
      {
        $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
        $('#theTabs li').removeClass("ui-tabs-selected");
        $("#theTabsContainer").animate({height:options.tabsHidden+"px"}, options.animateDelay).trigger('resize');
      }
    }
    else
    {
      if(tabs.show=='y')
      {
        $("#theTabsContainer").css({height:options.tabsVisible+"px"}).trigger('resize');
      }
      else
      {
        $('#theTabs div.tabPanel').addClass("ui-tabs-hide").css("display", "");
        $('#theTabs li').removeClass("ui-tabs-selected");
        $("#theTabsContainer").css({height:options.tabsHidden+"px"}).trigger('resize');
      }
    }
  },

  clearInterfaceTimer = function()
  {
    if(interface.timerDelay!=null)
    {
      window.clearInterval(interface.timerDelay);
      interface.timerDelay=null;
    }
  },

  resetInterfaceTimer = function()
  {
    clearInterfaceTimer();
    if(options.interfaceTimerDelay>0 && options.interfaceCanSwitch) interface.timerDelay=window.setInterval(switchInterface, options.interfaceTimerDelay, "n", false);
  },

  openDisplayHigh = function(url)
  {
    $('#theImageHigh').css(
      {
        width:$("html").get(0).scrollWidth+"px",
        height:$("html").get(0).scrollHeight+"px",
        display:"block"
      }
    );

    if($("#theImgHigh").attr('src')=="")
    {
      p = new Object();
      p.left = (($(window).width()-$("#theImgHighContainer").attr("clientWidth")-options.paddingContainer*2)/2)+"px";
      p.top = (($(window).height()-$("#theImgHighContainer").attr("clientHeight")-options.paddingContainer*2)/2)+"px";


      $('#theImgHighContainer')
        .css(
          {
            left:p.left,
            top:p.top,
            padding:options.paddingContainer+"px"
          }
        );


      $("#theImgHigh")
        .load(
          function ()
          {
            image.highWidth=$("#theImgHigh").width();
            image.highHeight=$("#theImgHigh").height();

            p=calcImgHighPositionAndSize(image.zoomMode);

            $('#theImgHighContainer').css("background-image", "none");
            displayZoomHigh();
            $("#theImgHigh").css( {display:"block"} );
          }
        )
        .attr('src', url);

      if(options.highResClickMode=='close')
      {
        $("#theImgHigh").bind('click', closeDisplayHigh);
      }
      else
      {
        // switch zoom
        $("#theImgHigh").bind('click', switchZoomHigh);
      }
    }
    else
    {
      p=calcImgHighPositionAndSize(image.zoomMode);

      $('#theImgHighContainer')
        .css(
          {
            left:p.left+"px",
            top:p.top+"px",
            width:p.width+"px",
            height:p.height+"px"
          }
        );
    }
  },

  calcImgHighPositionAndSize = function(zoom)
  {
    var p = {
          left:options.marginContainer,
          top:options.marginContainer,
          width:0,
          height:0
        },
        margins = (options.marginContainer+options.paddingContainer)*2;

    if(zoom=='full')
    {
      p.width = $("html").get(0).clientWidth-margins;
      p.height = $("html").get(0).clientHeight-margins;
    }
    else
    {
      //zoom = 'fit'
      ratioImg = image.highWidth / image.highHeight;
      ratioPage = $("html").get(0).clientWidth / $("html").get(0).clientHeight;

      if((ratioPage > 1 && (ratioPage > ratioImg)) ||
         (ratioPage < 1 && (ratioPage < ratioImg)))
      {
        p.height = $("html").get(0).clientHeight-margins;
        p.width = p.height*ratioImg;
      }
      else
      {
        p.width = $("html").get(0).clientWidth-margins;
        p.height = p.width/ratioImg;
      }
      p.left = ($("html").get(0).clientWidth-p.width)/2-options.paddingContainer;
      p.top = ($("html").get(0).clientHeight-p.height)/2-options.paddingContainer;
    }

    if(p.width>image.highWidth)
    {
      p.width = image.highWidth;
      p.left = ($("html").get(0).clientWidth-p.width)/2;
    }
    if(p.height>image.highHeight)
    {
      p.height = image.highHeight;
      p.top = ($("html").get(0).clientHeight-p.height)/2;
    }

    return(p);
  },

  displayZoomHigh = function()
  {
    var container=calcImgHighPositionAndSize(image.zoomMode);

    $('#theImgHighContainer').css(
        {
          left:container.left+"px",
          top:container.top+"px",
          width:container.width+"px",
          height:container.height+"px"
        }
      );



      if(image.zoomMode=="full")
      {
        $("#theImgHigh")
          .css(
            {
              width:image.highWidth+"px",
              height:image.highHeight+"px"
            }
          );
        $('#theImgHighContainer').bind("mousemove",
            function(event)
            {
              var deadArea = Math.max(options.marginContainer*2, options.imageScrollMinDeadArea)
                  mouseX=Math.max(Math.min(event.clientX-container.left, container.width - deadArea), deadArea),
                  mouseY=Math.max(Math.min(event.clientY-container.top, container.height - deadArea), deadArea);
              $("#theImgHigh")
                .css("left",Math.round((image.highWidth-container.width) * -(mouseX-deadArea)/(container.width-2*deadArea))+"px")
                .css("top",Math.round((image.highHeight-container.height) * -(mouseY-deadArea)/(container.height-2*deadArea))+"px");
            }
          );
      }
      else
      {
        $("#theImgHigh")
          .css(
            {
              width:container.width+"px",
              height:container.height+"px",
              left:"0px",
              top:"0px"
            }
          );
        $('#theImgHighContainer').unbind("mousemove");
      }
  },

  closeDisplayHigh = function()
  {
    $('#theImageHigh').css('display', 'none');
  },

  switchZoomHigh = function()
  {
    if(image.zoomMode=='full')
    {
      image.zoomMode="fit";
    }
    else
    {
      image.zoomMode="full";
    }

    $("#theImgHighZoomButton").toggleClass('full').toggleClass('fit');

    displayZoomHigh();
  };


  this.closeDisplayHigh = function () { closeDisplayHigh(); };
  this.switchZoomHigh = function () { switchZoomHigh(); };
  this.getImageProp = function () { return image; };
  this.getInterfaceProp = function () { return interface; };
  this.getTabsProp = function () { return tabs; };
  this.openDisplayHigh = function (url) { openDisplayHigh(url); };

  init();

}