/* -----------------------------------------------------------------------------
  GALLY
  Template for Piwigo
  ------------------------------------------------------------------------------
  file: gally/gallyjs-tpp.js
  file release: 1.3.4
  ------------------------------------------------------------------------------
  author: grum at grum.dnsalias.com
  << 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 showtabs;
var selectedTab;
var interfaceTimerDelay;
var isScrollable;
var zoomMode;

$("document").ready(
  function()
  {
    inittoolbar();
  }
);

function inittoolbar()
{
  $(document).data("initialized", 0);
  $(document).data("interface", false);
  $(document).data("highWidth", 0);
  $(document).data("highHeight", 0);

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

  zoomMode=options.defaultZoomSize;
  currentTab=-1;
  selectedTab=-1;
  interfaceTimerDelay = null;
  switchInterface('0', true);
  initializeImageMode("init");


  if((options.interfaceOnImage=="always" || (options.interfaceOnImage=="noscroll" && !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
      */
      selectedTab=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(selectedTab == currentTab)
      {
        if (currentTab!=-1) switchTabs('n');
        currentTab=-1;
        selectedTab=-1;
      }
      else
      {
        if(currentTab==-1) switchTabs('y');
        currentTab=selectedTab;
      }
    }
  );

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

  $(document).data("initialized", 1).trigger('gallyInterfaceReady');
}

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

}

function initializeImageMode(mode)
{
  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 = new Object;
  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)+"px";

    $("#theImage").bind("mousemove",
      function(event){
        deadArea = $("#navThumbPrev").attr("clientWidth")*1.2;
        mouse=Math.max(Math.min(event.clientX-this.offsetLeft, this.clientWidth - deadArea), deadArea);
        $("#theImg")
          .css("left",Math.round(($("#theImg").attr("scrollWidth")-this.clientWidth) * -(mouse-deadArea)/(this.clientWidth-2*deadArea))+"px")
          .trigger('scrolled');
      }
    );
    isScrollable=true;
  }
  else
  {
    $("#theImage").unbind("mousemove");
    $("#theImg").css("left", "0px");
    cssValues.width = $("#theImg").attr("scrollWidth")+"px";
    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);

  simulateHighRes();

}

function switchInterface(show, resetTimer)
{
  /*
  uiImg class is affected on this elements :
  $("#imageToolBarContainer").stop(true, false).fadeTo(animateDelay, 1);
  $("#imageInfosContainer").stop(true, false).fadeTo(animateDelay, 1);
  $("#navThumbPrevContainer").stop(true, false).fadeTo(animateDelay, 1);
  $("#navThumbNextContainer").stop(true, false).fadeTo(animateDelay, 1);
  */

  if(($(document).data("initialized")==1)&&(options.interfaceHidden))
  {
    $(document).data("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"});
        $(document).data("interface", false);
        break;
      case '1':
        if(!$(document).data("interface")) $(".uiImg").css({opacity: 1, visibility:"visible"});
        $(document).data("interface", true);
        if(resetTimer) resetInterfaceTimer();
        break;
      case '2':
        //if($(document).data("interface")) break;
      case 'Y':
      case 'y':
        if(!$(document).data("interface")) $(".uiImg").css("visibility","visible").stop(true, false).fadeTo(options.animateDelay, 1);
        $(document).data("interface", true);
        if(resetTimer) resetInterfaceTimer();
        break;
      default:
        $(".uiImg").stop(true, false).fadeTo(options.animateDelay, 0, function ()
          {
            this.style.visibility="hidden";
            $(document).data("interface", false);
          }
        );
        clearInterfaceTimer();
        break;
    }
  }
  else
  {
    //other value....
    switch(show)
    {
      case 'y':
      case 'Y':
      case '1':
      case '2':
        if(!$(document).data("interface")) $(".uiImg").css("visibility", "visible");
        $(document).data("interface", true);
        if(resetTimer) resetInterfaceTimer();
        break;
      default:
        $(".uiImg").css("visibility", "hidden");
        $(document).data("interface", false);
        clearInterfaceTimer();
        break;
    }
  }
}

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

  if(options.tabsAnimated)
  {
    if(showtabs=='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(showtabs=='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');
    }
  }
}

function clearInterfaceTimer()
{
  if(interfaceTimerDelay!=null)
  {
    window.clearInterval(interfaceTimerDelay);
    interfaceTimerDelay=null;
  }
}

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

function openDisplayHigh(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 ()
        {
          $(document).data("highWidth", $("#theImgHigh").width());
          $(document).data("highHeight", $("#theImgHigh").height());

          p=calcImgHighPositionAndSize(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(zoomMode);

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

function calcImgHighPositionAndSize(zoom)
{
  p = new Object();

  if(zoom=='full')
  {
    p.width = ($("html").get(0).clientWidth-(options.marginContainer+options.paddingContainer)*2);
    p.height = ($("html").get(0).clientHeight-(options.marginContainer+options.paddingContainer)*2);
    p.left=options.marginContainer;
    p.top=options.marginContainer;

    if(p.width>$(document).data("highWidth"))
    {
      p.width = $(document).data("highWidth")-options.paddingContainer*2;
      p.left = ($("html").get(0).clientWidth-p.width)/2;
    }

    if(p.height>$(document).data("highHeight"))
    {
      p.height = $(document).data("highHeight")-options.paddingContainer*2;
      p.top = ($("html").get(0).clientHeight-p.height)/2;
    }
  }
  else
  {
    //zoom = 'fit'
    ratioImg = $(document).data("highWidth") / $(document).data("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-(options.marginContainer+options.paddingContainer)*2);
      p.width = p.height*ratioImg;
    }
    else
    {
      p.width = ($("html").get(0).clientWidth-(options.marginContainer+options.paddingContainer)*2);
      p.height = p.width/ratioImg;
    }
    p.left = ($("html").get(0).clientWidth-p.width)/2;
    p.top = ($("html").get(0).clientHeight-p.height)/2;
  }

  return(p);
}

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

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

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

  displayZoomHigh();
}

function displayZoomHigh()
{
  p=calcImgHighPositionAndSize(zoomMode);

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



    if(zoomMode=="full")
    {
      $("#theImgHigh")
        .css(
          {
            width:$(document).data("highWidth")+"px",
            height:$(document).data("highHeight")+"px"
          }
        );
      $('#theImgHighContainer').bind("mousemove",
          function(event)
          {
            deadArea = options.marginContainer*2;
            mouseX=Math.max(Math.min(event.clientX-this.offsetLeft, this.clientWidth - deadArea), deadArea);
            mouseY=Math.max(Math.min(event.clientY-this.offsetTop, this.clientHeight - deadArea), deadArea);
            $("#theImgHigh")
              .css("left",Math.round(($("#theImgHigh").attr("scrollWidth")-this.clientWidth) * -(mouseX-deadArea)/(this.clientWidth-2*deadArea))+"px")
              .css("top",Math.round(($("#theImgHigh").attr("scrollHeight")-this.clientHeight) * -(mouseY-deadArea)/(this.clientHeight-2*deadArea))+"px");
          }
        );
    }
    else
    {
      $("#theImgHigh")
        .css(
          {
            width:p.width+"px",
            height:p.height+"px",
            left:"0px",
            top:"0px"
          }
        );
      $('#theImgHighContainer').unbind("mousemove");
    }
}