/* 
  Author: Timo Höner
  Web: http://72quadrat.de
*/

$(document).ready(function() {
  /////////////////////////////////////////////////////////////////
  // Basics
  /////////////////////////////////////////////////////////////////
  var $slider = $('#sliderwrap');
  var $gallerystartbutton = $('#sliderwrap .description a.startbtn, #sliderwrap .gallerybtn');
  var $closebutton = $('#sliderwrap .closebtn');
  var $infobutton = $('#sliderwrap .infobtn');
  var $thumbsbutton = $('#sliderwrap .thumbsbtn');
  var $infotext = $('.no-touch #sliderwrap #infotext');
  var $album = $('#sliderwrap .album');
  var $albumtitle = $('#sliderwrap .album .title');
  var $slidergallery = $('#sliderwrap #gallery');
  var $portfolio = $('#portfolio');
  var $masonry = $('#portfolio.masonry');
  var $masonry = $('#portfolio');
  /////////////////////////////////////////////////////////////////
  // Masonry
  /////////////////////////////////////////////////////////////////
  $masonry.imagesLoaded( function(){
    $masonry.masonry({
      itemSelector : 'article'
    });
  });
  /////////////////////////////////////////////////////////////////
  // Isotope
  /////////////////////////////////////////////////////////////////
  // $masonry.isotope({ layoutMode : 'masonry' });
  /////////////////////////////////////////////////////////////////
  // disable Scroll
  /////////////////////////////////////////////////////////////////
  // function disablePadScroll(){
  //   document.body.addEventListener('touchmove', 
  //   function(e){ 
  //     e.preventDefault(); 
  //   }); 
  //   document.body.addEventListener('touchstart', 
  //   function(e){ 
  //     e.preventDefault(); 
  //   });
  // };
  /////////////////////////////////////////////////////////////////
  // Galleria
  /////////////////////////////////////////////////////////////////
  // Galleria Function
  function loadGallery(id) {
    console.log("Show Album with ID "+id+" please");
    if (Galleria) { console.log("Galleria exists"); }
    // Load JSON with Imagedata and initialize Galleria
    $.getJSON('/wp-content/themes/kerstinzillmer/inc/album-json.php?id='+id, function(data) {
      // console.log(data); // make sure it prints out an array that is correctly formatted
      $('#gallery').galleria({
        dataSource: data,
        height: 560,
        width: '100%',
        showInfo: true,
        clicknext: false,
        idleTime: 3000,
        debug: false,
        preload: 2,
        extend: function() {
          // don't loop on last image 
          this.$('image-nav-right,galleria-layer').mousedown(this.proxy(function(e) {
            if ( this.getIndex() == this.getDataLength() -1) {
              $infobutton.click();
              console.log('Last Image');
            }
          }));
        }
      });
    });
  };
  /////////////////////////////////////////////////////////////////
  // Resize Detector
  /////////////////////////////////////////////////////////////////
  // global variables
  var compareWidth; //previous width used for comparison
  var detector; //the element used to compare changes
  // for performance, I store the detector element into a variable to avoid
  // running a DOM query every time we need to test the change conditions
  //
  // set the initial values
  detector = jQuery('#branding');
  compareWidth = detector.width();
  jQuery(window).resize(function(){
    //compare everytime the window resize event fires
    if(detector.width()!=compareWidth){
      //a change has occurred so update the comparison variable
      compareWidth = detector.width();
      // Give a console log
      console.log("change width");
      // Rescale Galleria
      $('#gallery').galleria().rescale();
      }
  });
  /////////////////////////////////////////////////////////////////
  // Functions
  /////////////////////////////////////////////////////////////////
  
  // Portfolio image link action
  $('#portfolio article a').click(function(event) {
    // Clear Rollovertext
    $($infotext).text('');
    // Scroll to top (animated)
    $('body').animate({scrollTop : 0},'fast');
    // Add Class that slider is opened
    $('body').addClass('slideropen');
    // Get the Album id of the rel attribute
    var id = $(this).attr('rel');
    // Set Hash
    window.location = '#show-'+id;
    // Hide all other albums
    $($album).hide();
    // Show current album
    $('#album'+id).show();
    console.log('#album'+id);
    // Show Title Screen first
    $($albumtitle).css("marginTop","0px");
    $($slidergallery).css("marginTop","-900px");
    $('#sliderwrap .gallerybtn').show();
    $slider.slideDown();
    // Load the Gallery
    loadGallery(id);
    return false;
  });
  // Close Slider
  $($closebutton).click(function() {
    $($infotext).text('');
    $('body').removeClass('slideropen');
    $('body').removeClass('slideshowopen');
    $($slider).removeClass('thumbnailopen');
    $slider.slideUp();
    console.log("Close the slider");
  });
  // Hide the title and the thumbnails and just show the gallery
  $($gallerystartbutton).click(function() {
    $($albumtitle).css("marginTop","-900px");
    $($slidergallery).css("marginTop","0px");
    $('body').addClass('slideshowopen');
    $($slider).removeClass('thumbnailopen');
    console.log("Show the gallery");
    //disablePadScroll();
    return false;
  });
  // Hide the gallery and the thumbnails and show just the title
  $($infobutton).click(function() {
    $($albumtitle).css("marginTop","0px");
    $($slidergallery).css("marginTop","-900px");
    $('body').removeClass('slideshowopen');
    $($slider).removeClass('thumbnailopen');
    return false;
  });
  // Hide the info and the gallery and show just the thumbs
  $($thumbsbutton).click(function() {
    $($slider).toggleClass('thumbnailopen');
    return false;
  });
  /////////////////////////////////////////////////////////////////
  // Get the Album-ID out of the hashtag (example:"#album123")
  /////////////////////////////////////////////////////////////////
  var hashid = window.location.hash.substring(6);
  if (hashid > 5){
    // cut the first 6 letters od the string to
    // get the correct id
    console.log('Hey guys we need to load the album ID:'+hashid);
    $('body').addClass('slideropen');
    // Hide all other albums
    $($album).hide();
    // Show current album
    $('#album'+hashid).show();
    // Show Title Screen first
    $($albumtitle).css("marginTop","0px");
    $($slidergallery).css("marginTop","-900px");
    $('#sliderwrap .gallerybtn').show();
    $slider.slideDown();
    // Load the Gallery
    loadGallery(hashid);
  }
  /////////////////////////////////////////////////////////////////
  // Mouse-Over Functions for gallery
  /////////////////////////////////////////////////////////////////
  $($closebutton).mouseover(function() {$($infotext).text('Schließen');})
  $($closebutton).mouseleave(function() {$($infotext).text('');})
  $($infobutton).mouseover(function() {$($infotext).text('Beschreibung');})
  $($infobutton).mouseleave(function() {$($infotext).text('');});
  $($thumbsbutton).mouseover(function() {$($infotext).text('Thumbnails an / aus');});
  $($thumbsbutton).mouseleave(function() {$($infotext).text('');});
  $($gallerystartbutton).mouseover(function() {$($infotext).text('Bilder zeigen');});
  $($gallerystartbutton).mouseleave(function() {$($infotext).text('');});
});