// Popover Component
var Popover = Class.create();
Popover.prototype = {
    initialize: function(obj)
    {
        this.container = obj;
        this.popover = $A(this.container.getElementsByClassName("popover"))[0];
        this.trigger = $A(this.container.getElementsByClassName("button"))[0];
        this.isvisible = false;
        this.initActiveArea();
        Event.observe(this.trigger, "mouseover", this.showPopover.bindAsEventListener(this), true);
    },
    initActiveArea: function()
    {
        this.activearea = new Element("div", { "class": "activearea" }).update(" ");
        this.activearea.hide();
        document.body.appendChild(this.activearea);
        Event.observe(this.activearea, "mouseover", this.hidePopover.bindAsEventListener(this), false);
    },
    showPopover: function()
    {
        new Effect.Appear(this.popover, { duration: 0.3 });
        setTimeout(function(){this.activearea.show()}.bind(this), 1000);
        this.visible = true;
    },
    hidePopover: function()
    {
        new Effect.Fade(this.popover, { duration: 0.3 });
        this.activearea.hide();
        this.visible = false;
    }
}

function initPopovers() {
    var popovers = $$(".popovercontainer");
    popovers.each(function(obj)
    {
        new Popover(obj);
    });
}

Event.observe(window, "load", initPopovers, false);