// 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();
var myEffect;
var myExecuter;

Slideshow.prototype = {

	initialize: function(image_uris,img_id,img_buffer,container_hyperlink,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;
		_MyExecuter = null;
		_Paused = false;
		_ContainerHyperlink = container_hyperlink;
		
		document.getElementById(_Container1).parentNode.style.position="relative";
		document.getElementById(_Container1).style.position="absolute";
		document.getElementById(_Container2).style.position="absolute";
		document.getElementById(_Container1).style.left="0px";
		document.getElementById(_Container2).style.left="0px";
		
		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)
		{
			_MyExecuter = new PeriodicalExecuter(this.Cycle, 4)	
		}
	},	// [closing: initialize: function(image_uris,img_id,img_buffer,debug_mode) ]
	
	Pause: function() 
	{	
		_Paused = true;
	},
	
	ReStart: function() 
	{	
		_Paused = false;
	},
	
	IsPaused: function() 
	{	
		return _Paused;
	},
	
	
	Cycle: function() 
	{	
		var temp;
		if(_Paused==false)
		{
			//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) 
			{
				myEffect = 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;
							document.getElementById(_ContainerHyperlink).setAttribute("href",$(temp).src.toLowerCase().replace("/photo/","/photo/thumb/"));
							//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() ]
}