/*

MARKUP
Add the html or text you want in the title attribute of the input. 
Add the class panda-tip to that input. 
In the views js file add $('.panda-tip').pandaTip(); 

*/

(function( $ ){
	$.fn.pandaTip = function( options ) {  
		var settings = {
			width: 200,
			right: '',
			top: 0,
			bottom: 22,
			type: 'focus', // focus: for inputs like textboxes, tooltip is activated when the input is in "focus". click: for any other object, tip is triggered by click event. mousedown: same as click but the tip disappears after the set timeout amount
			timeout: true,
			timeoutTime: 5,
			other:null,  //if the event is triggered by another object
			position: 'right', //bottom or right
			color: 'gray', //gray, white
			singleTip: false,
			floatIcon: null,
			icon: false,
			tipGroup: null,
			click2close: true
		};

		return this.each(function() {        
			if ( options ) { 
				$.extend( settings, options );
			}
			
			var $t;
			
			if(settings.floatIcon != null){
				wrapperClass = 'panda-tip-container float-'+settings.floatIcon;
			}else{
				wrapperClass = 'panda-tip-container';
			}
			
			if(settings.icon != false){
				thisClass = 'panda-tipped has-icon';
			}else{
				thisClass = 'panda-tipped';
			}

			var $this = $(this);
			var $content = $this.attr('title');
			$this.addClass(thisClass);
			$this.wrap('<span class="'+wrapperClass+'"></span>');
			var $container = $(this).parent('.panda-tip-container');
			
			var boxClass = 'panda-tip-box';
			var boxClassSelectors = '.panda-tip-box';
			if (settings.tipGroup){
				boxClass = 'panda-tip-box '+settings.tipGroup;
				boxClassSelectors = '.panda-tip-box.'+settings.tipGroup;
			}
			
			$container.append('<span class="'+boxClass+'"><span class="content">'+$content+'</span><span class="pointer"></span></span>');
			var $pandaTipBox = $('.panda-tip-box', $container);
			//$pandaTipBox.show();
			
			var rightPos = null;
			var topPos = settings.top;
			var bottomPos = null;
			
			if (settings.position == 'bottom'){
				$('.pointer', $pandaTipBox).css({'left':(settings.width/2)+2});
				$pandaTipBox.addClass('position-bottom');
			}else if (settings.position == 'top'){
				$pandaTipBox.addClass('position-top');
				$('.pointer', $pandaTipBox).css({'left':(settings.width/2)+2});
				topPos = null;
				bottomPos = settings.bottom;
			}
			
			if (settings.color == 'white'){
				$pandaTipBox.addClass('white-tip');
			}
			
			if (settings.right == '') {
				rightPos = '-'+settings.width-10;
			}else{
				rightPos = settings.right;
			}
			
			
//----  TIMEOUT FUNCTIONS	
			var $tipTimer;
			var clickToClose = 0;

			if(settings.timeout){
				$pandaTipBox.append('<div class="tip-timer" style="display:none;"><input type="text" value="0"></div>');
				$tipTimer = $('.tip-timer input', $pandaTipBox);
				//$('.tip-timer', $pandaTipBox).show();
				
				$tipTimer.change(function(){
					clearTimeout($t);
					if($tipTimer.val() > 0){
						$t = setTimeout(timedCount, 2000);
					}else{
						$(this).parent().parent().css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'none'});
						$('.panda-tipped.has-icon').text('?').css({'margin-bottom':'0px', 'padding-top':'0px', 'font-size':'10px'});
					}
				});
				
				function doTimer(){
					if($('.panda-tipped.has-icon', $container).text() == 'X'){
						clickToClose = 1;
					}else{
						clickToClose = 0;
					}
					
					if(settings.singleTip == true){
						$(boxClassSelectors+' .tip-timer input').each(function(){
							$(this).val('0');
							$(this).change();
						});
					}
					
					if(settings.click2close){
						if(clickToClose > 0){
							$tipTimer.val('0');
							$tipTimer.change();
							$('.panda-tipped.has-icon', $container).text('?').css({'margin-bottom':'0px', 'padding-top':'0px', 'font-size':'10px'});
						}else{
							$('.panda-tipped.has-icon', $container).text('X').css({'margin-bottom':'-1px', 'padding-top':'1px', 'font-size':'9px'});
							$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'block'});
							$tipTimer.val(settings.timeoutTime);
							$tipTimer.change();
						}
					}else{
						$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'block'});
						$tipTimer.val(settings.timeoutTime);
						$tipTimer.change();
					}
				}
				
				function timedCount(){
					if($tipTimer.val() > 0){
						$tipTimer.val(parseInt($tipTimer.val()) - 1);
						$tipTimer.change();
					}
				}
			}					
//----  END TIMEOUT FUNCTIONS	
			else{
				function noTimer(){
					if(settings.singleTip == true){
						$(boxClassSelectors).each(function(){
							$(this).css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'none'});
						});
						$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'block'});
					}else{
						$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'block'});
					}
				}
			}
			
			
			
			$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos});
			
			switch(settings.type) {
				case 'focus':
					$(this).focus(function() {
						if(settings.singleTip == true){
							$('.panda-tip-box').css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'none'});
						}
						$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'block'});
					});
					
					$(this).blur(function() {
						$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'none'});
					});
					break;
					
				case 'click':
					$(this).click(function() {
						if(settings.singleTip == true){
							$('.panda-tip-box').css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'none'});
						}
						
						$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'block'});
					});
				  	break;
				  	
				case 'mousedown':
					if (settings.other == null){
						$(this).mousedown(function() {
							if(settings.timeout == true){
								doTimer();
							}else{
								noTimer();
							}
						});
					}else{
						$(settings.other).live('mousedown', function(){
							if(settings.timeout == true){
								doTimer();
							}else{
								noTimer();
							}
						});
					}
					break;
					
				case 'custom':
					
					break;
					
				case 'hover':
					if (settings.other == null){
						$(this).mouseenter(function() {
							if(settings.timeout == true){
								doTimer();
							}else{
								noTimer();
								$(this).mouseout(function(){
									$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'none'});
								});
							}
						});
					}else{
						$(settings.other).live('mouseenter', function(){
							if(settings.timeout == true){
								doTimer();
							}else{
								noTimer();
								$(this).mouseleave(function(){
									$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'none'});
								});
							}
						});
					}
					break;
				  	
				default:
					$(this).focus(function() {
						if(settings.singleTip == true){
							$('.panda-tip-box').css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'none'});
						}
						
						$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'block'});
					});
					
					$(this).blur(function() {
						$pandaTipBox.css({'width':settings.width, 'right':rightPos, 'top':topPos, 'bottom':bottomPos, 'display':'none'});
					});
			}
		});
	};
})( jQuery );