// show a message near the originating element
function show_some_message($source_element, message, error) {
    var elem = $source_element.get(0);
    var $msg = $("<div class='inline-message " + (error ? "error" : "info") + "' style='position:absolute; left: -9999px'>" + message + "</div>");
    $msg.prependTo($('#bd'));
    // to the right of it
    var left = $source_element.offset().left + elem.offsetWidth + 10;
    // if the element is over have the page width (e.g list things), we'll left align instead
    var doc_width = document.width ? document.width : document.body.clientWidth;
    if (elem.offsetWidth > doc_width / 2) {
        left = $source_element.offset().left + 30;
    }
    var marginTop = $msg.css('margin-top');
    if (marginTop == 'auto') {
        marginTop = 0;
    } else {
        marginTop = parseInt(marginTop.replace('px',''), 10);
    }
    // make sure new ones stack on top
    var zIndex = $source_element.data('last_message_zIndex');
    if (zIndex === undefined) {
        zIndex = 0;
    }
    zIndex++;
    $source_element.data('last_message_zIndex', zIndex);
    $msg.css({
            position: 'absolute',
            left: left,
            top: $source_element.offset().top + elem.offsetHeight/2 - $msg.get(0).offsetHeight/2 - marginTop,
            zIndex: zIndex
        });
    if (!error) {
        $msg.animate({opacity: 1.0}, 4000) // http://www.learningjquery.com/2007/01/effect-delay-trick
            .fadeOut('slow', function() {
                $(this).remove();
            });
    }
}
function show_error($source_element, message) {
    return show_some_message($source_element, message, true);
}
function show_message($source_element, message, source_element) {
    return show_some_message($source_element, message, false);
}