var timer;

var duration = 3000;

var cur = 1;

var total = 0;

var roation = 1000;

var running  = false;

$(document).ready(function(){
	
	total = $('#carousel div.item').length;
	
	timer = setInterval(rotate,duration);
	
	$('#fade-image').hide();
	
	//bind the btns!
	/*
	$('#carousel a.prev').click(function(){
		
		rotate(true,500);
		//redo timer!
		clearTimeout(timer);
		timer = setInterval(rotate,duration);
		return false;
		
	});
	
	$('#carousel a.next').click(function(){
		
		rotate(false,500);
		//redo timer!
		clearTimeout(timer);
		timer = setInterval(rotate,duration);
		return false;
		
	});
	*/
	//my tooltip functions!
	//$('#content').after('<div id="tooltip"></div>');
	
	//get the content for this then show the tip!
	//$('#tooltip').html($('#carousel div.item').first().find('p').html());
	
	$('#banner-image').hover(
			function(e){
				if (running === false ) {					
					var tip = $('#tooltip');
					tip.css('top',(e.pageY - tip.height()));
					tip.css('left',(e.pageX -(tip.width()/2)));
					tip.css('display','block');
				} else {
					//tip.css('display','none');
				}
			},
			function(e){
				//$('#tooltip').css('display','none');
			}
	);
	
	$('#banner-image').mousemove(function(e){
		//var tip = $('#tooltip');
		if (running === false ) {
			//tip.css('top',(e.pageY - tip.height()));
			//tip.css('left',(e.pageX -(tip.width()/2)));
			//tip.css('display','block');
		} else {
			//tip.css('display','none');
		}
	});
	
});

function rotate(prev,time) {
	
	if (running === true) {
		
		return false;
		
	} else {
		
		running = true;
		
	}
	
	if (typeof(time) == 'undefined') {
				
		time = roation;
		
	}
	
	if (prev === true) {
		
		if (cur == 1 ) {
			cur = total;
		} else {
			cur--;
		}
		
	} else {
	
		cur++;
	
	}
	
	if (cur > total) {
		
		cur = 1;
		
	}
	
	//show the image for that one... and apply the correct class!

	$('#carousel div.item').each(function(index) {
		
		var slide = $(this);
		
		if (index == (cur-1)) {
					
			//slide in the new image!
			
			slide.addClass('selected');
			
			var img = slide.find('img').attr('src');
			
			$('#fade-image').attr('src',img);
			
			//set the tooltip content!
			
			//get the content for this then show the tip!
			$('#tooltip').html(slide.find('p').html());
			
			$('#fade-image').fadeIn(time, function () {
				
				$('#banner-image').attr('src',img);
				$('#fade-image').addClass('hidden');
				$('#fade-image').hide();
				running = false;
				
	         });			
			
		} else {
			
			slide.removeClass('selected');
			
		}
		
	});
	
}