//Version 1.0
//
//Creates a carousel image viewer with scrolling buttons
//Uses a div Tag which contains several img tags.

Ext.namespace('BWSO.extcore');

BWSO.extcore.Carousel = Ext.extend(Ext.util.Observable, {

	/**
	 * Internal function for initializing the Carosel entity
	 * @param id
	 * @param config
	 */
	constructor: function(id, config) {
		this.carouselId = id;
		this.config = config || {
			registeredClass: '.z-carousel',
			fxDuration: 0.5,
			forwardText: '⟩',
			backwardText: '⟨',
			usesLightbox: false
		};

		BWSO.extcore.Carousel.superclass.constructor.call(this);

		this.container = Ext.get(id);

		if(config.usesLightbox){
			this.entities = this.container.select('a');
		}else{
			this.entities = this.container.select('img');
		}
		this.imageCount = this.entities.elements.length;
		
		this.container.setStyle('position', 'relative');
		this.currentIndex = 0;

		this.animation = {
			easing: 'easeIn',
			duration: this.config.fxDuration
		};

		this.entities.each(function(el, obj, i) {
			if (i > 0) {
				el.hide();
			}
			el.setStyle('position', 'absolute');
		}, this);

		//Rendering only if more than one image was found
		if(this.imageCount > 1){
			this.render();
		}
	},

	render: function() {
		//rendering Buttonbar as a container for forth/back buttons
		this.buttonBar = this.container.insertFirst({
			tag: 'div',
			cls: 'z-carousel-buttonbar',
			style: 'position: absolute; height:20px; bottom:0px; left:0px; z-index: 1; background: white; padding: 4px;'
		});
		this.buttonBar.setWidth(this.container.getWidth());
		this.buttonBar.setOpacity(0.5);

		//rendering buttons
		this.buttonBack = this.buttonBar.createChild({
			tag: 'a',
			cls: 'z-carousel-back',
			html: this.config.backwardText,
			style: 'cursor: pointer; display: block; text-align: center; font-size: 16px; font-weight: bold; float:left; width: 20px; height: 20px; overflow: hidden; background: white'
		});
		this.buttonBack.on('click', this.onBack, this);


		this.buttonForth = this.buttonBar.createChild({
			tag: 'a',
			cls: 'z-carousel-forth',
			html: this.config.forwardText,
			style: 'cursor: pointer; display: block; text-align: center; font-size: 16px; font-weight: bold; float:right; width: 20px; height: 20px; overflow: hidden; background: white'
		});
		this.buttonForth.on('click', this.onForth, this);
	},


	onBack: function() {
		var oldIndex = this.currentIndex;
		var newIndex = this.currentIndex - 1;
		var maxIndex = this.entities.getCount();

		if (newIndex < 0) {
			this.currentIndex = maxIndex + newIndex;
		} else {
			this.currentIndex = newIndex % maxIndex;
		}

		this.animate(oldIndex, this.currentIndex);
	},


	onForth: function() {
		var oldIndex = this.currentIndex;
		var newIndex = this.currentIndex + 1;

		if (newIndex < 0) {
			this.currentIndex = this.imageCount + newIndex;
		} else {
			this.currentIndex = newIndex % this.imageCount;
		}

		this.animate(oldIndex, this.currentIndex);
	},


	show: function(elementId){
		var doAnimate = false;
		var newIndex = 0;
		Ext.each(this.entities.elements, function(e, i, f){
			if(!doAnimate){
				if(e.id == elementId){
					newIndex = i;
					doAnimate = true;
				}
			}
		}, this);
		if(doAnimate){
			this.animate(this.currentIndex, newIndex)
		}
	},

	animate: function(oldIndex, newIndex) {
		if(oldIndex != newIndex){
			var oldEl = Ext.get(this.entities.item(oldIndex).dom);
			var newEl = Ext.get(this.entities.item(newIndex).dom);

			oldEl.hide(this.animation);
			newEl.show(this.animation);

			this.currentIndex = newIndex;
		}		
	}

});


//inits the carousel objects
//class is a html class name of the carousel container(s) on the page
BWSO.extcore.Carousel.initCarousels = function(config) {
	config = config || {
		registeredClass: '.z-carousel',
		fxDuration: 0.35,
		forwardText: '&rang;',
		backwardText: '&lang;',
		usesLightbox: false
	};

	BWSO.extcore.carousels = {};

	var carouselContainers = Ext.select(config.registeredClass);

	Ext.each(carouselContainers.elements, function(container) {
		var carousel = new BWSO.extcore.Carousel(container.id, config);
		BWSO.extcore.carousels[carousel.carouselId] = carousel;
	}, this);
};