/*  
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 slides = (st = document.getElementById('counter')) ? st.value : 0;
		var slides_1 = (st = document.getElementById('counter_1')) ? st.value : 0;
		var slides_2 = (st = document.getElementById('counter_2')) ? st.value : 0;
		var slides_3 = (st = document.getElementById('counter_3')) ? st.value : 0;
		var slides_4 = (st = document.getElementById('counter_4')) ? st.value : 0;
		var slides_5 = (st = document.getElementById('counter_5')) ? st.value : 0;
		var slides_6 = (st = document.getElementById('counter_6')) ? st.value : 0;
		var slides_7 = (st = document.getElementById('counter_7')) ? st.value : 0;
		var slides_8 = (st = document.getElementById('counter_8')) ? st.value : 0;
		
		var pos = 0;
		var pos_1 = 0;
		var pos_2 = 0;
		var pos_3 = 0;
		var pos_4 = 0;
		var pos_5 = 0;
		var pos_6 = 0;
		var pos_7 = 0;
		var pos_8 = 0;
		
		// HOW MUCH TO SLIDE WITH EACH CLICK
		var offset = 80;
		var offset_1 = 80;
		var offset_2 = 80;
		var offset_3 = 80;
		var offset_4 = 80;
		var offset_5 = 80;
		var offset_6 = 80;
		var offset_7 = 80;
		var offset_8 = 80;
		
		// CURRENT SLIDE IS THE FIRST SLIDE
		var currentslide = 1;
		var currentslide_1 = 1;
		var currentslide_2 = 1;
		var currentslide_3 = 1;
		var currentslide_4 = 1;
		var currentslide_5 = 1;
		var currentslide_6 = 1;
		var currentslide_7 = 1;
		var currentslide_8 = 1;
		
		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});

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

			/* 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);
			});			
		}

		if (document.getElementById("wrapper_1")) { 
		
			/* THUMBNAIL IMAGE SCROLL */
			var imgscroll_1 = new Fx.Scroll('wrapper_1', {
				offset_1: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
			}).toLeft();

			/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
			$('moveleft_1').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_1 == 1) return;
				currentslide_1--;			// CURRENT SLIDE IS ONE LESS
				pos_1 += -(offset_1);		// CHANGE SCROLL POSITION
				imgscroll_1.start(pos_1);	// SCROLL TO NEW POSITION
			});
			$('moveright_1').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_1 >= slides_1) return;
				currentslide_1++;
				pos_1 += offset_1;
				imgscroll_1.start(pos_1);
			});			
		}
		
		if (document.getElementById("wrapper_2")) { 
		
			/* THUMBNAIL IMAGE SCROLL */
			var imgscroll_2 = new Fx.Scroll('wrapper_2', {
				offset_2: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
			}).toLeft();

			/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
			$('moveleft_2').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_2 == 1) return;
				currentslide_2--;			// CURRENT SLIDE IS ONE LESS
				pos_2 += -(offset_2);		// CHANGE SCROLL POSITION
				imgscroll_2.start(pos_2);	// SCROLL TO NEW POSITION
			});
			$('moveright_2').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_2 >= slides_2) return;
				currentslide_2++;
				pos_2 += offset_2;
				imgscroll_2.start(pos_2);
			});			
		}
		
		if (document.getElementById("wrapper_3")) { 
		
			/* THUMBNAIL IMAGE SCROLL */
			var imgscroll_3 = new Fx.Scroll('wrapper_3', {
				offset_3: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
			}).toLeft();

			/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
			$('moveleft_3').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_3 == 1) return;
				currentslide_3--;			// CURRENT SLIDE IS ONE LESS
				pos_3 += -(offset_3);		// CHANGE SCROLL POSITION
				imgscroll_3.start(pos_3);	// SCROLL TO NEW POSITION
			});
			$('moveright_3').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_3 >= slides_3) return;
				currentslide_3++;
				pos_3 += offset_3;
				imgscroll_3.start(pos_3);
			});			
		}
		
		if (document.getElementById("wrapper_4")) { 
		
			/* THUMBNAIL IMAGE SCROLL */
			var imgscroll_4 = new Fx.Scroll('wrapper_4', {
				offset_4: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
			}).toLeft();

			/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
			$('moveleft_4').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_4 == 1) return;
				currentslide_4--;			// CURRENT SLIDE IS ONE LESS
				pos_4 += -(offset_4);		// CHANGE SCROLL POSITION
				imgscroll_4.start(pos_4);	// SCROLL TO NEW POSITION
			});
			$('moveright_4').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_4 >= slides_4) return;
				currentslide_4++;
				pos_4 += offset_4;
				imgscroll_4.start(pos_4);
			});			
		}
		
		if (document.getElementById("wrapper_5")) { 
		
			/* THUMBNAIL IMAGE SCROLL */
			var imgscroll_5 = new Fx.Scroll('wrapper_5', {
				offset_5: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
			}).toLeft();

			/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
			$('moveleft_5').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_5 == 1) return;
				currentslide_5--;			// CURRENT SLIDE IS ONE LESS
				pos_5 += -(offset_5);		// CHANGE SCROLL POSITION
				imgscroll_5.start(pos_5);	// SCROLL TO NEW POSITION
			});
			$('moveright_5').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_5 >= slides_5) return;
				currentslide_5++;
				pos_5 += offset_5;
				imgscroll_5.start(pos_5);
			});			
		}
		
		if (document.getElementById("wrapper_6")) { 
		
			/* THUMBNAIL IMAGE SCROLL */
			var imgscroll_6 = new Fx.Scroll('wrapper_6', {
				offset_6: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
			}).toLeft();

			/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
			$('moveleft_6').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_6 == 1) return;
				currentslide_6--;			// CURRENT SLIDE IS ONE LESS
				pos_6 += -(offset_6);		// CHANGE SCROLL POSITION
				imgscroll_6.start(pos_6);	// SCROLL TO NEW POSITION
			});
			$('moveright_6').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_6 >= slides_6) return;
				currentslide_6++;
				pos_6 += offset_6;
				imgscroll_6.start(pos_6);
			});			
		}
		
		if (document.getElementById("wrapper_7")) { 
		
			/* THUMBNAIL IMAGE SCROLL */
			var imgscroll_7 = new Fx.Scroll('wrapper_7', {
				offset_7: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
			}).toLeft();

			/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
			$('moveleft_7').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_7 == 1) return;
				currentslide_7--;			// CURRENT SLIDE IS ONE LESS
				pos_7 += -(offset_7);		// CHANGE SCROLL POSITION
				imgscroll_7.start(pos_7);	// SCROLL TO NEW POSITION
			});
			$('moveright_7').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_7 >= slides_7) return;
				currentslide_7++;
				pos_7 += offset_7;
				imgscroll_7.start(pos_7);
			});			
		}
		
		if (document.getElementById("wrapper_8")) { 
		
			/* THUMBNAIL IMAGE SCROLL */
			var imgscroll_8 = new Fx.Scroll('wrapper_8', {
				offset_8: {'x': 0, 'y': 0},
				transition: Fx.Transitions.Cubic.easeOut	// HOW THE SCROLLER SCROLLS
			}).toLeft();

			/* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */
			$('moveleft_8').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_8 == 1) return;
				currentslide_8--;			// CURRENT SLIDE IS ONE LESS
				pos_8 += -(offset_8);		// CHANGE SCROLL POSITION
				imgscroll_8.start(pos_8);	// SCROLL TO NEW POSITION
			});
			$('moveright_8').addEvent('click', function(event) { event = new Event(event).stop();
				if(currentslide_8 >= slides_8) return;
				currentslide_8++;
				pos_8 += offset_8;
				imgscroll_8.start(pos_8);
			});			
		}
		

	
		
		/* 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();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage
					var loadimg = '/images/spinner_480x300.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 }); // 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('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				
						});
					//};
					
				});
			});
		});

		// INSERT THE INITAL IMAGE - LIKE ABOVE
		inspector.empty();
		var description = $('first').getElement('span');
		if(description) var des = new Element('p').set('text', description.get('text')).inject(inspector);
		var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);
	
});