/*  ---------------------------------------------------------
    Name:       DOM Script
    Des:        Controls image gallery and thumbnails
    --------------------------------------------------------- */
window.addEvent('domready', function() {
	if($('fullimg'))
	{ 
		// CHANGE THIS !!
		var slides = Math.round((($$('.item').length / 5) + 0.4));		// NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY
		
		var pos = 0;
		var offset = 388;	// HOW MUCH TO SLIDE WITH EACH CLICK
		var currentslide = 1;	// CURRENT SLIDE IS THE FIRST SLIDE
		var imageContainer = $('fullimg');	// WHERE THE LARGE IMAGES WILL BE PLACE	
		var fx = new Fx.Morph(imageContainer, {duration: 300, transition: Fx.Transitions.Sine.easeOut});
		var fx2 = new Fx.Morph(imageContainer, {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) { 
				e = new Event(e).stop();
				fx2.start({ 
					'opacity' : 0													
				}).chain(function(){
					
					imageContainer.empty();		// Empty Stage
    				// var loadimg = '/images/ajax-loader.gif';	   // Reference to load gif
					// var load = new Element('img', { 'src': loadimg, 'class': 'loading' }).inject(imageContainer); 
					fx2.start({ 'opacity' : 1 });
					
					var largeImage = new Element('img', {'src': item.getFirst('img').src.replace(/\/thumbs\//i, "/"), 'alt': item.getFirst('img').alt }); // create large image [ori]
					
					/* 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(){
						imageContainer.empty();	           				// empty stage
		   
						var des = new Element('p').set('text', item.getFirst('img').alt).inject(imageContainer);
						
					largeImage.inject(imageContainer); // insert new image
					fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
				});
					//};
					
			});
		});
	});

    // INSERT THE INITAL IMAGE - LIKE ABOVE  
    imageContainer.empty();  
    var des = new Element('p').set('text', $('first').getFirst('img').alt).inject(imageContainer);	   
    var largeImage = new Element('img', {'src': $('first').getFirst('img').src.replace(/\/thumbs\//i, "/"), 'alt': $('first').getFirst('img').alt}).inject(imageContainer);
    
	}	
});