<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<%= javascript_include_tag "location" %>
<table class="table main-list">
  <thead>
    <tr>
      <th class="span1"><%= t('location.picture') %></th>
      <th class="span1"><%= t('location.name') %></th>
      <th class="span1"><%= t('location.longitude') %></th>
      <th class="span1"><%= t('location.latitude') %></th>
      <th class="span3"><%= t('location.description') %></th>
      <%if is_manager? %>
        <th class="span1"><%= t('location.edit') %></th>
        <th class="span1"><%= t('location.delete') %></th>
      <% end %>
    </tr>
  </thead>
  <tbody id="tbody_locations" class="sort-holder">
    <% @location_infos.each do |location| %> 
      <tr class="with_action">
        <td><%= image_tag(location.file, alt: location.file, size: "50x50" ) if !location.file.blank? %></td>
        <td><%= location.name %></td>
        <td><%= location.longitude%></td>
        <td><%= location.latitude%></td>
        <td><%= location.description %></td>
        <%if is_manager? %>
          <td><%= link_to 'Edit', edit_panel_location_back_end_location_path(location) %></td>
          <td><%= link_to 'Destroy', panel_location_back_end_location_path(location), method: :delete , :confirm => t(:sure?) %></td>  
        <%end%>
      </tr>
    <% end %>
  </tbody>
</table>
<div>
  Categories : 
</div>
<div class="btn-group">
   <% @categories.each do |category| %>
     <button class="btn cat-filter" data-category='<%= category.id %>'><%= category.title %></button>
    <% end %>
</div>
<a href="javascript:void(0);" id="clear_filter">Clear Filter</a>
<div id="map" style="width: 100%; height: 500px;"></div>
<%if is_manager? %>
<td><%= link_to 'Add', new_panel_location_back_end_location_path, :class => "btn btn-primary pull-right", :id=>"create_event_btn", :ref=>"add-btn"%></td>
<% end %>
<script>

  var loc = new Locations(<%= @location_infos.to_json.html_safe %>);
  jQuery(document).ready(function($) {
    var filterCategories = [];
    $("button.cat-filter").bind( clickEvent,function(){
      var catid =  $( this ).data('category');

      if ( $( this ).hasClass('active') ){
        $( this ).removeClass('active');
        var index = filterCategories.indexOf(filterCategories.filter(function(a,i){ return a == catid })[0]);
        filterCategories.splice( index, 1 );
      }else{
        $( this ).addClass('active');
        filterCategories.push( catid );
      }
      loc.filterMarkers(filterCategories);
    })

    $("a#clear_filter").bind( clickEvent, function(){
      filterCategories = [];
      $("button.cat-filter").removeClass('active');
      loc.clearFilter();
    })

 });

</script>
