//
var FunTips = Class.create(
{
    initialize: function(element, content, options)
	{
        this.options = Object.extend(
        {
            title: undefined,
            styleClass: 'default',
            position: 'bottomRight',
			delay: 0.2
            
        }, arguments[2] || { });
        
        this.element = element;
        
        var objBody = $$('body')[0];
        this.content = objBody.appendChild(new Element('div',{id:'funTips', 'class':this.options.styleClass})).insert($(content).innerHTML);
        
        if($(this.element) != undefined) 
            this.init();
    },
    init: function()
    {
        var obj = this;
        $(this.element).observe('mouseover', (function(event) { event.stop; obj.handleMouseOver(event) }).bind(this));
        $(this.element).observe('mousemove', (function(event) { event.stop; obj.handleMouseMove(event) }).bind(this));
        $(this.element).observe('mouseout', (function(event) { event.stop; obj.handleMouseOut(event) }).bind(this));
        
        this.builder();
        
    },
    
    //EVENTS
    handleMouseOver: function()
    {
        $(this.content).style.display = "block";
        $(this.content).style.visibility = "visible";
    },
    handleMouseMove: function(event)
    {
        this.setPosition(event);
    },
    handleMouseOut: function()
    {
        $(this.content).style.visibility = "hidden";
    },
    
    //BUILDER
    builder: function()
    {
        //TITLE
        if(this.options.title != undefined)
            this.content = $(this.content).insert({top:new Element('div',{'class':'title'}).insert(this.options.title)});
        
        
        $(this.element).removeAttribute('title');
    },
    setPosition: function(event)
    {
        if(this.options.position == 'bottomRight')
        {
            $(this.content).style.top = (event.pointerY() + 20) + 'px';
            $(this.content).style.left = (event.pointerX() + 20) + 'px';
        }
        else if(this.options.position == 'bottomLeft')
        {
            $(this.content).style.top = (event.pointerY() + 20) + 'px';
            $(this.content).style.left = (event.pointerX() - $(this.content).getWidth() - 5) + 'px';
        }
        else if(this.options.position == 'topRight')
        {
            $(this.content).style.top = (event.pointerY() - $(this.content).getHeight()) + 'px';
            $(this.content).style.left = (event.pointerX() + 20) + 'px';
        }
        else if(this.options.position == 'topLeft')
        {
            $(this.content).style.top = (event.pointerY() - $(this.content).getHeight()) + 'px';
            $(this.content).style.left = (event.pointerX() - $(this.content).getWidth() - 5) + 'px';
        }
    }
    
});