/*
    tips.js
    Version 1.0
    December 7, 2007
    Eric Salczynski - http://www.wehaventthetime.com
    
    Create popup tool tips using absolutely positioned div
    elements whose content is grabbed from the "title" attribute.
    
    * Requires prototype.js v1.6+ (http://prototypejs.org)
*/


/*
	Options:
		show: function used for showing the popup
		hide: function used for hiding the popup
		location: center | center-float | fixed | float | cursor
		position: { right, left, top, bottom }: <int>    (only w/ fixed or float)
		alwaysHide: <bool>
*/
var Tips = Class.create({
	options: $H({
		offsetX: 0,
		offsetY: 0,
		fixed: false
	}),
	
	initialize: function(elements, opts) {
		if(opts)
			opts.each(function(pair){ this.options.set(pair.key, pair.value); }.bind(this));
			
		elements.each(function(el){
			Event.observe(el, 'mouseover', this.start.bindAsEventListener(el, this));
			Event.observe(el, 'mouseout', function(e){ this.end(); }.bind(this));
		}.bind(this));
	},
	
	start: function(e, _this) {
		var body = $$("body")[0];

        // create temporary div element for tool-tip
        var tipDiv = new Element("div", { id: "tool-tip", style: "position: absolute;" });
        var tipTitle = new Element("h4");
        var tipBody = new Element("p");
        
        tipText = this.readAttribute("title").split(" :: ");
        tipTitle.update(tipText[0]);
        tipBody.update(tipText[1]);
        
        Element.insert(tipDiv, tipTitle);
        Element.insert(tipDiv, tipBody);
        Element.insert(body, tipDiv);
        
        if(!_this.options.get("fixed")) {
        	tipDiv.event = function(e){ _this.cursorPosition(tipDiv, e); }
			Event.observe(document, 'mousemove', tipDiv.event);
		}
		
		_this.cursorPosition(tipDiv, e);
		tipDiv.show();
		
		Event.stop(e);
	},
	
	end: function(tip) {
		var tipDiv = $("tool-tip");
		tipDiv.hide();
		tipDiv.remove();

		if(this.options.get("fixed"))
			Event.stopObserving(document, 'mousemove', tipDiv.event);
	},
    
    cursorPosition: function(el, e) {
    	var dimensions = el.getDimensions();
    	el.setStyle({
    		top: Event.pointerY(e) + this.options.get("offsetY") - dimensions.height + "px",
    		left: Event.pointerX(e) + this.options.get("offsetX") + "px",
    		zIndex: "99"
    	});
    }

});