/* FORMAT:
<div class="tabs" id="TABSID">
	<div class="tabs_menu">
		<ul>
		<li id="tabLink_TABID">Tab One</li>
		<li>Tab Two</li>
		</ul>
	</div>
	<div class="tab_contents">
		<div class="tab_content" id="tabContent_TABID">Tab One content goes here</div>
		<div class="tab_content" id="tabContent_TABID">Tab One content goes here</div>
	</div>
</div>
*/

var DynaTabs = Class.create();
DynaTabs.prototype = {
	initialize: function() {
		// class variables
		this.loaded_tabs = [];
		
		//option variables
		var data = $A(arguments);
		var options = (data[0]) ? data[0] : {};
		this.tabs_id = (options.tabs_id) ? options.tabs_id : 'DynaTabs';
		this.curr_tab = (options.curr_tab) ? options.curr_tab : 0;	
		this.ajax_url = (options.ajax_url) ? options.ajax_url : null;	
		this.init_visible = (options.init_visible && options.init_visible == true) ? true : false;	
		
		if (this.curr_tab > 0 && this.init_visible) {
			$('tabLink_' + this.curr_tab).addClassName('focus');
			this.loadTabContent(this.curr_tab);
		}
		
		// set events for menu
		var menu_el = $(this.tabs_id).down('div.tabs_menu');
		Event.observe(menu_el,"mouseout",this.outEvent.bindAsEventListener(this));
		Event.observe(menu_el,"mouseover",this.overEvent.bindAsEventListener(this));
		Event.observe(menu_el,"mouseup",this.upEvent.bindAsEventListener(this));
	},
	
	getTabId:function(id) {
		var tmp = id.split('_');
		return tmp[1];
	},
	
	overEvent:function(e) {
		var self = this;
		var target_el = Event.element(e);		
		switch (target_el.tagName) {
		case 'LI' :
			target_el.addClassName('hover');
			break;
		}
	},
	
	outEvent:function(e) {
		var target_el = Event.element(e);
		var related_el = e.relatedTarget || e.toElement;
		while (related_el != target_el && related_el.nodeName != 'BODY') {
			related_el = related_el.parentNode;
		}
		if (related_el == target_el) return;
	
		switch (target_el.tagName) {
		case 'LI' :
			target_el.removeClassName('hover');
			break;
		}
	},
	
	upEvent:function(e) {
		var self = this;
		var target_el = Event.element(e);
		switch (target_el.tagName) {
		case 'LI' :
			var tab_id = this.getTabId(target_el.id);
			
			if (tab_id != this.curr_tab) {
				$('tabLink_' + this.curr_tab).removeClassName('focus');
				$('tabContent_' + this.curr_tab).hide();
				
				target_el.addClassName('focus');
				
				if (this.loaded_tabs.indexOf(tab_id) > -1) {
					$('tabContent_' + tab_id).show();
				} else {
					this.loadTabContent(tab_id);
				}
				
				this.curr_tab = tab_id;
			}
			break;
		}
	},
	
	loadTabContent:function(id) {
		//send ajax request
		var self = this;
		var ajax_params = 'tab_id=' + id;
		var ajax_opts = {method: 'post',
			postBody: ajax_params,
			onSuccess: function(ajax_resp) {
				new Insertion.Bottom($(self.tabs_id).down('div.tab_contents'),'<div class="tab_content" id="tabContent_' + id + '">' + ajax_resp.responseText + '</div>');
				self.loaded_tabs.push(id);
				//alert(ajax_resp.responseText);
			}
		}
		new Ajax.Request(this.ajax_url,ajax_opts);
	}
}