/**************************************************

Filename:		toolTip.js
Date Modified:	October 22, 2011
Modified By:	Chuck Bloodgood

Dependencies:	http.js

Description:	versatile tooltip window 

**************************************************/

// Create namespace and specify some meta-information
Tooltip = {};
Tooltip.NAME = "Tooltip";
Tooltip.VERSION = 1.0;

/*************************************************

Define constants

**************************************************/

arrowID = 'infoWindowArrow';
windowID = 'infoWindow';

var ARROW_SIZE = 5;
var DEFAULT_PADDING = 4;
var FADE_IN_DELAY = .15; 

/*************************************************

Set defaults

**************************************************/
 
Tooltip.setDefaults = function   (){ 
	Tooltip.opts = {
		name: 'ToolTip',
		type: 'general',
		action: 'show', 
		e: this ,
		url: './ajax/tooltipAjax.php', 
		text: 'City',
		fontSize: '15',
		fontColor: 'white',
		arrowDirection: 'top',
		arrow_x: '3',
		arrow_y: '5',
		width: '97',
		height: '27',
		slideVal: '-8',
		backColor: '#A8A8A8',
		borderRadius: '4',
		borderColor: 'white',
		padding: '4',
		imgUrl: '',
		createDelay: 0,
		fadeDelay: 0 ,
		hideOnScroll: 'Yes'
	};
};  
Tooltip.setDefaults();

/*************************************************

Show tooltip

**************************************************/
	
Tooltip.show = function($params){ 
	Tooltip.setDefaults();
   $.extend(Tooltip.opts,$params || {});  
   
	Tooltip.hideNow();

	// helpful if other things are disappearing/appearing on screen,
	// which can cause the window to be created in the wrong place
	setTimeout(function()
	{
	
	Tooltip.opts.arrow_x = parseInt(Tooltip.opts.arrow_x);
	Tooltip.opts.arrow_y = parseInt(Tooltip.opts.arrow_y);
	Tooltip.opts.padding = parseInt(Tooltip.opts.padding);
	Tooltip.opts.width = parseInt(Tooltip.opts.width);
	Tooltip.opts.height = parseInt(Tooltip.opts.height);
	var contentWidth = Tooltip.opts.width - 2*Tooltip.opts.padding;
	var contentHeight = Tooltip.opts.height - 2*Tooltip.opts.padding;
	Tooltip.opts.slideVal = parseInt(Tooltip.opts.slideVal);
	Tooltip.opts.borderRadius = parseInt(Tooltip.opts.borderRadius);
	Tooltip.opts.padding = parseInt(Tooltip.opts.padding);
	Tooltip.opts.createDelay = parseInt(Tooltip.opts.createDelay);
	if (Tooltip.opts.fadeDelay != undefined)
	{	
		Tooltip.opts.fadeDelay = parseInt(Tooltip.opts.fadeDelay);
		FADE_IN_DELAY = Tooltip.opts.fadeDelay;
	}

	var arrow = document.createElement('div');
	arrow.id = arrowID;

	var iw = document.createElement('div');
	iw.id = windowID;

	// sides that need to be transparent
	var other1, other2;
	// when creating css triangles, need to specify other side
	if (Tooltip.opts.arrowDirection === 'left' || Tooltip.opts.arrowDirection === 'right') 
	{
		other1 = 'top';
		other2 = 'bottom'
	}
	else if (Tooltip.opts.arrowDirection === 'bottom' || Tooltip.opts.arrowDirection === 'top') 
	{
		other1 = 'left';
		other2 = 'right'
	}
	else 
	{
		Tooltip.opts.arrowDirection = null; // if arrowDirection is invalid
	}

	// if valid direction specified, create arrow
	if (Tooltip.opts.arrowDirection)
	{
		if (Tooltip.opts.type == 'map')
		{
			// Get GoogleMap
			var gm = GoogleMap;
		
			// Special calculations for map tool tips
			var pixel = Tooltip.opts.e.pixel;
			var x = pixel.x;
			var y = pixel.y;
		
			/* For determining map movement
			var overlay = new google.maps.OverlayView();
			overlay.draw = function() {};
			overlay.setMap(gm.map);
			
			var proj = overlay.getProjection();
			console.log(overlay);
			var pos = Tooltip.opts.marker.getPosition();
			var p = proj.fromLatLngToContainerPixel(pos);
			console.log(p);
			*/
		
			
			// Set canvas dimensions
			gm.setCanvasDimensions();
			
			// Get map offset, width, and height
			var offset = gm.MAP_OFFSET;
			
			// Additional offsets
			var addLeft = 15;
			var addTop = 8 - Tooltip.opts.height;
			
			// Get position of parent
			var parentOffset = {}
			parentOffset.left = offset.left + x + addLeft;
			parentOffset.top = offset.top + y + addTop;
			// Set parent widths (icons 16 x 16px)
			var parentWidth = '16';
			var parentHeight = '16';
		}
		else
		{
			// get position of parent
			var parentOffset = $(Tooltip.opts.e).offset();
			var parentWidth = $(Tooltip.opts.e).width();
			var parentHeight = $(Tooltip.opts.e).height();
		}

		// create triangle
		arrow.setAttribute('style','opacity:0;width:0;height:0;position:absolute;');
		$(arrow).css('border-'+Tooltip.opts.arrowDirection, ARROW_SIZE + 'px solid ' + Tooltip.opts.backColor);
		$(arrow).css('border-'+other1, ARROW_SIZE + 'px solid transparent'); // + Tooltip.opts.borderColor);
		$(arrow).css('border-'+other2, ARROW_SIZE + 'px solid '); // + Tooltip.opts.borderColor);
		$(arrow).css('transition', 'opacity '+FADE_IN_DELAY+'s linear');
		$(arrow).css('-webkit-transition', 'opacity '+FADE_IN_DELAY+'s linear');
		$(arrow).css('-moz-transition', 'opacity '+FADE_IN_DELAY+'s linear');
		$(arrow).css('-o-transition', 'opacity '+FADE_IN_DELAY+'s linear');
		$(arrow).css('z-index',1000);

		// create infowindow
		iw.setAttribute('style', 'opacity:0;width:'+contentWidth+'px;height:'+contentHeight+'px;position:absolute;');
		$(iw).css('background-color', Tooltip.opts.backColor);
		$(iw).css('font-size', Tooltip.opts.fontSize + 'px');
		$(iw).css('color', Tooltip.opts.fontColor);
		$(iw).css('padding', DEFAULT_PADDING+'px');
		$(iw).css('padding-left', Tooltip.opts.padding + 'px');
		$(iw).css('transition', 'opacity '+FADE_IN_DELAY+'s linear');
		$(iw).css('-webkit-transition', 'opacity '+FADE_IN_DELAY+'s linear');
		$(iw).css('-moz-transition', 'opacity '+FADE_IN_DELAY+'s linear');
		$(iw).css('-o-transition', 'opacity '+FADE_IN_DELAY+'s linear');
		$(iw).css('z-index',1000);

		if (typeof Tooltip.opts.text == 'string')
			iw.innerHTML = '<span>' + Tooltip.opts.text + '</span>';
 
		// give window rounded corners
		if (Tooltip.opts.borderRadius > 0)
		{
			$(iw).css('border-radius', Tooltip.opts.borderRadius);
			$(iw).css('border', '1px solid ' + Tooltip.opts.borderColor);
			$(iw).css('-moz-border-radius', Tooltip.opts.borderRadius);
		}

		// set left and top values of arrow
		switch (Tooltip.opts.arrowDirection)
		{
		case 'left':
			var arrowLeft = parentOffset.left - ARROW_SIZE + Tooltip.opts.arrow_x;
			var arrowTop = parentOffset.top - Tooltip.opts.arrow_y
	
			$(arrow).css('left', arrowLeft + 'px');
			$(arrow).css('top', arrowTop + 'px');

			$(iw).css('left', arrowLeft - Tooltip.opts.width + 'px');
			$(iw).css('top', arrowTop + Tooltip.opts.slideVal + 'px');
			
			break;

		case 'right':
			var arrowLeft = parentOffset.left + parentWidth + Tooltip.opts.arrow_x;
			var arrowTop = parentOffset.top - Tooltip.opts.arrow_y;

			$(arrow).css('left', arrowLeft + 'px');
			$(arrow).css('top', arrowTop + 'px');

			$(iw).css('left', arrowLeft + ARROW_SIZE + 'px');
			$(iw).css('top', arrowTop + Tooltip.opts.slideVal + 'px');
		
			break;

		case 'top':
		 	var arrowLeft = parentOffset.left + Tooltip.opts.arrow_x;
		 	var arrowTop = parentOffset.top - Tooltip.opts.arrow_y;
			
			$(arrow).css('left', arrowLeft + 'px');
			$(arrow).css('top', arrowTop + 'px');

			$(iw).css('left', arrowLeft + Tooltip.opts.slideVal + 'px');
			$(iw).css('top', arrowTop - Tooltip.opts.height + 'px');
	
			break;

		case 'bottom':
			var arrowLeft = parentOffset.left + Tooltip.opts.arrow_x;
			var arrowTop = parentOffset.top + parentHeight - Tooltip.opts.arrow_y;

			$(arrow).css('left', arrowLeft + 'px');
			$(arrow).css('top', arrowTop + 'px');

			$(iw).css('left', arrowLeft + Tooltip.opts.slideVal + 'px');
			$(iw).css('top', (arrowTop + ARROW_SIZE) + 'px');
		
			break;
		}	

		// place arrow in window
		$('html').append(arrow);
		$('html').append(iw);

		setTimeout(function(){$(arrow).css('opacity', 1);$(iw).css('opacity', 1)}, 0);

		$(window).resize(function()
		{
			clearTimeout(this.resizeTimeout);
			Tooltip.hide();
    		this.resizeTimeout = setTimeout(function(){Tooltip.show()}, 500);});
		}

	}, Tooltip.opts.createDelay);
	  
    if(Tooltip.opts.hideOnScroll == "Yes"){ 
	  $(document).scroll(function(){
	      Tooltip.hide(); 
	 });  
	}	 
}  

/*************************************************

Tooltip ajax call

**************************************************/
  
Tooltip.ajax = function(eThis, $params){ 
	Tooltip.setDefaults();
   $.extend(Tooltip.opts,$params || {}); 
   
   if (Tooltip.opts.action == "FirstItem"){ 
	   //alert("FontColor:"+Tooltip.opts.fontColor);	
   }else if (Tooltip.opts.action == "ajaxTooltip"){ 
	   $.ajax({
			url: Tooltip.opts.url,
			type: 'post', 
			data: { 
			    action:'showTooltip',
				text: 'Sample Text'
			   },
			dataType: 'html',
			success: function ($response) {
				 return Tooltip.show({e:eThis, text:"Response:"+$response});
			} 
		})
	}
}  
 
/*************************************************

Hide window with fade

**************************************************/
 
Tooltip.hide = function()
{
	var arrow = $('#'+arrowID);
	var iw = $('#'+windowID);
	setTimeout(function(){$(arrow).css('opacity', 0);$(iw).css('opacity', 0)}, 0);
	setTimeout(function(){$(arrow).remove(); $(iw).remove();}, FADE_IN_DELAY * 1000);
}

/*************************************************

Hide window immediately

**************************************************/
 
Tooltip.hideNow = function()
{
	var arrow = $('#'+arrowID);
	var iw = $('#'+windowID);
	$(arrow).remove();
	$(iw).remove();
}