Adding localstorage support

css/style.css

@@ -138,6 +138,23 @@ ul, li {
   width : 200px;
 }
 
+/* User messages */
+.user-message {
+    position: fixed;
+    bottom: 0;
+    left: 40%;
+    background-color: #F9EDBE;
+    padding: 7px 22px;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+    font-family: ‘Arial Black’, Gadget, sans-serif;
+    color: #222;
+    border: #F0C36D 1px solid;
+    border-bottom: 0;
+    font-weight: bold;
+    font-size: 14px;  
+}
+
 /* Force apparition of scrollbars on leopard */
 ::-webkit-scrollbar {
     -webkit-appearance: none;

js/piskel.js

@@ -40,7 +40,10 @@
         } else {
           return "#" + color;
         }
-      }
+      },
+
+      // setTimeout/setInterval references:
+      localStorageThrottler = null
       ;
 
 
@@ -55,6 +58,33 @@
       this.initPreviewSlideshow();
       this.initAnimationPreview();
       this.initColorPicker();
+
+      if(window.localStorage && window.localStorage['snapShot']) {
+        var message = document.createElement('div');
+        message.id = "user-message";
+        message.className = "user-message";
+        var reloadLink = "<a href='#' onclick='piskel.restoreFromLocalStorage()'>reload</a>";
+        var discardLink = "<a href='#' onclick='piskel.cleanLocalStorage()'>discard</a>";
+        message.innerHTML = "Non saved version found. " + reloadLink + " or " + discardLink;
+        message.onclick = function() {
+          message.parentNode.removeChild(message);
+        };
+        document.body.appendChild(message);
+      }
+    },
+
+    persistToLocalStorage: function() {
+      console.log('persited')
+      window.localStorage['snapShot'] = frameSheet.serialize();
+    },
+
+    restoreFromLocalStorage: function() {
+      frameSheet.deserialize(window.localStorage['snapShot']);
+      this.setActiveFrameAndRedraw(0);
+    },
+
+    cleanLocalStorage: function() {
+      delete window.localStorage['snapShot'];
     },
 
     setActiveFrame: function(index) {
@@ -328,7 +358,18 @@
       if (color != currentFrame[col][row]) {
         currentFrame[col][row] = color;
         this.drawPixelInCanvas(row, col, color, drawingAreaCanvas, drawingCanvasDpi);
-      }      
+      }
+
+      // Persist to localStorage when drawing. We throttle localStorage accesses
+      // for high frequency drawing (eg mousemove).
+      if(localStorageThrottler == null) {
+          localStorageThrottler = window.setTimeout(function() {
+            piskel.persistToLocalStorage();
+            localStorageThrottler = null;
+          }, 1000);
+      }
+      
+           
     },
 
     drawPixelInCanvas : function (row, col, color, canvas, dpi) {