moves example handlers to appropriate location, fixes swap style button

docs/button.html

@@ -72,16 +72,13 @@
     </li>
   </ul>
 </div>
-<div class="ui left attached vertical blue menu buttons">
-  <div class="ui huge menu button">Menu</div>
+<div class="ui huge left attached vertical menu buttons">
+  <div class="ui blue menu button">Menu</div>
+  <div class="ui swap grey button">Swap Style</div>
+</div>
+<div class="fixed menu">
 </div>
 <div class="full container">
-<!--   <ul class="ui vertical panel sub menu">
-    <li>Standard</li>
-    <li>State</li>
-    <li>Plural</li>
-    <li>Variations</li>
-  </ul> -->
   <div class="container">
     <h1>Semantic UI Spec</h1>
 

docs/javascript/example.js

@@ -8,57 +8,32 @@ shape.ready = function() {
 
   // selector cache
   var 
-    $demo            = $('.demo'),
     $ui              = $('.ui'),
-    $directionButton = $('.direction .button'),
-    $shapeButton     = $('.shape .button'),
+    $swap            = $('.swap.button'),
+    $menu            = $('.menu.button'),
+    $demo            = $('.demo'),
     // alias
     handler
   ;
 
   // event handlers
   handler = {
-    rotate: function() {
-      var
-        direction = $(this).data('direction') || false,
-        animation = $(this).data('animation') || false
-      ;
-      if(direction && animation) {
-        $('.active.side')
-          .next()
-        ;
-        $demo
-          .shape(animation + '.' + direction)
-        ;
-      }
-    },
-
-    removeShape: function(){
-      var
-        shape = $(this).data('shape') || false
-      ;
-      if(shape) {
-        $demo
-          .removeClass(shape)
-        ;
-      }
-    },
-
-    changeShape: function() {
-      var
-        $shape       = $(this),
-        $otherShapes = $shape.siblings(),
-        shape        = $shape.data('shape')
-      ;
-      $shape
-        .addClass('active')
-      ;
-      $otherShapes  
-        .removeClass('active')
-        .each(handler.removeShape)
-      ;
-      $demo
-        .addClass(shape)
+    swapStyle: function() {
+      $('head link')
+        .each(function() {
+          var
+            href = $(this).attr('href')
+          ;
+          console.log (href, href.search('flat') );
+          if( href.search('flat') > -1 ) {
+            console.log('zz');
+            $(this).attr('href', href.replace('flat', 'shaded'));
+          }
+          else {
+            console.log('aaa');
+            $(this).attr('href', href.replace('shaded', 'flat'));
+          }
+        })
       ;
     }
   };
@@ -67,20 +42,15 @@ shape.ready = function() {
   $ui
     .state()
   ;
-  $demo
-    .shape()
-  ;
-  $directionButton
-    .on('click', handler.rotate)
-  ;
-  $shapeButton
-    .on('click', handler.changeShape)
+
+  $swap
+    .on('click', handler.swapStyle)
   ;
 
-  $('.menu.button')
-  .sidr({
-    name: 'menu'
-  })
+  $menu
+    .sidr({
+      name: 'menu'
+    })
   ;
 
 };

docs/javascript/shape.js

@@ -0,0 +1,82 @@
+// namespace
+var shape = {
+  handler: {}
+};
+
+// ready event
+shape.ready = function() {
+
+  // selector cache
+  var 
+    $demo            = $('.demo'),
+    $directionButton = $('.direction .button'),
+    $shapeButton     = $('.shape .button'),
+    // alias
+    handler
+  ;
+
+  // event handlers
+  handler = {
+    rotate: function() {
+      var
+        direction = $(this).data('direction') || false,
+        animation = $(this).data('animation') || false
+      ;
+      if(direction && animation) {
+        $('.active.side')
+          .next()
+        ;
+        $demo
+          .shape(animation + '.' + direction)
+        ;
+      }
+    },
+
+    removeShape: function(){
+      var
+        shape = $(this).data('shape') || false
+      ;
+      if(shape) {
+        $demo
+          .removeClass(shape)
+        ;
+      }
+    },
+
+    changeShape: function() {
+      var
+        $shape       = $(this),
+        $otherShapes = $shape.siblings(),
+        shape        = $shape.data('shape')
+      ;
+      $shape
+        .addClass('active')
+      ;
+      $otherShapes  
+        .removeClass('active')
+        .each(handler.removeShape)
+      ;
+      $demo
+        .addClass(shape)
+      ;
+    }
+  };
+
+  // attach events
+  $demo
+    .shape()
+  ;
+  $directionButton
+    .on('click', handler.rotate)
+  ;
+  $shapeButton
+    .on('click', handler.changeShape)
+  ;
+  
+};
+
+
+// attach ready event
+$(document)
+  .ready(shape.ready)
+;

docs/shape.html

@@ -23,6 +23,7 @@
 
   <script src="library/sidr.js" type="text/javascript"></script>
   <script src="javascript/example.js" type="text/javascript"></script>
+  <script src="javascript/shape.js" type="text/javascript"></script>
 
 
 

src/ui/flat/button.css

@@ -513,15 +513,8 @@ input + .ui.attached.button.down {
   width: 100%;
   height: 100%;
   content: '';
-  /* standard */
-  background: url(../images/throbber-blue-tiny.gif) no-repeat 50% 50%;
-  /* css 3 multi image */
-  background-image: url(../images/throbber-blue-tiny.gif);
-  background-image: url(../images/throbber-blue-tiny.gif);
-  background-image: url(../images/throbber-blue-tiny.gif);
-  background-image: url(../images/throbber-blue-tiny.gif);
-  background-image: url(../images/throbber-blue-tiny.gif);
-  background-position: 50% 50%, 0px 0px;
+  background: #EEEEEE url(../images/throbber-blue-tiny.gif) no-repeat 50% 50%;
+  background-position: 50% 50%;
   background-repeat: no-repeat;
 
   -moz-border-radius: 3px;