/*-------------------------------------------------------------------------------
	A Better jQuery Tooltip
	Version 1.0
	By Jon Cazier
	jon@3nhanced.com
	01.22.08
-------------------------------------------------------------------------------*/

$.fn.betterTooltip = function(options){
	
	/* Setup the options for the tooltip that can be 
	   accessed from outside the plugin              */
	var defaults = {
		speed: 200,
		delay: 500
	};
	
		
	var options = $.extend(defaults, options);
	
	/* Create a function that builds the tooltip 
	   markup. Then, prepend the tooltip to the body */
	getTip = function() {
		var tTip = 
			"<div class='tip' style='background: #E8E8E8;height:48px'>" +
				"<div class='tipMid'>"	+
				"</div>" +
				"<div class='tipBtm'></div>" +
			"</div>";
		return tTip;
	}
	$("body").prepend(getTip());
	
	/* Give each item with the class associated with 
	   the plugin the ability to call the tooltip    */
	$(this).each(function(){
		
		var $this = $(this);
		var tip = $('.tip');
		var tipInner = $('.tip .tipMid');
		
		var tTitle = (this.title);
		this.title = "";
		
		var offset = $(this).offset();
		var tLeft = offset.left;
		var tTop = offset.top;
		var tWidth = $this.width();
		var tHeight = $this.height();
		
		/* Mouse over and out functions*/
		$this.hover(
			function() {
				tipInner.html(tTitle);
				setTip(tTop, tLeft, tTitle);												
				setTimer();
			}, 
			function() {
				stopTimer();
				tip.hide();
			}
		);		   
		
		/* Delay the fade-in animation of the tooltip */
		setTimer = function() {
			$this.showTipTimer = setInterval("showTip()", defaults.delay);
		}
		
		stopTimer = function() {
			clearInterval($this.showTipTimer);
		}
		
		/* Position the tooltip relative to the class 
		   associated with the tooltip                */
		setTip = function(top, left, title){
			
			var topOffset = tip.height();
			
			/*
			var xTip = (left+160)+"px";
			var yTip = (top+360)+"px";
			// */
			
			var xTip = (160)+"px";
			var yTip = (360)+"px";
			
			var xTip1 = (450)+"px";
			var yTip1 = (200)+"px";
			var hTip1 = (130)+"px";
			var wTip1 = (400)+"px";
			
			//alert('in setTip method '+title +' left='+xTip1 +' top='+yTip1);
			
		
			// compare with javascript contains method
			if(title == "Go up the chain to broader &quot;parent&quot;  categories"){
				tip.css({'top' : yTip, 'left' : xTip, 'background-image': 'url(images/bgrtooltyp1.jpg)'});
			}
			else if(title == "Show the categories as they originally appeared when you first entered this screen"){
				tip.css({'top' : yTip, 'left' : xTip, 'background-image': 'url(images/bgrtooltyp2.jpg)'});
			}
			else if(title == '<h1 style="color:#999999;">Thumbs Up: <br/> </h1><hr id="hr1" style="color:#000000;"></hr><br/>Add your own recommendation for this item.'){
				tip.css({'top' : yTip1, 'left' : xTip1,'height' : hTip1,'width' : wTip1,'padding-bottom':'20px'});
				tipInner.css({'padding-left':'20px'});
			}
			else if(title == '<h1 style="color:#999999;">Notice Needed: <br/> </h1><hr id="hr1" style="color:#000000;"></hr><br/>"Y" indicates that you need to make advance arrangements with the artist, dealer, or gallery to see the artwork.<br/>Click on the name of whoever is offering the artwork for contact information.<br/><br/> "N" means that you just need to show up during the sellers normal business hours.'){
				tip.css({'top' : yTip1, 'left' : xTip1,'height' : hTip1,'width' : wTip1,'padding-bottom':'20px'});
				tipInner.css({'padding-left':'20px','margin-top':'-20px'});
			}
			else{
				tip.css({'top' : yTip, 'left' : xTip, 'background-image': 'url(images/bgrtooltyp3.jpg)'});
			}
		}
		
		/* This function stops the timer and creates the
		   fade-in animation                          */
		showTip = function(){
			stopTimer();
			tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
		}
	});
};