// panelfx.js -- panel effect scripts
// Written by Oo+
// require MooTools to be function

// Panels crossfading widget
var PanelCrossFader = new Class({
	Implements: [Events, Options],

	initialize: function(container, panels, options) {
		this.setOptions(options);
		this.container = $(container);
		this.panelList = panels;

		// resize all panels to fit container
		var area = this.container.getUsableSize();
		for (var i = 0; i < this.panelList.length; ++i) {
			var panel = this.panelList[i];
			var size = panel.getSizeToFitArea(area);
			panel.setStyle('left', 0);
			panel.setStyle('top', 0);
			panel.setStyle('width', size.x);
			panel.setStyle('height', size.y);
			panel.set('opacity', 0);
		}

		this.currentIndex = this.options.startIndex;
		this.panelList[this.currentIndex].set('opacity', 1);
		return this;
	},

	switchTo: function(index) {
		if (index >= 0 && index < this.panelList.length) {
			this.panelList[this.currentIndex].fade(1, 0);
			this.currentIndex = index;
			this.panelList[this.currentIndex].fade(0, 1);
		}
		return this;
	},

	options: {
		link: 'chain',
		duration: 'short',
		startIndex: 0
	}
});

/////////////////////////////////////////////////////////////////////////////

// Horizontal sliding panels widget
var PanelSlider = new Class({
	Implements: [Events, Options],

	initialize: function(container, panels, options) {
		this.setOptions(options);
		this.container = $(container);
		this.panelList = panels;

		// resize all panels to fit container
		var area = this.container.getUsableSize();
		for (var i = 0; i < this.panelList.length; ++i) {
			var panel = this.panelList[i];
			var size = panel.getSizeToFitArea(area);
			panel.setStyle('top', 0);
			panel.setStyle('width', size.x);
			panel.setStyle('height', size.y);
		}
		this.panelWidth = area.x;

		// align all panels, make specified index to be "visible"
		this.currentIndex = this.options.startIndex;
		this.positionList = {};
		for (var i = 0; i < this.panelList.length; ++i) {
			this.positionList[i] = {left: this.panelWidth * (i - this.currentIndex)};
			this.panelList[i].setStyles(this.positionList[i]);
		}

		// create effect object
		this.fx = new Fx.Elements(this.panelList, this.options);

		return this;
	},

	slideBy: function(by) {
		var length = this.panelList.length;
		if (length > 0 && by) {
			var to = this.currentIndex + by;
			while (to < 0)
				to = length + to;
			while (to >= length)
				to = to - length;
			this.slideTo(to);
		}
		return this;
	},

	slideTo: function(to) {
		if (to >= 0 && to < this.panelList.length) {
			// build new position list
			var positionList = {};
			for (var i = 0; i < this.panelList.length; ++i)
				positionList[i] = {left: this.panelWidth * (i - to)};

			// send new position list to effect object
			this.fx.start(positionList);

			// remember new positions and index
			this.positionList = positionList;
			this.currentIndex = to;
		}
		return this;
	},

	options: {
		link: 'chain',
		duration: 'short',
		startIndex: 0
	}
});