document.observe("dom:loaded", function(event) {
	setSubmenuIllustrator();
	
	// Alle links met een class 'externe-link' openen in een nieuw venster
	$$('a.externe-link').each( function(el) {
		el.target =  '_blank';
	});
	
	// Items in hoofdmenu krijgen class zodat submenu werkt in ie6
	$$('ul#hoofdmenu li.level1').each( function(el) {
		Event.observe( el, 'mouseover', function() {
			el.addClassName('hover-ie');
		});
		Event.observe( el, 'mouseout', function() {
			el.removeClassName('hover-ie');
		});
	});
	
	// Tekstvelden vullen
	setValue( $('zoeken-q'), 'zoeken...' );

	// Print-optie toevoegen
	var division = $('opties');
	if (division) {
		var url = getStrippedUrl() + '?actie=print';
		var lijst = new Element('ul');
		var item = new Element('li');
		
		var link = new Element('a', {
			'id': 'print',
			'class': 'none',
			'href': url
		}).update('Print pagina').observe ( 'click' , function( event ) {
			event.stop();
			print(url);			
		});
		item.appendChild(link);
		lijst.appendChild(item);
		division.appendChild(lijst);
	}
	
	// Alle items met class 'inklapbaar' nagaan en die een extra
	// class 'ingeklapt' geven
	$$('.inklapbaar').each( function(el) {
		el.addClassName('ingeklapt');
		
		var heading2 = null;
		if( heading2 = el.select('h2')[0]) {
			Event.observe( heading2, 'click', function(event) {
				el.toggleClassName('uitgeklapt');
			});
		}
	});
	
	// Alle blokken met de class 'clickable-block' mouseover onhover geven,
	// eerste <a> ophalen en onclick naar die link sturen
	clickable('.element', 'clickable-hover');
	clickable('#submenu-links li', 'hover');
	clickable('#laatste-projecten ul li', 'hover');
	clickable('.corporaties', 'corporaties-hover');
	clickable('.onderwijs', 'onderwijs-hover');
	clickable('.overheden', 'overheden-hover');
	clickable('.vastgoed', 'vastgoed-hover');
	clickable('.bedrijven', 'bedrijven-hover');
	clickable('.zorg', 'zorg-hover');
	clickable('.mfa', 'mfa-hover');
	
	//setBorderIllustrator();
	
	// Nieuwsscroller op de homepage	
	$$('.scroll-container').each(function(containerdiv) {
		
		scrollArea = containerdiv.down('.scrollarea');
		
		scrollArea.animationStopped = false;
		
		scrollArea.setStyle(
					{width:'6000px', 
					 marginLeft:containerdiv.down('.scroll-content').getWidth()+'px'
					}
		);
		
		scrollButtons = containerdiv.select('#dots li');
				
		scrollArea.goToElement = function (index) {

			//console.log("Going to elemnt " + index);
			
			this.currentElementIndex = index;
			var ml = 0;
			
			for (var i=0; i<index; i++) {
				ml += containerdiv.select('.scroll-content')[i].getWidth()+parseInt(containerdiv.select('.scroll-content')[i].getStyle('margin-right'));
			}			
			
			new Effect.Morph(this, { style:'margin-left:-' + ml + 'px;', duration: 1});
			
			scrollButtons.each( function(el) {
				el.down('a').removeClassName('active');
			});
			
			scrollButtons[this.currentElementIndex].down('a').addClassName('active');			
			
		}
		
		scrollArea.goToPrevious = function () {
			if (this.currentElementIndex>0)
				return this.goToElement(this.currentElementIndex-1);
			else
				return this.goToElement(containerdiv.select('.scroll-content').length-1);
		}
		
		scrollArea.goToNext = function () {
			if (this.currentElementIndex<containerdiv.select('.scroll-content').length-1)
					return this.goToElement(this.currentElementIndex+1);
			else
					return this.goToElement(0);
		}
		
		scrollArea.goToElement(0);
		
		scrollArea.play = function () {
			if (this.animationStopped) return;
			this.goToNext();
			this.play.bind(this).delay(8); 
		}
		
		scrollArea.play.bind(scrollArea).delay(8); 
		
		scrollButtons.each( function(el, index) {
			el.observe('click', function(event) {
				event.stop();
				this.animationStopped = true;
				this.goToElement(index);
			}.bind(scrollArea));
		});
		
		containerdiv.down('.prev').observe('click', function(event) {
			event.stop();
			this.animationStopped = true;
			this.goToPrevious();
		}.bind(scrollArea));
		
		containerdiv.down('.next').observe('click', function(event) {
			event.stop();
			this.animationStopped = true;
			this.goToNext();
		}.bind(scrollArea));
		
	});
});

Event.observe(window, "load", function(event) {
	setBorderIllustrator();
});

Event.observe(window, "resize", function(event) {
	//this.setSubmenuIllustrator.bindAsEventListener(this);
	//this.setBorderIllustrator.bindAsEventListener(this);
	setBorderIllustrator();
	setSubmenuIllustrator();
});

//Event.observe(window, "resize", this.setSubmenuIllustrator.bindAsEventListener(this) );
//Event.observe(window, "resize", this.setBorderIllustrator.bindAsEventListener(this) );

function getStrippedUrl() {
	var url = location.href;
	var index = url.lastIndexOf('#');
	return url.substr( 0, index );
}

function print( url ) {
  popup = window.open( url, "help", "width=720, height=700, top=100, left=100, toolbar=0, resizable=1, scrollbars=1, status=0.menubar=0, location=0, directories=0");
  popup.focus();
}

function setValue( el, nieuwevalue ) {
	if (el !== null && el.value == '') {
		el.setAttribute('value', nieuwevalue);
		
		Event.observe(el, 'focus', function(){
			if (el.value == nieuwevalue) 
				el.value = '';
		});
		Event.observe(el, 'blur', function(){
			if (el.value == '') 
				el.value = nieuwevalue;
		});
	}
}



//Zoekt naar elementen met class die wordt meegegeven met eerste parameter
//Haalt per element eerste <a> op en haalt link uit die <a> en zet 'm onclick
//op het element. Verder wordt onmouseover een class (tweede paramter) aan het
//element toegevoegd
function clickable( selector, classnameHover ) {
	$$(selector).each( function(el) {
		var anchors = el.getElementsBySelector('a');
		//var link = anchors[0] ? anchors[0] : '';
		
		if( anchors[0] ) {
			Event.observe(el, 'click', function(event) {
				location.href = anchors[0];
			});
		}
		
		Event.observe(el, 'mouseover', function(event) {
			el.addClassName(classnameHover);
		});
		Event.observe(el, 'mouseout', function(event) {
			el.removeClassName(classnameHover);
		});
	});
}

function setSubmenuIllustrator() {
	// Zaken die we nodig hebben voordat we iets kunnen berekenen
	var submenu = null;
	var submenuIllustrator = null;
	
	// Checken of we de zaken hierboven kunnen vinden, dan kunnen we verder
	if( (submenu = $('submenu-links')) && (submenuIllustrator = $('submenu-illustrator')) ) {

		// Stel containerbreedte default in op 974(px) (zoals op dit moment in css)
		var containerBreedte = getContainerBreedte();
		// Als we container in DOM op kunnen halen, dan halen we de breedte van die container op
		var container = null;
		if( container = $$('div.container')[0] ) {
			containerBreedte = parseInt( container.getStyle('width') );
		}
		
		// Bereken de breedte van submenuIllustrator dmv volgende formule
		// (breedte viewport - breedte container) / 2
		var viewportBreedte = document.viewport.getWidth();
		var breedte = viewportBreedte > containerBreedte ? (document.viewport.getWidth() - containerBreedte) / 2 : 0;
		breedte = breedte.ceil();
		
		submenuIllustrator.setStyle({
			backgroundColor: submenu.getStyle('backgroundColor'),
			display: 'block',
			height: submenu.getHeight() + 'px',
			top: submenu.cumulativeOffset().top + 'px',
			width: breedte + 'px'
		});
	}
}

function getContainerBreedte() {
	var containerBreedte = 974;
	var container = null;
	if( container = $$('div.container')[0] ) {
		containerBreedte = parseInt( container.getStyle('width') );
	}
	
	return containerBreedte;
}

/**
 * Berekent breedte aan zijkant: (breedte viewport - breedte container) / 2
 * 
 * @param containerBreedte
 * @return int
 */
function getSideBreedte( containerBreedte ) {
	var viewportBreedte = document.viewport.getWidth();
	var breedte = viewportBreedte > containerBreedte ? (viewportBreedte - containerBreedte) / 2 : 0;
	return breedte.ceil();
}

function setBorderIllustrator() {
	// Zaken die we nodig hebben voordat we iets kunnen berekenen
	var illustratiesRechts = null;
	
	if( illustratiesRechts = $$('div.kolom-rechts img.illustratie') ) {
		var containerBreedte = getContainerBreedte();
		var breedte = getSideBreedte(containerBreedte);
		
		// Breedte van viewport in breedte van container - 5pixels (padding rechterkolom)
		var left = document.viewport.getWidth() - breedte - 5;
		
		illustratiesRechts.each( function(ill) {
			// Div aanmaken en er een spatie in zetten (voor ie6)
			var illustrator = new Element('div', {
				'class': 'border-illustrator'
			}).update('&nbsp');
			
			// Hoogte berekenen (gebruiken we hieronder namelijk 2x)
			var height = ill.getStyle('border-top-width');
			
			illustrator.setStyle({
				backgroundColor: ill.getStyle('border-top-color'),
				height: height,
				left: left + 'px',
				lineHeight: height,
				top: ill.cumulativeOffset().top + 'px',
				width: breedte + 5 + 'px'
			});
			
			// Div toevoegen aan body
			$('container-top').up('body').appendChild(illustrator);
		});
	}
}