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

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() {
	var TotalHeight = HowManyThumbnails * ElementHeight;
	return TotalHeight;
}

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

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( $(document).height(), $(window).height() );
		//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;
	
	if ( Moving == true )
		return false;
	
	Moving = true;
	
	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' );
	large.setAttribute( 'width', Images[album][image][3] );
	large.setAttribute( 'height', Images[album][image][4] );
	//}  
	
	var Left = ( ( 640 - Images[album][image][3] ) / 2 );
	var PicWidth = Images[album][image][3];
	var PicHeight = Images[album][image][4];
	var BoxWidth = $('#LightBoxFotoHolder').innerWidth();
	var BoxHeight = $('#LightBoxFotoHolder').innerHeight();
	
	if ( BoxWidth != PicWidth || BoxHeight != PicHeight ) {
		var Speed = 800;
	} else {
		var Speed = 0;
	}
	
	/*
	var CloseLeft = PicWidth - $('#Sluiten').innerWidth() + 6 + Left; //border
	$( '#Sluiten' ).animate({
		left: CloseLeft
	}, Speed, function() {
	});
	*/ 
	
	$( '#LightBoxFotoHolder' ).animate({
		width: Images[album][image][3],
		height: Images[album][image][4],
		left: Left
	}, Speed, function() {
	    // Animation complete.
		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' );
					Moving = false;
				}
				loader.load(document.getElementById('Vergroting'));
			} ); 
			
		}
		if( currentThumbnail == ( Images[album].length - 1 ) ){
			$( '#AlbumRight' ).hide();
		} else {
			$( '#AlbumRight' ).show();
		}
		if( currentThumbnail == 0 ){
			$( '#AlbumLeft' ).hide();
		} else {
			$( '#AlbumLeft' ).show();
		}
		for ( var i = 0; i < Images[album].length; i++ ) {
			
			if( Images[album][i]){
				var Thumbnail = document.getElementById('Thumbnail'+i);
				if( Thumbnail ) {
					Thumbnail.className = 'InActief';
				}
				//alert( currentThumbnail );
				//alert( Images[album][i] );
				//alert( Images[album].length );
			}		
		}
		
		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';
	}
	
	$('#Thumbnails').css( 'left', 0 );
	
	 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,
					    complete: function() {
					    	Moving = false;
					    }
					});
					
					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,
					    complete: function() {
					    	Moving = false;
					    }
					});
					
					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,
					    complete: function() {
					    	Moving = false;
					    }
					});
					
					setButtonClasses( MoveLeft );
					
				} else {
				}
			break;
			case 'Right' :
				var MoveRight = ( HowMany * ElementWidth );
				var TotalWidth = calculateTotalWidthThumbnails();
				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( 'AlbumLeft', 'Actief' );
	changeClassname( 'AlbumRight', 'Actief' );
	
}

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