/*
 * @class   Home
 * @company Hatem+D
 */

// Auto init
$(document).ready(function(){ new Home() });

var Home = function() { this.initialize.apply(this, arguments) };
Home.prototype = (function() { var pro = {};

  //  Contants
  var BG_SIZE = { width: 1440, height: 846 };
      
  //  Variables
  var DOMWindow             = $(window),
      links                 = $('#home > nav > a'),
			utils									=	$('#home > #nav-utils'),
			facebookButton				= utils.children('#nav-facebook'),
			facebookSlide					= utils.find('#slide-facebook'),
      screensContainer      = $('#entryscreens > div'),
      screens               = screensContainer.children('.entryscreen'),
			circles								=	screens.children('.circle'),
      backgrounds           = screens.children('img'),
			numScreens 						= screens.size(),
			currentScreen         = 0,
			autoSlideTimer				=	null,
			btnPrevious           = $('#home > nav > .previous'),
			btnNext               = $('#home > nav > .next'),
			navEnabled            = true;
      
  //  public
  pro.initialize = function(opts) {
      setTimeout(initialize(), 500); 
  };
  
  //  private
  var initialize = function()
  {
			$('#loading').show();
			
			$('div#entryscreens > div > .entryscreen:last').onImagesLoaded(function(_this){
			
				initResize();
				initNav();
				initUtilsNav();
				initCirclesPosition();
				
			  disableButton(btnPrevious);
				enableButton(btnNext);
				
				$('#loading').hide();
				
			});
  }


  // resize management
  var initResize = function()
  {
      DOMWindow.bind('resize', resize);
      resize(null);
  };
  
  var resize = function ( e )
  {
      var scale     = 1,
          winSize   = { width: DOMWindow.width(), height: DOMWindow.height() },
          winRatio  = winSize.width / winSize.height,
          bgRatio   = BG_SIZE.width / BG_SIZE.height,
          newWidth  = 0;
      
      if ( winRatio > bgRatio ) scale = winSize.width / BG_SIZE.width;
      else                      scale = winSize.height / BG_SIZE.height;
      
      newWidth = BG_SIZE.width * scale;      
      backgrounds.css({
        'width' : Math.round(newWidth) + 'px',
        'left'  : Math.round(-(newWidth - winSize.width) / 2) + 'px'
      });
			circles.css('left', winSize.width / 2);
  };
  
  //  nav management
  var initNav = function() {
			
      links.bind('click', onNavLinkClick);
      // CSS TRANSITION
      if ( Modernizr.csstransitions ) {
				screens.last().delay(500).css('left', '0%');
				
				screens[screens.size()-1].addEventListener('webkitTransitionEnd', initAutoSlide, false);
				
      } else {
	      // JQUERY TRANSITION
				$(screens[screens.size()-1]).delay(300).animate({'left': '0%'}, function(){
					initAutoSlide();
				});
      }
  };
  
	// auto slide management
	var initAutoSlide = function ()
	{
		screens[screens.size()-1].removeEventListener('webkitTransitionEnd', initAutoSlide, false);

		autoSlideTimer = setTimeout(function(){
			
			$('#home > nav > a.next').trigger('click');
			
		}, 2500 );
		
	}
	
	// set circle position center
	var initCirclesPosition = function ()
	{
		var width = (DOMWindow.width() / 2);
		circles.css('left', width);	
	}
	
	var disableButton = function(button) {
			
			button.show();
			
      button.animate({
				opacity: 0.25
			}, 300);
			
			button.css('cursor', 'default');
  };

	var enableButton = function(button) {
		
			button.show();
		
      button.animate({
				opacity: 1
			}, 300);
			
			button.css('cursor', 'pointer');
  };
  var onNavLinkClick = function ( e )
  {
			//screens[screens.size()-1].removeEventListener('webkitTransitionEnd', initAutoSlide, false);
			clearTimeout(autoSlideTimer);
			
			if ( !navEnabled ) return;
			navEnabled = false;
	
			var link       = $(this),
          increment  = link.data('increment'),
          index      = 0,
          target     = null;
      
      index = currentScreen + Number(increment);
			index = ( index < 0 ) ? 0 : ( index > screens.size() - 1 ) ? screens.size() - 1 : index;
			
      if ( index == 0 )   disableButton(btnPrevious);
			else                enableButton(btnPrevious);

			if ( index == screens.size() - 1 )  disableButton(btnNext);
			else                                enableButton(btnNext);
			
			target = screens.eq(screens.size() - (index + 1));
      
      // CSS TRANSITION
      if ( Modernizr.csstransitions ) {
        
				if ( Number(increment) == 1 ) {
				  target.show();
				  target.next().css('width', '0%');
				  
				  setTimeout(function(){
				    target.next().hide();
				    navEnabled = true;
				  }, 750);
				  
				} else {
				  
				  target.show();
				  
				  setTimeout(function(){ // CSS transition hack. Transition won't happen without setTimeout(0)
				    target.css('width', '100%');
			    }, 10);
			    
			    setTimeout(function(){
			      target.prev().hide();
			      navEnabled = true;
			    }, 750);
				}

      } else {
	      // JQUERY TRANSITION
				if ( Number(increment) == 1 ) {
				  target.show();
				  target.next().animate({'width': '0px'}, 750, 'linear', function(){
				    target.next().hide();
				    navEnabled = true;
				  });
				} else {
					target.show();
					target.animate({'width': '100%'}, 750, 'linear', function(){
					  target.prev().hide();
					  navEnabled = true;
					});
				}
				
      }
      
      currentScreen = index;
  };

  //  utils nav management
  var initUtilsNav = function() {

		var show = setTimeout(showFacebookSlide, 200 );
		var hide = setTimeout(hideFacebookSlide, 4000 );
		
		facebookButton.bind('mouseover', function(){
			clearTimeout(show);
			clearTimeout(hide);
			showFacebookSlide();
		});
		facebookButton.bind('mouseout', function(){
			hideFacebookSlide();
		});
  };

	var showFacebookSlide = function() {
		facebookSlide.stop().animate({
			width: '370px'
		});
	};
  
	var hideFacebookSlide = function() {
		facebookSlide.stop().animate({
			width: '0px'
		});
	};
  
return pro })();