From 7598806f409d5c97e73af474900cc61293fb136d Mon Sep 17 00:00:00 2001
From: Lance <lance@shovelpunks.com>
Date: Wed, 16 Mar 2011 07:56:58 -0400
Subject: [PATCH] Change javascript to work as chall suggested

---
 themes/magneticfield/javascripts/site.js      |   2 +
 themes/magneticfield/sass/screen.scss         |  42 ++--
 themes/magneticfield/stylesheets/screen.css   | 190 +++++++++---------
 .../events/app/views/events/index.html.haml   |  16 +-
 4 files changed, 124 insertions(+), 126 deletions(-)

diff --git a/themes/magneticfield/javascripts/site.js b/themes/magneticfield/javascripts/site.js
index 9c7bff8..11262e9 100644
--- a/themes/magneticfield/javascripts/site.js
+++ b/themes/magneticfield/javascripts/site.js
@@ -11,6 +11,8 @@ $(document).ready(function($) {
 
   $('#filters .filter').bind('click', function() {
     $(this).toggleClass('active')
+    $(this).siblings().removeClass('active')
+    $('#events .event').hide()
     $('#events .event.'+$(this).attr('rel')).toggle()
   })
 
diff --git a/themes/magneticfield/sass/screen.scss b/themes/magneticfield/sass/screen.scss
index be1325a..266f678 100644
--- a/themes/magneticfield/sass/screen.scss
+++ b/themes/magneticfield/sass/screen.scss
@@ -251,33 +251,34 @@ body.bp p {
     font-size: 24px;
     text-align: center;
     margin-bottom: 10px;
+    background-color: #444;
     @include rounded_corners;
   }
+  .filter:hover { cursor: pointer; background-color: #222; }
 
-  .filter.theatre { color: $theatre_color - 50; }
-  .filter.comedy { color: $comedy_color - 50; }
-  .filter.music { color: $music_color - 50; }
-  .filter.other { color: $other_color - 50; }
-  .filter.theatre:hover { color: $theatre_color; }
-  .filter.comedy:hover { color: $comedy_color; }
-  .filter.music:hover { color: $music_color; }
-  .filter.other:hover { color: $other_color; }
+  .filter.theatre { color: $theatre_color; }
+  .filter.comedy { color: $comedy_color; }
+  .filter.music { color: $music_color; }
+  .filter.other { color: $other_color; }
 
-  .filter { background-color: #444; }
-  .filter:hover { cursor: pointer; background-color: #555; }
+  .filter.active:hover { background-color: #444; }
+  .filter.theatre:hover { color: $theatre_color - 50; }
+  .filter.comedy:hover { color: $comedy_color - 50; }
+  .filter.music:hover { color: $music_color - 50; }
+  .filter.other:hover { color: $other_color - 50; }
 
-  .filter.active.theatre { color: $theatre_color; }
-  .filter.active.comedy { color: $comedy_color; }
-  .filter.active.music { color: $music_color; }
-  .filter.active.other { color: $other_color; }
+  .filter.active { background-color: #222; }
 
-  .filter.active { background-color: #555; }
+  .filter.active.theatre { color: $theatre_color - 50; }
+  .filter.active.comedy { color: $comedy_color - 50; }
+  .filter.active.music { color: $music_color - 50; }
+  .filter.active.other { color: $other_color - 50; }
+
+  .filter.active.theatre:hover { color: $theatre_color; }
+  .filter.active.comedy:hover { color: $comedy_color; }
+  .filter.active.music:hover { color: $music_color; }
+  .filter.oactive.ther:hover { color: $other_color; }
 
-  .filter.active:hover { background-color: #444; cursor: pointer; }
-  .filter.active.theatre:hover { color: $theatre_color - 50; }
-  .filter.active.comedy:hover { color: $comedy_color - 50; }
-  .filter.active.music:hover { color: $music_color - 50; }
-  .filter.active.other:hover { color: $other_color - 50; }
 
 }
 
@@ -287,6 +288,7 @@ body.bp p {
 }
 
 #body_content.no_body_content_right #body_content_left {
+
   width: 870px;
 }
 
diff --git a/themes/magneticfield/stylesheets/screen.css b/themes/magneticfield/stylesheets/screen.css
index a7b395f..868de0d 100644
--- a/themes/magneticfield/stylesheets/screen.css
+++ b/themes/magneticfield/stylesheets/screen.css
@@ -985,6 +985,7 @@ body.bp p {
   font-size: 24px;
   text-align: center;
   margin-bottom: 10px;
+  background-color: #444;
   -webkit-border-top-left-radius: 8px;
   -webkit-border-top-right-radius: 8px;
   -moz-border-radius-topleft: 8px;
@@ -999,107 +1000,102 @@ body.bp p {
   border-bottom-left-radius: 8px;
 }
 /* line 257, ../sass/screen.scss */
+#body_content_right .filter:hover {
+  cursor: pointer;
+  background-color: #222;
+}
+/* line 259, ../sass/screen.scss */
 #body_content_right .filter.theatre {
-  color: #cd7412;
+  color: #ffa644;
 }
-/* line 258, ../sass/screen.scss */
+/* line 260, ../sass/screen.scss */
 #body_content_right .filter.comedy {
-  color: #b3142f;
+  color: #e54661;
 }
-/* line 259, ../sass/screen.scss */
+/* line 261, ../sass/screen.scss */
 #body_content_right .filter.music {
-  color: #0065a4;
+  color: #0097d6;
 }
-/* line 260, ../sass/screen.scss */
+/* line 262, ../sass/screen.scss */
 #body_content_right .filter.other {
-  color: #679a67;
+  color: #99cc99;
 }
-/* line 261, ../sass/screen.scss */
+/* line 264, ../sass/screen.scss */
+#body_content_right .filter.active:hover {
+  background-color: #444;
+}
+/* line 265, ../sass/screen.scss */
 #body_content_right .filter.theatre:hover {
-  color: #ffa644;
+  color: #cd7412;
 }
-/* line 262, ../sass/screen.scss */
+/* line 266, ../sass/screen.scss */
 #body_content_right .filter.comedy:hover {
-  color: #e54661;
+  color: #b3142f;
 }
-/* line 263, ../sass/screen.scss */
+/* line 267, ../sass/screen.scss */
 #body_content_right .filter.music:hover {
-  color: #0097d6;
+  color: #0065a4;
 }
-/* line 264, ../sass/screen.scss */
+/* line 268, ../sass/screen.scss */
 #body_content_right .filter.other:hover {
-  color: #99cc99;
-}
-/* line 266, ../sass/screen.scss */
-#body_content_right .filter {
-  background-color: #444;
+  color: #679a67;
 }
-/* line 267, ../sass/screen.scss */
-#body_content_right .filter:hover {
-  cursor: pointer;
-  background-color: #555;
+/* line 270, ../sass/screen.scss */
+#body_content_right .filter.active {
+  background-color: #222;
 }
-/* line 269, ../sass/screen.scss */
+/* line 272, ../sass/screen.scss */
 #body_content_right .filter.active.theatre {
-  color: #ffa644;
+  color: #cd7412;
 }
-/* line 270, ../sass/screen.scss */
+/* line 273, ../sass/screen.scss */
 #body_content_right .filter.active.comedy {
-  color: #e54661;
+  color: #b3142f;
 }
-/* line 271, ../sass/screen.scss */
+/* line 274, ../sass/screen.scss */
 #body_content_right .filter.active.music {
-  color: #0097d6;
+  color: #0065a4;
 }
-/* line 272, ../sass/screen.scss */
+/* line 275, ../sass/screen.scss */
 #body_content_right .filter.active.other {
-  color: #99cc99;
-}
-/* line 274, ../sass/screen.scss */
-#body_content_right .filter.active {
-  background-color: #555;
-}
-/* line 276, ../sass/screen.scss */
-#body_content_right .filter.active:hover {
-  background-color: #444;
-  cursor: pointer;
+  color: #679a67;
 }
 /* line 277, ../sass/screen.scss */
 #body_content_right .filter.active.theatre:hover {
-  color: #cd7412;
+  color: #ffa644;
 }
 /* line 278, ../sass/screen.scss */
 #body_content_right .filter.active.comedy:hover {
-  color: #b3142f;
+  color: #e54661;
 }
 /* line 279, ../sass/screen.scss */
 #body_content_right .filter.active.music:hover {
-  color: #0065a4;
+  color: #0097d6;
 }
 /* line 280, ../sass/screen.scss */
-#body_content_right .filter.active.other:hover {
-  color: #679a67;
+#body_content_right .filter.oactive.ther:hover {
+  color: #99cc99;
 }
 
-/* line 284, ../sass/screen.scss */
+/* line 285, ../sass/screen.scss */
 #body_content_left {
   width: 640px;
   margin-right: 20px;
 }
 
-/* line 289, ../sass/screen.scss */
+/* line 290, ../sass/screen.scss */
 #body_content.no_body_content_right #body_content_left {
   width: 870px;
 }
 
-/* line 293, ../sass/screen.scss */
+/* line 295, ../sass/screen.scss */
 body.bp ul#events {
   margin: 0;
   padding: 0;
   list-style: none;
   color: #eee;
 }
-/* line 298, ../sass/screen.scss */
+/* line 300, ../sass/screen.scss */
 body.bp ul#events li {
   list-style: none;
   border: 1px solid #000;
@@ -1110,42 +1106,42 @@ body.bp ul#events li {
   overflow: hidden;
   padding: 8px 5px 3px 8px;
 }
-/* line 305, ../sass/screen.scss */
+/* line 307, ../sass/screen.scss */
 body.bp ul#events li .logo, body.bp ul#events li .description {
   float: left;
   display: inline;
 }
-/* line 309, ../sass/screen.scss */
+/* line 311, ../sass/screen.scss */
 body.bp ul#events li .logo {
   width: 100px;
 }
-/* line 311, ../sass/screen.scss */
+/* line 313, ../sass/screen.scss */
 body.bp ul#events li .logo img {
   width: 100px;
 }
-/* line 315, ../sass/screen.scss */
+/* line 317, ../sass/screen.scss */
 body.bp ul#events li .description {
   margin-left: 30px;
   width: 480px;
 }
-/* line 319, ../sass/screen.scss */
+/* line 321, ../sass/screen.scss */
 body.bp ul#events li .title {
   font-size: 14px;
   display: block;
   margin-bottom: 4px;
   cursor: pointer;
 }
-/* line 325, ../sass/screen.scss */
+/* line 327, ../sass/screen.scss */
 body.bp ul#events li .title:hover {
   color: #aaa;
 }
-/* line 328, ../sass/screen.scss */
+/* line 330, ../sass/screen.scss */
 body.bp ul#events li .more {
   border-top: #999 1px dotted;
   padding-top: 10px;
   margin-top: 4px;
 }
-/* line 333, ../sass/screen.scss */
+/* line 335, ../sass/screen.scss */
 body.bp ul#events li .tag_marker {
   width: 18px;
   height: 18px;
@@ -1165,66 +1161,66 @@ body.bp ul#events li .tag_marker {
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
 }
-/* line 341, ../sass/screen.scss */
+/* line 343, ../sass/screen.scss */
 body.bp ul#events li .tag_marker.theatre {
   background-color: #ffa644;
 }
-/* line 342, ../sass/screen.scss */
+/* line 344, ../sass/screen.scss */
 body.bp ul#events li .tag_marker.comedy {
   background-color: #e54661;
 }
-/* line 343, ../sass/screen.scss */
+/* line 345, ../sass/screen.scss */
 body.bp ul#events li .tag_marker.music {
   background-color: #0097d6;
 }
-/* line 344, ../sass/screen.scss */
+/* line 346, ../sass/screen.scss */
 body.bp ul#events li .tag_marker.other {
   background-color: #99cc99;
 }
-/* line 345, ../sass/screen.scss */
+/* line 347, ../sass/screen.scss */
 body.bp ul#events li .tickets {
   float: right;
   margin-top: -20px;
   margin-right: 20px;
   font-size: 12px;
 }
-/* line 350, ../sass/screen.scss */
+/* line 352, ../sass/screen.scss */
 body.bp ul#events li .tickets a {
   text-decoration: none;
 }
-/* line 355, ../sass/screen.scss */
+/* line 357, ../sass/screen.scss */
 body.bp ul#events li.even {
   background-color: #222;
 }
-/* line 356, ../sass/screen.scss */
+/* line 358, ../sass/screen.scss */
 body.bp ul#events li.odd {
   background-color: #333;
 }
 
-/* line 359, ../sass/screen.scss */
+/* line 361, ../sass/screen.scss */
 body.bp #event_gallery {
   width: 100%;
 }
-/* line 361, ../sass/screen.scss */
+/* line 363, ../sass/screen.scss */
 body.bp #event_gallery #events {
   padding: 0px;
   overflow: hidden;
 }
-/* line 365, ../sass/screen.scss */
+/* line 367, ../sass/screen.scss */
 body.bp #event_gallery #events .event .title {
   font-size: 24px;
 }
-/* line 368, ../sass/screen.scss */
+/* line 370, ../sass/screen.scss */
 body.bp #event_gallery #events .event .tickets {
   float: right;
   margin-top: -50px;
 }
-/* line 371, ../sass/screen.scss */
+/* line 373, ../sass/screen.scss */
 body.bp #event_gallery #events .event .tickets a {
   font-size: 20px;
   text-decoration: none;
 }
-/* line 376, ../sass/screen.scss */
+/* line 378, ../sass/screen.scss */
 body.bp #event_gallery #events .event .logo {
   clear: both;
   display: inline-block;
@@ -1250,11 +1246,11 @@ body.bp #event_gallery #events .event .logo {
   -webkit-box-shadow: 2px 2px 2px #222222;
   text-align: center;
 }
-/* line 385, ../sass/screen.scss */
+/* line 387, ../sass/screen.scss */
 body.bp #event_gallery #events .event .logo img {
   max-width: 250px;
 }
-/* line 389, ../sass/screen.scss */
+/* line 391, ../sass/screen.scss */
 body.bp #event_gallery #events .event .info {
   padding: 10px 15px;
   width: 640px;
@@ -1277,7 +1273,7 @@ body.bp #event_gallery #events .event .info {
   margin-left: 20px;
   overflow: auto;
 }
-/* line 403, ../sass/screen.scss */
+/* line 405, ../sass/screen.scss */
 body.bp #event_gallery #event_picker {
   margin: 40px auto;
   padding: 10px;
@@ -1296,25 +1292,25 @@ body.bp #event_gallery #event_picker {
   border-bottom-left-radius: 8px;
   background-color: #000;
 }
-/* line 409, ../sass/screen.scss */
+/* line 411, ../sass/screen.scss */
 body.bp #event_gallery #event_picker .event_icon {
   display: inline-block;
   height: 60px;
   padding: 0 10px;
   position: relative;
 }
-/* line 414, ../sass/screen.scss */
+/* line 416, ../sass/screen.scss */
 body.bp #event_gallery #event_picker .event_icon .logo {
   max-width: 100px;
   overflow: hidden;
   cursor: pointer;
 }
-/* line 418, ../sass/screen.scss */
+/* line 420, ../sass/screen.scss */
 body.bp #event_gallery #event_picker .event_icon .logo img {
   height: 70px;
   position: relative;
 }
-/* line 423, ../sass/screen.scss */
+/* line 425, ../sass/screen.scss */
 body.bp #event_gallery #event_picker .event_icon .info {
   position: absolute;
   top: -66px;
@@ -1339,49 +1335,49 @@ body.bp #event_gallery #event_picker .event_icon .info {
   width: 200px;
   z-index: 80;
 }
-/* line 437, ../sass/screen.scss */
+/* line 439, ../sass/screen.scss */
 body.bp #event_gallery #event_picker .picker-left {
   float: left;
 }
-/* line 440, ../sass/screen.scss */
+/* line 442, ../sass/screen.scss */
 body.bp #event_gallery #event_picker .picker-right {
   float: right;
 }
 
-/* line 446, ../sass/screen.scss */
+/* line 448, ../sass/screen.scss */
 body.bp #body_content_right {
   margin-bottom: 40px;
 }
-/* line 447, ../sass/screen.scss */
+/* line 449, ../sass/screen.scss */
 body.bp #body_content_right h1 {
   font-size: 16px;
 }
-/* line 448, ../sass/screen.scss */
+/* line 450, ../sass/screen.scss */
 body.bp #body_content_right h2 {
   font-size: 14px;
 }
-/* line 449, ../sass/screen.scss */
+/* line 451, ../sass/screen.scss */
 body.bp #body_content_right h3 {
   font-size: 13px;
 }
-/* line 450, ../sass/screen.scss */
+/* line 452, ../sass/screen.scss */
 body.bp #body_content_right h4 {
   font-size: 12px;
 }
-/* line 451, ../sass/screen.scss */
+/* line 453, ../sass/screen.scss */
 body.bp #body_content_right h5 {
   font-size: 11px;
 }
-/* line 452, ../sass/screen.scss */
+/* line 454, ../sass/screen.scss */
 body.bp #body_content_right h6 {
   font-size: 10px;
 }
-/* line 453, ../sass/screen.scss */
+/* line 455, ../sass/screen.scss */
 body.bp #body_content_right h1, body.bp #body_content_right h2, body.bp #body_content_right h3, body.bp #body_content_right h4, body.bp #body_content_right h5, body.bp #body_content_right h6 {
   font-weight: bold;
 }
 
-/* line 457, ../sass/screen.scss */
+/* line 459, ../sass/screen.scss */
 body.bp .article {
   border-bottom: 1px solid white;
   margin-bottom: 40px;
@@ -1398,11 +1394,11 @@ body.bp .article {
   border-bottom-left-radius: 8px;
   border: 1px solid #222222;
 }
-/* line 465, ../sass/screen.scss */
+/* line 467, ../sass/screen.scss */
 body.bp .article .article-body {
   padding: 30px 10px 10px 10px;
 }
-/* line 468, ../sass/screen.scss */
+/* line 470, ../sass/screen.scss */
 body.bp .article p.article-pub-date {
   display: inline-block;
   float: right;
@@ -1410,7 +1406,7 @@ body.bp .article p.article-pub-date {
   padding: 0 10px 0 0;
   color: #ccccff;
 }
-/* line 475, ../sass/screen.scss */
+/* line 477, ../sass/screen.scss */
 body.bp .article h3 {
   padding: 10px;
   margin: 0;
@@ -1422,18 +1418,18 @@ body.bp .article h3 {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
 }
-/* line 480, ../sass/screen.scss */
+/* line 482, ../sass/screen.scss */
 body.bp .article h3 a {
   color: #fefeff;
 }
 
-/* line 487, ../sass/screen.scss */
+/* line 489, ../sass/screen.scss */
 body.bp ul.sidebar_events {
   margin: 0;
   padding: 0;
   list-stlye: none;
 }
-/* line 491, ../sass/screen.scss */
+/* line 493, ../sass/screen.scss */
 body.bp ul.sidebar_events li {
   list-style: none;
   margin-bottom: 8px;
@@ -1441,12 +1437,12 @@ body.bp ul.sidebar_events li {
   border-bottom: #ccc 1px dotted;
   line-height: 14px;
 }
-/* line 497, ../sass/screen.scss */
+/* line 499, ../sass/screen.scss */
 body.bp ul.sidebar_events li a {
   color: white;
   text-decoration: none;
 }
-/* line 500, ../sass/screen.scss */
+/* line 502, ../sass/screen.scss */
 body.bp .side_body p {
   font-size: 11px;
 }
diff --git a/vendor/plugins/events/app/views/events/index.html.haml b/vendor/plugins/events/app/views/events/index.html.haml
index 0d5dc19..5997aa0 100644
--- a/vendor/plugins/events/app/views/events/index.html.haml
+++ b/vendor/plugins/events/app/views/events/index.html.haml
@@ -2,11 +2,8 @@
   %h1 Shows at the Field
   %ul#events
     - @events.each do |event|
-      - event.tags = 'music' if event.title == "Synergy Story Slam"
-      - event.tags = 'theatre' if event.title == "Ruth"
-      - event.tags = 'comedy' if event.title == "The Labyrinth"
-      - event.tags = 'other' if event.title == "The Songs of Robert"
-      %li{:class=>"event #{event.tags} #{cycle('even', 'odd')}"}
+      - event.tags = 'other' if event.tags.blank?
+      %li{:class=>"event all #{event.tags} #{cycle('even', 'odd')}"}
         - unless event.tags.blank?
           %span.tag_marker{:class=>event.tags} &nbsp;
         %span.title
@@ -25,10 +22,11 @@
         
 - content_for :body_content_right do
   #filters
-    .filter.theatre.active{:rel=>'theatre'} theatre
-    .filter.comedy.active{:rel=>'comedy'} comedy
-    .filter.music.active{:rel=>'music'} music
-    .filter.other.active{:rel=>'other'} etcetera
+    .filter.theatre{:rel=>'theatre'} theatre
+    .filter.comedy{:rel=>'comedy'} comedy
+    .filter.music{:rel=>'music'} music
+    .filter.other{:rel=>'other'} etcetera
+    .filter.all{:rel=>'all'} everything
     - if @page[:side_body]
       %hr
       .side_body= @page[:side_body]