/**
 * The code is copyrighted by Nakhabov Andrei
**/
var TabControl = Class.create();

TabControl.prototype = {
	initialize: function(ulId, options) {
		this.id = ulId;
		this.control = $(ulId);
		if (options == undefined) options = {};
		options = this.setDefaultOptions(options);
		this.tabs = $A(this.control.getElementsByTagName(options.tabsTag));
		this.callback = options.callback;
		this.CSS = options.CSS;
		this.options = options;
		this.initTabs();
	},
	initTabs: function(){
		var defaultTab = null;
		var classes, index;
		for (var i = 0; i < this.tabs.length; i++){
			var node = this.tabs[i];
			if (node.id == '') node.id = this.id + i;
			classes = node.className.split(' ');
			if ((index = classes.indexOf(this.options.CSS.active)) != -1){
				// delete active class fromclass declaration for tab
				defaultTab = node;
				delete(classes[index]);
				node.initialClass = classes.join(' ');
			}else{
				node.initialClass	= node.className;
			}
		}
		this.resetClasses();
		if (defaultTab != null)	defaultTab.onclick({srcElement: defaultTab});
	},
	performClick: function(target){
	    if ( typeof(target) == 'string' ) target = $(target); 
		this.resetClasses();
		Element.addClassName(target, this.CSS.active);
		target.onmouseover	= null;
		target.onmouseout	= null;
		target.onclick		= null;
		this.callback.onclick(target.id);
	},
	tabOnClick: function(event){
		var target = this.getTargetFromEvent(event);
		this.performClick(target);
	},
	tabOnMouseOver: function(event){
		var target = this.getTargetFromEvent(event);
		Element.addClassName(target, this.CSS.hover);
		this.callback.onmouseover(target.id);
	},
	tabOnMouseOut: function(event){
		var target = this.getTargetFromEvent(event);
		target.className	= target.initialClass;
		this.callback.onmouseout(target.id);
	},
	getTargetFromEvent: function(event){
		return (event.srcElement)?event.srcElement:event.target;
	},
	resetClasses: function(){
		for (var i = 0; i < this.tabs.length; i++){
			var node = this.tabs[i];
			node.className		= node.initialClass;
			node.onclick		= this.tabOnClick.bindAsEventListener(this);
			node.onmouseover	= this.tabOnMouseOver.bindAsEventListener(this);
			node.onmouseout		= this.tabOnMouseOut.bindAsEventListener(this);
		}
	},
	setDefaultOptions: function(options){
		var def = {CSS:{active:'current', hover:'hover'}, callback:{onclick:function(){}, onmouseout:function(){}, onmouseover:function(){}}, tabsTag:'li'};

		if(options.tabsTag == undefined) options.tabsTag = def.tabsTag;
		if(options.CSS == undefined) options.CSS = def.CSS;
		if(options.CSS.active == undefined) options.CSS.active = def.CSS.active;
		if(options.CSS.hover == undefined) options.CSS.hover = def.CSS.hover;
		
		if(options.callback == undefined) options.callback = def.callback;
		if(options.callback.onclick == undefined) options.callback.onclick = def.callback.onclick;
		if(options.callback.onmouseover == undefined) options.callback.onmouseover = def.callback.onmouseover;
		if(options.callback.onmouseout == undefined) options.callback.onmouseout = def.callback.onmouseout;
		return options;
	}
};