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

window.addEvent('domready', function() {
		
		
		// CHANGE THIS !!
		var slides = 2;			// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		
		
		var pos = 0;
		var offset = 120;																		   // 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 PLACED
		var fx = inspector.effects({duration:300, transition: Fx.Transitions.linear});
		
		/* PREVIEW IMAGE SCROLL */
		var imgscroll = new Fx.Scroll('wrapper', {
			offset:{'x':0, 'y':0},																// INITIAL POSITION
			transition: Fx.Transitions.Cubic.easeOut										   // HOW THE SCROLLER SCROLLS
		});
	
		/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
		$('moveleft').addEvent('click', function(event) { event = new Event(event).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(event) { event = new Event(event).stop();
			if(currentslide >= slides) return;
			currentslide++;
			pos += offset;
			imgscroll.start(pos);
		});
		
		/* WHEN AN ITEM IS CLICKED, IT INSERTS THE IMAGE INTO THE FULL VIEW DIV */
		$$('.item').each(function(item){ 
			item.addEvent('click', function(e) { 
				e = new Event(e).stop();
				/* Chain of Events to fade in and fade out images */
				fx.start({ 
					'opacity' : 0																		  		 // Fade out large view
				}).chain(function(){
					inspector.empty();																		   // Clear stuff in large view
					var description = item.getElement('span'); 											 	  // Get Description for new photo
					if(description)																		 	 // Make sure there is an actual description
						var desc = new Element('p').setHTML(description.get('html')).inject(inspector);  	// Insert element with description text
					var largeImage = new Element('img', { 'src': item.href }).inject(inspector); 		   // Fade in new image
					//fx.start.delay(1000,,{'opacity':1});
					this.start.delay(600, this, {
						'opacity': 1
					});

				});
			});
		});

		// INSERT THE INITAL IMAGE - LIKE ABOVE
		var description = $('first').getElement('span');
		if(description) var desc = new Element('p').setHTML(description.get('html')).inject(inspector);
		var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);
		
		imgscroll.toLeft();	 // ON A RELOAD, RESET SlIDER
	
});