$(document).ready(function() {
	
	$('#thumb-container span.overlay').hide();
	
	$('#thumb-container a').click(function(){
		
		// set green thumb border
		$('#thumb-container span.overlay').hide();
		$(this).parent().find('.overlay').show();
		
		// extract id from thumbnail
		var thumbId = $(this).attr('id').slice(6);
		// use this id to determine the new main image
		var newSrc = 'http://www.zo-ontwerp.nl/images/content/' + thumbId + '.jpg'
		// set the new main image
		$('#img-container img').attr("src", newSrc);
		
		return false;
	});
	
	$('#thumb-container a').hover(function(){
		
		// set green thumb border
		$('#thumb-container span.overlay').hide();
		$(this).parent().find('.overlay').show();
		
		// extract id from thumbnail
		var thumbId = $(this).attr('id').slice(6);
		// use this id to determine the new main image
		var newSrc = 'http://www.zo-ontwerp.nl/images/content/' + thumbId + '.jpg'
		// set the new main image
		$('#img-container img').attr("src", newSrc);
		
		return false;
	});
});