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

	$$(".navItem h2").invoke("observe","click",toggleList);
	$$(".navItem h2").invoke("observe","mouseover",makeGray);

	$$('.navItem a').invoke("observe","click",function(event){
		Event.stop(event);
		testSubItem(event);

	});

	$$('.impression img').invoke('observe','mouseover',function(event){
		var element = Event.element(event);
		var alt		= new showAltText(element);
	});

	$('search').observe("focus",function(){
		var el = $('search');
		if(el.hasClassName("inactive")){
			el.removeClassName("inactive");
			el.value= "";
		}
	});
	
	$$(".sizer span").invoke("observe","click",function(event){
		var el = Event.element(event);
		$$(".sizer span").invoke("removeClassName","active");
		el.addClassName("active");
		var size = el.id;
		new Ajax.Request("pages/set_font_size.php",{
			parameters: "size="+size,
			onComplete: function(){
				$('maincontainer').writeAttribute("className",false);
				$('maincontainer').addClassName(size);
			}
		});
	});
});

function validateForm(formid){
	
	var inputs 		= $(formid).getInputs('text');
	var form_values = $(formid).serialize(true);
	var reg 		= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	var missed 		= false;
	var fieldCheck	= "";
	inputs.each(function(i){
		
		if(i.hasClassName("required") && $F(i) == ""){
			i.addClassName("missed");
			missed 		= true;
			fieldCheck 	= "<span>!</span> Je hebt niet alle velden ingevuld, vul de gemarkeerde velden in.";
		}else i.removeClassName("missed");

	});
	
	if(missed == true){
		$('msg').update(fieldCheck).addClassName("missed");
		return false;
	}	
}

function makeGray(event){
	var el = Event.element(event);
	el.addClassName("grey");
	el.next(1).addClassName("grey");
	el.observe("mouseout",function(){
		el.removeClassName("grey");
		el.next(1).removeClassName("grey");
	});
}
var showAltText = Class.create({
	initialize: function(element) {
		this.element	= element;
		this.altText	= this.element.alt;
		if(this.altText == "") return;
		this.overAlt 	= false;
		
		this.element.stopObserving("mouseover");
		this.showAlt();
	},
	showAlt: function(){	
		this.div = new Element('div',{'class': 'altText'}).update(this.altText).setOpacity(0.9);
		var iw	= this.element.getWidth();
		this.div.setStyle({
			width: (iw-22) + 'px'
		});
		this.element.insert({after: this.div});
		
		var pos = this.element.positionedOffset();
		var h	= this.element.getHeight();
		var dh	= this.div.getHeight();
		
		this.div.setStyle({
			position: 'absolute',
			top: (pos[1]+h-dh-6) + 'px',
			left: (pos[0]+6) + 'px'
		});
		
		this.div.show();
		this.observeAltHover();
		this.observeMouseout();
	},
	observeAltHover: function(){
		this.div.observe("mouseover",function(){
		
			this.overAlt = true;
		
			this.div.observe("mouseout",function(){
				this.overAlt = false;
			}.bind(this));
			
		}.bind(this));
	},
	observeMouseout: function(){
	
		setTimeout(function(){
			this.element.observe('mouseout',function(){

				if(this.overAlt == true) return;		
				this.div.remove();
				this.stopObserve();	

			}.bind(this));
			
		}.bind(this),100);
		
	},
	stopObserve: function(){
		this.element.stopObserving('mouseout');
		this.element.observe("mouseover",function(){
			var alt = new showAltText(this.element);
		}.bind(this));
	}
});

function testSubItem(link){
	var element = Event.element(link);
	
	var ul		= element.up(1);
	$$("#"+ul.id+" a").invoke("removeClassName","active");
	element.addClassName("active");
	
	var pageId 	= element.up(2).previous().id;
	var lbl 	= element.innerHTML;
	var pars 	= element.id.split("||");
	var eid		= pars[0];
	var mod		= pars[1];
	
	$('content').hide();
	
	var ul = element.up().previous();
	if(mod == "bouwprojecten" &&  ul == null) var showmap = 1;
	else var showmap = 0;


	new Ajax.Updater('content','pages/get_item.php',{
		parameters: 'lbl='+pageId+"&name="+lbl+'&eid='+eid+'&mod='+mod+'&showmap='+showmap,
		onComplete: function(){
			//new Effect.Appear('connector',{duration:0.5});
			new Effect.Appear('content',{duration:0.5});
			
			$$('.impression img').invoke('stopObserving','mouseover');
			$$('.impression img').invoke('observe','mouseover',function(event){
				var element = Event.element(event);
				var alt		= new showAltText(element);
			});
			
			if($('nieuwParkprojecten') !=null){	
				var flashvars = {};
				var params = {};
				var attributes = {};
				var swf = swfobject.embedSWF('flash/np-map.swf', 'nieuwParkprojecten', '460', '305', '8.0.0', false, flashvars, params, attributes);
			}
			
		}
	});
}

function updateMaskImg(id){
	new Effect.Fade('pageMaskImg',{duration:0.2,
		afterFinish: function(){
			$('pageMaskImg').src= "images/"+id+".jpg";
			new Effect.Appear('pageMaskImg',{duration:0.2,delay:0.2});
		}
	});
}

function toggleList(event){
	var element = Event.element(event);
	var pars 	= element.next().down(2).id.split("||");
	var eid		= pars[0];
	var mod		= pars[1];
	var elid	= element.id.split("-");
	var click 	= elid[1];
	
	if(element.up().hasClassName("active")) return;
	
	$('connector').hide();
		
	$$(".navItem").each(function(item){
		if(item.hasClassName("active")){
			var el = item.down().next();
			new Effect.SlideUp(el,{duration:0.5});
			item.removeClassName("active");
		}
	});
	$$(".navItem").invoke("removeClassName","active");
	
	//updateMaskImg(element.id);
	
	element.up().addClassName("active");
	var ul		= element.next();
	new Effect.BlindDown(ul,{duration:0.5,
		afterFinish: function(){
		}
	});
	
	$('content').hide();
	if(mod == "bouwprojecten") var showmap = 1;
	else var showmap = 0;
	new Ajax.Updater('content','pages/get_item.php',{
		parameters: 'eid='+eid+'&mod='+mod+'&showmap='+showmap,
		onComplete: function(){
			new Effect.Appear('connector',{duration:0.5});
			new Effect.Appear('content',{duration:0.5});

			$$('.impression img').invoke('stopObserving','mouseover');
			$$('.impression img').invoke('observe','mouseover',function(event){
				var element = Event.element(event);
				var alt		= new showAltText(element);
			});
			if($('nieuwParkprojecten') !=null){	
				var flashvars = {};
				var params = {};
				var attributes = {};
				var swf = swfobject.embedSWF('flash/np-map.swf', 'nieuwParkprojecten', '460', '305', '8.0.0', false, flashvars, params, attributes);
			}
		}
	});

/*	if(element.id == "bp"){
		$('connector').addClassName('reversed').setStyle({
			top: '239px',
			height: '48px'
		});	
	}
	else{*/
		var h = click * 49+13;
		if(h < 20){
			h = 2;
			$('connector').addClassName('reversed')
		}else $('connector').removeClassName('reversed');
		
		$('connector').setStyle({
			//top: '280px',
			height: h+'px'
		});
//	}
	
}