var ToolTip = Class.create();

//---------------------------------------------------------------------------------------------------//
ToolTip.prototype = {
    initialize: function(
            element) {

        this.element = $(element);

        this.content = arguments[1] || "";
        this.options = Object.extend(
        {
            dialog : "dialog",
            className : "tooltip",
            offsetX:20,
            offsetY:20,
            autoHide : true
        }, arguments[2] || {});

        this.ajaxUrl = arguments[3] || "";

        this.outer = new Element('div',
        {
            style:'position:absolute; z-index:200;display:none;padding:0;margin:0;border:'

        });
        this.outer.className = this.options.className;
        document.body.appendChild(this.outer);

        //Fix: put iframe under tip
        this.outerIframe = new Element('iframe',
        {
            style:'position:absolute; z-index:190;display:none;padding:0;margin:0;background:white;border:0',
            frameborder: '0',
            ulr: "/"
        });
        document.body.appendChild(this.outer);
        document.body.appendChild(this.outerIframe);

        this.setup();

        //for debug
        this.dialog = $(this.options.dialog);
    },
    setup: function() {
        if (this.ajaxUrl != "") {
            (this.element).observe('mouseover', this.startTip.bindAsEventListener(this));
        } else {
            (this.element).observe('mouseover', this.startTip.bindAsEventListener(this));
        }
        (this.element).observe('mousemove', this.movingTip.bindAsEventListener(this));
        (this.element).observe('mouseout', this.stopTip.bindAsEventListener(this));
    },

    startTip: function(event) {
        this.setTip(event);
        if (this.ajaxUrl != "") {
            new Ajax.Request(this.ajaxUrl, {
                onSuccess: function(transport) {
                    this.content = transport.responseText;
                    this.setTip()
                }.bindAsEventListener(this)
            });
        } else {
            this.setTip(event);
        }
    },
    movingTip: function(event) {
        this.drawTip(event);
    },
    stopTip: function(event) {
        $(this.outer).hide();
        $(this.outerIframe).hide();
    },
    setTip : function(event) {
        $(this.outer).update(this.content);
        this.tipWidth = $(this.outer).getWidth();
        this.tipHeight = $(this.outer).getHeight();

        $(this.outer).setStyle({width: this.tipWidth + "px"});
        $(this.outerIframe).setStyle({width: this.tipWidth + "px", height: this.tipHeight + "px"});

        this.drawTip(event);

    },
    drawTip: function(event) {
        this.getPosition(event);
        $(this.outerIframe).show();
        $(this.outer).show();
    },
    getPosition: function(event) {
        //cursor position
        var X = Event.pointerX(event) + this.options.offsetX;
        var Y = Event.pointerY(event) + this.options.offsetY;

        //simple access for outer preview size
        var elemSize = $(this.outer).getDimensions();

        //true visible size of document
        var docY = document.viewport.getScrollOffsets().top + document.viewport.getHeight();
        var docX = document.viewport.getScrollOffsets().left + document.viewport.getWidth();


        if ((X + elemSize.width) > docX) {
            X -= (elemSize.width + 2 * this.options.offsetX)
        }
        if ((Y + elemSize.height) > docY) {
            Y = docY - elemSize.height
        }


        X += "px"
        Y += "px"

        this.options.X = X;
        this.options.Y = Y;

        $(this.outerIframe).setStyle({top:Y, left:X})
        $(this.outer).setStyle({top:Y, left:X})
    },


    debug : function(s) {
        $(this.dialog).update(s)
    }   ,

    debugProperties : function() {
        $(this.dialog).update("DEBUG: X = " + this.options.X + " Y = " + this.options.Y +
                              " Height = " + this.outer.getHeight() + " Width = " + this.outer.getWidth())
    }
}