function text_button_mouseover_image(hover_img_url) {
    //preload
    im = new Image();
    if (hover_img_url == null) {
        hover_img_url = '/templates/pgs-soar/images/button_hover.jpg';
    }
    im.src = hover_img_url;
    return im;
}

function text_button_mouseover_by_id(id, hover_img_url) {
    im = text_button_mouseover_image(hover_img_url);
    text_button_mouseover_setup_one(document.getElementById(id), im.src);
}

function text_button_mouseover_setup(max_num, hover_img_url) {
    im = text_button_mouseover_image(hover_img_url);
    // getElementsByClassName function, or jquery selector function would be more elegant, but I don't want to bother including a framework for just this file
    for (i = 1; i <= max_num; i++) {
        text_button_mouseover_setup_one(document.getElementById('text_button_'+i), im.src);
    }
}

function text_button_mouseover_setup_one(element, url) {
    orig_image_url = element.style.backgroundImage;
    element.onmouseover = function() {
        this.style.backgroundImage='url('+url+')';
    }
    element.onmouseout = function() {
        this.style.backgroundImage=orig_image_url;
    }
}