/*
 * Copyright (c) 2009 Jose Ariel Gomez Ortigoza <joseariel@shastic.com>
 */


/* Based on tooltip-0.2.js - Small tooltip library on top of Prototype 
 * by Jonathan Weiss <jw@innerewut.de> distributed under the BSD license. 
 *
 * This tooltip library works as follows. You add the script to the page, then 
 * simply call shasticTooltip.pushTip('trigger_id', 'content(tip)'), passing 
 * the id of the trigger element and the content to display inside the tooltip.
 * This 'tip' content will be displayed inside the tooltip bubble, which will be 
 * placed (and shown) near the mouse pointer when its trigger-element is moused-over.
 * 
 *
 *
 * You can use my_tooltip.destroy() to remove the event observers and thereby the tooltip.
 */

//if (typeof addEvent == 'undefined')
//  throw("You must have the addEvent script to use shasticTooltip");

var ShasticTooltip = Class.create({
//ShasticTooltip.prototype = {
  
	  initialize: function() {
	    var options = Object.extend({
	      bubbleId: 'shasticTooltip',
	      default_css: false,
	      margin: "0px",
		    padding: "5px",
		    backgroundColor: "#d6d6fc",
		    min_distance_x: 0,
	      min_distance_y: 5,
	      delta_x: 0,
	      delta_y: 0,
	      zindex: 10000
	    }, arguments[0] || {});
	
			//this.element      = $(element);
	    this.triggers = [];//(typeof(element) == "string" ? $(element) : element);
			this.tips = new Object();
			
	    this.options = options;
	    
	    // Create the tooltip wrapper (cloud)
	    this.createTooltipWrapper();
	
	    // hide the tool-tip by default
	    this.tool_tip.hide();
	
	    
	    this.eventMouseOver = this.showTooltip.bindAsEventListener(this);
	    this.eventMouseOut   = this.hideTooltip.bindAsEventListener(this);
	    this.eventMouseMove  = this.moveTooltip.bindAsEventListener(this);
			
			/*
			// IE Event handling
			this.eventMouseOver = addEvent(this, "mouseover", this.showTooltip);
	    this.eventMouseOut  = addEvent(this, "mouseout", this.hideTooltip);
	    this.eventMouseMove = addEvent(this, "mousemove", this.moveTooltip);
			*/
			
	    //this.registerEvents();
	  },
	
	  destroy: function(element) {
	    Event.stopObserving(element, "mouseover", this.eventMouseOver);
	    Event.stopObserving(element, "mouseout", this.eventMouseOut);
	    Event.stopObserving(element, "mousemove", this.eventMouseMove);
	  },
	
	  registerEvents: function(element) {
	    Event.observe(element, "mouseover", this.eventMouseOver);
	    Event.observe(element, "mouseout", this.eventMouseOut);
	    Event.observe(element, "mousemove", this.eventMouseMove);
	  },
	  
	  pushTip: function(trigger_id, tip_content) {
	  	var currTrigger = (typeof(trigger_id) == "string" ? $(trigger_id) : trigger_id);
	  	//console.info(trigger_id);
	  	//console.info(currTrigger);
	  	
	  	this.triggers.push(currTrigger);
			this.tips[trigger_id] = tip_content;
			
			this.registerEvents(currTrigger);
	  },
	  
	  moveTooltip: function(event){
		  Event.stop(event);
		  
		  // if is IE
		  if ( this.isIE() ) {
		  	this.currTrigger = event.srcElement.up('a'); // Get the trigger
		  	//console.info(this.currTrigger.id);   
		  } else { 
			  this.currTrigger = event.currentTarget;	
			  //console.info(this.currTrigger.id);	
		  }
		  
	    this.currTip = this.tips[this.currTrigger.identify()];
		  
		  // get Mouse position
	    var mouse_x = Event.pointerX(event);
		  var mouse_y = Event.pointerY(event);
			//console.info("mouse before x: "+mouse_x+" y:"+mouse_y);
			
			
			// Add the new tip
			this.tool_tip_content.update(this.currTip);
			
			// Resize the tooltip
			
			
		  // decide if wee need to switch sides for the tooltip
		  var dimensions = Element.getDimensions( this.tool_tip );
		  var element_width = dimensions.width;
		  var element_height = dimensions.height;
		
		  if ( ((element_width / 2) + mouse_x) >= ( this.getWindowWidth() - this.options.min_distance_x) ){ // too big for X
			  mouse_x = mouse_x - (element_width / 2);
			  // apply min_distance to make sure that the mouse is not on the tool-tip
			  mouse_x = mouse_x - this.options.min_distance_x;
		  } else {
			  mouse_x = mouse_x + this.options.min_distance_x;
		  }
			
		  if ( (element_height + mouse_y) >= ( this.getWindowHeight() - this.options.min_distance_y) ){ // too big for Y
			  mouse_y = mouse_y - element_height;
		    // apply min_distance to make sure that the mouse is not on the tool-tip
			  mouse_y = mouse_y - this.options.min_distance_y;
		  } else {
			  mouse_y = mouse_y + this.options.min_distance_y;
		  } 
			
			//console.info('element_width: '+element_width+', element_height: '+element_height);
			//console.info('mouse_x: '+mouse_x+', mouse_y: '+mouse_y);
			
			//console.info(event.currentTarget);
			
			//console.info("mouse after x: "+mouse_x+" y:"+mouse_y);
			// ADDED BY SHASTIC
			trigger_position = Element.cumulativeOffset(this.currTrigger);
			mouse_x = (mouse_x - trigger_position[0]) - (element_width / 2);
			mouse_y = mouse_y - trigger_position[1];
		  
			//console.info("mouse modified x: "+mouse_x+" y:"+mouse_y);
		  // now set the right styles
		  this.setStyles(mouse_x, mouse_y);
		  
	  },
		
			
	  showTooltip: function(event) {
	    Event.stop(event);
	    this.moveTooltip(event);
		  new Element.show(this.tool_tip);
	  },
	  
	  setStyles: function(x, y){
	    //console.info('x: '+x);
	    //console.info('y: '+y);
	    //console.info(this.currTrigger);
	    trigger_position = Element.cumulativeOffset(this.currTrigger);
	    
	    // Added by Shastic. MOVED INSIDE CREATE TOOLTIP
	    // Move the tooltip inside the body element to avoid a possible wrapper hidden overflow property.
	    //document.documentElement.down('body').appendChild(this.tool_tip);
	    
	    // set the right styles to position the tool tip
		  Element.setStyle(this.tool_tip, { position:'absolute',
							 								    top: trigger_position[1] + y + this.options.delta_y + "px",
							 								    left: trigger_position[0] + x + this.options.delta_x + "px",
															    zIndex: this.options.zindex
							 								  });
		
		  // apply default theme if wanted
		  if (this.options.default_css){
		  	  Element.setStyle(this.tool_tip, { margin:this.options.margin,
			  						                  padding:this.options.padding,
	                                    backgroundColor:this.options.backgroundColor,
								                      zIndex:this.options.zindex
									    							});	
		  }	
	  },
	
	  hideTooltip: function(event){
		  new Element.hide(this.tool_tip);
	  },
	
	  createTooltipWrapper: function() {
	  	// Create main tooltip wrapper
	  	this.tool_tip = $( document.createElement("div") ); 
	  	this.tool_tip.id = this.options.bubbleId;
	    this.tool_tip.addClassName("clearfix");
	    this.tool_tip.addClassName("popup");
			//this.tool_tip.style.minHeight = "60px";
			//if(isIE) { this.tool_tip.style.height = "60px"; } else { this.tool_tip.style.height = "auto !important"; }
			//this.tool_tip.style.width = "388px";
			//this.tool_tip.style.position = "absolute";
			//this.tool_tip.style.zIndex = this.options.zindex.toString();
			this.tool_tip.style.cssText = "position: absolute; min-height: 60px; height: auto ! important; height: 60px; width: 388px; z-index: " + this.options.zindex.toString() + ";"; // IE
			
	    // NOTE: It can also be assigned with 'this.tool_tip.style.cssText ='
	    
	    // Create the bubble's columns
	    //
	    
	    // Top Left Corner
	    var topLeft = $( document.createElement("div") ); // the $() function is required for IE to work
	    topLeft.addClassName("column_tag");
	    topLeft.addClassName("corner");
	    topLeft.addClassName("topleft");
			topLeft.style.cssText = "position: relative; float: left; min-height: 15px; height: auto ! important; width: 19px;";
			this.tool_tip.appendChild(topLeft);
	    
	    // Top Middle
	    var topMiddle = $( document.createElement("div") );
	    topMiddle.addClassName("column_tag");
	    topMiddle.addClassName("top");
			topMiddle.style.cssText = "position: relative; float: left; min-height: 15px; height: auto ! important; width: 350px;";
			this.tool_tip.appendChild(topMiddle);
	    
	    // Top Right Corner
	    var topRight = $( document.createElement("div") );
	    topRight.addClassName("column_tag");
	    topRight.addClassName("corner");
	    topRight.addClassName("topright");
			topRight.style.cssText = "position: relative; float: left; min-height: 15px; height: auto ! important; width: 19px;";
			this.tool_tip.appendChild(topRight);
			
	    // Main Content
	    var centerContent = $( document.createElement("div") );
	    centerContent.addClassName("clearfix");
			centerContent.style.float = "left";
			
			var centerContentFirstWrapper = $( document.createElement("div") );
	    centerContentFirstWrapper.addClassName("left");
	    
	    var centerContentSecondWrapper = $( document.createElement("div") );
	    centerContentSecondWrapper.addClassName("right");
	    centerContentSecondWrapper.addClassName("popup-contents");
			centerContentSecondWrapper.style.width = "350px";
			
			var centerContentThirdWrapper = $( document.createElement("div") );
	    centerContentThirdWrapper.addClassName("popup-contents-container");
	    centerContentThirdWrapper.addClassName("clearfix");
	    centerContentThirdWrapper.style.minHeight = "14px";
	    //centerContentThirdWrapper.style.height = "auto !important"; 
			centerContentThirdWrapper.style.cssText = "min-height: 14px; height: auto ! important; height: 14px;"; // IE
	    
			centerContentSecondWrapper.appendChild(centerContentThirdWrapper);
			centerContentFirstWrapper.appendChild(centerContentSecondWrapper);
			centerContent.appendChild(centerContentFirstWrapper);
			this.tool_tip.appendChild(centerContent);
			
			this.tool_tip_content = $(centerContentThirdWrapper); 
			
			// Bottom Left Corner
	    var bottomLeft = $( document.createElement("div") );
	    bottomLeft.addClassName("column_tag");
	    bottomLeft.addClassName("corner");
	    bottomLeft.addClassName("bottomleft");
			bottomLeft.style.cssText = "position: relative; float: left; min-height: 29px; height: auto ! important; width: 19px;";
			this.tool_tip.appendChild(bottomLeft);
	    
	    // Bottom Middle
	    var bottomMiddle = $( document.createElement("div") );
	    bottomMiddle.addClassName("column_tag");
	    bottomMiddle.addClassName("bottom");
			bottomMiddle.style.cssText = "position: relative; float: left; min-height: 29px; height: auto ! important; width: 350px;";
			
			var bottomMiddleTail = $( document.createElement("img") );
			bottomMiddleTail.style.height = "29px";
			bottomMiddleTail.style.width = "30px";
			bottomMiddleTail.src = "/images/shastic/tooltip/bubble-tail2.png";
			
			bottomMiddle.appendChild(bottomMiddleTail);
			this.tool_tip.appendChild(bottomMiddle);
	    
	    // Bottom Right Corner
	    var bottomRight = $( document.createElement("div") );
	    bottomRight.addClassName("column_tag");
	    bottomRight.addClassName("corner");
	    bottomRight.addClassName("bottomright");
			bottomRight.style.cssText = "position: relative; float: left; min-height: 29px; height: auto ! important; width: 19px;";
			this.tool_tip.appendChild(bottomRight);
			
	    
	    // Add the tooltip bubble to the document
	    document.body.appendChild(this.tool_tip);
			
	  },
	
	  getWindowHeight: function(){
	    var innerHeight;
		  if (navigator.appVersion.indexOf('MSIE')>0) {
			  innerHeight = document.body.clientHeight;
	    } else {
			  innerHeight = window.innerHeight;
	    }
	    return innerHeight;	
	  },
	 
	  getWindowWidth: function(){
	    var innerWidth;
		  if (navigator.appVersion.indexOf('MSIE')>0) {
			  innerWidth = document.body.clientWidth;
	    } else {
			  innerWidth = window.innerWidth;
	    }
	    return innerWidth;	
	  },
	  
	  isIE: function() {
	  	return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent);
	  }

});

document.observe('dom:loaded', function () { shasticTooltip = new ShasticTooltip(); });