/*  
JAVASCRIPT IMAGE GALLERY W/ mootools
Description: A easy, non destructive javascript image gala.
Version: 1.1
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
*/

var currentImg = 1;

window.addEvent('domready', function() {
		
		var totalSlides = $$('.item').length+1;
		var slides = $$('.item').length;
		
		var pos = 0;
		var offset = 600;	// HOW MUCH TO SLIDE WITH EACH CLICK
		var currentslide = 1;	// CURRENT SLIDE IS THE FIRST SLIDE
		var inspector = $('fullimg');	// WHERE THE LARGE IMAGES WILL BE PLACE	
		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});

		
		/* THUMBNAIL IMAGE SCROLL */
		var imgscroll = new Fx.Scroll('wrapper', {
   			offset: {'x': 0, 'y': 0},
   			transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
		}).toLeft();

		if(slides > 6){
			/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
			$('moveleft').addEvent('click', function(e) { 
				new Event(e).stop();
				if(currentslide == 1) return;
				currentslide--;					// CURRENT SLIDE IS ONE LESS
				pos += -(offset);				// CHANGE SCROLL POSITION
				imgscroll.start(pos);			// SCROLL TO NEW POSITION
			});
			$('moveright').addEvent('click', function(e) { 
				new Event(e).stop();
				if(currentslide >= slides) return;
				currentslide++;
				pos += offset;
				imgscroll.start(pos);
			});
		} else {
			$('moveleft').setStyle('display','none');
			$('moveright').setStyle('display','none');
		}
		/* EVENTS - WHEN RIGHT ARROW IS CLICKED */
		$('gal_right').addEvent('click', function(e) {
			new Event(e).stop();
			currentImg++;
			if(currentImg > totalSlides-1) currentImg = 1;
			var item = $$('a[title='+currentImg+']');
			fx2.start({ 
				'opacity' : 0													
			}).chain(function(){

				inspector.empty();		// Empty Stage
					var loadimg = 'images/ajax-loader.gif';	   // Reference to load gif
					fx2.start({'opacity':1});
					var largeImage = new Element('img', { 'src': item.getProperty('href') }); // create large image
					
					//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('em');	// see if there is a description
							
							if(description)					   
								var des = new Element('em').set('html', description.get('html')).inject(inspector).formatLink();
							largeImage.inject(inspector); // insert new image
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					//};

			});
		});
		
		/* EVENTS - WHEN RIGHT LEFT IS CLICKED */
		$('gal_left').addEvent('click', function(e) {
			new Event(e).stop();
			currentImg = (currentImg == 1)? totalSlides-1 : (currentImg-1) % totalSlides;
			var item = $$('a[title='+currentImg+']');
			fx2.start({ 
				'opacity' : 0													
			}).chain(function(){
				
				inspector.empty();		// Empty Stage
					var loadimg = 'images/ajax-loader.gif';	   // Reference to load gif
					fx2.start({ 'opacity' : 1 });
					var largeImage = new Element('img', { 'src': item.getProperty('href') }); // create large image
					
					/* 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('em');	// see if there is a description
							
							if(description)					   
								var des = new Element('em').set('html', description.get('html')).inject(inspector).formatLink();
							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 */
		$$('.item').each(function(item){ 
			item.addEvent('click', function(e) { 
				new Event(e).stop();
				currentImg = item.getProperty('title');
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage
					var loadimg = 'images/ajax-loader.gif';	   // Reference to load gif
					fx2.start({ 'opacity' : 1 });
					var largeImage = new Element('img', { 'src': item.href }); // create large image
					
					/* 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('em');	// see if there is a description
							
							if(description)					   
								var des = new Element('em').set('html', description.get('html')).inject(inspector).formatLink();
							largeImage.inject(inspector); // insert new image
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					//};
					
				});
			});
		});

		// INSERT THE INITAL IMAGE - LIKE ABOVE
		// INSERT THE INITAL IMAGE - LIKE ABOVE
inspector.empty();
var description = $('first').getElement('em');
//if(description) var desc = new Element('em').setHTML(description.get('html')).inject(inspector);
if(description){
	var des = new Element('em').set('html', description.get('html')).inject(inspector).formatLink();
};
var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);	
});
Element.implement({
	formatLink: function(){
		var span = this.getElement('span.clickHere');
		var link = new Element('a', {
			'href': span.get('text'),
			'class': 'clickHere',
			'html': 'Learn More'					   
		});
		link.replaces(span);
		return this;
	}
});