var $promoSlider
var $buttonContainer;
var $buttons;
var $slideContainer;
var $slides;
var currentSlideNo = 0;

var numSlides = 0;

var slideInterval;
var slideDuration = 7000; //higher = slower, in MS
var animationDuration = 2000;
var easingType = 'easeInOutQuart'; //http://gsgd.co.uk/sandbox/jquery/easing/
var isAnimating = false;
var nextSlide;	//set when user clicked a button but the slider was still animating
//easeInOutBack

$(function(){
	$promoSlider = $('#promoslider');

	if($promoSlider.length == 1){	//only start this whole mess if exactly ONE promoslider is present

		$buttonContainer = $('#promoslidernav');
		$buttons = $('#promoslidernav .promosliderbutton');
		$slides = $('#promoslidercontainer .promosliderslide');
		$slideContainer = $('#promoslidercontainer');
		numSlides = $slides.length;

		//add an onclick to all the slides, get the destinations from the A tags in the buttons
		$slides.each(function(){
			$(this).click(function(){
				window.location = $(this).children('a').attr('href');
			});
		});

		//remove the LINK and H1 from all the buttons, they are for seo only and look like complete and utter crap
		$buttons.empty();

		//add a dark overlay to all the buttons, except for the first
		setActiveButton(currentSlideNo);

		//move all the slides, except for the first, to the right, where they can't be seen
		$slides.not(':first').each(function(){
			$(this).css('left', $slideContainer.css('width'));
		});

		//add a hover effect to the buttons (show slide)
		$buttons.mouseover(function(){
			index = $buttons.index($(this));
			setActiveButton(index);
			showSlide(index);
		});

		//add a click effect (go to target) to buttons
		$buttons.click(function(){
			index = $buttons.index($(this));
			$slide = $slides.eq(index);
			window.location = $slide.children('a').attr('href');
		});

		//add the overlay again when user hovers out of the navbar
		$buttonContainer.hover(function(){
			//nothing, but .mouseout triggers on every button hover =S
		}, function(){
			if(!nextSlide){
				setActiveButton(currentSlideNo);
			}
		});

		//timeout instead of interval because its easier to have some sort of callback attached to it that way (in the called function)
		slideInterval = setInterval("showSlide()", slideDuration);

		//clear the timeout (stop rotation) when hovering over the entire div
		$promoSlider.hover(function(){
			clearInterval(slideInterval);
		}, function(){
			slideInterval = setInterval("showSlide()", slideDuration);
		});
	}
});

//if a slide is passed, show it. Otherwise show the next slide
function showSlide(ID){
	if(isAnimating){
		nextSlide = ID;
	}else{
		var oldSlideNo = currentSlideNo;
		if(ID == null && !nextSlide){
			ID = (currentSlideNo >= numSlides - 1) ? 0 : currentSlideNo + 1;
		}else if(nextSlide){
			ID = nextSlide;
			nextSlide = null;
		}

		if(ID != currentSlideNo){
			setActiveButton(ID);

			$slide = $slides.eq(ID);
			$oldSlide = $slides.eq(oldSlideNo);

			$slide.css('left', $slideContainer.css('width'));
			isAnimating = true;
			$oldSlide.animate({left: '-' + $slideContainer.css('width')}, animationDuration, easingType);
			$slide.animate({left: 0}, animationDuration, easingType, function(){animatingStopped();});

			currentSlideNo = ID;
		}
	}
}

function setActiveButton(ID){
	$buttons.html("<div class='promosliderbuttondark'></div>");
	$buttons.eq(ID).empty();
}

function animatingStopped(){
	isAnimating = false;
	if(nextSlide){
		showSlide(nextSlide);
		nextSlide = null;
	}
}