linguisticexplorer/Linguistic-Explorer

<%
    page_heading "Search"
%>
<div id="titleHeader">
    <h2 class="red_grad"><%= @search.group.ling_name_for_depth(0).pluralize %> in the Selection</h2>
</div>
<div class="padded_left padded_right">
  <%= gmaps("markers" => { "data" => @json, "options" => {"do_clustering" => false, "randomize" => true} }) unless @json.empty? %>
    <div id="legend-container" style="display: none">
      <div id="legend-btn" style="cursor: pointer;"> Legend </div>
      <div id="legend-content" class="popover bottom" role="button" style="display: none;">
        <!-- Search type here -->
        <h3 class="popover-title"><%=@summary[:title] %></h3>
        <div class="popover-content" style="overflow-y: auto; height: 200px;">
        <!-- Display here a list of marker categories with aggregate results -->
        <table class="table">
          <thead>
            <tr><td></td><td>Total</td><td>Content</td></tr>
          </thead>
          <tbody>
          <% @summary[:rows].each do |row| %>
              <tr id="<%=row[:id] %>">
                <td><img id="<%=row[:id] %>_img" src="<%=row[:icon] %>" /></td>
                <td><%=row[:size] %></td>
                <td><%=row[:content] %></td>
              </tr>
          <% end %>
          </tbody>
        </table>
        </div>
      </div>
    </div>
</div>
<!-- Put here some JS code to enable click on Legend button -->
<% content_for :scripts do%>
  <script type="text/javascript">
  Gmaps.map.callback = function(){
    Gmaps.map.map.maxZoom = 7;
    Gmaps.map.map.minZoom = 2;

    var openLegend;

    $(function(){
      $('#legend-container').show();
      // On click check the state of the Legend Window
      // and show or hide in case
      $('#legend-btn').click(function(){
        $(this).addClass('active');
        if(!openLegend){
          var leftPos = $(this).offset().left - $('#legend-content').width()/2;
          var topPos = $(this).offset().top;
          $('#legend-content').fadeIn('slow').offset({top: topPos + 25, left: leftPos - 50});
        } else {
          $('#legend-content').fadeOut('slow');
          $(this).removeClass('active');
        }
        openLegend = !(openLegend);
      });

      $("[id^=id_]").click(function(){
        var isHidden = !$(this).hasClass("success");
        // if it's fresh, add class info and hide its markers
        $(this).toggleClass("success", isHidden);
        var ghosted = "opacity: 0.5; filter: alpha(opacity = 50);";
        var regular = "";
        $('#'+this.id+'_img').attr("style", isHidden ? ghosted : regular);
        toggleMarkerGroup(this.id.replace(/id_/, ''), !isHidden);
      });

      function toggleMarkerGroup(id, toggle){
        var i, markers = Gmaps.map.markers;
        for(i=0; i<markers.length; i++){
          if(markers[i].id === id){
            markers[i].serviceObject.setVisible(toggle);
          }
        }
      }

    });
  }
  </script>
<% end %>