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

var IMAGE_WIDTH = 380;
var IMAGE_HEIGHT = 400;
var FULL_IMAGE = 'fullimg';
var THUMBNAILS = 'galleryWrapper';
var LOADING_IMG = 'styles/default/images/ajax-loader.gif';
var IMG_FOLDER = 'images/loveHouse/';
var IMAGES = [1,2,3,4,5,6,7,8,9];

var fullImageSize = { 
	x: IMAGE_WIDTH, 
	y: IMAGE_HEIGHT};

window.addEvent('domready', function() {
		
		createThumbnails('items', IMG_FOLDER, IMAGES);
		// CHANGE THIS !!
		var slides = Math.ceil(IMAGES.length / 5);
		// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		
		var pos = 0;
		
		// HOW MUCH TO SLIDE WITH EACH CLICK
		var offset = $(THUMBNAILS).offsetWidth || 364;	
		var currentslide = 1;	// CURRENT SLIDE IS THE FIRST SLIDE
		var inspector = $(FULL_IMAGE);	// 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(THUMBNAILS, {
   			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) { 
				e = new Event(e).stop();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					inspector.empty();		// Empty Stage
					var loadimg = LOADING_IMG;	   // Reference to load gif
					var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(inspector); 
					fx2.start({ 'opacity' : 1 });
					// create large image
					var largeImage = new Element('img');
					largeImage.onload = autoFit;
					largeImage.src = item.href;
					
					/* 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(){
							// empty stage
							inspector.empty();
							// see if there is a description
							var description = item.getElement('span');	
							
							if(description)					   
								var des = new Element('p').set('text', description.get('text')).inject(inspector);
									
							//largeImage.onreadystatechange = autoFit;
							largeImage.inject(inspector); // insert new image
							imageAutoFix(largeImage, fullImageSize);
							fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
						});
					//};
					
				});
			});
		});

		// INSERT THE INITAL IMAGE - LIKE ABOVE
		//fx.start({'opacity': 0});
		inspector.empty();
		var description = $('first').getElement('span');
		if(description) 
			var desc = new Element('p').setHTML(description.get('html')).inject(inspector);
		var largeImage = new Element('img');
		largeImage.onload = autoFit;
		largeImage.inject(inspector);
		largeImage.src = $('first').href;
		//imageAutoFix(largeImage, fullImageSize);
		fx.start({'opacity': 1});
	
});

function autoFit() {
	// alert(this.src);
	imageAutoFix(this, fullImageSize);
}

function createThumbnails(target, path, files) {
	var container = $(target);
	for (var i=0; i < files.length; i++) {
		var id = (i==0? 'first':'img'+i);
		var li = new Element('li');
		var anthor = new Element('a', {'id' : id ,
								 'class' : 'item',
								 'href' : path + files[i] + '.jpg'
								 });
		var img = new Element('img', {
							  'class' : 'thumb',
							  'src' : path + files[i] + '-thumb.gif'
							  });
		img.inject(anthor);
		anthor.inject(li);
		li.inject(container);
	}
}

function imageAutoFix(img, size) {
	var rate = img.offsetWidth / img.offsetHeight;
	if (img.offsetWidth > size.x) {
		img.style.width = size.x + "px";
		img.style.height = size.x / rate + "px";
	}
	if (img.offsetHeight > size.y) {
		img.style.width = size.y * rate + "px";
		img.style.height = size.y + "px";
	}
	if (img.offsetHeight < size.y) {
		img.style.marginTop = (size.y - img.offsetHeight)/2 + "px";
	}
}