function attachStyle(src) {
	var linker = new Element('link');
	linker.setProperties({
		rel: 'stylesheet',
		type: 'text/css',
		media: 'all',
		href: src
	});

	linker.injectBefore($(document.head).getElement('style'));
}

function makeHovers(elem,index){
	makeLeftHover(elem,index);
	makeRightHover(elem,index);
}

function makeRightHover(elem,index){
	
	var height = $('fotos').getElements('div.foto')[index].getElement('img').getCoordinates()['height'].toInt();
	
	var rightHover = new Element('a', {
		'href': '#fotos',
		'class': 'hoverer',
		'styles': {
			'right': '0px',
			'height': '608px'
		},
		'events': {
			'click': function(){
				next(index);
				return false;
			},
			'mouseover': function(){
				elem.getElement('div.rightArrow').fade('in');
			},
			'mouseout': function(){
				elem.getElement('div.rightArrow').fade('out');
			}		
		}
	});

	var rightArrow = new Element('div', {
		'class': 'rightArrow',
		'styles': {
			'opacity': '0'
		}
	});
	
	rightArrow.inject(rightHover, 'bottom');
	rightHover.inject(elem, 'bottom');
	
}

function next(index){
	var from = index;
	var to = index + 1;
	fromDiv = $('fotos').getElements('div.foto')[from];
	toDiv = $('fotos').getElements('div.foto')[to];

	if(fromDiv.fx){$(fromDiv).fx.stop();}
	if(toDiv.fx){$(toDiv).fx.stop();}
	
	$(fromDiv).set('tween', {duration: '750'});
	$(toDiv).set('tween', {duration: '750'});	
	
	$(toDiv).setStyle('opacity','0');
	$(toDiv).setStyle('display','block');

	$(toDiv).tween('opacity','1');
	
	$(fromDiv).setStyle('display','none');
	
	//$('fotos').getElements('div.foto')[from].getElement('p').fade('out');		
	$('fotos').getElements('div.foto')[to].getElement('p').fade('in');	
	
	highlightMenu(to);
}


function previous(index){
	var from = index;
	var to = index - 1;
	fromDiv = $('fotos').getElements('div.foto')[from];
	toDiv = $('fotos').getElements('div.foto')[to];

	if($(fromDiv).fx){$(fromDiv).fx.stop();}
	if($(toDiv).fx){$(toDiv).fx.stop();}
	
	$(fromDiv).set('tween', {duration: '750'});
	$(toDiv).set('tween', {duration: '750'});	
	
	$(toDiv).setStyle('opacity','0');
	$(toDiv).setStyle('display','block');

	$(toDiv).tween('opacity','1');
	
	$(fromDiv).setStyle('display','none');
	
	//$('fotos').getElements('div.foto')[from].getElement('p').fade('out');		
	$('fotos').getElements('div.foto')[to].getElement('p').fade('in');	
	
	highlightMenu(to);
}


function makeLeftHover(elem,index){
	
	var height = $('fotos').getElements('div.foto')[index].getElement('img').getCoordinates()['height'].toInt();

	
	var leftHover = new Element('a', {
		'href': '#fotos',
		'class': 'hoverer',
		'styles': {
			'left': '0px',
			'height': '608px'
		},
		'events': {
			'click': function(){
				previous(index);
				return false;
			},
			'mouseover': function(){
				elem.getElement('div.leftArrow').fade('in');
			},
			'mouseout': function(){
				elem.getElement('div.leftArrow').fade('out');
			}		
		}
	});
	
	
	var leftArrow = new Element('div', {
		'class': 'leftArrow',
		'styles': {
			'opacity': '0'
		}
	});
	
	leftArrow.inject(leftHover, 'bottom');	
	leftHover.inject(elem, 'bottom');
	
}



function makeCaption(el){
	el.getElement('p').addClass('caption');
	el.getElement('p').setStyle('opacity', 0);
	
	var top = new Element('span', {
		'class': 'captionTop'
	});	
	
	var bottom = new Element('span', {
		'class': 'captionBottom'
	});		
	
	top.inject(el.getElement('p'), 'top');
	bottom.inject(el.getElement('p'), 'bottom');
}

function toggleCaption(index,inout){
	$('fotos').getElements('div.foto')[index].getElement('p').fade(inout);
}

function hideAllPics(){
	$('fotos').getElements('div.foto').each(function(el,index){
		var vis = el.getStyle('display');
		
		if(vis == 'block'){
			el.fade('out');
			el.setStyle('display','none');
		}
	});
}

function showPic(nr){
	var el = $('fotos').getElements('div.foto')[nr];
	
	el.setStyle('opacity','0');
	el.setStyle('display','block');
	el.fade('in');
	
	highlightMenu(nr);
}

function highlightMenu(nr){
	if(nr < 19){
		$('restauratie').setStyle("color","white");	
		$('renovatie').setStyle("color","black");	
		$('nieuwbouw').setStyle("color","black");
	} else if (nr < 20){ 
		$('renovatie').setStyle("color","white");	
		$('restauratie').setStyle("color","black");	
		$('nieuwbouw').setStyle("color","black");
	} else {
		$('nieuwbouw').setStyle("color","white");	
		$('renovatie').setStyle("color","black");	
		$('restauratie').setStyle("color","black");	
	}	
}

function makeMenuLinks(){
	$('restauratie').addEvent('click', function() {
		hideAllPics();
		showPic(0);
	});
	$('renovatie').addEvent('click', function() {
		hideAllPics();
		showPic(19);
	});
	$('nieuwbouw').addEvent('click', function() {
		hideAllPics();
		showPic(20);	
	});
	$('restauratie').addEvent('mouseover', function() {
		$('restauratie').setStyle("color","white");	
	});
	$('renovatie').addEvent('mouseover', function() {
		$('renovatie').setStyle("color","white");	
	});
	$('nieuwbouw').addEvent('mouseover', function() {
		$('nieuwbouw').setStyle("color","white");	
	});	
	$('restauratie').addEvent('mouseout', function() {
		$('restauratie').setStyle("color","black");	
		highlightMenu(getPhotoNumber());
	});
	$('renovatie').addEvent('mouseout', function() {
		$('renovatie').setStyle("color","black");	
		highlightMenu(getPhotoNumber());
	});
	$('nieuwbouw').addEvent('mouseout', function() {
		$('nieuwbouw').setStyle("color","black");	
		highlightMenu(getPhotoNumber());
	});	
}

function getPhotoNumber(){
	var res = 0;
	$('fotos').getElements('div.foto').each(function(el,index){
		if (el.getStyle("display") == "block"){
			res  = index;		
		}
	});	
	return res;
}

window.addEvent('domready', function() {
	

	attachStyle('css/wat-js.css');	
	
	
	
	var aantalPics = $('fotos').getElements('div.foto').length;

	$('fotos').getElements('div.foto').each(function(el,index){
		el.setStyle('z-index', 1000 - index);
		
		if(index != 0 && index != aantalPics  - 1){						
			makeHovers(el,index);
			el.setStyle('display', 'none');
		} else if (index == 0){
			makeRightHover(el,index);		
		} else if (index == aantalPics  - 1){
			makeLeftHover(el,index);		
			el.setStyle('display', 'none');
		}
		
		makeCaption(el);
		
		el.addEvent('mouseover', function(){
			toggleCaption(index,1);							  
		});
		el.addEvent('mouseout', function(){
			toggleCaption(index,0);							  
		});
	});
	
	makeMenuLinks();
	highlightMenu(0);

	
});