$(function() {
    var hint_bg = '/media/img/search-input-bg.gif';
    var blank_bg = '/media/img/search-input-bg-blank.gif';
    $('#search').focus(function() {
        $('#search-form-box').css({'background-image': 'url(' + blank_bg + ')'});
    });
    $('#search').blur(function() {
        if ($('#search').val() == '') {
            $('#search-form-box').css({'background-image': 'url(' + hint_bg + ')'});
        }
    });

    // this usually redundant, but catches some ie6 behavior
    $('#search').keypress(function (e) {
        $('#search-form-box').css({'background-image': 'url(' + blank_bg + ')'});        
    });
    
    if ($('#search').val() != '') {
        $('#search-form-box').css({'background-image': 'url(' + blank_bg + ')'});
    }
});

/*$(function() {
    $('label.pre').labelOver('over');
});*/

// LABEL.over { color: #ccc; position: absolute; top: 20px; left: 20px;}
// DIV.label { position: relative; float: left; margin-right: 3px; clear: left; }
/*
    <fieldset>
            <legend>Example without labelOver</legend>
            <div class="label">
            <label class="pre" for="applied">Applied</label>
            <input type="text" name="applied" value="" id="applied" />
            </div>
            <div class="label">
            <label for="search">Search</label>

            <input type="text" name="search" value="" id="search" />
            </div>
            <div>
            <input type="submit" name="submit" value="Apply label over" id="submit" />
            </div>
            <div class="clear"></div>
          </fieldset>

<script type="text/javascript">
    <!--
      $(function() {
        $('#f').submit(function() {
          $('legend', this).html('Example with labelOver');
          $('label').labelOver('over');
          return false;
        })
        $('label.pre').labelOver('over');
      })
    //-->
    </script>

*/