var $lis;
var $preload;
var $showcase;
var timer;

function animate(span) {
	var a = number;
	if (span != undefined) {
		number = span;
		clearInterval(timer);
		timer = setInterval('animate()',3000);
	} else {
		if (++number >= $lis.length) {
			number = 0;
		}
	}
	var b = number;

	$preload.css({opacity:0, background:'url(' + $lis.eq(b).find('img').attr('src') + ')'}).animate({opacity:1},'slow',function() {
		$showcase.css('background',$preload.css('background'));
		setTimeout("$preload.css({opacity:0})",100);
	});

	$lis.each(function(index) {
		var $li = jQuery(this);
		var w = index == number ? '562px' : '51px';
		if (index <= number) {
			$li.stop().animate({left:index * 51, width:w},'slow');
		} else {
			$li.stop().animate({left:index * 51 + 512, width:w},'slow');
		}

	$lis.eq(a).removeClass('active');
	$lis.eq(b).addClass('active');
	});
}

var number = 0;
jQuery(document).ready(function() {
	$showcase = jQuery('div#showcase');
	$showcase.css({height:'292px'});
	$preload = jQuery('<div id="preload"></div>').prependTo($showcase);
	$showcase.find('ul').css({position:'absolute', top:'242px', height:'50px'});
	$lis = $showcase.find('li');
	$lis.css({display:'block', position:'absolute', top:'0', height:'50px'});
	$lis.find('img').hide();
	$lis.each(function(index) {
		var $li = jQuery(this);
		var $span = jQuery('<span>' + (index+1) + '</span>').prependTo($li);
		$span.bind('click',function() {
			animate(index);
		});
		if (index == 0) {
			$li.css({left:0, width:'562px'});
			$li.removeClass('show').addClass('active');
		} else {
			$li.css({left:(index*51) + 512, width:'51px'});
		};
	});
	$lis.find('div').css({marginLeft:'51px'});

	$showcase.css({background:'url(' + $lis.eq(0).find('img').attr('src') + ')'});

	timer = setInterval('animate()',3000);
});