/*  
JAVASCRIPT IMAGE GALLERY W/ mootools
Description: A easy, non destructive javascript image gala.
Version: 1.1.3
Author: Devin Ross
Author URI: http://tutorialdog.com
*/

/*
Release notes:
	1.1 - Adds loading animation, and properly fades in images when fully loaded
	1.1.1 - Fixes displaying description, Fades out current image, Works with Mootools 1.2
	1.1.2 - Corrects IE Problem with Transitioning to Next Image (Note: this fix undo's release 1.1's to fade image in smoother)
	1.1.3 - Corrects First Image Text Problem
*/


window.addEvent('domready', function() {
		
		
		// CHANGE THIS !!				
		var inspector = $('main_image');	// WHERE THE LARGE IMAGES WILL BE PLACE	
		var items =    $('image_bar').getChildren();	// WHERE THE THUMBS WILL BE
		
		/* Automatic switching */
		var delayed = 3000;
		var auto = true;
		
		
		var fx = new Fx.Morph(inspector, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
 		var fx2 = new Fx.Morph(inspector, {duration: 200, transition: Fx.Transitions.Sine.easeOut});
		
		
		/* Internal Variables*/
		var lastLiElement = null;
		var itemCount = items.length;
		var curItem = 1;
		var periodical = null;
	
		
		
	    var switchImage = function(item){ 
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage
					var loadimg = 'images/ajax-loader.gif';	   // Reference to load gif
					//var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector); 
					fx2.start({ 'opacity' : 1 });
					var largeImage = new Element('img', { 'src': item.href, 'style': 'width: 230px;height:184px;' }); // create large image
					
					if(lastLiElement != null)
						lastLiElement.className = 'nactive';
					
					liElement = item;
					liElement.className = 'active';
					
					lastLiElement = liElement;
					
					
					
					/* When the large image is loaded, fade out, fade in with new image */
					//largeImage.onload = function(){  // While this line of code causes the images to load/transition in smoothly, it cause IE to stop working
						fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	           				// empty stage
							var description = item.getElement('span');	// see if there is a description
							
							if(description)					   
								var des = new Element('p').set('text', description.get('text')).inject(inspector);
									
							largeImage.inject(inspector); // insert new image
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					//};
					
				});
		}
		

		
		
		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		items.each(function(item){ 
			item.addEvent('click', function(e){
									 $clear(periodical);
									 e = new Event(e).stop();
									 switchImage(item);
						  });
		});
		
		if (auto)
		periodical = (function()
						{
						switchImage(items[curItem]);
						
						if(curItem < (itemCount-1)) 
							curItem++;
						else
							curItem = 0; 
						}
					).periodical(delayed);

		
		
});