// windowloaderfunctie
window.onload = loader;

// Vaste waarden initialiseren 
var introID = "random_images";
var infoID = "info";
var contentID = "content";
var projectsID = "projecten";
var fullsizeID = "fullsize"

// Zelfverzonnen attributen
var source_attribute = "show"
var fader_attribute = "fader"

var project_attribute = "project"

// Index van in overzicht van alle projecten te tonen afbeelding
var project_thumbnail = "thumbnail"; 

// Aantal per project te tonen afbeeldingen
var project_images_count = "images"; 

// Directory met projectgegevens
var project_dir = "projects/"; 

// Imageconstanten
var img_prefix = "grid";
var img_dir = "images/"; //!!! ends with /
var img_oversuffix = "rood";
var img_type = ".jpg"

// Loaderfunctie

function loader(){
	init_anchors()
	init_intro();
	init_projects();
	init_faders();
	
	initDisableSelect();
	
}


function setEmail(a, p1,p2,p3,p4){
	
	var address = p3 + "@" + p4 + p1 + "." + p2
	var href = "mailto:" + address
		
	placeholder = a;
	var link = document.createElement("A");
	var text = document.createTextNode(address)
	link.href = href;
	link.appendChild(text)
	placeholder.appendChild(link);
}


// Initialisatie van de event-handlers van de <a href..> elementen.

function init_anchors(){
	
	//Selectie van alle <a hrefs in het document
	var all = document.getElementsByTagName("A");

	//Loop om alle <a hrefs te voorzien van onfocus-, onmouseover-, onmouseout- en onclickfuncties
	for(a=0;a<all.length;a++){
		anchor = all[a];
		if(anchor.className.indexOf("email") !=-1){
			setEmail(anchor, "envisser","nl","info","booijink");	
		}
		else{
			anchor.onmouseover = function(){
				set_info(this);
			};
			anchor.onmouseout = reset_info;
			anchor.onfocus = function(){
				this.blur();
			};
			anchor.onclick = function(){
				anchor_action(this);
			};
		}
	}
}

// Bij onclick tonen van de bij de menuoptie behorende layertekst

function anchor_action(a){
	
	hide(introID);
	hide(fullsizeID);
	hide("fader");


	if(sourceID = a.getAttribute(source_attribute)){
		
		var source = document.getElementById(sourceID);
		var content = document.getElementById(contentID);
	
		content.innerHTML = source.innerHTML;
		content.className = source.className;
		
		if(sourceID==projectsID)
			set_image_events(content);
		
		if(content.menu_item){
			content.menu_item.className = '';
		}
		
		a.className = 'active';
		a.blur();
		content.menu_item = a;
		
		return false;
	}
}

/////////////////////////////////////////////////////////
// INTRODUCTIE (RANDOM IMAGES) //////////////////////////
/////////////////////////////////////////////////////////

function init_intro(){
	var div = document.getElementById(introID)
	var count = parseInt(div.getAttribute("count"));
	for(i =1; i <= count; i++){
		
		img = document.createElement("IMG");	
		img = div.appendChild(img);
			
		img.id = img_prefix + i ;
		img.setAttribute('out', img_dir + img_prefix + i + img_oversuffix + img_type);
		img.setAttribute('over', img_dir + img_prefix + i + img_type);
		img.src = img.getAttribute("out");
			
		img.onmouseover = function(){
			this.src = this.getAttribute("over") ;
		};
		img.onmouseout = function(){
			setTimeout('var img=document.getElementById(\'' + this.id + '\');img.src=img.getAttribute(\'out\')', 1000);
		};
		
	}
	update_intro(count,0);
}

function update_intro(n,i){
	if(document.getElementById(introID).style.display=="none"){
		return;	
	}
	
	//Dit gebeurt NOOIT bij de eerste cyclus
	if(i) document.getElementById(img_prefix + i).onmouseout();

	// Dit gebeurt altijd, ook bij de eerste cyclus
	var t = i;	
	while(t==i){
		t = Math.ceil(Math.random() * n );
	}
	
	i = t;
	document.getElementById(img_prefix + i).onmouseover();
	
	setTimeout('update_intro('+ n +',\''+ i +'\')',1000)
}



/////////////////////////////////////////////////////////
// PROJECTEN (IMAGES + eventhandlers)////////////////////
/////////////////////////////////////////////////////////

function init_projects(){
	var div = document.getElementById(projectsID);
	var projects = div.getElementsByTagName("DIV");

	for(p=0; p<projects.length; p++){
		project = projects[p];
		if(project.getAttribute(project_attribute)){
			var project_name = project.getAttribute(project_attribute);
			var project_image = project.getAttribute(project_thumbnail) ? project.getAttribute(project_thumbnail) : 1;
			
			img = document.createElement("IMG");	
			img = project.insertBefore(img,project.firstChild);
			
			img.setAttribute('project', project_name);
			img.setAttribute('out', project_dir + project_name + "/thumbnails/" + project_name + project_image + '_zw' + img_type);
			img.setAttribute('over', project_dir + project_name + "/thumbnails/" + project_name + project_image + img_type);
			
			img.src = img.getAttribute("out");
			img.className = "pointer";
			img.title = "Klik voor meer foto's.";
		}
	}
}


function set_image_events(node){
	var imgs = node.getElementsByTagName("IMG");

	for(i=0;i<imgs.length; i++){
		var img=imgs[i];
		img.onmouseover = function(){
			this.src = this.getAttribute("over") ;
			set_info(this);
		};
		img.onmouseout = function(){
			this.src = this.getAttribute("out") ;
			reset_info();
		};
		img.onclick = function(){
			img_action(this);
			reset_info();
		};
	}
}

function img_action(img){
	var parent = img.parentNode;
	var project_name = parent.getAttribute(project_attribute);
	var cnt = parent.getAttribute(project_images_count) ? parent.getAttribute(project_images_count) : 9 ;	
	var content = document.getElementById(contentID);
	
	content.innerHTML = "";
	content.className = "thumbnails";
	
	for(i = 0 ; i<cnt; i++){
		img = document.createElement("IMG");

		img = content.appendChild(img);
		img.setAttribute('project', project_name);
		
		var src = project_name + (i+1) + img_type;
		img.src = project_dir + project_name + "/thumbnails/" + src;		
		img.className = "pointer";

		img.fullsize = project_dir + project_name + "/fullsize/" + src;		
				
		img.title = "Klik voor een uitvergroting."
				img.onmouseover = function(){
			set_info(this);
		};
		img.onmouseout = function(){
			reset_info();
		};

		img.onclick = function(){
			show_fullsize(this);
		};
	}
}


function show_fullsize(thumbnail){
			
	var div = document.getElementById(fullsizeID);
	div.style.display="none";
	div.title = "Klik om te sluiten.";
	set_info(div);
	div.onclick = function(){
		this.style.display="none";
		reset_info();
	}
	var fullsize;
	fullsize= div.getElementsByTagName("IMG");
	fullsize = fullsize[0];
	fullsize.onload= function(){
		this.parentNode.style.display="";
	}

	fullsize.src = thumbnail.fullsize;
}


////////////////////////////////////////////////////////
//////  GENERIEKE FUNCTIES /////////////////////////////
////////////////////////////////////////////////////////

// Title van het controlelement tonen in inforegel;
function set_info(element){
	set_innerHTML(infoID,element.title);
}

// Tekst in inforegel leegmaken
function reset_info(){
	set_innerHTML(infoID,"");
}

// Generieke functie: toon in element met id targetID de tekst text;
function set_innerHTML(targetID,text){
	if(document.getElementById(targetID)){
		document.getElementById(targetID).innerHTML = text;
	}
}

// Generieke functie: verberg element met id id;
function hide(id){
	document.getElementById(id).style.display="none"
}

function set_className(target,className){
	if(document.getElementById(target)){
		target = document.getElementById(target);
		if(target.className != className) target.className = className;
	}
}



/////////////////////////////////////////////////////////
// FADER FUNCTIES ///////////////////////////////////////
/////////////////////////////////////////////////////////

function init_faders(){
	var all = document.getElementsByTagName("*");
	for(e = 0 ; e < all.length ; e++){
		var element = all[e];
		if(element.getAttribute(fader_attribute)){
			element.fader = new Fader(element);	
		}
	}	
}

function Fader(element){
	this.fps = 12;
	
	this.element = element;
    this.guid = element.id;
    
 	this.timer = new Array();
	
	var tmp = eval( '['  + element.getAttribute(fader_attribute) + ']') ;
	
	for(f=0;f<tmp.length;f++){
		tmpval = tmp[f];
		this.timer[f] = eval('[' + tmpval + ']')		
	}
	
   
	this.fade = fade;
	this.set_opacity = set_opacity;
	this.stepsize = Math.floor(1000/this.fps);

	this.fade();
}

function set_opacity(opacity){
	if(opacity>100) opacity = 100;
	if(opacity<0) opacity = 0;
	
	
	if(this.opacity != opacity){
		this.opacity = opacity;
		
		var element = this.element;
		
		if (document.all)
			element.style.filter ="alpha(opacity="+ opacity +")"
		else if (element.style.MozOpacity)
			element.style.MozOpacity=opacity/100
		else
			element.style.opacity=opacity/100
	}
}

function fade(){
	if(this.time==null){
		this.time = 1;
		this.traject = 1;
	}

	o1 = this.timer[this.traject - 1][1];
	o2 = this.timer[this.traject][1];

	n = this.time;
	t = this.timer[this.traject][0];
	
	opacity = Math.floor(o1 + (o2-o1) * n / t)

	this.set_opacity(opacity)
	
	if( n >= t){
		this.traject++;
		this.time = 1;
	}
	else{
		this.time += this.stepsize; 
	}
	
	if(this.traject < this.timer.length){
		setTimeout('document.getElementById(\'' + this.guid + '\').fader.fade()',1/this.fps);
		return;
	}
	else{
		this.element.style.display = "none";
	}

}







function disableselect(e){

	if (document.omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
		return false
}

function reEnable(){
	return true
}

function initDisableSelect(){
	document.omitformtags=["input", "textarea", "select"]
	document.omitformtags=document.omitformtags.join("|")
	
	if (typeof document.onselectstart!="undefined")
		document.onselectstart=new Function ("return false")
	else{
		document.onmousedown=disableselect
		document.onmouseup=reEnable
	}
}