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

/*
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 !!
		//document.getElementById('numSlides').style.display = 'none'; // hide number of thumbnails
		if ($('numSlides') != null)
			$('numSlides').style.display = 'none'; // hide number of thumbnails
		if ($('spanID') != null) 
			$('spanID').style.display = 'none'; // hide spanID
		if ($('numSlides') == null)
			var numThumb = 0;
		else
			var numThumb = parseInt($('numSlides').get('text')); // number of thumbnails
		
		if ($('spanID') == null)
			var spanID = '';
		else
			var spanID = String($('spanID').get('text'));
		if ($('styleID') == null)
			var styleID = '';
		else	
			var styleID = String($('styleID').get('text'));
		if ($('lengthID') == null)
			var lengthID = '';
		else
			var lengthID = String($('lengthID').get('text'));
		if ($('colorID') == null)
			var colorID = '';
		else
			var colorID = String($('colorID').get('text'));
		var nodes = new Array;		
		
		var slides = Math.ceil(numThumb / 5);		// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		var pos = 0;
		var offset = 400;	// 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 inspectorStyle = $('styleTxt'); // Where style will be placed
		var inspectorLength = $('lengthTxt'); // Where length will be placed
		var inspectorColor = $('colorTxt'); // Where color will be placed
		
		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();

	
		/* 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) { 
	
				nodes = item.getElementsByTagName('span');
				//alert(nodes.length);
				//alert(navigator.appName);
				if (navigator.appName == 'Microsoft Internet Explorer') {
					spanID = nodes[0].innerText;
					styleID = nodes[1].innerText;
					lengthID = nodes[2].innerText;
					colorID = nodes[3].innerText;
				} else {
					spanID = nodes[0].get('text');
					styleID = nodes[1].get('text');
					lengthID = nodes[2].get('text');
					colorID = nodes[3].get('text');
				}
				
				
				e = new Event(e).stop();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage
					
					inspectorLength.empty();
					inspectorColor.empty();
					inspectorStyle.empty();
					
					
					style = $(styleID);		
					length = $(lengthID);
					color = $(colorID);

					if(style) sty = new Element('li').set('text', style.get('text')).inject(inspectorStyle);
					if(length) len = new Element('li').set('text', length.get('text')).inject(inspectorLength);
					if(color) col = new Element('li').set('text', color.get('text')).inject(inspectorColor);
					
					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 }); // 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
							inspectorLength.empty();
							inspectorColor.empty();
							inspectorStyle.empty();
						

							description = item.getElementById(spanID);	// see if there is a description
							style = item.getElementById(styleID);									
							length = item.getElementById(lengthID);
							color = item.getElementById(colorID);
		
							if(description) des = new Element('p').set('text', description.get('text')).inject(inspector);
						
							if(style) sty = new Element('li').set('text', style.get('text')).inject(inspectorStyle);
							if(length) len = new Element('li').set('text', length.get('text')).inject(inspectorLength);
							if(color) col = new Element('li').set('text', color.get('text')).inject(inspectorColor);

							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();
		
		inspectorLength.empty();
		inspectorColor.empty();
		inspectorStyle.empty();
		
		var style = $('first').getElementById(styleID);		
		var length = $('first').getElementById(lengthID);
		var color = $('first').getElementById(colorID);
		
		var description = $('first').getElementById(spanID);
		//length.get('text') + '\n' + color.get('text');
		
		
		if(description) var desc = new Element('p').set('text', description.get('text')).inject(inspector);
		if(style) var sty = new Element('li').set('text', style.get('text')).inject(inspectorStyle);
		if(length) var len = new Element('li').set('text', length.get('text')).inject(inspectorLength);
		if(color) var col = new Element('li').set('text', color.get('text')).inject(inspectorColor);
		var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);
	
	
	
	//if(description) var desc = new Element(’p').setHTML(description.get(’html’)).inject(inspector);
	
	
	});