Ayuda con este javascript Urge!

[Tecktonikrazy]

Tengo el siguiente codigo:

Código HTML:

<input id="searchBox" value="Buscar" onfocus="searchBox('On', '')" onblur="searchBox('Off', 'Buscar')">
<input type="button" value="Buscar" onclick="searchId()"> 

Css:

Código CSS:

#searchBox {
position: absolute;
top: 12px;
right: 12;
width: 300px;
height: 30px;
font-family: verdana;
}
 
.searchBoxOn {
border: 1px solid #e3552b;
color: #000000;
}
 
.searchBoxOff {
border: 1px solid #919191;
color: #666666;
}
 

y JavaScript:

Código Javascript:

function searchBox(active, txt) {
var searchKey = document.getElementById('searchBox').value;
document.getElementById('searchBox').className = 'searchBox' + active;
document.getElementById('searchBox').value = txt;
}
 
function searchId(){
 
var searchKey = document.getElementById('searchBox').value;
 
window.location.href = 'http://mipagina.com#' + searchKey;
}
 

Ahora les explico:

Al dar click en el textbox, deve cambiar el className de 'searchBoxOff' a 'searchBoxOn' y deve cambiar el value de 'Buscar' a ' ', o sea nada, y al desenfocar el cursor deve ocurrir lo contrario, eso me funciona bien; la segunda funcion del script es para que al dar click en el boton de 'Buscar' la pagina se valla a 'mipagina.com#lo que se busco', pero resulta que al darle click al boton, se esta desenfocando el cursor del textbox, por lo tanto su value cambia a 'Buscar' y por lo tanto la pagina siempre se va a 'mipagina.com#Buscar' .

Como hago para que si el value es cualquier otro que no sea ' ' (o sea nada), este no se modifique al desenfocar el mouse?

(Con desenfocar me refiero a 'onBlur="funcion()"')