jQuery(function($){
	var animateDuration = 1000; // milliseconds
	var animateEasing = 'easeInOutQuart';
	var autoRotateDelay = 5000; // milliseconds
	var $touts = $('#hero-touts .tout');
	var toutWidth = $touts.width();
	var selectedToutNode;
		
	var $nav = $('#hero-touts .nav');
	var $navBtns;
	var selectedNavBtnNode;
	
	var isAnimating;
	var autoRotateId;
	
	init();
	
	function init(){
		// create nav btns
		for(var i = 0, len = $touts.length; i < len; i++){
			var $btn = $('<li class="nav-btn"><span></span></li>');
			if(i == 0) $btn.addClass('first');
			if(i == len - 1) $btn.addClass('last');
			
			// data association
			$btn.attr('data-idx', i);
			
			$btn.click(navBtnClickHandler);
			$nav.append($btn);
		}
		$navBtns = $nav.find('.nav-btn');	
		
		// set initial location offscreen
		$touts.css('left', toutWidth);
		$touts.click(toutClickHandler);
		
		// select first tout
		selectToutByIndex(0, false);
		
		// start auto rotation
		autoRotateId = setInterval(function(){
			if(isAnimating) 
				return;
			
			var idx = getIndexFromNavBtn(selectedNavBtnNode);
			selectToutByIndex(++idx == $touts.length ? 0 : idx);
		}, autoRotateDelay);
	}
	
	function getIndexFromNavBtn(node){
		return $(node).attr('data-idx');
	}
		
	function navBtnClickHandler(event){
		if(isAnimating) 
			return;
		
		if(autoRotateId) 
			clearInterval(autoRotateId);
			
		selectToutByIndex(getIndexFromNavBtn(event.currentTarget));
	}
	
	function toutClickHandler(event){
		$tout = $(event.currentTarget);
		window.location.href = $tout.find('.cta-btn').attr('href');
	}
	
	function animateCompleteHandler(event){
		isAnimating = false;
	}
	
	function selectToutByIndex(idx, animate){
		console.log('idx:', idx);
		setSelectedTout($touts[idx], animate);
		setSelectedNavBtn($navBtns[idx]);
	}
	
	function setSelectedTout(node, animate){
		if(node == selectedToutNode) 
			return;
			
		animate = animate == null ? true : animate;
		
		isAnimating = animate;
		
		if(selectedToutNode){
			var $selectedTout = $(selectedToutNode);
			if(animate){
				$selectedTout.css('left', 0);
				$selectedTout.animate({left:toutWidth * -1}, animateDuration, animateEasing);
			}else{
				$selectedTout.css('left', toutWidth * -1);
			}
		}

		var $node = $(node);
		if(animate){
			$node.css('left', toutWidth + 1);
			$node.animate({left:0}, animateDuration, animateEasing, animateCompleteHandler);
		}else{
			$node.css('left', 0);
		}
			
		selectedToutNode = node;
	}
	
	function setSelectedNavBtn(node){
		if(node == selectedNavBtnNode) 
			return;
		
		if(selectedNavBtnNode)
			$(selectedNavBtnNode).removeClass('selected');
		
		$(node).addClass('selected');
		selectedNavBtnNode = node;
	}
});