var learnMoreText = null;

function learnMore (index) {

    var url = "/opencms/opencms/system/modules/com.gto.cms/recipe/elements/learnMore.jsp?index=" + index;

    new Ajax.Request (url, {
        'method' : 'get',
        'onSuccess' : function (transport) {
            learnMoreText = transport.responseText;
            displayLearnMore (index);
        }
    });
}

function displayLearnMore (index)
{
    var tr = $("categoryDiv").getElementsByTagName ("table") [index].getElementsByTagName ("tr") [0];

    var scroll = Element.cumulativeScrollOffset (tr).top;
    var viewTop = Element.viewportOffset (tr).top;
    var viewLeft = Element.viewportOffset (tr).left;

    var top = parseInt (scroll + viewTop);

    var left = parseInt (viewLeft + 1);

    var img = new Element ("img", {
        'src' : '/opencms/opencms/system/modules/com.gto.cms/recipe/images/close.gif',
        'style' : 'float: right; width: 25px; height: 25px;'
    });

    Event.observe (img, "click", destroyHover);

    var div = new Element ("div", {
        'style' : 'font-size: 0.8em; position: absolute; top: ' + top + 'px; left: ' + left + 'px; width: 394px; z-index: 100; border: solid 1px #7dc6e6; background-color: #eeeeff; text-align: justify; padding: 5px;'
    })

    var content = new Element ("div", {});

    div.insert(img);
    content.insert (learnMoreText);
    div.insert (content);


    var body = document.getElementsByTagName ("body") [0];

    Element.extend (body);

    body.insert (div);
}

function destroyHover (e)
{
    e.target.parentNode.parentNode.removeChild (e.target.parentNode);
}