var ABP = {
  page: 1,
  
  init: function() {
    ABP.init_body();
    // ABP.equalize_columns();
    ABP.init_map();
  },
  
  init_body: function() {
    jQuery('body').removeClass('nojs');
    jQuery('body').addClass('js');
  },
  
  equalize_columns: function() {
    c = jQuery('#content').height();
    m = jQuery('#margin').height();
    if ( c > m ) {
      jQuery('#margin').height(c);
    } else {
      jQuery('#content').height(m);
    }
  },
  
  is_valid_email: function(email) {
    return /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email);
  },
  
  check_form: function() {
    ok = true;
    if ( jQuery.trim( jQuery('#infobox #vorname').val() ) == '' ) ok = false;
    if ( jQuery.trim( jQuery('#infobox #nachname').val() ) == '' ) ok = false;
    if ( jQuery.trim( jQuery('#infobox #strasse_nr').val() ) == '' ) ok = false;
    if ( jQuery.trim( jQuery('#infobox #plz_ort').val() ) == '' ) ok = false;
    if ( ! ABP.is_valid_email( jQuery('#infobox #email').val() ) ) ok = false;
    if ( jQuery('#infobox #email').val() != jQuery('#anmeldung #email_wdh').val() ) ok = false;
    if ( jQuery('#infobox #personen :selected').val() < 1 ) ok = false;
    
    if ( ok == false ) {
      jQuery('#infobox #required').css( { 'color': '#900', 'font-weight': 'bold' } );
    } else {
      jQuery('#infobox #required').css( { 'color': '#000', 'font-weight': 'normal' } );
      jQuery('body#anmeldung #anleitung .steps').css( { 'color': '#fff' } );
      jQuery('body#anmeldung #anleitung #step03').css( { 'color': '#fc0' } );
      jQuery.post(
        '/anmeldung/reservieren',
        {
          vorname: jQuery('#vorname').val(),
          nachname: jQuery('#nachname').val(),
          strasse_nr: jQuery('#strasse_nr').val(),
          plz_ort: jQuery('#plz_ort').val(),
          email: jQuery('#email').val(),
          email_wdh: jQuery('#email_wdh').val(),
          personen: jQuery('#personen :selected').val(),
          slot: jQuery('#slot').val()
        }
      );
      jQuery('body#anmeldung #infobox #required').hide();
      jQuery('body#anmeldung #infobox form').slideUp();
      jQuery('body#anmeldung #infobox #headline').text('Vielen Dank für die Anfrage.');
      // jQuery('body#anmeldung #info').hide().html('<p>Es wurde eine Mail an die angegeben Adresse gesendet. Bitte darin den Link aufrufen, um die Mail-Adresse zu verifizieren. Es folgt eine Mail mit den Kontodaten. Der Eingang des Rechnungsbetrags wird per Mail bestätigt. <a href="/">zurück</a></p>').slideDown();
      jQuery('body#anmeldung #info').hide().html('<p>Es wurde eine Mail an die angegeben Adresse gesendet. Bitte darin den Link aufrufen, um die Mail-Adresse zu verifizieren. <a href="/">zurück</a></p>').slideDown();
    }
  },
  
  init_map: function() {
    jQuery('body#anmeldung .slot').bind( 'click', function(e) {
      
      slot = {
        'name' : jQuery(this).text(),
        'timestamp' : jQuery(this).attr('rel'),
        'x' : e.pageX,
        'y' : e.pageY
      };
      
      if( jQuery(this).hasClass('free') ) slot['status'] = 'frei';
      if( jQuery(this).hasClass('blocked') ) slot['status'] = 'reserviert';
      if( jQuery(this).hasClass('taken') ) slot['status'] = 'gebucht';
      
      o = '';
      o += '<h3 id="headline">Platz: ' + slot['name'] + ' / Status: ' + slot['status'] + '</h3>';
      
      if ( slot['status'] == 'frei' ) {
        o += '<form id="" action="post" onsubmit="ABP.check_form(); return false;">';
        o += '<input type="hidden" id="slot" name="slot" value="' + slot['name'] + '" />';
        o += '<label for="vorname">Vorname</label><input class="text" type="text" id="vorname" name="vorname" />';
        o += '<br />';
        o += '<label for="nachname">Nachname</label><input class="text" type="text" id="nachname" name="nachname" />';
        o += '<br />';
        o += '<label for="strasse_nr">Strasse, Nr.</label><input class="text" type="text" id="strasse_nr" name="strasse_nr" />';
        o += '<br />';
        o += '<label for="plz_ort">PLZ, Ort</label><input class="text" type="text" id="plz_ort" name="plz_ort" />';
        o += '<br />';
        o += '<label for="email">Mail</label><input class="text" type="text" id="email" name="email" />';
        o += '<br />';
        o += '<label for="email_wdh">Mail-Wdh</label><input class="text" type="text" id="email_wdh" name="email_wdh" />';
        o += '<br />';
        o += '<label for="personen">Personen</label><select id="personen" name="personen"><option></option><option>1</option><option>2</option><option>3</option><option>4</option></select>';
        o += '<br />';
        o += '<label for="reservieren">&nbsp;</label><input type="submit" id="reservieren" name="reservieren" value="reservieren" />';
        o += '<br />';
        o += '</form>';
        o += '<p id="required">Alle Felder sind Pflichtfelder.<br />Bitte gültige Mail-Adresse eingeben.</p>';
      }
      o += '<div id="info"></div>';
      jQuery('body#anmeldung #infobox').css( { 'display': 'block' } ).html( o );
      
      // jQuery('body#anmeldung #infobox').offset( { top: slot['y'] - 24 , left: slot['x'] + 12 } );
      jQuery('body#anmeldung .slot').css( { 'color': '#fff', 'font-weight': 'normal' } );
      jQuery('body#anmeldung #anleitung .steps').css( { 'color': '#fff' } );
      jQuery('body#anmeldung #anleitung #step02').css( { 'color': '#fc0' } );
      jQuery('body#anmeldung #' + slot['name'] ).css( { 'color': '#000', 'font-weight': 'bold' } );
      
    })
  },
  
  dummy: function() {}
  
}

jQuery(document).ready( function() {
  ABP.init();
});