(function($) {
	$.fn.easyTooltip = function(options){
		// default configuration properties
		var defaults = {
			xOffset: 10,
			yOffset: 25,
			tooltipId: "easyTooltip",
			clickRemove: true,
			content: "",
			useElement: ""
		};
		var options = $.extend(defaults, options);
		var content;
		this.each(function() {
			var title = $(this).attr("title");
            var title1 = title.split('#',2)[0];
            var title2 = title.split('#',2)[1];
			$(this).hover(
				function(e){                                                      
                    var header = '<div id="'+options.tooltipId+'" class="hint" style="display:block;"><div class="p-top"></div><div class="p-mid">';
                    if(title2){
                        var titler = '<p class="p-tit">'+title1+'</p>';
                    }
                    var footer = '</div><div class="p-foot"></div></div>';
                    content = header + titler + ( (options.content != "") ? options.content : (title2?title2:title1) ) + footer;
			//		content = header + ( (options.useElement != "") ? $("#" + options.useElement).html() : content ) + footer;
					$(this).attr("title","");
					if (content != "" && content != undefined){
//                        $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");
						$("body").append(content);
						$("#" + options.tooltipId).show();
						var w = parseInt($('#'+options.tooltipId).width());
						var h = parseInt($('#'+options.tooltipId).height());
                                                            
      //      alert(1); 
      
                            epageX = e.pageX;
                            epageY = e.pageY;
                                if (epageX == null && e.clientX != null ) {
                                    var html = document.documentElement
                                    var body = document.body
                                 
                                    epageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
                                    epageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
                                }
                        
                                       //          alert(epageX);
                                       //          alert($("#easyTooltip").height());
                        $("#easyTooltip")
//						$("#" + options.tooltipId)
							.css("position","absolute")
                            .css("top",(epageY - parseInt($("#easyTooltip").height())-5) + "px")
                            .css("left",(epageX - parseInt($("#easyTooltip").width())/2) + "px")
                            
                            
							//.css("top",(e.pageY - parseInt($('#'+options.tooltipId).height()) - 60) + "px")
							//.css("left",(e.pageX - parseInt($('#'+options.tooltipId).width())/2) + "px")
							
                            //.css("display","none")
							//.fadeIn("fast")
                            
                            //.css("top",(e.pageY - options.yOffset) + "px")
                            //.css("left",(e.pageX + options.xOffset) + "px")

					}
				},
				function(){
					$("#" + options.tooltipId).remove();
					$(this).attr("title",title);
				}
			);
			$(this).mousemove(function(e){
      //      alert('h'+$('#'+options.tooltipId).height());
      //      alert('w'+$('#'+options.tooltipId).width());
            epageX = e.pageX;
            epageY = e.pageY;
                if (epageX == null && e.clientX != null ) {
                    var html = document.documentElement
                    var body = document.body
                 
                    epageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0)
                    epageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0)
                }
      
      
				$("#easyTooltip")
                    .css("position","absolute")
					.css("top",(epageY - parseInt($("#easyTooltip").height())-5) + "px")
					.css("left",(epageX - parseInt($("#easyTooltip").width())/2) + "px")
			});
			if(options.clickRemove){
				$(this).mousedown(function(e){
					$("#" + options.tooltipId).remove();
					$(this).attr("title",title);
				});
			}
		});
	};
})(jQuery);