nl.ydso.modules.slideShowAdvanced = function( moduleId )
{
	var _self			= this;		
	
	var parent			= document.getElementById( 'mod-slideshow-advanced-' + moduleId );
	var container;					// The whole component
	var mask;						// Contains the images
	var busy			= false;
	
	var slides			= {};
	var loaded			= 0;
	
	var width;						// Width of the container
	var height;						// Height of the container
	var timeout;					// Timeout to next slide
	var autostart;					// Automatically start
	var timer;						// Next slide Timer
	
	var current			= 0;		// The current active slide
	
	var typePos			= 0;		// Current position of the typewriter
	var typeTimer;
	
	var slideData;					// Slide XML data
	var slideCount;					// Total number of slides
	var slideButtons	= {};		// Holds references to the buttons
	var slideImages		= {};		// Holds references to the images
	var descriptions	= {};

	this.init = function( xmldoc )
	{
		/**
		 * Load configuration from XML file
		 */
		width		= parseInt( xmldoc.getElementsByTagName("width")[0].childNodes[0].nodeValue );
		height		= parseInt( xmldoc.getElementsByTagName("height")[0].childNodes[0].nodeValue );
		slideData	= xmldoc.getElementsByTagName("image");
		slideCount	= slideData.length;
		
//		var tweenControls	= xml.getElementsByTagName("controls")[0].childNodes[0].nodeValue;
		autostart	= xmldoc.getElementsByTagName("autoscroll")[0].childNodes[0].nodeValue;
//		tweenDescription	= parseInt( xml.getElementsByTagName("description")[0].childNodes[0].nodeValue );
		effect			= xmldoc.getElementsByTagName("effect")[0].childNodes[0].nodeValue;
		effectTime		= parseInt( xmldoc.getElementsByTagName("effectTime")[0].childNodes[0].nodeValue );
//		tweenAnimation		= xml.getElementsByTagName("animation")[0].childNodes[0].nodeValue; //<---- wordt nog niet gebruikt
		timeout		= xmldoc.getElementsByTagName("timeout")[0].childNodes[0].nodeValue;
		
		
		/**
		 * Set tween start and end points
		 */
		switch ( effect )
		{
			case 'x':
				begin	= 0;
				finish	= width;
				break;
			
			case 'y':
				begin	= 0;
				finish	= height;
				break;
			
			case 'alpha':
				begin	= 1;
				finish	= 0;
				break;
		}


		/**
		 * Mask for images
		 */
		mask = document.createElement( "div" );
		mask.style.position	= "relative";
		mask.style.overflow	= "hidden";
		mask.style.width	= width + "px";
		mask.style.height	= height + "px";


		/**
		 * Create a container for the whole component
		 */
		container = document.createElement( "div" );
		container.className 		= "mod-advanced-slideshow";
		container.style.position	= "relative";
		container.style.width		= width + "px";
		container.style.height		= height + "px";
		container.appendChild( mask );
		
		
		/**
		 * Get all images from the xml and put all data in an array
		 */
		for ( var i = 0; i < slideCount; i++ )
		{
			/**
			 * Title DIV
			 */
			var title = document.createElement( "div" );
			title.className = "title";
			title.appendChild( document.createTextNode( slideData[i].getElementsByTagName("title")[0].childNodes[0].nodeValue ) );
			
			
			/**
			 * Description DIV
			 */
			var description = document.createElement( "div" );
			description.className = "description";
			description.appendChild( document.createTextNode( slideData[i].getElementsByTagName("description")[0].childNodes[0].nodeValue ) );

			
			/**
			 * Link element
			 */
			var a = document.createElement( "a" );
			a.setAttribute('href', slideData[i].getElementsByTagName("link_url")[0].childNodes[0].nodeValue ); 
			a.appendChild( document.createTextNode( slideData[i].getElementsByTagName("link_label")[0].childNodes[0].nodeValue ) );

			
			/**
			 * Link DIV
			 */
			var link = document.createElement( "div" );
			link.className = "link";
			link.appendChild( a );
			
			
			/**
			 * Button for each slide
			 */
			var button = document.createElement( "div" );
			button.className	= "button button-" + ( i + 1 );
			
			button.onmouseover	= function()
			{
				this.className += " hover";
			};
			
			button.onmouseout	= function()
			{
				this.className = this.className.replace(new RegExp(" hover\\b"), "");
			};
			
			button.setActive	= function()
			{
				this.className += " active";
			};
			
			button.setInActive	= function()
			{
				this.className = this.className.replace(new RegExp(" active\\b"), "");
			};
			
			button.onclick		= function()
			{
				if ( timer )
				{
					clearInterval( timer );
				}
				
				_self.gotoSlide( this.getAttribute( 'slide' ) ); 
			};
			
			button.setAttribute( 'slide', i );
			button.appendChild( title );
			button.appendChild( description );
			button.appendChild( link );
			
			slideButtons[i] = button;
			
			/**
			 * Super impose text
			 */
			var superImpose = document.createElement( "div" );
			superImpose.className = "super-impose super-impose-" + ( i + 1 );
//			superImpose.appendChild( document.createTextNode( slideData[i].getElementsByTagName("super_impose")[0].childNodes[0].nodeValue ) );
			container.appendChild( superImpose );
			
			descriptions[i] = {};
			descriptions[i].value	= slideData[i].getElementsByTagName("super_impose")[0].childNodes[0].nodeValue;
			descriptions[i].element	= superImpose;
			
			
			/**
			 * Add the button to the container 
			 */
			container.appendChild( button );
		}
		
		
		/**
		 * Start loading the images
		 */
		_self.preloadImages();
		
		
		/**
		 * Start loading the images
		 */
		//_self.typeWrite();
		
		
		/**
		 * 
		 */
		parent.appendChild( container );
		
		
		/**
		 * Activate the first slide
		 */
		slideButtons[0].setActive();
		
		
		if ( autostart )
		{
			timer = setInterval ( function() { _self.nextSlide(); }, timeout );
		}
	}
	
	
	/**
	 * Go to given slide
	 */
	this.gotoSlide = function( slide )
	{
		if ( slide == current || busy )
		{
			return;
		}
		else
		{
			busy = true;
			
			/**
			 * Fade away current slide
			 */
			descriptions[current].element.innerHTML = '';
			clearInterval( typeTimer );
			new com.ydso.transitions.Tween( slideImages[current], effect, com.ydso.easing.outBackCubic, begin, finish, effectTime );
			typePos = 0;
			descriptions[current].element.innerHTML = '';
			slideButtons[current].setInActive();
			
			
			/**
			 * Fade away current slide
			 */
			if ( effect != 'alpha' )
			{
				slideImages[slide].style.opacity		= 1;
				slideImages[slide].style.MozOpacity		= 1;
				slideImages[slide].style.KhtmlOpacity	= 1;
				slideImages[slide].style.filter			= "alpha( opacity=100)";
			}
			
			current = slide;

			new com.ydso.transitions.Tween( slideImages[current], effect, com.ydso.easing.outBackCubic, finish, begin, effectTime, _self.busyReset );
			slideButtons[current].setActive();
		}
	}
	
	
	/**
	 * Go to the next slide
	 */
	this.nextSlide = function()
	{
		var next;
		
		if ( current == slideCount - 1 )
		{
			next = 0;
		}
		else
		{
			next = current + 1;
		}
		
		_self.gotoSlide( next );
	}
	
	
	this.busyReset = function ()
	{
		busy = false;

		//_self.typeWrite();
	}
	
	
	/**
	 * Load all slides in linear order
	 */
	this.preloadImages = function()
	{
		if ( loaded < slideCount )
		{
			var image = document.createElement( "img" );
			image.setAttribute( "src", slideData[loaded].getElementsByTagName("image_url")[0].childNodes[0].nodeValue );
			image.style.position	= "absolute";
			image.style.width		= width + "px";
			image.style.height		= height + "px";
			image.style.top			= "0px";
			image.style.left		= "0px";
			//image.onload			= _self.preloadImages;
			
			if ( loaded > 0 )
			{
				image.style.opacity			= 0;
				image.style.MozOpacity		= 0;
				image.style.KhtmlOpacity	= 0;
				image.style.filter			= "alpha( opacity=0)";
			}
			
			slideImages[loaded] = image;
			
			mask.appendChild( image );
			
			loaded++;
			
			_self.preloadImages();
		}
	}
	
	this.typeWrite = function ()
	{
		if ( descriptions[current].element.innerHTML.length < descriptions[current].value.length + 46  )
		{
			typePos++;
			
			descriptions[current].element.innerHTML = descriptions[current].value.substring( 0, typePos ) + '<span style="text-decoration:blink;">_</span>';
			typeTimer = setTimeout( function() { _self.typeWrite(); }, 50 );
		}
	}
	
	
	/**
	 * Load the XML file
	 */
	var request = new com.ydso.net.HTTPRequest();
	request.url			= "/var/cache/" + moduleId + ".xml";
	request.callback	= _self.init
	request.mode		= "XML";
	request.send();
}