var animateHeaderImages = function () {
	if ($('rotating-fotos-target')) {
		if (!$('rotating-fotos-target').candidates) {
			// first time: set up
			$('rotating-fotos-target').candidates = $$('.fotoImpressie img');
			$('rotating-fotos-target').currentlyDisplayedCandidate = 0;
		} else {
			// second time: rotate
			$('rotating-fotos-target').currentlyDisplayedCandidate++;
			if ($('rotating-fotos-target').currentlyDisplayedCandidate >= $('rotating-fotos-target').candidates.length)
				$('rotating-fotos-target').currentlyDisplayedCandidate = 0;
			
			new Fx.Style($('rotating-fotos-target'), 'opacity',
					{duration:1000, wait:false,
						onComplete: function() {
							$('rotating-fotos-target').src = $('rotating-fotos-target').candidates[$('rotating-fotos-target').currentlyDisplayedCandidate].src;
							new Fx.Style($('rotating-fotos-target'), 'opacity',{duration:1000, wait:false}).start(0,1);
						}
					}
				).start(1,0);
		}	
		if($('rotating-fotos-target').candidates.length>1)
			window.setTimeout(animateHeaderImages, 5000);

	}
};


window.addEvent('domready', function() {
	$$('ul.hoofdmenu li').each(function(el) {
		var link = el.getFirst('a');
		
		if( link ) {
			el.addEvent('click', function(event) {
				location.href = link;
			});
		}
	});
	
	$$('li').each( function(el) {
		el.addEvent('mouseover',function(){ this.addClass("hover")});
		el.addEvent('mouseout',function(){ this.removeClass("hover")});
	});

	$$('.externe-link').each( function(el) {
		el.target = '_blank';
	});
	
	animateHeaderImages();
	
	//Reinitialize when user is resizing the window
	window.addEvent('resize', reinitializePopUp);

	// Na klik op item in inhoudsopgave moet duidelijk worden
	// welke paragraaf uitgelicht moet worden
	$$('ul.inhoudsopgave a').each( function(el) {
		var pos = el.href.lastIndexOf('#');
		var anchor = el.href.substr(pos+1);
		
		el.addEvent('click', function(event) {
			$$('div.par').each( function(division) {
				division.removeClass('selected');
			});
			
			var par = null;
			if( par = $(anchor) )
				par.getParent('div.par').addClass('selected');
		});
	});	
	
	
	
	
	// fotoblok script
	$$('div.photo-viewer').each( function(el) {
		var fotos = $$(el.getElements('div.photo'));
		
		if(fotos.length > 1) {

	        var currentCounter = new Hash({'counter': 0,
										   'fotos': fotos});
			var paused = false;
			
			var periodicalFunctionVar = nextPhoto.periodical(4000,currentCounter,el);
			
			var controls = $$(el.getElements('li'));
			if(controls.length == 3) {
				// backward
				controls[0].addEvent('click', function() {
					previousPhoto( el );
				});
				// pause
				controls[1].addEvent('click', function() {
					if(!paused) {
						$clear(periodicalFunctionVar);
						paused = true;
					} else {
						periodicalFunctionVar = nextPhoto.periodical(4000,currentCounter,el);
						paused = false;
					}
				});
				// forward
				controls[2].addEvent('click', function() {
					nextPhoto( el );
				});				
			}
		} else {
			el.getElements('li').setStyle('display','none');
		}
	});
});

var nextPhoto = function ( div ) {
	var fotos 	= $$(div.getElements('div.photo'));
	
	for ( var i = 0 ; i < fotos.length ; i++ ) {
		if ( fotos[i].getStyle('display') == 'block' ) {
			fotos[i].setStyle( 'display' , 'none' );
			if ( i + 1 == fotos.length )
				fotos[0].setStyle( 'display' , 'block' );
			else
				fotos[i+1].setStyle( 'display' , 'block' );
			break;
		}
	}
}

var previousPhoto = function ( div ) {
	var fotos 	= $$(div.getElements('div.photo'));
	
	for ( var i = 0 ; i < fotos.length ; i++ ) {
		if ( fotos[i].getStyle('display') == 'block' ) {
			fotos[i].setStyle( 'display' , 'none' );
			if ( i == 0 )
				fotos[fotos.length-1].setStyle( 'display' , 'block' );
			else
				fotos[i-1].setStyle( 'display' , 'block' );
			break;
		}
	}
}

function createPopUp() {

	//Creating the following html in the bottom of the body

	//<div id="lightbox_pop_up_bg"></div>
	//<div id="lightbox_pop_up">
		//<a href="#" id="pop_up_close" onclick="initializePopUp('closed');"></a>
		//<div id="lightbox_pop_up_container">
		//</div>
	//</div>

	var divPopUpBg = new Element('div', {
	    'id': 'lightbox_pop_up_bg'
	});

	var divPopUp = new Element('div', {
	    'id': 'lightbox_pop_up'
	});

	var anchor = new Element('a', {
				    'id': 'pop_up_close',
				    'events': {
				        'click': function(){
				            initializePopUp('closed')
				        }
					}
				  });

	anchor.injectInside(divPopUp);

	var divPopUpContainer = new Element('div', {
	    'id': 'lightbox_pop_up_container'
	});

	divPopUpContainer.injectInside(divPopUp);

	var body = $$('body');
	divPopUpBg.injectInside(body[0]);
	divPopUp.injectInside(body[0]);

}

var reinitializePopUp = function(state, width) {
	if (state == "open") {

		//alert("I'm open");
		//Let's setup a full screen
		var pop_up_bgWidth = document.documentElement.clientWidth;
		var pop_up_bgHeight = document.documentElement.scrollHeight;
		var pop_up_bgHeightviewport = document.documentElement.clientHeight;

		$('lightbox_pop_up_bg').style.width = pop_up_bgWidth + 'px';
		if (pop_up_bgHeight < pop_up_bgHeightviewport ) {
			$('lightbox_pop_up_bg').style.height = pop_up_bgHeightviewport + (pop_up_bgHeightviewport - pop_up_bgHeight) + 'px';
		} else {
			$('lightbox_pop_up_bg').style.height = pop_up_bgHeight + 'px';
		}

		//Let's center things
		var viewportHeight = document.documentElement.clientHeight;
		var pop_upWidth = width;

		$('lightbox_pop_up').style.width = width + 'px';
		var pop_upHeight = $('lightbox_pop_up').clientHeight;

		var pop_upPosLeft = (pop_up_bgWidth / 2) - (pop_upWidth /2);
		var pop_upPosTop = (viewportHeight / 2) - (pop_upHeight /2);

		$('lightbox_pop_up').style.left = pop_upPosLeft + 'px';
		$('lightbox_pop_up').style.top = pop_upPosTop + 'px';

		//So we have a box it centering automaticly. now we are going to position the close button
		$('pop_up_close').style.left = pop_upWidth - 10 + 'px';

		$('lightbox_pop_up_bg').style.display = 'block';
		$('lightbox_pop_up').style.display = 'block';
	}
	//alert(myValues);

}

var initializePopUp = function(state, url, width) {
	//let's update our content with ajax
	if (state == "open") {
		if(pageTracker) {
			pageTracker._trackPageview(url);
		}
		
		createPopUp();
		var d = new Date();
		var antiCachedUrl = url + "?anticache=" + d.getTime();

		new Ajax(antiCachedUrl, {
			method: 'get',
			update: $('lightbox_pop_up_container'),
			evalScripts: true,
			onComplete: function() {
				reinitializePopUp(state, width)
			}
		}).request();
	}

	//Alrighty! let's animate some cool stuff with chains!
	var bg = $('lightbox_pop_up_bg'), pop_up = $('lightbox_pop_up'), close_btn = $('pop_up_close');

	var fx = bg.effects({duration: 500, transition: Fx.Transitions.Quart.easeOut});
	var fx1 = pop_up.effects({duration: 500, transition: Fx.Transitions.linear});

	if (state == "open") {
		//bg animation
		fx.start({
			'opacity': [0,.5]
		});

		//pop-up animation
		fx1.start({
			//bla
		}).chain(function(){
			this.start.delay(100, this, {
				'opacity': [0,1]
			});
		});

	} else if (state == 'closed') {
		//bg animation
		bg.style.opacity = 0.5;
		fx.start({
			'opacity': [0.5, 0]
		});

		//pop-up animation
		pop_up.style.opacity = 1;
		fx1.start({		//bla
		}).chain(function(){
			this.start.delay(100, this, {
				'opacity': [1, 0]
			});
		});
	}

	//debugging!
	//alert(viewportWidth);
}