﻿/**
 * @author pop webdev [bf]
 * @version 0.1.1
 * @classDescription Image gallery based on an array of image sources. Existing image tag is updated with appropriate src depending on current image index. 
 * @return {Object}	Returns a new object.
 * The class depends on Prototype v1.6.
 */

// start ImageGallery
var ImageGallery = Class.create (
{

    initialize: function(imageSrcList, imageIndex, nextImageAnc, prevImageaAnc)
    {
        this.imageSrcArray    = imageSrcList;				  // image source array
        this.curImg			  = imageIndex;					  // image index
        this.previousAnc      = nextImageAnc                  // previous anchor to watch click on, optional
        this.nextAnc          = prevImageaAnc			      // next anchor to watch on, optional
                
        if (this.imageSrcArray[0]) {                          // if there are images
            this.showImage(this.curImg);					  // show the current image index (most likely 0)
		}
		
		if (this.previousAnc) {                           // watch previous anchor click
		    this.previousAnc.observe("click", this.__PrevAnchorClick.bindAsEventListener(this));
		}
		    
		if (this.nextAnc) {                               // watch next anchor click
		    this.nextAnc.observe("click", this.__NextAnchorClick.bindAsEventListener(this));
		}
    },
        
    __PrevAnchorClick: function(e) {
         if(this.curImg > 0)
         {         
			 this.showPreviousAnc(true);
			 this.showNextAnc(true);
	        
			 this.hideGalleryWrapper();	          	
	     
			 this.curImg --;
		 
			 this.showImage(this.curImg);
         }
         
          Event.stop(e);                
    },
    
    __NextAnchorClick: function(e) {
         
         if(this.curImg < (galleryImages.length - 1) )
		 {
			this.showPreviousAnc(true);
			
			this.hideGalleryWrapper();	          	
			
			this.curImg ++;   			

			this.showImage(this.curImg);
			
		 }
		 
		 Event.stop(e);
        
    },
    
    hideGalleryWrapper: function() {
		$$('span.gallery-image').invoke('hide');
    },
    
    showPreviousAnc: function(bool) {
		bool ? this.previousAnc.removeClassName("disabled") : this.previousAnc.addClassName("disabled");
    },
    
    showNextAnc: function(bool) {
		bool ? this.nextAnc.removeClassName("disabled") : this.nextAnc.addClassName("disabled");
    },
 
    showImage: function()
    {
		if (this.curImg == 0 ) {
			this.showPreviousAnc(false);
	    } else {
			// preload previous image, so no flicker occours between images
			 $('img' + (this.curImg -1) + '-image').src = galleryImages[this.curImg -1];
	    }
	    		
	    if(this.curImg == (galleryImages.length - 1)) {
    		this.showNextAnc(false);
		} else {
			// preload next image, so no flicker occours between images
			 $('img' + (this.curImg + 1) + '-image').src = galleryImages[this.curImg + 1];
		}
	
		$('img' + this.curImg + '-container').show();	   
		
    }
});
// end ImageGallery
