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,
            delay:0,
            autoHide : true
        }, arguments[2] || {});

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

        this.outer = new Element('div',
        {
            style:'position:absolute; z-index:2000;display:none;padding:0;margin:0'
        });
        document.body.appendChild(this.outer);

        //Fix: put iframe under tip

        this.outerIframe = new Element('iframe',
        {
            style:'position:absolute; ' +
                  'z-index:1000;' +
                  'display:none;' +
                  'padding:0;margin:0;' +
                  'background:white;' +
                  'left:0px;' +
                  'top:0px;' +
                  'border:0',
            src: "/flash/blank.html"
        });

        document.body.appendChild(this.outerIframe);


        this.setup();

        //for debug
        this.dialog = $(this.options.dialog) || this.createDebug();
    },

    createDebug: function() {
        this.status = new Element('div',
        {
            style:'position:absolute; z-index:1290;padding:0;margin:0;background:orange;border:0; ' +
                  'color:#fff; font-weight:bold;top:0;'
        });
        document.body.appendChild(this.status);
        this.status.update("")
        return this.status;
    } ,

    putDebug: function(s, erase) {
        if (!erase)   s = $(this.status).innerHTML + s
        $(this.status).update(s)
    },

    setup: function() {
        (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)
            });
        }
    },
    movingTip: function(event) {
        this.drawTip(event);
    },
    stopTip: function() {
        $(this.outer).hide();
        $(this.outerIframe).hide();
        this.onOutAction();
    },
    setTip : function(event) {
        var s = "<div class=\"" + this.options.className + "\">" + this.content + "</div>"
        //var s = this.content
        $(this.outer).update(s);
        this.drawTip(event);
        this.onStartAction();

    },
    drawTip: function(event) {
        this.getPosition(event);
        $(this.outer).show();
        $(this.outerIframe).show();
        this.onMoveAction();
    },
    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 = {width: 0, height: 0};
        try {
             elemSize = $(this.outer).firstDescendant().getDimensions();
        } catch(e) { 
            elemSize = {width: 0, height: 0};
        }

        //true visible size of document
        var docY = document.viewport.getScrollOffsets().top;
        if (Prototype.Browser.Opera) {
            docY += window.innerHeight
        } else {
            docY += 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})


        this.tipWidth = elemSize.width
        this.tipHeight = elemSize.height

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

    onStartAction: function() {

    }   ,
    onMoveAction: function() {

    }   ,
    onOutAction: function() {

    }   ,


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