/**
 * 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 containing 
 *  
 *  - slideTime: ms between two slides
 *  - carousselSlide: JS-class to be used [NOT IMPLEMENTED YET]
 *  - 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
 *  
 * @classDescription Caroussel
 */
Caroussel = new Class({

	/**
	 * Options
	 * 
	 * @type {Object}
	 */
	options: {
		dataURL: '/sbeos/ajax/JsonCall.php',
		action: 'retrieveCarousselItems',
		daoClass: 'Caroussel',
		limit : 5,
		slideTime: 15000,
		carousselSlide: 'CarousselSlide',
		navigation: true,
		
		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,
	
	/**
	 * CarousselCaroussel Constructor
	 * 
	 * @param {Object} arg
	 * @param {Object} options
	 */
	initialize: function(target, options) {
		this.setOptions(options);
		this.target = $(target);
		this.loadData();
		
	},
	
	loadData: function() {
		var postObject = JSON.encode({action: this.options.action, daoClass: this.options.daoClass, prefillData: this.options.prefillData});
		var req = new Request.JSON({
			url:this.options.dataURL,
			data: {json: postObject},
			onComplete:this.loadedDataHandler.bind(this)});
		req.send();
	},
	
	loadedDataHandler: function(responseData) {
		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();
		}
	},
	
	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.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() {
		this.currentCarousselIndex++;
		if (this.currentCarousselIndex == this.data.length){
			this.currentCarousselIndex = 0;
		}
		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.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);
	}
});

/**
 * A single slide for a caroussel-object
 * 
 */
CarousselSlide = new Class({
	
	Implements: [new Options],
	
	container: null,
	
	/**
	 * Options
	 * Options
	 * 
	 * @type {Object}
	 */
	 options: {
		
		/**
		 * DataObjectIndex: targetelement. 
		 * Target elements will be created recursively 
		 */
		
		dataIndex: {
		 	title : ' h2',
		 	img : ' ',
		 	uri : ' ul.buttons li a',
		 	buttonlabel: ' ul.buttons li a'
	 	},
	 	
	 	dataPosition: {
	 		img: 'background-image',
	 		uri: 'href'
	 	}
	},
	
	initialize: function(container_id, options){
		var el = $(container_id);
		this.container = el;

		this.size = this.container.getSize();
		this.setOptions(options);
		if ($chk(this.options.dataComplete) && typeof(this.options.dataComplete) == 'function') {
			this.container.addEvent('dataComplete', this.options.dataComplete.bind(this));
		}
	},
	
	setContent: function(data){
		for (index in data){
			if ($chk(this.options.dataIndex[index])){
				
				elements = $$('#'+ this.container.id + this.options.dataIndex[index]);
				var element = elements[0];

				target_property = 'innerHTML';
				if ($chk(this.options.dataPosition[index])){
					target_property = this.options.dataPosition[index];
				}
				switch(target_property){
					case 'background-image':
						element.setStyle(target_property, 'url('+data[index]+')');
						break;
					case 'href':
						element.href = data[index];
						break;
					case 'innerHTML':
						element.innerHTML = data[index];
						break;
					case 'innerText':
						element.innerText = data[index];
						break;
					/**
					 * expand 
					 * after
					 * believen :-)
					 **/
				}
			}
		}
		this.container.fireEvent('dataComplete');
	},
	
	prepareShow: function(){
		this.container.hide();
	},
	
	show: function(){
		if ($chk(this.startEffect)){
			this.startEffect.fireEvent('complete');
			this.startEffect = null;
		}
		this.startEffect = new Fx.Elements(this.container, {duration:1500});
		this.startEffect.start({
			'0': {
			'opacity': [this.container.getStyle('opacity'), 1]
		}
		});
	},

	prepareHide: function(){
		this.container.show();
	},
	
	hide: function(content){
		if ($chk(this.hideEffect)){
			this.hideEffect.fireEvent('complete');
			this.hideEffect = null;
		}
		
		this.hideEffect = new Fx.Elements(this.container, {duration:1500});
		this.hideEffect.addEvent('complete', function(){
			this.setContent(content);
		}.bind(this));
		
		this.hideEffect.start({
		    '0': {
		        'opacity': [this.container.getStyle('opacity'), 0]
		    }
		});
	}
});

var mainCaroussel = null;
var setupCaroussel = function(carousseloptions) {
	if ($('carousselContainer')) {
		if (!$chk(carousseloptions)){
			var carousseloptions = {prefillData: {readmore: 'Reed more >'}};
		}
		mainCaroussel = new Caroussel('carousselContainer', carousseloptions);
	}
}


window.addEvent('domready', function(){setupCaroussel(carousseloptions);});