/////////////////  variables  ///////////////
var menuFlag = "begin";
var rollOverFlag="";
var projectListrollOverFlag="";
var imageCounter=0;
var imageArray;
var loadingBreaker="portraits";
/////////////////////////////////////////////
function emailUlrike(){
	window.open("mailto:ulrike@leyens.com?subject=I love your pics",'_self');
}
function buildContainer(which){

		var $imageContainer_div = $('<div />', {
			id: "imageContainer_div",
			css:{'z-index':100-imageCounter},
		});
		if(which=='contact'){
				var $image_div = $('<div onclick="javascript:emailUlrike();" onmouseOut="javascript:setPointerCursor(\'imageContainer_div\');" onmouseOver="javascript:setPointerCursor(\'imageContainer_div\');" />', {
					id: "image_div "+imageCounter, 
					css:{'cursor':'pointer'},
				});
			}else{
			var $image_div = $('<div />', {
				id: "image_div "+imageCounter, 
			
			});
		}
		var $imageContainer_img = $('<img />', {
			id: imageArray[imageCounter][0],
			css :{opacity: 1},
		css:{'-moz-box-shadow': '1px 5px 5px rgba(128,128,128,0.4)','-webkit-box-shadow': '1px 5px 5px rgba(128,128,128,0.4)','box-shadow': '1px 5px 5px rgba(128,128,128,0.4)',},
		});
		var $imageTitle_div = $('<div />', {
			id: "imageTitle_div",
			css:{'cursor':'default'},
		});
		$imageTitle_div.append('<span >' + imageArray[imageCounter][1] + '</span>');
			
		$imageContainer_img.hide();
		$imageContainer_img.bind("load",function(){
			
		var tempWidth=0;
		$("#container").find('img').each(function(){
			tempWidth=tempWidth + parseFloat($(this).css('width')) + 15;
			$imageContainer_div.append($imageTitle_div);	
		});
				
		tempWidth=tempWidth+30;
		document.getElementById("container").style.width = tempWidth+"px";
	
		 $(this).fadeIn(300,function() {
			if(which!=loadingBreaker){
				return;
				$(this)=0;
				which=loadingBreaker;
			}
			  imageCounter++;
				if(imageCounter<imageArray.length){
					buildContainer(which);
				}
			});
		});
			
	
		$image_div.append($imageContainer_img);
		$imageContainer_div.append($image_div);
		$("#container").append($imageContainer_div);
		
		$imageContainer_img.attr('src',which+'/'+imageArray[imageCounter][0]+'.jpg');
		
	
}
function clearContainer(){
	while(document.getElementById("container").childNodes[0]!=undefined){
	   	document.getElementById("container").removeChild(document.getElementById("container").childNodes[0]);
	}
}
function hideProjectMenu(which){
	var $lefty = $("#projectsMenu");
	$("#projectsMenu").animate({
	 	top: -20 ,
		opacity:0
	  }, 300,function(){});
}
function loadContent(which){
	imageCounter=0;
  switch(which){
	case "clients":
		if (menuFlag!= "clients") {
			imageArray = clientsArray;
			clearContainer();
			$(buildContainer(which));
			menuFlag= "clients";
		}
	break;
	case "portraits":
		if (menuFlag!= "portraits") {
			imageArray = portraitsArray;
			clearContainer();
			$(buildContainer(which));
			menuFlag= "portraits";		
		}
	break;
	case "portfolio":
		if (menuFlag!= "portfolio"){
			clearContainer();
			imageArray = portfolioArray;
			$(buildContainer(which));
			menuFlag= "portfolio";
		}
		break;
	case "projects":
		if (menuFlag!= "projects") {
			menuFlag= "projects";
		}
		break;
	case "project1":
		imageArray = project1Array;
		clearContainer();
		$(buildContainer(which));
	break;
	case "project2":
		imageArray = project2Array;
		clearContainer();
		$(buildContainer(which));
	break;
	case "project3":
		imageArray = project3Array;
		clearContainer();
		$(buildContainer(which));
	break;
	case "project4":
		imageArray = project4Array;
		clearContainer();
		$(buildContainer(which));
	break;
	case "project5":
		imageArray = project5Array;
		clearContainer();
		$(buildContainer(which));
	break;
	case "project6":
		imageArray = project6Array;
		clearContainer();
		$(buildContainer(which));
	break;
	case "project7":
		imageArray = project7Array;
		clearContainer();
		$(buildContainer(which));
	break;
	case "project8":
		imageArray = project8Array;
		clearContainer();
		$(buildContainer(which));
	break;
	case "project9":
		imageArray = project9Array;
		clearContainer();
		$(buildContainer(which));
	break;
	case "theBox":
		if (menuFlag!= "theBox") {
			imageArray = theBoxArray;
			clearContainer();
			$(buildContainer(which));
			menuFlag= "theBox";
		}
		break;
	case "contact":
		if (menuFlag!= "contact") {
			imageArray = contactArray;
			clearContainer();
			$(buildContainer(which));
			menuFlag= "contact";
		}
		break; 
 	default:
		break;   
	} 
}
function goMain(){
	alert("go main line 172");
      location.replace("main.php"); 	
} 
function setDefaultCursor(which){
	 	document.getElementById(which).style.cursor = 'default';
}
function setPointerCursor(which){
		document.getElementById(which).style.cursor = 'pointer';
}
function projectListlinkRollover(which){
 	setDefaultCursor(which); 
 	document.getElementById(which).style.color="#666666";
}
function linkRollover(which){
  	 setDefaultCursor(which); 
 	document.getElementById(which).style.color="#666666";
}
function projectListlinkRollout(which){
	if(projectListrollOverFlag!=which){  
		 setDefaultCursor(which);  
 		document.getElementById(which).style.color="#666666";
	}
} 
function linkRollout(which){
	if(rollOverFlag!=which){
		 setDefaultCursor(which); 
 		document.getElementById(which).style.color="#aaacae";
	}
}
function projectListClick(which){
	document.getElementById("portraits").style.color="#aaacae";
	document.getElementById("portfolio").style.color="#aaacae";
	document.getElementById("clients").style.color="#aaacae";
	document.getElementById("projects").style.color="#aaacae";
	document.getElementById("theBox").style.color="#aaacae";
	document.getElementById("contact").style.color="#aaacae";
	document.getElementById("projects").style.color="#666666";
	loadingBreaker=which;
	projectListrollOverFlag=which;
	hideProjectMenu(which);
	loadContent(which);
}
function linkClick(which){

	loadingBreaker=which;
	if(which!="projects"){
		hideProjectMenu(which);
	}
		rollOverFlag=which;
		if(which!="projects"){
		document.getElementById("portraits").style.color="#aaacae";
		document.getElementById("portfolio").style.color="#aaacae";
		document.getElementById("clients").style.color="#aaacae";
		document.getElementById("projects").style.color="#aaacae";
		document.getElementById("theBox").style.color="#aaacae";
		document.getElementById("contact").style.color="#aaacae";
	}
		document.getElementById(which).style.color="#666666";

		loadContent(which);
}