var projects = {};
projects[0]="TNT parcell service";
projects[1]="Resq online";
projects[2]="Fred Van Hove";
projects[3]="Care4Print";
projects[4]="The Vip Factory";
projects[5]="Basisschool Wonderwijzer";
projects[6]="Lambermonthotels";

var explains = {};
explains [0]="Door de goede samenwerking tussen Perfect Pixel en Care4Print als Print management partner konden we al enkele marketing campagnes voor TNT parcell service voor onze rekening nemen.";
explains [1]="Resq ... Perfext Pixel werd gevraagd om hun bestaande site zowel technisch, als grafisch te optimaliseren. Er werd uitgebreid gezocht naar de juiste 'look and feel'. De klant was zeer tevreden met het resultaat.";
explains [2]="Fred Van Hove heeft als pionier van de improvisatiemuziek een duidelijke visie. Perfect Pixel werd in 2011 gecontacteerd om deze visie grafisch vorm te geven. Dit resulteerde in de huidige website.";
explains [3]="Care4Print koos niet voor een traditionele eindejaarskaart. Samen met hen sloegen we een romantische weg in. Care4Print en Perfect Pixel werkten samen een romantische Valentijnsmailing uit. Een liefdesmailing met chocolade als eindresultaat!";
explains [4]="The Vip Factory is onze partner voor audiovisueel materiaal. Perfect Pixel werd ingeschakeld om hun creatieve aanpak door te trekken naar hun visitekaartjes en website.";
explains [5]="Basisschool Wonderwijzer had nood aan een volledige huisstijl. Na een aantal intense brainstormsessies, was Perfect Pixel in staat om een gepast concept, aangepast aan de behoeften van enerzijds de leerlingen en anderzijds hun ouders, te ontwikkelen.";
explains [6]="Na een grondige renovatie van het Lambermont hotel wilde het management de nieuwe stijl online als offline toegepast. lambermonthotels kwam zo bij Perfect Pixel terecht. Wij maakten de brug tussen hotel - website en een sfeervolle brochure.";


var images={};
images[0]="images/tnt/tnt_01.jpg;images/tnt/tnt_02.jpg;images/tnt/tnt_03.jpg";
images[1]="images/resqonline/resq_01.jpg;images/resqonline/resq_02.jpg;images/resqonline/resq_03.jpg";
images[2]="images/fredvanhove/fred_01.jpg;images/fredvanhove/fred_02.jpg;images/fred_03.jpg";
images[3]="images/care4print/care_01.jpg;images/care4print/care_02.jpg;images/care4print/care_03.jpg";
images[4]="images/vipfactory/vip_01.jpg;images/vipfactory/vip_02.jpg;images/vipfactory/vip_03.jpg";
images[5]="images/wonder/wonder_01.jpg;images/wonder/wonder_02.jpg;images/wonder/wonder_03.jpg;images/wonder/wonder_04.jpg";
images[6]="images/lambermont/lam_01.jpg;images/lambermont/lam_02.jpg;images/lambermont/lam_03.jpg;images/lambermont/lam_04.jpg;images/lambermont/lam_05.jpg";

var activeProject=0;
var max=6;
var busy=false;

$(document).ready(function(){
	LoadTitles();
});


function DoAnimate(nextorprev)
{

	if(nextorprev==0)
	{
		$("#frame3 img.text").animate({left: '-=12',top: '-=39',width: '-=47',height: '-=7'}, 300, function() {});
		$("#frame3 img.picture").animate({left: '-=2',top: '-=2',width: '-=66',height: '-=40'}, 300, function() {});
		$("#frame3").animate({top: '+=25',left: '+=35'}, 300, function() {
			
			$("#frame1").animate({left: '-=335'}, 300, function() {});
			$("#frame2").animate({left: '-=335'}, 300, function() {});
			$("#frame3").animate({left: '-=335'}, 300, function() {});
			

			$("#frame4").animate({left: '-=335'}, 300, function() {});
			$("#frame5").animate({left: '-=335'}, 300, function() {
			
				$("#frame4").animate({top: '-=25',left: '-=35'}, 300, function() {});
				$("#frame4 img.frame").animate({width: '+=70'}, 300, function() {});
				$("#frame4 img.picture").animate({left: '+=2',top: '+=2',width: '+=66',height: '+=40'}, 300, function() {});
				$("#frame4 img.text").animate({left: '+=12',top: '+=39',width: '+=47',height: '+=7'}, 300, function() {});
	

				
			});
			
	
		});
		
		
		
		$("#frame3 img.frame").animate({width: '-=70'}, 300, function() {});
	}
	else
	{
			$("#frame3 img.text").animate({left: '-=12',top: '-=39',width: '-=47',height: '-=7'}, 300, function() {});
			$("#frame3 img.picture").animate({left: '-=2',top: '-=2',width: '-=66',height: '-=40'}, 300, function() {});

			$("#frame3").animate({top: '+=25',left: '+=35'}, 300, function() {
			
			$("#frame1").animate({left: '+=335'}, 300, function() {});
			$("#frame2").animate({left: '+=335'}, 300, function() {});
			$("#frame3").animate({left: '+=335'}, 300, function() {});
			$("#frame4").animate({left: '+=335'}, 300, function() {});
			$("#frame5").animate({left: '+=335'}, 300, function() {
			
				$("#frame2").animate({top: '-=25',left: '-=35'}, 300, function() {});
				$("#frame2 img.frame").animate({width: '+=70'}, 300, function() {});
				$("#frame2 img.picture").animate({left: '+=2',top: '+=2',width: '+=66',height: '+=40'}, 300, function() {});
				$("#frame2 img.text").animate({left: '+=12',top: '+=39',width: '+=47',height: '+=7'}, 300, function() {});
	
			});
	
		
		});
		
		
		$("#frame3 img.frame").animate({width: '-=70'}, 300, function() {});

	}

}


function btnNext_Click()
{
 	if(!busy)
 	{
	 	busy=true;
	 	activeProject++;
	 	if(activeProject>max)
	 		activeProject=0;
		DoAnimate(0);
	 		
	 	setTimeout(ResetPositions,1000);
 	} 	
 	
}
function btnPrevious_Click()
{
 	if(!busy)
 	{
	 	busy=true;
	 	activeProject--;
	 	if(activeProject<0)
	 		activeProject=max;
	 	DoAnimate(1);
	 		
	 	setTimeout(ResetPositions,1000);
	}

}

function LoadTitles()
{
	
	var pos=activeProject;
			
	$("#frame3 div.framename").html(projects[activeProject]);
	LoadImages(3,pos);
	
	$("#textcontainer").html(explains[pos]);
	
	
	pos--;
	if(pos<0)
		pos=max;
		

	$("#frame2 div.framename").html(projects[pos]);
		LoadImages(2,pos);

	pos--;
	if(pos<0)
		pos=max;
		
	$("#frame1 div.framename").html(projects[pos]);
		LoadImages(1,pos);

	pos=activeProject;

	pos++;
	if(pos>max)
		pos=0;
		
	$("#frame4 div.framename").html(projects[pos]);
		LoadImages(4,pos);

	pos++;
	if(pos>max)
		pos=0;
		
	$("#frame5 div.framename").html(projects[pos]);
		LoadImages(5,pos);

	$("#frame3 a.fancy").fancybox();
	busy=false;

}
function LoadImages(frameNumber,arrayNumber)
{
	$("#frame" + frameNumber + " span").html("");
		
	var imageList=images[arrayNumber].split(';');
	for(i=0;i<imageList.length;i++)
	{		
		
		if(i==0)
		{
		
			$("#frame" + frameNumber + " img.picture").attr("src",imageList[i]);
			$("#frame" + frameNumber + " a").attr("href",imageList[i]);

		}
		else
		{
			$("#frame" + frameNumber + " span").html($("#frame" + frameNumber + " span").html() + "<a href=\"" + imageList[i] + "\" class='fancy' rel='" + frameNumber + "'></a>");
		}
	}
	
	
}
function ResetPositions()
{
	
	
	$("#frame1").css("top","35px");
	$("#frame2").css("top","35px");
	$("#frame3").css("top","10px");
	$("#frame4").css("top","35px");
	$("#frame5").css("top","35px");
	
	
	$("#frame1").css("left","-335px");
	$("#frame2").css("left","0px");
	$("#frame3").css("left","300px");
	$("#frame4").css("left","670px");
	$("#frame5").css("left","1005px");
	
	$("#frame1 img.frame").css("width","286px");
	$("#frame2 img.frame").css("width","286px");
	$("#frame3 img.frame").css("width","356px");
	$("#frame4 img.frame").css("width","286px");
	$("#frame5 img.frame").css("width","286px");
	
	
	$("#frame2 img.picture").css("width","273px");
	$("#frame3 img.picture").css("width","339px");
	$("#frame4 img.picture").css("width","273px");

	$("#frame2 img.picture").css("height","166px");
	$("#frame3 img.picture").css("height","206px");
	$("#frame4 img.picture").css("height","166px");
	
	$("#frame2 img.picture").css("top","8px");
	$("#frame3 img.picture").css("top","10px");
	$("#frame4 img.picture").css("top","8px")
	;
	$("#frame2 img.picture").css("left","6px");
	$("#frame3 img.picture").css("left","8px");
	$("#frame4 img.picture").css("left","6px");
	
	

	$("#frame2 img.text").css("width","199px");
	$("#frame3 img.text").css("width","246px");
	$("#frame4 img.text").css("width","199px");

	$("#frame2 img.text").css("height","31px");
	$("#frame3 img.text").css("height","38px");
	$("#frame4 img.text").css("height","31px");
	
	$("#frame2 img.text").css("top","159px");
	$("#frame3 img.text").css("top","198px");
	$("#frame4 img.text").css("top","159px")
	;
	$("#frame2 img.text").css("left","42px");
	$("#frame3 img.text").css("left","54px");
	$("#frame4 img.text").css("left","42px");

	//$("#frame2 div.framename").css("font-size","12px");
	//$("#frame3 div.framename").css("font-size","14px");
	//$("#frame4 div.framename").css("font-size","12px");

	LoadTitles();
	
	

}