jQuery(function($) {
  
  // Wenn erstes Bild geladen ist => Loadingscreen weg
  setTimeout(function(){
    $('#bg #bgimg').load(function() {
      setTimeout(function(){
        $('#preloader-image').addClass('hidden');
        $('#preloader-image').remove();
        $('#preloader').addClass('hidden');
        $('#thumbnails_wrapper').removeClass('hidden');
        $('#thumbail-reaction').removeClass("hidden");
      }, 1500);
    });
  }, 1000);

  // Contact und About vertical Centered
  var contentHeight = function() {
	  var winHeight = ($('body').height() - $('#overlay-container .content').height()) / 2;
	  var winWidth = ($('body').width() - $('#overlay-container .content').width()) / 2;
  	$('#overlay-container').css({
  	  'top': winHeight,
  	  'left': winWidth
  	});
	}
	contentHeight();
	$(window).resize(contentHeight);
	
	
	// Preload GIF Centered
	var loaderHeight = function() {
	  var winHeightx = ($('body').height() - $('#preloader').height()) / 2;
	  var winWidthx = ($('body').width() - $('#preloader').width()) / 2;
  	$('#preloader').css({
  	  'top': winHeightx,
  	  'left': winWidthx
  	});
	}
	loaderHeight();
	$(window).resize(loaderHeight);
	
	function imgPositionxx() {
    var imgxx = $('img#loading-image');
        var marginTopxx = (($('#loading-image').height() - $(window).height() ) / 2 );
        $('#loading-image').css({
          'width': '100%',
          'height': 'auto',
          'margin-left': 0,
          'margin-top': -marginTopxx
        });
  }
  $(window).resize(imgPositionxx);
  
  imgPositionxx();
	$('img#loading-image').load(function() {
    imgPositionxx();
  });
  
  // Big Img position
  function imgPosition() {
    var img = $('#bg #bgimg');

      if ( img.width() > img.height() ) {
        var marginTop = (($('#bg #bgimg').height() - $('body').height() ) / 2 );
        $('#bg #bgimg').css({
          'width': '100%',
          'height': 'auto',
          'margin-left': 0,
          'margin-top': -marginTop
        });
      } else {
        var marginLeft = (( $('body').width() - $('#bg #bgimg').width() ) / 2 );
        $('#bg #bgimg').css({
          'width': 'auto',
          'height': '100%',
          'margin-left': marginLeft,
          'margin-top': 0
        });
      }
  }

	



  

    function showImageInCollection(collection, index) {
       var ul  = collection;
       var lis = $('li', ul);
       var li  = lis.eq(index);
       var href = $('a', li).attr('href');
       
       console.log("href = " + href);
       // preloader einblenden
       $('#preloader').removeClass('hidden');
     
       // bild setzen
       var img = $('#bg #bgimg');
       img.attr('src', href);
       img.attr('data-index', index);
       img.attr('data-collection', collection.attr('id'));
       img.load(function() {
          imgPosition();
          $('#preloader').addClass('hidden');
          return false
       });
    }
  
    // Contact und About Navigation
    $('.content-button').click(function(ev) {
      if ($(this).hasClass('active') == true) {
        $(this).removeClass('active');
        $('#overlay-background').addClass('hidden');
        $('#overlay-container').addClass('hidden');
      }
      else {
      // Variable
      var container = $(this).attr('href');
      // alle Content Container werden ausgeblendet
      $('#overlay-background').addClass('hidden');
      $('#overlay-container').addClass('hidden');
      $('#overlay-container .content').addClass('hidden');
      // der richtige Content Container wird eingeblendet
      $('#overlay-background').removeClass('hidden');
      $('#overlay-container').removeClass('hidden');
      $(container).removeClass("hidden");
      // Allen Links wird die Classe active genommen
      $('.content-button').removeClass('active');
      // Der gedrückte Link kriegt Classe active
      $(this).addClass('active');
      // Link wird deaktiviert
      }
      return false;
    });
  

      $('#overlay-background').click(function() {
          $('#overlay-container').addClass('hidden');
          $('#overlay-container .content').addClass('hidden');
          $('.content-button').removeClass('active');
          $(this).addClass('hidden');
      });
  //Navigation
  
  
  $.getJSON('/gallery/show/cars.json', function(data) {
    $(data).each(function(index, item) {
      $('ul#cars').append('<li class="content"><div><a class="bg-button" href="http://www.strogalski.com'+item.image+'" data-index="' + index + '"><img src="http://www.strogalski.com'+item.thumb+'" class="thumb" /></a></div</li>');
    });
    $.getJSON('/gallery/show/stillife.json', function(data) {
      $(data).each(function(index, item) {
        $('ul#stilllife').append('<li class="content"><div><a class="bg-button" href="http://www.strogalski.com'+item.image+'" data-index="' + index + '"><img src="http://www.strogalski.com'+item.thumb+'" class="thumb" /></a></div></li>');
      });
      $.getJSON('/gallery/show/personal-work.json', function(data) {
        $(data).each(function(index, item) {
          $('ul#personal-work').append('<li class="content"><div><a class="bg-button" href="http://www.strogalski.com'+item.image+'" data-index="' + index + '"><img src="http://www.strogalski.com'+item.thumb+'" class="thumb" /></a></div></li>');
        });
        $.getJSON('/gallery/show/landscape-cityscape.json', function(data) {
          $(data).each(function(index, item) {
            $('ul#landscape-cityscape').append('<li class="content"><div><a class="bg-button" href="http://www.strogalski.com'+item.image+'" data-index="' + index + '"><img src="http://www.strogalski.com'+item.thumb+'" class="thumb" /></a></div></li>');
          });
          loadstuff();
        });
      });
    });
  });
  





  
  function loadstuff() {
    $('#thumb-slider ul').each(function(index) {
      var sliderlength = $(this).children().size();
      var sliderwidth = (130 * sliderlength);
      $(this).css('width', sliderwidth);
    });
    
    
    showImageInCollection($('#cars'), 0);
    
    $(window).resize(imgPosition);
    imgPosition();
    
    // Navigation Category Function
    $('#center .nav-button').click(function() {
      var thumbs_container = $(this).attr('href');
      $('.thumbs').removeClass('active');
      $('.thumbs').addClass('hidden');
      $(thumbs_container).removeClass('hidden');
      $(thumbs_container).addClass('active');
      return false
    });
    
    // Navigation BIG Image Funtion
    var imageNavigation = function() {
      var bg_url = $(this).attr('href');
      var index = $(this).attr('data-index');
      var collection = $(this).parents('ul');
      
      showImageInCollection(collection, index);
      return false
  	}
    
    $('#thumb-slider ul li div a.bg-button').click(imageNavigation);
    
    function initializeSwipeNavigation(element) {
      var slide_width_car = ($(window).width() / 2);
      var thumb_width_car = element.width();
      var slide_end_car = thumb_width_car - $(window).width() + 40;
          $('#next-navi').mouseenter(function(){

                if (element.hasClass('hidden') == false) {
                  var offset = element.offset();
                  if (offset.left >= (-(thumb_width_car) + $(window).width()) ) {
                    element.stop().animate({'left':'-='+slide_width_car}, 1200);
                  }
                  else {
                    element.stop().animate({'left': -slide_end_car}, 1200);
                  }
                }

          });
         
        $('#prev-navi').mouseenter(function(){
            if (element.hasClass('hidden') == false) {
              var offset = element.offset();
              if (offset.left <= 0 ) {
                element.stop().animate({'left':'+='+slide_width_car}, 1200);
              }
              else {
                element.stop().animate({'left': 0}, 1200);
              }
            }
        });
    }
  
  // Swipe function thumb-gallery CAR
  initializeSwipeNavigation($('#cars'));
  
  // Swipe function thumb-gallery PERSONAL WORK
  initializeSwipeNavigation($('#personal-work'));
  
  // Swipe function thumb-gallery STILLIFE
  initializeSwipeNavigation($('#stilllife'));
  
  // Swipe function thumb-gallery SCAPE
  initializeSwipeNavigation($('#landscape-cityscape'));
  
  
  
  $('a#prev-pic').click(function(){
    var current_image      = $('#bgimg');
    var current_index      = parseInt(current_image.attr('data-index'));
    var current_collection = current_image.attr('data-collection')
    var ul                 = $('#' + current_collection);
    var lis                = $('li', ul);
    var new_index          = (current_index - 1) % lis.size();
    
    showImageInCollection(ul, new_index);
  });
  $('a#next-pic').click(function(){
      var current_image      = $('#bgimg');
      var current_index      = parseInt(current_image.attr('data-index'));
      var current_collection = current_image.attr('data-collection')
      var ul                 = $('#' + current_collection);
      var lis                = $('li', ul);
      var new_index          = (current_index + 1) % lis.size();

      showImageInCollection(ul, new_index);
  });
  


   $('#thumbnails_wrapper').mouseleave(function(){
      $('#thumbnails_wrapper').animate({
         "margin-bottom": -150,
       }, 2000, "easeInQuint", function(){ 
      });
    });
   
   
     $('#thumbail-reaction, #thumb-slider, #thumbnails_wrapper').mouseenter(function(){
          $('#thumbnails_wrapper').stop().animate({
            "margin-bottom": 0,
          },{ "duration": 700, "easing": "easeOutCubic" });
     });
  

     var el = $('#contact-one')
     var html = el.html();
     var regexp = /([\w\.\-+]+@[\w\.\-]+)/g;
     html = html.replace(regexp, '<a href="mailto:$1">$1</a>');
     el.html(html);
     
     var ele = $('#contact-two')
      var htmle = ele.html();
      var regexpe = /([\w\.\-+]+@[\w\.\-]+)/g;
      htmle = htmle.replace(regexpe, '<a href="mailto:$1">$1</a>');
      ele.html(htmle);
      
    var elee = $('#contact-three')
      var htmlee = elee.html();
      var regexpee = /([\w\.\-+]+@[\w\.\-]+)/g;
      htmlee = htmlee.replace(regexpee, '<a href="mailto:$1">$1</a>');
      elee.html(htmlee);
   
   
   
   
    var thumbslider_width = function() {
      var wrapper_width = ($(window).width() - 20);
      $('#thumb-slider').css("width", wrapper_width);
    }
    thumbslider_width();
    $(window).resize(thumbslider_width);
  }
});