FastInit.addOnLoad(function() {
  $$('.magic').each(magicComplete);
  
//  var search = $('ctl00_txtSearch');
//  var search_text = 'Search for projects';
//  
//  search.value = search_text;
//  
//  search.observe('focus', function(event) {
//    if ($F(search) != search_text) return;
//    search.removeClassName('inactive').clear();
//  });
//  
//  search.observe('blur', function() {
//    if (!$F(search).empty()) return;
//    search.addClassName('inactive');
//    search.value = search_text;
//  });
});

function toggleFilter() {
  var elem = $('filter');
  if (!elem) { return; }

  Effect.toggle('filters', 'blind', { duration: 0.5 });
  elem.toggleClassName('open');
}
  
function magicComplete(orig_input) {
  var orig_input = $(orig_input);
  var options    = $A(orig_input.options).pluck('innerHTML');

  new Insertion.After(orig_input, new Template('\
    <div class="select_complete" id="d#{0}">\
      <input type="text" name="#{1}" />\
      <img src="./img/dropdown-arrows.gif" />\
      <ul class="drop_down" style="display:none"></ul>\
      <div class="auto_complete" style="display:none"></div>\
    </div>').evaluate([ orig_input.id, orig_input.name ]));
    
  orig_input.hide().disable();
  orig_input.name = 'old' + orig_input.name;
  
  var container    = $('d' + orig_input.id);
  var auto_input   = container.down('input', 0);    
  var default_text = orig_input.readAttribute('title') || 'Select or begin typing';
  
  auto_input.value = default_text;
  auto_input.addClassName('inactive');  

  // Fill the dropdown with the list of options  
  var dropdown = container.down('ul', 0);
  dropdown.update(options.map(function(i) {
    return '<li>' + i + '</li>';
  }).join(''));
  
  // Watch the onfocus event
  auto_input.observe('focus', function() {
    if ($F(auto_input) == default_text) {
      auto_input.clear().removeClassName('inactive');
    }
  });
  
  // Watch the onblur event
  auto_input.observe('blur', function() {
    if ($F(auto_input).empty()) {
      auto_input.addClassName('inactive');
      auto_input.value = default_text;
    }
  });
  
  // Clicking the select arrow image should show us our options.
  container.down('img', 0).observe('click', function() {
    if (dropdown.visible()) {
      auto_input.addClassName('inactive');
      auto_input.value = default_text;
      dropdown.hide();
    } else {
      dropdown.show();
      auto_input.clear();
    }
  });

  // Listen for the Escape key event so that we can cancel the
  // dropdown visibility.
  Event.observe(window, 'keypress', function(event) {
    if (dropdown.visible() && (event.keyCode == Event.KEY_ESC)) {
      Event.stop(event);
      dropdown.toggle();
    }
  });
  
  // If we begin typing in the text field while the dropdown is open,
  // then we should close the dropdown so the autocomplete is visible.
  auto_input.observe('keypress', function() {
    if (dropdown.visible()) {
      dropdown.toggle();      
    }
  });

  // Listen for the onclick event to select options from the dropdown.
  container.getElementsBySelector('li').each(function(e) {    
    e.observe('click', function() {
      auto_input.value = e.innerHTML;
      auto_input.removeClassName('inactive');    
      dropdown.toggle();
    });
 
    e.observe('mouseover', function() { e.addClassName('select-hover'); });    
    e.observe('mouseout',  function() { e.removeClassName('select-hover'); });  
  });
  
  // Initialize the scriptaculous autocompleter.
  var project_list = container.down('.auto_complete', 0);
  new Autocompleter.Local(auto_input, project_list, options, {
    minChars: 2,
    choices: 100,
    fullSearch: true,
    hoverClassName: 'select-hover',
    afterUpdateElement: function(text, li) {
      //getSelectionId
      //alert (li.id);
    }
  });
}