//set nextItem
var nextItem=-1;	
var rate = 700;
function autoCarousel(linkVar) {
	if(linkVar || linkVar==0){
		nextItem = linkVar-1;
	}
	//debug
	//$('#normal').html('linkVar: '+linkVar+' nextItem: '+nextItem);
	//fadeout
	$('#slidercontent').animate({opacity: 0.0}, rate, function() {
           //after fadeout
		   nextItem ++;
		   $('#panelnav div').removeClass("active");
		   // count items
		   var $items = $('#slidercontent div.slider');
		   if (nextItem>=$items.siblings().length){
			   nextItem =0;
			   }
			   itemY = 400*nextItem;
			   //offpage
			   $('#panel').scrollTo({top:itemY, left:'500px'},0);
			   $('#panel').scrollTo({top:itemY, left:'0px'},rate);
			   $('#slidercontent').animate({opacity: 1.0},rate);
			   $('#nav'+nextItem).addClass("active");
        });
}

jQuery(function($){
	
	//initial position and alpha on load
	$('#slidercontent').css({opacity: 0.0});
	
	//run Carousel automatically
	//int has global scope
	int = window.setInterval( "autoCarousel()", 15000 );
	autoCarousel();
	
	//create Nav
	var $navitems = $('#slidercontent div.slider');
	var $navhtml = "";
	for (i=0;i<$navitems.siblings().length;i++){
		$navhtml += '<div id="nav'+i+'"><a href="javascript:;" onClick="autoCarousel('+i+');clearInterval(int);"></a></div>';
		
	}
	$('#panelnav').html($navhtml);
	
	//scroll content on load
	//$('#panel').scrollTo({top:'0px', left:'500px'},0);
	//$('#panel').scrollTo({top:'0px', left:'0px'},900);
	//$('#slidercontent').css({opacity: 0.0})
        //.addClass('active')
        //.animate({opacity: 1.0}, 900);

});