$(document).ready(function () {
  var top = $('#column01').offset().top;
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      $('#column01').addClass('fixed');
    } else {
      // otherwise remove it
      $('#column01').removeClass('fixed');
    }
  });
  
  // Set the variables
  var $watValue;
  var $waarValue;
  
  // If the value is bla then clear it otherwise fill it with the saved value that was recorded
  // when the input last lost its focus.
  $("#goldenpages input#wat").focus(function() {
    var $this = $(this);
    if($this.val() == "What are you looking for?") {
      $(this).val("");
    } else {
      $this.val($watValue);
    }
  });
  // First get the value and record it in $watValue
  // If there's no text fill the input with bla
  // If there is text fill it with $watValue i.e. the same text 
  $("#goldenpages input#wat").blur(function() {
    var $this = $(this);
    $watValue = $this.val();
    if($this.val() == "") {
      $this.val("What are you looking for?");
    } else {
      $this.val($watValue);
    } 
  });

  // Same principle as above.
  $("#goldenpages input#waar").focus(function() {
    var $this = $(this);
    if($this.val() == "Where?") {
      $(this).val("");
    } else {
      $this.val($waarValue);
    }
  });
  // Same principle as above.
  $("#goldenpages input#waar").blur(function() {
    var $this = $(this);
    $waarValue = $this.val();
    if($this.val() == "") {
      $this.val("Where?");
    } else {
      $this.val($waarValue);
    }
  });
  
});