/*
Required Files: 
	prototype.js
	scriptaculous.js?load=effects
*/
;
var Tabs = {

	count : 0,
	
	init : function() {
	
		var tab_sets = $$(".tabs");
		
		tab_sets.each(function(n) {
			new Tabs.TabSet(n);
		});
	}
}

Tabs.Transitions = {};

Tabs.Transitions.FADE_IN = function(tab_set, tab_content_to_appear) {
	var initial_selected_tab_content = tab_set.getSelectedTabContent();

	new Effect.Parallel([
		new Effect.Fade(initial_selected_tab_content, { from : 1, to : 0, sync : true }),
		new Effect.Appear(tab_content_to_appear, { from : 0, to : 1, sync : true })
	], {
		beforeStart : function() {	
			tab_set.is_animating = true;
		},
		afterFinish : function() {
			initial_selected_tab_content.removeClassName("selected");
			tab_content_to_appear.addClassName("selected");
			
			tab_set.is_animating = false;
		},
		duration : tab_set.options.transition_duration,
		queue : {
			position : "end",
			scope : tab_set.identifier
		}
	});
};

Tabs.Transitions.SCROLL = function(tab_set, tab_content_to_appear) {
	var initial_selected_tab_content = tab_set.getSelectedTabContent();
	
	new Effect.Move(tab_content_to_appear, {
		x : 0,
		y : 0,
		mode : "absolute",
		beforeStart : function() {
			initial_selected_tab_content.setStyle({"zIndex" : 0});
			tab_content_to_appear.setStyle({"zIndex" : 10, display : "block", left : tab_set.tab_set.scrollWidth + "px" });
			tab_set.is_animating = true;
		},
		afterFinish : function() {
			initial_selected_tab_content.setStyle({display : "none"});
			initial_selected_tab_content.removeClassName("selected");
			tab_content_to_appear.addClassName("selected");
			tab_set.is_animating = false;
		},
		duration : tab_set.options.transition_duration,
		queue : {
			position : "end",
			scope : tab_set.identifier
		}		
	});
};

Tabs.Transitions.NONE = function(tab_set, tab_content_to_appear) {
	var initial_selected_tab_content = tab_set.getSelectedTabContent();
	
	initial_selected_tab_content.removeClassName("selected").setStyle({display : "none"});
	tab_content_to_appear.addClassName("selected").setStyle({display : "block"});
}


Tabs.TabSet = Class.create({
	
	// constructor
	initialize : function(tab_set) {
		if (!tab_set) { return; }
		
		// properties
		this.tab_set = tab_set;
		this.selected_tab_number = 0;
		this.tab_buttons = [];
		this.tab_contents = [];
		this.num_of_tabs = 0;
		this.is_animating = false;
		this.identifier = "tabset" + Tabs.count++;

		// default options
		this.options = {
			tab_button_selector : "ul.tab_buttons li",
			tab_content_selector : "ul.tab_contents li",
			default_tab : 1,
			transition_duration : 1.0,
			transition_effect : Tabs.Transitions.NONE,
			timed_changing : 0
		};
		
		// set up options
		var options_strings = $(this.tab_set).className.match(/\{.*\}/);
		if (options_strings) { 
			Object.extend(this.options, options_strings[0].evalJSON() || {});
		}
		
	
		this.tab_buttons = this.tab_set.select(this.options.tab_button_selector);
		this.tab_contents = this.tab_set.select(this.options.tab_content_selector);
		
		this.num_of_tabs = Math.min(this.tab_buttons.length, this.tab_contents.length);
		
		this.tab_buttons.each(function(n, i) {			
			n.observe("click", function() { this.selectTabById(i); }.bind(this));
			n.observe("mouseover", function() { this.addClassName("highlighted"); });
			n.observe("mouseout", function() { this.removeClassName("highlighted"); });
		}.bind(this));
		
		this.tab_contents.each(function(n) {
			n.setStyle({display : "none", "zIndex" : 0});
		});
		
		if (this.options.timed_changing) {
			new PeriodicalExecuter(this.autoChangeTab.bind(this), this.options.timed_changing);
		}


		this.setInitialTab(this.options.default_tab-1);
	},
	
	// methods

	autoChangeTab : function() {
		var cur = 0;
		while(!this.tab_buttons[cur].hasClassName('selected')){++cur;}
		this.selectTabById(((cur==this.tab_buttons.length-1) ? 0 : ++cur));
	},

	selectTabButton : function(tab_button) {		
		this.tab_buttons[this.selected_tab_number].removeClassName("selected");
		tab_button.addClassName("selected");
	},
	
	selectTabContent : function(tab_content) {	
		this.options.transition_effect(this, tab_content);
	},
	
	selectTabById : function(tab_number) {
		if (tab_number >= this.num_of_tabs || this.selected_tab_number == tab_number) { return; }
		this.selectTabButton(this.tab_buttons[tab_number]);
		this.selectTabContent(this.tab_contents[tab_number]);
		
		this.selected_tab_number = tab_number;
	},
	
	getSelectedTabButton : function() {
		return this.tab_buttons[this.selected_tab_number];
	},
	
	getSelectedTabContent : function() { 
		return this.tab_contents[this.selected_tab_number];
	},
		
	setInitialTab : function(index) {
		this.selected_tab_number = index;
		var button = this.getSelectedTabButton();
		var content = this.getSelectedTabContent();
		button.addClassName("selected");
		content.addClassName("selected").setStyle({"zIndex":10, display:"block"});
	}

});

document.observe("dom:loaded", Tabs.init);
