document.write("<style>.gallery  .holder { visibility: hidden; }</style>")

$(document).ready(function() {
  
  
  /* 
   * -----------------------------------------------------------------------
   * Transitions
   * -----------------------------------------------------------------------
   */
  
  $(".page #content img").fadeOut(0)
  $(".page #content img").fadeIn(1000)
  
  
  /* 
   * -----------------------------------------------------------------------
   * Gallery
   * -----------------------------------------------------------------------
   */

  var arrowTimer;
  var imageLoaded = 0;
  var currentImage = 0;
  var targetPos = 0;
  var imageCount = $(".gallery .holder img").length;
  
  setArrowVisibility( false )

  //
  // Preload images
  var loadstats = $('<div class="loadstats"></div>');
  $(".gallery").append(loadstats);
  $(".gallery .holder").fadeOut(0)
  $(".gallery .holder img").load(function(){ 
    imageLoaded++;
    loadstats.html('loading images: ' + imageLoaded + ' of ' + imageCount);
    if(imageLoaded == imageCount) {
      $(".gallery .holder").css("visibility","visible").fadeIn(1500);
      loadstats.hide();
    }
  }).each(function() {
    if(this.complete || (jQuery.browser.msie && parseInt(jQuery.browser.version) == 6)) {
      $(this).trigger("load");
    }
  }); 

  
  //
  // Mouse events
  $(".gallery .holder").mousemove(function() {
    setArrowVisibility(true);  
    setArrowTimer();
  });
  $(".gallery .holder").mouseleave(function(e) {
    setArrowVisibility(false);  
  });
  $(".arrow").mouseenter(function() {
    setArrowVisibility(true);  
  })
  $(".arrow").mouseleave(function() {
    setArrowTimer()
  })
  $("#arrow-right").click(function() {
    scroll(1)
  })
  $("#arrow-left").click(function() {
    scroll(-1)
  })
  function setArrowTimer(){
    arrowTimer = setTimeout( setArrowVisibility, 1000, false );
  }
    
  
  function getMaxScroll() {
    return $(".gallery").get(0).scrollWidth - $(window).width();
  }
  
  
  function setArrowVisibility(value) {
    clearTimeout(arrowTimer)
    //
    // right arrow
    if( !value || targetPos >= getMaxScroll() ) {
      $("html.no-touch #arrow-right").stop().animate({right:-60}, 300).data("v", false);
    } else if(value && $("#arrow-right").data("v") == false) {
      $("#arrow-right").stop().animate({right:0}, 200).data("v", true);
    }
    //
    // left arrow
    if( !value || targetPos == 0 ) {
      $("html.no-touch #arrow-left").stop().animate({left:-60}, 300).data("v", false);
    } else if(value && $("#arrow-left").data("v") == false) {
      $("#arrow-left").stop().animate({left:0}, 200).data("v", true);
    }
  }
  
  //
  // Gallery scrolling
  function scroll(d) { 
  
    var prevImage;
    var nextImage;
    var w = 0;
    
    $(".gallery .holder img" ).each(function(){
      w += $(this).width();
      if(w >= $(".gallery").scrollLeft() + $(".gallery").width()) {
        nextImage = $(this)
        return false; 
      }
    })
    
    w = 0;
    $(".gallery .holder img" ).each(function(){
      w += $(this).width();
      if(w >= $(".gallery").scrollLeft()) {
        prevImage = $(this)
        return false; 
      }
    })
    
    //prevImage.css("border", "1px solid green")
    //nextImage.css("border", "1px solid red")
  
  
    if( d < 0 ) {
      targetPos = prevImage.position().left - 100;
    } else {
      targetPos = nextImage.position().left - ( $(".gallery").width() - nextImage.width() ) + 100
    }
    
    var maxPos = getMaxScroll();
    if(targetPos > maxPos ) {
      targetPos = maxPos;
    } else if (targetPos < 0 ) {
      targetPos = 0;
    }
    
    $(".gallery").stop().animate({scrollLeft:targetPos}, 1000, "easeOutCubic");
    setArrowVisibility(true);
  }

  
  
  

  if($("#arrow-left").length) {
    disableSelection( $("#arrow-left").get(0) )
  }
  if($("#arrow-right").length) {
    disableSelection( $("#arrow-right").get(0) )
  }
  
  function disableSelection(target){
    if (typeof target.onselectstart!="undefined") //IE route
      target.onselectstart=function(){return false}
    else if (typeof target.style.MozUserSelect!="undefined") //Firefox route
      target.style.MozUserSelect="none"
    else //All other route (ie: Opera)
      target.onmousedown=function(){return false}
      //target.style.cursor = "default"
  }
  
});