//config
var steps = 100;
var time = 6000;


//runtime variables
var step = 0;
var timeout = null;
var verStep;
var horStep;
var divOuterHeight;
var divOuterWidth;
var areaWidth;

var stoped = false;

$(document).ready(function(){

	initialize();
});

function initialize(){
	
	placeDivs(true);
	start();
}

function placeDivs(initialize){
	var div;
	var promoBoxes = $('.promoBox');
	
	promoBoxes.hover(function(){stop();}, function(){start();});
	
	areaWidth = $('#promoBoxes').width();
	
	for(var i=0; i<11; i++){
		if(promoBoxes.length == i) break;

		div = promoBoxes.eq(i);
		
		if (!divOuterHeight){
			divOuterHeight = div.outerHeight(true);
			divOuterWidth = div.outerWidth(true);
		}
		
		if(i<5){
			div.addClass('ver');
			div.removeClass('hor');
			div.css('top',i*divOuterHeight+'px');
		} else {
			div.addClass('hor');
			div.removeClass('ver');
			div.css('left',areaWidth-(i-3)*divOuterWidth+'px');
			div.css('top',4*divOuterHeight+'px');
		}
		
		if (initialize){
			//div.hide();
			//div.effect("highlight", {color: '#000000', mode: 'show'}, 3000);
		}
	}
	
	//calculating vertival step
	verStep = divOuterHeight / steps;
	
	
	//calculating horizontal step
	horStep = divOuterWidth / steps;

}


function start(){
	var promoBoxes = $('.promoBox');
	
	step++;
	
	for(var i=0; i<11; i++){
		if(promoBoxes.length == i) break;
		
		div = promoBoxes.eq(i);
		
		if(i<5){
			div.css('top',(i*divOuterHeight-verStep*step)+'px');
			//div.animate({top: (i-1)*divOuterHeight+'px'}, time-5, "linear");
		} else {
			div.css('left', (areaWidth-(i-3)*divOuterWidth+horStep*step)+'px');
			//div.animate({left: areaWidth-(i-4)*divOuterWidth+'px'}, time-5, "linear");
		}
	}

if(step == steps){
		moveDivs();
	} else {
		if(timeout != null){
			clearTimeout(timeout);
		}
		timeout = setTimeout('start()', time/steps);
		
	}

	
}

function stop(){
	clearTimeout(timeout);
}


function moveDivs(){
	$('#promoBoxes div:first').remove().appendTo('#promoBoxes');
	step = 0;
	
	placeDivs(false);
	
	start();
}