// JavaScript Document
/**
 * This file contains the JavaScript Class that  creates tabbed panels Widget
 *
 * This file contains a single JavaScript Class that provides the said 
 * functionality
 *
 * Language: JavaScript
 * Depenedancies: MooTools 1.2 Core
 *
 * @package    	autCompleter
 * @author     	ProjectMiso.net <email@projectmiso.net>
 * @version    	1.0
 * @since      	September 2007
 * @deprecated 	N/A
 * @license		Developed by ProjectMiso for ProjectMiso's internal use only. This widget may be used for developing websites
 *				for ProjectMiso's clients. In that event, ProjectMiso grants license to the client for life time use of the 
 *				widget in the said website developed by ProjectMiso. ProjectMiso DOES NOT GRANT the Client or client's future 
 *				development teams the right of distribution or the right to use this widget on other websites created by the client. 
 * @copyright	Author
*/

/**
 * Features:
 	1. Create tabs with static content - X
	2. Create tabs with dynamically loaded content - X
	3. Add and Remove tab
	5. Enable and Disable tab
	6. Specify defalt tab - X
	7. Fixed or adjustible height
 * HTML Sample
  	<div class="mooTabs">
 		<ul class="tabs">
			<li class="Tab firstTab">Tab 1</li>
			<li class="Tab">Tab 2</li>
			<li class="Tab">Tab 3</li>
		</ul>
		<div class="panels">
			<div class="panel">	Panel 1 </div>
			<div class="panel"> Panel 2 </div>
			<div class="panel"> Panel 3 </div>
		</div>
	</div>
 
 * Invokation:
	var myTabs = new Tabs({
		container: "mooTabs",
		tabs: "tab",
		selected: "selectedTab",
		first: "firstTab",
		last: "lastTab",
		disabled: "disabledTab",
		panels: "panel",
		selectedPanel: "selectedPanel",
		defaultTab: 0,
		width: 300,
		height: null,	//optional
		onChange: function(index){ }
	});

 * Public Methods:
 	myTabs.select(tab);		tab = the array index no. of the tab starting at 0
	myTabs.remove(tab);		tab = the array index no. of the tab starting at 0
 	myTabs.addTab(options);	options = object
		//options.name = the taxt ins the tab 				#required
		//options.index = where it should be placed 		#optional - default is at the end
		//options.tabClass = custom class for the tab		#optional
		//options.panelClass = custom class for the panel	#optional
		//options.ajaxUrl = url for ajax load				#optional
		//options.html = html text for non-ajax load		#optional
		//options.selected = true/false						#optional
	myTabs.enable(tab);		tab = the array index no. of the tab starting at 0
	myTabs.disable(tab);	tab = the array index no. of the tab starting at 0
		
**/
var Tabs = new Class({    
	Implements: Options,
	options:{
		container: "",
		tabs: "",
		selected: "",
		first: "",
		last: "",
		disabled: "",
		panels: "",
		selectedPanel: null,					//optional
		defaultTab: 1,
		width: 300,
		height: null,
		enforceHeight: false,
		hideBy: "display",						//or using visibility
		onChange: $empty
	},
	initialize: function(options){
		this.setOptions(options);				//set options if custom options are being supplied
		this.parseOptions(this.options);		//parse optionsand convert them into class properties
		
		//the other public variables
		this.selectedTab = 0;
		
		//private varibales
		this.containerClass = this.container;
		this.tabClass = this.tabs;
		this.selectedTabClass = this.selected;
		this.panelClass = this.panels;
		this.request = null;
		
		//create the initial modal assets
		this.render();
	},
	parseOptions: function(optionsObj, ignoreUndefinedProps){
		if (!optionsObj){ return; } else {
			for (var optionName in optionsObj){
				if (ignoreUndefinedProps && optionsObj[optionName] == undefined){ continue; } else { this[optionName] = optionsObj[optionName]; }
			}
		}
	},
	render: function(){
		var Tabs = this, i = 0;
		
		//collect the Widget elements
		this.container = $(document.body).getElement("." + this.containerClass);
		if (!this.container){ return; }
		
		this.tabs = this.container.getElements("." + this.tabClass); 
		if (!this.tabs){ return; }
		for (i=0;i<this.tabs.length;i++){ this.tabs[i].index = i; }
		this.tabContianer = this.tabs[0].getParent();
		
		this.panels = this.container.getElements("." + this.panelClass);
		if (!this.panels){ return; }
		this.panelContianer = this.panels[0].getParent();
		
		//make fixed height
		if (this.height){
			$$(this.container, this.panels).setStyle("height", this.height);
		}
		
		//make the default panel visible
		if (this.hideBy == "display"){
			this.panels.setStyle("display", "none");
		} else {
			this.panels.setStyle("visibility", "hidden");
		}
		this.select(this.defaultTab);
		
		//add the events
		this.tabs.addEvent("click", function(event){
			var e = new Event(event);
			var ajaxUrl = null;
			if (this.getProperty("rel")){
				ajaxUrl = this.getProperty("rel");
			}
			Tabs.select(this.index, ajaxUrl);
		});
	},
	resetTabData: function(){
		this.tabs = this.container.getElements("." + this.tabClass);
		for (i=0;i<this.tabs.length;i++){ this.tabs[i].index = i; }
		this.panels = this.container.getElements("." + this.panelClass);
	}
});
Tabs.implement({
	select: function(tab, ajaxUrl){
		var Tabs = this;
		
		this.tabs.removeClass(this.selectedTabClass);
		this.tabs[tab].addClass(this.selectedTabClass);
		
		if (this.hideBy == "display"){
			this.panels.setStyle("display", "none");
			this.panels[tab].setStyle("display", "block");
		} else {
			this.panels.setStyle("visibility", "hidden");
			this.panels[tab].setStyle("visibility", "visible");
		}
		
		if (this.selectedPanel){
			this.panels.removeClass(this.selectedPanel);
			this.panels[tab].addClass(this.selectedPanel);
		}
		
		if (this.enforceHeight){
			(function(){ this.panelContianer.setStyle("height", this.panels[tab].getSize().y); }).delay(100, this);
			//alert(this.panels[tab].getCoordinates().height);
		} else {
			this.panelContianer.setStyle("height", "auto");
		}
		//this.panelContianer.setStyle("height", "auto");
		
		if (ajaxUrl){
			//this.panels[tab].empty();
			this.request = new Request.HTML({
				url: ajaxUrl,
				method: "get",
				async: false,
				autoCancel: true,
				update: this.panels[tab],
				onComplete: function(){
					Tabs.onChange(tab);
					Tabs.tabs[tab].loaded = true;
				}
			});
			if (!this.tabs[tab].loaded){
				this.request.send();
			}
		} else {
			this.onChange(tab);
		}
		this.selectedTab = tab;
	},
	remove: function(tab){
		if (tab == undefined || tab == null){ return; }
		
		var ajaxUrl = null;
		
		if (this.selectedTab == tab){
			if (this.tabs[tab-1]){ //select previous tab
				if (this.tabs[tab-1].getProperty("rel")){ ajaxUrl = this.tabs[tab-1].getProperty("rel"); }
				this.select(tab-1, ajaxUrl);
			} else if (this.tabs[tab+1]) { //select the next tab
				if (this.tabs[tab+1].getProperty("rel")){ ajaxUrl = this.tabs[tab+1].getProperty("rel"); }
				this.select(tab+1, ajaxUrl);
				this.selectedTab = tab;
			}
		}
		if (tab == 0){
			if (this.tabs[tab+1]) { this.tabs[tab+1].addClass(this.first); }
		} else if (tab == this.tabs.length-1){
			if (this.tabs[tab-1]){	this.tabs[tab-1].addClass(this.last); }
		}
		this.tabs[tab].destroy();
		this.panels[tab].destroy();
		this.resetTabData();
	},
	addTab: function(options){
		var Tabs = this;
		
		//options = object
		//options.name = the taxt ins the tab 				#required
		//options.index = where it should be placed 		#this is optional - default is at the end
		//options.tabClass = custom class for the tab		#optional
		//options.panelClass = custom class for the panel	#optional
		//options.ajaxUrl = url for ajax load				#optional
		//options.html = html texh for non-ajax load		#optional
		//options.selected = true/false						#optional
		
		if (!options.name){ return; }
		
		//====== add the tab and panel
		var newTab = new Element("li", { "class": this.tabClass });  //create elements
		var newPanel = new Element("div", { "class": this.panelClass });  //create elements
		
		newTab.set("html", options.name);							//set the tab text
		if (options.tabClass){ newTab.addClass(options.tabClass); }	//set custom class
		
		if (this.hideBy == "display"){
			newPanel.setStyle("display", "none");
		} else {
			newPanel.setStyle("visibility", "hidden");
		}
		
		//inject it in the right position
		if (options.index != undefined){
			newTab.inject(this.tabs[options.index], "before");		//inject the tab
			newPanel.inject(this.panels[options.index], "before");	//inject the tab
			if (options.index == 0){
				newTab.addClass(this.first);						//add teh last tab class
				this.tabs[0].removeClass(this.first);				//remove the last tab class
			} 
		} else {
			newTab.injectInside(this.tabContianer);					//inject the tab
			newPanel.injectInside(this.panelContianer);				//inject the tab
			newTab.addClass(this.last);								//add the last tab class
			this.tabs[this.tabs.length-1].removeClass(this.last);	//remove the last tab class
			options.index = this.tabs.length;
		}
		
		//set content
		if (options.ajaxUrl){
			newTab.setProperty("rel", options.ajaxUrl);
		} else if (options.html){
			newPanel.set("html", options.html);	
		}
		
		//add the events
		newTab.addEvent("click", function(event){
			var e = new Event(event);
			var ajaxUrl = null;
			if (this.getProperty("rel")){
				ajaxUrl = this.getProperty("rel");
			}
			Tabs.select(this.index, ajaxUrl);
		});
		
		//reset the tab data
		this.resetTabData();
		
		//select the tab
		if (options.selected){
			this.select(options.index, options.ajaxUrl);
		}
	},
	disable: function(tab){
		if (this.tabs[tab]){
			this.tabs[tab].removeEvents("click");
			this.tabs[tab].addClass(this.disabled);
		}
	},
	enable: function(tab){
		var Tabs = this;
		
		if (this.tabs[tab]){
			this.tabs[tab].addEvent("click", function(event){
				var e = new Event(event);
				var ajaxUrl = null;
				if (this.getProperty("rel")){
					ajaxUrl = this.getProperty("rel");
				}
				Tabs.select(this.index, ajaxUrl);
			});
			this.tabs[tab].removeClass(this.disabled);
		}
	},
	hide: function(tab){
		if (this.tabs[tab]){
			this.tabs[tab].setStyle("display", "none");
		}
	},
	show: function(tab){
		if (this.tabs[tab]){
			this.tabs[tab].setStyle("display", "");
		}
	},
	unload: function(){
		$each(this, function(item, i){
			//if ($type(item) == "element"){ item.destroy(); }
			if ($type(item) == "array"){ item.empty(); }
			item = null;
		});
	}
});