window.addEvent('domready', function() {
		
	var inspector = $('fullimg'); // Main view area		
	var thumb = $('.thumb');					   	
	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});
	
	/* When a tumbnail is clicked, insert image into the main view area */
	$$('.item').each(function(item){ 
		item.addEvent('click', function(e) { 
			e = new Event(e).stop();
						
			fx2.start({ 'opacity' : 0 }).chain(function(){
			
				inspector.empty();								// Empty view area
				var loadimg = '/images/loading_image.gif';	    // loading 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(){ 
					//alert( "loaded" );
					fx.start({ 'opacity' : 0 }).chain(function(){
						inspector.empty();	           							// empty view area
								
						largeImage.inject(inspector); // insert new image
						fx.start({'opacity': 1});	 // then bring opacity of elements back to visible				
					});
				};
			});
		});
	});
		
	// Thumb Fade Effect...
	$$('.thumb').each(function(thumb){ 
		thumb.addEvent('click', function(e) {
			fadeAllUp();
			thumb.fade( 0.5 );  
		});
	});
	
	// Controls...
	$$('next').addEvent( 'click', function(e) {
		
	});
		
	// Display first image
	inspector.empty();
	var largeImage = new Element('img', {'src': $('first').href}).inject(inspector);
	
	function fadeAllUp() {
		$$('.thumb').each(function(thumb){ thumb.fade( 1.0 ); });
	}
	
});