// Tooltips Class
// A superclass to work with simple CSS selectors
var Tooltips = Class.create();
Tooltips.prototype = {
    initialize: function(selector, options){
        var tooltips = $$(selector);
        tooltips.each(function(tooltip){
            new Tooltip(tooltip, options);
        });
    }
};

// Tooltip Class
var Tooltip = Class.create();
Tooltip.prototype = {
    initialize: function(el, options){
        this.el = $(el);
        this.initialized = false;
        this.setOptions(options);


        // Event handlers
        this.showEvent = this.show.bindAsEventListener(this);
        this.hideEvent = this.hide.bindAsEventListener(this);
        this.updateEvent = this.update.bindAsEventListener(this);
        Event.observe(this.el, "mouseover", this.showEvent);

        Event.observe(this.el, "mouseout", this.hideEvent);
        Event.observe(this.el, "keydown", this.hideEvent);
        Event.observe(this.el, "mousedown", this.hideEvent);

        // Removing title from DOM element to avoid showing it
        this.content = this.el.title.stripScripts().strip();
				this.content = '<h4>'+this.content.sub('!', '</h4><span>');
				this.content += '</span>';
        this.el.title = "";

        // If descendant elements has 'alt' attribute defined, clear it
				if(this.el.descendants()){
					this.el.descendants().each(function(el){
            if (Element.readAttribute(el, 'alt'))
                el.alt = "";
        	});
				}

    },
    setOptions: function(options){
        this.options = {
            backgroundColor: '#fff', // Default background color
            borderColor: '#8A0A22', // Default border color
            textColor: '#8A0A22', // Default text color (use CSS value)
            textShadowColor: '', // Default text shadow color (use CSS value)
            maxWidth: 300, // Default tooltip width
            align: "left", // Default align
            delay: 250, // Default delay before tooltip appears in ms
            mouseFollow: false, // Tooltips follows the mouse moving
            opacity: 1, // Default tooltips opacity
            appearDuration: .25, // Default appear duration in sec
            hideDuration: .25 // Default disappear duration in sec
        };
        Object.extend(this.options, options ||
        {});
    },
    show: function(e){
        this.xCord = Event.pointerX(e);
        this.yCord = Event.pointerY(e);
        if (this.el.tooltip) this.el.tooltip.hide();
        if (!this.initialized)
            this.timeout = window.setTimeout(this.appear.bind(this), this.options.delay);
    },
    hide: function(e){
        if (this.initialized) {
            this.appearingFX.cancel();
            if (this.options.mouseFollow)
                Event.stopObserving(this.el, "mousemove", this.updateEvent);
            new Effect.Fade(this.tooltip, {
                duration: this.options.hideDuration,
                afterFinish: function(){
                    Element.remove(this.tooltip)
                }.bind(this)
            });
        }
        this._clearTimeout(this.timeout);

        this.initialized = false;
    },
    update: function(e){
        this.xCord = Event.pointerX(e);
        this.yCord = Event.pointerY(e);
        this.setup();
    },
    appear: function(){
        // Building tooltip container
        this.tooltip = new Element("div", {
            className: "tooltip",
            style: "display: none"
        });
				var isIE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5))==6;
				var ie6iframe = "";
				// alert(isIE6);
				if (isIE6) {
					ie6iframe = new Element("iframe", {
						className: "iefixiframe"
					});
				}


        var arrow = new Element("div", {
            className: "xarrow"
        }).insert('<b class="a1"></b><b class="a2"></b><b class="a3"></b><b class="a4"></b><b class="a5"></b><b class="a6"></b>');

        var top = new Element("div", {
            className: "xtop"
        }).insert(new Element("div", {
            className: "xb1",
            style: "background-color:" + this.options.borderColor + ";"
        })).insert(new Element("div", {
            className: "xb2",
            style: "background-color:" + this.options.borderColor + "; border-color:" + this.options.borderColor + ";"
        })).insert(new Element("div", {
            className: "xb3",
            style: "background-color:" + this.options.borderColor + "; border-color:" + this.options.borderColor + ";"
        })).insert(new Element("div", {
            className: "xb4",
            style: "background-color:" + this.options.borderColor + "; border-color:" + this.options.borderColor + ";"
        }));

        var bottom = new Element("div", {
            className: "xbottom"
        }).insert(new Element("div", {
            className: "xb4",
            style: "background-color:" + this.options.borderColor + "; border-color:" + this.options.borderColor + ";"
        })).insert(new Element("div", {
            className: "xb3",
            style: "background-color:" + this.options.borderColor + "; border-color:" + this.options.borderColor + ";"
        })).insert(new Element("div", {
            className: "xb2",
            style: "background-color:" + this.options.borderColor + "; border-color:" + this.options.borderColor + ";"
        })).insert(new Element("div", {
            className: "xb1",
            style: "background-color:" + this.options.borderColor + ";"
        }));

        var content = new Element("div", {
            className: "errorboxcontent",
            style: "background-color:" + this.options.backgroundColor + "; border-color:" + this.options.borderColor +
            ((this.options.textColor != '') ? "; color:" + this.options.textColor : "")
        }).update(this.content);

        // Building and injecting tooltip into DOM
        this.tooltip.insert(ie6iframe).insert(arrow).insert(top).insert(content).insert(bottom);
        $(document.body).insert({
            'top': this.tooltip
        });

        // Coloring arrow element
        this.tooltip.select('.xarrow b').each(function(el){
            if (!el.hasClassName('a1'))
                el.setStyle({
                    backgroundColor: this.options.borderColor,
                    borderColor: this.options.borderColor
                });
            else
                el.setStyle({
                    backgroundColor: this.options.borderColor
                });
        }.bind(this));

        Element.extend(this.tooltip); // IE needs element to be manually extended
        this.options.width = this.tooltip.getWidth() + 1; // Quick fix for Firefox 3

				// this.height = this.tooltip.getHeight();
				// console.log("H: " + this.height);

        this.tooltip.style.width = this.options.width + 'px'; // IE7 needs width to be defined
        this.setup();

        if (this.options.mouseFollow)
            Event.observe(this.el, "mousemove", this.updateEvent);

        this.initialized = true;
        this.appearingFX = new Effect.Appear(this.tooltip, {
            duration: this.options.appearDuration,
            to: this.options.opacity
        });

    },
    setup: function(){
        // If content width is more then allowed max width, set width to max
        if (this.options.width > this.options.maxWidth) {
            this.options.width = this.options.maxWidth;
            this.tooltip.style.width = this.options.width + 'px';
        }

        // Tooltip doesn't fit the current document dimensions
        if (this.xCord + this.options.width >= Element.getWidth(document.body)) {
            this.options.align = "right";
            this.xCord = this.xCord - this.options.width + 20;
            this.tooltip.down('.xarrow').setStyle({
                left: this.options.width - 24 + 'px'
            });
        }
        else {
            this.options.align = "left";
            this.tooltip.down('.xarrow').setStyle({
                left: 12 + 'px'
            });
        }



        this.tooltip.style.left = this.xCord - 7 + "px";
        this.tooltip.style.top = this.yCord + 12 + "px";
				// this.tooltip.style.top = this.yCord - this.height + "px";
    },
    _clearTimeout: function(timer){
        clearTimeout(timer);
        clearInterval(timer);
        return null;
    }
};