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


function prepareThumbLinks(){
	//alert("here")
	var linkList = $('img_gallery');
	var links = getElementsByClassName('thumb');
	
	for(var i=0; i<links.length; i++){
			links[i].onclick = function(){
			for(var i=0; i<links.length; i++){
				//links[i].removeClass('active');
			}
			//this.addClass('active');
			//this.addClass('visited');
			return false;	
		}	
	}
}


function getElementsByClassName(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}

window.addEvent('domready', function() {
	if($('img_gallery')){	
		var numThumbs = getElementsByClassName('thumb');
		
		// Added. Add a style to the thumb when they are clicked
		//prepareThumbLinks();
		
		// CHANGE THIS !!
		var slides = Math.ceil(numThumbs.length/6);					// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		//alert(slides)
		//var slides =2;
		var pos = 0;
		var offset = 910;												 // 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 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': 200},
   			transition: Fx.Transitions.Cubic.easeOut  				// HOW THE SCROLLER SCROLLS
		}).toBottom();

		$('moveleft').addClass('inactive');
		if(slides ==1){
			$('moveright').addClass('inactive');
		}		
		
		
		/* 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);
			if(currentslide == 1){
				$('moveleft').addClass('inactive');
			}
			if(slides > 1){
				$('moveright').removeClass('inactive');
			}																  // 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(currentslide >= slides){
				$('moveright').addClass('inactive');
				$('moveleft').removeClass('inactive');
			}else{
				$('moveright').removeClass('inactive');
			}		
		});
		var descHolder = $('description');
		/* 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();
					fx2.start({ 'opacity' : 1 });
					var largeImage = new Element('img', { 'src': item.href }); 
					//largeImage.onload = function(){ 
						
						fx.start({ 
							'opacity' : 0													
						}).chain(function(){
							inspector.empty();	           						
							var description = item.getElement('span'); 
							if(description)	{
								var des = new Element('p').set('text', description.get('text')).inject(inspector);								
							}			   								
									
							largeImage.inject(inspector);
							fx.start({'opacity': 1});			
						});
					//};
					
				});
			});		
		});

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