<%= javascript_include_tag "location" %>
<div>
	Categories : 
   <% @categories.each do |category| %>
     <input type="checkbox" class="btn cat-filter" data-category='<%= category.id %>' /><%= category.title %>
    <% end %>
</div>
<a href="javascript:void(0);" id="clear_filter">Clear Filter</a>
<div id="map" style="width: 100%; height: 500px;"></div>
<script>
	var loc = null;
	var initialize = function(){
		loc = new Locations(<%= @location_infos.to_json.html_safe %>);
	}

  jQuery(document).ready(function($) {
    var filterCategories = [];
    $("input.cat-filter").bind( "click",function(){
      var catid =  $( this ).data('category');

      if ( !$( this ).is(':checked') ){

        var index = filterCategories.indexOf(filterCategories.filter(function(a,i){ return a == catid })[0]);
        filterCategories.splice( index, 1 );
      }else{

        filterCategories.push( catid );
      }
      loc.filterMarkers(filterCategories);
    })

    $("a#clear_filter").bind( "click", function(){
      filterCategories = [];
      $("input.cat-filter").prop('checked',false);
      loc.clearFilter();
    })

 });
</script>
<script src="http://maps.google.com/maps/api/js?sensor=true&callback=initialize"></script>
