zoomFactor = 600; zoomDuration = 12000; currentPhoto = 0; currentText = 1; timeStamp = Date.now();
var item = [["communicatie","creatie","design.","Zó hoort uw nieuwe website gerealiseerd te worden!"],["Uw doel <i>niet scherp</i> meer?","juiste zaken","weer onder de aandacht","Dat is waar wij goed in zijn."],["Een nieuwe website","hoeft helemaal niet","duur te zijn","Soms is een opwaardering al voldoende."],["De aandachtstijd","voor een website","is gemiddeld 5 seconden","U kijkt nu al ~seconds~ seconden.<br>Benieuwd wat we nog meer voor u kunnen betekenen?"],["Volledige controle","of volledig uitbesteden?","We helpen u graag met kiezen.","Heeft u onze uiterst intuïtieve CMS al gezien?"],["Elementary Design"]];

function animation(){
	BGzoomIn();
	$(".textBig:eq(0)").text(item[0][0]); $(".textBig:eq(1)").text(item[0][1]); $(".textBig:eq(2)").text(item[0][2]); $(".textSmall").text(item[0][3]);
	$("#lineTop").delay(1500).animate({"width":"100%"}, 250, "linear", function(){
		$("#lineRight").animate({"height":"100%"}, 250, "linear", function(){
			$("#animation .BG img:first").fadeIn(1000).dequeue();
			$("#lineBottom").animate({"width":"100%"}, 250, "linear", function(){
				$("#lineLeft").animate({"height":"100%"}, 250, "linear", function(){
					animateText();
				});
			});
		});
	});
}
function BGzoomIn(){
	zoomingOut = false; zoomInItem = currentPhoto; imgLeft = $("#frontPage .BG img:eq(" + zoomInItem + ")").offset().left; imgTop = $("#frontPage .BG img:eq(" + zoomInItem + ")").offset().top; imgWidth = $("#frontPage .BG img:eq(" + zoomInItem + ")").width();
	$("#frontPage .BG img:eq(" + zoomInItem + ")").css({"height":"auto"}).animate({"left":"-=" + zoomFactor/2, "top":"-=" + zoomFactor/4, "width":"+=" + zoomFactor, "height":"auto"}, zoomDuration, "linear");
	$("#top .BG img:eq(" + zoomInItem + ")").css({"height":"auto"}).animate({"left":"-=" + zoomFactor/2, "top":"-=" + zoomFactor/4, "width":"+=" + zoomFactor, "height":"auto"}, zoomDuration, "linear");
	$("#animation .BG img:eq(" + zoomInItem + ")").css({"height":"auto"}).animate({"left":"-=" + zoomFactor/2, "top":"-=" + zoomFactor/4, "width":"+=" + zoomFactor, "height":"auto"}, {duration: zoomDuration, easing: "linear", step: function(now, fx){
		if (fx["pos"] > 0.9 && zoomingOut == false){
			zoomingOut = true;
			$("#frontPage .BG img:eq(" + zoomInItem + "), #top .BG img:eq(" + zoomInItem + "), #animation .BG img:eq(" + zoomInItem + ")").fadeOut(1000).dequeue();
			transition(); currentPhoto++; if(currentPhoto >= countPhotos){currentPhoto = 0;}
			BGzoomOut();
			$("#frontPage .BG img:eq(" + currentPhoto + "), #top .BG img:eq(" + currentPhoto + "), #animation .BG img:eq(" + currentPhoto + ")").fadeIn(1000).dequeue();
		}
	}, complete: function(){
		$("#frontPage .BG img:eq(" + zoomInItem + ")").css({"left":imgLeft, "top":0, "width":imgWidth});
		$("#top .BG img:eq(" + zoomInItem + ")").css({"left":imgLeft, "top":0, "width":imgWidth});
		$("#animation .BG img:eq(" + zoomInItem + ")").css({"left":imgLeft - $("#animation").offset().left, "top":imgTop - $("#animation").offset().top, "width":imgWidth});
	}});
}
function BGzoomOut(){
	zoomingIn = false; zoomOutItem = currentPhoto; imgLeft = $("#frontPage .BG img:eq(" + zoomOutItem + ")").offset().left; imgTop = $("#frontPage .BG img:eq(" + zoomOutItem + ")").offset().top; imgWidth = $("#frontPage .BG img:eq(" + zoomOutItem + ")").width();
	$("#frontPage .BG img:eq(" + zoomOutItem + ")").css({"left":"-=" + zoomFactor/2, "top":"-=" + zoomFactor/4, "width":"+=" + zoomFactor, "height":"auto"}).animate({"left":"+=" + zoomFactor/2, "top":"+=" + zoomFactor/4, "width":"-=" + zoomFactor}, zoomDuration, "linear");
	$("#top .BG img:eq(" + zoomOutItem + ")").css({"left":"-=" + zoomFactor/2, "top":"-=" + zoomFactor/4, "width":"+=" + zoomFactor, "height":"auto"}).animate({"left":"+=" + zoomFactor/2, "top":"+=" + zoomFactor/4, "width":"-=" + zoomFactor}, zoomDuration, "linear");
	$("#animation .BG img:eq(" + zoomOutItem + ")").css({"left":"-=" + zoomFactor/2, "top":"-=" + zoomFactor/4, "width":"+=" + zoomFactor, "height":"auto"}).animate({"left":"+=" + zoomFactor/2, "top":"+=" + zoomFactor/4, "width":"-=" + zoomFactor}, {duration: zoomDuration, easing: "linear", step: function(now, fx){
		if (fx["pos"] > 0.9 && zoomingIn == false){
			zoomingIn = true;
			$("#frontPage .BG img:eq(" + zoomOutItem + "), #top .BG img:eq(" + zoomOutItem + "), #animation .BG img:eq(" + zoomOutItem + ")").fadeOut(1000).dequeue();
			transition(); currentPhoto++; if(currentPhoto >= countPhotos){currentPhoto = 0;}
			BGzoomIn(); $("#frontPage .BG img:eq(" + currentPhoto + "), #top .BG img:eq(" + currentPhoto + "), #animation .BG img:eq(" + currentPhoto + ")").fadeIn(1000).dequeue();
		}
	}, complete: function(){
		$("#frontPage .BG img:eq(" + zoomOutItem + ")").css({"left":imgLeft, "top":0, "width":imgWidth});
		$("#top .BG img:eq(" + zoomOutItem + ")").css({"left":imgLeft, "top":0, "width":imgWidth});
		$("#animation .BG img:eq(" + zoomOutItem + ")").css({"left":imgLeft - $("#animation").offset().left, "top":imgTop - $("#animation").offset().top, "width":imgWidth});
	}});
}
function transition(){
	switch (Math.floor(Math.random() * 6)){
		case 0:	// butterfly horizontal
				$("#lineTop, #lineBottom").animate({"left":"50%", "width":"0"}, 500).animate({"left":"0", "width":"100%"}, 500);
				$("#lineLeft").animate({"left":"50%"}, 500).animate({"left":"0"}, 500); $("#lineRight").animate({"right":"50%"}, 500).animate({"right":"0"}, 500);
				$("#animation .BG").animate({"left":"50%", "width":"0"}, 500).animate({"left":"0", "width":"100%"}, 500);
				break;
		case 1:	// butterfly vertical
				$("#lineTop").animate({"top":"50%"}, 500).animate({"top":"0"}, 500); $("#lineBottom").animate({"bottom":"50%"}, 500).animate({"bottom":"0"}, 500);
				$("#lineLeft, #lineRight").animate({"top":"50%", "height":"0"}, 500).animate({"top":"0", "height":"100%"}, 500);
				$("#animation .BG").animate({"top":"50%", "height":"0"}, 500).animate({"top":"0", "height":"100%"}, 500);
				break;
		case 2:	//fly-out top
				$("#animation").animate({"top":"-2000"}, 500, function(){$(this).css({"top":"2000px"}).animate({"top":"0"}, 500);});
				break;
		case 3:	//fly-out right
				$("#animation").animate({"left":"3000"}, 500, function(){$(this).css({"left":"-3000px"}).animate({"left":"0"}, 500);});
				break;
		case 4:	//fly-out bottom
				$("#animation").animate({"top":"2000"}, 500, function(){$(this).css({"top":"-2000px"}).animate({"top":"0"}, 500);});
				break;
		case 5:	//fly-out left
				$("#animation").animate({"top":"2000"}, 500, function(){$(this).css({"top":"-2000px"}).animate({"top":"0"}, 500);});
				break;
	}
	$(".textBig").fadeOut(500); $(".textSmall").fadeOut(500, function(){
		if (item[currentText][0] == "Elementary Design"){
			$("#animation .BG").delay(1000).fadeOut(1000).delay(6000).fadeIn(1000); $("#animation #logoBig").delay(1000).fadeIn(2000);
			$(".textBig:eq(0), .textBig:eq(1), .textBig:eq(2)").text(""); $(".textSmall").text("");
		} else {
			smallText = item[currentText][3]; if (item[currentText][3].indexOf("~seconds~") > 0){smallText = item[currentText][3].replace("~seconds~", (Date.now() - timeStamp) / 1000 | 0);}
			$(".textBig:eq(0)").html(item[currentText][0]); $(".textBig:eq(1)").text(item[currentText][1]); $(".textBig:eq(2)").text(item[currentText][2]); $(".textSmall").html(smallText);
		}
		animateText(); currentText++; if (currentText >= item.length){currentText = 0;}
	}); $("#animation #logoBig").fadeOut(500);
}
function animateText(){
	$(".textBig:eq(0)").delay(1000).fadeIn(1000, function(){
		$(".textBig:eq(1)").delay(250).fadeIn(1000, function(){
			$(".textBig:eq(2)").delay(250).fadeIn(1000, function(){
				$(".textSmall").delay(1000).fadeIn(1000);
			});
		});
	});
};