/*
 * Each time we swap the map for the form or otherwise, we want to remove the click instead of
 * applying it double :)
 */
var button = {
  removeClick: function() {
    $('#contactButton').unbind('click');
  }
}

/*
 * The map, showing our office.
 * Once the map has loaded, the overlaying image fades out, so it looks like the map is loaded
 * instantly, which it obviously is not.
 */
var map = {

  initialize: function() {
    var gMap = new google.maps.Map2(document.getElementById("map"));
    gMap.addControl(new GMapTypeControl());
    gMap.setCenter(new google.maps.LatLng(52.3854034, 4.9183698), 15);
    marker = map.createMarker( new GLatLng(52.3849,4.9214) ); 
    gMap.addOverlay(marker);
    $('#mapImg').hide();
  },

  createMarker: function(point){
    var marker = new GMarker(point);
    return marker;
  },

  bindClick: function() {
    button.removeClick();
    $('#contactButton').bind('click',function() {
      $(this).removeClass('contactForm');
      map.showMap();
      contact.bindClick();
      return false;
    });
  },

  showMap: function() {
    $('#contactForm').fadeOut();
    $('#map').fadeIn();
  }
}

/*
 * Show the contact form
 */
var contact = {

  bindClick: function() {
    button.removeClick();
    $('#contactButton').bind('click',function() {
      $(this).addClass('contactForm');
      contact.showForm();
      map.bindClick();
      return false;
    });
  },

  showForm: function() {
    $('#map').fadeOut();
    $('#contactForm').fadeIn();
  },

  button: function() {

    $('#submit').bind('click',function() {

      $('#contactFormulier').submit();

      return false;

    });

  }

}

/*
 * ...
 */
$(document).ready(function() {

  contact.bindClick();

  map.initialize();

  contact.button();

});