function createThumbnails( album, image ){
	
	var Object = document.getElementById( 'Thumbnails' ); 
	for ( var i = 0; i < Images[album].length; i++ ) {
		if( Images[album][i]){
			//Make anchor
			var anchor = document.createElement( 'a' );
			anchor.setAttribute( 'href', 'javascript:void( setImage3( ' + album +',' + i + ' ) ) ' );
			
			//Make image
			var thumbnail = document.createElement( 'img' );
			thumbnail.setAttribute( 'src', ThumbnailPath + Images[album][i][0] );
			thumbnail.setAttribute( 'id', 'Thumbnail' + i );
			
			//Append thumb to image
			anchor.appendChild( thumbnail );
			//Append anchor (with thumb inside) to the thumbnail
			Object.appendChild( anchor );
		}		
	}
	
	setImage( album, image);
	calculateTotalWidthThumbnails();
	
	setButtonClasses();
}

function createThumbnails2( album, image ){
	
	var Object = document.getElementById( 'Thumbnails2' ); 
	for ( var i = 0; i < Images[album].length; i++ ) {
		if( Images[album][i]){
			//Make anchor
			var anchor = document.createElement( 'a' );
			anchor.setAttribute( 'href', 'javascript:void( openLightBox( ' + album +',' + i + ' ) ) ' );
			
			//Make image
			var thumbnail = document.createElement( 'img' );
			thumbnail.setAttribute( 'src', ThumbnailPath + Images[album][i][0] );
			thumbnail.setAttribute( 'id', 'ThumbnailA' + i );
			
			//Append thumb to image
			anchor.appendChild( thumbnail );
			//Append anchor (with thumb inside) to the thumbnail
			Object.appendChild( anchor );
		}		
	}
	
	setImage2( album, image);
	calculateTotalWidthThumbnails();
	
	setButtonClasses();
}

function calculateTotalHeightThumbnails() {
	TotalHeight = HowManyThumbnails * ElementHeight;
}

function calculateTotalWidthThumbnails() {
	TotalWidth = HowManyThumbnails * ElementWidth;
}

function setDarkLayerHeight(){
	var Body = document.getElementsByTagName( 'body' ).item( 0 );
	var HTML = document.getElementsByTagName( 'html' ).item( 0 );

	var Object = document.getElementById( 'DarkLayer' );
	
	if( Object ) {
		var Height = Math.max( HTML.offsetHeight, Body.offsetHeight );
		Object.style.height = Height + 'px';
	}
}

function openLightBox( album, image ) {	
	if( typeof(eval(Images[album])) != 'undefined' ){
		if (image == null){
			createThumbnails2( album, image );
			changeClassname('LightBoxHolder2', 'Show');
		}else{
			CurrentPositionThumbnails = CurrentPositionThumbnails2;
			setDarkLayerHeight();
			changeClassname('LightBoxHolder', 'Show');
			createThumbnails( album, image );
			changeClassname('DarkLayer', 'Show');
			var Thumbnail = document.getElementById( 'Thumbnails' ); 
			var Thumbnail2 = document.getElementById( 'Thumbnails2' ); 
			jQuery.easing.def = "easeInQuad";
			
			/* Animate the child to the left */
			$( Thumbnail ).animate( {
				left: CurrentPositionThumbnails2
			}, {
				queue: false,
				duration: 500
			});
			
			$( Thumbnail2 ).animate( {
				left: CurrentPositionThumbnails2
			}, {
				queue: false,
				duration: 500
			});
		}
	}
}

function setImage( album, image ){
	
	//if( image == null ){ 
		/*
		 * create image
		 */
		//image = 0;
		large = document.createElement( 'img' );
		large.setAttribute( 'style', 'display:none');
		large.setAttribute( 'id', 'Vergroting' );
	//} 
	
	var FotoHolder = document.getElementById( 'LightBoxFotoHolder' );
	if( FotoHolder ) {
		var NewSrc = UploadPath + Images[album][image][0];
		FotoHolder.appendChild( large );
		
		$( '#Vergroting' ).attr( 'newSource', NewSrc ).fadeOut( 'slow', function() {
			var loader = new ImageLoader( $(this).attr( 'newSource' ));
			loader.element = $(this);
			loader.loadEvent = function( url, image, element ) {
				element.fadeIn( 'slow' );
			}
			loader.load(document.getElementById('Vergroting'));
		} ); 
		
	}

	for ( var i = 0; i < Images[album].length; i++ ) {
		if( Images[album][i]){
			var Thumbnail = document.getElementById('Thumbnail'+i);
			if( Thumbnail ) {
				Thumbnail.className = 'InActief';
			}
		}		
	}
	var Thumbnail = document.getElementById( 'Thumbnail'+image );	
	var FotoNr = document.getElementById( 'FotoNr' );
	var Titel = document.getElementById( 'Naam' );
	var Totaal = document.getElementById( 'Totaal' );
	if( Thumbnail && FotoNr && Titel && Totaal ) {
		Thumbnail.className = 'Actief';
		FotoNr.innerHTML = image+1;
		Titel.innerHTML = Images[album][image][1];
		Totaal.innerHTML = Images[album].length;
		setHowManyThumbnails( Images[album].length );
	}
}

function setImage2( album, image ){
	
	
	for ( var i = 0; i < Images[album].length; i++ ) {
		if( Images[album][i]){
			var Thumbnail = document.getElementById('ThumbnailA'+i);
			if( Thumbnail ) {
				Thumbnail.className = 'InActief';
			}
		}		
	}
	var Thumbnail = document.getElementById( 'ThumbnailA'+image );	
	if( Thumbnail) {
		Thumbnail.className = 'Actief';
	}
	setHowManyThumbnails( Images[album].length );
}

function setImage3( album, image ){
	
	if( image == null ){ 
		/*
		 * create image
		 */
		//image = 0;
		large = document.createElement( 'img' );
		large.setAttribute( 'style', 'display:none');
		large.setAttribute( 'id', 'Vergroting' );
	} 
	
	var FotoHolder = document.getElementById( 'LightBoxFotoHolder' );
	if( FotoHolder ) {
		var NewSrc = UploadPath + Images[album][image][0];
		FotoHolder.appendChild( large );
		
		$( '#Vergroting' ).attr( 'newSource', NewSrc ).fadeOut( 'slow', function() {
			var loader = new ImageLoader( $(this).attr( 'newSource' ));
			loader.element = $(this);
			loader.loadEvent = function( url, image, element ) {
				element.fadeIn( 'slow' );
			}
			loader.load(document.getElementById('Vergroting'));
		} ); 
		
	}

	for ( var i = 0; i < Images[album].length; i++ ) {
		if( Images[album][i]){
			var Thumbnail = document.getElementById('Thumbnail'+i);
			if( Thumbnail ) {
				Thumbnail.className = 'InActief';
			}
		}		
	}
	var Thumbnail = document.getElementById( 'Thumbnail'+image );	
	var FotoNr = document.getElementById( 'FotoNr' );
	var Titel = document.getElementById( 'Naam' );
	var Totaal = document.getElementById( 'Totaal' );
	if( Thumbnail && FotoNr && Titel && Totaal ) {
		Thumbnail.className = 'Actief';
		FotoNr.innerHTML = image+1;
		Titel.innerHTML = Images[album][image][1];
		Totaal.innerHTML = Images[album].length;
		setHowManyThumbnails( Images[album].length );
	}
}

function setHowManyThumbnails( HowMany ) {
	if ( HowMany > '' ) {
		HowManyThumbnails = HowMany;
	}	
}

function getHowManyThumbnails() {
	return HowManyThumbnails;
}

/*
 * - DarkLayer weer verbergen
 * - Thumbnail elementen verwijderen
 * - Vergroot element verwijderen
 */
function closeLightbox(){

	changeClassname( 'DarkLayer', 'Hide' );
	changeClassname( 'LightBoxHolder', 'Hide' );
		
	var LightBoxFotoHolder = document.getElementById( 'LightBoxFotoHolder' );
	
	var Vergroting = document.getElementById( 'Vergroting' );
	if( LightBoxFotoHolder && Vergroting ){
		LightBoxFotoHolder.removeChild( Vergroting );
	}
 
	var Holder = document.getElementById( 'Thumbnails' ); 
	if( Holder ){
		Holder.innerHTML = '';
		Holder.style.top = '0px';
	}
	
	var Thumbnail2 = document.getElementById( 'Thumbnails2' ); 
	CurrentPositionThumbnails2 = CurrentPositionThumbnails;
	jQuery.easing.def = "easeInQuad";
	
	/* Animate the child to the left */
	$( Holder ).animate( {
		left: CurrentPositionThumbnails2
	}, {
		queue: false,
		duration: 500
	});
	
	$( Thumbnail2 ).animate( {
		left: CurrentPositionThumbnails2
	}, {
		queue: false,
		duration: 500
	});
}

function moveThumbnails( Direction, HowMany, Id ) {
	
	var ThumbnailObject = document.getElementById( Id );
	var PosThumb = 0;
	if (Id == 'Thumbnails'){
		PosThumb = CurrentPositionThumbnails;
	}else{
		PosThumb = CurrentPositionThumbnails2;
	}
	if( ThumbnailObject ) {
		
		switch( Direction ) {
			case 'Up' :
				var MoveUp = ( HowMany * ElementHeight );
				
				if ( PosThumb < 0 ) {
					PosThumb = PosThumb + MoveUp;
					//OLD: ThumbnailObject.style.top = CurrentPositionThumbnails + 'px'
					
					/* Setting default easing */
					jQuery.easing.def = "easeInQuad";

					/* Animate the child to the left */
					$( ThumbnailObject ).animate( {
						top: PosThumb
					}, {
						queue: false,
						duration: 500
					});
					
					setButtonClasses( MoveUp );
					
				} else {
				}
			break;
			
			case 'Down' :
				var MoveDown = HowMany * ElementHeight;
				
				if ( ( PosThumb - MoveDown ) > ( TotalHeight * -1 ) ) {  
					PosThumb = PosThumb - MoveDown;
					//OLD: ThumbnailObject.style.top = CurrentPositionThumbnails + 'px'
					
					/* Setting default easing */
					jQuery.easing.def = "easeInQuad";

					/* Animate the child to the left */
					$( ThumbnailObject ).animate( {
						top: PosThumb
					}, {
						queue: false,
						duration: 500
					});
					
					setButtonClasses( MoveDown );
					
				} else {
				}
			break;
			case 'Left' :
				var MoveLeft = ( HowMany * ElementWidth );
				if ( PosThumb < 0 ) {
					PosThumb = PosThumb + MoveLeft;
					//OLD: ThumbnailObject.style.top = CurrentPositionThumbnails + 'px'
					
					/* Setting default easing */
					jQuery.easing.def = "easeInQuad";

					/* Animate the child to the left */
					$( ThumbnailObject ).animate( {
						left: PosThumb
					}, {
						queue: false,
						duration: 500
					});
					
					setButtonClasses( MoveLeft );
					
				} else {
				}
			break;
			case 'Right' :
				var MoveRight = ( HowMany * ElementWidth );
				if ( ( PosThumb - MoveRight ) > ( TotalWidth * -1 ) ) {
					PosThumb = PosThumb - MoveRight;
					//OLD: ThumbnailObject.style.top = CurrentPositionThumbnails + 'px'
					
					/* Setting default easing */
					jQuery.easing.def = "easeInQuad";

					/* Animate the child to the left */
					$( ThumbnailObject ).animate( {
						left: PosThumb
					}, {
						queue: false,
						duration: 500
					});
					setButtonClasses( MoveRight );
					
				} else {
				}
			break;
			
			default :
				throw( 'This is not a valid direction' );
			break;
		}
		
		if (Id == 'Thumbnails'){
			CurrentPositionThumbnails = PosThumb;
		}else{
			 CurrentPositionThumbnails2 = PosThumb;
		}
		
	} else {
		throw( 'Thumbnail holder not found!' );
	}
}

function setButtonClasses( HowMany ) {
	
	changeClassname( 'Up', 'Actief' );
	changeClassname( 'Down', 'Actief' );
	changeClassname( 'Left', 'Actief' );
	changeClassname( 'Right', 'Actief' );
	
}

/**
 * General javascript initialization
 */
$( window ).bind( 'resize load', function() {
	setDarkLayerHeight();
});