% layout 'standard';
% content_for header => begin
  %= javascript '/assets/jquery-ui-1.10.0.custom.min.js'
  %= javascript '/galileo-edit.js'
% end

%= javascript begin
function saveButton() {
  var data = {
    name : "main",
    list : $("#list-active-pages").sortable('toArray')
  };
  sendViaWS("<%= url_for('storemenu')->to_abs %>", data);
}

$(function() {
  $( "#list-active-pages, #list-inactive-pages" ).sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.nav-header)"
  }).disableSelection();
});
% end

<div class="row">
  <div class="span5">
    <ul id="list-active-pages" class="nav nav-list connectedSortable well">
      <li id="header-active" class="nav-header">Active Pages</li>
      <%= $active %>
    </ul>
  </div>
  <div class="span5">
    <ul id="list-inactive-pages" class="nav nav-list connectedSortable well">
      <li id="header-inactive" class="nav-header">Inactive Pages</li>
      <%= $inactive %>
    </ul>
  </div>
</div>
<button class="btn" id="save-list" onclick="saveButton()">
  Save
</button>