var ExtraTip = new Class({

    options: {
        onShow: function(tip){
            tip.setStyle('visibility', 'visible');
        },
        onHide: function(tip){
            tip.setStyle('visibility', 'hidden');
        },
        showDelay: 100,
        hideDelay: 100,
        offsets: {'x': -255, 'y': -75}
    },

    initialize: function(tipel, options){
        this.setOptions(options);
        this.toolTip = tipel.getElement('.tipdetails');
        this.build( tipel );
    },

    build: function(el){
        
        el.addEvent('mouseenter', function(event){
            this.start(el);
            this.locate(event);
        }.bind(this));
        
        el.addEvent('mousemove', this.locate.bindWithEvent(this));
        var end = this.end.bind(this);
        el.addEvent('mouseleave', end);
        el.addEvent('trash', end);
    },

    start: function(el){
        
        this.toolTip.setStyle('display','block');
        $clear(this.timer);
        this.timer = this.show.delay(this.options.showDelay, this);
    },

    end: function(event){

        this.toolTip.setStyle('display','none');
        $clear(this.timer);
        this.timer = this.hide.delay(this.options.hideDelay, this);
    },

    position: function(element){
        var pos = element.getPosition();
        this.toolTip.setStyles({
            'left': pos.x + this.options.offsets.x,
            'top': pos.y + this.options.offsets.y
        });
    },

    locate: function(event){
        var win    = {'x': window.getWidth(), 'y': window.getHeight()};
        var scroll = {'x': window.getScrollLeft(), 'y': window.getScrollTop()};
        var tip    = {'x': this.toolTip.offsetWidth, 'y': this.toolTip.offsetHeight};
        var prop   = {'x': 'left', 'y': 'top'};

        for (var z in prop){
            var pos = event.page[z] + this.options.offsets[z];
            // if ((pos + tip[z] - scroll[z]) > win[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
            this.toolTip.setStyle(prop[z], pos);
        };
    },

    show: function(){
        if (this.options.timeout) this.timer = this.hide.delay(this.options.timeout, this);
        this.fireEvent('onShow', [this.toolTip]);
    },

    hide: function(){
        this.fireEvent('onHide', [this.toolTip]);
    }

});

ExtraTip.implement(new Events, new Options);

window.addEvent('domready', function() {

    $$('.tip').each(function(tip) { 
    
        new ExtraTip(tip); 
    
    });
});