var ABECK = ABECK || {};

$(function() {

	var			AB				=			{}
	,			_tOne			=			$('.tab-one')
	,			_tTwo			=			$('.tab-two')
	,			_sOne			=			$('.state-one')
	,			_sTwo			=			$('.state-two')
	,			_storyBtn		=			$('.storyboard-tab')
	,			_movieBtn		=			$('.movie-tab')
	,			_dur			=			400
	,			_v				=			0
	,			_sH				=			0
	,			_vid			=			document.getElementsByTagName("video")
	,			_opacity		=			$.support.opacity
	,			_hastransition	=			Modernizr.csstransitions
	,			_lightsOff		=			false
	,			_isOverview		=			$('body').hasClass('overview');


	//////////////////////////////////////////////////////////////////////////////
	// 																			//
	// 								Toggle Dood								    //
	// 																			//
	//////////////////////////////////////////////////////////////////////////////
		
	_tOne.click(function() {
		if($(this).parents('div').hasClass('sort')){
			$('.footer').fadeOut(_dur);
		
			
			$('.state-two, .footer').fadeOut(_dur, function() {
				_sOne.fadeIn(_dur);
				$('.footer').fadeIn(_dur);
			})
		}else{
			//overview page
			$('.state-two , .overview-wrap , .footer').fadeOut(_dur, function() {
				_sOne.fadeIn(_dur  );
			});
			
			$('.overview-wrap , .footer').fadeIn(_dur , s1.updateHeight);
			
		}
		
		$('.tabs li').removeClass('current-tab');
		$(this).addClass('current-tab');
		return false;
	});
		
	_tTwo.click(function() {
	
		if($(this).parents('div').hasClass('sort')){
		
			$('.footer').fadeOut(_dur);
		
			
			$('.state-one, .footer').fadeOut(_dur, function() {
				_sTwo.fadeIn(_dur);
				$('.footer').fadeIn(_dur);
			})
			
		}else{
			//overview page
			$('.state-one , .overview-wrap  , .footer').fadeOut(_dur, function() {
				_sTwo.fadeIn(_dur );
			});
			
			$('.overview-wrap , .footer').fadeIn(_dur , s2.updateHeight );
			
		}
		
		
		
		$('.tabs li').removeClass('current-tab');
		$(this).addClass('current-tab');
		return false;
	});

	//////////////////////////////////////////////////////////////////////////////
	
	
	
	//Featured rollover
	if(_hastransition && !Modernizr.touch){
	
		$('.feature').hover(function() {
				$('.feature-info', this).css({
					'bottom' : -$(this).height(),
					'opacity':0
				});
				
				$('.view').css({
					'bottom': $('.feature-info').height()/2,
					'opacity':1
				});
				
			},function() {
				
				//slide feature info back into view
				$('.feature-info', this).css({
					'bottom' : 0,
					'opacity':1
				});
				
				//slide view proj out of site
				$('.view').css({
					'bottom' : -200
				});
				
			});
	}else if (Modernizr.touch){//Disable hover on touch devices and just animate automatically
		
			$('.view').css({
				'bottom': ($('.feature-info').height()*2.5),
				'opacity':1
			});
				
		
	}else if(!_opacity || !_hastransition){ 
		var dur = 200;
		
		$('.grid-overlay, .view').css({'opacity':0});
		$('.project-link').hover(
			function() {
				$('.grid-overlay', this).stop().animate({'opacity':.6}, 300);
			}
		,	function() {
				$('.grid-overlay', this).stop().animate({'opacity':0}, 300);
			});
			
		$('.feature').hover(function() {
			
			$('.feature-info').animate({
				'bottom' : '-405px',
				'opacity':'0'
			}, dur*1.5);
			
			$('.view').animate({
				'bottom': ($('.feature-info').height()/2),
				'opacity':1
			}, dur*1.5);
			
		},function() {
		
			$('.feature-info').animate({
				'bottom' : 0,
				'opacity':1
			}, dur*1.5);
			
			
			
			$('.view').animate({
				'bottom' : -200
			}, dur*1.5);
		});
	}
	
	//////////////////////////////////////////////////////////////////////////////
	
	
	$('.lights').click(function() {
		
		if(_lightsOff === false){
			
			$('<div class="off-overlay"></div>').prependTo('body').fadeIn(500);
			$('.lights > p').removeClass('off').addClass('on');
			$('.work-big').addClass('light-grad');
			_lightsOff = true;
			
		}else if(_lightsOff === true){
		
			$('.off-overlay').fadeOut(500, function() {
				$(this).remove();
			})
			$('.lights > p').removeClass('on').addClass('off');
			$('.work-big').removeClass('light-grad');
			
			_lightsOff = false;
			
				
		}
	});


	$('.off-overlay').live( "click" , function() {
		
		$( '.off-overlay' ).fadeOut(500 , function() {
			$(this).remove();
		});
		
		$('.lights > p').removeClass('on').addClass('off');
		$('.work-big').removeClass('light-grad');
		_lightsOff = false;
	})

	//////////////////////////////////////////////////////////////////////////////
	
	
	//Initiate the work sliders
	
	if( $('.storyboard-content').length > 0 ){
		var s1 = ABECK.Slider( $('.storyboard-content') , false );
	
	}
	
	if( $('.movie-content').length > 0 ){
		var s2 = ABECK.Slider( $('.movie-content') , true );
	
	}
	
	
	
});



//////////////////////////////////////////////////////////////////////////////
// 																			//
// 							ABECK.Slider									//
// 																			//
//////////////////////////////////////////////////////////////////////////////


ABECK.Slider = (function( target , hasVid ){
	

	var pub = {};
	
	
	var _slider			=		this
	,	_target			=		target.find('.work-big')
	,	_thumb			=		target.find('.slide')
	,	_slideshow		=		target.find('.work-big ul')
	,	_slide			=		target.find('.work-big ul li')
	,	_next			=		target.find('.slide-next')
	,	_prev			=		target.find('.slide-prev')
	,	_moveIt			=		720
	,	_cur			=		0
	,	i				=		0
	,	_len			=		_slide.length
	,	_vid			=		document.getElementsByTagName("video")
	,	_hastransition	=		Modernizr.csstransitions
	,	_sWdt			
	,	_nextHeight
	,	_last
	,	_oldHeight;
	
		
	pub.guid = Math.floor(Math.random()*71787);
	
	function init( target ){
		
		if (Modernizr.touch){
			$('.ctrl').addClass('ctrl-touch');
		}
			
		_slide.first().fadeIn(500);		
		
		// Bind Click Events to the previous and next btns
		_next.bind( 'click', electricSlide );
		_prev.bind( 'click', electricSlide );
		$(window).bind( 'keyDown', electricSlide );
		
		
		if( hasVid ){
			
			if (Modernizr.video){
				$(_vid).bind('play', sliderUI );
				$(_vid).bind('pause', sliderUI );
			}
			if (Modernizr.touch){
			
				$('.movie-content .ctrl, .lights').hide();
				
			}
			
			$('.work-big').hover(
				
				function() { 
					$('.ctrl, .lights').stop().animate({'opacity': 1}, 500); 
				}
			 ,	function() { 
			 		
			 		if( _vid.length > 0 && !_vid[_cur].paused)			 		
			 		$('.ctrl, .lights').stop().animate({'opacity': 0}, 500);
			 		
			 		//if(!_vid[_cur].paused){
					 		//$('.ctrl, .lights').stop().animate({'opacity': 0}, 500); 
				 	//	}
			});
			
			_thumb.each(function(i) {
				$(this).attr('data-id',i) // Add a data attr so we can track the thumbs
			})
		
			_thumb.click(function() {
			
				if(!_vid.paused && _cur < _vid.length && Modernizr.video){
					//Then pause it when it slides (ONLY ON NEXT & PREV)
					_vid[_cur].pause();
				}
			
				
				_cur =	$(this).attr('data-id');
				shakeThatAss(); //Start Shakin' n Slidin'	
				pub.updateHeight();	
				
			});
			
		}
		
		shakeThatAss();
		pub.updateWidth();
		pub.updateHeight();
		
				
	}; 
	
	//Controls opacity of video UI
	function sliderUI() {
		
		if(_vid[_cur].paused === false){
			
			$('.ctrl, .lights').delay(400).animate({'opacity': 0}, 500);
			
		}else if(_vid[_cur].paused === true){
		
			$('.ctrl, .lights').animate({'opacity': 1}, 500);
			
		}
		
	};
	
	
	
	
	
	pub.updateHeight = function(){
			
			
			_nextHeight = _slide.eq(_cur).find('img , video').height();	
			
			if( _nextHeight < 1 ){
				setTimeout(function(){
					if(_nextHeight < 1){
						pub.updateHeight();
					}	
						
				},200);
			}else{
				
				$('.work-big').css({
					"height": _nextHeight
				});
				
			}
			
			
			//console.log(this.guid)	
		
			
					
	}	
	
	
	pub.updateWidth = function(){
		
		var _incW = 0;
		
		_slide.each(function(){
			_incW += $(this).width();
		});
	
		//=		_slide.width()*_len		
		_slideshow.css({
		
			"width": _incW
			
		});
	
	};
	
	
	function shakeThatAss() {
		
		_thumb.removeClass('current-slide');
				
		if(_hastransition){
		
			_slideshow.css({	
				// Shift slideshow to current left position
				'left' : -_moveIt * _cur
			});
			
		}else if(!_hastransition){
		
			_slideshow.animate({	
				// Shift slideshow to current left position
				'left' : -_moveIt * _cur	
			}, 333);	
		}
		
		//Adds Current slide class to whatever slide is shown
		_thumb.eq(_cur).addClass('current-slide');
		
		//Fades UI out when you are at first or last slide to ease confusion
		if( _len === 1 ){
			_prev.hide();
			_next.hide();
		}else if(_cur == 0 ){
			_prev.fadeOut(500);
			_next.fadeIn(500);
		}else{
			_prev.fadeIn(500);
			_next.fadeIn(500);
		}
		
	};	
	
	function electricSlide( evt ) {
		
		_last = _cur;
		
		// Set the target to be whichever arrow was clicked then pass it to the function
		var	target = $(evt.currentTarget).attr('class');
			
		//Check if current item is a video and if it is playing
		if(!_vid.paused && _cur < _vid.length && Modernizr.video){
		
			//Then pause it when it slides
			_vid[_cur].pause();
		}
		
		//Slider Current Item Logic
		//target === 'slide-next' ?  _cur < (_len-1) ? _cur++ : _cur = 0 : (_cur > 0 ) && _cur--;
		
		if ( target === 'slide-next' ){
			
			if( _cur < _len-1 ){
				_cur++
			}else{
				_cur = 0
			}
		
		}else if ( target === 'slide-prev' ){
		
			if( _cur > 0 ){
				_cur--
			}else{
				_cur = 0
			}
		
		}
		
		pub.updateWidth();	
		pub.updateHeight();
		shakeThatAss();
		
	}
	
	pub.disable = function(){
		//kill
	}
	
	init();
	return pub;
	
});