/********* COPYRIGHT ****************
      Wouter Bochanen 2005 - 2007
   ************************************/

// PLANNEN VOOR HET PRELOADEN:
// (alles moet na elkaar plaatsvinden, dus functies zijn gekoppeld aan elkaar als een ketting)
// -- eerst de grafische elementen
// -- dan ALLE thumbnails
// -- dan de eerste foto
// -- dan de volgende foto's
//    > aangeklikte foto's moeten voorrang krijgen

function preloadGraphics() {
	// enkele variabelen alvast instellen
	this.processed = 0;
	this.amount = graphics.length;
	this.current_graphic = 0;
	
	if(!document.preloadArray) document.preloadArray = new Array();
	this.downloadGraphic(this.current_graphic);
}

	preloadGraphics.prototype.downloadGraphic = function (local_count) {
		var new_source = graphics[local_count];
		var this_image = new Image();
		this_image.recursion = this;
		this_image.onload = this.doComplete;
		this_image.onerror = this.doComplete;
		this_image.onabort = this.doComplete;
		this_image.src = new_source;
		
		var size = document.preloadArray.length;
		document.preloadArray[size] = this_image;
	}
	
	preloadGraphics.prototype.doComplete = function () {
		if (!this.recursion) {
			if (typeof(pg) == 'undefined') { // bug (?) in Safari: pg wordt soms niet gevonden....
				setTimeout("pg.updateProcess();", 500);
			} else {
				pg.updateProcess();
			}
		}
		else this.recursion.updateProcess(); // moet via een omweg omdat we anders niet in de functie zitten, maar in de img
	}
	
	preloadGraphics.prototype.updateProcess = function () {
		this.processed++;
		if (this.processed == this.amount) {
			controlArrows.init();
			cg = new createGrid(); // als de graphics geladen zijn, gaan we verder met het grid
		} else {
			this.current_graphic++;
			this.downloadGraphic(this.current_graphic);
		}
	}

function createGrid() {;
	// enkele variabelen alvast instellen
	this.processed = 0;
	this.amount = end-start;
	
	for (local_count=start; local_count<=end; local_count++) {
		local_number = countToNumber(local_count);
		this.createCell(local_number);
	}
}

	createGrid.prototype.createCell = function (local_number) {
		var new_cell = document.createElement('div');
		var new_thumbnail = document.createElement('img');
		
		new_thumbnail.recursion = this;
		if (window.addEventListener) { // Firefox
			new_thumbnail.addEventListener("click", gotoIndex, false);
			new_thumbnail.addEventListener("load", this.oncomplete, false);
			new_thumbnail.addEventListener("error", this.oncomplete, false);
			new_thumbnail.addEventListener("abort", this.oncomplete, false);
		} else { // Internet Explorer
			new_thumbnail.attachEvent("onclick", gotoIndex);
			new_thumbnail.onload = this.oncomplete; // niet met attachEvent, omdat IE dat niet pakt (?)
			new_thumbnail.onerror = this.oncomplete;
			new_thumbnail.onabort = this.oncomplete;
		}
		
		new_cell.setAttribute('class', 'thumbnail'); // Firefox
		new_cell.setAttribute('className', 'thumbnail'); // Internet Explorer
		new_thumbnail.setAttribute('src', thumbnail_path+prefix+local_number+extension);
		new_thumbnail.setAttribute('class', 'unloaded'); // Firefox
		new_thumbnail.setAttribute('className', 'unloaded'); // Internet Explorer
				
		new_cell.appendChild(new_thumbnail);
		div_grid = document.getElementById("grid");
		div_grid.appendChild(new_cell);
	}
	
	createGrid.prototype.oncomplete = function () {
		if(!this.recursion) cg.updateProcess();
		else this.recursion.updateProcess(); // moet via een omweg omdat we anders niet in de functie zitten, maar in de img
	}
	
	createGrid.prototype.updateProcess = function () {
		this.processed++;
		if (this.processed == this.amount) {
			ss = new showSlide();
			pp = new preloadPhotos(); // als createGrid klaar is, gaan we foto's ophalen
		}
	}

function preloadPhotos() {
	// enkele variabelen alvast instellen
	this.processed = 0;
	this.amount = end-start+1;
	this.current_photo = start;
	
	this.downloadPhoto(this.current_photo);
}

	preloadPhotos.prototype.downloadPhoto = function (local_count) {
		if (local_count < 10) {
			var local_number = "0"+local_count;
		} else {
			var local_number = ""+local_count;
		} // 'countToNumber' is hier apart geschreven, zodat er geen verwarring ontstaat
		
		var size = document.preloadArray.length;
		var new_source = path+prefix+local_number+extension;
		document.preloadArray[size] = new Image();
		
		document.preloadArray[size].functionInstance = this;
		document.preloadArray[size].count = this.current_photo;
		document.preloadArray[size].photo = true;
		document.preloadArray[size].onload = this.oncomplete;
		document.preloadArray[size].onerror = this.onerror;
		document.preloadArray[size].src = new_source;
	}
	
	preloadPhotos.prototype.oncomplete = function () {
		if(!this.functionInstance) {
			pp.updateProcess();
			setTimeout("pp.checkCompleted();", 0); // vertraging is nodig, omdat de img anders niet complete is volgens Safari
			return false;
		}
		this.functionInstance.updateProcess(); // moet via een omweg omdat we anders niet in de functie zitten, maar in de img
		this.functionInstance.updateThumbnail(this.count); // niet altijd complete: soms onerror
		if (this.count == start) {
			disable_controls = false;
			gotoPhoto(start);
		}
	}
	
	preloadPhotos.prototype.onerror = function () {
		if(!this.functionInstance) { pp.updateProcess(); return false; }
		this.functionInstance.updateProcess(); // moet via een omweg omdat we anders niet in de functie zitten, maar in de img
		if (this.count == start) {
			disable_controls = false;
			gotoPhoto(start);
		}
	}
	
	preloadPhotos.prototype.checkCompleted = function () {
		dpA = document.preloadArray;
		for (i=0; i<dpA.length; i++) {
			if (dpA[i].photo && dpA[i].complete) {
				dpA[i].photo = false;
				this.updateThumbnail(dpA[i].count);
				if (dpA[i].count == start) {
					disable_controls = false;
					gotoPhoto(start);
				}
			}
		}
	}
	
	preloadPhotos.prototype.updateProcess = function () {
		this.processed++;
		if (this.processed == this.amount) {
			// als het preloaden klaar is, is alles klaar!
		} else {
			this.current_photo++;
			this.downloadPhoto(this.current_photo);
		}
	}
	
	preloadPhotos.prototype.updateThumbnail = function (local_count) {
		index = local_count-start;
		current_thumbnail = document.getElementById("grid").childNodes[index].firstChild;
		if(current_thumbnail.getAttribute('class') == "unloaded") current_thumbnail.setAttribute('class', ''); // Firefox
		if(current_thumbnail.getAttribute('className') == "unloaded") current_thumbnail.setAttribute('className', ''); // Internet Explorer
	}
	
	
	
function countToNumber(ctn_count) {
	// dit script werkt tot 99 foto's
	if(typeof(ctn_count)=='number') this_count = ctn_count;
	else this_count = count;
	
	if (this_count < 10) {
		this_number = "0"+this_count;
	} else {
		this_number = ""+this_count;
	}
	
	if(typeof(ctn_count)=='number') return this_number;
	else number = this_number;
}

function gotoIndex(e) {
	if (disable_controls) return false;
	if (e.target) e = e.target;
	else if (e.srcElement) e = e.srcElement;
	
	child = e.parentNode;
	div_parent = child.parentNode; // twee niveaus hoger, want er zit nog een div om de img heen
	children = div_parent.childNodes;
	for (i=0; i<children.length; i++) {
		if (children[i] == child) {
			new_count = i+start; // er zit namelijk nog één (div-)element voor binnen de grid-div
		}
	}
	
	if (new_count != count) {
		gotoPhoto(new_count);
	}
}

function gotoPhoto(new_count) {
	if (disable_controls) return false;
	div_grid = document.getElementById("grid");
	
	if (!loading_page) {
		previous_count = count;
		previous_index = previous_count-start;
		prev_thumbnail = div_grid.childNodes[previous_index].firstChild;
		prev_thumbnail.setAttribute('class', 'visited'); // Firefox
		prev_thumbnail.setAttribute('className', 'visited'); // Internet Explorer
	}
	
	count = new_count;
	index = count-start;
	current_thumbnail = document.getElementById("grid").childNodes[index].firstChild;
	current_thumbnail.setAttribute('class', 'active'); // Firefox
	current_thumbnail.setAttribute('className', 'active'); // Internet Explorer
	
	countToNumber();
	applyNew();
	controlArrows.check();
	ss.checkSlide(count);
	
	loading_page = false;
}

function applyNew() {
	new_source = path+prefix+number+extension;
	new_title = prefix+number+extension;
	div_photoHolder = document.getElementById('photoHolder');
	div_photoHolder.src = new_source;
	div_photoHolder.relsrc = new_source;
	div_photoHolder.title = new_title;
	div_photoHolder.removeAttribute("class"); // Firefox
	div_photoHolder.removeAttribute("className"); // Internet Explorer
}

function changeArrows() {
	img_previous = document.getElementById('previousHolder');
	img_next = document.getElementById('nextHolder');
}

	changeArrows.prototype.check = function () {
		if (count == start || loading_page) {
			this.disablePrevious();
		} else if (previous_count == start) { // zonder deze voorwaarde komen we in een loop terecht
			this.enablePrevious();
		}
		if (count == end) {
			this.disableNext();
		} else if (loading_page || previous_count == end) { // zonder deze voorwaarde komen we in een loop terecht
			this.enableNext();
		}
	}
	
	changeArrows.prototype.init = function () {
		img_previous.src = gif_previous;
		img_previous.setAttribute('alt', 'Vorige');
		img_previous.setAttribute('class', 'arrow'); // Firefox
		img_previous.setAttribute('className', 'arrow'); // Internet Explorer
		if (window.addEventListener) img_previous.addEventListener("click", previous, false); // Firefox
		else { // Internet Explorer
			img_previous.attachEvent("onclick", previous);
			img_previous.attachEvent("onmouseover", function(){img_previous.className = 'arrowHover';});
			img_previous.attachEvent("onmouseout", function(){img_previous.className = 'arrow';});
		}
	
		img_next.src = gif_next;
		img_next.setAttribute('alt', 'Volgende');
		img_next.setAttribute('class', 'arrow'); // Firefox
		img_next.setAttribute('className', 'arrow'); // Internet Explorer
		if (window.addEventListener) img_next.addEventListener("click", next, false); // Firefox
		else { // Internet Explorer
			img_next.attachEvent("onclick", next);
			img_next.attachEvent("onmouseover", function(){img_next.className = 'arrowHover';});
			img_next.attachEvent("onmouseout", function(){img_next.className = 'arrow';});
		}
	}
	
	changeArrows.prototype.disablePrevious = function () {
		img_previous.style.visibility = "hidden";
	}
	
	changeArrows.prototype.enablePrevious = function () {
		img_previous.style.visibility = "visible";
	}
	
	changeArrows.prototype.disableNext = function() {
		img_next.style.visibility = "hidden";
	}
	
	changeArrows.prototype.enableNext = function() {
		img_next.style.visibility = "visible";
	}

	
function showSlide() {
	this.slide = 0;
	this.stages, this.stage, this.interval, this.tween;
	img_slideup = document.getElementById('slideUp');
	img_slidedown = document.getElementById('slideDown');
	div_grid = document.getElementById('grid');
	div_grid.style.top = "0px";
	slide_float = ( end-start+1 ) / 12;
	slide_amount = parseInt(slide_float);
	if (slide_amount < slide_float) slide_amount++;
	
	if (window.addEventListener) img_slideup.addEventListener("click", this.slideUp, false); // Firefox
	else img_slideup.attachEvent("onclick", this.slideUp); // Internet Explorer
	if (window.addEventListener) img_slidedown.addEventListener("click", this.slideDown, false); // Firefox
	else img_slidedown.attachEvent("onclick", this.slideDown); // Internet Explorer
	
	this.adjustArrows(0);
}

	showSlide.prototype.gotoSlide = function (new_slide) {
		//if (this.busy == true) return false;
		this.busy = true;
		this.slide = new_slide;
		this.new_position = this.slide * -304; // dit is relatief gezien!
		this.current_position = parseInt(div_grid.style.top);
		this.distance = this.new_position - this.current_position;
		this.adjustArrows();
		this.animate();
	}
	
	showSlide.prototype.adjustArrows = function () {
		if (this.slide == 0) {
			img_slideup.setAttribute("class", "hiddenSlideArrow");
			img_slideup.setAttribute("className", "hiddenSlideArrow");
		} else {
			img_slideup.removeAttribute("class");
			img_slideup.removeAttribute("className");
		}
		if (this.slide == slide_amount-1) {
			img_slidedown.setAttribute("class", "hiddenSlideArrow");
			img_slidedown.setAttribute("className", "hiddenSlideArrow");
		} else {
			img_slidedown.removeAttribute("class");
			img_slidedown.removeAttribute("className");
		}
	}
	
	showSlide.prototype.animate = function (new_position) {
		this.stages = 12;
		this.stage = 1; // dit is het eerste plaatje van de animatie
		this.interval = 80; // hoeveel tijd tussen twee stappen?
			clearInterval(this.tween);
		this.tween = setInterval("ss.nextStage();", this.interval);
	}
	
	showSlide.prototype.nextStage = function () {
		this.new_phase = this.stage / this.stages;
		this.new_cos = -1/2 * Math.cos(this.new_phase * Math.PI) + 1/2;
		div_grid.style.top = this.current_position + (this.distance * this.new_cos)+"px";
		
		if (this.stage == this.stages) {
			clearInterval(this.tween);
			this.busy = false;
		}
		this.stage++;
	}
	
	showSlide.prototype.slideUp = function () {
		ss.gotoSlide (ss.slide-1);
	}
	
	showSlide.prototype.slideDown = function () {
		ss.gotoSlide (ss.slide+1);
	}
	
	showSlide.prototype.checkSlide = function (new_count) {
		slide_float = ( new_count-start+1 ) / 12;
		slide_number = parseInt(slide_float);
		if (slide_number < slide_float) slide_number++;
		slide_number--; // de eerste slide is namelijk nummer 0
		if (slide_number != ss.slide) ss.gotoSlide(slide_number);
	}

function previous() {
	if (count > start) {
		new_count = count-1;
		gotoPhoto(new_count);
	}
}

function next() {
	if (count < end) {
		new_count = count+1;
		gotoPhoto(new_count);
	}
}

function readKey(e) {
	var e = e || window.event;
	if (e.keyCode == 39) { // pijltje naar rechts
		next();
	} else if (e.keyCode == 37) { // pijltje naar links
		previous();
	} else if (e.keyCode == 38) { // pijltje omhoog
		if (count-start >= columns) {
			gotoPhoto(count-columns);
		}
	} else if (e.keyCode == 40) { // pijltje omhoog
		if (end-count >= columns) {
			gotoPhoto(count+columns);
		}
	} else {
		e = false;
	}
	
	if (e.preventDefault) e.preventDefault(); // Firefox
	else if (e) e.returnValue = false; // Internet Explorer
}

function hideGrid() {
	div_grid = document.getElementById("grid");
	div_grid.style.display = "none";
	
	div_shownow = document.getElementById("showNow");
	div_shownow.style.display = "block";
}

function showGrid() {
	div_grid.style.display = "";
	div_shownow.style.display = "";
}