if(typeof UI == 'undefined') UI = {};
UI.Tab = function(options){
	this.options = {
		menuId : ''
		,contentId : ''
		,index : 0
		,auto : true
		,interval : 5000
		,eventType : 'click'
		,boxTag : 'div'
	};
	this.objInterval = null;
	this.counter = 0;
	$.extend(this.options, options);
	this.menus = $('#'+this.options.menuId+'>li'); 
	this.init();

};

UI.Tab.prototype = {
	init : function(){ 
		var _this = this;
		var menus = $('#'+this.options.menuId+'>li'); 
		menus.removeClass('selected');
		if(this.options.eventType == 'click'){
			menus.click(function(e){
				for(var i=0; i< parseInt(menus.size()); i++){
					if(menus.get(i) == this){
						_this.change(i);
					}
				};
			});
		}
		else if(this.options.eventType == 'mouseover'){
			menus.mouseover(function(e){
				for(var i=0; i< parseInt(menus.size()); i++){
					if(menus.get(i) == this){
						_this.change(i);
					}
				};
			});
		};
		var boxs = $('#'+this.options.contentId);
		this.change(this.options.index);
		if(this.options.auto == true){
			this.auto();
			boxs.unbind();
			boxs.mouseover(function(){
				_this.stop();
			});
			boxs.bind('mouseleave', function(){
				_this.auto();
			 });

		};


	}
	,change : function(i){
		this.counter = i;
		var menus = $('#'+this.options.menuId+'>li');
		var boxs = $('#'+this.options.contentId+'>'+this.options.boxTag);
		for(var j=0; j<menus.size(); j++){
			menus.eq(j).removeClass('menu'+j);
		};
		menus.removeClass('selected')
		menus.eq(i).addClass('selected');
		menus.eq(i).addClass('menu'+i);
		boxs.hide().eq(i).show();
		$('#'+this.options.menuId).trigger("change", [i]); 
	}
	,auto : function(){ 
		var _this = this;
		this.objInterval = setInterval(function(){
			++_this.counter;
			if(_this.counter == _this.menus.size()){
				_this.counter = 0;
			};
			_this.change(_this.counter);
			
		
		},this.options.interval);
	}
	,stop : function(){ 
		clearInterval(this.objInterval);
	}
	
};