var preloadedLargeImages = new Array();

// This functions loops through all links in the thumbs-table and checks 
// if they have an attribute called "large". If so it adds onclick functionality
// and preloads the large images.
function initShowLargeImg() {
	if( !document.getElementById ) return;
	
	var clickableImages = new Array();
	
	var theImgContainer = document.getElementById('thumbTab'); 
		
	var imagesArr = theImgContainer.getElementsByTagName( "IMG" );
	for( var i = 0; i < imagesArr.length; i++ ) {
		var img = imagesArr[i];
		
		if( img.getAttribute( "large" ) != undefined ) {
			clickableImages[ clickableImages.length ] = img.getAttribute( "large" );

			// store the first image in a var which can be used as default image to show after pageload
			firstImg = clickableImages[0]; 
			
			img.setAttribute("id", "img_" + i);
			
			img.onclick = function() {
				showlargeImg(preloadedLargeImages[ this.getAttribute( "large" ) ].src);
				setActive(this.id);
				getComment(this.id)
				return false;
			}			
		}
	}
	preloadLargeImages( clickableImages );
}

// This function preloads an array of images, it also checks if the image is
// already loaded. The preloaded images are stored in an array with their filename
// as key.
function preloadLargeImages( images ) {
	for( var i = 0; i < images.length; i++ ) {
		var img = preloadedLargeImages[ images[i] ];
		if( img == undefined ) {
			img = preloadedLargeImages[ images[i] ] = new Image();
			img.src = images[ i ];
		}
	}
}

// function swaps the large image in the Viewer with the one from the clicked thumb
function showlargeImg(imgSrc){
	if( !document.getElementById ) return;
	
	var theImgDiv = document.getElementById('imgviewer');
	theImgDiv.src = imgSrc;	
}

// function resets all overlay-images and sets the new active image overlay
function setActive(linkId){

	var imagesArr = document.getElementById('thumbTab').getElementsByTagName( "IMG" )

	for(x=0; x < imagesArr.length; x++){
		if(detectBrowser()){ // IE
			imagesArr[x].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/empty.png', sizingMethod=crop)";
		}else{
			imagesArr[x].src = "/images/empty.png";
			
		}
		imagesArr[x].className = '';
	}
	var activeImg = document.getElementById(linkId);
	
	if(detectBrowser()){ // IE
		activeImg.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/active_thumb.png', sizingMethod=crop)";
	}else{
		activeImg.src = "/images/active_thumb.png";
	}
	activeImg.className = 'active';
			
}

// change commenttext
function getComment(commentId){
	var comment = imgComments[commentId];
	if(comment == ''){
		document.getElementById('personalnoteHead').style.display = 'none';
		document.getElementById('personalnote').style.display = 'none';
	}else{
		document.getElementById('personalnoteHead').style.display = 'block';
		document.getElementById('personalnote').style.display = 'block';
		document.getElementById('personalnote').innerHTML = comment;
	}
}


// check browserversion, return true if IE 5.5 or 6.x
function detectBrowser(){
	var arVersion = navigator.appVersion.split("MSIE");
	   var version = parseFloat(arVersion[1]);
	   if ( (version >= 5.5) && (version < 7) && (document.body.filters) ) {
	   	return true;
	   }
}

// initialize functions
addLoadEvent(function() {
  initShowLargeImg(); 
  showlargeImg(firstImg);
  setActive('img_0');
  detectBrowser();
});