/* 

  SearchField 
  written by Alen Grakalic, provided by Css Globe (cssglobe.com)
  please visit http://cssglobe.com/post/1202/style-your-websites-search-field-with-jscss/ for more info
  
*/

this.searchfield = function(){
  
  // CONFIG 
  
  // this is id of the search field you want to add this script to. 
  // You can use your own id just make sure that it matches the search field in your html file.
  var id = "searchfield";
  
  // Text you want to set as a default value of your search field.
  var defaultText = "Søg på hjemmesiden";  
  
  // set to either true or false
  // when set to true it will generate search suggestions list for search field based on content of variable below
  var suggestion = true;
  
  // static list of suggestion options, separated by comma
  // replace with your own
  var suggestionText = ""; 
  // END CONFIG (do not edit below this line, well unless you really, really want to change something :) )
  
  // Peace, 
  // Alen

  var field = document.getElementById(id);  
  var classInactive = "sf_inactive";
  var classActive = "sf_active";
  var classText = "sf_text";
  var classSuggestion = "sf_suggestion";
  //this.safari = ((parseInt(navigator.productSub)>=20020000)&&(navigator.vendor.indexOf("Apple Computer")!=-1));
  if(field /*&& !safari*/){
    field.value = defaultText;
    field.c = field.className;    
    field.className = field.c + " " + classInactive;
    field.onfocus = function(){
      this.className = this.c + " "  + classActive;
      this.value = (this.value == "" || this.value == defaultText) ?  "" : this.value;
    };
    field.onblur = function(){
      this.className = (this.value != "" && this.value != defaultText) ? this.c + " " +  classText : this.c + " " +  classInactive;
      this.value = (this.value != "" && this.value != defaultText) ?  this.value : defaultText;
      sf_clearList();
    };
    if (suggestion){
      
      var selectedIndex = 0;
            
      field.setAttribute("autocomplete", "off");
      var div = document.createElement("div");
      var list = document.createElement("ul");
      list.style.display = "none";
      div.className = classSuggestion;
      list.style.width = field.offsetWidth + "px";
      div.appendChild(list);
      field.parentNode.appendChild(div);  

      field.onkeypress = function(e){
        
        var key = sf_getKeyCode(e);
    
        if(key == 13){ // enter
          sf_selectList();
          selectedIndex = 0;
          return false;
        };  
      };
        
      field.onkeyup = function(e){
      
        var key = sf_getKeyCode(e);
    
        switch(key){
        case 13:
          return false;
          break;      
        case 27:  // esc
          field.value = "";
          selectedIndex = 0;
          sf_clearList();
          break;        
        case 38: // up
            sf_navList("up");
          break;
        case 40: // down
          sf_navList("down");    
          break;
        default:
          sf_startList();      
          break;
        };
      };
      
      this.sf_startList = function(){
        var arr = sf_getListItems(field.value);
        if(field.value.length > 0){
          sf_createList(arr);
        } else {
          sf_clearList();
        };  
      };
      
      this.sf_getListItems = function(value){
        var arr = new Array();
        var src = suggestionText;
        var src = src.replace(/, /g, ",");
        var arrSrc = src.split(",");
        for(i=0;i<arrSrc.length;i++){
          if(arrSrc[i].substring(0,value.length).toLowerCase() == value.toLowerCase()){
            arr.push(arrSrc[i]);
          };
        };        
        return arr;
      };
      
      this.sf_createList = function(arr){        
        sf_resetList();      
        if(arr.length > 0) {
          for(i=0;i<arr.length;i++){        
            li = document.createElement("li");
            a = document.createElement("a");
            a.href = "javascript:void(0);";
            a.i = i+1;
            a.innerHTML = arr[i];
            li.i = i+1;
            li.onmouseover = function(){
              sf_navListItem(this.i);
            };
            a.onmousedown = function(){
              selectedIndex = this.i;
              sf_selectList(this.i);    
              return false;
            };          
            li.appendChild(a);
            list.setAttribute("tabindex", "-1");
            list.appendChild(li);  
          };  
          list.style.display = "block";        
        } else {
          sf_clearList();
        };
      };  
      
      this.sf_resetList = function(){
        var li = list.getElementsByTagName("li");
        var len = li.length;
        for(var i=0;i<len;i++){
          list.removeChild(li[0]);
        };
      };
      
      this.sf_navList = function(dir){      
        selectedIndex += (dir == "down") ? 1 : -1;
        li = list.getElementsByTagName("li");
        if (selectedIndex < 1) selectedIndex =  li.length;
        if (selectedIndex > li.length) selectedIndex =  1;
        sf_navListItem(selectedIndex);
      };
      
      this.sf_navListItem = function(index){  
        selectedIndex = index;
        li = list.getElementsByTagName("li");
        for(var i=0;i<li.length;i++){
          li[i].className = (i==(selectedIndex-1)) ? "selected" : "";
        };
      };
      
      this.sf_selectList = function(){
        li = list.getElementsByTagName("li");  
        a = li[selectedIndex-1].getElementsByTagName("a")[0];
        field.value = a.innerHTML;
        sf_clearList();
      };      
      
    };
  };
  
  this.sf_clearList = function(){
    if(list){
      list.style.display = "none";
      selectedIndex = 0;
    };
  };    
  this.sf_getKeyCode = function(e){
    var code;
    if (!e) var e = window.event;
    if (e.keyCode) code = e.keyCode;
    return code;
  };
  
};

// script initiates on page load. 

this.addEvent = function(obj,type,fn){
  if(obj.attachEvent){
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn](window.event );}
    obj.attachEvent('on'+type, obj[type+fn]);
  } else {
    obj.addEventListener(type,fn,false);
  };
};
addEvent(window,"load",searchfield);