<div id="sidebar">
  <table class="sidebar_title" width="100%">
    <tr>
      <td align="left" id="sidebar_title"><% t 'site.sidebar.search_results' %></td>
      <td align="right"><a href="javascript:closeSidebar()"><%= t 'site.sidebar.close' %></a></td>
    </tr>
  </table>
  <div id="sidebar_content">
  </div>
</div>

<script type="text/javascript">
<!--
  var onclose;

  function openSidebar(options) {
    options = options || {};

    if (onclose) {
       onclose();
       onclose = null;
    }

    if (options.title) { $("sidebar_title").innerHTML = options.title; }

    if (options.width) { $("sidebar").style.width = options.width; }
    else { $("sidebar").style.width = "30%"; }

    $("sidebar").style.display = "block";

    <%= onopen %>

    onclose = options.onclose;
  }

  function closeSidebar() {
    $("sidebar").style.display = "none";

    <%= onclose %>

    if (onclose) {
       onclose();
       onclose = null;
    }
  }

  function updateSidebar(title, content) {
    $("sidebar_title").innerHTML = title;
    $("sidebar_content").innerHTML = content;
  }
// -->
</script>
