
function fancy_search_box()
 {
 var input=document.getElementById("searchtext");
 var search_default="Search";

 // This one is easy, apple added thier style into safari
 if(navigator.userAgent.match(/AppleWebKit/i))
  {
  // Set the entry search style
  input.setAttribute("type", "search");
  
  if(!input.getAttribute("results"))
   input.setAttribute("results", 0)
  
  input.setAttribute("placeholder", search_default);
  }
 else
  {
  input.setAttribute("autocomplete", "off");
  
  // Creat a new new_input field
  var new_input=document.createElement("input");
  
  // Replace the input with the new_input field
  input.parentNode.replaceChild(new_input, input);
  
  // Create a left span
  var lspan=document.createElement("span");
  lspan.className="left";
  
  // Creata a right span
  var rspan=document.createElement("span");
  rspan.className="right";
  
  // Cretae a reset div
  var reset=document.createElement("div");
  reset.className="reset";
  
  // Create a wrapper div
  var wrapper=document.createElement("div");
  wrapper.className="search-wrapper";
  
  // Search field is empty, show the default entry text 
  if(input.value==search_default || input.value.length==0)
   {
   input.value=search_default;
   wrapper.className += " blurred empty";
   }
  
  // Add the new elements
  wrapper.appendChild(lspan);
  wrapper.appendChild(input);
  wrapper.appendChild(rspan);
  wrapper.appendChild(reset);
  
  input.onfocus=function()
   {
   // Remove defualt text when you click in the box
   if(input.value==search_default && wrapper.className.indexOf("blurred")>-1)
    input.value="";
   
   // Remove blurred style
   wrapper.className=wrapper.className.replace("blurred", "")
   };
  
  input.onblur=function()
   {
   // Set the default text if its empty
   if(input.value == "")
    {
    wrapper.className+=" empty";
    input.value=search_default;
    }
   
   // Set the blurred style
   wrapper.className+=" blurred";
   };
  
  
  input.onkeydown=function(theEvent)
   {
   if(!theEvent)
    theEvent=event;
   
   // If the user hit enter, check the field has some text in it
   if(theEvent && (theEvent.type == "keydown" && theEvent.keyCode == 13 && !theEvent.altKey))
    {
    var element=null;
    
    if(theEvent.target)
     element = theEvent.target;
    else if(theEvent.srcElement)
     element = theEvent.srcElement;
    
    if(element.value.length === 0)
     return false;

    return;
    }
   
   // If we have some text, remove the empty class
   if(input.value.length >= 0)
    wrapper.className=wrapper.className.replace("empty", "");
   
   // If its a key press, and its escape, reset 
   if(theEvent && (theEvent.type == "keydown" && theEvent.keyCode == 27))
    reset_search();
   };
   

  function reset_search()
   {
   input.blur();
   input.value="";
   wrapper.className += " empty";
   input.focus();
   }
  
  
  reset.onmousedown = function(event) {reset_search()};
  new_input.parentNode.replaceChild(wrapper,new_input);
  }
 
 }

// Make the fancy_search_box function run on load
if(typeof window.onload != "function")
 window.onload = function() { fancy_search_box(); };
else
 {
 var existing = window.onload;
 window.onload = function() { existing(); fancy_search_box(); };
 }




