$(function () {
	var featurette = $('#featurette');
	var navigation = $('#featurette .navigation a');
	var slides     = $('#featurette .slide');
	var shade      = $('#featurette .shade');
	var fadeSpeed  = 300;
	var lock       = false;
	var pause      = false;
	var hover_lock = false;
	var index      = false;
	var timeout    = undefined;

	var fadeInCallback = function () {
		$(slides).removeClass('active');
		var slide_image = $(slides.get(index)).addClass('active').find('.slide_image');
		slide_image.pngFix();
		slide_image.fadeIn(fadeSpeed - 10);
		$(shade).fadeOut(fadeSpeed, fadeOutCallback);
	};

	var fadeOutCallback = function () {
		lock = false;
	};
	
	var fade = function () {
		slides.filter('.active').find('.slide_image').fadeOut(fadeSpeed - 10);		
		shade.fadeIn(fadeSpeed, fadeInCallback);
	};
	
	var goToSlide = function (pos) {
		var pause = false;
		var link = $(navigation.get(pos));
		
		if (lock || link.hasClass('active')) {
			return false;
		}

		lock  = true;
		index = pos;
		navigation.attr('class', '');
		link.attr('class', 'active');

		fade();
	};

	navigation.click(function(){
		clearInterval(timeout);
		goToSlide(navigation.index($(this)));
		return false;
	});
	
	var totalSlides = navigation.length;
	var randomIndex = Math.ceil(Math.random() * totalSlides) - 1;
	goToSlide(randomIndex);
	
	// auto rotate
	timeout = setInterval(function(){
		if (pause) {
			return;
		}
		var pos = index + 1;
		if (pos >= totalSlides) {
			pos = 0;
		}
		goToSlide(pos);
	}, 5000);
	
	// pause on hover
	featurette.hover(
		function(){ pause = true;  }, 
		function(){ pause = false; }
	);
});