// Copyright Potato Die 2010

window.onload= function ()
{
	bouwToneel();
	laadFotoLijst ( bestof );
	fixMenu();
	fixLogo();
}

var dir = "photographs/NIEUW/";	// Locatie map met foto's
var muisOver = false;
var intervalID = null;

var snelheid = 1; // Snelheid waarmee pan van rechterkant beweegt (in pixels)
var callRate = 10;


function Foto ( bestandsNaam, beschrijving ) {
	this.bestandsNaam = bestandsNaam;
	this.beschrijving = beschrijving;
	this.plaatje = new Image();
}

var fotoos;
function laadFotoLijst ( lijst )
{
	fotoos = new Array();
	for ( var i = 0; i < lijst.length; i++ )
	{
		fotoos[i] = new Foto ( lijst[i][0], lijst[i][1]);
	}
	fotoos.permute();
	
	// Start de cyclus van het laden van alle afbeeldingdata.
	// Pan start wanneer eerste afbeelding geladen is
	initPlaatje(0);
}

function startPan()
{
	// Muis is niet boven 1 van de foto's
	// Bovendien controleren op of de pan al niet aan de gang is.
	if ( !muisOver && !intervalID ){
		intervalID = window.setInterval( "pan( )", callRate );
	}
}

function stopPan() {
	if ( intervalID ){
		window.clearInterval( intervalID );
		intervalID = null;
	}
}

// 'Constructor' panElement. Voegt div toe aan DOM
function createPanElement ( index ) 
{
	// Maak een slide-div
	var e = document.createElement("div");
//	e.id = "divElem" + index;
	e.index = index;	// Om vanuit childNode te kunnen kijken bij welk panElement het hoort
	e.style.position = 'absolute';
	
	e.style.top = '0px'; 
	e.style.left = ((index == 0) ? toneelBreedte : -2000 ) + 'px';
	
	var newImg = document.createElement("img");
	newImg.src = fotoos[index].plaatje.src;
	
	newImg.width = fotoos[index].plaatje.width;
	e.width = newImg.width;
//	fotoos[index].plaatje.width = newImg.width;	// Omgedraaid voor IE5/Mac?
	newImg.height = fotoos[index].plaatje.height;
	
	newImg.onmouseover = function () {
		muisOver = true;
		stopPan();
		
		var paragraaf = this.nextSibling;
		var newText = document.createTextNode ( fotoos[this.parentNode.index].beschrijving );
		paragraaf.appendChild ( newText );
	}
	
	newImg.onmouseout = function () {
		muisOver = false;
		startPan();
		
		var paragraaf = this.nextSibling;
		paragraaf.removeChild(paragraaf.childNodes[0]);
	}
	
	e.appendChild(newImg);
	
	var newP = document.createElement("p");
	e.appendChild(newP);

	document.getElementById("toneel").appendChild(e);
}

function pan ( ) 
{
	// Loop door alle panElements en schuif ze op.
	// Check ook of ie buiten beeld is en weg kan en of er een volgende moet komen
	var e =document.getElementById("toneel").firstChild;
	var ref_x = parseInt(e.style.left) - snelheid;
	var w = e.width;
	if ( ref_x + w  < 0)
	{
		// Valt buiten beeld    
		// Verplaats de eerste naar achteren
//		pElems.push(pElems.shift());
		document.getElementById("toneel").insertBefore ( e, null );
		ref_x += w + tussenRuimte;
	}

	var pElems = $('#toneel').children();
	for ( var i = 0; i < pElems.length && ref_x < toneelBreedte; i++ ) 
	{
		// Als ref_x rechts van toneel ligt, kun je ophouden
		e = pElems[i];
		// Schuif element stukje op
		e.style.left = ref_x + 'px';
		ref_x += e.width + tussenRuimte;
	}	
}

// imageLoadHandler en initPlaatje vormen samen een loop die alle
// afbeeldingen laadt. Dit proces begint na laden van body

function imageLoadHandler () 
{
	var plaatjesCount = this.index;
	
	// Als de afbeelding geladen is, een div-element maken en klaarzetten
	createPanElement ( plaatjesCount );
	
	if ( plaatjesCount == 0 ) 
	{
		startPan();
	}
	
	if ( ++plaatjesCount < fotoos.length  ) {
		// initPlaatje(this.index + 1);
		// Timeout voorkomt melding Stack Overflow:
		setTimeout("initPlaatje (" + plaatjesCount + ")",10);
	}
}

function initPlaatje ( i ) {
	fotoos[i].plaatje.onload = imageLoadHandler;
	fotoos[i].plaatje.index = i;
	fotoos[i].plaatje.src = dir + fotoos[i].bestandsNaam;
}


// De opbouw van het toneel
window.onresize = bouwToneel;
var toneelBreedte;
var strook = 25;	// Rand links en rechts van het toneel
var tussenRuimte = 10;

function bouwToneel() 
{
	toneelBreedte = document.body.clientWidth - 2 * strook;
	document.getElementById("toneel").style.width = toneelBreedte;
}

function slide ( cat )
{
	stopPan();
	fadeDivs();
	laadFotoLijst ( cat );
}

function fadeDivs()
{
	$('#toneel').children().fadeOut(300, destroy);
}

function destroy()
{
	this.parentNode.removeChild(this);
}