anchor.diff:  <html>
     <head>
     <title>Dashboard</title>
  +
   </head>
   <body>
  -
   
   <div data-role="page" id="dashboard">
   
  
positive.code:       </div>
    </div><!-- /leftpanel1 -->
  
  </div><!-- /page -->
  
  <script>
    var eventsJson = null
    $.ajax({
      method: "get",
      url: "/events/all",
      dataType: "json",
      success: function(data) {
        eventsJson = data;
        refresh();
        debugger;
      }
    })
  
  
    var footballVal = 'on', campVal = 'on', recreationalVal = 'on', gymnasticsVal = "on", basketballVal = "on", tennisVal = "on", aquaticVal = "on", fitnessVal = "on", otherVal = "on", filteredIds = [];
  
    var eventsType = ['Football', 'Camp', 'Recreational', 'Basketball', 'Gymnastics', 'Tennis', 'Aquatic', 'Fitness', 'Other'];
    var filteredEvents = [];
    setTimeout(refresh, 1000);
    setTimeout(refresh, 3000);
    setTimeout(refresh, 2000);
    setTimeout(refresh, 2000);
  
    // refresh()
    // var fixedJson = JSON.parse(originalJson);
    // var eventsJson = originalJson.events;
  
    //football
    $('#football').change(function(){
      if(footballVal==('on')) {
        for(var i = 0; i < eventsType.length; i++){
          if (eventsType[i] === "Football") {
            eventsType.splice(i, 1);
          }
        }
        footballVal = 'off'
      } else {
        eventsType.push("Football");
        footballVal = 'on'
      }
      refresh();
      console.log(footballVal);
      console.log(eventsType);
    });
  
    //camp
    $('#camp').change(function(){
      if(campVal==('on')) {
        for(var i = 0; i < eventsType.length; i++){
          if (eventsType[i] === "Camp") {
            eventsType.splice(i, 1);
          }
        }
        campVal = 'off'
      } else {
        eventsType.push("Camp");
        campVal = 'on'
      }
      refresh();
      console.log(campVal);
      console.log(eventsType);
    });
  
    //recreational
    $('#recreational').change(function(){
      if(recreationalVal==('on')) {
        for(var i = 0; i < eventsType.length; i++){
          if (eventsType[i] === "Recreational") {
            eventsType.splice(i, 1);
          }
        }
        recreationalVal = 'off'
      } else {
        eventsType.push("Recreational");
        recreationalVal = 'on'
      }
      refresh();
      console.log(recreationalVal);
      console.log(eventsType);
    });
  
    //basketball
    $('#basketball').change(function(){
      if(basketballVal==('on')) {
        for(var i = 0; i < eventsType.length; i++){
          if (eventsType[i] === "Basketball") {
            eventsType.splice(i, 1);
          }
        }
        basketballVal = 'off'
      } else {
        eventsType.push("Basketball");
        basketballVal = 'on'
      }
      refresh();
      console.log(basketballVal);
      console.log(eventsType);
    });
  
    //tennis
    $('#tennis').change(function(){
      if(tennisVal==('on')) {
        for(var i = 0; i < eventsType.length; i++){
          if (eventsType[i] === "Tennis") {
            eventsType.splice(i, 1);
          }
        }
        tennisVal = 'off'
      } else {
        eventsType.push("Tennis");
        tennisVal = 'on'
      }
      refresh();
      console.log(tennisVal);
      console.log(eventsType);
    });
  
    //aquatic
    $('#aquatic').change(function(){
      if(aquaticVal==('on')) {
        for(var i = 0; i < eventsType.length; i++){
          if (eventsType[i] === "Aquatic") {
            eventsType.splice(i, 1);
          }
        }
        aquaticVal = 'off'
      } else {
        eventsType.push("Aquatic");
        aquaticVal = 'on'
      }
      refresh();
      console.log(aquaticVal);
      console.log(eventsType);
    });
  
    //gymnastics
    $('#gymnastics').change(function(){
      if(gymnasticsVal==('on')) {
        for(var i = 0; i < eventsType.length; i++){
          if (eventsType[i] === "Gymnastics") {
            eventsType.splice(i, 1);
          }
        }
        gymnasticsVal = 'off'
      } else {
        eventsType.push("Gymnastics");
        gymnasticsVal = 'on'
      }
      refresh();
      console.log(gymnasticsVal);
      console.log(eventsType);
    });
  
    //fitness
    $('#fitness').change(function(){
      if(fitnessVal==('on')) {
        for(var i = 0; i < eventsType.length; i++){
          if (eventsType[i] === "Fitness") {
            eventsType.splice(i, 1);
          }
        }
        fitnessVal = 'off'
      } else {
        eventsType.push("Fitness");
        fitnessVal = 'on'
      }
      refresh();
      console.log(fitnessVal);
      console.log(eventsType);
    });
  
    //other
    $('#other').change(function(){
      if(otherVal==('on')) {
        for(var i = 0; i < eventsType.length; i++){
          if (eventsType[i] === "Other") {
            eventsType.splice(i, 1);
          }
        }
        otherVal = 'off'
      } else {
        eventsType.push("Other");
        otherVal = 'on'
      }
      refresh();
      console.log(otherVal);
      console.log(eventsType);
    });
  
    function refresh() {
      console.log("freshing");
      filteredEvents = [];
      for (var i = 0; i < eventsType.length; i++)
        {
          for (var j = 0; j < eventsJson.length; j++)
          {
            if (eventsType[i] === eventsJson[j].event_type)
            {
              filteredEvents.push(eventsJson[j].name);
              filteredIds.push(eventsJson[j].id);
            }
          }
        }
        var output = '';
        $.each(filteredEvents, function (index, value) {
          output += '<li><a href="events/' + filteredIds[index] + '">' + value + '</a></li>';
        });
        $('#event-list').html(output).listview("refresh");
        console.log(filteredEvents);
      }
  
  
  
  </script>
  
  </body>
  
  
negative.code:     <div data-role="collapsible" data-collapsed="false">
        <h4>My Events</h4>
          <ul data-role="listview">
            <li><a href="#topicList"><%=Event.find(4).name%></a></li>
            <li><a href="#topicList"><%=Event.find(5).name%></a></li>
            <li><a href="#topicList"><%=Event.find(6).name%></a></li>
            <li><a href="#topicList"><%=Event.find(7).name%></a></li>
        </ul>
      </div>
  
      <div data-role="collapsible" data-collapsed="false">
        <h4>Trending</h4>
          <ul data-role="listview">
            <li><a href="#topicList"><%=Event.find(1).name%></a></li>
            <li><a href="#topicList"><%=Event.find(2).name%></a></li>
            <li><a href="#topicList"><%=Event.find(3).name%></a></li>
        </ul>
      </div>
  
  