var frameheight=400;		//height of frame
var framewidth=770;			//width of frame
var thumbopacityOFF=0.3;	//opacity of thumbnail when not active
var thumbopacityON=0.8;		//opacity of thumbnail when active
var ActiveImage=0;			//starting value - records shown picture
var opacityImages = 0;		//starting value - records opacity of shown picture
var vitesse=5;				//speed of fading
var picsize=350;			//default width of shown pictures

var path="http://www.ivoeman.nl/fotos/";


var photo = new Array();
photo[1] = "busy.jpg";
photo[2] = "Expectation.jpg";
photo[3] = "Hope-I.jpg";
photo[4] = "Hope-II.jpg";
photo[5] = "Pregnant.jpg";
photo[6] = "Football-1.jpg";
photo[7] = "Football-2.jpg";
photo[8] = "Houterig-1.jpg";
photo[9] = "Confusion2.jpg";
photo[10] = "Marion-2.jpg";
photo[11] = "Marion-18.jpg";
photo[12] = "Paddler-1.jpg";
photo[13] = "Paddler-2.jpg";
photo[14] = "Paddler-3.jpg";
photo[15] = "Paddler-4.jpg";
photo[16] = "Reading.jpg";
photo[17] = "Somebody-I-long.jpg";
photo[18] = "Somebody-II-long.jpg";
photo[19] = "Stairs-1.jpg";
photo[20] = "Tiles.jpg";
photo[21] = "Sleepless-Path1.jpg";
photo[22] =  "Sleepless-Path2.jpg";
photo[23] =  "Running-2.jpg";
photo[24] =  "Running-1.jpg";
photo[25] =  "Running-5.jpg";
photo[26] =  "Running-4.jpg";
photo[27] =  "Running-3.jpg";

var Nphotos=photo.length-1;


//change order
var Order = new Array(1,9,5,23,24,25,26,2,10,11,3,4);


//series stores whether a picture will be shown together with preceding picture
var series = new Array();
for (i=1;i<=Nphotos;i++) {
 	series[i]=i;
	}
series[4]=3;
series[7]=6;
series[13]=12;
series[15]=14;
series[11]=10;
series[18]=17;
series[22]=21;
series[24]=23;
series[25]=23;
series[26]=23;
series[27]=23;


var OrderThumb = new Array();
n=1;
var NOrder=Order.length-1;
for (m=1; m<=NOrder; m++) {
	i = Order[(m-1)];
	if (series[i]==i) {OrderThumb[n]=i; n=n+1;};
	}
var NOrderThumb = OrderThumb.length-1;
for (i=1; i<=Nphotos; i++) {
	selected=0;
	if (series[i]==i & photo[i]!="") {
		for (j=1; j<=NOrderThumb; j++) {
			if (OrderThumb[j]==i) {selected=1;};
		}
		if (selected==0) {OrderThumb[n] = i; n=n+1};
	}
}

//sets the size of the shown pictures to default
var size= new Array();
for (i=1;i<=Nphotos;i++) {
 	size[i]=picsize;
	}
//enables to set specific size for images.
size[5]=.81*picsize;


//title that belongs to picture. sets default to '...'
var titlepic = new Array();
for (i=1;i<=Nphotos;i++) {
 	titlepic[i]="...";
	}
titlepic[1] = "busy busy busy";
titlepic[2] = "expectation";
titlepic[3] = "hope";
titlepic[9] = "confusion";
titlepic[21] = "insomnia";
titlepic[6] = "passion";
titlepic[8] = "constructed";
titlepic[10] = "curious";
titlepic[17] = "somebody";
titlepic[20] = "portrait of a dancer";
titlepic[23] = "hurry";



function ThumbnailPositions() {

var NThumbnails=0;
for (j=1; j<=Nphotos; j++) {
	if (series[j]==j & photo[j]!="") {
		NThumbnails=NThumbnails+1;
		}
	}
p=1;
/*
for (j=1; j<=Nphotos; j++) {
	if (series[j]==j & photo[j]!="") {
		PositionGrid("img"+j,p, NThumbnails);
		document.getElementById("img"+j).style.opacity=thumbopacityOFF;
		p=p+1
		}
	else {document.getElementById("img"+j).style.opacity=0;}
	}
*/
for (k=1; k<=NThumbnails; k++) {
	var j = OrderThumb[k];
		PositionGrid("img"+j,k, NThumbnails);
		document.getElementById("img"+k).style.opacity=thumbopacityOFF;
		}	

}

//alert(OrderThumb);

var timeOuts = new Array();




function showphoto(i) {
	if (ActiveImage!=i) {
		clearit();  //cancels running fades and reads opacity
		fadeout("shown", vitesse); //fade outs image(s)
		var start = vitesse*opacityImages+200;
		timeOuts[1]=setTimeout('NewImage(' + i + ')',start);
		fadein("shown", i, start , 2*vitesse);  //reads and fades in images(s)
		changeThumbnails(i); //changes active thumbnail
		ActiveImage=i; 
	}
	}





function Countseries(i) {
	count=0;
	for (k=i; k<=Nphotos; k++) {
		if (series[k]==i) count++;
	}
	ChangeSize(count, i);
}

function ChangeSize(count, i) {
	if (count==1) {
		pos=(framewidth-size[i])/2;
		ChangeLayout("",photo[i],size[i], pos, 0, 1);
		ChangeLayout(2,"", 0, 0, 0, 0);
		ChangeLayout(3,"", 0, 0, 0, 0);
		ChangeLayout(4,"", 0, 0, 0, 0);
		ChangeLayout(5,"", 0, 0, 0, 0);
		}
	if (count==2) { 
		pos1=(framewidth-size[i]*0.8-size[2]*0.8-100)/2;	
		pos2=framewidth-pos1-size[2]*0.8;	
		ChangeLayout("",photo[i],size[1]*0.8, pos1, 20, 1);
		ChangeLayout(2,photo[(i+1)],size[2]*0.8, pos2, 20, 1);
		ChangeLayout(3,"", 0, 0, 0, 0);
		ChangeLayout(4,"", 0, 0, 0, 0);
		ChangeLayout(5,"", 0, 0, 0, 0);
		}
	if (count==5) { 
		newsize=0.4*size[i];
		pos1=(framewidth-5*newsize-60)/2;	
		pos2=pos1+15+newsize;	
		pos2=pos1+15+newsize;	
		pos3=pos2+15+newsize;	
		pos4=pos3+15+newsize;	
		pos5=pos4+15+newsize;	

		ChangeLayout("",photo[i],newsize, pos1, 40, 1);
		ChangeLayout(2,photo[(i+1)],newsize, pos2, 60, 1);
		ChangeLayout(3,photo[(i+2)],newsize, pos3, 80, 1);
		ChangeLayout(4,photo[(i+3)],newsize, pos4, 60, 1);
		ChangeLayout(5,photo[(i+4)],newsize, pos5, 40, 1);
		}
}

function ChangeLayout(j, ph, w, l, t, b) {
   		document.getElementById("theimage"+j).style.position = "absolute"; 
		element= document.getElementById("theimage"+j);
		element.src=ph;	
		element.width=w;	
		element.style.left=l;
		element.style.top=t;
		element.border=b;	
}	
	

function NewImage(i) {
//	var picwidth = document.getElementById("img"+i).width;
	var newpos=document.getElementById("img"+i).style.left;
//	newpos=newpos+picwidth;
//	alert(newpos);
	document.getElementById("titlepicture").style.left=newpos;	
	document.getElementById("titlepicture").innerHTML=titlepic[i];
	Countseries(i);
	document.getElementById("theimage").src=photo[i];	
}


function changeThumbnails(i) {
	if (ActiveImage!=0) {
	document.getElementById("img"+ActiveImage).style.opacity=thumbopacityOFF;	
	document.getElementById("img"+ActiveImage).border=0;	
	}
	document.getElementById("img"+i).style.opacity=thumbopacityON;
	document.getElementById("img"+i).border=1;	
	
}


function fadeout(fadeid, vitesse) {
    
    var timer = 0;
		for(j = opacityImages; j >=0 ; j--) { 
            if (j<=opacityImages) {
            	timeOuts[j+102]=setTimeout("changeOpac('" + fadeid + "'," + j + ")",(timer * vitesse)); 
            }
			timer++; 
		}
}


function fadein(fadeid, i, start, vitesse) {
	var timer = 0; 		
		for(j = 0; j <=100 ; j++) {					
			timeOuts[j+2]=setTimeout("changeOpac('" + fadeid + "'," + j + ")",(timer * vitesse+start)); 
            timer++; 
		}
}


function changeOpac(fadeid, opacity) { 
	document.getElementById(fadeid).style.opacity=(opacity / 100);
	
}


function Position(id, l,t) {
   	document.getElementById(id).style.position = "absolute"; 
   	document.getElementById(id).style.left = l; 
   	document.getElementById(id).style.top = t;	
}

function PositionGrid(id, k, NThumbnails) {
	var gapwidthratio = 0.3;
	var picwidth = 0.9*framewidth/((1+gapwidthratio)*NThumbnails-gapwidthratio);
	var picgap = gapwidthratio*picwidth;
	picpos=(0.05*framewidth+(k-1)*(picwidth+picgap));
	//alert(picpos);
	Position(id, picpos ,360); 
	document.getElementById(id).width=picwidth;
	document.getElementById(id).heigth=picwidth/75*60;
	
}


function clearit() {
  for( key in timeOuts ){  
    clearTimeout(timeOuts[key]);  
	opacityImages=100*document.getElementById("shown").style.opacity;
  }  
}