/* Custom Tabs. Will replace old tab system */
firebug_on = false;

DB_Tab = 
function (tab_header_id, image_path,image_type)
{
	// Member Variables
	this.id
	this.menu;
	this.images = {};
	this.content = "";
	this.scrollTop = 0;
	this.imageCount = 0;
	this.imagesProcessed = 0;
	this.init(tab_header_id, image_path,image_type);
}

// Initialize the tab object
DB_Tab.prototype.init = 
function (tab_header_id, image_path,image_type)
{
	// Get the tab_header's DOM element
	var temp_menu = document.getElementById(tab_header_id);
	if (!temp_menu)
	{ // If DOM element does not exist, write to firebug console
		if (firebug_on)
		console.warn(tab_header_id.toString() + " does not exists");
		return false;
	}
	else 
	{ // Set the menu if it exists
		this.menu = temp_menu;
		this.id = tab_header_id;
	}

	// Get the images for the tab_menu
	// Right now there is only support for on/off. Default is off
	var temp_path = trim(String(image_path)) + trim(String(tab_header_id));

	/* Backwards Compatibility */
	if (!image_type)
	{
		image_type = '';
	}

	if (image_type != 'none')
	{
		if (image_type == 'off' || image_type == 'both' || image_type == '')
		{
			var off_image = this.loadImage(temp_path+"_off.gif");
			this.images["off"] = off_image;
		}

		if (image_type == 'both' || image_type == '')
		{
			var on_image = this.loadImage(temp_path+"_on.gif");
			this.images["on"] = on_image;
		}
		if (image_type == 'active' || image_type == '')
		{
			var active_image = this.loadImage(temp_path+"_active.gif");
			this.images["active"] = active_image;
		}
	}

	// Set Default Image
	this.changeImage("off");

	// tab_header elements can have their rel set to the id of the content
	// we check that first, then the default case.
	var content_id = this.menu.rel;
	if (content_id)
	{
		var temp_content = document.getElementById(content_id);
		if (temp_content) 
		{
			this.content = temp_content;
			if (firebug_on)
			console.log("%s's content id: %s (rel)",tab_header_id,content_id);
		}
		else
		{
			if (firebug_on)
			console.warn("rel set for %s does not exist", tab_header_id);
		}
	}
	else 
	{ // Try default content_id which is _tab replaced with _content
		if (/_tab$/.test(tab_header_id))
		{
			content_id = tab_header_id.replace(/_tab$/,"_content");
			temp_content = document.getElementById(content_id);
		}
		// Check if content exists
		if (temp_content)
		{
			this.content = temp_content;
			if (firebug_on)
			console.log("%s's content id: %s (default)",tab_header_id,content_id);
		}
		else 
		{ // No Content
			this.content = "No content Available";
			if (firebug_on)
			console.warn("No content for %s", tab_header_id);
		}
	}
	// Debug
	if (firebug_on)
	console.log("****DEBUG*****\ntab_id: %s content_id: %s\nimage_on: %s \nimage_off: %s\nContent:%s",tab_header_id, content_id, this.images["on"].src, this.images["off"].src, this.content);
}
// Preload an image
DB_Tab.prototype.loadImage = 
function(image_href)
{
	var obj = this;
	obj.imageCount++;
	var temp_image = new Image();
	temp_image.valid = true;
	temp_image.onerror = function () {
		this.valid = false;
		obj.imagesProcessed++;
	}
	temp_image.onload = function () {
		obj.imagesProcessed++;
	}
	temp_image.src = image_href;
	return temp_image;
}
	
// Change Image. Only runs after all images have been processed
DB_Tab.prototype.changeImage =
function (mode)
{
	var self = this;
	var image_func = 
	function () {
		if (self.images[mode])
		{
			if ((self.images[mode].complete && self.images[mode].valid) )
			{
				var bg_image = "url("+self.images[mode].src+")";
				self.menu.style.backgroundImage = bg_image;
			}
		}
	}
	self.image_load_event(image_func);
}

// Takes a function and only runs it once all images have been loaded
DB_Tab.prototype.image_load_event = 
function (func)
{
	var self = this;
	if (self.imageCount <= self.imagesProcessed)
	{
		func();
	}
	else 
	{
		setTimeout(function(){self.image_load_event(func);}, 100);
	}
}

DB_Tab.prototype.addClass = 
function (className)
{
	var obj = this.menu;
	var cls = obj.className;
	if (!cls)
	{
		obj.className = className;
		return true;
	}
	if (cls == className)
	{
		return false;
	}
	var classes = obj.className.split(" ");
	for (var i = 0; i < classes.length; i++)
	{
		if (classes[i] == className)
		{
			return false;
		}
	}
	obj.className = (cls + " " + className);
	return true;
}

DB_Tab.prototype.removeClass =
function (className)
{
	var obj = this.menu;
	var cls = obj.className;
	if (cls.length == 0)
	{
		return false;
	}
	if (cls == className)
	{
		obj.className == "";
		return true;
	}
	var new_class = [];
	var classes = obj.className.split(" ");
	var count = 0;
	for (var i=0; i < classes.length; i++)
	{
		if (classes[i] != className)
		{
			new_class[count] = classes[i];
			count++;
		}
	}
	obj.className = new_class.join(" ");
	return true;
}

Tab_Controller = 
function (tab_container_id, image_path,image_type)
{
	// Member Variables
	this.container;
	this.active;
	this.viewer;
	this.tabs = {};
	this.image_path;
	this.tab_menu;

	this.init(tab_container_id, image_path,image_type);
}

//-------------------------------------------------------------------
Tab_Controller.prototype.init =
function (tab_container_id,image_path,image_type)
{
	this.image_path = image_path;

	// Find Tab Container
	this.container = document.getElementById(tab_container_id);
	if (!this.container)
	{
		if (firebug_on)
		console.error("********* ERROR ***********\ntab_container_id: %s\nError: Tab Container does not exist", tab_container_id);
		return false;
	}

	// Get the tab_viewer, may add ability to handle multiple ones
	this.viewer = getElementsByTagAndClass(this.container, "div", "tab_viewer")[0];
	if (!this.viewer)
	{
		if (firebug_on)
		console.warn("tab_container_id: %s\nNo viewer found", tab_container_id);
	}

	// Get the tab_menu if it exists
	var temp_tab_menu = getElementsByTagAndClass(this.container, "*", "tab_menu")[0];
	if (temp_tab_menu) 
	{
		this.tab_menu = temp_tab_menu;
	}

	// Get the tab menu items. class: tab_header
	var temp_menus = [];
	temp_menus = getElementsByTagAndClass(this.container, "*", "tab_header");
	if (firebug_on)
	console.log("number of tab_header items: %s", temp_menus.length);
	// Use them to build tabs
	var defaultTab = "";
	for (var i=0; i < temp_menus.length; i++)
	{
		var tab_name = temp_menus[i].id;
		if (firebug_on)
		console.log("tab_name #%s: %s", i, tab_name);
		this.tabs[tab_name] = new DB_Tab(tab_name, this.image_path,image_type);
		var oTabContent = this.tabs[tab_name].content;
		oTabContent.parentNode.removeChild(oTabContent);
		this.viewer.insertBefore(oTabContent, this.viewer.firstChild);
		// Default Tab
		if (i == 0)
		{
			defaultTab = tab_name;
		}
	}
	this.activate(defaultTab);
}

Tab_Controller.prototype.attachMenuHandler =
function (evt, func)
{
	for (var key in this.tabs)
	{
		EventUtil.addEventHandler(this.tabs[key].menu, evt, func)
	}
}

Tab_Controller.prototype.activate =
function (tab_id)
{
	var oTab = this.tabs[tab_id];
	var self = this;
	if (oTab)
	{
		if (this.tab_menu)
		{
			var image_func = 
			function () {
				if (oTab.images["active"])
				{
					if (oTab.images["active"].complete && oTab.images["active"].valid)
					{
						var bg_image = "url("+oTab.images["active"].src+")";
						self.tab_menu.style.backgroundImage = bg_image;
					}
				}
			}
			oTab.image_load_event(image_func);
		}

		oTab.changeImage("on");
		oTab.addClass("active");
		for (var tempTab in this.tabs)
		{
			this.tabs[tempTab].content.style.display = "none";
		}
		oTab.content.style.display = "block";
		this.active = oTab;
	}
}

Tab_Controller.prototype.eventHandler =
function ()
{
	var self = this;
	var ret_func = function ()
	{
		var evt = EventUtil.getEvent();
		var oTarget = evt.target;
		var tab_id = oTarget.id;
		if (tab_id != self.active.id)
		{
			self.active.changeImage("off");
			self.active.removeClass("active");
			self.activate(tab_id);
		}
	}
	return ret_func;
}