// PREREQUISITES
// -------------------------------------------------------
// prototype Lib
// scriptaculous Lib (effects module)

// AUTHOR
// -------------------------------------------------------
// Developed by: 	tsouki
// Contact: 		tsouki@next-step.gr

// REQUIRED HTML STRUCTURE
// -------------------------------------------------------
// slidecontainer: ABSOLUTE POSITIONED 
// buffer: ABSOLUTE POSITIONED. INITIALLY NOT DISPLAYED
//
// <div class="main_photo">
//	 <img src="/files/36_1.jpg" alt="" id="slidecontainer" />
//	 <img src="" alt="" id="buffer" style="display:none;" />
// </div>

// USAGE
// -------------------------------------------------------
// <script src="/scripts/slideshow.js" type="text/javascript"></script>	
// <script type="text/javascript">
//	 function initSlideshow() 
//	 { 
//		var myPhotos = [];
//		myPhotos[0] = '/files/36_1.jpg';
//		myPhotos[1] = '/files/89_61.jpg';
//		myPhotos[2] = '/files/90_1.jpg';
//		mySlideshow = new Slideshow(myPhotos,'slidecontainer','buffer',true);						
//	 }
//	 Event.observe(window, 'load', initSlideshow, false);
// </script>

imageObj = new Image();
var Slideshow = Class.create();

Slideshow.prototype = {

	initialize: function(image_uris,img_id,img_buffer,debug_mode) {
		//the index of the cuurent displayed image
		_currentImage=0;
		//an array with the urls of the images to be slided
		_ImageUrls = image_uris;
		//the id of the elements that hosts the images
		_Container1 = img_id;
		//the image buffer. a second IMG tag that is used for the image lazy loading
		_Container2 = img_buffer;
		//current active image id
		_ActiveImage = _Container1;
		//current buffer id
		_Buffer = _Container2;
		//the debug win element. Populate in the line below.
		_DebugWin = null;
		//flag informing if debug output must be produced.
		_DebugMode = debug_mode;
		
		if(_DebugMode==true)
		{
			var objBody = document.getElementsByTagName("body").item(0);
			var objOverlay = document.createElement("debug");
			objOverlay.setAttribute('id','overlay');
			objOverlay.style.position = 'absolute';
			objOverlay.style.width = '400px';
			objOverlay.style.height = '200px';
			objOverlay.style.top = '0px';
			objOverlay.style.left = '10px';
			objOverlay.style.backgroundColor = "white";
			objOverlay.style.overflow="scroll"; 
			objBody.appendChild(objOverlay);
			_DebugWin = objOverlay;
			_DebugWin.innerHTML += "DEBUG WINDOW <br /><br />"; 
		}
				
		//Populate active image
		$(_ActiveImage).src=_ImageUrls[_currentImage];	
		_currentImage += 1;
		if(_currentImage>=_ImageUrls.length)
		{
			_currentImage=0;
		}	
		//Populate buffer
		if(!$(_Buffer))
		{
			return;
		}
		$(_Buffer).src = _ImageUrls[_currentImage];
		
		
		if(_DebugMode==true){
			_DebugWin.innerHTML += "Current Image index in buffer: " + _currentImage + "<br />"; 
			_DebugWin.innerHTML += " --------------------------------- <br />";
			_DebugWin.scrollTop = _DebugWin.scrollHeight;
		}
		if(_ImageUrls.length>1)
		{
			new PeriodicalExecuter(this.Cycle, 4)	
		}
	},	// [closing: initialize: function(image_uris,img_id,img_buffer,debug_mode) ]
	
	Cycle: function() 
	{	
		var temp;
		
		//assign the src of the buffer to an image object in order to test if the
		//image has been downloaded. If it has continue continue with the transistion effect 
		//else skip frame		
		imageObj.src = $(_Buffer).src;
		if(imageObj.complete) 
		{
			new Effect.Parallel(
				[new Effect.Fade(_ActiveImage,{duration: 3}), new Effect.Appear(_Buffer,{duration: 3})],
		    	{ 
					duration: 3, 
		      		afterFinish: function(effect) 
					{ 
						_currentImage += 1;
						if(_currentImage >= _ImageUrls.length)
						{
							_currentImage=0;
						}	
						//Switch active image
						temp = _Buffer;
						_Buffer = _ActiveImage;
						_ActiveImage = temp;
						//Load the next image to the buffer, which is invisible because of the fade effect	
						$(_Buffer).src = _ImageUrls[_currentImage];
						
						
						if(_DebugMode==true)
						{
							_DebugWin.innerHTML += "Active Image: " + _ActiveImage + "<br />";		
							_DebugWin.innerHTML += "Buffer Image: " + _Buffer + "<br />";
							_DebugWin.innerHTML += "Visible Image: " + $(_ActiveImage).src + "<br />";	
							_DebugWin.innerHTML += "Buffer is loading Image: " + $(_Buffer).src + "<br />";	
							_DebugWin.innerHTML += "Current Image index in buffer: " + _currentImage + "<br />"; 
							_DebugWin.innerHTML += "--------------------------------- <br />";
							_DebugWin.scrollTop = _DebugWin.scrollHeight;
						}	
							
					} 
		    	}
		
			);		// [closing: new Effect.Parallel( ]
		}	// [closing: if(newImage.complete) ]
		else
		{
			if(_DebugMode==true){
			_DebugWin.innerHTML += "Frame skipped<br />"; 
			_DebugWin.innerHTML += "--------------------------------- <br />";
			_DebugWin.scrollTop = _DebugWin.scrollHeight;
		}
		}
	}	// [closing: Cycle: function() ]
}