var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{ string: navigator.userAgent, subString: "Chrome", identity: "Chrome"},
		{ string: navigator.userAgent, subString: "OmniWeb", versionSearch: "OmniWeb/", identity: "OmniWeb"},
		{ string: navigator.vendor, subString: "Apple", identity: "Safari", versionSearch: "Version"},
		{ prop: window.opera, identity: "Opera"},
		{ string: navigator.vendor, subString: "iCab", identity: "iCab"},
		{ string: navigator.vendor, subString: "KDE", identity: "Konqueror"},
		{ string: navigator.userAgent, subString: "Firefox", identity: "Firefox"},
		{ string: navigator.vendor, subString: "Camino", identity: "Camino"},
		{	string: navigator.userAgent, subString: "Netscape", identity: "Netscape"},
		{ string: navigator.userAgent, subString: "MSIE", identity: "Explorer", versionSearch: "MSIE"},
		{ string: navigator.userAgent, subString: "Gecko", identity: "Mozilla", versionSearch: "rv"},
		{ string: navigator.userAgent, subString: "Mozilla", identity: "Netscape", versionSearch: "Mozilla"}
	],
	dataOS : [
		{ string: navigator.platform, subString: "Win", identity: "Windows"},
		{ string: navigator.platform, subString: "Mac", identity: "Mac"},
		{ string: navigator.platform, subString: "Linux", identity: "Linux"}
	]

};



/*
Browser Specific HACKS

	- might seem better to use conditional commenting,  but 
		it seems that one of our test machines doesn't know 
		if it is IE 6 or 7. 
*/

// DONT LET IE MAC USERS IN
BrowserDetect.init();
if(BrowserDetect.browser === 'Explorer' && BrowserDetect.OS === 'Mac'){
	document.location = 'unsupported.htm';
}

ie = BrowserDetect.browser === 'Explorer';
// ie5 = (BrowserDetect.browser === 'Explorer' && BrowserDetect.version === 5); not even
ie6 = (BrowserDetect.browser === 'Explorer' && BrowserDetect.version === 6);

if(ie){
	Event.observe(window,'load',function(){
		
		//IE Specific
		$('menu_holder').setStyle({'position':'absolute','top':'0px'});

		//IE6 Specific
		if(ie6){
				$('overlay_text').setStyle({'position':'absolute'});
				$('vcard').setStyle({'position':'absolute'});
		}
	});
}






	introContent = "";
	
	function hide_intro(){
		if($('intro')){
			
			$('content').hide();
			$('thumbs').hide();
			
			$('intro').fade({afterFinish:function(){
				// $('right_panel').appear();
				$('right_panel').setStyle({width:'1px'});
				$('right_panel').show();
				$('right_panel').morph({width:'580px'},{afterFinish:function(){
					$('content').appear();
					$('thumbs').appear();
				}});
				if($('intro'))
					$('intro').remove();
				
			}});				
			introContent = $('intro').innerHTML
		}
	}
	function show_intro(){	
		if(!$('intro')){
			$('right_panel').fade();
			intro = new Element('div',{'id':'intro'});
			intro.update(introContent);
			intro.hide();
			$('page').insert({'bottom':intro});
			intro.appear();
		}		
		
	}


	function sc_load (i) {
		hide_intro();
		sc_load_p(i,0)
		
	}
	function sc_load_p (i, page){
		$('content').update('');
		$('thumbs').update('');
		// $('thumbs').show();
//		$('thumbs').setStyle({'height':'auto'});
		//select the items that we need
		start = page * 16;
		end = (page + 1)* 16;
		

		//sort out the buttons TODO
		nav = new Element('div',{'class':'sc_nav'})
		
		if(i === 0){
			nav.insert({top:'<div class="spt">SELECTED&nbsp;PROJECTS</div>'})
		}
		
		
		next = new Element('div',{'class':'button','id':'sc_next'})
		next.update('NEXT PAGE &gt;');
		next.observe('click',function(){
			sc_load_p(i,page+1)
		})	
		
		if(end < Data.showcase[i].length){
			nav.insert({bottom:next})
		}
		
		prev = new Element('div',{'class':'button','id':'sc_prev'})
		prev.update('&lt PREVIOUS PAGE');
		prev.observe('click',function(){
			sc_load_p(i,page-1)
		})
		
		if(page > 0){
			nav.insert({bottom:prev});
		}
		
		$('thumbs').insert({top:nav})
		

		count = 0;
		Data.showcase[i].each(function(th,i){
			if(start <= i && i < end ){
				div = new Element('div',{'class':'thumb'});
				im = new Element('img');//,{src:th.url}  set later (IE caching)
				div.observe('mouseover',function(e){
					startHover(th.text);
					highlight_group(this.g_id)
					highlight_project(this.p_id)
				}.bind(th))
				div.observe('mouseout',function(e){
					clearHover();
					un_highlight_group(this.g_id)
					un_highlight_project(this.p_id)
				}.bind(th))
				div.observe('click',function(e){
					select_group(this.g_id);
					select_project(this.p_id);
					clearHover();
				}.bind(th))
				im.observe('load',function(order){
					d = order/20;
					this.morph('width:145px;',{duration:0.2,delay:d});
				}.bind(div,count))
				count++
			
				im.writeAttribute({src:th.url});
			
				div.update(im);
				$('thumbs').insert({'bottom':div})
			
			
				if(i%4 == 3){
					$('thumbs').insert({'bottom':'<div class="break"></div>'});
				}
			}
		});
		
		resize_page();
	}
	function st_load(name){
		hide_intro();
		$('thumbs').update('');
		//$('thumbs').hide();
		
		$('thumbs').update(Data.statics[name]);
		document.location.hash = name;
		resize_page();
	}
	
	function pr_load(id){
		hide_intro();
		var project = Data.projects[id];
		
		$('thumbs').update('');
		// $('content').update('')		// $('thumbs').hide();
//		$('thumbs').setStyle({'height':'0px'});
		
		left  = new Element('div',{'class':'holder'});
		right = new Element('div',{'class':'holder'});
		l_in  = new Element('div',{'class':'in'});
		r_in  = new Element('div',{'class':'in'});
		
		left.update(l_in);
		l_in.update('Project : <strong>'+project.title+'</strong>');
		
		right.update(r_in);
		r_in.update(project.info)
		
		
		d1 = new Element('div',{'id':'project_images'});
		d2 = new Element('div',{'id':'project_images_table'});
		d3 = new Element('div',{'id':'ignore'});
		
		for (var i=0; i < project.ims.length; i++) {
			var url = project.ims[i];
			display = i===0 ? '' : 'display:none;'
			i1 = new Element('div',{'class':'project_image_holder','style':'background-image:url('+url+');'+display})
			i2 = new Element('div',{'style':'background-image:url('+url+');width:1px;height:1px;position:absolute;top:-1px'})
			d2.insert({bottom:i1});
			d3.insert({bottom:i2});
		};
		
		d1.update(d2);
		d1.insert({bottom:d3});
		
		nav = new Element('div',{'id':'img_nav'});
		prev = new Element('div',{'class':'button','id':'prev_button'});
		next = new Element('div',{'class':'button','id':'next_button'});
		count = new Element('div',{'class':'button','id':'image_count'});
		back_pg = new Element('div',{'class':'button','id':'back_project_group'});
		
		prev.update("&lt; Previous Image")
		next.update("Next Image &gt;")
		count.update("<strong>1</strong> / " + project.ims.length)
		prev.observe('click',function(){
			// alert('prev');
			goImage(-1);
		})
		next.observe('click',function(){
			// alert('next');
			goImage(1);
		})
		back_pg.update('SEE ALL ' + project.group_name + ' PROJECTS')
		back_pg.observe('click',function(){
			sc_load(this.group_id);
		}.bindAsEventListener(project))
		
		nav.insert({bottom:prev});
		nav.insert({bottom:next});
		nav.insert({bottom:count});
		nav.insert({bottom:back_pg});
		
		
		$('thumbs').insert({bottom:left});
		$('thumbs').insert({bottom:right});
		$('thumbs').insert({bottom:nav});
		$('thumbs').insert({bottom:d1});
		
		cImage = 0;
		resize_page();
		
	}
	
	
	function pe_load(id){
		hide_intro();
		var person = Data.people[id];
		
		$('thumbs').update('');
		$('content').update('');
		// $('thumbs').hide();
//		$('thumbs').setStyle({'height':'0px'});
		
		left  = new Element('div',{'class':'holderb'});
		right = new Element('div',{'class':'holderb'});
		l_in  = new Element('div',{'class':'inb'});
		r_in  = new Element('div',{'class':'inb'});
		
		left.update(l_in);
		l_in.update('<div><strong><big>'+person.name+'</big></strong></div><div>'+person.position+'</div><div><a href="mailto:'+person.email+'">'+person.email+"</a></div>");
		
		right.update(r_in);
		r_in.update(person.info);
		
		
		if(person.img != 'none'){
			im = new Element('img',{src:person.img,'height':'440','class':'fix'})
			$('thumbs').insert({bottom:im});
		}
		
		$('thumbs').insert({bottom:left});
		$('thumbs').insert({bottom:right});
		
		cImage = 0;
		resize_page();
		
	}
	
	
	cImage = 0;
	function goImage (change) {
		prevImage = $('project_images_table').down(cImage);
		cImage += change;
		nextImage = $('project_images_table').down(cImage);
		if($(nextImage)){
			nextImage.appear();
			prevImage.fade({delay:0.25});
			num_ims = $('project_images_table').childElements().length;
			$('image_count').update('<strong>' + (cImage + 1) + '</strong> / ' + num_ims);
		} else {
			cImage -= change;
		}
		
		
	}
	
	



  var resize_page = function(){
		//equalise left & right cols,  and expand to page height if necessary
		
		$('left_panel').setStyle({height:'auto'})
		$('right_panel').setStyle({height:'auto'})
		
		ph = document.viewport.getHeight();
		// lh = $('left_panel').getHeight();
		rh = $('right_panel').getHeight();
		
		//max height
		// mh = (ph > lh ? ph : lh) > rh ? (ph > lh ? ph : lh) : rh;
		mh = ph > rh ? ph : rh;
		
		
		if(ie6){
			if($('bgimage') && $('bgimage').getHeight() > 0){
					mh = $('bgimage').getHeight();
			}
		}

		// console.log(ph,lh,rh,mh);
		$('left_panel').setStyle({height:mh+'px'})
		$('right_panel').setStyle({height:mh+'px'})
		
		
	}

	var resize_bg = function () {
		if($('page')){
			o = ((document.viewport.getWidth()-$('page').getWidth()) / 2);
			o = o < 0 ? 0 : o;
			$('page').setStyle({left:o+'px'});
		}
		resize_page();
		
		if($('bgimage')){
			s = Math.max(
				(document.viewport.getWidth() + 100) / 1000,
				(document.viewport.getHeight() + 100) / 600
			);
			w = s * 1000;
			h = s * 600;
			$('bgimage').setStyle({width:w+'px',height:h+'px'})
		}
		
/*
		h = document.viewport.getHeight() + 100;
		$('left_panel').setStyle({height:h+'px'});
		$('right_panel').setStyle({height:h+'px'});
*/
	}
	Event.observe(window, 'resize',resize_bg);
	
	


	
	function markSelected(id){
		
		$$('#l2 li').each(function(el){
			el.removeClassName('selected');
		})
		$(id).addClassName('selected');
	}
	
	function markSelected_l1(id){

		$$('#l1 li').each(function(el){
			el.removeClassName('selected');
		})
		$(id).addClassName('selected');
	}
	
	var moveDuration = 0.2;
	var current_level = 0;



	/* the new menu function - 4 times shorter & simpler */
	function m(el,i){
		$('l1').childElements().each(function(el,index){
			if(index == i){
				el.appear({duration:moveDuration});
				el.childElements().each(function(li){
					li.removeClassName('selected');
				})
			} else {
				el.hide();
			}
		});
		$(el).addClassName('selected');
		$(el).siblings().each(function(s){s.removeClassName('selected')});
	}
	
	function un_highlight_group(i){
		g = $('project_group_' + i);
		if(g){
			g.removeClassName('g_selected')
		}
	}

	function highlight_group(i){
		g = $('project_group_' + i);
		if(g){
			g.addClassName('g_selected')
		}
	}
	function select_group (i) {
		g = $('project_group_' + i);
		if(g){
				markSelected_l1('project_group_' + i);			
				$$('#menu_holder li').each(function(l){
					l.removeClassName('g_selected')
				})
		}
	}


	// alert(new String('something').gsub('s','-'))


	function un_highlight_project(i){
		g = $('project_' + i);
		if(g){
			g.removeClassName('g_selected')
		}
	}

	function highlight_project(i){
		g = $('project_' + i);
		if(g){
			g.addClassName('g_selected')
		}
	}

	function select_project (i) {
		pr_load(i);
		g = $('project_' + i);
		if(g){
			
			// alert(g.readAttribute('onClick'));
			eval(g.readAttribute('onClick'));
		}
	}


	// Event.observe('')
	Event.observe(window,'load',function(){
		
		

		function displaySite(){
				resize_bg();
				
				
				$('vcard').morph('bottom:-30px',{afterFinish:function(){
					$('vcard').hide();
				}});
				$('logos').fade({afterFinish:function(){
					$('thebody').morph('background-color:#fff',{duration:dur,afterFinish:function(){
						$('page').appear({afterFinish:function(){
							
							/* background of panel depends on if we are dealing with IE*/
							bgiedep = ie6 ? "background-image: none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/trans_w.png', sizingMethod='scale');":"background-image:url(/images/trans_w.png);";
							
							$('left_panel').writeAttribute("style",bgiedep);
							
							//load background
							bcg = new Element('img',{id:'bgimage','style':'display:none'});
							bcg.observe('load',function(){
								resize_bg();
								$(this).appear({'duration':'5',delay:2});
							}.bind(bcg));
							$('bg').update(bcg);
							bcg.writeAttribute('src','/images/bg/n_'+Math.floor((Math.random()*4))+'.jpg');
							
						}});
						
						//load the first section instead of intro
						// $('intro').appear({delay:2,duration:dur/4})
						sc_load(0);m(this,0);
					}});
					
				}});
			
		}

		
		
			dur = 2;
			
			fullIntro = (!document.location.hash || document.location.hash == '');
		
		
			if(fullIntro){
				t = Math.floor((document.viewport.getHeight() / 2)-25);
				$('logos').setStyle({top:t + 'px'})
				$('logo1').appear({delay:0.2,duration:dur});
				$('logo2').appear({delay:2.3,duration:dur});
				
				t = document.viewport.getHeight()
				$('vcard').setStyle({bottom:'-30px'})
				$('vcard').show({delay:3});
				$('vcard').morph('bottom:20px',{delay:3});		
				
				//
				$('logo2').observe('click',function(e){
					displaySite();
				});		
			} else {
				//quick version
				dur = dur/3;
					displaySite();
			}



				
			Event.observe(window,'scroll',resize_bg)
		

			Event.observe(document,'mousemove',function(event){
				if(hover_active){
					$('overlay_text').setStyle({left:(Event.pointerX(event) +10 )+ 'px',top:(Event.pointerY(event) +10) + 'px'})
					$('overlay_text').show();	
				} 
			})
		
		
		
		
	})
	
	

	var hover_active = false;
	function startHover(text){
		$('overlay_text').update(text);
		hover_active= true;
	}
	function clearHover(){
		$('overlay_text').hide();
		hover_active= false;
	}


/*

The main thing to think about when you are reading this code is that
this site went through several major overhauls on the same code base 
before going live - hence the convoluted overkill going on here.

*/