/**
 * CP Widget : Tooltip
 * 
 * This widget will display a tooltip with text when hovering an element.
 * By default the img element is used.
 * The text is pulled from the 'title' attribute by default
 */
(function($){

var Tooltip = {
		
	options: {
		itemSelector: "img",
		attributeSelector: "title"
	},
	
	_create: function() {
		this.element.addClass("cp-tooltip");
		this._bind();
		this._insertTooltip();
	},
	
	_insertTooltip: function(){
		this.element.append("<div id='tooltip'><div id='tooltip_bottom'><div id='tooltip_content'></div></div></div>");		
	},

	_showTooltip: function(e){
		var t = $(e);
		
		var test = t.position().left;
		
		/*
		var left = t.offset().left - 40;
		var top = t.offset().top  - 80;
		*/
		
		var left = t.position().left - 40;
		var top = t.position().top  - 80;
		
		var spec = t.attr(this.options.attributeSelector);
		
		$('#tooltip').css({'left': left , 'top': top});
		$('#tooltip_content').html(spec);
		
		$('#tooltip').stop(true, true);
		$('#tooltip').fadeIn();
	},
		
	destroy: function() {
		this._unbind();
		this.element.removeClass("cp-tooltip");
		$.Widget.prototype.destroy.call(this);
	},
	
	_bind: function(){
		var self = this;
		this.element.find(this.options.itemSelector).mouseover(function(e){
			e.preventDefault();
			self._showTooltip(this);
		});
		this.element.find(this.options.itemSelector).mouseout(function(e){
			e.preventDefault();
			$('#tooltip').stop(true, true);
			$('#tooltip').fadeOut();
		});		
	},
	
	_unbind: function(){
		this.element.find(this.options.itemSelector).unbind("mouseover");
	},
		
	_setOption: function( key, value ) {
		$.Widget.prototype._setOption.apply( this, arguments );
		switch ( key ) {	
		}
	}
}

//Expose the widget with the widget system
$.widget('nj.cp_tooltip', Tooltip);

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

})(jQuery)