$(function(){
  $('form#bus-search').labelSwap();

  var container = document.createElement('div');
  container.id = 'listContain';
  container.innerHTML = '<div class="arrow"><div>&nbsp;</div></div><p>Choose your school from the list:</p>';
  var ul = document.createElement('ul');
  ul.id = 'schoolList';
  // schoolMVC.schools
  for(var i = 0; i < schoolJSON.length; i++) {
    var school = schoolJSON[i];
    var li = document.createElement('li');
    li.id = 'school-'+school.schoolID;
    li.innerHTML = school.schoolTitle;
    ul.appendChild(li);
  }
  container.appendChild(ul);
  var frm = document.getElementById('schoolContainer');
  frm.appendChild(container);

  var input = $('input[name=school]');
  var inputID = $('input[name=schoolID]');
  input.liveUpdate($('ul#schoolList'));
  $('ul#schoolList li').click(function(){
    var schoolID = this.id.split('school-');
    var content = $(this).html();
    input.val(content);
    inputID.val(schoolID[1]);
    doSwap(input);
  });
  $(input).keyup(function(){
    setTimeout(function(){
      var list = $('ul#schoolList li:visible');
      if(list.length == 1) {
        item = list[0];
        itemID = item.id.split('school-');
        var schoolID = itemID[1];
        var content = item.innerHTML;
        $(container).hide();
        input.val(content);
        inputID.val(schoolID);
        doSwap(input);
      }
    },3000);
    
  });
  $('#bus-search').submit(function() {
    if(inputID.val() == '') {
      return false;
    }
  });
  $(container).hide();
  input.keyup(function() {
    var length = $(this).val().length;
    if(length >= 2) {
      $(container).show();
    }
  });
  $(ul).children().click(function() {
    $(container).hide();
  });
//  $(input).blur(function() {
//    setTimeout(100,function(){
//			$(container).hide();
//		})
//  });
});

var doSwap = function(elem){
  $this = $(elem);
  if($this.val() != '') { // If the field is not empty...
    $this.addClass('no-label'); // Don't show the label
  } else { // Otherwise...
    $this.removeClass('no-label'); // Display it.
  }
}

$.fn.labelSwap = function() {
  var fields = this.find('input'); // Grab all inputs from context into an array
  for(var i = 0; i < fields.length; i++) {
    elem = $(fields[i]);
    elem.addClass('label-swap'); // Init CSS
    if(elem.val() != '')  elem.addClass('no-label');  // If the input is not empty, don't show the label
    elem.blur(function(){
      doSwap(this);
    });
    elem.change(function(){
      doSwap(this);
    });
  }
}