/**
 * RokTabs Module
 *
 * @package		Joomla
 * @subpackage	RokTabs Module
 * @copyright Copyright (C) 2009 RocketTheme. All rights reserved.
 * @license http://www.gnu.org/copyleft/gpl.html GNU/GPL, see RT-LICENSE.php
 * @author RocketTheme, LLC
 *
 */

var RokTabsOptions = {
	'duration': [],
	'transition': [],
	'auto': [],
	'delay': [],
	'type': [],
	'arrows': [],
	'tabsScroll': [],
	'linksMargins': []
};
var RokTabs = new Class({
	version: '1.5',
	options: {
		'scroll': RokTabsOptions
	},
	initialize: function (options) {
		this.setOptions(options);
		this.containers = $$('.roktabs-container-inner');
		this.tabsWrapper = $$('.roktabs-links');
		this.tabs = $$('.roktabs-links ul');
		this.panels = $$('.roktabs-container-wrapper');
		this.outer = $$(this.tabsWrapper.getParent());
		this.wrapper = $$(this.outer.getParent());
		this.fx = [];
		this.current = [];
		this.timer = [];
		this.tabsSize = [];
		this.tabScroll = [];
		this.panels.each(function (panel, i) {
			this.current[i] = 0;
			panel.setStyle('width', (window.opera) ? 30000 : 50000)
		},
		this);
		this.attachEvents()
	},
	attachEvents: function () {
		var lisSize, self = this;
		this.tabs.each(function (tabs, i) {
			this.outer[i].addEvents({
				'mouseenter': function () {
					if (self.options['scroll'].auto[i]) self.stop(i)
				},
				'mouseleave': function () {
					if (self.options['scroll'].auto[i]) self.start(i)
				}
			});
			this.fx[i] = new Fx.Scroll(this.panels[i].getParent(), {
				wait: false,
				duration: this.options['scroll'].duration[i],
				transition: this.options['scroll'].transition[i]
			}).set([0, false]);
			lisSize = 0;
			this.containers[i].setStyle('width', this.wrapper[i].getStyle('width').toInt() - this.tabsWrapper[i].getParent().getStyle('border-left-width').toInt() - this.tabsWrapper[i].getParent().getStyle('border-right-width').toInt());
			tabs.getElements('li').each(function (tab, j) {
				var panel = this.panels[i].getChildren()[j];
				panel.setStyle('width', ((window.ie6) ? this.wrapper[i] : this.outer[i]).getStyle('width').toInt() - panel.getStyle('padding-left').toInt() - panel.getStyle('padding-left').toInt() - panel.getStyle('margin-left').toInt() - panel.getStyle('margin-left').toInt());
				lisSize += tab.getSize().size.x;
				tab.setStyle('cursor', 'pointer').addEvents({
					'mouseenter': this.mouseenter.bind(this, [tab, panel, i, j]),
					'mouseleave': this.mouseleave.bind(this, [tab, panel, i, j]),
					'mousedown': this.mousedown.bind(this, [tab, panel, i, j]),
					'mouseup': this.mouseup.bind(this, [tab, panel, i, j])
				})
			},
			this);
			this.tabsSize[i] = [tabs.getSize().size.x, lisSize];
			var arrows = this.outer[i].getElement('.roktabs-arrows');
			if (this.options['scroll'].arrows[i]) {
				var previous = arrows.getElement('.previous');
				var next = arrows.getElement('.next')
			};
			if (this.options['scroll'].auto[i]) {
				this.start(i)
			};
			if (this.tabsSize[i][1] > this.tabsSize[i][0]) this.tabScroller(i);
			else this.tabScroller(i)
		},
		this);
		return this
	},
	mouseenter: function (tab, panel, box_number, li_number) {
		tab.addClass('hover').addClass('over');
		this.fireEvent('mouseenter', [tab, panel, box_number, li_number])
	},
	mouseleave: function (tab, panel, box_number, li_number) {
		tab.removeClass('hover').removeClass('over').removeClass('down').removeClass('up');
		this.fireEvent('mouseleave', [tab, panel, box_number, li_number])
	},
	mousedown: function (tab, panel, box_number, li_number) {
		tab.removeClass('up').addClass('down');
		if (this.options['scroll'].type[box_number] == 'scrolling') {
			this.fx[box_number].options.duration = RokTabsOptions.duration[box_number];
			this.fx[box_number].options.wait = false;
			this.fx[box_number].toElement(panel)
		} else {
			var self = this;
			this.fx[box_number].element.effect('opacity').start(0).chain(function () {
				self.fx[box_number].options.duration = 0;
				self.fx[box_number].options.wait = true;
				self.fx[box_number].toElement(panel);
				self.fx[box_number].element.effect('opacity').start(1)
			})
		};
		this.fireEvent('mousedown', [tab, panel, box_number, li_number])
	},
	mouseup: function (tab, panel, box_number, li_number) {
		this.tabs[box_number].getElements('li').removeClass('active');
		tab.removeClass('down').addClass('up').addClass('active');
		this.current[box_number] = li_number;
		this.fireEvent('mouseup', [tab, panel, box_number, li_number])
	},
	click: function (tab, panel, box_number, li_number) {
		return tab.fireEvent('mousedown', [tab, panel, box_number, li_number]).fireEvent('mouseup', [tab, panel, box_number, li_number]).fireEvent('mouseleave', [tab, panel, box_number, li_number])
	},
	start: function (current) {
		$clear(this.timer[current]);
		var tmp = this.next.bind(this, current);
		this.timer[current] = tmp.periodical(this.options.scroll.delay[current])
	},
	stop: function (current) {
		$clear(this.timer[current])
	},
	next: function (where) {
		var tabs = this.tabs.getElements('li');
		var current = this.current[where] + 1,
			next = tabs[where][current],
			tab;
		if (next) tab = next;
		else {
			tab = tabs[where][0];
			current = 0
		};
		return this.click(tab, this.panels[where], where, current)
	},
	previous: function () {
		var tabs = this.tabs.getElements('li');
		var current = this.current[where] - 1,
			prev = tabs[where][current],
			tab;
		if (prev) tab = prev;
		else {
			tab = tabs[where][tabs.length - 1];
			current = tabs.length - 1
		};
		return this.click(tab, this.panels[where], where, current)
	},
	tabView: function (where, what) {
		if (what == 'hide') this.tabs[where].setStyle('display', 'none');
		else this.tabs[where].setStyle('display', '')
	},
	tabPosition: function (where, position) {
		var el = this.tabsWrapper[where];
		switch (position) {
		case 'top':
			el.inject(el.getParent(), 'top');
			el.getFirst().removeProperty('class').addClass('roktabs-top');
			break;
		case 'bottom':
		default:
			el.inject(el.getParent());
			el.getFirst().removeProperty('class').addClass('roktabs-bottom')
		}
	},
	tabScroller: function (tab) {
		var ul = this.tabs[tab],
			self = this,
			parent = ul.getParent();
		(2).times(function () {
			self.tabsSize[tab][1] = 0;
			ul.getChildren().each(function (li) {
				if (window.ie) li.getFirst().inject(li);
				self.tabsSize[tab][1] += li.getSize().size.x + li.getStyle('margin-left').toInt() + li.getStyle('margin-right').toInt() + li.getStyle('padding-left').toInt() + li.getStyle('padding-right').toInt() + li.getStyle('border-left-width').toInt() + li.getStyle('border-right-width').toInt()
			},
			this);
			ul.setStyle('width', '100%')
		}.bind(this));
		parent.setStyles({
			'overflow': 'hidden',
			'width': this.tabsSize[tab][0],
			'position': 'relative'
		});
		if (ul.getSize().size.x > parent.getSize().size.x) {
			var ulWrapper = new Element('div', {
				'class': 'active-arrows'
			}).setStyle('position', 'relative').inject(parent, 'before').adopt(parent);
			var ulPrev = new Element('div', {
				'class': 'arrow-prev png'
			}).setHTML('<span><</span>').inject(ulWrapper, 'top');
			var ulNext = new Element('div', {
				'class': 'arrow-next png'
			}).setHTML('<span>></span>').inject(ulWrapper);
			var arrowsSize = {
				'prev': ulPrev.getStyle('width').toInt() + ulPrev.getStyle('margin-left').toInt() + ulPrev.getStyle('margin-right').toInt() + ulPrev.getStyle('border-left').toInt() + ulPrev.getStyle('border-right').toInt() + ulPrev.getStyle('padding-left').toInt() + ulPrev.getStyle('padding-right').toInt(),
				'next': ulNext.getStyle('width').toInt() + ulNext.getStyle('margin-left').toInt() + ulNext.getStyle('margin-right').toInt() + ulNext.getStyle('border-left').toInt() + ulNext.getStyle('border-right').toInt() + ulNext.getStyle('padding-left').toInt() + ulNext.getStyle('padding-right').toInt()
			};
			var margins = 0;
			if (this.options.scroll.linksMargins[tab]) margins = parent.getStyle('margin-right').toInt();
			if (margins < 0) margins = Math.abs(margins);
			parent.setStyle('width', this.tabsSize[tab][0] - margins - arrowsSize.prev - arrowsSize.next);
			new Element('div', {
				'class': 'clear'
			}).inject(ulWrapper);
			this.tabScroll[tab] = {
				'speed': 70,
				'amount': 30,
				'current': 0
			};
			var TabTimer;
			ulNext.addEvents({
				'mouseenter': function () {
					$clear(TabTimer);
					this.addClass('arrow-next-hover');
					TabTimer = self.tabScrollerAnim.periodical(self.tabScroll[tab]['speed'], self, [tab, parent, true])
				},
				'mouseleave': function () {
					this.removeClass('arrow-next-hover');
					$clear(TabTimer)
				}
			});
			ulPrev.addEvents({
				'mouseenter': function () {
					$clear(TabTimer);
					this.addClass('arrow-prev-hover');
					TabTimer = self.tabScrollerAnim.periodical(self.tabScroll[tab]['speed'], self, [tab, parent, false])
				},
				'mouseleave': function () {
					this.removeClass('arrow-prev-hover');
					$clear(TabTimer)
				}
			})
		}
	},
	tabScrollerAnim: function (tab, ul, plus) {
		var scrollSize = ul.getSize().scrollSize.x,
			scrollAmount = ul.getSize().scroll.x;
		if (plus) var scroll = scrollAmount + this.tabScroll[tab]['amount'];
		else var scroll = scrollAmount - this.tabScroll[tab]['amount'];
		scroll = (scroll < 0) ? 0 : (scroll >= scrollSize) ? scrollSize : scroll;
		ul.scrollTo(scroll, 0)
	}
});
RokTabs.implement(new Options, new Events);
var roktabs;
window.addEvent('load', function () {
	roktabs = new RokTabs()
});