(function($) {
	var Watooltip = function(element, options) {

		var defaults = {
			position: 'right', // right, left, top, bottom
			style: 'white', // red, green, blue, white
			trigger: 'focus', // hover, focus
			width: '200',
			show: false, // Show from the start
			title: null, // Change this into your title, if null or false then the title attribute will be used
			use_arrows: true,
			arrow_color: "#999999",
			tooltip_class: null // Extra class(es) to give to the tooltip
		};
		var options = $.extend(defaults, options);
		var host = $(element);
		var date = new Date();
		var id = date.getTime();
		var tooltip_height = 0;
		var tooltip_width = 0;

		/**
		 * Methods
		 */
		this.createToolTip = function() {

		}

		this.show = function() {
			$("#watooltip_"+id).fadeIn('slow');
		}

		this.hide = function() {
			$("#watooltip_"+id).fadeOut('slow');
		}

		this.toInt = function(string) {
			string = new String(string);
			string = string.replace(/\D/g, "");
			return string*1;
		}

		this.drawArrow = function() {
			if(!$.browser.msie && options.use_arrows == true) {
				$("#watooltip_"+id).prepend('<canvas width="40" height="40"></canvas>');
				var arrow_base = 20;
				var arrow_up = [[arrow_base, 0],[arrow_base*2, arrow_base*2],[0, arrow_base*2],[arrow_base, 0]];
				var arrow_left = [[0,0],[arrow_base*2,arrow_base],[0,arrow_base*2],[0,0]];
				var arrow_right = [[arrow_base*2,0],[0,arrow_base],[arrow_base*2,arrow_base*2],[arrow_base*2,0],];
				var arrow_down = [[0,0],[arrow_base*2,0],[arrow_base,arrow_base*2],[0,0]];
				switch(options.position) {
					case "right":
						var arrow = arrow_right;
						break;
					case "left":
						var arrow = arrow_left;
						break;
					case "top":
						var arrow = arrow_down;
						break;
					case "bottom":
						var arrow = arrow_up;
						break;
				}

				var canvas = $("#watooltip_"+id+" canvas").get(0);
				var ctx = canvas.getContext("2d");
				ctx.fillStyle = options.arrow_color;
				ctx.beginPath();
				ctx.moveTo(arrow[0][0], arrow[0][1]);
				ctx.lineTo(arrow[1][0], arrow[1][1]);
				ctx.lineTo(arrow[2][0], arrow[2][1]);
				ctx.lineTo(arrow[3][0], arrow[3][1]);
				ctx.fill();

				$("#watooltip_"+id+" canvas").css('width', '20px');
				$("#watooltip_"+id+" canvas").css('height', '20px');
				$("#watooltip_"+id+" canvas").css('position', 'absolute');

				if(options.position == "right") {
					$("#watooltip_"+id+" canvas").css('left', '-20px');
					var total_border = this.toInt($("#watooltip_"+id).css('borderTopWidth'))+this.toInt($("#watooltip_"+id).css('borderBottomWidth'));
					$("#watooltip_"+id+" canvas").css('top', ((tooltip_height-20-total_border)/2)+"px");
				} else if(options.position == "left") {
					var total_border = this.toInt($("#watooltip_"+id).css('borderTopWidth'))+this.toInt($("#watooltip_"+id).css('borderBottomWidth'));
					$("#watooltip_"+id+" canvas").css('right', '-20px');
					$("#watooltip_"+id+" canvas").css('top', ((tooltip_height-20-total_border)/2)+"px");
				} else if(options.position == "top") {
					var total_border = this.toInt($("#watooltip_"+id).css('borderLeftWidth'))+this.toInt($("#watooltip_"+id).css('borderRightWidth'));
					$("#watooltip_"+id+" canvas").css('left', ((tooltip_width-40-total_border)/2)+"px");
					$("#watooltip_"+id+" canvas").css('bottom', '-20px');
				} else if(options.position == "bottom") {
					var total_border = this.toInt($("#watooltip_"+id).css('borderLeftWidth'))+this.toInt($("#watooltip_"+id).css('borderRightWidth'));
					$("#watooltip_"+id+" canvas").css('left', ((tooltip_width-40-total_border)/2)+"px");
					$("#watooltip_"+id+" canvas").css('top', '-20px');
				}
			}
		}

		this.addTrigger = function() {
			var Ref = this;
			switch(options.trigger) {
				case 'hover':
					host.mouseover(function() {
						Ref.show();
					});
					host.mouseout(function() {
						Ref.hide();
					});
					break;
				case 'focus':
					host.focus(function() {
						Ref.show();
					});
					host.blur(function() {
						Ref.hide();
					});
					break;
			}
		}

		this.remove = function() {
			$("#watooltip_wrapper_"+id).replaceWith(host);
			
			host.removeData('watooltip');
		}


		/**
		 * Init
		 */
		this.init = function() {
			var title = (options.title != null && options.title != false) ? options.title : host.attr('title');
			var margin = (!$.browser.msie && options.use_arrows == true) ? 25 : 15; // Make room for arrows
			var extra_class = (options.tooltip_class != null) ? " "+options.tooltip_class : "";
			
			if(title == "") {
				return false;
			}

			host.wrap('<span class="watooltip_wrapper" id="watooltip_wrapper_'+id+'" style="height: '+host.outerHeight()+'px" />');
			host.after('<div style="width: '+options.width+'px" id="watooltip_'+id+'" class="watooltip_holder watooltip_position_'+options.position+' watooltip_style_'+options.style+extra_class+'">'+title+'</div>');
			host.attr('title', '');
			
			if(host.is(':visible')) {
				tooltip_height = $("#watooltip_"+id).outerHeight();
				tooltip_width = $("#watooltip_"+id).outerWidth();
				host_height = host.outerHeight();
				host_width = host.outerWidth();
			} else {				
				var temp_element = $("#watooltip_"+id).clone(true).css({"display": "", "position": "absolute", "top": -10000, "left": -10000});
				var temp_host_element = host.clone(true).css({"display": "", "position": "absolute", "top": -10000, "left": -10000});
				$("body").append(temp_host_element);
				$("body").append(temp_element);
				tooltip_height = temp_element.outerHeight();
				tooltip_width = temp_element.outerWidth();
				host_height = temp_host_element.outerHeight();
				host_width = temp_host_element.outerWidth();
				temp_element.remove();
				temp_host_element.remove();
			}
			

			if(options.position == 'left' || options.position == 'right') {
				var vertical_center = (host_height-tooltip_height)/2;
				$("#watooltip_"+id).css('margin-top', vertical_center+"px");
				if(options.position == "left") {
					$("#watooltip_"+id).css('left', "-"+(options.width*1+margin)+"px");
				} else {
					$("#watooltip_"+id).css('right', "-"+(options.width*1+margin)+"px");
				}
			} else if (options.position == 'top' || options.position == "bottom") {
				margin = margin-7;
				var horizontial_center = (host_width-tooltip_width)/2;
				var top = tooltip_height+margin;
				if (options.position == "top") {
					$("#watooltip_"+id).css('top', "-"+top+"px");
				} else {
					$("#watooltip_"+id).css('bottom', "-"+top+"px");
				}
				$("#watooltip_"+id).css('margin-left', horizontial_center+"px");
			}
			this.drawArrow();
			this.addTrigger();
			if(options.show == true) {this.show();}
		}

		this.init();

	}
	/* Wrapper */
	$.fn.watooltip = function(options) {
		return this.each(function() {
			var element = $(this);

			// Return early if this element already has a plugin instance
			if (element.data('watooltip')) return;

			// pass options to plugin constructor
			var watooltip = new Watooltip(this, options);

			// Store plugin object in this element's data
			element.data('watooltip', watooltip);
		});
	};


})(jQuery);