var slideNumber = 1;

$(window).load(function() { 
	$("#vactive").html($("#vignete ul li.active").html());
	var numArray = [0,1,2,3];
	var randomnumber = numArray[Math.floor(Math.random() * numArray.length)];
	
	slideNumber = randomnumber + 1;
	
    arrangeBoxes(randomnumber);
	$("div.slidehide").remove();
    setInterval('shiftLeft()', 11000);
});

// arrange the boxes to be aligned in a row
function arrangeBoxes(stepnumber) {

	if(stepnumber == 0)
	{
		$("#slide1").css('left', '0px');
		$("#slide2").css('left', '907px');
		$("#slide3").css('left', '1814px');
		$("#slide4").css('left', '2721px');
	}
		
	if(stepnumber == 1)
	{
		$("#slide1").css('left', '2721px');
		$("#slide2").css('left', '0px');
		$("#slide3").css('left', '907px');
		$("#slide4").css('left', '1814px');
		$("#slide1").remove().appendTo('#slidewrap');	
	}
		
	if(stepnumber == 2)
	{
		$("#slide1").css('left', '1814px');
		$("#slide2").css('left', '2721px');
		$("#slide3").css('left', '0px');
		$("#slide4").css('left', '907px');
		$("#slide1").remove().appendTo('#slidewrap');
		$("#slide2").remove().appendTo('#slidewrap');
	}
		
	if(stepnumber == 3)
	{
		$("#slide1").css('left', '907px');
		$("#slide2").css('left', '1814px');
		$("#slide3").css('left', '2721px');
		$("#slide4").css('left', '0px');
		$("#slide1").remove().appendTo('#slidewrap');
		$("#slide2").remove().appendTo('#slidewrap');
		$("#slide3").remove().appendTo('#slidewrap');
	}

	vignette = stepnumber + 1;
	
	$("#action a.selectme").removeClass("selectme");
	$("#vignete ul li.active").removeClass("active");
	$("li#v" + slideNumber.toString()).addClass("active");
	$("#action a.v" + slideNumber.toString()).addClass("selectme");
	$("#vactive").html($("li#v" + slideNumber).html());
}

// shifts all the boxes to the left, then checks if any left the window
function shiftLeft() {
    $('#slidewrap .box, #vactive').animate({'left' : "-=907px"}, 700, 'linear', function() { checkEdge() });
}


// if the box is outside the window, move it to the end
function checkEdge() {
	
	if(slideNumber == 4)
	{
		slideNumber = 1;
	}
	else
	{
		slideNumber = slideNumber + 1;	
	}
	
	if(slideNumber == 1)
	{
		$("#slide1").css('left', '0px');
		$("#slide2").css('left', '907px');
		$("#slide3").css('left', '1814px');
		$("#slide4").css('left', '2721px');
	}
		
	if(slideNumber == 2)
	{
		$("#slide1").css('left', '2721px');
		$("#slide2").css('left', '0px');
		$("#slide3").css('left', '907px');
		$("#slide4").css('left', '1814px');
		$("#slide1").remove().appendTo('#slidewrap');	
	}
		
	if(slideNumber == 3)
	{
		$("#slide1").css('left', '1814px');
		$("#slide2").css('left', '2721px');
		$("#slide3").css('left', '0px');
		$("#slide4").css('left', '907px');
		$("#slide1").remove().appendTo('#slidewrap');
		$("#slide2").remove().appendTo('#slidewrap');
	}
		
	if(slideNumber == 4)
	{
		$("#slide1").css('left', '907px');
		$("#slide2").css('left', '1814px');
		$("#slide3").css('left', '2721px');
		$("#slide4").css('left', '0px');
		$("#slide1").remove().appendTo('#slidewrap');
		$("#slide2").remove().appendTo('#slidewrap');
		$("#slide3").remove().appendTo('#slidewrap');
	}
	
	vignette = $('#slidewrap .box:first').attr('rel');

	$("#action a.selectme").removeClass("selectme");
	$("#vignete ul li.active").removeClass("active");
	$("li#v" + slideNumber).addClass("active");
	$("#action a.v" + slideNumber).addClass("selectme");
	$("#vactive").html($("li#v" + slideNumber).html());
	
	$("#vactive").animate({'left' : "0"}, 700, 'linear');
}