var CHELLO = window.CHELLO || {};
CHELLO.widgets = CHELLO.widgets || {};

function addEventHandler(obj, evt, callback) {
	if (obj.attachEvent) {
		obj.attachEvent("on" + evt, callback);
	}
	if (obj.addEventListener) {
		obj.addEventListener(evt, callback, false);
	}
}

function removeEventHandler(obj, evt, callback) {
	if (obj.detachEvent) {
		obj.detachEvent("on" + evt, callback);
	}
	if (obj.removeEventListener) {
		obj.removeEventListener(evt, callback, false);
	}
}

function createClass () { 
	return function() {
		this.initialize.apply(this, arguments);
	}
}

var EmptyFunction = function () {}

function bindAsEventListener (fn, obj, args) {
	return function (event) {
		return fn.apply(obj, [(event || window.event)].concat(args));
	}
}

function ExtendObject(obj1, obj2) {
	for (var attr in obj2) {
		obj1[attr] = obj2[attr];
	}
	return obj1;	
}

if (typeof CHELLO.widgets == "undefined" || typeof CHELLO.widgets.TabView == "undefined") {
	CHELLO.widgets.TabView = createClass();
	CHELLO.widgets.TabView.prototype = {
		element: null,
		tabs: [],
		content: [],
		activeTab: -1,
		defaultOptions: {
			onSwitch: EmptyFunction
		},
		initialize: function (tabList, options) {
			if (typeof tabList == "object") {
				this.element = tabList;
			} else {
				this.element = document.getElementById(tabList);
			}
			this.options = ExtendObject({}, this.defaultOptions);
			if (typeof(options) != "undefined") {
				this.options = ExtendObject(this.options, options);
			}
			if (this.element == null) {
				throw ("CHELLO.widgets.tabView.initialize: tab container element not found");
			}
			for (var idx=0; idx<this.element.childNodes.length; idx++) {
				var node = this.element.childNodes[idx];
				if (node.nodeType == 1) {
					if (node.tagName == "DT") {
						var lnk = node.getElementsByTagName("A");
						this.tabs.push(node);
						if (node.className.indexOf("active") > -1) {
							this.activeTab = this.tabs.length-1;
						}
						if (this.activeTab == -1) {
							this.tabs[0].className = this.tabs[0].className + " active";
							this.content[0].className = this.content[0].className + "active";
							this.activeTab = 0;
						}
						if (lnk.length != 0) {
							addEventHandler(lnk[0], "click", bindAsEventListener(this.handleTabClick, this, [node]));
						} else {
							addEventHandler(node, "click", bindAsEventListener(this.handleTabClick, this, [node]));
						}
					}
					if (node.tagName == "DD") {
						this.content.push(node);
					}
				}
			}
			if (this.tabs.length != this.content.length) {
				throw ("CHELLO.widgets.tabView.initialize: number of tabs doesn't equal number of content elements");
			}
			if (this.tabs.length == 0 || this.content.length == 0) {
				throw ("CHELLO.widgets.tabView.initialize: tabs or content elements missing");
			}
		},
		handleTabClick: function (e, tab) {
			if (tab != this.tabs[this.activeTab]) {
				for (var idx=0; idx < this.tabs.length; idx++) {
					if (this.tabs[idx] == tab) {
						var newActiveTab = idx;
						break;
					}
				}
				this.options.onSwitch.apply(this, [this.activeTab, newActiveTab]);
				this.tabs[this.activeTab].className = this.tabs[this.activeTab].className.replace(/\s?active/, "");
				this.tabs[newActiveTab].className = this.tabs[newActiveTab].className + " active";
				this.content[this.activeTab].className = this.content[this.activeTab].className.replace(/\s?active/, "");
				this.content[newActiveTab].className = this.content[newActiveTab].className + " active";
				this.activeTab = newActiveTab;							
			}
			if (e.stopPropagation) {
				e.stopPropagation();
			}
			if (e.preventDefault) {
				e.preventDefault();
			}
			e.cancelBubble = true;
			return false;
		},
		addTab: function (tabLabel, tabContent, tabUrl, contentIsElement) {
			var tab = document.createElement("DT");
			var tabLink = document.createElement("A");
			var content = document.createElement("DD");

			tabLink.href = tabUrl || "#";
			tabLink.innerHTML = tabLabel;
			tabLink = tab.appendChild(tabLink);

			if (contentIsElement) {
				content.appendChild(tabContent);
			} else {
				content.innerHTML = tabContent;
			}
			tab = this.element.appendChild(tab);
			content = this.element.appendChild(content);
			this.tabs.push(tab);
			this.content.push(content);
			if (this.activeTab == -1) {
				this.activeTab = this.tabs.length-1;
				tab.className = tab.className + " active";
				content.className = content.className + " active";
			}
			addEventHandler(tabLink, "click", bindAsEventListener(this.handleTabClick, this, tab));
		}
	}
		
	function findElement(parent, params) {
		var children = parent.childNodes;
		var match = true;
		for (var idx=0; idx < children.length; idx++) {
			if (children[idx].nodeType == 3) {
				continue;
			}
			match = true;
			for (var idx2 in params) {
				if (typeof(children[idx][idx2]) != "undefined" && children[idx][idx2].toLowerCase() != params[idx2].toLowerCase()) {
					match = false;
					break;
				}
			}
			if (match) {
				return children[idx];
			}
			if (children[idx].childNodes.length > 0) {
				var result = findElement(children[idx], params);
				if (result != null) {
					return result;
				}
			}
		}
		return null;
	}
	
	function onTabSwitch(fromTab, toTab) {
		var tab = this.content[fromTab];
		var fld = findElement(tab, {tagName: "input", className:"search-box"});
		var tab2 = this.content[toTab];
		var fld2 = findElement(tab2, {tagName: "input", className:"search-box"});
		
		if (fld != null && fld2 != null) {
			fld2.value = fld.value;
		}
	}
}