js and css files

.gitignore

@@ -5,3 +5,5 @@ config.js
 node_modules
 components
 _site
+pictures
+temp.js

public/css/jquery.notifyBar.css

@@ -0,0 +1,85 @@
+/*
+*  Notify Bar - jQuery plugin
+*
+*  Copyright (c) 2009-2013 Dmitri Smirnov
+*
+*  Licensed under the MIT license:
+*  http://www.opensource.org/licenses/mit-license.php
+*  
+*  Version: 1.4
+*
+*  Project home:
+*  http://www.whoop.ee/posts/2013-04-05-the-resurrection-of-jquery-notify-bar/
+*/
+
+/* Default bars' style */
+.jquery-notify-bar {
+  width:100%;
+  position:fixed;
+  top:0;
+  left:0;
+  z-index:32768;
+  background-color:#efefef;
+  font-size:18px;
+  color:#000;
+  text-align:center;
+  font-family: Arial, Verdana, sans-serif;
+  padding:20px 0px;
+  cursor: pointer;
+  border-bottom:1px solid #ddd;
+  -webkit-box-shadow: inset 0 -1px 0 0 #fff;
+     -moz-box-shadow: inset 0 -1px 0 0 #fff;
+          box-shadow: inset 0 -1px 0 0 #fff;
+background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.5)), to(rgba(255, 255, 255, 0)));
+background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+background-image: -o-linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+background-image: linear-gradient(rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
+}
+.jquery-notify-bar.bottom {
+  bottom:0;
+  top:auto;
+  border-top:1px solid #ddd;
+  border-bottom:0;
+  -webkit-box-shadow: inset 0 1px 0 0 #fff;
+     -moz-box-shadow: inset 0 1px 0 0 #fff;
+          box-shadow: inset 0 1px 0 0 #fff;
+}
+.jquery-notify-bar.top {}
+
+/* Style for errors */
+.jquery-notify-bar.error {
+  color:#f00;
+  background-color:#fdd;
+}
+.jquery-notify-bar.error .notify-bar-text-wrapper {
+  background: transparent url("../images/cross.png") no-repeat center left;
+  padding-left:20px;
+}
+
+/* Style for warning */
+.jquery-notify-bar.warning {
+  color:#000;
+  background-color:#fffaaa;
+}
+.jquery-notify-bar.warning .notify-bar-text-wrapper {
+  background: transparent url("../images/error.png") no-repeat center left;
+  padding-left:20px;
+}
+
+/* Style for success (notice) */
+.jquery-notify-bar.success {
+  color:#060;
+  background-color:#BBFFB6;
+}
+.jquery-notify-bar.success .notify-bar-text-wrapper {
+  background: transparent url("../images/tick.png") no-repeat center left;
+  padding-left:20px;
+}
+
+/* Style for close button */
+.notify-bar-close {
+  position:absolute;
+  left:95%;
+  font-size:11px;
+}

public/js/jquery.notifyBar.js

@@ -0,0 +1,153 @@
+/*
+* Notify Bar - $ plugin
+*
+* Copyright (c) 2009-2013 Dmitri Smirnov
+*
+* Licensed under the MIT license:
+* http://www.opensource.org/licenses/mit-license.php
+*
+* Version: 1.4
+*
+* Project home:
+* http://www.whoop.ee/posts/2013-04-05-the-resurrection-of-jquery-notify-bar/
+*/
+(function ($) {
+
+    $.notifyBar = function (options) {
+        var rand = parseInt(Math.random() * 100000000, 0),
+            text_wrapper,
+            bar = {},
+            settings = {};
+        
+        settings = $.extend({
+            html           : 'Your message here',
+            delay          : 2000,
+            animationSpeed : 200,
+            cssClass       : '',
+            jqObject       : '',
+            close          : false,
+            closeText      : 'Close [X]',
+            closeOnClick   : true,
+            closeOnOver    : false,
+            onBeforeShow   : null,
+            onShow         : null,
+            onBeforeHide   : null,
+            onHide         : null,
+            position       : 'top'
+        }, options);
+        
+        // Use these methods as private.
+        this.fn.showNB = function () {
+            if (typeof settings.onBeforeShow === 'function') {
+                settings.onBeforeShow.call();
+            }
+            $(this).stop().slideDown(asTime, function () {
+                if (typeof settings.onShow === 'function') {
+                    settings.onShow.call();
+                }
+            });
+        };
+
+        this.fn.hideNB = function (delayed) {
+            if (typeof settings.onBeforeHide === 'function') {
+                settings.onBeforeHide.call();
+            }
+            $(this).stop().slideUp(asTime, function () {
+                if (bar.attr("id") === "__notifyBar" + rand) {
+                    $(this).slideUp(asTime, function () {
+                        $(this).remove();
+                        if (typeof settings.onHide === 'function') {
+                            settings.onHide.call();
+                        }
+                    });
+                } else {
+                    $(this).slideUp(asTime, function () {
+                        if (typeof settings.onHide === 'function') {
+                            settings.onHide.call();
+                        }
+                    });
+                }
+            });
+        };
+
+        if (settings.jqObject) {
+            bar = settings.jqObject;
+            settings.html = bar.html();
+        } else {
+            bar = $("<div></div>")
+                   .addClass("jquery-notify-bar")
+                   .addClass(settings.cssClass)
+                   .attr("id", "__notifyBar" + rand);
+        }
+        text_wrapper = $("<span></span>")
+                            .addClass("notify-bar-text-wrapper")
+                            .html(settings.html);
+
+        bar.html(text_wrapper).hide();
+
+        var id = bar.attr("id");
+        switch (settings.animationSpeed) {
+            case "slow":
+                asTime = 600;
+                break;
+            case "default":
+            case "normal":
+                asTime = 400;
+                break;
+            case "fast":
+                asTime = 200;
+                break;
+            default:
+                asTime = settings.animationSpeed;
+        }
+        if (bar !== 'object') {
+            $("body").prepend(bar);
+        }
+        
+        // Style close button in CSS file
+        if (settings.close) {
+            // If close settings is true. Set delay to one billion seconds.
+            // It'a about 31 years - mre than enough for cases when notify bar is used.
+            settings.delay = Math.pow(10, 9);
+            bar.append($("<a href='#' class='notify-bar-close'>" + settings.closeText + "</a>"));
+            $(".notify-bar-close").click(function (event) {
+                event.preventDefault();
+                bar.hideNB();
+            });
+        }
+            
+        // Check if we've got any visible bars and if we have,
+        // slide them up before showing the new one
+        if ($('.jquery-notify-bar:visible').length > 0) {
+            $('.jquery-notify-bar:visible').stop().slideUp(asTime, function () {
+                bar.showNB();
+            });
+        } else {
+            bar.showNB();
+        }
+        
+        // Allow the user to click on the bar to close it
+        if (settings.closeOnClick) {
+            bar.click(function () {
+                bar.hideNB();
+            });
+        }
+
+        // Allow the user to move mouse on the bar to close it
+        if (settings.closeOnOver) {
+            bar.mouseover(function () {
+                bar.hideNB();
+            });
+        }
+             
+        setTimeout(function () {
+            bar.hideNB(settings.delay);
+        }, settings.delay + asTime);
+        
+        if (settings.position === 'bottom') {
+            bar.addClass('bottom');
+        } else if (settings.position === 'top') {
+            bar.addClass('top');
+        }
+    };
+})(jQuery);

views/index.ejs

@@ -6,6 +6,7 @@
     <title><%= title %></title>
     <link rel="stylesheet" href="/css/fonts.css">
     <link rel="stylesheet" href="/css/style.css">
+    <link rel="stylesheet" href="/css/jquery.notifyBar.css">
     <% for(var i=0; i<styles.length; i++) {%>
     <link rel="stylesheet" href="<%= styles[i] %>"><% } %>
   </head>
@@ -14,6 +15,7 @@
   <script type="text/javascript" src="/js/jquery.fullscreen-min.js"></script>
   <script type="text/javascript" src="/js/polyfills.js"></script>
   <script type="text/javascript" src="/js/cockpit.js"></script>
+  <script type="text/javascript" src="/js/jquery.notifyBar.js"></script>
   <% for(var i=0; i<scripts.length; i++) {%>
   <script type="text/javascript" src="<%= scripts[i] %>"></script><% } %>