/*  
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() {
	if ($('items') && $('areaImg') && $('moveleft') && $('moveright')){
		
		var url='/';
		// CHANGE THIS !!
		
		var x =$('items');
		var currentImgs;
		var rangeMax = 10;
		var rangeMin = 1;
		var totalImgs = [];
		for (var i = 0; i < x.childNodes.length; i++) {
			if (x.childNodes[i].nodeName == "LI") {
				totalImgs.push(x.childNodes[i]);
			}
		}
//		alert (liNodes.length);
		var slides = Math.ceil(totalImgs.length/rangeMax);					   // NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		var pos = 0;
		var offset = 560;												 // HOW MUCH TO SLIDE WITH EACH CLICK
		var currentslide = 1;											// CURRENT SLIDE IS THE FIRST SLIDE
		var inspector = $('areaImg');								   // 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('imagens', {
   			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
			rangeMin = (((totalImgs.length  + (currentslide*10))/2))-10;
			rangeMax = ((totalImgs.length  + (currentslide*10))/2)-1;
			if (currentslide == 1)
			{
				rangeMin = 1;
				rangeMax = 10;
			}
			document.getElementById('countImg').innerHTML = "» Fotografias " + rangeMin +" - " + rangeMax + " de "+ totalImgs.length;
			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++;
			rangeMin = rangeMax + 1;
			rangeMax = ((totalImgs.length  + (currentslide*10))/2)-1;
			if (currentslide == slides)
				rangeMax = totalImgs.length;
			document.getElementById('countImg').innerHTML = "» Fotografias " + rangeMin +" - " + rangeMax + " de "+ totalImgs.length;
			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();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage
					var loadimg = url+'imgs/ajax-loader.gif';	   // Reference to load gif
					var load = new Element('img', { 'src':url+'imgs/spacerBigGaleria.gif', 'class': 'loading', 'width':'600px', 'height':'350px', 'style':'background:url('+loadimg+') no-repeat center center'  }).inject(inspector);
					fx2.start({ 'opacity' : 1 });
					var largeImage = new Element('img', { 'src':url+'imgs/spacerBigGaleria.gif', 'width':'600px', 'height':'350px', 'style':'background:url('+item.href+') no-repeat center center'}); // 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
							
								$("descImg").innerHTML = description.get('text');
								//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');
		document.getElementById('descImg').innerHTML = description.get('text');
		if (totalImgs.length <= rangeMax)
		{
			rangeMax = totalImgs.length;
		}
		document.getElementById('countImg').innerHTML = "» Fotografias " + rangeMin +" - " + rangeMax + " de "+ totalImgs.length;
		var largeImage = new Element('img', { 'src':url+'imgs/spacerBigGaleria.gif', 'width':'600px', 'height':'350px', 'style':'background:url('+$('first').href+') no-repeat center center'}).inject(inspector); // create large image
	}
});