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.
 * Utilizes two identical objects for showing and hiding content. Content
 * delivery based on json-objects
 * 
 * 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 Caroussel
 */
Caroussel = new Class({

	/**
	 * Options
	 * 
	 * @type {Object}
	 */
	options : {
		dataURL : '/sbeos/ajax/JsonCall.php',
		action : 'retrieveCarousselItems',
		retrieval_parameters : {},
		daoClass : 'Caroussel',
		limit : 5,
		slideTime : 5000,
		carousselSlide : 'CarousselSlide',
		navigation : true,
		random : false,

		containers : {
			currentContainer : {
				id : 'caroussel_content_container',
				options : {
					dataComplete : function() {
					}
				}
			},
			switchContainer : {
				id : 'caroussel_switch_container',
				options : {
					dataComplete : function() {
					}
				}
			}
		}
	},

	Implements : [ new Options, new Events ],

	target : null,

	data : 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(target, options) {
		this.setOptions(options);
		this.target = $(target);
		// No use to continue without a container
		if ($chk(this.target)) {
			this.loadData();
			if ($chk(this.options.dataComplete) && typeof(this.options.dataComplete) == 'function') {
				this.target.addEvent('dataComplete', this.options.dataComplete.bind(this));
			}
		}
	},

	/**
	 * Start fetching of the data
	 */
	loadData : function() {
		var postObject = {
			action : this.options.action,
			daoClass : this.options.daoClass,
			prefillData : this.options.prefillData
		};
		if ($chk(this.options.retrieval_parameters)) {
			for (index in this.options.retrieval_parameters) {
				postObject[index] = this.options.retrieval_parameters[index];
			}
		}
		var req = new Request.JSON( {
			url : this.options.dataURL,
			data : {
				json : JSON.encode(postObject)
			},
			onComplete : this.loadedDataHandler.bind(this)
		});
		req.send();
	},

	/**
	 * Process the responsedata and put it in the local data-object.
	 */
	loadedDataHandler : function(responseData) {
		
		var items_data = [];
		
		// build the item data list
		var items = responseData.items;
		this.data = $A(items).map(function(itm) {
				var data = {};

				// check if there are dimensions
				var parts = itm['img'].split(',')
				var height = parts.pop();
				var width = parts.pop();

				data['image_obj'] = new Asset.image(itm['img'], { width: width, height: height, alt: itm.title, title: itm.title });
				return $merge(itm, data);
		});

		if (!$chk(responseData) || responseData.success == 'false' || responseData.items.length == 0) {
			this.target.hide();
			return false;
		}
		
		
		// this.data = responseData.items;
		if ($chk(this.data) && this.data.length > 0) {
			if ($chk(this.options.limit)) {
				this.data = this.data.slice(0, this.options.limit);
			}
			this.setupGUI();
			this.target.fireEvent('dataComplete');
		}
	},

	setupGUI : function() {
		// this.preloadImages = [];
		// for ( var i = 0; i < this.data.length; i++) {
		// 	var newPreloadImage = new Asset.image(this.data[i].img);
		// 	this.preloadImages.push(newPreloadImage);
		// }

		// hier moeten dan de units gemaakt worden
		this.currentContainer = new CarousselSlide(
				this.options.containers.currentContainer.id,
				this.options.containers.currentContainer.options);
		
		this.switchContainer = new CarousselSlide(
				this.options.containers.switchContainer.id,
				this.options.containers.switchContainer.options);

		// Add over bahaviour
		this.target.addEvent('mouseenter', this.pauseSlideShow.bindWithEvent(this));
		this.target.addEvent('mouseleave', this.resumeSlideShow.bindWithEvent(this));

		this.currentCarousselIndex = 0;

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

			this.data.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.data.length > 1) {
				navigation.injectInside(this.target);
				this.navigationbar = navigation;
			}
		}
		this.target.show();
		this.switchContainer.container.hide();
		this.showNext();
		if (this.data.length > 1) {
			this.resumeSlideShow();
		}
	},

	startSlideShow : function() {
		this.currentCarousselIndex++;
		if (this.data.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.data.length);
		} else {
			// get the next one
			this.currentCarousselIndex++;
			if (this.currentCarousselIndex == this.data.length) {
				this.currentCarousselIndex = 0;
			}
		}
		this.showNext();
	},

	gotoPrevious : function() {
		// get the previous one
		this.currentCarousselIndex--;
		if (this.currentCarousselIndex <= 0) {
			this.currentCarousselIndex = this.data.length - 1;
		}
		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.switchContainer.setContent(this.data[this.currentCarousselIndex]);
		this.switchContainer.prepareHide();
		this.currentContainer.prepareShow();
		
		this.currentContainer.setContent(this.data[this.currentCarousselIndex]);
		this.switchContainer.hide(this.data[this.currentCarousselIndex]);
		
		this.currentContainer.show();
		
		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 setupCaroussel = function(carousseloptions) {
	if ($('carousselContainer')) {
		mainCaroussel = new Caroussel('carousselContainer', carousseloptions);
	}
}

if (!$chk(carousseloptions)) {
	var carousseloptions = {
		prefillData : {
			readmore : 'standaard'
		}
	};
}
window.addEvent('domready', function() {
	setupCaroussel(carousseloptions);
});