var timer;
var selected = '1';
var imageHREFs = ['', 'layout/jaap_01.jpg', 'layout/jaap_02.jpg', 'layout/jaap_03.jpg', 'layout/jaap_04.jpg', 'layout/janneke_02.jpg', 'layout/janneke_01.jpg', 'layout/lion_02.jpg', 'layout/lion_01.jpg', 'layout/lion_03.jpg', 'layout/jaap_klein_02.jpg', 'layout/jaap_klein_01.jpg', 'layout/jaap_klein_03.jpg', 'layout/examen_01.jpg', 'layout/examen_02.jpg', 'layout/examen_03.jpg', 'layout/vroegwerk_01.jpg'];
var imageALTs  = ['', 'Jaap 1', 'Jaap 2', 'Jaap 3', 'Jaap 4', 'Janneke 1', 'Janneke 2', 'Lion 1', 'Lion 2', 'Lion 3', 'Jaap 1', 'Jaap 2', 'Jaap 3', 'Just the two of us', 'Ik kijk terug', 'Backwards 4', 'Face to Face 3'];
var imagePs  = ['', '<strong>Jaap 1:</strong> spuittechniek, 50 x 70 cm (2003)', '<strong>Jaap 2:</strong> spuittechniek, 50 x 70 cm (2003)', '<strong>Jaap 3:</strong> spuittechniek, 50 x 70 cm (2003)', '<strong>Jaap 4:</strong> spuittechniek, 50 x 70 cm (2003)', '<strong>Janneke 1:</strong> spuittechniek, 50 x 70 cm (2002)', '<strong>Janneke 1:</strong> spuittechniek, 50 x 70 cm (2002)', '<strong>Lion 1:</strong> spuittechniek, 70 x 100 cm (2002)', '<strong>Lion 2:</strong> spuittechniek, 70 x 100 cm (2002)', '<strong>Lion 3:</strong> spuittechniek, 70 x 100 cm (2002)', '<strong>Jaap 1:</strong> spuittechniek, 50 x 70 cm (2002)', '<strong>Jaap 2:</strong> spuittechniek, 50 x 70 cm (2002)', '<strong>Jaap 3:</strong> spuittechniek, 50 x 70 cm (2002)', '<strong>Just the two of us:</strong> spuittechniek / collage / gecombineerde materialen, <br />170 x 134 cm (2001)', '<strong>Ik kijk terug:</strong> spuittechniek / collage / gecombineerde materialen, <br />250 x 250 cm (2001)', '<strong>Backwards 4:</strong> spuittechniek / collage / gecombineerde materialen, <br />70 x 120 cm (2001)', '<strong>Face to Face 3:</strong> spuittechniek, 50 x 70 cm (1998)'];
window.onload = function() {

	var anchors = document.getElementById('images').getElementsByTagName('A');
	for (var i = 0; i < anchors.length; i++) {

			anchors[i].onmouseover = function() { 
				//setInnerHTML(document.getElementById('caption'), imagePs[this.href.substr(this.href.indexOf('?') + 7)]);
				this.parentNode.className = 'alt';
				//clearTimeout(timer);
			};
			
			anchors[i].onmouseout = function() { 
				//timer = setTimeout('setInnerHTML(document.getElementById(\'caption\'), \'' + imagePs[selected] + '\')', 60);
				if (this.href.substr(this.href.indexOf('?') + 7) != selected) {
					this.parentNode.className = '';
				}
			};
			
			anchors[i].onclick = function() { 
				setInnerHTML(document.getElementById('caption'), imagePs[this.href.substr(this.href.indexOf('?') + 7)]);
				document.getElementById('image').src = imageHREFs[this.href.substr(this.href.indexOf('?') + 7)];
				document.getElementById('image').setAttribute('alt', imageALTs[this.href.substr(this.href.indexOf('?') + 7)]);

				selected = this.href.substr(this.href.indexOf('?') + 7);
				clearTimeout(timer);
				this.blur();
				
				for (var j = 0; j < anchors.length; j++) {
					anchors[j].parentNode.className = (anchors[j].href.substr(anchors[j].href.indexOf('?') + 7) == selected ? 'alt' : '');
				}
				
				return false;
			};
			
	}
	
}

function setInnerHTML(element, toValue) {
	if (typeof(element.innerHTML) != 'undefined') {
		element.innerHTML = toValue;
	}
	else {
		var range = document.createRange();
		rangthis.selectNodeContents(element);
		rangthis.deleteContents();
		element.appendChild(rangthis.createContextualFragment(toValue));
	}
}