<%= formula_form_for @user, url: user_url do |form| %>
  <h3>Choose Active Metacodes</h3>
  <div class="allMetacodes"><span id="showAll">Show All</span><span id="hideAll">Hide All</span></div>
  <div class="clearfloat"></div>
  <div class="editMetacodes">
      <ul id="filters-one">
       <% $i = 0 %>
       <% @m = Metacode.order("name").all %>
       <% while $i < (Metacode.all.length / 4) do %>
            <li id="<%= @m[$i].id %>" <% if not @m[$i].hasSelected(@user) %>class="toggledOff"<% end %> >
              <img src="/assets/<%= @m[$i].icon %>" alt="<%= @m[$i].name %>" />
              <p><%= @m[$i].name.downcase %></p>
              <div class="clearfloat"></div>
            </li>
            <% $i += 1 %>
       <% end %>
      </ul>
      <ul id="filters-two">
       <% while $i < (Metacode.all.length / 4 * 2) do %>
            <li id="<%= @m[$i].id %>" <% if not @m[$i].hasSelected(@user) %>class="toggledOff"<% end %> >
              <img src="/assets/<%= @m[$i].icon %>" alt="<%= @m[$i].name %>" />
              <p><%= @m[$i].name.downcase %></p>
              <div class="clearfloat"></div>
            </li>
            <% $i += 1 %>
       <% end %>         
      </ul>
      <ul id="filters-three">         
       <% while $i < (Metacode.all.length / 4 * 3) do %>
            <li id="<%= @m[$i].id %>" <% if not @m[$i].hasSelected(@user) %>class="toggledOff"<% end %> >
              <img src="/assets/<%= @m[$i].icon %>" alt="<%= @m[$i].name %>" />
              <p><%= @m[$i].name.downcase %></p>
              <div class="clearfloat"></div>
            </li>
            <% $i += 1 %>
       <% end %>
      </ul>
      <ul id="filters-four">         
       <% while $i < Metacode.all.length do %>
            <li id="<%= @m[$i].id %>" <% if not @m[$i].hasSelected(@user) %>class="toggledOff"<% end %> >
              <img src="/assets/<%= @m[$i].icon %>" alt="<%= @m[$i].name %>" />
              <p><%= @m[$i].name.downcase %></p>
              <div class="clearfloat"></div>
            </li>
            <% $i += 1 %>
       <% end %>
      </ul>
      <div class="clearfloat"></div>
  </div>
<script>
var selectMetacodes = new Array;
var allMetacodes = new Array;
<% Metacode.all.each do |m| %>
  <% if m.hasSelected(@user) %>
    selectMetacodes.push("<%= m.id %>");
  <% end %>
  allMetacodes.push("<%= m.id %>");
<% end %>
$(document).ready(function() {
  
  $('#metacodes_0').val(selectMetacodes.toString());
  
  $('.editMetacodes li').click(function() {
    if ($(this).attr('class') != 'toggledOff') {
      $(this).addClass('toggledOff');
      var value_to_remove = $(this).attr('id');
      selectMetacodes.splice(selectMetacodes.indexOf(value_to_remove), 1);
      $('#metacodes_value').val(selectMetacodes.toString());
    }
    else if ($(this).attr('class') == 'toggledOff') {
      $(this).removeClass('toggledOff');
      selectMetacodes.push($(this).attr('id'));
      $('#metacodes_value').val(selectMetacodes.toString());
    }
  });
  
  $('#showAll').click(function() {
    $('.editMetacodes li').removeClass('toggledOff');
    selectMetacodes = allMetacodes;
    $('#metacodes_value').val(selectMetacodes.toString());
  });
  
  $('#hideAll').click(function() {
    $('.editMetacodes li').addClass('toggledOff');
    selectMetacodes = [];
    $('#metacodes_value').val(0);
  });
  
  $('.edit_user').bind('submit', function(event) {
    if (selectMetacodes.length == 0) {
      alert('Would you pretty please select at least one metacode to map with?');
      return false;
    }
  });

});
</script>

FROM USERS CONTROLLER>
@m = params[:metacodes][:value]
    @user.settings.metacodes=@m.split(',')