$(document).ready(function() {

	// array of slides
	var slides = $('#hero > li');

	// current slide
	var current = 0;
	var last = -1;
	
	// time
	var t = 8000; // interval hold time, must be greater than f*2
	var f = 250; // transition time

	function updateSwitcher () {
		if ( last != current ) {
			var rc = $("#slide-selector li").get(last);
			$(rc).removeClass('selected');
		}
		var ac = $("#slide-selector li").get(current);
		$(ac).addClass('selected');
		last = current;
	}

	function switchSlide () {
		updateSwitcher();
		var el = $('#hero > li').get(current);
		$(el).fadeIn(f).delay(t-2*f).fadeOut(f-50, function() {
			current < slides.length - 1 ? current++ : current=0;
		});
	}

	var firstSlide = setTimeout( function() {
		switchSlide();
		}, 0);
	var changeSlides = setInterval( function() {
		switchSlide();
	}, t);

	// on click of a selector
	$('#slide-selector li').click( function() {

		// stop rotating
		clearInterval(changeSlides);

		// fade out current
		if( $("#slide-selector li").index(this) != current ) {
			$('#hero > li').stop(true, true).fadeOut(f).delay(f);
		}

		// display selected
		$('#hero li.slide-' + ( $("#slide-selector li").index(this))).fadeIn(f);
		current = $("#slide-selector li").index(this);

		// updated switcher
		updateSwitcher();
	});
});