/**
* Init
*--------------------------------------------------------------------------*/
$(document).ready(function () {
  
  //default size for background images
  var originalWidth = 1920;
  var originalHeight = 1080;
  //
  
  var all_controls = $('#thumbs, #overlay, a.view_all');
  var thumbs = $('#thumbs, #overlay');
  var view_all = $('a.view_all');
  var overlay = $('#overlay');

  var hideThumbs = function(){
      thumbs.addClass('accessible');
      view_all.removeClass('accessible')
  }

  var showThumbs = function(){
      thumbs.removeClass('accessible');
      view_all.addClass('accessible')
  }

  var toggleMode = function(){
      all_controls.toggleClass('accessible')
  }
  
  var setOverlayHeight = function(){
      var h = $(window).height()
      overlay.css('height', h+'px')
      return h;
  }
  
  var fitToScreen = function (screenWidth, screenHeight){
      var ratioW = screenWidth/originalWidth
      var ratioH = screenHeight/originalHeight
      
      ratio = ratioW < ratioH ? ratioH : ratioW
      
      var width = originalWidth*ratio
      var height = originalHeight*ratio
      
      var x = (screenWidth - width)/2
      var y = (screenHeight - height)/2
      
      var target = $('#photos li');
      var img = $('img', target)
      target.css({top: y+'px', left: x+'px'})
      img.css({width: width+'px', height: height+'px'})
  }
  
  var centerArrows = function(screenHeight){
    $('.paginator').css('top', parseInt(screenHeight/2)+'px');
  }
  
  
  $(window).resize(function(){
    var wh = $(window).height();
    var ww = $(window).width();
    fitToScreen(ww, wh);
    setOverlayHeight();
    centerArrows(wh);  
  })
  
  
  //firts time
  var wh = $(window).height();
  var ww = $(window).width();
  var a = setOverlayHeight();
  fitToScreen(ww, wh);
  
  
  $('#page_thumbs').flexipage({
    paginator_selector: '#page_nav',
    perpage: 11,
    navigation: true
  });
 
  var bg_slide = $('#photos').flexipage({
    element: 'li',
    perpage: 1,
    showcounter: false
  });
	
	$('a.close').click(function(e){
	  e.preventDefault()
    hideThumbs()
	})
	
	$('#header li.active a, a.view_all').click(function(e){
    e.preventDefault();
	  toggleMode()
	})
	
  $('#page_thumbs li a').click(function(e){
      e.preventDefault()
      $target = $(this)
      var i = parseInt($('#page_thumbs a').index(this))+1;
      hideThumbs()
      bg_slide.selectPage(i)
  })
	
	$('#overlay').click(function(){
	   showThumbs();
	})
  
  //center arrow when paginator is loaded
  centerArrows(wh);
 
});