$(document).ready(function(){

	
	//set speed
	var speed = 2;// in seconds
	speed = speed * 1500;

	//hiding graybox 
	$('#article-slider .grayBox').hide();
	//activate first paging li
	//activate($('#article-slider .paging ul li:first'));
	activate($('#article-slider .paging ul li:first'));//.addClass('active')
	$('#article-slider .grayBox').fadeIn('slow');
	//auto activate next li
	var interval = setInterval ( "rotata()", speed );
	$('#article-slider').mouseout(function(){$('#article-slider .paging .picker').stop(true, true)});
	$('#article-slider .paging ul li a').mouseover(function(){
		activate($(this).parent()); //grow parent li
		clearInterval(interval);		
	});	

	$('#article-slider .paging ul li a').mouseout(function(){
		//rotata();
		interval = setInterval ( "rotata()", speed );		
	});	

});



function rotata()
{
	//select next li
	var next = $('#article-slider .paging ul li.active').next();
	// if last, next is first
	if (next.length===0)
		next = $('#article-slider .paging ul li:first');
	activate(next);
}

function activate(target)
{
	var page = target.children('a').attr('rel') - 1;//index start at zero [half hour to figure this out :( ]
	var pickerTop = page * 52; //81 is pageing li hieght, plz make me get hight automatically!
	$('#article-slider .paging .picker').animate({top: pickerTop},{ duration: 200, queue: true,easing:'linear', complete: function(){
		deavtivateAll(); // remove active from other
		target.addClass('active');
		$('.grayBoxContainer').html(target.children('.intro').html());
	}});
	//fix = page*2;//more two pixels for each image
	//deside where to scroll?
	//top: page number * window height
	var windowHeight = $('#article-slider .window').height();
	var newTop = (page * windowHeight);// + fix;
	//alert(windowHeight);
	$('#article-slider .window .image-items').animate({top: -newTop},{ duration: 200, queue: false },function(){
		$('#article-slider .grayBox').fadeIn('slow');
	});	
}

function deavtivateAll()
{
	$('#article-slider .paging ul li').each(function(i){
		$(this).removeClass('active');
	});
	$('#article-slider .grayBox').fadeOut('slow');
}