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, 6000);

	}
};


window.addEvent('domready', function() {
	//Reinitialize when user is resizing the window
	window.addEvent('resize', reinitializePopUp);

});


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',
		'events': {
			'click': function(){
				initializePopUp('closed');
			}
		}
	});

	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") {
		createPopUp();
		var d = new Date();

		var antiCachedUrl;
		if(url.indexOf("?", 0) >= 0) {
			antiCachedUrl = url + "&anticache=" + d.getTime();
		} else {
			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);
}