$(window).ready( function() {
	
	
	var image_well = $("div#image_well");
	
	var promos = $( "ul.promos li", image_well );
	var total_promos = promos.length;
	promos.hide();
	
	$( "ul.promos li:first", image_well ).show();
	var dock_navigation = $( "div.dock ul.navigation", image_well );
	
	
	//build out navigation
	promos.each( function() {
		var pulse = dock_navigation.append( "<li><a href='#'></a></li>" );
	});
	
	$("div.dock ul.navigation li a", image_well).click( on_pulse_click );
	
	//fuctioning arrows
	$("div.left_arrow").click(function() {
		stop_auto();
		setPause( $("div.play_pause") );
		next_promo( image_well );
		
	})
	
	$("div.right_arrow").click( function() {
		stop_auto();
		setPause( $("div.play_pause") );
		previous_promo( image_well );
	})
	
	var play_button = $("div.play_pause", image_well);
	play_button.addClass("pause");
	$("div.play_pause", image_well).click( function() {
		toggle_state( $(this) );
	})
	
	make_promo_active( 0 , image_well );
	
	// start_auto();
})

var current_index;
var timer;

var AUTO_INTERVAL = 11000;
var ANIMATION_TIME = 1000;
function start_auto() {
	
	timer = setInterval( function() { next_promo($("div#image_well")) }, AUTO_INTERVAL );
	
}

function stop_auto() {
	if( timer != undefined ) {
		clearInterval( timer );
	}
}

function setPause( el ) {
	if(el.hasClass("play")) {
		el.removeClass("play");
		el.addClass("pause");
	}
}

function setPlay( el ) {
	
	if( el.hasClass("pause")) {
		el.removeClass("pause");
		el.addClass("play");
	}
}

function toggle_state( el ) {
	if(el.hasClass("play")) {
		//pause
		next_promo($("div#image_well"))
		start_auto();
		setPause( el );
	}else if( el.hasClass("pause")){
		stop_auto();		
		setPlay( el );
	}
}

function on_pulse_click() {
	if(!$(this).parent("li").hasClass("active")) {		
		stop_auto();
		setPause( $("div.play_pause") );
		
		var index = $("div.dock ul.navigation li").index($(this).parent("li"));
		var image_well = $("div#image_well");
		clean_up_old_promo( current_index , image_well  );
		make_promo_active( index , image_well );
	}
}

function next_promo( container ) {

	var len = $( "ul.promos li", container).length;
	var new_index = ( current_index >= len-1 ) ? 0:current_index+1
	//alert( new_index );

	clean_up_old_promo( current_index , container , "right" );
	make_promo_active( new_index , container, "left" );
	
	
}

function previous_promo( container ) {
	var len = $( "ul.promos li", container).length;
	var new_index = ( current_index <= 0 ) ? len-1:current_index-1
	
	clean_up_old_promo( current_index , container, "left" );
	make_promo_active( new_index , container , "right");
}

function make_promo_active( index , container , direction ) {
	direction = direction || "left";
	
//	$("#debug").text( index );
	
	var promo = $( "ul.promos li" , container ).eq( index );
	promo.addClass("active");
	promo.css("zIndex", 10 );
 	$( "div.dock ul.navigation li", container ).eq(index).addClass("active");
	
	promo.fadeIn( ANIMATION_TIME );
	current_index = index
	
}

function clean_up_old_promo( index , container, direction ) {
	
	direction = direction || "right";
	var promo = $( "ul.promos li.active" , container );
	promo.css("zIndex", 20 );
//	alert(promo.length);
	//promo.hide();
	promo.fadeOut(ANIMATION_TIME );
	promo.removeClass("active");
	$( "div.dock ul.navigation li:active", container ).removeClass("active");
}