var modalboxtype;
	
	Event.observe(
		window, 'load', function() {
			portfolioNav(); 
			photoNav(); 
			//siteNav();
			checkURL();
			externalLinks();
			galleryNav();
			//altPopup();
		}
	);


	function photoNav(){
		if($('photonav')){
			navlinks = $$('#photonav img');
			for(i=0;i<navlinks.length;i++){ 
				if(navlinks[i].src.indexOf('_on')!=-1){
					navlinks[i].isactive = true;
				}
				else{
					navlinks[i].isactive = false;
				}
				navlinks[i].onmouseover = function(){
					source = this.src;
					filename = source.substring(0,source.length-4);
					if(!this.isactive){
						this.src = filename + '_on.gif';
					}
				}
				navlinks[i].onmouseout = function(){
					source = this.src;
					filename = source.substring(0,source.length-4);
					if(!this.isactive){
						this.src = filename.substring(0,filename.length-3) + '.gif'
					}
				}
			} 
		}	
	}


	function portfolioNav(){
		if($('portfolio')){
			navlinks = $$('div.item a');
			for(i=0;i<navlinks.length;i++){ 
				navlinks[i].onclick = function(){
					splits = this.href.split('?');
					args = splits[1].split('=');
					itemID = args[1];
					modalboxtype = 'portfolio';
					Overlay(itemID);
					return false;
				}
			} 
		}	
	}



	function altPopup(){
		var altpopup;
		navlinks = $$('a');
		for(i=0;i<navlinks.length;i++){
			navlinks[i].tmptitle = navlinks[i].title; 
			navlinks[i].onmouseover = function(event){
				new Tip(this, this.title);
				this.title = '';
			}
			navlinks[i].onmouseout = function(event){
				this.title = this.tmptitle;
			}
		} 
	}


	function galleryNav(){
		if($('gallery')){
			navlinks = $$('div.item a');
			for(i=0;i<navlinks.length;i++){ 
				navlinks[i].onclick = function(){
					splits = this.href.split('?');
					args = splits[1].split('=');
					itemID = args[1];
					modalboxtype = 'gallery';
					Overlay(itemID);
					return false;
				}
			} 
		}	
	}


	function siteNav(){
		sitelinks = $$('div.menu a');
		for(i=0;i<sitelinks.length;i++){ 
			sitelinks[i].onclick = function(){
				splits = this.href.split(/http:\/\/[^\/]*/);
				new Ajax.Request(splits[1]+'?a=1', 
					{
						method: 'get',
						onComplete:function(transport){
							ajax_site(transport);
						}
					}
					);
				return false;
			}
		} 
	}


	function externalLinks(){
		sitelinks = $$('a');
		for(i=0;i<sitelinks.length;i++){ 
			if(sitelinks[i].href.substring(0,15)!=window.location.href.substring(0,15) && sitelinks[i].href.substring(0,7)!='mailto:' && sitelinks[i].href){
				sitelinks[i].className = 'external';
				sitelinks[i].onclick = function(){
					window.open(this.href,'');
					return false;
				}
			}
		} 
	}


	function ajax_site(r){
		$('body').innerHTML = r.responseText;
		portfolioNav(); 
		photoNav(); 
		siteNav();
	}	


	function checkURL(){
		var loc = window.location.search;
		if(loc!=''){
			if(loc.indexOf('item')!=-1){
				var s = loc.split('=');
				modalboxtype='portfolio';
				Overlay(s[1]);
			}
			else if(loc.indexOf('scr')!=-1){
				var s = loc.split('=');
				modalboxtype='gallery';
				Overlay(s[1]);
			}
		}
	}


	function Overlay(itemID){
		if(!($('overlay'))){
			objBody = document.getElementsByTagName("body").item(0);
			objOverlay = new Element('div', { 'id': 'overlay' });
			objOverlay.style.display = 'none';
			objBody.appendChild(objOverlay);
			
			objModalbox = new Element('div', { 'id': 'modalbox','class':'modalbox_'+modalboxtype });
			overlayloader = new Element('div',{'id':'loader'});
			objModalbox.appendChild(overlayloader);
			objModalbox.style.display = 'none';
			objBody.appendChild(objModalbox);
			

		}
		else{
			$('modalbox').innerHTML = '';
			overlayloader = new Element('div',{'id':'loader'});
			$('modalbox').appendChild(overlayloader);
		}
		
		var arrayPageSize = document.viewport.getDimensions();
		var arrayPageScrolls = document.viewport.getScrollOffsets();

		$('overlay').setStyle({Width: arrayPageSize.width});
		$('overlay').setStyle({Height: arrayPageSize.height});
		$('overlay').style.top = arrayPageScrolls.top + 'px';
		new Effect.Appear('overlay', {duration: 0.2, from:0, to:0.8 });

		if(modalboxtype=='portfolio'){
			$('modalbox').style.top = Math.round((arrayPageSize.height - 414) / 2 + arrayPageScrolls.top) + 'px';
			$('modalbox').style.left = Math.round((arrayPageSize.width - 704) / 2) + 'px';
		}
		else if(modalboxtype=='gallery'){
			$('modalbox').style.top = Math.round((arrayPageSize.height - 500) / 2 + arrayPageScrolls.top) + 'px';
			$('modalbox').style.left = Math.round((arrayPageSize.width - 800) / 2) + 'px';
		}
		new Effect.Appear('modalbox', {delay:0.2, duration: 0.1,afterFinish: function(){  setTimeout('loadItem('+itemID+')', 500)  }});  //loadItem(itemID)  }});
		$('overlay').onclick = function(){
			hideModalbox();
		}
	}
	
	
	function switchItem(itemID){
		//overlayloader = new Element('div',{'id':'loader'});
		//new Effect.Appear('modalbox_'+modalboxtype, {duration: 0.1, from:1, to:0,afterFinish: function(){$('modalbox').appendChild(overlayloader);}});
		//setTimeout('loadItem('+itemID+')', 400);
		new Effect.Appear('modalbox_'+modalboxtype, {duration: 0.1, from:1, to:0,afterFinish: function(){loadItem(itemID)}});
	}
	

	function loadItem(itemID){
		if(modalboxtype=='portfolio'){
			new Ajax.Request('/_inc/ajax.php?item='+itemID+'&type='+modalboxtype, 
				{
					method: 'get',
					onComplete:function(transport){
						ajax_portfolio(transport);
					}
				}
				);
			}
		else{
			new Ajax.Request('/_inc/ajax.php?item='+itemID+'&type='+modalboxtype, 
				{
					method: 'get',
					onComplete:function(transport){
						ajax_gallery(transport);
					}
				}
				);
		}
	}


	function hideModalbox(){
			new Effect.Appear('overlay', {duration: 0.1, from:0.5, to:0,afterFinish: function(){$('overlay').style.display='none';} });
			new Effect.Appear('modalbox', {duration: 0.1, from:1, to:0,afterFinish: function(){$('modalbox').style.display='none';}});
	}
	

	function ajax_gallery(r){
		xmlDoc = r.responseXML;
		xmlNodes = xmlDoc.documentElement.childNodes;

		var imgID,imgsrc,imgtitle,imgcaption;
		var screenshots;

		var d = new Element('div',{'id':'modalbox_'+xmlDoc.documentElement.getAttribute('type'),'class':xmlDoc.documentElement.getAttribute('type')+'_item'});
		d.style.display = 'none';

		var img = new Element('img',{'src':xmlNodes[0].getAttribute('src'),'class':'galleryscreenshot'});
		d.appendChild(img);

		var titlediv = new Element('div',{'id':'modalbox_gallerytitle'}).update(xmlNodes[0].getAttribute('title') + ': ' + xmlNodes[0].getAttribute('caption'));
		d.appendChild(titlediv);

		var closebtn = new Element('img',{'src':'/_img/btn_close.gif','id':'closebutton','title':'sluiten','alt':'sluiten'});
		closebtn.onclick = function(){
			hideModalbox();
		}

		// SCREENSHOTS NAV
		var itemnav = new Element('div',{'class':'itemnav'});
		for(var f = 0;f<xmlNodes[1].childNodes.length;f++){
			//var tmplink = new Element('a',{'href':'#'+xmlNodes[8].childNodes[f].getAttribute('id')+'_0','title':xmlNodes[8].childNodes[f].getAttribute('title')});
			var tmpitem = new Element('div',{'title':xmlNodes[1].childNodes[f].getAttribute('alt')});
			if(xmlNodes[1].childNodes[f].getAttribute('id')==xmlDoc.documentElement.getAttribute('item')){
				tmpitem.className = 'current';
			}
			else{
				tmpitem.className = '';
			}
			tmpitem.itemid = xmlNodes[1].childNodes[f].getAttribute('id');
			if(xmlNodes[1].childNodes[f].getAttribute('id')!=xmlDoc.documentElement.getAttribute('item')){
				tmpitem.onclick = function(){
					switchItem(this.itemid);
				}
			}
			tmpitem.onmouseover = function(){
				if(this.className!='current') this.className = 'over';
			}
			tmpitem.onmouseout = function(){
				if(this.className!='current') this.className = '';
			}
			//tmplink.appendChild(tmpitem);
			itemnav.appendChild(tmpitem);
		}

		$('modalbox').innerHTML = '';
		$('modalbox').appendChild(d);
		$('modalbox').appendChild(itemnav);
		$('modalbox').appendChild(closebtn);
		new Effect.Appear(d, {duration: 0.3});
	}
	

	function ajax_portfolio(r){
		xmlDoc = r.responseXML;
		xmlNodes = xmlDoc.documentElement.childNodes;
	
		var klant,project,jaar,adres,tech,ontwerp,opmerkingen,screenshots,tr;

		var d = new Element('div',{'id':'modalbox_portfolio','class':'portfolio_item'});
		d.style.display = 'none';
		itemid = xmlDoc.documentElement.getAttribute('item');		
		klant = xmlNodes[0].firstChild.nodeValue;		
		project = xmlNodes[1].firstChild.nodeValue;
		jaar = xmlNodes[2].firstChild.nodeValue;
		adres = xmlNodes[3].firstChild.nodeValue;
		tech = xmlNodes[4].firstChild.nodeValue;
		ontwerp = '';
		if(xmlNodes[5].childNodes.length) ontwerp = xmlNodes[5].firstChild.nodeValue;
		opmerkingen = '';
		if(xmlNodes[6].childNodes.length) opmerkingen = xmlNodes[6].firstChild.nodeValue;
		screenshots = xmlNodes[7].childNodes;
		
		var screen1 = new Element('img',{'src':xmlNodes[7].firstChild.getAttribute('src'),'class':'screenshot','id':'screenshot'});
		d.appendChild(screen1);
		var data = new Element('div',{'class':'data'});
		var datatable = new Element('table',{'class':'data','cellspacing':0,'cellpadding':0});
		var datatbody = new Element('tbody');
		
		// KLANT
		tr = new Element('tr'); td1 = new Element('th').update('klant'); td2 = new Element('td').update(klant); tr.appendChild(td1); tr.appendChild(td2);
		datatbody.appendChild(tr);
		// PROJECT
		tr = new Element('tr'); td1 = new Element('th').update('project'); td2 = new Element('td').update(project); tr.appendChild(td1); tr.appendChild(td2);
		datatbody.appendChild(tr);
		// JAAR
		tr = new Element('tr'); td1 = new Element('th').update('jaar'); td2 = new Element('td').update(jaar); tr.appendChild(td1); tr.appendChild(td2);
		datatbody.appendChild(tr);
		// ADRES
		tr = new Element('tr'); 
		wwwlink = new Element('a',{'href':'http://'+adres,'class':'external'}).update(adres);
		wwwlink.onclick = function(){
			window.open(this.href,'');
			return false;
		}
		td1 = new Element('th').update('adres'); td2 = new Element('td').update(wwwlink); tr.appendChild(td1); tr.appendChild(td2);
		datatbody.appendChild(tr);
		// TECH
		tr = new Element('tr'); td1 = new Element('th').update('technieken'); td2 = new Element('td').update(tech); tr.appendChild(td1); tr.appendChild(td2);
		datatbody.appendChild(tr);
		// DESIGN
		if(ontwerp!=''){
			tr = new Element('tr'); td1 = new Element('th').update('design'); td2 = new Element('td').update(ontwerp); tr.appendChild(td1); tr.appendChild(td2);
			datatbody.appendChild(tr);
		}
		// OPMERKINGEN
		if(opmerkingen!=''){ 
			tr = new Element('tr'); td1 = new Element('th').update('bijzonderheden'); td2 = new Element('td').update(opmerkingen); tr.appendChild(td1); tr.appendChild(td2);
			datatbody.appendChild(tr);
		}

		datatable.appendChild(datatbody);
		data.appendChild(datatable);
		d.appendChild(data);
		d.appendChild(new Element('div',{'class':'clear'}));
		
		var titlediv = new Element('div',{'class':'modalbox_title'}).update(klant);
		d.appendChild(titlediv);
		
		// SCREENSHOTS NAV
		var nav = new Element('div',{'id':'photonav','class':'photonav'});
		var alttext = '';
		if(screenshots.length>1){
			for(var i = 0;i<screenshots.length;i++){
				navlinkdiv = new Element('div');
				//navlink = new Element('a',{'href':'#itemid='+itemid+'&s='+i});
				if(i==0){
					iconsrc = '/_img/screenshot'+(i+1)+'_on.gif'
				}
				else{
					iconsrc = '/_img/screenshot'+(i+1)+'.gif'
				}
				linkicon = new Element('img',{'src':iconsrc,'class':'link','alt':screenshots[i].getAttribute('alt'),'title':screenshots[i].getAttribute('alt')});
				linkicon.screenshotsrc = screenshots[i].getAttribute('src');
				linkicon.screenshotalt = screenshots[i].getAttribute('alt');
				if(i==0){
					alttext = screenshots[i].getAttribute('alt');
					linkicon.isactive = true;
				}
				else{
					linkicon.isactive = false;
				}
				linkicon.onmouseover = function(){
					source = this.src;
					filename = source.substring(0,source.length-4);
					if(!this.isactive){
						this.src = filename + '_on.gif';
					}
				}
				linkicon.onmouseout = function(){
					source = this.src;
					filename = source.substring(0,source.length-4);
					if(!this.isactive){
						this.src = filename.substring(0,filename.length-3) + '.gif'
					}
				}
				linkicon.onclick = function(){
					navlinks = $$('#photonav img');
					for(l=0;l<navlinks.length;l++){ 
						navlinks[l].src = navlinks[l].src.replace(/_on\.gif/ig,'.gif');
						navlinks[l].isactive = false;
					}
					this.src = this.src.replace(/\.gif/ig,'_on.gif');
					this.isactive = true;
					$('screenshot').src = this.screenshotsrc;
					$('alt').innerHTML = '';
					buildFont(this.screenshotalt,$('alt'));
				}
				//navlink.appendChild(linkicon);
				navlinkdiv.appendChild(linkicon);
				nav.appendChild(navlinkdiv);
			}
		}
		var alt = new Element('div',{'class':'alt','id':'alt'});
		buildFont(alttext,alt);
		nav.appendChild(alt);
		d.appendChild(nav);
		
		var closebtn = new Element('img',{'src':'/_img/btn_close.gif','id':'closebutton','title':'sluiten','alt':'sluiten'});
		closebtn.onclick = function(){
			hideModalbox();
		}
		
		if(xmlNodes[8].childNodes.length){
			var itemnav = new Element('div',{'class':'itemnav'});
			for(var f = 0;f<xmlNodes[8].childNodes.length;f++){
				//var tmplink = new Element('a',{'href':'#'+xmlNodes[8].childNodes[f].getAttribute('id')+'_0','title':xmlNodes[8].childNodes[f].getAttribute('title')});
				var tmpitem = new Element('div',{'title':xmlNodes[8].childNodes[f].getAttribute('title')});
				if(xmlNodes[8].childNodes[f].getAttribute('id')==itemid){
					tmpitem.className = 'current';
				}
				else{
					tmpitem.className = '';
				}
				tmpitem.itemid = xmlNodes[8].childNodes[f].getAttribute('id');
				if(xmlNodes[8].childNodes[f].getAttribute('id')!=itemid){
					tmpitem.onclick = function(){
						switchItem(this.itemid);
					}
				}
				tmpitem.onmouseover = function(){
					if(this.className!='current') this.className = 'over';
				}
				tmpitem.onmouseout = function(){
					if(this.className!='current') this.className = '';
				}
				//tmplink.appendChild(tmpitem);
				itemnav.appendChild(tmpitem);
			}
		}
		
		
		$('modalbox').innerHTML = '';
		$('modalbox').appendChild(d);
		$('modalbox').appendChild(closebtn);
		$('modalbox').appendChild(itemnav);
		new Effect.Appear(d, {duration: 0.3});
	}


	function buildFont(str,objnode){
		var letter;
		for(var a=0;a<str.length;a++){
			if(str.substring(a,a+1)==' '){
				letter = new Element('div',{'class':'space'}).update('<!-- empty -->');
			}
			else{
				letter = new Element('div',{'class':str.substring(a,a+1)}).update('<!-- empty -->');
			}
			objnode.appendChild(letter);
		}
	}


	function launch(theURL,winName,features, myWidth, myHeight, isCenter) { //v3.0
		if(window.screen){
			var myLeft = (screen.width-myWidth)/2;
			var myTop = (screen.height-myHeight)/2;
			features+=(features!='')?',':'';
			features+=',left='+myLeft+',top='+myTop;
		}
		var openen=window.open(theURL,winName,features+((features!='')?',':'')+'width='+myWidth+',height='+myHeight);
		openen.focus();
	}