/* tooltip.js */

tooltip = {
    id: 'tooltip',
    offsetX: 10,
    offsetY: 25,
    tip: null
};

tooltip.init = function() {
    var tt = document.getElementById(this.id);
    if (!tt) {
        tt = document.createElement('div');
        tt.setAttribute('id', this.id);
        tt.style.zIndex = 999;
        tt.style.display = 'none';
        tt.style.position = 'absolute';
        tt.style.background = '#FFFFFF';
        tt.style.border = '3px solid black';
        tt.style.padding = '3px';
        document.getElementsByTagName('body')[0].appendChild(tt);
    }
    this.tip = tt;  
    document.onmousemove = function(evt) { tooltip.move(evt) };
    var is = document.getElementsByTagName('*'); //img');
    for (var i = 0; i < is.length; i++) {
        if (/\bcan-zoom\b/.test(is[i].className)) {
            is[i].onmouseover = function() { 
                tooltip.show(this.getAttribute('title'),
                   this.getAttribute('zoom'));
            };
            is[i].onmouseout = function() { tooltip.hide() };
        }    
    } 
};

tooltip.move = function(evt) {
    var x = 0; var y = 0;
    if (document.all) {
        x = (document.documentElement && document.documentElement.scrollLeft) 
            ? document.documentElement.scrollLeft : document.body.scrollLeft;
        y = (document.documentElement && document.documentElement.scrollTop) 
            ? document.documentElement.scrollTop : document.body.scrollTop;
        x += window.event.clientX;
        y += window.event.clientY;
    } else {
        x = evt.pageX;
        y = evt.pageY;
    }
    this.tip.style.left = (x + this.offsetX) + 'px';
    this.tip.style.top = (y + this.offsetY) + 'px';
};

tooltip.show = function(title,image) {
    if (this.tip) {
        this.tip.innerHTML = "<center>"
            + "<img src='" + image + "' style='max-width:400px; max-height:400px'><br>"
            + "<b>" + title + "</b></center>";
        this.tip.style.display = 'block';
    }
};

tooltip.hide = function() {
    if (this.tip) {
        this.tip.style.display = 'none';
    }
};

add_load_event(function () { tooltip.init() });

/* end */