// MooTabs Copyright Ś 2008 SilverScripting, MIT Style License
var mootabs = new Class({
	
	initialize: function(element, options) {
		this.options = Object.extend({
			width: '100%',
			height: 'auto',
			animType: 0,
			changeTransition: Fx.Transitions.linear,
			duration: 800,
			mouseOverClass: 'over',
			activateOnLoad: 'first',
			useAjax: false,
			ajaxUrl: '',
			ajaxOptions: {method: 'get'},
			ajaxLoadingText: 'Ładuję...',
			cssPrefix: ''
		}, options || {});
		
		this.el = $(element);
		this.elid = element;
				
		this.titles = $$('#' + this.elid + ' ul.' + this.options.cssPrefix + 'tabstitle li');
		this.panels = $$('#' + this.elid + ' .' + this.options.cssPrefix + 'tabspanel');

		this.animnow = false;

		this.titles.each(function(item) {
			item.addEvent('click', function(){
				item.removeClass(this.options.mouseOverClass);
				this.activate(item, false);
			}.bind(this));
			
			item.addEvent('mouseover', function() {
				item.addClass(this.options.mouseOverClass);
			}.bind(this));
			
			item.addEvent('mouseout', function() {
				if(item != this.activeTitle)
				{
					item.removeClass(this.options.mouseOverClass);
				}
				else
				{
					item.removeClass(this.options.mouseOverClass);
					item.addClass('active');
				}
			}.bind(this));
		}.bind(this));

		this.setDimensions();
	},

  setDimensions: function(){
		this.el.setStyles({'width': this.options.width});
		if(this.options.height == 'auto')
		{
			this.panels[0].addClass('active');
			this.panels.setStyle('width', this.el.getSize().size.x - parseInt(this.panels.getStyle('padding-left')) - parseInt(this.panels.getStyle('padding-right')));
			var maxh = 0;
			this.panels.each(function(panel){
				this.panels.removeClass('active');
				panel.addClass('active');
				maxh = Math.max(maxh, panel.offsetHeight);
			}.bind(this));
			this.el.setStyle('height', maxh + this.titles[0].getSize().size.y);			
			this.options.activateOnLoad == 'first' ?	this.activate(this.titles[0], true)	:	this.activate(this.titles.filterById(this.options.activateOnLoad), true);
			this.panels.setStyle('height', maxh - parseInt(this.panels.getStyle('padding-top')) - parseInt(this.panels.getStyle('padding-bottom')));
		}
    else if(this.options.height == 'var')
    {
			this.options.activateOnLoad == 'first' ?	this.activate(this.titles[0], true)	:	this.activate(this.titles.filterById(this.options.activateOnLoad), true);
    }
		else
		{
			this.el.setStyles({'height': this.options.height});
			this.options.activateOnLoad == 'first' ?	this.activate(this.titles[0], true)	:	this.activate(this.titles.filterById(this.options.activateOnLoad), true);
			this.panels.setStyle('width', this.el.getSize().size.x - parseInt(this.panels.getStyle('padding-left')) - parseInt(this.panels.getStyle('padding-right')));
			this.panels.setStyle('height', parseInt(this.options.height) - this.titles[0].getSize().size.y - parseInt(this.panels.getStyle('padding-top')) - parseInt(this.panels.getStyle('padding-bottom')));
		}
  },

	activate: function(tab, skipAnim){
		if(this.options.animType != 0 && this.animnow == false && skipAnim == false)
		{
			this.doAnimTabs(this.activeTitle, tab);
		}
		else if(this.animnow == false)
		{
			this.changeTab(tab);
		}
	},

	changeTab: function(newTab) {
		this.panels.removeClass('active');
		this.activePanel = this.panels.filterById('tab' + newTab.getProperty('id'))[0];
		this.activePanel.addClass('active');
		this.titles.removeClass('active');			
		newTab.addClass('active');			
		this.activeTitle = newTab;
		if(this.options.useAjax)
		{
			this.getContent();
		}
	},

	doAnimTabs: function(curTab, newTab) {
		timeeffect = this.options.duration/2;
		this.animnow = true;
		this.panels.filterById('tab' + curTab.getProperty('id')).setStyle('opacity', 1);
		var changeEffect = new Fx.Elements(this.panels.filterById('tab' + curTab.getProperty('id')), {duration: timeeffect, transition: this.options.changeTransition, onComplete: function(){
			this.changeTab(newTab);
			this.panels.filterById('tab' + newTab.getProperty('id')).setStyle('opacity', 0);
			var changeEffect = new Fx.Elements(this.panels.filterById('tab' + newTab.getProperty('id')), {duration: timeeffect, transition: this.options.changeTransition, onComplete: function(){
				this.animnow = false;
			}.bind(this)});
			changeEffect.stop();
			changeEffect.start({
				'0': {'opacity': [0, 1]}
			});
		}.bind(this)});
		changeEffect.stop();
		changeEffect.start({
			'0': {'opacity': [1, 0]}
		});
	},

	getContent: function(){
		this.activePanel.setHTML(this.options.ajaxLoadingText);
		var newOptions = {update: this.activePanel.getProperty('id')};
		this.options.ajaxOptions = Object.extend(this.options.ajaxOptions, newOptions || {});
		var tabRequest = new Ajax(this.options.ajaxUrl + '?tabid=' + this.activeTitle.getProperty('id'), this.options.ajaxOptions);
		tabRequest.request();
	}	
});