// JavaScript Document
window.addEvent('domready', function() {			

  var instance = this;

  var galleryElements = $$('.galleryElement');	
	var numImages = galleryElements.length;
	
	var thumbnailElements = $$('.galleryThumb');
	var numberThumbnails = thumbnailElements.length;
	
	var nextButton = $('nextElement');
	var prevButton = $('prevElement');	
  
  var instance = {current:0};	
	
	var fadedValue = 0.5;
	
	initialise();
	setupGalleryButtons();
	
	
	
	
	function blend (blendOut, blendIn) {
		
		if(blendOut.fx){blendOut.fx.stop();}
		if(blendIn.fx){blendIn.fx.stop();}
		
		elementOut = new Fx.Tween(blendOut, {
	    property: 'opacity',
	    duration: 3000, 
	    transition: Fx.Transitions.Quart.easeInOut
    });
		
		elementIn = new Fx.Tween(blendIn, {
	    property: 'opacity',
	    duration: 3000, 
	    transition: Fx.Transitions.Quart.easeInOut
    });
		
		
    elementOut.start(1.0, 0.0);
		elementIn.start(0.0, 1.0);
	} // end blend
	
	
	
	
	
	function initialise() {
		// fade the next and prev buttons
		nextButton.fade(fadedValue);
		prevButton.fade(fadedValue);	
		
		// fade all but the first image
		galleryElements.each(function(item, index){
      if (index > 0)
		  {			
			  fadeOut = new Fx.Tween(item, {
	                             property: 'opacity',
	                             duration: 1, 
	                             transition: Fx.Transitions.Quart.easeInOut
                               });
				
        fadeOut.start(1.0, 0.0);	
			
			}
    });
		
		thumbnailElements.each(
													 
		  function(el, index){
        el.addEvent('mouseover', function(e) {
		                               fadeOthers(thumbnailElements, el, e);							
	                                 });	
		
				el.addEvent('mouseleave', function(e) {
		                                shineAll(thumbnailElements, e);					
					                        });	
				
				el.addEvent('click', function() { 
																			
					if (index != instance.current) {														
			      var oldIndex = instance.current;
            instance.current = index;
		      
		
		        blend(galleryElements[oldIndex], galleryElements[instance.current]);
					}
		    });
    });
		
	}
	
	
	function fadeOthers(elements, except, e) {
	  e.stop();
			
		elements.each(
			
			function(el, index) {
			  fadeImage(el, e);
			});
			
			shineImage(except, e);
	}
		
			
	function shineAll(elements, e) {
		e.stop();
			
		elements.each(
			
			function(el, index) {
			  shineImage(el, e);
			});
			
		}
		
	function fadeImage(image, e) {
		  e.stop();
	  	image.fade(fadedValue);	
		}
		
		function shineImage(image, e) {
		  e.stop();
	  	image.fade(1.0);	
		}		
	
	
	function setupGalleryButtons() {
		setupButtonFocusFade(nextButton);
		setupButtonFocusFade(prevButton);
				
		nextButton.addEvent('click', 
	    function() { 
			  var oldIndex = instance.current;
				
				
        if (++instance.current >= numImages) {
			    instance.current = 0;
		    }	
				
						
		    if (oldIndex != instance.current) {
  		    blend(galleryElements[oldIndex], galleryElements[instance.current]);		
				}
		  });
		
		
		
		prevButton.addEvent('click',
		  function() {
				var oldIndex = instance.current;
		    if (--instance.current < 0) {
			    instance.current = numImages-1;
		    }
		    if (oldIndex != instance.current) { 
  		    blend(galleryElements[oldIndex], galleryElements[instance.current]);
				}
	    });
	}
	
	
	
	
	function setupButtonFocusFade(button) {
		button.addEvents({
		 'mouseover': function(){
			 button.fade(1.0);
		 },
		 'mouseout': function(){
			 button.fade(fadedValue);
		 }
		});
	}
	
	
	
																															
});