$(function() {
    // Global killswitch.
    if (Drupal.jsEnabled) {
      exposeDynamicUI();
    }
  }
);

// Replaces the multiselect permissions listboxes with a js front end interface.
function exposeDynamicUI() {

  var granted = '';
  var not_granted = '';
  var granted_holder = $("#td-permissions-granted");
  var not_granted_holder = $("#td-permissions-not-granted");

  var view = $("input[@name=js_interface_radios]:checked").val();
  var rid = $("#edit-js-interface-role-selector").val();

  var byRoleGranted = Drupal.settings.byRoleGranted;
  var byRoleNotGranted = Drupal.settings.byRoleNotGranted;

  // Write selects to the granted holder.
  for (role in byRoleGranted) {
    $(granted_holder).append(byRoleGranted[role]);
  }
  $(granted_holder).append(Drupal.settings.byPermissionGranted);

  // Write selects to the not granted holder.
  for (role in byRoleNotGranted) {
    $(not_granted_holder).append(byRoleNotGranted[role]);
  }
  $(not_granted_holder).append(Drupal.settings.byPermissionNotGranted);

  // Attach the view selection changer.
  $("input[@name=js_interface_radios]").change(
    function() {
      var view = $("input[@name=js_interface_radios]:checked").val();
      var rid = $("#edit-js-interface-role-selector").val();
      selectView(view, rid);
    }
  );

  // Attach the role selection changer.
  $("#edit-js-interface-role-selector").change(
    function() {
      var rid = $("#edit-js-interface-role-selector").val();
      selectRole(rid);
    }
  );

  // Prepare the current view.
  selectView(view, rid);

  // Hide the full view table.
  $("#permissions").hide();

  // Display the js interface.
  $("#js-interface-radios, #table-permissions").show();

  // Attach the onclick handler for adding a permission.
  $("#edit-grant").click(
    function() {
      var rid = $("#edit-role").val();
      $("#edit-ungranted-permissions-"+ rid +" option:selected").each(
        function() {

        }
      );
      alert('Not working yet!');
      return false;
    }
  );

  // Attach the onclick handler for removing a permission.
  $("#edit-revoke").click(
    function() {
      var rid = $("#edit-role").val();
      $("#edit-permissions-"+ rid +" option:selected").each(
        function() {

        }
      );
      alert('Not working yet!');
      return false;
    }
  );
}

function selectView(view, rid) {
  switch (view) {
    case 'full_view':
      // Hide the js interface.
      $("#js-interface-role-selector, #table-permissions").hide();
      // Show the full view table.
      $("#permissions").show();
      break;
    default:
      if (view == 'by_role') {
        // Show the role selector and appropriate select boxes.
        $("#js-interface-role-selector").show();
        selectRole(rid);
      }
      else {
        // Hide the role selector.
        $("#js-interface-role-selector").hide();
        // Hide all selects initially.
        $("div.js-permission-select").hide();
        // Show the by permissions selects.
        $("#by_permission_granted, #by_permission_not_granted").show();
      }
      // Hide the full view table.
      $("#permissions").hide();
      // Show the js interface.
      $("#table-permissions").show();
      break;
  }
}

function selectRole(rid) {
  // Hide all selects initially.
  $("div.js-permission-select").hide();
  // Show the by role selects for the appropriate role.
  $("#by_role_granted_"+ rid +", #by_role_not_granted_"+ rid).show();
}