// Balloon class 
Balloon = Class.create();
Balloon.prototype = {
    initialize: function(h) {
        // h: options hash:        
        // disp: ballon disposition (tl, tr, bl, br)
        // point: elem that balloon physically points to 
        // html: html content of the balloon 
        // responders: 2-element array: [0] array of node references that the
        //             balloon will observe; [1] name of observing event 
        this.source = h.point;
        this.disp = h.disp;
        this.responders = (typeof(h.responders) != "undefined") ?  h.responders : false;
        if (this.register()) {  // if balloon not already registered
            this.draw();
            this.setEvents();
        }
        this.setContent(h.html);
        this.position();
        this.show();
    },
    show: function() {
        var i = Balloon.balloons.each(function(b) {
                return b.hide()
        });
        this.balloon.style.visibility = 'visible';
        this.visible = 1;
    },
    hide: function() {
        this.balloon.style.visibility = 'hidden';
        //new Effect.Fade(this.balloon);
        this.visible = 0;
    },
    register: function() {
        // adds the balloon to Balloon.balloons array and returns true if source
        // does not already have a balloon associated with it. otherwise,
        // it sets current object to that existing balloon and returns false
        var th = this;
        var i = Balloon.balloons.find(function(b) {
                return b.source == th.source
        });
        if (i) { 
            this.balloon = i.balloon; 
            return false; 
        }
        Balloon.balloons.push(this);
        return true;
    },
    position: function() {
        this.bWidth = Element.getWidth(this.balloon);
        this.bHeight = Element.getHeight(this.balloon);
        // source position relative to viewport 
        var a = Position.cumulativeOffset(this.source);
        // balloon's parent position relative to viewport 
        var b = Position.cumulativeOffset($('content'));
        // source's position relative to balloon's parent
        var sp = [ a[0] - b[0], a[1] - b[1] ];
        var sd = Element.getDimensions(this.source);
        var l, t;
        this.balloon.style.position = 'absolute';
        if (this.disp == 'br') {
            l = sp[0] + sd.width;
            t = sp[1] + sd.height;
        }
        if (this.disp == 'bl') {
            l = sp[0] - this.bWidth;
            t = sp[1] + sd.height;
        }
        if (this.disp == 'tr') {
            l = sp[0] + sd.width;
            t = sp[1] - this.bHeight;
        }
        if (this.disp == 'tl') {
            l = sp[0] - this.bWidth;
            t = sp[1] - this.bHeight;
        }
        this.balloon.style.left = l + 'px';
        this.balloon.style.top = t + 'px';
    },
    draw: function() {
        this.balloon = document.createElement("div");
        this.balloon.className = 'balloon';
        this.balloon.t = document.createElement("div");
        this.balloon.m = document.createElement("div");
        this.balloon.b = document.createElement("div");
        this.balloon.t.style.width = '150px';
        this.balloon.t.style.height = '41px';
        this.balloon.m.style.width = '150px';
        this.balloon.b.style.width = '150px'; 
        this.balloon.b.style.height = '41px';
        this.balloon.m.style.background = "url('../" + Balloon.images.middle + "') repeat-y";
        this.setDisposition(this.disp);
        this.balloon.appendChild(this.balloon.t);
        this.balloon.appendChild(this.balloon.m);
        this.balloon.appendChild(this.balloon.b);
        this.balloon.closeIcon = document.createElement("img");
        this.balloon.closeIcon.src = 'images/balloon_close.gif';
        this.balloon.m.appendChild(this.balloon.closeIcon);
        this.balloon.content = document.createElement("div");
        this.balloon.content.className = 'content'; 
        this.balloon.m.appendChild(this.balloon.content);
        this.hide();
        $('content').appendChild(this.balloon); 
        this.balloon.closeIcon.style.marginRight = '10px';
        this.balloon.closeIcon.style.position = 'absolute';
        this.balloon.closeIcon.style.top = '35px';
        this.balloon.closeIcon.style.right = '-3px';
        // IE6 PNG fix
        this.balloon.t.style.behavior = 'url(\'css/iepngfix.htc\')';
        this.balloon.b.style.behavior = 'url(\'css/iepngfix.htc\')';
    },
    setDisposition: function(disp) {
        if (disp == 'br') { 
            this.balloon.t.style.background = "url('../" + Balloon.images.tl + "') no-repeat";
            this.balloon.b.style.background = "url('../" + Balloon.images.bottom + "') no-repeat";
        }
        else if (disp == 'bl') { 
            this.balloon.t.style.background = "url('../" + Balloon.images.tr + "') no-repeat";
            this.balloon.b.style.background = "url('../" + Balloon.images.bottom + "') no-repeat";
        }
        else if (disp == 'tr') { 
            this.balloon.t.style.background = "url('../" + Balloon.images.top + "') no-repeat";
            this.balloon.b.style.background = "url('../" + Balloon.images.bl + "') no-repeat";
        }
        else if (disp == 'tl') { 
            this.balloon.t.style.background = "url('../" + Balloon.images.top + "') no-repeat";
            this.balloon.b.style.background = "url('../" + Balloon.images.br + "') no-repeat";
        }
        if (disp != this.disp) this.disp = disp;
        this.position();
    },
    setEvents: function() {
        Event.observe(
            this.balloon.closeIcon, "click", 
            this.hide.bindAsEventListener(this), false
        );
        if (this.responders) {
            var th = this;
            this.responders[0].each(function(r) {
                Event.observe(
                    r, th.responders[1], 
                    th.hide.bindAsEventListener(th), false
                );
            });
        }
    },
    setContent: function(html) {
        this.balloon.content.innerHTML = html;
        this.position();
    }
}
Object.extend(Balloon, {
    images: {
        tr: site.getImages() + "balloon_tr.png",
        tl: site.getImages() + "balloon_tl.png",
        bl: site.getImages() + "balloon_bl.png",
        br: site.getImages() + "balloon_br.png",
        top: site.getImages() + "balloon_t.png",
        middle: site.getImages() + "balloon_m.png",
        bottom: site.getImages() + "balloon_b.png"
    },
    balloons: []
});