/*
 * A Simple slide show with fading transitions
 * Justin Longbottom
 * <justin@giantgoat.com>
 * Dec 16, 2010
 */

var current = 0;
var num;
var delay = 5000;

$(document).ready(function() {
	num = $('.slides img').length-1;	
	$('.slides img:gt(0)').hide();
	
	var width = $('.slides img').width();
	var height = $('.slides img').height();
	//alert(height);
	//$('#gallery').css({width:width});
	//$('.slides').css({width:width, height:height, position:'relative'});
	$('.slides').after('<div id="controls" style="float:right;"></div>');
	$('#controls').append('<a href="#" id="prev" style="float:left;padding:2px 5px;" onclick="prev();">&nbsp;</a>');
	$('#controls').append('<a href="#" id="next" style="float:right;padding:2px 5px;" onclick="skip();">&nbsp;</a>');

    var t;
	t = setInterval(function(){
			$('#'+current).fadeOut(1000);
			$('#control'+current).removeClass('active');
			current++;
			if(current > num) current = 0;
			$('#control'+current).addClass('active');
			$('#'+current).fadeIn(1000);
		}, delay);
		
	$('.slides img').each(function(index) {
		$(this).attr('id',index);
		$(this).css({position:'absolute',left:0,top:0});
		$('#controls').append('<a href="#" id="control'+index+'" style="float:left;padding:2px 5px;" onclick="skipTo('+index+',' + t + ');">'+(index+1)+'</a>');
	});
	
	$('#control'+current).addClass('active');
});

function skip() {
	$('#'+current).fadeOut(1000);
	$('#control'+current).removeClass('active');
	current++;
	if(current > num) current = 0;
	$('#control'+current).addClass('active');
	$('#'+current).fadeIn(1000);
}

function prev() {
	$('#'+current).fadeOut(1000);
	$('#control'+current).removeClass('active');
	current--;
	if(current < 0) current = num;
	$('#control'+current).addClass('active');
	$('#'+current).fadeIn(1000);
}

function skipTo(image, t) {
    // stop animation
    clearInterval(t);
    
	$('#'+current).fadeOut(1000);
	$('#control'+current).removeClass('active');
	current = image;
	$('#control'+current).addClass('active');
	$('#'+image).fadeIn(1000);
}