/**
 * CP Widget : Tabs
 * 
 * This widget creates a tab behaviour. It requires 2 groups of items: 1 group are the controllers, the other group are blocks of content. 
 * Activating a controller item (click or hover) shows the corresponding content item and hides all teh others.
 */
(function($){

var Tabs = {
		
	options: {
		controlsSelector: ".controls li",
		contentSelector: ".content div",
		triggerEvent: "click"
	},
	
	_create: function() {
		this.element.addClass("cp-tabs");
		this._bind();
		
		this.element.find(this.options.contentSelector).hide();
		
		this.element.find(this.options.contentSelector).eq(0).show();
		this.element.find(this.options.controlsSelector).eq(0).addClass('selected');
	},
		
	destroy: function() {
		this._unbind();
		this.element.removeClass("cp-tabs");
		$.Widget.prototype.destroy.call(this);
	},
	

	_bind: function(){
		var self = this;
		
		if(this.options.triggerEvent == 'mouseover')
		{
			this.element.find(this.options.controlsSelector).each(function(index){
				$(this).mouseover(function(e){
					e.preventDefault();
					self._selectTab(index);	
				});
			});
		} else {
			this.element.find(this.options.controlsSelector).each(function(index){
				$(this).click(function(e){
					e.preventDefault();
					self._selectTab(index);
				});
			});			
		}
	},
	
	_selectTab: function(i){
		// this._trigger('cp-tabs-changed', null);
	
		// show content
		this.element.find(this.options.contentSelector).hide();
		this.element.find(this.options.contentSelector).eq(i).show();
		
		// add class to contols
		this.element.find(this.options.controlsSelector).removeClass('selected');
		this.element.find(this.options.controlsSelector).eq(i).addClass('selected');
	},
		

	
	_unbind: function(){
		this.element.find(this.options.controlsSelector).unbind("mouseover");
		this.element.find(this.options.controlsSelector).unbind("click");
	},
		
	_setOption: function( key, value ) {
		$.Widget.prototype._setOption.apply( this, arguments );
		switch ( key ) {	
		}
	}
}

//Expose the widget with the widget system
$.widget('nj.cp_tabs', Tabs);

//Expost the widget with the sublass system
//$.ui.widget.subclass('nj.cp_menu', Menu);

})(jQuery)