Element.implement( {
	hide : function() {
		return $(this).setStyle('opacity', 0);
	},

	show : function() {
		return this.setStyle('opacity', 1);
	}
});

/**
 * Caroussel Javascript-class for creating, filling and running a caroussel. 
 * This is a variance on the one using JSON; For SEO-reasons, the html had to be rendered on load. 
 * 
 * To be initialised with an options object: 
 *  - dataURL : url for data-retrieval. -
 *  - action: action to be posted to the dataUrl 
 *  - daoClass: the dao-object to be used. Is used by the default retrieveCarousselItems-action
 *  - retrieval_parameters: extra parameters to be passed along
 *  - limit: the number of items to constrain the data-array to
 *  
 *  - carousselSlide: [unused] JavaScript-class to use for instantiation of each slide
 *  
 *  - slideTime: ms between two slides - carousselSlide: JS-class to be used
 *  - navigation: boolean for whether carousselnavigation
 *     is to be used. If set to true, a UL is automatically inserted with a li and an a per element
 *  - random: boolean to define if the data-array is to be used randomly
 *  - containers: contains two sub-objects for setting up the current slide and the switch slide. See CarousselSlide
 *  - dataComplete: function. If set, it will be called when the data has been loaded. 
 *  
 * @classDescription HTMLCaroussel
 */
HTMLCaroussel = new Class({

	/**
	 * Options
	 * 
	 * @type {Object}
	 */
	options : {
		limit : 5,
		slideTime : 5000,
		carousselSlide : 'HTMLCarousselSlide',
		navigation : true,
		random : false,
		selectors : {
			target:  'carousselContainer',
			element:  'switchcontainer_'
		}
		
	},
	number_of_elements : 0,
	
	Implements : [ new Options, new Events ],

	target : null,

	elements : null,

	overlayContainer : null,

	currentContainer : null,

	switchContainer : null,

	currentCarousselIndex : 0,

	carousselTimer : null,

	preloadImages : null,
	
	initialized: false,

	/**
	 * CarousselCaroussel Constructor
	 * 
	 * @param {Object} arg
	 * @param {Object} options
	 */
	initialize : function(options, number_of_elements) {
		this.setOptions(options);
		this.target = $(this.options.selectors.target);
		// No use to continue without a container
		if ($chk(this.target) && parseInt(number_of_elements) > 0) {
			this.number_of_elements = number_of_elements;
			this.loadData();
		}
	},

	/**
	 * Start setting up the data
	 */
	loadData : function() {
		this.elements = [];
		var max = this.number_of_elements;
		var max = $chk(this.options.limit) ?  Math.min(this.options.limit, max) : max;
		for (i = 0; i <= max; i++){
			var el = $(this.options.selectors.element + i);
			if ($chk(el)){
				el.hide();
				this.elements.push(el);
			}
		}
		if ($chk(this.options.dataComplete) && typeof(this.options.dataComplete) == 'function') {
			this.target.addEvent('dataComplete', this.options.dataComplete.bind(this));
		}
		this.setupGUI();
	},

	setupGUI : function() {
		// Add over bahaviour
		this.target.addEvent('mouseenter', this.pauseSlideShow.bindWithEvent(this));
		this.target.addEvent('mouseleave', this.resumeSlideShow.bindWithEvent(this));
		this.switchContainer = new HTMLCarousselSlide();
		this.currentContainer = new HTMLCarousselSlide();
		this.currentCarousselIndex = 0;

		if ($chk(this.options.navigation)) {
			var navigation = new Element('ul');
			navigation.addClass('caroussel_navigation');
			var counter = 1;

			this.elements.each( function(el) {
				var sub = new Element('li');
				sub.addClass('caroussel_sub');

				var anchor = new Element('a');
				anchor.setProperty('href', '#');
				anchor.addEvent('click', function(index) {
					this.gotoIndex(index);
				}.bind(this, [ (counter - 1) ]));

				anchor.innerHTML = counter;
				anchor.injectInside(sub);

				sub.injectInside(navigation);

				counter++;
			}.bind(this));

			if (this.elements.length > 1) {
				navigation.injectInside(this.target);
				this.navigationbar = navigation;
			}
		}
		this.target.fireEvent('dataComplete');
		this.target.show();
		this.showNext();
		if (this.elements.length > 1) {
			this.resumeSlideShow();
		}
	},

	startSlideShow : function() {
		this.currentCarousselIndex++;
		if (this.elements.length > 1) {
			this.carousselTimer = this.gotoNext.delay(
					this.options.slideTime, this);
		}
	},

	gotoIndex : function(index) {
		this.currentCarousselIndex = index;
		this.showNext();
	},

	gotoNext : function() {
		if ($chk(this.options.random)) {
			// Get a random index
			this.currentCarousselIndex = Math.floor(Math.random()* this.elements.length);
		} else {
			// get the next one
			this.currentCarousselIndex++;
			if (this.currentCarousselIndex == this.elements.length) {
				this.currentCarousselIndex = 0;
			}
		}
		this.showNext();
	},

	gotoPrevious : function() {
		// get the previous one
		
		if (this.currentCarousselIndex <= 0) {
			this.currentCarousselIndex = this.elements.length - 1;
		} else {
			this.currentCarousselIndex--;
		}
		this.showNext();
	},

	showNext : function() {
		$clear(this.carousselTimer);
		if ($chk(this.options.navigation) && $chk(this.navigationbar)) {
			var navs = this.navigationbar.getChildren();
			navs.each( function(el) {
				el.removeClass('selected');
			}.bind(this));
			navs[this.currentCarousselIndex].addClass('selected');
		}
		this.elements[this.currentCarousselIndex].hide();
		this.elements[this.currentCarousselIndex].show();
		this.switchContainer.setReference(this.elements[this.currentCarousselIndex]);
		this.switchContainer.prepareHide();
		this.currentContainer.prepareShow(this.elements[this.currentCarousselIndex]);
		
		this.switchContainer.hide(this.elements[this.currentCarousselIndex]);
		
		this.currentContainer.show();
		if (this.elements.length > 1) {
			this.carousselTimer = this.gotoNext.delay(this.options.slideTime, this);
		}
	},

	pauseSlideShow : function() {
		$clear(this.carousselTimer);
	},

	resumeSlideShow : function() {
		$clear(this.carousselTimer);
		this.carousselTimer = this.gotoNext.delay(
				this.options.slideTime, this);
	}
});

var mainCaroussel = null;
var number_of_elements = 0;

var setupCaroussel = function(HTMLcarousseloptions) {
	if ($('carousselContainer')) {
		mainCaroussel = new HTMLCaroussel(HTMLcarousseloptions, number_of_elements);
	}
}

if (!$chk(HTMLcarousseloptions)) {
	var HTMLcarousseloptions = {
		
	};
}
window.addEvent('domready', function() {
	setupCaroussel(HTMLcarousseloptions);
});