Save button

turns blue when the page is unsaved

css/style.css

@@ -24,6 +24,7 @@ p {
   margin: 0;
 }
 
+
 #control {
   z-index: 199999;
   min-width: 865px;
@@ -915,8 +916,27 @@ ie6, li {
   background-position: 8px 7px;
 }
 
+.unsaved {
+  background-color: #2ba6cb;
+  border: 1px solid #1e728c;
+  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+                      1px 2px 1px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+                      1px 2px 1px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset,
+                      1px 2px 1px rgba(0, 0, 0, 0.2);
+  color: white;
+  /*font-weight: bold; */
+  -webkit-transition: background-color 0.15s ease-in-out; 
+  -moz-transition: background-color 0.15s ease-in-out; 
+  -o-transition: background-color 0.15s ease-in-out; 
+  transition: background-color 0.15s ease-in-out; 
+  /* Hovers */ /* Sizes */ /* Colors */ /* Radii */ /* Layout */ /* Disabled ---------- */ 
+}
+
 .button.download {
   padding-left: 24px;
+
 /*  background-image: url(/images/arrow_down_12x12.png);*/
   background-image: url(../images/download.png);
   background-repeat: no-repeat;

js/editors/unsaved.js

@@ -24,13 +24,15 @@ function updateTitle(revert, onload) {
   // if (jsbin.settings.home) title = jsbin.settings.home + '@' + title;
   if (editors.html.ready && editors.javascript.ready) {
     if (!revert) {
+      $('#save').addClass('unsaved');
       document.title = title + ' [unsaved]';
       warn_on_unload = "You have unsaved changes!";
       // if ($revert.addClass('enable').is(':hidden')) {
       //   $revert[onload ? 'show' : 'fadeIn']().next().removeClass('left');
       // }
     } else {
       document.title = title;
+      $('#save').removeClass('unsaved');
     }
   }
 }

nav.php

@@ -3,13 +3,14 @@
     <div class="buttons">
       <a id="account" class="tab button gap" href="<?php echo ROOT?>">New Page</a>
 
-      <a id="view" target="<?php echo $code_id?>" class="tab button group light left" href="http://<?php echo $_SERVER['HTTP_HOST'] . ROOT . $code_id?>">View</a>
-
-        <?php if ($code_id) : ?>
-          <a id="save" title="Save a new revision" class="button light save group" href="<?php echo $code_id_path?>save">Save</a>
+       <?php if ($code_id) : ?>
+          <a id="save" title="Save a new revision" class="button light save group left" href="<?php echo $code_id_path?>save">Save</a>
         <?php else : ?>
-          <a id="save" class="tab button light save group" href="<?php echo ROOT?>save">Save</a>
+          <a id="save" class="tab button light save group left" href="<?php echo ROOT?>save">Save</a>
         <?php endif ?>
+      <a id="view" target="<?php echo $code_id?>" class="tab button group light" href="http://<?php echo $_SERVER['HTTP_HOST'] . ROOT . $code_id?>">View</a>
+
+
 
         <?php if ($ownership) :?>
                 <div class="button group gap right tall">