YAHOO.util.Event.onDOMReady(function() {
	var loadingImage = '/js/images/loading.gif';

	// we maken een nieuwe panel waar de afbeeldingen in getoond gaan worden
	var lightbox = new YAHOO.widget.Panel('vw_lightbox', {
		modal: true,
		visible: false,
		fixedcenter: true,
		draggable: false
	});
	lightbox.render(document.body);

	// forceer het aanmaken van het masker en zet daar een click eventhandler op
	lightbox.buildMask();
	lightbox.hideMask();
	YAHOO.util.Event.on(lightbox.id + '_mask', 'click',	function() { lightbox.hide(); });

	// op open
	var handleLightboxShow = function(e) {
		lightbox.element.focus();
		if (document.activeElement) { document.activeElement.blur(); }
	}
	lightbox.showEvent.subscribe(handleLightboxShow);

	// escape closer
	var handleKeypress = function(e) {
		if (27 == e.keyCode) {
			lightbox.hide();
		}
	}
	YAHOO.util.Event.on(window, 'keydown', handleKeypress);

	// definieer de click handler
	var handleLightboxClick = function(e) {
		// maak een nieuw image element op basis van de geklinkte link
		image = document.createElement('img');
		image.src = this.href;
		image.alt = this.title;
		// na het laden de lightbox opnieuw centreren
		YAHOO.util.Event.on(image, 'load', function() { lightbox.center(); });
		lightbox.setBody(image);

		// gebruik het title element van de afbeelding als caption
		if (this.title) {
			lightbox.setFooter(this.title);
		} else if (lightbox.footer) {
			// verwijder eventueel de vorige footer
			lightbox.footer.parentNode.removeChild(lightbox.footer);
			lightbox.footer = null;
		}

		// toon de lightbox en cancel de event
		lightbox.show();
		YAHOO.util.Event.preventDefault(e);
	};

	// set de clickhandler op alle 'A' nodes met een rel="lightbox"
	var nodes = YAHOO.util.Selector.query('a[rel*=lightbox]');
	YAHOO.util.Event.on(nodes, 'click', handleLightboxClick);

	// cancel running AJAX calls on close
	var currentConnection = false;
	var handleCloseConnection = function(e) {
		if (currentConnection) {
			YAHOO.util.Connect.abort(currentConnection);
			currentConnection = false;
		}
	}
	lightbox.beforeHideEvent.subscribe(handleCloseConnection);

	// definieer de click handler
	var handlePopupClick = function(e) {
		var content;
		var target = this.getAttribute('href');
		// check # of normale link
		if (target.charAt(0) == '#') {
			content = YAHOO.util.Selector.query(target, null, true);
			YAHOO.util.Dom.setStyle(content, 'display', 'block');
		} else {
			var frame = false;
			var rels = this.rel.split(' ');
			for(var i = 0;i < rels.length; i++) {
				if( rels[i].substring(0,5) == 'frame' ) {
					var dimensions = rels[i].substring(5).split('x');
					frame=true;
					var width = dimensions[0];
					var height = dimensions[1];
				}
			}
			if(frame) {
				content = document.createElement('iframe');
				content.src = this.href;
				content.frameBorder = "0";
				content.style.width = width + 'px';
				content.style.height = height + 'px';
				content.style.border = 'none';
			} else {
				content = document.createElement('div');
				YAHOO.util.Dom.addClass(content, 'status');
				var image = document.createElement('img');
				image.src = loadingImage;
				content.appendChild(image);
				YAHOO.util.Event.on(image, 'load',
				function() {
					lightbox.center();
				});

				currentConnection = YAHOO.util.Connect.asyncRequest('GET', this.href, {
					success: function(response) {
						lightbox.setBody(response.responseText);
						lightbox.center();
					},
					failure: function(response) {
						YAHOO.util.Dom.addClass(content, 'error');
						content.innerHTML = "Er is een probleem opgetreden bij het uitvoeren van de actie. Excuses voor het ongemak.";
						lightbox.center();
					}
				});
			}
		}
		// create content

		// na het laden de lightbox opnieuw centreren
		YAHOO.util.Event.on(content, 'load', function() { lightbox.center(); });
		lightbox.setBody(content);

		// gebruik het title element van de afbeelding als caption
		if (this.title) {
			lightbox.setFooter(this.title);
		} else if (lightbox.footer) {
			// verwijder eventueel de vorige footer
			lightbox.footer.parentNode.removeChild(lightbox.footer);
			lightbox.footer = null;
		}

		// toon de lightbox en cancel de event
		lightbox.show();
		YAHOO.util.Event.preventDefault(e);
	};

	// set de clickhandler op alle 'A' nodes met een rel="lightbox"
	nodes = YAHOO.util.Selector.query('a[rel*=popup]');
	for (var i = 0; i < nodes.length; i++) {
		var node = nodes[i];
		var target = node.getAttribute('href');
		if ('#' == target.charAt(0)) {
			target = YAHOO.util.Selector.query(target, null, true);
			YAHOO.util.Dom.setStyle(target, 'display', 'none');
		}
	}
	YAHOO.util.Event.on(nodes, 'click', handlePopupClick);
});