Add cookie law message

css/style.css

@@ -56,18 +56,29 @@ h1 br {
   position: fixed; bottom: 0px; left: 0px;
 }
 
-#achievements-container .alert {
+#messages-container {
+  position: fixed; bottom: 0px; right: 0px;
+}
+
+#achievements-container .alert,
+#messages-container .alert {
   margin-bottom: 10px; position: relative;
 }
 
-#achievements-container .alert-glyph {
+#achievements-container .alert-glyph,
+#messages-container .alert-glyph {
   float:left; font-size: 20px; margin-right: 10px;
 }
 
-#achievements-container .alert-text {
+#achievements-container .alert-text,
+#messages-container .alert-text {
   font-size: 14px; font-weight: bold;
 }
 
+#messages-container .btn {
+  float:right; font-weight: bold;
+}
+
 #Status {
   font-size: x-large;
 }

index.html

@@ -154,6 +154,7 @@
     </div>
 
     <div id="achievements-container" class="col-xs-3"></div>
+    <div id="messages-container" class="col-xs-3"></div>
 
     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
       <div class="modal-dialog">
@@ -192,6 +193,7 @@
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.17/angular.min.js"></script>
     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
+    <script src="js/external/jquery.cookie-1.4.1.min.js"></script>
     <script src="js/external/retina.js"></script>
 
     <script src="js/storage.js"></script>

js/achievements.js

@@ -101,7 +101,7 @@ var achievements =
             {
                 return function()
                 {
-                    a.slideUp(300);
+                    a.slideUp(300, function() { a.remove(); });
                 };
             };
 

js/external/jquery.cookie-1.4.1.min.js

@@ -0,0 +1,2 @@
+/*! jquery.cookie v1.4.1 | MIT */
+!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){function b(a){return h.raw?a:encodeURIComponent(a)}function c(a){return h.raw?a:decodeURIComponent(a)}function d(a){return b(h.json?JSON.stringify(a):String(a))}function e(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(g," ")),h.json?JSON.parse(a):a}catch(b){}}function f(b,c){var d=h.raw?b:e(b);return a.isFunction(c)?c(d):d}var g=/\+/g,h=a.cookie=function(e,g,i){if(void 0!==g&&!a.isFunction(g)){if(i=a.extend({},h.defaults,i),"number"==typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[b(e),"=",d(g),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=e?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;o>n;n++){var p=m[n].split("="),q=c(p.shift()),r=p.join("=");if(e&&e===q){l=f(r,g);break}e||void 0===(r=f(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}});

js/ui.js

@@ -51,6 +51,21 @@ var UI = (function () {
     }});
   }
 
+  if (typeof $.cookie('cookielaw') === 'undefined') {
+    var alert = '<div id="cookielaw" class="alert alert-info" role="alert">';
+    alert += '<button type="button" class="btn btn-primary">OK</button>';
+    alert += '<span class="glyphicon glyphicon-info-sign alert-glyph"></span> <span class="alert-text">Particle Clicker uses local storage to store your current progress.</span>';
+    alert += '</div>';
+    alert = $(alert);
+    alert.find('button').click(function ()
+    {
+      $.cookie('cookielaw', 'informed', { expires: 365 });
+      $('#cookielaw').slideUp(300, function() { $('#cookielaw').remove(); });
+    })
+
+    $('#messages-container').append(alert);
+  }
+
   return {
     showModal: showModal,
     showUpdateValue: showUpdateValue