hXUL.AssetManager.panels = [];

hXUL.AssetManager.createPanel = function(id, tabs, placeholder) {		
	var p = new hXUL.Panel(id, tabs, placeholder, this.createPanelRenderer());			
	hXUL.AssetManager.panels.push(p);
	return p;	
}

hXUL.AssetManager.createPanelRenderer = function() {
	if (hXUL.hasSupportForXUL()) {
		return new hXUL.Panel.Renderer.XULRenderer();
	} else {
		return new hXUL.Panel.Renderer.XHTMLRenderer();
	}
}

hXUL.Panel = function(id, tabs, placeholder, renderer) {	
	this.id        = id;
	this.element   = null;
	this.tabs	   = tabs;	
	this._renderer = renderer;			
	this.setPlaceholder(placeholder);
}

hXUL.Panel.prototype.setPlaceholder = function(placeholder) {
	if(typeof placeholder == "string") 
		this.placeholder  = document.getElementById(placeholder); 
	else 
		this.placeholder  = placeholder;	
}

hXUL.Panel.prototype.selectTab = function(tabIndex) {
	this._renderer.selectTab(this, tabIndex);
}

hXUL.Panel.prototype.disableTab = function(tabIndex) {
	this._renderer.disableTab(this, tabIndex);
}

hXUL.Panel.prototype.enableTab = function(tabIndex) {
	this._renderer.enableTab(this, tabIndex);
}

hXUL.Panel.prototype.render = function(placeholder) {	
	
	// Placeholder can be set here, or whith the hXUL.AssetManager.createPanel method
	if(placeholder)
		this.setPlaceholder(placeholder);
			
	for(var i=0;i<this.tabs.length;i++) {
		// Create tab containers if they don't exist.
		if(!this.tabs[i].content) {
			this.tabs[i].content = document.createElement("div");
			this.tabs[i].content.id = this.id+"-tabpanel-content"+i;
			this.tabs[i].content.setAttribute("title",this.tabs[i].title);
		} 
		// If tab containers exist, we can extract the tab label for the title attribute
		else {
			if(!this.tabs[i].title && this.tabs[i].content.getAttribute("title")) {
				this.tabs[i].title = this.tabs[i].content.getAttribute("title");
			}			
		}
	}		
	// Render panel and tabs
	this._renderer.render(this);
}


/* 
 * PANEL RENDERER 
 */

hXUL.Panel.Renderer = function() {}

/* 
 * XUL PANEL RENDERER
 */
 
hXUL.Panel.Renderer.XULRenderer = function() {}

hXUL.Class.extend(hXUL.Panel.Renderer.XULRenderer, hXUL.Panel.Renderer);

hXUL.Panel.Renderer.XULRenderer.prototype.render = function(panel) {
				
	var tabBox    = this.createTabBoxElement(panel.id);
	var tabs      = tabBox.appendChild(this.createTabsElement(panel.id));
	var tabPanels = tabBox.appendChild(this.createTabPanelsElement(panel.id));
	
	for(var i=0;i<panel.tabs.length;i++) {
		var title = panel.tabs[i].title;		
		panel.tabs[i].tab = tabs.appendChild(this.createTabElement(panel.id,i,title));	
		var tabPanel = tabPanels.appendChild(this.createTabPanelElement(panel.id,i));
		panel.tabs[i].content = tabPanel.appendChild(panel.tabs[i].content);
	}
	panel.element = panel.placeholder.appendChild(tabBox); 
}

hXUL.Panel.Renderer.XULRenderer.prototype.createTabBoxElement = function(idPrefix) {	
	var tabBox = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul","tabbox");	
	tabBox.id = idPrefix + "-tabbox";		
	return tabBox;
}

hXUL.Panel.Renderer.XULRenderer.prototype.createTabsElement = function(idPrefix) {	
	var tabs = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul","tabs");	
	tabs.id = idPrefix + "-tabs";	
	tabs.setAttribute("setfocus","false"); // prevents an error with inherited code from chrome://global/content/bindings/tabbox.xml
	return tabs;
}

hXUL.Panel.Renderer.XULRenderer.prototype.createTabElement = function(idPrefix, index, title) {
	var tab = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul","tab");
	tab.id = idPrefix + "-tab" + index;
	tab.setAttribute("label",title);	
	return tab;
}

hXUL.Panel.Renderer.XULRenderer.prototype.createTabPanelsElement = function(idPrefix) {	
	var tabpanels = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul","tabpanels");	
	tabpanels.id = idPrefix + "-tabpanels";
	return tabpanels;
}

hXUL.Panel.Renderer.XULRenderer.prototype.createTabPanelElement = function(idPrefix, index) {	
	var tabpanel = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul","tabpanel");	
	tabpanel.id = idPrefix + "-tabpanel" + index;
	return tabpanel;
}

hXUL.Panel.Renderer.XULRenderer.prototype.selectTab = function(panel, tabIndex) {
	panel.element.firstChild.selectedIndex = tabIndex; // panel.element.firstChild = xul:tabs element	
}

hXUL.Panel.Renderer.XULRenderer.prototype.disableTab = function(panel, tabIndex) {
	panel.element.firstChild.childNodes[tabIndex].setAttribute("style","color: #777");
}

hXUL.Panel.Renderer.XULRenderer.prototype.enableTab = function(panel, tabIndex) {
	panel.element.firstChild.childNodes[tabIndex].setAttribute("style","color: #000");
}

/*
 * HTML PANEL RENDERER
 */
hXUL.Panel.Renderer.XHTMLRenderer = function() {}

hXUL.Class.extend(hXUL.Panel.Renderer.XHTMLRenderer, hXUL.Panel.Renderer);

hXUL.Panel.Renderer.XHTMLRenderer.prototype.render = function(panel) {
		
	var tabBox = this.createTabBoxElement(panel.id);
	var tabs = tabBox.appendChild(this.createTabBoxElement(panel.id));
	var tabPanels = tabBox.appendChild(this.createTabPanelsElement(panel.id));
	
	for(var i=0;i<panel.tabs.length;i++) {
		var title = panel.tabs[i].title;				
		panel.tabs[i].tab = tabs.appendChild(this.createTabElement(panel.id,i,title));	
		panel.tabs[i].tab.onclick = function(n){
			panel.selectTab(this.getAttribute("rel"));
		};				
		panel.tabs[i].content = tabPanels.appendChild(panel.tabs[i].content);	 				
	}
	panel.element = panel.placeholder.appendChild(tabBox);
	panel.selectTab(0);
}

hXUL.Panel.Renderer.XHTMLRenderer.prototype.createTabBoxElement = function(idPrefix) {
	var tabBox = document.createElement("div");
	tabBox.className = "tabBox";
	tabBox.id = idPrefix + "-tabBox";
	return tabBox;
}

hXUL.Panel.Renderer.XHTMLRenderer.prototype.createTabsElement = function(idPrefix) {
	var tabs = document.createElement("div");
	tabs.className = "tabs";
	tabs.id = idPrefix + "-tabs";
	return tabs;
}

hXUL.Panel.Renderer.XHTMLRenderer.prototype.createTabElement = function(idPrefix, index, title) {	
	var tab = document.createElement("a");
	tab.className = "tab";
	tab.id = idPrefix + "-tab"+index;
	tab.setAttribute("rel",index);
	tab.setAttribute("href","#"+idPrefix + "-tabPanel"+index);
	tab.appendChild(document.createTextNode(title));	 
	return tab;
}

hXUL.Panel.Renderer.XHTMLRenderer.prototype.createTabPanelsElement = function(idPrefix) {	
	var tabPanels = document.createElement("div");
	tabPanels.className = "tabPanels";
	tabPanels.id = idPrefix + "-tabPanels";
	return tabPanels;
}

hXUL.Panel.Renderer.XHTMLRenderer.prototype.createTabPanelElement = function(idPrefix, index) {	
	var tabPanel = document.createElement("div");
	tabPanel.className = "tabPanel";
	tabPanel.id = idPrefix + "-tabPanel"+index;
	return tabPanel;
}

hXUL.Panel.Renderer.XHTMLRenderer.prototype.selectTab = function(panel, index) {
		
	for(var i=0;i<panel.tabs.length;i++) {
		if(i==index) {
			panel.tabs[i].tab.className += " selected";
			panel.tabs[i].content.style.display = "block";
		} else {
			panel.tabs[i].tab.className = panel.tabs[i].tab.className.replace(" selected","");
			panel.tabs[i].content.style.display = "none";		
		}
	}
}