function reload_image() {
    var x = $F('x-constraint') == '?' ? 0 : $F('x');
    var y = $F('y-constraint') == '?' ? 0 : $F('y');
    var z = $F('z-constraint') == '?' ? 0 : $F('z');
    $('searchpreview').src = '/renderprim.php?large&x=' + x + '&y=' + y + '&z=' + z;
}

function update_constraint(element) {
    letter = element.id[0];
    if(element.getValue() == '?') {
        $(letter+'-values').hide();
    } else {
        $(letter+'-values').show();
    }
    reload_image();
}

function constraint_changed() {
    update_constraint(this);
}

document.observe("dom:loaded", function() {
    $('x').focus();
    $('x').observe('change', reload_image);
    $('y').observe('change', reload_image);
    $('z').observe('change', reload_image);
    $('x-constraint').observe('change', constraint_changed);
    $('y-constraint').observe('change', constraint_changed);
    $('z-constraint').observe('change', constraint_changed);
    // Do everything
    update_constraint($('x-constraint'));
    update_constraint($('y-constraint'));
    update_constraint($('z-constraint'));
});