var counter = 1;
var newCounter = -1;
var currentFrame = 0;
var stopped = 0;
var animating = false;
var elementIdCounter = 0;
var tempElementIdCounter = -1;

/* ----- !!!!! Enkel deze variabelen aanpassen !!!!! ----- */
	var numberOfSlides 	= myDivs.length; // Het aantal slides aanwezig in de div
	var numberOfElements = 3; // Het aantal elementen in één slide
	var myDivsId 		= new Array(myDivs.length); // De te animeren Div, aanvullingen in het Engels gelijk met de name van de Divs in de lang_arrays bv.: #one, #two, #three, #four
	for(var x=0; x<myDivs.length; x++){
		myDivsId[x] = '#bg_'+(x+1);
	}
	var myElementsId 	= new Array(myDivs.length*numberOfElements);
	var myElementsTeller = 0;
	for(var y=0; y<myDivs.length; y++){
		for(var z=0; z<numberOfElements; z++){
			myElementsId[myElementsTeller] = '#slide_'+(y+1)+'_'+(z+1);
			myElementsTeller++;
		}
	}
	var myLinkId 		= new Array(myDivs.length);
	for(var w=0; w<myDivs.length; w++){
		myLinkId[w] = '#link_'+(w+1);
	}
	
	var randomScrollDownElementsBottom = 1500; // Minimum tijd dat de elementen wegscrollen
	var randomScrollDownElementsTop = 2500; // Maximum tijd dat de elementen wegscrollen
	var slider; // timer voor de slider

/* ----- !!!!! End Of aanpasbare zone !!!!! ----- */

/* ----- !!!!! Gelieve volgende functies niet aan te passen: onload, gotoNextSlide, changeDiv,changePickerBtn, beginAnimatePicker, endAnimatePicker, moveElements !!!!! ----- */
function doOnWindowResize(e){
	var loader_top_pos = (($("#homeflashContainer").height()/2)-12);
	var loader_left_pos = (($("#homeflashContainer").width()/2)-12);
	
	$("#home_loader").css("top",loader_top_pos+"px");
	$("#home_loader").css("left",loader_left_pos+"px");	
}
$(document).ready(function(){
	$(window).bind("resize",doOnWindowResize);
	
	var loader_top_pos = (($("#homeflashContainer").height()/2)-12);
	var loader_left_pos = (($("#homeflashContainer").width()/2)-12);
	
	$("#home_loader").css("top",loader_top_pos+"px");
	$("#home_loader").css("left",loader_left_pos+"px");
	
	$("#home_loader").fadeIn(300);
});
function randomXToY(minVal,maxVal,floatVal)
{
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  var returnVal = typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed(floatVal);
  //console.log(returnVal);
  return returnVal;
}

function moveElements(){
	
	for( i=0 ; i < numberOfElements ; i++){
		$("#homeflash").append(myElements[counter][i]);	
	}
	
	if (elementIdCounter == ((numberOfElements*numberOfSlides)-3)){elementIdCounter = 0;}
	else{elementIdCounter += numberOfElements;}
	
	for( i=0 ; i < numberOfElements ; i++){
		$(myElementsId[elementIdCounter+i]).css("top","-500px");
		$(myElementsId[elementIdCounter+i]).animate({top:"0px"}, timeOfAnimationElement[counter][i], function(){});
	}
	
	if(elementIdCounter ==0){elementIdCounter=((numberOfElements*numberOfSlides)-3);}
	else{elementIdCounter -= numberOfElements;}
	
	$(myElementsId[elementIdCounter]).animate({top:"700px"}, randomXToY(randomScrollDownElementsBottom,randomScrollDownElementsTop));
	$(myElementsId[elementIdCounter+1]).animate({top:"700px"}, randomXToY(randomScrollDownElementsBottom,randomScrollDownElementsTop));
	$(myElementsId[elementIdCounter+2]).animate({top:"700px"}, randomXToY(randomScrollDownElementsBottom,randomScrollDownElementsTop), function(){
	  $(myElementsId[elementIdCounter]).remove();
	  $(myElementsId[elementIdCounter+1]).remove();
	  $(myElementsId[elementIdCounter+2]).remove();
	  if(elementIdCounter == ((numberOfElements*numberOfSlides)-3)){elementIdCounter=0;}
	  else{elementIdCounter += numberOfElements;}	
	  endAnimatePicker();
	});
}

function moveElementsWithVar(clickedValue){
	
	for( i=0 ; i < numberOfElements ; i++){
		$("#homeflash").append(myElements[clickedValue][i]);
	}
	
	tempElementIdCounter = elementIdCounter;
	elementIdCounter = clickedValue * numberOfElements;
	
	for( i=0 ; i < numberOfElements ; i++){
		$(myElementsId[elementIdCounter+i]).css("top","-500px");
		$(myElementsId[elementIdCounter+i]).animate({top:"0px"}, timeOfAnimationElement[clickedValue][i], function(){});
	}
	
	$(myElementsId[tempElementIdCounter]).animate({top:"700px"}, randomXToY(randomScrollDownElementsBottom,randomScrollDownElementsTop));
	$(myElementsId[tempElementIdCounter+1]).animate({top:"700px"}, randomXToY(randomScrollDownElementsBottom,randomScrollDownElementsTop));
	$(myElementsId[tempElementIdCounter+2]).animate({top:"700px"}, randomXToY(randomScrollDownElementsBottom,randomScrollDownElementsTop), function(){
	  $(myElementsId[tempElementIdCounter]).remove();
	  $(myElementsId[tempElementIdCounter+1]).remove();
	  $(myElementsId[tempElementIdCounter+2]).remove();
	  endAnimatePicker();
	});
}

function changeDiv(e){
	e.preventDefault();
	
	var clickedValue = e.data.link_index;
	
	if(animating == false  && (clickedValue != newCounter || clickedValue != currentFrame || newCounter == -1)){	  
	  // Reset picker 
	  changePickerBtn(clickedValue);
		
	  // Stop the tick event
	  if(stopped == 0){clearInterval(slider);}
	  
	  // Append new and sign top value
	  $("#homeflash").append(myDivs[clickedValue]);
	  $(myDivsId[clickedValue]).css("top","-497px");
	  
	  moveElementsWithVar(clickedValue);
	  
	  beginAnimatePicker();
	  
	  // Animate the new Div and onComplete remove the previous
	  $(myDivsId[clickedValue]).animate({top:"0px"}, timeOfAnimation, function()
	   { 
		   // If tick event not yet stopped remove previous in cycle
		   if(stopped == 0){
				if(counter==0){$(myDivsId[numberOfSlides-1]).remove();}
				else{$(myDivsId[counter-1]).remove();}
		   }
		   // Else remove the new assigned
		   else{$(myDivsId[newCounter]).remove();}
		   newCounter = clickedValue;
		   stopped=1;
	   });
	  
	  // If tick event not yet stopped --> Animate previous image
	  if(stopped == 0){  
		  if(counter==0){$(myDivsId[numberOfSlides-1]).animate({top:"497px"}, timeOfAnimation );}
		  else{$(myDivsId[counter-1]).animate({top:"497px"}, timeOfAnimation);}		
	  }
	  else{$(myDivsId[newCounter]).animate({top:"497px"}, timeOfAnimation );}
	  
	}
}
function gotoNextSlide() {
	// Reset picker
	changePickerBtn(counter);
	
	// Append new and sign top value
	$("#homeflash").append(myDivs[counter]);
	$(myDivsId[counter]).css("top","-497px");
	
	moveElements();
		
	currentFrame = counter;
	
	beginAnimatePicker();
	
	// Animate the new Div and onComplete remove the previous
	$(myDivsId[counter]).animate({top:"0px"}, timeOfAnimation, function()
	 {
		if(counter==0){$(myDivsId[numberOfSlides-1]).remove();} else{$(myDivsId[counter-1]).remove();}
		if(counter<numberOfSlides-1){counter++;} else{counter=0;}	
	 });
	
	// Animate the old Div at the same time as the new Div
	if(counter==0){$(myDivsId[numberOfSlides-1]).animate({top:"497px"}, timeOfAnimation );}
	else{$(myDivsId[counter-1]).animate({top:"497px"}, timeOfAnimation);}
}

function changePickerBtn(counter){
	// Remove class from previous link
	for ( i = 0 ; i < numberOfSlides ; i++){$(myLinkId[i]).removeClass('active');}
		
	// Append class for linkBtn
	$(myLinkId[counter]).addClass('active');	
}

function beginAnimatePicker(){animating = true;}
function endAnimatePicker(){animating = false;}

window.onload = function(){
	//
	for( i=0 ; i < numberOfSlides; i++){
		$("#linkContainer").append('<a id="'+myLinkId[i].replace("#","")+'" href="#">'+(i+1)+'</a>');
	}
	
	$.each($("#linkContainer a"),function(index){
		$(this).bind("click",{link_index:index},changeDiv);
	});
	
	$("#picker").css("width",12 * numberOfSlides + 8 +"px");
	$("#picker").css("margin-left",475 - (12 * numberOfSlides + 8) +"px");
	
	$(myLinkId[0]).addClass('active');
	$("#homeflash").append(myDivs[counter-1]);
	
	for( i=0 ; i < numberOfElements ; i++){
		$("#homeflash").append(myElements[0][i]);	
		$(myElementsId[i]).css("top","-500px");
		$(myElementsId[i]).animate({top:"0px"}, timeOfAnimationElement[counter-1][i], function(){});
	}
	
	if(numberOfSlides > 1){
		slider = setInterval(gotoNextSlide, timeOfSlide);	
	}
	
	$("#home_loader").fadeOut(300,function(){
		$(window).unbind("resize",doOnWindowResize);
	});
	$("#homeflash").fadeIn(1000);
}