<!--

Initialise.addEvent(function() {

    try {
        /*
         * Initialize RAL info box
         */
        RalBox.initialize();
    }
    catch (e) {

    }
});

/**
 * @object: RalBox
 */

var RalBox = {

    id:        null,
    target:    null,
    container: null,
    initialize: function() {
    
        var ralDiv = new Element("div", {
            "id" : "ralTarget",
            "class" : "ralbox-preview",
            "style" : "background:#FFFFFF;width:162px;text-align:left;border:1px solid #CCCCCC; display: none; position:absolute; top:0px: left:0px;"
        });

        $("page").insert(ralDiv);

        this.target = ralDiv;

        links = $$("span.article-ral-link");

        if (links && links.length > 0) {
            links.each( function (item) {
                item.observe("mouseover",RalBox.show,false);
                item.observe("mouseout",RalBox.hide,false);
            });
        }
    },

    show : function () {

        if (RalBox.id != this.id) {

            RalBox.target = $("ralTarget");
            // Move old content into it's container.
            if ( ! RalBox.target.empty() ) {
                RalBox.container.update(
                    RalBox.container.innerHTML
                );
            }

            // "this" is our image which triggerd the event.

            RalBox.container = $("ralInfoBox" + this.id);
            // Here we take care for the preview section.
            RalBox.id = this.id;
            // Set the width of the preview container
            RalBox.target.setStyle({
                width: RalBox.container.width + 8 + "px"
            });
            RalBox.target.update(
                RalBox.container.innerHTML
            );
        }

        document.observe("mousemove", RalBox.position,false);
        RalBox.target.show();
    },

    hide : function () {
        RalBox.target.hide();
        document.stopObserving("mousemove",RalBox.position,false);
    },

    position : function (event) {

        var right = window.innerWidth-20-event.clientX-25;
        var left = -1000;
        var bottom = window.innerHeight - 20 - event.clientY - 220;
        var xPos = event.pointerX();
        var yPos = event.pointerY();

        if (right < RalBox.target.offsetWidth) {
            RalBox.target.setStyle({
                left: xPos - RalBox.target.offsetWidth + "px"
            });
        } else if (xPos < left) {
            RalBox.target.setStyle({ left: "5px" });
        } else {
            RalBox.target.setStyle({ left: xPos + 25 + "px" });
        }

        if (bottom < RalBox.target.offsetHeight) {

            RalBox.target.setStyle({
                top : yPos - RalBox.target.offsetHeight - 10 + "px"
            });
        } else {
            RalBox.target.setStyle({ top : yPos + 10 + "px" });
        }
    }
};
-->