var modern = false;
	
	if(Browser.Engine.webkit && Browser.Engine.version > 3.1) { modern = true; }
	if(Browser.Engine.gecko && Browser.Engine.version > 3.5) { modern = true; }
	if(modern) { $$('body').addClass('modern') }
	
	$('pagecontainer').set('opacity',0);	
	$$('#header ul').setStyle('display','block');
	
	
	//posible transitions 
		/*{*
		
		linear
		
		quad:in 
		quad:out 
		quad:in:out
		
		cubic:in
		cubic:out
		cubic:in:out
		
		quart:in
		quart:out
		quart:in:ou
		
		quint:in
		quint:out
		quint:in:out
		
		expo:in
		expo:out
		expo:in:out

		circ:in
		circ:out
		circ:in:out	
	
		sine:in
		sine:out
		sine:in:out	

		back:in
		back:out
		back:in:out	

		bounce:in
		bounce:out
		bounce:in:out	

		elastic:in
		elastic:out
		elastic:in:out
		
		*}*/
	var loaded = [];
	
	window.addEvent('load', function() {
			
		var pages = [	
					 	{ 'id':0 , 'name':'intro'	  , 'slug':'/intro'	    , 'el': $('intro') },
						{ 'id':1 , 'name':'portfolio' , 'slug':'/portfolio' , 'el': $('portfolio') },
						{ 'id':2 , 'name':'trouwen'	  , 'slug':'/trouwen'   , 'el': $('trouwen') },
						{ 'id':3 , 'name':'albums'	  , 'slug':'/albums'    , 'el': $('albums') },
						//{ 'id':3 , 'name':'model'	  , 'slug':'/model'	    , 'el': $('model') },
						{ 'id':4 , 'name':'fotograaf' , 'slug':'/fotograaf' , 'el': $('fotograaf') },
						{ 'id':5 , 'name':'contact'	  , 'slug':'/contact'   , 'el': $('contact') }
					]
		
		// LOAD PAGES ----------------------------------------- //				
		var loadAlbums		= new Request.HTML({ url: '/html/albums'   , update: $('albums'), 	 onSuccess: function(){ pageAlbumsLoaded();   } }).get();
		//var loadModel		= new Request.HTML({ url: '/html/model'	   , update: $('model'), 	 onSuccess: function(){ pageModelLoaded();    } }).get();
		var loadTrouwen		= new Request.HTML({ url: '/html/trouwen'  , update: $('trouwen'), 	 onSuccess: function(){ pageTrouwenLoaded();  } }).get();
		var loadFotograaf	= new Request.HTML({ url: '/html/fotograaf', update: $('fotograaf'), onSuccess: function(){ pageFotograafLoaded();} }).get();
		var loadContact		= new Request.HTML({ url: '/html/contact'  , update: $('contact'),   onSuccess: function(){ pageContactLoaded();  } }).get();
		var loadPortfolio	= new Request.HTML({ url: '/html/portfolio', update: $('portfolio'), onSuccess: function(){ pagePortfolioLoaded();} }).get();
		
	
		// SITEBROWSER ---------------------------------------- //
		var settings 	= { };
		var sitebrowser = new Sitebrowser(pages,settings);
		
		
		$$('#header h1 a,#header ul li a').each(function(item,index){
			item.addEvent('click', function(e){ 
				e.stop();
				sitebrowser.gotoPage(index);
			});					 
		});
		
		
		$$('#header ul').setStyles({ 'margin-left': ((($(document.body).getSize().x-940)/2)*-1), 
									 'padding-left': ((($(document.body).getSize().x-940)/2)-28),
									 'left': ((-1 * $('header').getElement('ul').getSize().x) - ((($(document.body).getSize().x-940)/2)-28))
								  });
		
			
		sitebrowser.addEvent('loaded', function(event) {
			
			history.addState(event.slug);		

			listitems = $$('#header ul li');
			listitems.removeClass('selected');
			if(event.id>0){ listitems[(event.id-1)].addClass('selected'); }	
			
			if(event.name == "portfolio") { portfolio.menuload(); }
			if(event.name != "portfolio") { portfolio.menuunload(); }
			
			if(event.name == "intro") { $('header').getElement('ul').set('morph', { duration: 250, transition: 'quad:in' }).morph({ 'left': (-1 * $('header').getElement('ul').getSize().x) }); }
			if(event.name != "intro") { $('header').getElement('ul').set('morph', { duration: 500, transition: 'quad:out'}).morph({ 'left': 0 }); }
					
		});
		
	
		
		// PORTFOLIO ------------------------------------------ //	
		var portfolio 		= new Portfolio(portfoliopages); 
		portfolio.addEvent('menuclick', function(event) {
			history.addState(event.fullslug);
		});
		portfolio.addEvent('opened', function() {
			portfolioKeys();
		});
		portfolio.addEvent('closed', function() {														  
			browserKeys();
		});	
	
	
		
		// HOMEMENU ------------------------------------------- //
		var homemenu 	= new Homemenu({ 
								'transition': 	'',
								'duration':		250,
								'menu':			$('homemenu'), 
								'container':	$('homemenucontainer')
						});
		
		homemenu.addEvent('click',function(id){ sitebrowser.gotoPage(id); })
		
		
		// HISTORY -------------------------------------------- //
		var history = new HistoryManager();	
		var hash 	= history.getCurrentLocation();
				
		if(hash == '') { 
			hash = '/intro';
		} 
		history.addEvent('onHistoryChange', function() {
			pageTracker._trackEvent(history.getCurrentLocation(),'open');
			splithash = history.getCurrentLocation().split('/');	
			sitebrowser.openbyhash(splithash[1]);	
		});
		history.fireEvent('onHistoryChange');
		
		
		
		// WINDOW EVENTS -------------------------------------- //
		window.addEvents({ 
			'resize': function() { 
				portfolio.resize();
				sitebrowser.resize();
				homemenu.resize();
				$$('#header ul').setStyles({ 'margin-left': ((($(document.body).getSize().x-940)/2)*-1), 
								 'padding-left': ((($(document.body).getSize().x-940)/2)-28)
							  });
		
			}
		});	
		
		// KEY EVENTS ----------------------------------------- //
		function browserKeys() {
			document.removeEvents('keydown');
			document.addEvents({ 
				'keydown': function(event){
					if (event.key == 'left')  { sitebrowser.prev(); }
					if (event.key == 'right') { sitebrowser.next(); }
				}
			});
		}
		browserKeys();
		
		document.addEvent('keydown', function(event){ if(event.key == 'tab'){ event.stop(); } });
			
		function portfolioKeys() {
			document.removeEvents('keydown');
			document.addEvents({ 
				'keydown': function(event){					
					if (event.key == 'left')  { portfolio.prev(); }
					if (event.key == 'right') { portfolio.next(); }
					if (event.key == 'esc')   { portfolio.close(); }
					if (event.key == 'up')	  { portfolio.togglefull(); }
					if (event.key == 'down' && !$('full')) { portfolio.close(); }
					if (event.key == 'down' &&  $('full')) { portfolio.leavefull(); } 
				}
			});
		}		
		
		
		// page scripts --------------------------------------- //
		
		function pageFotograafLoaded(){ 
			loaded.include('fotograaf');
			init();
		}		
		function pageAlbumsLoaded(){ 
			loaded.include('albums');
			init();
		}
		function pageModelLoaded(){ 
			loaded.include('model');
			init();
		}		
		function pageContactLoaded()  {
			loaded.include('contact');
			init();
		}		
		function pageTrouwenLoaded()  { 
			loaded.include('trouwen');
			init();
		}	
		
		function pagePortfolioLoaded()  { 
			loaded.include('portfolio');
			init();
		}	
				
		function init(){ 			
			if(loaded.length == 5){
				$$('#portfolio .inner').setStyle('min-height', $(window).getSize().y );
				$$('#pagecontainer .page ul.cols2 li:last-child').setStyle('margin-right', 0);
				$$('a.download').set('opacity',0.01);	
				$('pagecontainer').set('opacity',1);	
				sitebrowser.resize();
			 	SlideAndFade();
			 	playvideo();
				
				$$('input[type=text],textarea').addEvent('keydown', function(event){ 
					if(event.key == 'tab'){ 
						if(this.getNext('input[type=text]')) {
							this.getNext('input[type=text]').focus(); 
						} else if(this.getParent('form').getElement('textarea') && this != this.getParent('form').getElement('textarea')) {
							this.getParent('form').getElement('textarea').focus();
						} else {
							this.getParent('form').getElement('input[type=text]').focus();	
						}
					} 
				});
					
				
				$$('form .submit').addEvent('click', function(e){ 
					e.stop(); 
					
					var form = [];
					var formvalues = [];
					var countform = 0;
					
					this.getParent('form').getElements('textarea,input').each(function(item,index){
												
						if(item.value == 'contact' && index == 1){ 
							formvalues = ['bericht','type','pagina','naam','mail','onderwerp','trouwdatum'];
						} 
						
						if(item.value == 'informatiepakket' && index == 0){ 
							formvalues = ['type','pagina','naam','mail','ontvanger','ontvangermail','ontvangeradres'];
						} 						
						
						if(item.value!=''){
							countform++;
							form.include(item.value);
						} else {
							form.include('<leeg veld>');
						}
						
						if(item.get('type') != 'hidden' && item.get('type') != 'submit'){
							item.set('value','');
						}
						
					}); 
									
					if(countform>3){
						var jsonRequest = new Request.JSON({ url: '/json/mail', onComplete: function(){
						
							this.set('value','Je bericht is verzonden, bedankt!');
							this.setStyle('color', '#FFE100');
					
						}.bind(this)}).get(form.associate(formvalues));						
					}
				});
				
				
				$$('input,select,textarea,a').set('tabindex',0);
				
			}
		}
		
		
		function playvideo(){
			$$('.playvideo').addEvent('click',function(e){
				e.stop();
				
				new Request.JSONP({
				  url: 'http://vimeo.com/api/oembed.json',
					data: {
						url: this.get('href'),
						autoplay: true, 
						width: 620, 
						height: 360
					},
					onComplete: vimeoresponse
				}).send();
				
				
			});
		}
		
		function vimeoresponse(vimeo){
			
			pageTracker._trackEvent('vimeo','play',vimeo.title);
			
			$('pagecontainer').setStyle('display','none');
					
			this.overlay 		= new Element('div', { 'id':'overlay', 'opacity':'0.8', events: { 'click': function(){ $('overlay').destroy(); $('vimeocontainer').destroy(); $('pagecontainer').setStyle('display', 'block'); } } }); 
			this.vimeocontainer   = new Element('div', { 'id':'vimeocontainer' }); 
			this.vimeocontainer.set('html',vimeo.html);
			//this.vimeocontainer.getElement('object').set('height','100%'); 
			//this.vimeocontainer.getElement('object').set('width','100%'); 
			this.overlay.inject($(document.body));
			this.vimeocontainer.inject($(document.body));
		}
	
		function SlideAndFade() {
			$$('.fade').set('opacity',0);
			$$('.firstimage').addEvents({ 'mouseenter': snfenter});			
			$$('.secondimage').addEvents({ 'mouseenter': snfenter});			
		}
		
		var snfleaveactionslide;
		var snfleaveactionfade;
	
		var snfenter = function() {
			
			$$('.activeslide').removeClass('activeslide');
			this.addClass('activeslide');
			snfleaveothers();
			
			if(this.getElement('.slide')) {
	
				snfleaveactionslide = $clear(snfleaveactionslide);
				snfleaveactionfade = $clear(snfleaveactionfade);
				
				if(this.getElement('.slide').getStyle('top').toInt() == 306){
					this.removeClass('leave');	
				}			
			
				this.removeEvents('mouseleave');
				this.addEvent('mouseleave',snfleave);
				
				// the effect
				this.getElement('.slide').tween('top',0); 				
				if(this.getElement('.fade')) {
					(function(){ 
						this.getElement('.fade').fade('in');		
					}).bind(this).delay(400);
				}
				
			}
		}
		
		var snfleave = function() { 
			if(this.getElement('.slide') && !this.hasClass('leave')) {
				snfleaveactionslide = (function(){ 
					this.addClass('leave');
					this.getElement('.slide').tween('top',306); 				
				}).bind(this).delay(2000);
				if(this.getElement('.fade')) {
					snfleaveactionfade = (function(){ 
						this.getElement('.fade').fade('out');
					}).bind(this).delay(1800);
				}
			}
			
		}	
		
		var snfleaveothers = function() { 
			$$('.firstimage,.secondimage').each(function(item){
				if(!item.hasClass('activeslide')){
					if(item.getElement('.slide')) { item.getElement('.slide').tween('top',306); }
					if(item.getElement('.fade')) { item.getElement('.fade').fade('out'); }
				}
			});
		}
		
	});