function showInfo(id) {
    var el = $('details' + id);
    if (el) {
        createMask(id);
        var size = window.getSize();
        el.setStyle('left', (size.x - 871)/2);
        el.setStyle('top', window.getScroll().y + 100);
        el.setStyle('display', 'block');
    }
}
function hideInfo(id) {
    hideMask();
    var el = $('details' + id);
    if (el) el.setStyle('display', 'none');
}
function createMask(id) {
    var size = window.getScrollSize();
    var el = new Element('div', { 'id': 'mask', 'styles': { 'position': 'absolute', 'z-index': '100', 'left': '0px', 'top': '0px', 'width': size.x + 'px', 'height': size.y + 'px', 'background': '#ccc', 'opacity': '0.5' }}).inject($(document.body));
    el.addEvent('click', function() {
        hideInfo(id);
    });
}
function hideMask() {
    var el = $('mask');
    if (el) el.destroy();
}