var currentThumbnail = '';
var currentAlbum = '';
var thumbsPerPage = 7;
var amountOfImages = '';
var currentPage = '';

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( setImage( ' + 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 );
	calculateTotalHeightThumbnails();
	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 = ( 300 + Height ) + 'px';
		//Object.style.height = Height + 'px';
	}
}

function openLightBox( album, image ) {
	currentAlbum = album;
	amountOfImages = Images[album].length;
	
	if( typeof(eval(Images[album])) != 'undefined' ){
		setDarkLayerHeight();
		changeClassname('LightBoxHolder', 'Show');
		createThumbnails( album, image );
		changeClassname('DarkLayer', 'Show');
	}
}

function setImage( album, image ) {
	
	//if( image == null ){ 
	/*
	 * create image
	 */
	//image = 0;
	
	currentThumbnail = image;
	
	var Vergroting = document.getElementById( 'Vergroting' );
	if( Vergroting != null ) {
		var LightBoxFotoHolder = document.getElementById( 'LightBoxFotoHolder' );
		LightBoxFotoHolder.removeChild( Vergroting );
	}
	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];
		
		large.setAttribute( 'id', 'Vergroting' );
		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 Ondertitel = document.getElementById( 'Ondertitel' );
	//var Fotograaf = document.getElementById( 'Fotograaf' );
	//var Totaal = document.getElementById( 'Totaal' );
	
	if( Thumbnail && Ondertitel && Titel ) {
		Thumbnail.className = 'Actief';
		//FotoNr.innerHTML = image+1;
		Titel.innerHTML = Images[album][image][1];
		Ondertitel.innerHTML = Images[album][image][2];
		//Fotograaf.innerHTML = Images[album][image][2];
		//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';
	}
	
	 currentThumbnail = '';
	 currentAlbum = '';
	 thumbsPerPage = 7;
	 amountOfImages = '';
	 currentPage = '';
}

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

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

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

					/* Animate the child to the left */
					$( ThumbnailObject ).animate( {
						left: CurrentPositionThumbnails
					}, {
						queue: false,
						duration: 500
					});
					
					setButtonClasses( MoveLeft );
					
				} else {
				}
			break;
			case 'Right' :
				var MoveRight = ( HowMany * ElementWidth );

				if ( ( CurrentPositionThumbnails - MoveRight ) > ( TotalWidth * -1 ) ) {
					
					CurrentPositionThumbnails = CurrentPositionThumbnails - MoveRight;					
					//OLD: ThumbnailObject.style.top = CurrentPositionThumbnails + 'px'
					
					/* Setting default easing */
					jQuery.easing.def = "easeInQuad";

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

function browseThumbs (Direction) {
	switch(Direction) {
	
	case 'next':
		if(currentThumbnail < (amountOfImages - 1)) {
			setImage(currentAlbum,(currentThumbnail + 1));
			
			if(Math.ceil(currentThumbnail / thumbsPerPage) ==  (currentThumbnail / thumbsPerPage) && currentThumbnail != 0) {
				moveThumbnails('Right', 7, 'Thumbnails');
			}
		}
		break;
	
	case 'previous':
		if(currentThumbnail != 0) {
			if(Math.ceil(currentThumbnail / thumbsPerPage) ==  (currentThumbnail / thumbsPerPage) && currentThumbnail != 0) {
				moveThumbnails('Left', 7, 'Thumbnails');
			}
			setImage(currentAlbum,(currentThumbnail - 1));
		}
		break;
		
	default :
		throw( 'This is not a valid direction' );
	break;
		
	}
}

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

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