var activeCtrl = null;
var nextCtrl = null;
var timer = -1;
var zIndex = 2; 

var container;	
var controlls;
var content;

function init()
{
	activeCtrl = $('li:first', controlls);
	activeCtrl.addClass('active');
	
	$('div', content).hide();
	
	var activeContent = getContent(activeCtrl);
	activeContent.css('z-index', zIndex).show();
	zIndex++;
	
	
	var select = $('.select', container);
	
	var ptop = activeCtrl.offset().top - container.offset().top;
	var pleft = activeCtrl.offset().left - container.offset().left; 
	
	select.css({left: pleft, top: ptop});
	select.show();
	
	$('a[href^=#]', controlls).each(function(){
		$(this).data('href', $(this).attr('href'));
		$(this).attr('href','');
				
		$(this).click(function(){						
			slide($(this).data('href'));	
			return false;								
		});	
	});
	
	//Preload images
	$('img', container).each(function(){
		var cache = new Image;
		cache.src = $(this).attr('src');
	});
}

function getContent(ctrl)
{
	return $('#'+ctrl.attr('id').replace('nav-', ''), content)
}

function getActive()
{
	var activeCtrl = $('li.active', controlls);	
	
	if (activeCtrl.length == 0)
		activeCtrl = $('li:first', controlls);
		
	return activeCtrl;
}

function getNext(activeCtrl)
{
	nextCtrl = activeCtrl.next();
	if (nextCtrl.length == 0)
		nextCtrl = $('li:first', controlls);
	
	return nextCtrl;
}

function slide(slideTo)
{
	clearTimeout(timer);
	
	activeCtrl = getActive(); 
	activeCtrl.removeClass('active');
	
	var activeContent = getContent(activeCtrl);
	

	if (slideTo)
	{
		nextCtrl = $(slideTo);				
	}
	else
	{
		nextCtrl = getNext(activeCtrl);			
	} 
	
	nextCtrl.addClass('active');
	var nextContent = getContent(nextCtrl);
	
	var select = $('.select', container);
	
	var top = nextCtrl.offset().top - container.offset().top;
	
	select.animate({top: top});
	
	
	zIndex += 1;
	nextContent.hide().css('z-index', zIndex).fadeIn(1000);
		
	if (slideTo)	
		timer = setTimeout("slide()", 20000);		
	else
		timer = setTimeout("slide()", 5000);
}

$(function(){
	container = $('.bannerSlider');	
	controlls = $('.controlls', container);
	content = $('.content', container);
	init();
	timer = setTimeout("slide()", 5000);	
});
