<!--

Initialise.addEvent(function() {

    try {
        /*
         * Initialize DIN info box
         */
        DinBox.initialize();
    }
    catch (e) {

    }
});

/**
 * @object: DinBox
 */

var DinBox = {

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

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

        this.target = dinDiv;

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

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

    show : function () {

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

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

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

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

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

    hide : function () {
        DinBox.target.hide();
        document.stopObserving("mousemove",DinBox.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 < DinBox.target.offsetWidth) {
            DinBox.target.setStyle({
                left: xPos - DinBox.target.offsetWidth + "px"
            });
        } else if (xPos < left) {
            DinBox.target.setStyle({ left: "5px" });
        } else {
            DinBox.target.setStyle({ left: xPos + 25 + "px" });
        }

        if (bottom < DinBox.target.offsetHeight) {

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