// File written by Joël Kuijten for www.superficial.nl
// Im glad you're interested ;)
// initialize Global  vars
var  OldFocus, New, picDiv, pic
// State vars
var locked = false;
// Data holder Arrays
var openArray = [];
var opened = [];
var contentHolders =[];
var container = [];
var menuButtons = [];
var contents = [];
// Function vars
var currentFocus = 0;
var dimensions = { barHeight : 20 };
var anim = {
	showPicture		:	false	,
	steps			:	12		,
	time			:	500		,
	counter			:	1		,
	picDivSteps		:	20		,
	picDivTime		:	500		,
	picDivCounter	:	1
};
anim.stepTime = Math.round(anim.time/anim.steps);
anim.picDivStepTime = Math.round(anim.picDivTime/anim.picDivSteps);
// FUNCTIONS
function init(){
	var links = document.getElementsByTagName('a');
	var al = links.length;
	for (var i = 0 ; i<al ; i++){
		if (links[i].getAttribute('href')){
			var href = links[i].getAttribute('href');
			if ( href.substring(0,7) === "http://"){
				links[i].setAttribute('target','_blank');
				links[i].setAttribute('title','visit '+href+' (will open new window)');
			}
		}
	}
	container = document.getElementById("container");
	menuButtons = getElementsByClassName("a","menuButton");
	contentHolders = getElementsByClassName("div","contentHolder");
	contents = getElementsByClassName("div","content");
	var cl = contentHolders.length;
	for( var j = 0 ; j < cl ; j++){
		openArray[j] = false;
		opened[j] = false;
	}
	placeEverything();
	changeBar(currentFocus);
}
function changeBar(a){
	currentFocus = a;
	if(locked === false){
		New = contentHolders[currentFocus].style;	
		New.display = "block";
		New.overflow = "hidden";
		OldFocus = "NonExistent";
		for (i=0 ; i < openArray.length ; i++){
			 if ((openArray[i] === true) && (i != currentFocus)){
				 OldFocus = i;
				 Old = contentHolders[i].style;
				 Old.overflow = "hidden";
			}
		}
		locked = true;
		slide();
	}
}
function slide(){
	if(anim.counter < anim.steps){
		var OffsetTemp = Math.ceil(dimensions.slideHeight/Math.pow(2,anim.counter));
		var Offset = Math.round(dimensions.slideHeight-OffsetTemp);
		New.height = ((openArray[currentFocus] == false) ?  Offset : (dimensions.slideHeight-Offset)) +"px";
		if  (OldFocus != "NonExistent"){
			Old.height = ((openArray[OldFocus] == false) ?  Offset : Math.ceil(dimensions.slideHeight-Offset)-1)+"px";
		}
		anim.counter++;
		anim.ival = setTimeout("slide()", anim.stepTime);
	}else{	
		anim.counter = 1;
		openArray[currentFocus]= (openArray[currentFocus]==false)? true : false;
		var len = openArray.length
		for(var i = 0 ;i < len ; i++){
			if(i != currentFocus){
				openArray[i]=false;
			}
		}
		clearInterval(anim.ival)
		makeItRight();
		if (!opened[currentFocus]){
			switch(currentFocus){
				case 3:
					placeThumbs(Logos);
					placeThumbs(BusinessCards);
					placeThumbs(Flyers);
					placeThumbs(Other);
					break;
				case 4:
					placeThumbs(LuchtFotos);
					break;
				case 5:
					placeThumbs(School);
					break;
					
			}
		}
		if(!opened[currentFocus])
			opened[currentFocus] = true;
	}
}
function slidePicDiv(dir){
	if (anim.picDivCounter == 1 && dir ){
		picDiv.removeChild(pic);
		pic = undefined;
	}
	if(anim.picDivCounter < anim.picDivSteps){
		 var offset = Math.ceil(dimensions.totalHeight/Math.pow(2,anim.picDivCounter))
		if(dir){
			picDiv.style.top = dimensions.totalHeight-offset+'px';
			picDiv.style.height = offset+"px";
		}else{
			picDiv.style.height = dimensions.totalHeight-offset+"px";
			var dir = false;
		}
		anim.picDivIval = setTimeout("slidePicDiv("+dir+")" , anim.picDivStepTime);
		anim.picDivCounter++;
	}else{
		clearInterval(anim.picDivIval);
		if (dir){
			document.body.removeChild(picDiv,true);	
			picDiv = false;
		}else{
			placePicture();
			picDiv.style.height = dimensions.totalHeight+"px";
		}
		anim.picDivCounter = 1;
	}
}
function makeItRight(){
	for( var i = 0; i < openArray.length; i++ ){
		if( openArray[i] === true){
			contentHolders[i].style.display = "block";
			contentHolders[i].style.overflow = "auto";
			contentHolders[i].style.height = dimensions.slideHeight+"px";
		}else{
			contentHolders[i].style.display = "none";
			contentHolders[i].style.height = 0;
		}
	}
	locked=false;
}

function placeEverything(){
	checkHeight();
	container.style.width = dimensions.width + "px";
	container.style.height = dimensions.height + "px";
	for( var q = 0 ; q < contentHolders.length ; q++ ){
		menuButtons[q].style.width = dimensions.width-2 + "px";
		contentHolders[q].style.width = dimensions.width-2 + "px";
		contents[q].style.width = dimensions.width-27 + "px";
		if(q === menuButtons.length-1){
			menuButtons[q].style.borderWidth = "1px";
			contentHolders[q].style.borderWidth = "0 1px 1px";
		}else{
			menuButtons[q].style.borderWidth = "1px 1px 0";
			contentHolders[q].style.borderWidth = "1px 1px 0";
		}
	}
	if(picDiv){
		picDiv.style.width = dimensions.totalWidth+'px';
		picDiv.style.height = dimensions.totalHeight+'px';
	}
	if(pic){
		pic.style.position = 'abolute';
		pic.style.left = 50+"%";
		pic.style.top = 50+"%";
	}
}
// Gallery functions
function makePicOverlay(showThis){
	if(!document.getElementById('picDiv')){
		picDiv = document.createElement('div');
		picDiv.className = 'imageOverlay';
		picDiv.setAttribute('id','picDiv');
		picDiv.setAttribute('title','click to go back to the website');
		picDiv.style.width = dimensions.totalWidth+'px';
		picDiv.style.height = 1+'px';
		var divEvent = function (){
			slidePicDiv(true);
		}
		addEventHandler(picDiv,'click',divEvent);
		pic = document.createElement('img');
		var showPic = function (){
			placePicture();
		}
		addEventHandler(pic, 'load' , showPic);
		pic.setAttribute('src',showThis);
		pic.setAttribute('id','pic');
		pic.style.position = 'absolute';
		pic.style.left = 50+'%';
		pic.style.top = 50+'%';
		pic.style.display = 'none';
		picDiv.appendChild(pic);
		document.body.appendChild(picDiv);
		slidePicDiv();
	}
}
function placePicture(){
	if(!anim.showPicture){
		anim.showPicture = true;
	}else{
		var target = document.getElementById('pic');
		target.style.top = dimensions.totalHeight+1000+'px';
		target.style.display		=	'block';
		target.style.marginLeft		=	"-"+ target.width/2 +'px';
		target.style.marginTop		=	"-"+ target.height/2 +'px';
		target.style.top = 50+'%';
		if(target.height > dimensions.totalHheight || target.width > dimensions.width ){
			alert("You might want to maximize your browser to make this picture fit.");
		}
		anim.showPicture = false;
	}
	
}
function addEventHandler(node, type, f) {
    if (node.addEventListener) {
        node.addEventListener(type, f, false); 
    } else if (node.attachEvent) {       
        node.attachEvent("on" + type, f); 
    } else {
        node["on" + type] = f;
    }
	node.style.cursor = 'pointer';
}
function thumbImage(thumb,alt,bigPic){
	var image = document.createElement('img');
	image.setAttribute('src',thumb);
	image.setAttribute('alt',alt );
	image.setAttribute('title','View this picture');
	fun =  function(){
		makePicOverlay(bigPic);
	}
	addEventHandler(image,'click', fun );
	return image;
}
function placeThumbs(identifier){	
	var thumbP = document.getElementById(identifier[0]);
	if(thumbP){
		var il = identifier.length;
		for (var i = 1 ; i < il ; i++){
			var imageContainer = document.createElement('div');
			imageContainer.className = 'imageButtonThumb';
			var tImage = new thumbImage(imagesRoot+identifier[0]+"/thumbs/"+identifier[i],identifier[0]+" "+i,imagesRoot+identifier[0]+"/"+identifier[i]);
			// append the lot		
			imageContainer.appendChild(tImage);
			thumbP.appendChild(imageContainer);
		}
	}
}
// Secondary functions
function afterResize() {
	placeEverything();
	makeItRight();
}
function checkHeight(){
	var totalWidth , totalheight;	
	if( typeof( window.innerWidth ) == 'number' ) {
    	//Non-IE
		totalWidth = window.innerWidth;
		totalHeight = window.innerHeight;
 		} else if(document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			totalWidth = document.documentElement.clientWidth;
			totalHeight = document.documentElement.clientHeight;
  		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		//IE 4 compatible
		totalWidth = document.body.clientWidth;
		totalHeight = document.body.clientHeight;
	}
	dimensions.totalWidth = totalWidth;
	dimensions.width = totalWidth-10;
	var takenHeight = menuButtons.length * dimensions.barHeight;
	dimensions.slideHeight = totalHeight - takenHeight - 12;
	dimensions.height = totalHeight - 10;
	dimensions.totalHeight = totalHeight;
}
// function to get all the elements of certain tag and get all the ones with a certain CSS-class  
function getElementsByClassName(tag, name) {
     var elemements = document.getElementsByTagName(tag);
     var rightElements = [];
	 var el = elemements.length;
     for( var i = 0; i < el ; i++) {
          if(elemements[i].className === name) {
               rightElements.push(elemements[i]);
          }
     }
     return rightElements;
}
window.onresize = afterResize;
window.onload=init;