/**
 * Function to simply change an object's classname.
 * 
 * @param Object, ID of an object
 * @param ClassName, The new classname
 * @return void
 */
function changeClassname( Object, ClassName ){
	var ShowElement = document.getElementById( Object );
	if( ShowElement && ClassName ){
		ShowElement.className = ClassName;
	}
}

/**
 * Change the opacity of an object
 * 
 * @param id The ID of the object that we want to change
 * @param opacStart The start opacity
 * @param opacEnd The end opacity
 * @param millisec The time for changing the opacity
 * @return
 */
function opacity( id, opacStart, opacEnd, millisec ) {
    //speed for each frame
    var speed = Math.round( millisec / 100 );
    var timer = 0;

    //determine the direction for the blending, if start and end are the same nothing happens
    if( opacStart > opacEnd ) {
        for( i = opacStart; i >= opacEnd; i-- ) {
            setTimeout( "changeOpac(" + i + ",'" + id + "')",( timer * speed ) );
            timer++;
        }
    } else if( opacStart < opacEnd ) {
        for(i = opacStart; i <= opacEnd; i++) {
            setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
            timer++;
        }
    }
}

/*
 * change the opacity for different browsers
 */
function changeOpac( opacity, id ) {
    var object = document.getElementById( id ).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

/*
 * Get the HTTP Object
 */
function getHTTPObject(){
	if( window.ActiveXObject ) { 
		// Object in IE7+, Firefox, Chrome, Opera, Safari
		return new ActiveXObject( "Microsoft.XMLHTTP" );
	} else if( window.XMLHttpRequest ) { 
		// Object in IE6, IE5
		return new XMLHttpRequest();
	} else {
		//No AJAX in this browser :-(
		alert( "Your browser does not support AJAX." );
		return null;
	}
}

function changeSelectValue( SelectBoxID, ValueHolderID ) {
	var SelectBoxNode 		= document.getElementById( SelectBoxID ); 	//Selectbox
	var ValueHolderNode 	= document.getElementById( ValueHolderID );	//New element which contains the value
	if ( ValueHolderNode && SelectBoxNode ) {		
		ValueHolderNode.innerHTML = SelectBoxNode.options[ SelectBoxNode.selectedIndex ].innerHTML; //Setting the innerHTML of the selectedIndex in the valueHolder
	}
}

var DarkLayer = null;
var aBlock = null;
var aSluiten = null;

function OpenPicture( url ){
	  if ( url ){ 
	    bodys = document.getElementsByTagName( 'body' );
	    body = bodys[ 0 ]; 

	    if ( body ){

	      if ( ! DarkLayer ) {
	  		var Body = document.getElementsByTagName( 'body' ).item( 0 );
			var HTML = document.getElementsByTagName( 'html' ).item( 0 );
			MaxHeight = Math.max( HTML.offsetHeight, Body.offsetHeight );
	        mD = document.getElementById( 'mDiv' );
 
	        DarkLayer = document.createElement( 'div' ); 
	        DarkLayer.className = 'DarkLayer';
	        $(DarkLayer).css('height', MaxHeight);
	        aBlock = document.createElement( 'a' );
	        aBlock.className = 'PopUpA';
	        aBlock.href = "javascript:void(ClosePicture())";
	        aBlock.appendChild( document.createTextNode( ' ' ) );
	        aBlock.title = "klik hier om te sluiten";
	 
	        aSluiten = document.createElement( 'a' );
	        aSluiten.className = 'SluitenA';
	        aSluiten.href = "javascript:void(ClosePicture())";
	        aSluiten.appendChild( document.createTextNode( 'sluiten' ) );
	        aSluiten.title = "klik hier om te sluiten";
	      }

	      body.appendChild( aBlock );
	      body.appendChild( DarkLayer );
	      body.appendChild( aSluiten );

	      aBlock.style.backgroundImage = 'url(' + url + ')';
	    }
	  }
	}

	function ClosePicture () {
	  bodys = document.getElementsByTagName( 'body' );
	  body = bodys[ 0 ];
	  body.removeChild( DarkLayer );
	  body.removeChild( aBlock );
	  body.removeChild( aSluiten );
	}
	
	function createThumbnails( album ){
		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, null );
		calculateTotalHeightThumbnails();
		
		setButtonClasses();
	}

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

	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 ) {	
		if( typeof(eval(Images[album])) != 'undefined' ){
			setDarkLayerHeight();
			changeClassname('LightBoxHolder', 'Show');
			createThumbnails( album );
			changeClassname('DarkLayer', 'Show');
		}
	}

	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 Titel = document.getElementById( 'Naam' );
		
		if( Titel ) {
			Thumbnail.className = 'Actief';
			Titel.innerHTML = Images[album][image][1];
			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';
		}
	}

	function moveThumbnails( Direction, HowMany ) {
		
		var ThumbnailObject = document.getElementById( 'Thumbnails' );
		
		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;
				
				default :
					throw( 'This is not a valid direction' );
				break;
			}
			
		} else {
			throw( 'Thumbnail holder not found!' );
		}
	}

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

	/**
	 * General javascript initialization
	 */
	$( window ).bind( 'resize load', function() {
		setDarkLayerHeight();
	});
	
	function addListener(element, type, expression, bubbling) {
		bubbling = bubbling || false;
		
		if(window.addEventListener)	{ // Standard
			element.addEventListener(type, expression, bubbling);
			return true;
		} else if(window.attachEvent) { // IE
			element.attachEvent('on' + type, expression);
			return true;
		} else {
			return false;
		}
	}

	var ImageLoader = function(url){
		this.url = url;
		this.image = null;
		this.element = null;
		this.loadEvent = null;
	};

	ImageLoader.prototype = {
		load:function(image){
			this.image = image;
			var url = this.url;
			var image = this.image;
			var loadEvent = this.loadEvent;
			var element = this.element;
			
			addListener(this.image, 'load', function(e){
				if(loadEvent != null){
					loadEvent(url, image, element);
				}
			}, false);
			
			this.image.src = this.url;
		},
		
		getImage:function(){
			return this.image;
		}
	};