/**
 * Configuration for site components javascript
 *
 * Configuration array structure:
 * {<component>: {<parameter>: value, <parameter>: value, ... }, ...}
 */
var siteComponentsConfig = {
    'tooltip': {
        'positionby': 'element' //Valid values: mouse (default), element
     },

    'keywords': {
        'elements': ['placeholder-content'],
        'skiptags': ['h1','h2','h3','h4','h5','h6'],
        'usetooltip': true
    }
    
    /*
    // Use this to override the default fontsizes in the fontsize selector
    // (html/lib/fontsize.js)
    
    'fontsize': {
        'sizes': ["10pt", "15pt", "24pt"]
    }
    */
    
};

var FbGallery = Class.create({

    initialize: function(element) {
    	this.element = element;
    	this.tileId = element.id.substring(5);
    	this.map = $H();
    	
    	//get all article-divs with that class-name
    	this.articles = this.element.select('div.fpgallery-article'); 
    	//get all thumbs with that class-name
    	this.thumbs = this.element.select('div.nav-thumb');

    	// set the first thumb as current in the start
    	this.correntThumb = this.thumbs.first();
    	
    	// put all articles into a map array
    	this.articles.each(function(element) {
    		this.createMapArray(element);
    	}.bind(this));
    	
    	// Hide all articles
    	this.hideAllGalleryArticles();
    	
    	// Show the first article, here current thumb is the first thumb
    	this.showGalleryArticle(this.correntThumb); 
    	
    	// Start periodical executer with given interval
    	this.interval = 4;
    	this.pe = new PeriodicalExecuter(this.periodicalExecutor.bind(this), this.interval);
    },
    
    periodicalExecutor: function(pe) {
        this.nextArticle();
    },
    /**
    *	Function that get the next article to show and calls to the functions that displays an article element
    */
    nextArticle: function() {
    	var nextThumb = this.correntThumb.next();
    	
    	// If we can't get the next thumb, use the first in thumb array
    	if(nextThumb == null) {
    		nextThumb = this.thumbs.first();
    	}
    	this.showGalleryArticle(nextThumb); 
    },
    
    /**
    *	Creates a mapping between thumbnails and articles
    */
    createMapArray: function(element) {
    	
    	var articleElementId = element.id; 
    	// get id from article element
		var id = articleElementId.replace("fpgallery-article-"+this.tileId+"-", "");

		var thumb = $('thumb-' + this.tileId + '-' + id); //get matching thumb based on article id
		
		// add click observer to thumb element
		thumb.observe('click', this.clickListener.bindAsEventListener(this));
		
		this.map.set(thumb.identify(), element.identify());
    },
    
    clickListener: function(event) {
    	// stop periodical executer if it's defined
    	if(typeof this.pe != "undefined") {
            this.pe.stop();
        }
    	
    	// get the element that user click on
    	var thumbElement = event.findElement('div');
    	
    	// send send thumb element into function for showing article element
    	this.showGalleryArticle(thumbElement); 
    },

    /**
    *	Show the selected article based on thumb element
    */
    showGalleryArticle: function(thumbElement) {
    	
		// first, we hide all articles    	
        this.hideAllGalleryArticles();
        
        // set the thumb element as active/current thumb, so that periodical executor can get the next thumb
        this.correntThumb = thumbElement; 
        
        // add active css-class to thumb element
        thumbElement.addClassName('active-thumb');
        
        // get article element from hash based on thumb element
        articleElement = $(this.map.get(thumbElement.identify()));
      	// show selected article
        articleElement.show();
        
    },
    
    /**
    *	Hides all articles and removes active css-class on thumb
    */
    hideAllGalleryArticles: function() {
        // Loop through hash and hide all article elements
        this.map.each(function(pair) {
            $(pair.key).removeClassName('active-thumb');
            $(pair.value).hide();
        });
    }
  
});