$(document).ready(function(){
	var timer;
	var banner_num = 1;
	
	function clickRotator(event) {
		var button_id = this.id;
		banner_num = parseInt(button_id.substring(6,button_id.length));
		$(".slide").css("visibility","hidden");
		$banner = $banners[banner_num-1];
		$("#"+$banner.id).css("visibility","visible");
		//$("#image"+banner_num).css("visibility","visible");
		//$("#counter").css("display","none");
		$("ul.buttons li").removeClass("active");
		$("#"+button_id).addClass("active");
		clearTimeout(timer);
		timer = setTimeout(resumeRotator, 4000);
	}
	function resumeRotator() {
		banner_num++;
		if (banner_num > $banners.length) banner_num = 1;
		
		$(".slide").css("visibility","hidden");
		$banner = $banners[banner_num-1];
		$("#"+$banner.id).css("visibility","visible");
		//$("#image"+banner_num).css("visibility","visible");
		//$("#counter").css("display","none");
		$("ul.buttons li").removeClass("active");
		$("#button"+banner_num).addClass("active");
		clearTimeout(timer);
		timer = setTimeout(resumeRotator, 4000);
	}	
	function initRotator(event) {
		$banner = $banners[0];
		$("#"+$banner.id).css("visibility","visible");
		clearTimeout(timer);
		timer = setTimeout(resumeRotator, 4000);
	}
	var $banners = $('.slide');
	var numbering_html = '';
	for (var i=1; i<=$banners.length; i++) {
		numbering_html += '<li';
		if (i==1) numbering_html += ' class="active"';
		numbering_html += ' id="button'+i+'"><a href="#" title=""><span class="text-number">'+i+'</span></a></li>';
	}
	$(".slideshow .buttons").html(numbering_html);
	for (var i=1; i<=$banners.length; i++) {		
		$('#button'+i).bind('click', clickRotator);
	}
	initRotator();
	
});