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

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

  //  Contants
  var BG_SIZE = { width: 1440, height: 846 };
      
  //  Variables
  var DOMWindow             = $(window),
      links                 = null,
			sublinks_container		= null,
			sublinks						  = null,
      link_close						= null,
			screensContainer      = null,
      screens               = null,		
      backgrounds           = null,
      currentScreen         = 0,
			autoSlide							= null,
      navEnabled            = true;
      
  //  public
  pro.initialize = function(opts) {
      initialize(); 
  };
  
  //  private
  var initialize = function()
  {
			initContent();
  }
	
	// init content
	var initContent = function()
	{
			
		window.location.hash = 'ambiance';
		
		$.ajax({
		  url: 'ambiance.php',
		  success: function(data) {
		    $('body').append(data);

				links                 = $('#ambiance > .nav > a.nav_link');
				link_next             = $('#ambiance > .nav > a.next');
				link_previous         = $('#ambiance > .nav > a.previous');
				sublinks_container	  = $('#ambiance > .nav-slideshow');
	      link_close						= $('#ambiance > .nav > a.close');
				screensContainer      = $('#photos');
	      screens               = screensContainer.children('.photo');
	      backgrounds           = screens.children('img');
	      
				initResize();
				screens.last().show();
				
				fadeOutOverlay();
		  }
		});
		
	};

  // fadeIn management
  var fadeInOverlay = function()
  {
      $('#overlay').remove();
  };

  // fadeOut management
  var fadeOutOverlay = function()
  {
			$('#overlay').fadeIn(500, function(){
				
				$('#ambiance').show(function(){
					initCircleNav();
					initNav();
					initClose();
				});	
				
				$('.wrap').hide();
				resize(null);
			});
			
			disableButton(link_previous);
			
			$('div#ambiance').onImagesLoaded(function(_this){

				$('#overlay').delay(800).fadeOut(500, function(){
					initAutoSlide();
				});

			});
  };
  
	var initAutoSlide = function()
  {
      autoSlide = setInterval(function(){
		    link_next.trigger('click');
		  }, 4000);
			
  };

  // 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' : newWidth + 'px',
        'left'  : -(newWidth - winSize.width) / 2 + 'px'
      });
  };

  //  nav circle management
	var initCircleNav = function() {
			for(var i = 0 ; i < screens.length ; i++){
				sublinks_container.append('<a style="display:none;" href="#ambiance" data-position="'+i+'"></a>');	
			}
			
			sublinks = sublinks_container.children('a');
			
			var delay = 20;
			
			sublinks.each(function(){
				$(this).delay(delay).fadeIn();
				delay += 100;
			});
			
			currentScreen = 0;
			selectCircle();
			
			sublinks.bind('click', onSublinkClick);
			
  };

	var onSublinkClick = function(e) {
		
			clearInterval(autoSlide);
			
			$('.photo.current').removeClass('current');
			
			var index = $(this).index();
			var target = screens.children().eq(screens.size() - 1 - index).parent();
			
			if( index == screens.size() - 1 ) disableButton(link_next);
			else enableButton(link_next);

			if( index == 0 ) disableButton(link_previous);
			else enableButton(link_previous);
			
			
			if(index < currentScreen) {

				target.show();
				target.addClass('current');
	      screens.not('.current').css({
					'display': 'none',
					'width': '0px'
				});
				currentScreen = $(this).index();
				
			} else {
				
				target.show();
				target.addClass('current');
	      screens.not('.current').css({
					'display': 'none'
				});
				currentScreen = $(this).index();
			}

			screens.each(function(){
				if($(this).index() > screens.size() - 1 - index){
					$(this).css('width', '0%');
				}else{
					$(this).css('width', '100%');
				}
			});

			selectCircle();
			
  };

  //  nav management
	var initNav = function() {
      links.bind('click', onNavLinkClick);
  };

	var onNavLinkClick = function ( e )
	{
	    if(e.originalEvent !== undefined) clearInterval(autoSlide);
		
			if ( !navEnabled ) return;
	    navEnabled = false;
	    
      var link       = $(this),
          increment  = link.data('increment'),
          index      = 0,
          target     = null;
     

      index = currentScreen + Number(increment);
			
			if( index >= screens.size() - 1 ) disableButton(link_next);
			else enableButton(link_next);

			if( index <= 0 ) disableButton(link_previous);
			else enableButton(link_previous);


      index = index < 0
              ? 0
              : index > screens.size() - 1
                ? screens.size() - 1
                : index;
      

      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;
     selectCircle();
	};
	
	var disableButton = function(button) {
		
			clearInterval(autoSlide);
		
      button.animate({
				opacity: 0.25
			}, 300);
			
			button.css('cursor', 'default');
  };

	var enableButton = function(button) {
      button.animate({
				opacity: 1
			}, 300);
			
			button.css('cursor', 'pointer');
  };
	
	var selectCircle = function()
	{
	   	sublinks_container.children('.current').removeClass('current');
	    sublinks_container.children().eq(currentScreen).addClass('current');
	};
  
  //  close management
	var initClose = function() {

      link_close.bind('click', function(){
	
				$('#overlay').fadeIn(600, function(){
					$('#ambiance').hide();
					$('#ambiance').remove();
					$('.wrap').show();
				});
				
				$('#overlay').delay(400).fadeOut(600, function(){
					$(this).remove();
				});

				clearInterval(autoSlide);

			});
  };



return pro })();