document.observe("dom:loaded", function(event) {
	// Alle links met een class 'externe-link' openen in een nieuw venster
	$$('a.externe-link').each( function(el) {
		el.target =  '_blank';
	});
	
	// Class op body die aangeeft dat Javascript enabled is
	var bodyElement = $$('body').first();
	if( bodyElement ) {
		bodyElement.addClassName('js-on');
	}
	
	new previewButtons();
});

Event.observe( document , 'click', function ( event ) {
	var dlElement = event.element().up('dl');
	if ( dlElement && dlElement.readAttribute('id') == 'catmenu' ) {
		var ddElement = dlElement.down('dd');
		if( ddElement ) {
			if( ddElement.getStyle('display') == 'none' )
				ddElement.setStyle({display: 'block'});
			else
				hideMenu();
		}
	} else {
		hideMenu();
	}
	
	function hideMenu() {
		if( $$('dl#catmenu dd').first() ) {
			$$('dl#catmenu dd').first().setStyle({display: 'none'});
		}
	}
});

var previewButtons = Class.create({
	
	initialize: function() {
		this.getPreviewLinks().each( function(el) {
			el.observe( 'click', function(event) {
				event.stop();
				this.inActivatePreviewLinks();
				el.addClassName('active');
				
				this.hidePreviews();
				this.showPreview( event.element() );
			}.bind(this));
		}.bind(this));
	},
	
	getPreviewLinks: function() {
		return $$('ul#preview-buttons a');
	},
	
	inActivatePreviewLinks: function() {
		this.getPreviewLinks().each( function(el) {
			el.removeClassName('active');
		});
	},
	
	hidePreviews: function() {
		$$('div.portfoliofoto').each( function(el) {
			el.setStyle({display: 'none'});
		});
	},
	
	showPreview: function(element) {
		var aElement = element.up('a');
		var rel = aElement.readAttribute('rel');
		if( $(rel) ) {
			$(rel).setStyle({display: 'block'});
		}
	}
});