/**
@author: Thomas Kunambi, <http://www.kunambi.com>
@description: Kiosk Scroll built on the MooTools Framework
@copyright: Copyright (c) 2009 Thomas Kunambi
@arguments: Parameters - see Parameters below
@options:
	element: (string||object) reference to div dom element container
	duration: (integer) amount of seconds each frame is visible | default 5 seconds,
	transition: (integer) amount of miliseconds of the opacity transition | default: 200 miliseconds
		NB! It is highly recommended that the duration is at least twice as long than the transition
	clickframe: (boolean) wether the actual frame is clickable in order to navigate to next frame | default: false
	showanchors: (boolean) wether the numerated anchors are visible | default: true
	useanchors: (boolean) wether the numerated anchors are clickable | default: true
		NB! this value will only take effect if "showanchors" is set to "true"
	autostart: (boolean) wether the transition effect should autostart or not | default: true
@methods:
	start: executes scrollToPane
	stop: halts the animation callback and clears the timer
	scrollToPane: show a specific "frame" | default: shows the first "frame"
	_fadeOut: fades out a specific "frame"
	_fadeIn: fades in a specific "frame"
@requires: MooTools 1.2.3 core
*/

var KioskScroll = new Class({
	Implements: Options,
	options: {
		duration: 5,
		transition: 200,
		clickframe: false,
		showanchors: true,
		useanchors: true,
		autostart: true,
		periodical: true
	},
	/**
	@constructor
	@this {KioskScroll}
	@throws {String} If this.element can't be found, throw error
	@param {Array} Options for behaviours of the Kiosk Scroll
	*/
	initialize: function(options) {
		this.setOptions(options);
		this.element = document.id(this.options.element) || this.options.element;
		if (this.element === null) {
			throw("DOM object not found");
		}

		this.timer = null;
		this.curr = 0;
		this.activeObjs = this.options.useanchors ? "li > a" : "li";
		if (this.options.showanchors) {
			this.navigator = new Element("ul", {
				"class":"kiosk-nav"
			}).inject(this.element);
			this.element.getElements("ul:first-child > li").each(function(obj, idx) {
				if (idx > 0) {
					obj.setStyle("opacity", 0);
				}
				if (this.options.clickframe) {
					obj.setStyle("cursor", "pointer");
					obj.addEvent("click", function(e) {
						this.scrollToPane();
					}.bind(this));
				}
				if (this.options.useanchors) {
					new Element("li", {
						"class": !idx ? "active" : ""
					}).adopt(
						new Element("a", {
							"html": idx + 1,
							"href": "javascript:;"
						}).addEvent("click", function(e) {
							e.preventDefault();
							$clear(this.timer);
							this.scrollToPane(idx);
						}.bind(this))
					).inject(this.navigator);
				} else {
					new Element("li", {
						"html": idx + 1,
						"class": !idx ? "active" : ""
					}).inject(this.navigator);
				}	
			}.bind(this));
		}
		if (this.options.autostart) {
			this.start();
		}
	},
	/**
	@return {Object} return the container as an object
	*/
	toElement: function() {
		return this.element;
	},
	start: function() {
		if (this.options.periodical) {
			this.isPlaying = true;
			this.scrollToPane.delay(this.options.duration * 1000, this);
		} else {
			this.scrollToPane();
		}
	},
	stop: function() {
		if (this.isPlaying) {
			$clear(this.timer);
			this.isPlaying = false;
		}
	},
	scrollToPane: function(idx) {
		if (!!idx || idx === 0) {
			this.next = idx;
		} else {
			this.next = this.curr < this.element.getElements("ul:first-child > li").length - 1 ? this.curr+1 : 0;
		}
		this._fadeOut(true);
		if (this.isPlaying) {
			this.timer = this.scrollToPane.delay(this.options.duration * 1000, this);
		}
	},
	/**
	@private
	*/
	_fadeOut: function(doFadeIn) {
		var obj = this.element.getElements("ul:first-child > li")[this.curr];
		new Fx.Tween(obj, {
			duration: this.options.transition,
			transition: Fx.Transitions.Sine.easeInOut,
			onComplete: function() {
				obj.setStyle("display", "none");
				if (this.options.showanchors) {
					this.navigator.getElements("li.active").removeClass("active");
				}
				if (doFadeIn) {
					this._fadeIn(this.next);
				}
			}.bind(this)
		}).start("opacity", 0);
	},
	/**
	@private
	*/
	_fadeIn: function(idx) {
		this.curr = idx;
		this.element.getElements("ul:first-child > li")[idx].setStyle("display", "block");
		if (this.options.showanchors) {
			this.navigator.getElements("li")[idx].addClass("active");
		}
		new Fx.Tween(this.element.getElements("ul:first-child > li")[idx], {
			duration: this.options.transition,
			transition: Fx.Transitions.Sine.easeInOut
		}).start("opacity", 1);
	}
});