$(document).ready(function() {
  
  // form validation
  var errorCount;
  var validatePane = function(pane) {
    errorCount = 0;
    $('.error', pane).remove();
    $(pane)
      .find('.required')
      .each(function() {

        if (!$(this).val()) {
          errorCount++;
          $(this).after('<span class="error">' + $(this).prev().text() + ' is required</span>');
        }
      })
    .end()
      .find('.age')
      .each(function() {
        var age = $(this).val()*1; 
        if (age && (age<1 || age>100)) {
          $(this).after('<span class="error">You must be between 1 and 100 years old to participate.</span>');
          errorCount++;
        }
      })
    .end()
      .find('.choose-one').each(function(index) {
        if (!$(':checked', this).length) {
          $('> div', this).append('<span class="error">Please choose one</span>');
          errorCount++;            
        }
      })
    .end()
      .find('.phone').each(function() {
        if (!/^(.?\d{3}.{1,2})?\d{3}.?\d{4}.*$/.test(this.value)) {
          $(this).after('<span class="error">Incorrect phone number format.</span>');
          errorCount++;
        }
      })
    .end();
    if (errorCount) {
      return errorCount;
    }
  };
  
  
  // new patron signup form...
  var $newPatron = $('#new_patron'),
      $pane2Inputs = $('#pane2 :input').add('.actions :submit');

  if ($newPatron.length) {
    // load base64 scripts
    $.getScript('/javascripts/base64.min.js');
    //set up panes
    var paneWidth = $newPatron.width();
    $newPatron.wrap('<div id="new_patron_wrapper"></div>')
    .append('<img class="loading" src="/images/loading.gif" alt="loading..." />')
    .width(paneWidth*2)
      .find('fieldset.actions')
      .css('visibility','visible').appendTo('#pane2')
    .end()
      .find('.pane').width(paneWidth)
    .end()
      .find('#pane2').show()
        .find('button').html('<span>Finish</span>')
      .end()
    .end()
      .find('#pane1')
      .append('<fieldset class="continue"><button type="submit" href="#pane2" id="continue" class="btn"><span>Continue &rarr;</span></button></fieldset>')
    .end();
    
    var $loader = $newPatron.find('.loading');
    // initialize pane and history
    function changePane() {
      if (location.hash.replace('#','') == 'pane2') {
        $newPatron.css({marginLeft: -paneWidth});        
        $pane2Inputs.attr('disabled', false);
      } else {
        $newPatron.css({marginLeft: 0});
        $pane2Inputs.attr('disabled', true);
      }
    }
    $.history.init(changePane);
        
    // handle signupform submission
    $newPatron.submit(function(event) {
      
        event.preventDefault();
        if ($(this).is(':animated')) {
          return false;
        // #pane1 :
        } else if (parseInt($(this).css('marginLeft'),10) >= 0) {
          var firstName = $('#patron_first_name').removeClass('error').val(),
              lastName = $('#patron_last_name').removeClass('error').val(),
              patron = 'patron[first_name]=' + firstName + '&patron[last_name]=' + lastName;
          validatePane('#pane1');
          if (!errorCount) {
            $loader.appendTo('.continue').addClass('loadingnow');
            $.post('/patrons/suggest_credentials', patron, function(data) {
              $loader.removeClass('loadingnow');
              var patronInfo = eval(data);
              for (var i=0; i < patronInfo.length; i++) {
                var thisInput = $('#pane2 input')[i];
                var newVal = thisInput.id.indexOf('password') > -1 ? Base64.decode(patronInfo[i]) : patronInfo[i];
                thisInput.value = newVal;
              }
              
              $newPatron.animate({marginLeft: -paneWidth}, 300, function() {
                $pane2Inputs.attr('disabled', false);
                window.location = location.href.split('#')[0] + '#pane2';
                $('#patron_username').focus();
              });
            });
          }
        // #pane2 :
        } else {
          validatePane('#pane2');
          if (!errorCount) {
            $patronName = $('#patron_username');
            $loader.appendTo('.actions').addClass('loadingnow');
            var uniqueName = 'patron[username]=' + $patronName.val() + '&authenticity_token=' + encodeURIComponent($('input[name=authenticity_token]').val());
            $.post('/patrons/unique_username', uniqueName, function(data) {
              $loader.removeClass('loadingnow');
              var taking = eval('[' + data + ']');
              if (taking[0].taken) {
                $patronName.after('<span class="error"><em>' + $patronName.val() + '</em> is already taken</span>');
              } else {
                $newPatron[0].submit();
              }
            });
          }
        }
      })
    .end();
  }

  // only on progress pages
  if ($('body.progress').length) {
    
    // highlight newly posted reading in table 
    if ($('#content > div.notice').length) {
      $('table.recordset tbody tr:first-child td')
      .addClass('notice')
      .animate({opacity: 1}, 4000, function() {
        $(this).removeClass('notice', 1200); // can only be used when jquery ui effects loaded.
      });
    }
    
    var $addProgress = $('.add_progress'), 
        $confirm = $('#confirm'),
        $book = $('#reading_book'),
        $author = $('#reading_author');
    
    $confirm.dialog({
      autoOpen: false,
      resizable: false,
      height:200,
      modal: true,
      overlay: {
        backgroundColor: '#000',
        opacity: 0.4
      },
      buttons: {
        'Add': function() {
          $addProgress.find('button').attr('disabled', true).css('fontStyle','italic').html('<span>Recording your progress...</span>');
          $confirm.dialog('close');
          $addProgress[0].submit();
        },
        Cancel: function() {
          $confirm.dialog('close');
        }
      }
    });
    
    $addProgress.submit(function(event) {
      event.preventDefault();
      var msgPre = '<div>You are about to add ',
          msgPost = ' to your reading progress chart.</div>';
      if ($book.length && $author.length) {
        validatePane('.add_progress');
        
        if (!errorCount) {
          $confirm
            .filter('.ui-dialog-content')
            .html(msgPre + $book.val() + ' by ' + $author.val() + msgPost)
          .end()
          .dialog('open');
        }
      } else {
        var msgBody = $addProgress.find('button').text().match(/\d.*/)[0];
        $confirm
          .filter('.ui-dialog-content')
          .html(msgPre + msgBody + msgPost)
        .end()
        .dialog('open');
      }
    });
    
  } // end progress page
  
});