/*
 * 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 gMap = null;
var map = {

  initialize: function( place ) {
    if( gMap == null )
    {
        gMap = new google.maps.Map2(document.getElementById("map"));
        gMap.addControl(new GMapTypeControl());
        //gMap.addControl(new GLargeMapControl());
        
        // barcelona
        var marker = map.createMarker( new GLatLng(41.407, 2.2097) );
        gMap.addOverlay(marker);
        
        // amsterdam
        var marker2 = map.createMarker( new GLatLng(52.3849,4.9214) );
        gMap.addOverlay(marker2);
    }
    
    
    if( place == 'barcelona' )
    {
        gMap.setCenter(new google.maps.LatLng(41.407, 2.2097), 12);
    }
    else
    {
        gMap.setCenter(new google.maps.LatLng(52.3854034, 4.9183698), 13);
    }
    $('#mapImg').hide();
  },

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

  bindClick: function() {
    button.removeClick();
    $('.contactButton').bind('click',function() {
      $('.contactButton').each( 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() {
      $('.contactButton').each( 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( 'amsterdam' );
  
  $( '.btn_barcelona' ).animate( { 'opacity': 0.5 } ); 

  contact.button();
  
  /*
   * Handle the locations
   */
  $( '.btn_amsterdam' ).click( function( ) { 
    
    if( $( '#amsterdam' ).hasClass( 'current' ) )
      return;
    
    $( '#barcelona' ).removeClass( 'current' );
    $( '#amsterdam' ).addClass( 'current' );
    $( '.btn_barcelona' ).animate( { 'opacity': 0.5 } );
    $( '#barcelona' ).fadeOut( 250, function( ) { 
        
        $( '#amsterdam' ).fadeIn( 250 );
        $( '.btn_amsterdam' ).animate( { 'opacity': 1 } );
        
    } );
    
    $( '#map' ).fadeOut( 250, function( ) {
        
        map.initialize( 'amsterdam' );
        $(this).fadeIn( 250 );
        
    } );

    
  } );
  
  $( '.btn_barcelona' ).click( function( ) { 
    
    if( $( '#barcelona' ).hasClass( 'current' ) )
      return;
    
    $( '#amsterdam' ).removeClass( 'current' );
    $( '#barcelona' ).addClass( 'current' );
    $( '.btn_amsterdam' ).animate( { 'opacity': 0.5 } );
    
    $( '#amsterdam' ).fadeOut( 250, function( ) { 
        
        $( '#barcelona' ).fadeIn( 250 );
        $( '.btn_barcelona' ).animate( { 'opacity': 1 } );
        
    } );
    
    $( '#map' ).fadeOut( 250, function( ) {
        
        map.initialize( 'barcelona' );
        $(this).fadeIn( 250 );
        
    } );
    
  } );

});