function restyleLoginOutMenu(kind, namespace) {
  signin_button = $(namespace + '-signin-button');
  register_button = $(namespace + '-register-button');
  if (!signin_button || !register_button){    
    return;
  }
  if (kind == 'none') {
    signin_button.removeClassName('active');
    register_button.removeClassName('active');
  } else if (kind == 'signin' ) {
    signin_button.addClassName('active');
    register_button.removeClassName('active');
  } else if (kind == 'register' ) {
    register_button.addClassName('active');
    signin_button.removeClassName('active');
  }
}
  
function applyRegistrationDialogEventHandlers() {
  $$('#registration_dialog .autostyle').each(function(el) { el.observe('change',restyleRegistrationDialog)} );
}

function showRegSignin(initial_kind, namespace) {
  restyleLoginOutMenu(initial_kind, namespace);
  if( namespace == 'wom') {
    saveEmailPassword();
    $('forgot_password_dialog').hide()
    signin_form = $('signin_dialog');
    register_form = $('registration_dialog');
    if(initial_kind == 'signin') {
      signin_form.show();
      register_form.hide();
    } else {
      signin_form.hide();
      register_form.show();
    }
    restoreEmailPassword();
  }
}

/* taken from: http://www.alistapart.com/articles/makingcompactformsmoreaccessible
 TODO: may benefit from using prototype to simplify this.
  */
function initOverLabels () {
  var labels, id, field;
  // Set focus and blur handlers to hide and show
  // labels with 'overlabel' class names.
  $$('label.overlabel').each(function(label) {
    // Skip labels that do not have a named association
    // with another field.
    id = label.htmlFor
    if (!id || !(field = $(id))) {
     return;
    }

    // Hide any fields having an initial value.
    if (field.value != '') {
      hideLabel(id, true);
    }

    // Set handlers to show and hide labels.
    field.onfocus = function () {
      hideLabel(this.getAttribute('id'), true);
    };
    field.onblur = function () {
      if (this.value === '') {
        hideLabel(this.getAttribute('id'), false);
      }
    };

    // Handle clicks to label elements (for Safari).
    label.onclick = function () {
      var id, field;
      id = this.htmlFor;
      if (id && (field = $(id))) {
        field.focus();
      }
    };
  });
}

function hideLabel (field_id, hide) {
  $$('label[for='+field_id+']').each(function(label){
    label.style.textIndent = (hide) ? '-3000px' : '0px';
    label.style.zIndex= (hide) ? '-1' : '0';
  })
}

function showHideLabel(field_id) {
  hideLabel(field_id, $(field_id).value != '');
}



/**
  functions & global variables for saving & restoring email & password
  values across modal dialogs
  */
email_value = ''
password_value = ''

function saveEmailPassword() {
  if (email_elem = getEmailElement()){
    email_value = email_elem.value
  }

  if (password_elem = getPasswordElement()){
    password_value = password_elem.value
  }
}

function restoreEmailPassword() {
  if (email_elem = getEmailElement()){
    email_elem.value = email_value
    if(email_value != ''){
      hideLabel(email_elem.id, true)
    }
  }

  if (password_elem = getPasswordElement()){
    password_elem.value = password_value
    if(password_value != ''){
      hideLabel(password_elem.id, true)
    }
  }
}

/** return the first element (from the element_ids list) which has a visible
    corresponding parent element (taken from parent_ids) */
function firstWithVisibleParent(element_ids, parent_ids){
  var elem, parent_elem;
  for (var index = 0; index < element_ids.length; ++index) {
    var elem_id = element_ids[index];
    var parent_id = parent_ids[index];
    elem = $(elem_id);
    parent_elem = $(parent_id)
    if(elem && parent_elem && parent_elem.visible()){
      return elem;
    }
  }
  return false;
}

function getEmailElement(){
  var element_ids = Array('email', 'user_email', 'fp_email')
  var parent_ids = Array('signin_dialog', 'registration_dialog', 'forgot_password_dialog')
  return firstWithVisibleParent(element_ids, parent_ids)
}

function getPasswordElement(){
  var element_ids = Array('password', 'user_password')
  var parent_ids = Array('signin_dialog', 'registration_dialog')
  return firstWithVisibleParent(element_ids, parent_ids)
}

function showHideRememberMeInfo() {
  if ($('remember_me').checked) {
    $('remember_me_info').show();
  }
  else {
    $('remember_me_info').hide();
  }
}

function toggleForgotPasswordDialog() {
  $('signin_dialog').toggle();
  $('forgot_password_dialog').toggle();
}

function hideSigninErrorsAndInfo() {
  $$('#signin_dialog .errorExplanation').each(function(parent){
    parent.update('');  // just blank it out
  })
  $$('#signin_dialog #info_message').each(function(parent){
    parent.update('');  // just blank it out
  })
}

function hideForgotPasswordErrorsAndInfo() {
  $$('#forgot_password_dialog .errorExplanation').each(function(parent){
    parent.update('');  // just blank it out
  })
}

function showForgotPassword() {
  toggleForgotPasswordDialog();
  $('fp_email').value = $('email').value;
  showHideLabel('fp_email');
  hideSigninErrorsAndInfo();
}

function hideForgotPassword() {
  toggleForgotPasswordDialog();
  $('email').value = $('fp_email').value
  showHideLabel('email');
  hideForgotPasswordErrorsAndInfo();
}


/* TODO: consider using lowpro to do this properly */
document.observe("dom:loaded", function() {
  applyRegistrationDialogEventHandlers();
});