/**
 * kBubble Version 1.1
 * kBubble plug-in for JQuery, allows you to generate floating tooltips
 * You can pass in various content into the bubble, and with adjustable
 * position control.
 * Copyright (c) Kevin Zhang <xuehaokun@hotmail.com>
 * Licensed like jQuery, see http://docs.jquery.com/License.
 * paramaters: fade_distance
 **/
jQuery(function($) {
	var window_padding = 38; //the extra left + right width, compare to the size of the middle wrapper
	var $browser = $.browser;
	
	$.fn.kbubble = function(options){
		var defaults = {
			fade_distance: 10, //How far will the tooltip fade, you should also adjust offset_top after adjusting this value
			animation: 0, //Animation type. 0=default, 1=fadeIn+Out, 2=fadeIn+dropUp+Down
			speed: 500, //How fast is the animation
			default_width: 150,
			default_height: 60,
			offset_top: 3, //Adjust this value if animation is choppy or not showing up
			offset_left: 0,
			title_before_div: true,	//Append title first, then append a linked div content if there is any, set to FALSE will reverse the appending order
			$wrapper: null,
			$container: null,
			$wrapper_top: null,
			$wrapper_center: null,
			$wrapper_bottom: null
		};
		var settings = $.extend(true, {}, defaults, options);
		
		/* Create kbubble */
		initBubble();
		
		/* Give each item with the class associated with  
		   the plugin the ability to call the tooltip    */  
		$(this).each(function(){		
			var $this = $(this);
			
			var tName = this.tagName; //DOM element type of the trigger, eg. a, td, tr etc.
			var tTarget = ""; //Targeted or linked div source
			var tTitle = (this.title); //Title of the trigger
			var sExist = false; //Linked target exist
			this.title = "";
			
			
			/* If trigger got href */
			if (tName=="A"){
				tTarget = $this.attr("href");
				//Test if a linked div exist
				if(tTarget != "#" && $(tTarget).length){
					sExist = true;
				}
			}
			
			/* Mouse over and out functions*/  
			$this.hover(function() {				
				/* Create tip if either title or a source linked div exist */
				if(tTitle || sExist){
					
					/*Step 1: Assign default tooltip size */
					settings.$wrapper_center.css({ 'width':settings.default_width, 'height':settings.default_height});
					settings.$wrapper_top.css({'width':settings.default_width+window_padding});
					settings.$wrapper_bottom.css({'width':settings.default_width+window_padding});
				
					/* Step 2: Apped the content (handling having both title & content*/
					if(settings.title_before_div){
						//Append title, then append cloned div content
						settings.$container.html(tTitle);
						if(sExist){settings.$container.append($(tTarget).contents().clone());}
					}else{
						//Else revrse the appending order
						if(sExist){
							settings.$container.html($(tTarget).contents().clone()).append(tTitle);
						}else{
							settings.$container.html(tTitle);
						}
						
					}
										
					/* Step 3: Assign correct size */
					var tWidth;
					var tHeight;
					
					if(sExist){
						//If a source div exist use the div's dimension
						tWidth = $(tTarget).width();
						tHeight = $(tTarget).height();
					}else{
						//Use default size
						tWidth = settings.$container.width();
						tHeight = settings.$container.height();
					}
					settings.$wrapper_center.css({ 'width':tWidth, 'height':tHeight});
					settings.$wrapper_top.css({'width':tWidth+window_padding});
					settings.$wrapper_bottom.css({'width':tWidth+window_padding});
					
					/* Step 4: Position tooltip*/		
					browserFix = function(){
						if($browser.safari || $browser.opera){ return -25;}
						return 0;
					}
					
					var tOffset = $this.offset(); //Position of the trigger		
					var tLeft = tOffset.left; //Trigger's left value
					var tTop = tOffset.top;	//Trigger's top value
			
					var topOffset = settings.$wrapper.height();	
					var leftOffset = settings.$wrapper.width();
					var xTip = (tLeft-leftOffset/2+$this.width()/2+settings.offset_left)+"px";
					var yTip = (tTop-topOffset+settings.offset_top+ browserFix())+"px";
					
					
					settings.$wrapper.css({'top' : yTip, 'left' : xTip});
					
					/* Step 5: Animation */
					if(settings.animation==1){
						settings.$wrapper.css('opacity' , 0).stop(true).animate({opacity: 1}, settings.speed);
					}else if(settings.animation==2){
						settings.$wrapper.css('opacity' , 0).stop(true).animate({
								top: '-=' + settings.fade_distance + 'px',
								opacity: 1
							}, settings.speed*0.6).animate({
								top: '+=' + settings.fade_distance + 'px'
							}, settings.speed*0.4);
					}else if(settings.animation==3){						
						settings.$wrapper.css('opacity' , 0).stop(true).animate({
								left: '-='+ 7.5 +'px',
								opacity: 1
							}, settings.speed*0.4).animate({
								left: '+='+ 7.5 +'px'
							}, settings.speed*0.6);							
							
						settings.$wrapper_center.stop(true).animate({
								width: '+='+15+'px'
							}, settings.speed*0.4).animate({
								width: '-='+15+'px'
							}, settings.speed*0.6);
							
						settings.$wrapper_top.stop(true).animate({
								width: '+='+15+'px'
							}, settings.speed*0.4).animate({
								width: '-='+15+'px'
							}, settings.speed*0.6);
							
						settings.$wrapper_bottom.stop(true).animate({
								width: '+='+15+'px'
							}, settings.speed*0.4).animate({
								width: '-='+15+'px'
							}, settings.speed*0.6);
					}else if(settings.animation==4){
						settings.$wrapper.css('opacity' , 0).stop(true).animate({
								top: '+=' + settings.fade_distance + 'px',
								opacity: 1
							}, settings.speed);
					}else{
						//Default animation
						settings.$wrapper.css('opacity' , 0).stop(true).animate({
								top: '-=' + settings.fade_distance + 'px',
								opacity: 1
							}, settings.speed);
					}
				}//endif
			},function() {
				if(settings.animation==1){
					settings.$wrapper.stop(true).animate({opacity: 0}, settings.speed, function(){
								//hide window after fade
								hideBubble();
							});
				}else if(settings.animation==2){
					settings.$wrapper.stop(true).animate({
								top: '+=' + settings.fade_distance + 'px'
							}, settings.speed*0.6).animate({
								top: '-=' + settings.fade_distance + 'px',
								opacity: 0
							}, settings.speed*0.4,function(){
								//hide window after fade
								hideBubble();
							});
				}else if(settings.animation==3){
					settings.$wrapper.stop(true).animate({
								left: '-='+ 7.5 +'px',
								opacity: 0
							}, settings.speed,function(){
								//hide window after fade
								hideBubble();
							});
							
					settings.$wrapper_center.stop(true).animate({width: '+='+15+'px'}, settings.speed);							
					settings.$wrapper_top.stop(true).animate({width: '+='+15+'px'}, settings.speed);							
					settings.$wrapper_bottom.stop(true).animate({width: '+='+15+'px'}, settings.speed);				
				}else{
					//Default animation
					settings.$wrapper.stop(true).animate({
								top: '-=' + settings.fade_distance + 'px',
								opacity: 0
							}, settings.speed, function(){
								//hide window after fade
								hideBubble();
							});
				}
			});//end Hover
		});
			
		function hideBubble(){
			settings.$wrapper.css('top' , '-10000px');
		};
		
		/* Assign kbubble variable for later use  
		   Then, prepend the tooltip to the body */
		function initBubble(){
			settings.$wrapper = $('<div class="kbubble_Wrapper" />');
			
			//Create shadow free for IE for visual stability
			if($browser.msie){
				settings.$wrapper.append(
					'<div class="kbubble_Top_Wrapper"><div class="kbubble_ie_tl"><div class="kbubble_ie_tr"><div class="kbubble_ie_t"></div></div></div></div>'+
					'<div class="kbubble_Mid_Wrapper"><div class="kbubble_ie_l"><div class="kbubble_ie_r"><div class="kbubble_c">'+
						'<div id="kbubble_container">Default Content</div>'+
					'</div></div></div></div>'+
					'<div class="kbubble_Bottom_Wrapper"><div class="kbubble_ie_bl"><div class="kbubble_ie_br"><div class="kbubble_ie_b"><div class="kbubble_ie_tail"></div></div></div></div></div>');
			}else{
				settings.$wrapper.append(
					'<div class="kbubble_Top_Wrapper"><div class="kbubble_tl"><div class="kbubble_tr"><div class="kbubble_t"></div></div></div></div>'+
					'<div class="kbubble_Mid_Wrapper"><div class="kbubble_l"><div class="kbubble_r"><div class="kbubble_c">'+
						'<div id="kbubble_container">Default Content</div>'+
					'</div></div></div></div>'+
					'<div class="kbubble_Bottom_Wrapper"><div class="kbubble_bl"><div class="kbubble_br"><div class="kbubble_b"><div class="kbubble_tail"></div></div></div></div></div>');
			}
			
			$("body").prepend(settings.$wrapper);
			
			//Hide the wrapper
			hideBubble();
			
			//Assign variables for later use
			settings.$container = $('#kbubble_container');
			settings.$wrapper_top = $('.kbubble_Top_Wrapper');
			settings.$wrapper_center = $('.kbubble_c');
			settings.$wrapper_bottom = $('.kbubble_Bottom_Wrapper');

		};
			 
	};
});