var prevID=0;
var autoID=1;
var i=0;
var showImg={'display' : 'block', 'opacity' : '1.0', 'filter' : ''}
var hideImg={'display' : 'none' , 'opacity' : '0.0', 'filter' : ''}

function changeImg(id){
	if(id==1001){id=autoID;}else{autoID=id;}
	var $active = $("#sliderImg"+prevID);
	var $next =  $("#sliderImg"+id);
		$(".imgContainer DIV").removeClass("last-active")
		$active.removeClass('active').addClass('last-active');
		$("#slider #numbered a").removeClass("highlight");			
		$("#sliderLink"+id).addClass('highlight');
			$next.css({opacity: 0.0})
				.addClass('active')
				.animate({opacity: 1.0}, 1000);
	autoID++;
	if(autoID>=i){autoID=0;}	
	prevID=id;
}
	
jQuery().ready(function(){  
	var n = $("#slider .imgContainer DIV").length;
		$(".imgContainer DIV:first").addClass('active').css("opacity", "1");
		$(".imgContainer DIV").attr("id", function (arr) {
			return "sliderImg" + arr++;
		});
		while (i<n){
			num = i+1;
			$('#numbered').append("<a href=\"#\" id=\"sliderLink"+i+"\" onclick=\"changeImg("+i+"); return false;\" > "+num+" </a>  ");
			i++;
		}	
	$("#sliderLink0").addClass('highlight');
	setInterval("changeImg(1001)", 6000)
});