/**
 * Simple slideshow script for MrMuck.co.uk
 * 
 * http://www.exactwebsolutions.co.uk
 */

$(document).ready(function() {
	
	var $container = $('#promo-01');
	var $slideshow = $container.find('#slideshow');
	var $slides = $slideshow.find('li');
	
	var slidesCount = $slides.length;
	
	/*
	$container.append('<div id="slides-nav-bg">&nbsp;</div>');
	
	var $slidesNavBg = $container.find('#slides-nav-bg');
	$slidesNavBg.show();
	var width = (slidesCount * 27);
	$slidesNavBg.width(width);
	*/
	
	// create navigation.
	$container.append('<ul id="slides-nav"></ul>');
	var $slidesNav = $container.find('#slides-nav');
	for (var i=0; i < slidesCount; i++) {
		$slidesNav.append('<li>&bull;</li>');
	}
	
	// start slideshow.
	var timer = setInterval(function() {
		
		var $activeSlide = $slideshow.find('li.active');
		var index = $activeSlide.index();
		
		if (index == (slidesCount - 1)) {
			index = 0;
		} else {
			index += 1;
		}
		
		var $nextSlide = $slideshow.find('li').eq(index);
		
		$activeSlide.animate({'opacity' : 0}, 500, function() {
			$(this).removeClass('active');
		});
		
		$nextSlide.animate({'opacity' : 1}, 500).addClass('active');
		
		$slidesNav.find('li').removeClass('active');
		$slidesNav.find('li').eq(index).addClass('active');
		
	}, 4000);
	
	// make the navigation buttons work.
	$slidesNav.find('li:first').addClass('active');
	$slidesNav.find('li').each(function(i) {
		$(this).click(function() {
		
			clearInterval(timer);
		
			var index = $(this).index();
			var $nextSlide = $slides.eq(index);
			var $activeSlide = $slideshow.find('li.active');
			
			$activeSlide.animate({'opacity' : 0}, 500, function() {
				$(this).removeClass('active');
			});
			
			$nextSlide.animate({'opacity' : 1}, 500).addClass('active');
			
			$slidesNav.find('li').removeClass('active');
			$(this).addClass('active');
		});
	});
	
});