/*  
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
*/


window.addEvent('domready', function() {
		
		
		// CHANGE THIS !!
		var slides2 = 7;		// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		
		var pos2 = 0;
		var offset2 = 390;	// HOW MUCH TO SLIDE WITH EACH CLICK
		var currentslide2 = 1;	// CURRENT SLIDE IS THE FIRST SLIDE
		var inspector2 = $('fullimg2');	// WHERE THE LARGE IMAGES WILL BE PLACE	
		var fx3 = new Fx.Morph(inspector2, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
 		var fx4 = new Fx.Morph(inspector2, {duration: 200, transition: Fx.Transitions.Sine.easeOut});

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

	
		/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
		$('moveleft2').addEvent('click', function(event) { event = new Event(event).stop();
			if(currentslide2 == 1) return;
			currentslide2--;					// CURRENT SLIDE IS ONE LESS
			pos2 += -(offset2);				// CHANGE SCROLL POSITION
			imgscroll2.start(0,pos2);			// SCROLL TO NEW POSITION
		});
		$('moveright2').addEvent('click', function(event) { event = new Event(event).stop();
			if(currentslide2 >= slides2) return;
			currentslide2++;
			pos2 += offset2;
			imgscroll2.start(0,pos2);
		});
		
		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		$$('.item2').each(function(item){ 
			item.addEvent('click', function(e) { 
				e = new Event(e).stop();
				fx4.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector2.empty();		// Empty Stage
					var loadimg2 = 'images/ajax-loader.gif';	   // Reference to load gif
					var load2 = new Element('img', { 'src': loadimg2, 'class': 'loading2' }).inject(inspector2); 
					fx4.start({ 'opacity' : 1 });
					var largeImage2 = 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
						fx3.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector2.empty();	           				// empty stage
							var description2 = item.getElement('span');	// see if there is a description
							
							if(description2)					   
								var des2 = new Element('p').set('text', description2.get('text')).inject(inspector2);
									
							largeImage2.inject(inspector2); // insert new image
							fx3.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					//};
					
				});
			});
		});

		// INSERT THE INITAL IMAGE - LIKE ABOVE
		inspector2.empty();
		var description2 = $('first2').getElement('span');
		if(description2) var desc2 = new Element('p').setHTML(description2.get('html')).inject(inspector2);
		var largeImage2 = new Element('img', {'src': $('first2').href}).inject(inspector2);
	
});