diff --git a/application/views/Template/datta-able/header.php b/application/views/Template/datta-able/header.php
index 36884cb41816250c553778ca3e29dbded938b1d9..090715fd74075dfed53a07f57dc96b2e42d32164 100644
--- a/application/views/Template/datta-able/header.php
+++ b/application/views/Template/datta-able/header.php
@@ -22,5 +22,7 @@
     <!-- vendor css -->
     <link rel="stylesheet"  href="<?php echo base_url()?>assets/css/style.css">
     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
+    <link rel="stylesheet"  href="<?php echo base_url()?>assets/plugins/jquery-toast-plugin-master/src/jquery.toast.css">
+    
 </head>
 <body class="hold-transition sidebar-mini layout-fixed">
diff --git a/application/views/Template/datta-able/javascript.php b/application/views/Template/datta-able/javascript.php
index 2a4f0f4c807cff2b9751125938fb691c362a2a4d..40c2f7ebfffefd4904e12513b8bbf9b41237eb3a 100644
--- a/application/views/Template/datta-able/javascript.php
+++ b/application/views/Template/datta-able/javascript.php
@@ -6,7 +6,10 @@
 <script src="<?php echo base_url()?>assets/js/vendor-all.min.js"></script>
 <script src="<?php echo base_url()?>assets/plugins/bootstrap/js/bootstrap.min.js"></script>
 <script src="<?php echo base_url()?>assets/js/pcoded.min.js"></script>  
+<script src="<?php echo base_url()?>assets/plugins/jquery-toast-plugin-master/src/jquery.toast.js"></script>
+
 <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
+
 <!-- <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> -->
 
diff --git a/application/views/User/v_user_create.php b/application/views/User/v_user_create.php
new file mode 100644
index 0000000000000000000000000000000000000000..2c1c8f4511d0e9d0ad136fccde626f52dfede98e
--- /dev/null
+++ b/application/views/User/v_user_create.php
@@ -0,0 +1,80 @@
+<style>
+div.dataTables_filter{
+    padding-bottom: 0.7em;
+}
+.dataTables_length{
+    padding-top: 0.2em;
+}
+
+</style>
+<div class="pcoded-main-container">
+    <div class="pcoded-wrapper">
+        <div class="pcoded-content">
+            <div class="pcoded-inner-content">
+                <!-- [ breadcrumb ] start -->
+                <div class="page-header">
+                    <div class="page-block">
+                        <div class="row align-items-center">
+                            <div class="col-md-12">
+                                <div class="page-header-title">
+                                    <!-- <h5 class="m-b-10">จัดการข้อมูลกิจกรรรม</h5> -->
+                                </div>
+                                <ul class="breadcrumb">
+                                    <li class="breadcrumb-item"><a href="<?php echo site_url().'/User/show_user_manage' ;?>">User Manage</a></li>
+                                    <li class="breadcrumb-item"><a href="">User Create</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <!-- [ breadcrumb ] end -->
+                <div class="main-body">
+                    <div class="page-wrapper">
+                        <!-- [ Main Content ] start -->
+                        <div class="row">
+                            <div class="col-sm-12">
+                                <div class="card">
+                                    <div class="card-header">
+                                        <h5>User Create</h5>
+                                    </div>
+                                    <div class="card-block">
+
+
+
+
+
+                                    
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- [ Main Content ] end -->
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+
+
+function toastSuccess(){
+    $.toast({
+    heading: 'Success',
+    showHideTransition: 'slide',
+    icon: 'success'
+    })
+}
+
+function toastFail(){
+    $.toast({
+        heading: 'Fail',
+        showHideTransition: 'slide',
+        icon: 'error'
+    })
+}
+
+
+
+</script>
\ No newline at end of file
diff --git a/application/views/User/v_user_edit.php b/application/views/User/v_user_edit.php
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/assets/plugins/jquery-toast-plugin-master/README.md b/assets/plugins/jquery-toast-plugin-master/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..7fa6a4272c1f207fa56f5032985c925447549cfd
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/README.md
@@ -0,0 +1,147 @@
+# Jquery Toast Plugin
+
+A plugin to show highly customizable notifications to the user. 
+
+<img src="http://i.imgur.com/RRrb0KE.png" />
+
+# How to use
+
+- You can install the plugin via Bower:
+
+    ```js
+    bower install jquery-toast-plugin
+    ```
+    
+    or via `npm`
+    
+    ```js
+    npm install jquery-toast-plugin
+    ```
+    
+    Or directly download the repository and place the content of `dist` wherever you can access them.
+- Include the CSS and JS files.
+- Simply do ```$.toast('Toast message to be shown')``` Of course it would be the world's simplest toast message but believe me **you can do a lot more** with the options.
+
+# Demo
+For some quick demos and a detailed documentation accompanied by the demos for each of the available options can be accessed through http://kamranahmed.info/toast
+
+## Quick usage examples
+**Simple textual toast**
+```javascript
+// Non sticky version
+$.toast("Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.")
+// Sticky version
+$.toast({
+  text : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, consequuntur doloremque eveniet eius eaque dicta repudiandae illo ullam. Minima itaque sint magnam dolorum asperiores repudiandae dignissimos expedita, voluptatum vitae velit.",
+  hideAfter : false
+})
+```
+
+**Toast using HTML as a text**
+```javascript
+// Non sticky
+$.toast("Let's test some HTML stuff... <a href='#'>github</a>")
+// sticky
+$.toast({
+  text : "<strong>Remember!</strong> You can <span style='font-weight: bold; color:red;' class='horribly-styled'>always</span> introduce your own × HTML and <span style='font-size: 18px;'>CSS</span> in the toast.",
+  hideAfter : false
+})
+```
+
+**Unordered list elements as the text of toast using array**
+```javascript
+// Non sticky version
+$.toast(["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"])
+// Sticky version
+$.toast({
+  text : ["Ubuntu : One of it's kind", "Sublime Text : Productivity unleashed", "HeidiSQL : Just love it", "Github : Just Lovely"],
+  hideAfter : false
+})
+```
+
+**Changing the animations**
+```javascript
+$.toast({ 
+  text : "Let's test some HTML stuff... <a href='#'>github</a>", 
+  showHideTransition : 'slide'  // It can be plain, fade or slide
+})
+```
+
+**Changing the formatting**
+```javascript
+$.toast({ 
+  text : "Let's test some HTML stuff... <a href='#'>github</a>", 
+  showHideTransition : 'slide',  // It can be plain, fade or slide
+  bgColor : 'blue',              // Background color for toast
+  textColor : '#eee',            // text color
+  allowToastClose : false,       // Show the close button or not
+  hideAfter : 5000,              // `false` to make it sticky or time in miliseconds to hide after
+  stack : 5,                     // `fakse` to show one stack at a time count showing the number of toasts that can be shown at once
+  textAlign : 'left',            // Alignment of text i.e. left, right, center
+  position : 'bottom-left'       // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values to position the toast on page
+})
+```
+
+**Resetting the toast**
+```javascript
+var myToast = $.toast('Some toast that needs to be removed.');
+myToast.reset(); // remove the toast "Some toast that needs to be removed"
+```
+What if I want to reset all the toasts at once? You may ask. Well in that case, you can do the following:
+```javascript
+$.toast().reset('all');
+```
+
+**Updating the toast**
+Suppose, you had shown some toast upon the page, a sticky toast for example and now you want to update the toast. You can do the following
+
+```javascript
+var myToast = $.toast({
+  text : 'Some toast that needs to show the success message after the ajax call.',
+  hideAfter : false,
+  bgColor : '#E01A31'
+});
+
+window.setTimeout(function(){
+  myToast.update({
+    text : '<strong>Updated after a few seconds</strong>',
+    bgColor : '#23B65D'
+  });
+}, 5000);
+```
+To learn more about how to use and customize it, head to <a href="http://kamranahmed.info/toast" target="_blank">http://kamranahmed.info/toast</a>. Also you can find a customizer there that will let you modify the look and feel of the toast however you like it.
+
+<hr>
+
+You can simply download the repo or if you are in rush the <a href="https://raw.githubusercontent.com/kamranahmedse/jquery-toast-plugin/master/jquery.toast.min.css" target="_blank">minified CSS</a> or <a href="https://raw.githubusercontent.com/kamranahmedse/jquery-toast-plugin/master/jquery.toast.css">non-minified CSS</a> can be found and <a href="https://raw.githubusercontent.com/kamranahmedse/jquery-toast-plugin/master/jquery.toast.min.js" target="_blank">minified JS</a> and <a href="https://raw.githubusercontent.com/kamranahmedse/jquery-toast-plugin/master/jquery.toast.js" target="_blank">non minified JS</a> can also be found.
+
+# Features
+<ul>
+  <li>Show different types of toasts i.e. informational, warning, errors and success</li>
+  <li>Custom <strong>toast background color</strong> and <strong>text color</strong></li>
+  <li>Ability to <strong>hack the CSS</strong> to add your own thing</li>
+  <li>
+    <strong>Text can be</strong> provided in the form of
+    <ul>
+      <li><strong>Array</strong> (It's elements will be changed to an un ordered list)</li>
+      <li><strong>Simple text</strong></li>
+      <li><strong>HTML</strong></li>
+    </ul>
+  </li>
+  <li><strong>Events support</strong> i.e. <code>beforeHide</code>, <code>afterHidden</code>, <code>beforeShow</code>, <code>afterShown</code></li>
+
+  <li><code>Fade</code> and <code>Slide</code> show/hide transitions support (More to come)</li>
+  <li>Supports showing the loader for the toast</li>
+  <li>You can <strong>position the toast, wherever you want</strong> there is support for <code>top-left</code>, <code>top-right</code> <code>bottom-left</code> and <strong>bottom-right</strong>, <code>top-center</code>, <code>bottom-center</code> and <code>mid-center</code> ...sighs! That's a whole lot of options, isn't it? No, you say. Ok then here is the most exciting thing, you can also introduce <strong>your own positioning</strong> just <strong>by passing a simple js object</strong> containing <code>{ top: - , bottom: -, left: -, right: - }</code> </li>
+
+  <li>Ability to add <strong>sticky toast</strong></li>
+
+  <li>Optional <strong>stack length can be defined</strong> (i.e. maximum number of toasts that can be shown at once)</li>
+
+</ul>
+
+Please report any bugs or features you would like added.
+
+# Copyright
+
+MIT © [Kamran Ahmed](http://kamranahmed.info)
diff --git a/assets/plugins/jquery-toast-plugin-master/bower.json b/assets/plugins/jquery-toast-plugin-master/bower.json
new file mode 100644
index 0000000000000000000000000000000000000000..72095189219d0d8c5fab7aefeb21c705b847dd76
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/bower.json
@@ -0,0 +1,35 @@
+{
+  "name": "jquery-toast-plugin",
+  "description": "A highly customizable jquery toast plugin",
+  "version": "1.3.1",
+  "main": [
+    "./dist/jquery.toast.min.js",
+    "./dist/jquery.toast.min.css"
+  ],
+  "moduleType": [],
+  "keywords": [
+    "jquery",
+    "toast-plugin",
+    "jquery-toasts",
+    "toast",
+    "notification",
+    "messages",
+    "jquery-notification"
+  ],
+  "authors": [
+    "Kamran Ahmed"
+  ],
+  "license": "MIT",
+  "homepage": "http://kamranahmed.info/toast",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "README.md"
+  ],
+  "dependencies": {
+    "jquery": ">=1.9.0"
+  }
+}
diff --git a/assets/plugins/jquery-toast-plugin-master/demos/css/jquery.toast.css b/assets/plugins/jquery-toast-plugin-master/demos/css/jquery.toast.css
new file mode 100644
index 0000000000000000000000000000000000000000..54ddf672150b73e5590a8dc44e9c1a7a12d92e50
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/demos/css/jquery.toast.css
@@ -0,0 +1,28 @@
+/**
+ * jQuery toast plugin created by Kamran Ahmed copyright MIT license 2014
+ */
+.jq-toast-wrap { display: block; position: fixed; width: 250px;  pointer-events: none !important; margin: 0; padding: 0; letter-spacing: normal; z-index: 9000 !important; }
+.jq-toast-wrap * { margin: 0; padding: 0; }
+
+.jq-toast-wrap.bottom-left { bottom: 20px; left: 20px; }
+.jq-toast-wrap.bottom-right { bottom: 20px; right: 40px; }
+.jq-toast-wrap.top-left { top: 20px; left: 20px; }
+.jq-toast-wrap.top-right { top: 20px; right: 40px; }
+
+.jq-toast-single { display: block; width: 100%; padding: 10px; margin: 0px 0px 5px; border-radius: 4px; font-size: 12px; font-family: arial, sans-serif; line-height: 17px; position: relative;  pointer-events: all !important; background-color: #444444; color: white; }
+
+.jq-toast-single h2 { font-family: arial, sans-serif; font-size: 14px; margin: 0px 0px 7px; background: none; color: inherit; line-height: inherit; letter-spacing: normal; }
+.jq-toast-single a { color: #eee; text-decoration: none; font-weight: bold; border-bottom: 1px solid white; padding-bottom: 3px; font-size: 12px; }
+
+.jq-toast-single ul { margin: 0px 0px 0px 15px; background: none; padding:0px; }
+.jq-toast-single ul li { list-style-type: disc !important; line-height: 17px; background: none; margin: 0; padding: 0; letter-spacing: normal; }
+
+.close-jq-toast-single { position: absolute; top: 3px; right: 7px; font-size: 14px; cursor: pointer; }
+
+.jq-toast-loader { display: block; position: absolute; top: -2px; height: 5px; width: 0%; left: 0; border-radius: 5px; background: red; }
+.jq-toast-loaded { width: 100%; }
+.jq-has-icon { padding: 10px 10px 10px 50px; background-repeat: no-repeat; background-position: 10px; }
+.jq-icon-info { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII='); background-color: #31708f; color: #d9edf7; border-color: #bce8f1; }
+.jq-icon-warning { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII='); background-color: #8a6d3b; color: #fcf8e3; border-color: #faebcc; }
+.jq-icon-error { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII='); background-color: #a94442; color: #f2dede; border-color: #ebccd1; }
+.jq-icon-success { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg=='); color: #dff0d8; background-color: #3c763d; border-color: #d6e9c6; }
\ No newline at end of file
diff --git a/assets/plugins/jquery-toast-plugin-master/demos/index.html b/assets/plugins/jquery-toast-plugin-master/demos/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..67491fa44a251e75445ad5edc5e672d6fdcdd2eb
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/demos/index.html
@@ -0,0 +1,987 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Demo - Toast Plugin</title>
+    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" href="css/jquery.toast.css">
+    <style type="text/css">
+        * { font-family: 'Roboto Slab', serif; margin: 0; padding: 0; }
+        hr { border: 1px solid #ccc; margin-bottom: 20px; }
+        h1, h2 { margin: 20px 0px 10px; }
+        a { text-decoration: none;}
+        .container { display: block; width: 1200px; margin: auto; }
+        strong { padding-bottom: 1px; border-bottom: 1px dotted; }
+        p { margin: 10px 0px; }
+        code { font-family: monospace; color: #2d2d2d; background: whitesmoke; display: block; padding: 10px; border: 1px solid #ccc; overflow: scroll;}
+        a.eval-js { color: whitesmoke; padding: 5px 10px; display: inline-block; margin-bottom: 10px; background: #2d2d2d; border-radius: 2px; }
+        span.muted { font-size: 17px; color: #8B7373; }
+        span.code { font-family: monospace; color: #2d2d2d; background: whitesmoke; padding: 5px; border: 1px solid #ccc; }
+        div.code-runner { margin: 20px 20px;}
+        ul, ol { margin: 10px 50px; }
+        ul li { margin-bottom: 10px; }
+        .hidden { display: none; }
+        span.k { display: inline-block; width: 175px; }
+        span.c { color: #F7BCBC; padding-left: 30px; }
+        .plugin-options label { display: inline-block; width: 265px; }
+        span.toast-position span.k { display: inline; } 
+        .toast-index .muted { display: block; color: #AD9D9D; }
+        .toast-index .muted:hover { color: #333; }
+        .latest-update { padding: 0px 30px; border: 1px dashed; margin: 30px 0; box-sizing: border-box; }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 style="text-align: center; margin: 20px 0px;">Jquery Toast Plugin</h1>
+        <hr>
+        
+        <h1>Index</h1>
+        <ul class="toast-index">
+            <li><a href="#quick-demos">Quick Demos</a> <span class="muted">Some quick demos and the code to generate that, if you are in a hurry!</span></li>
+            <li><a href="#toast-generator">Generator</a> <span class="muted">A generator for you to <strong>easily generate the code for the kind of toast you want</strong>, so that <strong>you don't have to go through the documentation!</strong></span></li>
+            <li>
+                <a href="#options">Options</a>
+                <span class="muted">Each of the options is accompanied by a demo explaining that option.</span>
+                <ul>
+                    <li><a href="#toast-head">Specifying the heading</a></li>
+                    <li><a href="#sticky-toast">Making them sticky</a></li>
+                    <li><a href="#toast-timer">Changing the toast hide timer</a></li>
+                    <li><a href="#showhide-animation">Changing the show/hide animation</a></li>
+                    <li><a href="#closeable-toasts">Making the toast closeable or not</a></li>
+                    <li><a href="#toasts-stack">Setting the toast stack</a></li>
+                    <li><a href="#toasts-positioning">Positioning the toast</a></li>
+                    <li><a href="#toasts-icons">Messages with icons</a></li>
+                    <li><a href="#toasts-bg-color">Background &amp; text color</a></li>
+                    <li><a href="#toasts-text-alignment">Setting the text alignment</a></li>
+                    <li><a href="#toasts-events">Toast Events</a></li>
+                    <li><a href="#updating-toasts">Updating Toasts</a></li>
+                    <li><a href="#resetting-toasts">Resetting Toasts</a></li>
+                </ul>
+            </li>
+        </ul>
+        
+        <div class="latest-update">
+            <h1 id="latest-update">Latest Update</h1>
+            <p>Toast loader has been introduced in the latest version. Check the demo below to see it in action</p>
+            <div class="code-runner" style="margin-left: 0px; margin-right: 0px;">
+                <a class="eval-js" href="#">Run code</a>
+                <pre><code>$.toast('Here you can put the text of the toast')</code></pre>
+            </div>
+
+            <p>Loader is enabled by default. In order to disable it or change the color, use the `loader` and `loaderBg` options. Have a look at the demo below</p>
+
+            <div class="code-runner" style="margin-left: 0px; margin-right: 0px;">
+                <a class="eval-js" href="#">Run code</a>
+                <pre><code>$.toast({
+    heading: 'Information',
+    text: 'Loaders are enabled by default. Use `loader`, `loaderBg` to change the default behavior',
+    icon: 'info',
+    loader: true,        // Change it to false to disable loader
+    loaderBg: '#9EC600'  // To change the background
+})</code></pre>
+            </div>
+        </div>
+        
+
+
+        <h1 id="quick-demos">Quick Demos</h1>
+
+        <p>To generate a <strong>most simple toast</strong>, all you have to do is</p>
+        <div class="code-runner">
+            <a class="eval-js" href="#">Run code</a>
+            <pre><code>$.toast('Here you can put the text of the toast')</code></pre>
+        </div>
+
+        <p>There are different kinds of toast types:</p>
+        <div class="code-runner">
+            <a class="eval-js" href="#">Run code</a>
+<pre><code>$.toast({
+    heading: 'Information',
+    text: 'Now you can add icons to generate different kinds of toasts',
+    showHideTransition: 'slide',
+    icon: 'info'
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a class="eval-js" href="#">Run code</a>
+<pre><code>$.toast({
+    heading: 'Error',
+    text: 'Report any &lt;a href="https://github.com/kamranahmedse/jquery-toast-plugin/issues"&gt;issues&lt;/a&gt;',
+    showHideTransition: 'fade',
+    icon: 'error'
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a class="eval-js" href="#">Run code</a>
+<pre><code>$.toast({
+    heading: 'Warning',
+    text: 'It is going to be supper easy for you to use ;)',
+    showHideTransition: 'plain',
+    icon: 'warning'
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a class="eval-js" href="#">Run code</a>
+<pre><code>$.toast({
+    heading: 'Success',
+    text: 'And these were just the basic demos! Scroll down to check further details on how to customize the output.',
+    showHideTransition: 'slide',
+    icon: 'success'
+})</code></pre>
+        </div>
+
+        <h1 id="options">Options</h1>
+        <p>Of course that is not all what you can do using this plugin, there are a lot of other options. Let's start explaining each, one by one</p>
+        <p>You should note that, whenever you are going to use options, you have to pass an <span class="code">options</span> object and specify the text as follows:</p>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run code</a>
+<pre><code>$.toast({
+    text: 'This will become the toast message'
+})</code></pre>
+        </div>
+        
+        <p>The text can be an array:</p>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run code</a>
+<pre><code>$.toast({
+    heading: 'How to contribute?!',
+    text: [
+        'Fork the repository', 
+        'Improve/extend the functionality', 
+        'Create a pull request'
+    ],
+    icon: 'info'
+})</code></pre>
+        </div>
+    
+        <p>Or put some HTML in the text</p>
+        
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run code</a>
+<pre><code>$.toast({
+    heading: 'Can I add &lt;em&gt;icons&lt;/em&gt;?',
+    text: 'Yes! check this &lt;a href="https://github.com/kamranahmedse/jquery-toast-plugin/commits/master"&gt;update&lt;/a&gt;.',
+    hideAfter: false,
+    icon: 'success'
+})</code></pre>
+        </div>
+
+        <h2 id="toast-head"><span class="muted">1.</span> Specifying the heading of toast message</h2>
+        <p>You can use the heading to set the <span class="code">heading</span> property to set the heading of the toast message</p>
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Headings',
+    text: 'You can use the `heading` property to specify the heading of the toast message.',
+})</code></pre>
+        </div>
+
+        <h2 id="sticky-toast"><span class="muted">2.</span> Making them sticky:</h2>
+        <p>There will be times, when you will want to have <strong>sticky toasts</strong>. To make them <strong>sticky</strong>, all you have to do is set the <span class="code">hideAfter</span> to <span class="code">false</span>. Here is a sticky toast</p>
+        
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    text: 'Set the `hideAfter` property to false and the toast will become sticky.',
+    hideAfter: false
+})</code></pre>
+        </div>
+        
+        <p><sup>*</sup> <span class="code">hideAfter</span> property is basically used to set the timer after which the toast will get hidden. But you can set it to false in order to achieve the sticky toasts.</p>
+        
+        <h2 id="toast-timer"><span class="muted">3.</span> Changing the toast hide timer</h2>
+        <p>You can use the property from the above option i.e. <span class="code">hideAfter</span> to change the timer after which toast gets hidden. You have to specify the timer in milliseconds</p>
+        
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    text: 'Set the `hideAfter` property to milliseconds and the toast will hide after the specified milli seconds.',
+    hideAfter: 5000   // in milli seconds
+})</code></pre>
+        </div>
+
+        <h2 id="showhide-animation"><span class="muted">4.</span> Changing the show/hide animation</h2>
+        <p>You can use <span class="code">showHideTransition</span> property to set the animation. Following are the available options:</p>
+        <ul>
+            <li><span class="code">fade</span> for fade transitions</li>
+            <li><span class="code">slide</span> for slide up and down transitions</li>
+            <li><span class="code">plain</span> simple show from and hide to corner transition</li>
+        </ul>
+        
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
+    heading: 'Slide transition',
+    showHideTransition: 'slide'
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
+    heading: 'Fade transition',
+    showHideTransition: 'fade'
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    text: 'Set the `showHideTransition` property to fade|plain|slide to achieve different transitions',
+    heading: 'Plain transition',
+    showHideTransition: 'plain'
+})</code></pre>
+        </div>
+
+        <h2 id="closeable-toasts"><span class="muted">5.</span> Making the toast closeable or not</h2>
+        <p>You can use <span class="code">allowToastClose</span> to allow the user to close the toast or not. The only thing that this option does is make that little cross button show or hide itself</p>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Closeable Toast',
+    text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not',
+    allowToastClose: true
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Non closeable Toast',
+    text: 'Set the `allowToastClose` property to true|false to make the toast closeable or not',
+    allowToastClose: false
+})</code></pre>
+        </div>
+    
+        <h2 id="toasts-stack"><span class="muted">6.</span> Setting the toast stack</h2>
+        <p><span class="code">stack</span> property can be used to specify how many maximum toasts you want to show at any point of time. By default this property is set to 5</p>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Stack',
+    text: 'If set to a number, it will show that number of toasts at max at a time',
+    stack: 4
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'No stacking',
+    text: 'If set to false, there will be only one toast at once.',
+    stack: false
+})</code></pre>
+        </div>
+
+        <p><strong>Note</strong> Hit the run button multiple times to test these demos.</p>
+
+        <h2 id="toasts-positioning"><span class="muted">7.</span> Positioning the toast</h2>
+        <p><span class="code">position</span> property can be used to specify the position. There are following predefined positions which you can use:</p>
+        <ul>
+            <li><span class="code">bottom-left</span> value to show the toast at bottom left position</li>
+            <li><span class="code">bottom-right</span> value to show the toast at bottom right position</li>
+            <li><span class="code">bottom-center</span> value to..</li>
+            <li><span class="code">top-right</span> value to..</li>
+            <li><span class="code">top-left</span> value to..</li>
+            <li><span class="code">top-center</span> value to..</li>
+            <li><span class="code">mid-center</span> value to..</li>
+            <li><span class="code">{ top: '-', bottom: '-', left: '-', right: '-' }</span> javascript object with positioning properties as you set in CSS</li>
+        </ul>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Positioning',
+    text: 'Specify the custom position object or use one of the predefined ones',
+    position: 'bottom-left',
+    stack: false
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Positioning',
+    text: 'Specify the custom position object or use one of the predefined ones',
+    position: 'bottom-right',
+    stack: false
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Positioning',
+    text: 'Use the predefined ones, or specify a custom object',
+    position: 'bottom-center',
+    stack: false
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Positioning',
+    text: 'Use the predefined ones, or specify a custom object',
+    position: 'top-left',
+    stack: false
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Positioning',
+    text: 'Use the predefined ones, or specify a custom position object.',
+    position: 'top-right',
+    stack: false
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Positioning',
+    text: 'Use the predefined ones, or specify a custom position object.',
+    position: 'top-center',
+    stack: false
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Positioning',
+    text: 'Use the predefined ones, or specify a custom position object.',
+    position: 'mid-center',
+    stack: false
+})</code></pre>
+        </div>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code><span class='hidden'>$.toast().reset('all');</span>$.toast({
+    heading: 'Positioning',
+    text: 'Use the predefined ones, or specify a custom position object.',
+    position: {
+        left: 120,
+        top: 120
+    },
+    stack: false
+})</code></pre>
+        </div>
+    
+        <p><strong>Note</strong> It should be noted that, once you change the position of toast by using the `position` property, you'll have to reset the position for the next toasts, if you want them to appear at their default position i.e. the bottom left corner. Or else, each new toast generated will be appearing at the last position i.e. where you displayed the last positioned toast. You can reset the toast position by.</p>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast().reset('all');</code></pre>
+        </div>
+    
+        <h2 id="toasts-icons"><span class="muted">8.</span> Messages with icons</h2>
+        <p><span class="code">icon</span> property can be used to specify the predefined types of toasts. Following are the predefined types:</p>
+        <ul>
+            <li><span class="code">info</span> generates a toast with information icon</li>
+            <li><span class="code">warning</span> generates a toast with warning icon</li>
+            <li><span class="code">error</span> generates a toast with error icon</li>
+            <li><span class="code">success</span> generates a toast with success icon</li>
+        </ul>
+        
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Warning',
+    text: 'Now you can seemlessly generate warnings using the icon property in the options',
+    icon: 'warning'
+})</code></pre>
+        </div>
+        
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Success',
+    text: 'Here is some kind of success message with a success icon that you can notice at the left side.',
+    icon: 'success'
+})</code></pre>
+        </div>
+    
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Error',
+    text: 'An unexpected error occured while trying to show you the toast! ..Just kidding, it is just a message, toast is right in front of you.',
+    icon: 'error'
+})</code></pre>
+        </div>
+    
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Information',
+    text: 'Now you can add icons to the toasts as well.',
+    icon: 'info'
+})</code></pre>
+        </div>
+            
+        <h2 id="toasts-bg-color"><span class="muted">9.</span> Background &amp; text color</h2>
+        <p><span class="code">bgColor</span> property is used to specify the background color of the toast message. Default is '#444'</p>
+        <p><span class="code">textColor</span> property is used to specify the text color of the toast message. Default is '#eee'</p>
+            
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Colors',
+    text: 'Colors are specified using `bgColor` and `textColor` properties.',
+    bgColor: '#FF1356',
+    textColor: 'white'
+})</code></pre>
+        </div>
+
+        <h2 id="toasts-text-alignment"><span class="muted">10.</span> Setting the text alignment</h2>
+        <p><span class="code">textAlign</span> property is used to set the alignment of text inside the toast. Permitted values are:</p>
+        <ul>
+            <li><span class="code">left</span></li>
+            <li><span class="code">right</span></li>
+            <li><span class="code">center</span></li>
+        </ul>
+
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    text: 'Processing! Please wait..',
+    textAlign: 'center'
+})</code></pre>
+        </div>
+
+        <h2 id="toasts-class"><span class="muted">9.</span> Custom Classes </h2>
+        <p><span class="code">class</span> property is used to add custom classes to the toast element</p>
+        <style type="text/css">
+            .larger-font {
+                font-size: larger;
+            }
+        </style>
+            
+        <div class="code-runner">
+            <a href="#" class="eval-js">Run Code</a>
+<pre><code>$.toast({
+    heading: 'Custom Classes',
+    text: 'Custom classes are specified using the `class` option.',
+    class: 'larger-font'
+})</code></pre>
+        </div>
+            
+        <h2 id="toasts-events"><span class="muted">11.</span> Toast Events</h2>
+        <p>Toast exposes the following events for you to bind to whatever you want</p>
+        <ul>
+            <li><span class="code">beforeShow</span> will be triggered right before the toast is about to appear</li>
+            <li><span class="code">afterShown</span> will be triggered after the toast has appeared</li>
+            <li><span class="code">beforeHide</span> will be triggered before the toast is about to hide</li>
+            <li><span class="code">afterHidden</span> will be triggered right after the toast gets hidden</li>
+        </ul>
+            
+        <div class="code-runner">
+            <a href="#" class="eval-js"><span class='hidden'>$.toast().reset('all');</span>Run Code</a>
+<pre><code>$.toast({
+    text: 'Triggers the events',
+
+    beforeShow: function () {
+        alert('The toast is about to appear');
+    },
+
+    afterShown: function () {
+        alert('Toast has appeared.');
+    },
+
+    beforeHide: function () {
+        alert('Toast is about to hide.');
+    },
+
+    afterHidden: function () {
+        alert('Toast has been hidden.');
+    }
+})</code></pre>
+        </div>
+    
+        <h2 id="updating-toasts"><span class="muted">12.</span> Updating Toasts</h2>
+        <p>If you have a reference to a toast and want to update that, you can do so by calling the <span class="code">update</span> method on the instance.</p>
+
+        <div class="code-runner">
+        <a href="#" class="eval-js">Run Code</a>
+<pre><code>
+var myToast = $.toast({
+    heading: 'Information',
+    text: 'Here is some information that will be later on turned to an error',
+    icon: 'info',
+    hideAfter: false
+});
+
+// Update the toast after three seconds.
+window.setTimeout(function(){
+    myToast.update({
+        heading: 'Error',
+        text: 'Here is an information that changed to error',
+        icon: 'error',
+        hideAfter: false
+    });    
+}, 3000)
+
+</code></pre>
+        </div>
+
+        <h2 id="resetting-toasts"><span class="muted">13.</span> Resetting Toasts</h2>
+        <p>If you have the reference to a specific toast, you can reset that by doing the following</p>
+
+        <div class="code-runner">
+<pre><code>
+var myToast = $.toast('Some toast that needs to be removed.');
+myToast.reset(); // remove the toast "Some toast that needs to be removed"
+</code></pre>
+        </div>
+        
+        <p>If you do not have the reference to a specific toast and want to reset every toast, do the following:</p>
+        <div class="code-runner">
+<pre><code>
+$.toast().reset('all');
+</code></pre>
+        </div>
+
+        
+
+    <div class="plugin-options">
+          <h1 id="toast-generator">Customize Plugin</h1>
+
+          <p>
+            <label for="toast-text">Text</label>
+            <input type="text" id="toast-text" class="toast-text" value="Don't forget to star the repository if you like it.">
+          </p>
+          <p>
+            <label for="toast-heading">Heading</label>
+            <input type="text" id="toast-heading" class="toast-heading" value="Note">
+          </p>
+          <p>
+            <label for="toast-transition">Transition</label>
+            <select name="toast-transition" id="toast-transition" class="toast-transition">
+              <option value="fade">Fade</option>
+              <option value="slide">Slide</option>
+              <option value="plain">Plain</option>
+            </select>
+          </p>
+          <p>
+            <label for="allow-toast-close">Allow Toast Close</label>
+            <select name="allow-toast-close" id="allow-toast-close" class="allow-toast-close">
+              <option value="true">True</option>
+              <option value="false">False</option>
+            </select>
+          </p>
+
+          <p>
+            <label for="auto-hide-toast">Auto Hide</label>
+            <select name="auto-hide-toast" id="auto-hide-toast" class="auto-hide-toast">
+              <option value="true">True</option>
+              <option value="false">False</option>
+            </select>
+          </p>
+
+          <p class="autohide-after sub-item">
+            <label for="autohide-after">Hide (with transition^) after (ms)</label>
+            <input type="text" id="autohide-after" class="autohide-after" value="3000">
+          </p>
+
+          <p class="">
+            <label for="stack-toasts">Stack toasts</label>
+            <select name="stack-toasts" id="stack-toasts" class="stack-toasts">
+              <option value="true">Yes</option>
+              <option value="false">No</option>
+            </select>
+          </p>
+  
+          <p class="stack-length sub-item">
+            <label for="stack-length">Stack Length </label>
+            <input type="text" id="stack-length" class="stack-length" value="5">
+          </p>
+
+          <p class="">
+            <label for="toast-position">Toast Position</label>
+            <select name="toast-position" id="toast-position" class="toast-position">
+              <option value="bottom-left">Bottom Left</option>
+              <option value="bottom-right">Bottom Right</option>
+              <option value="top-left">Top Left</option>
+              <option value="top-right">Top Right</option>
+              <option value="top-center">Top Center</option>
+              <option value="bottom-center">Bottom Center</option>
+              <option value="mid-center">Mid Center</option>
+              <option value="custom-position">Custom</option>
+            </select>
+          </p>
+
+          <div class="custom-toast-position sub-item" style="display:none;">
+            <label for="custom-toast-position">Custom Toast Position</label>
+            <ul>
+              <li>
+                <label for="left-position">Left</label>
+                <input type="text" class="left-position" id="left-position">
+              </li>
+              <li>
+                <label for="right-position">Right</label>
+                <input type="text" class="right-position" id="right-position">
+              </li>
+              <li>
+                <label for="top-position">Top</label>
+                <input type="text" class="top-position" id="top-position">
+              </li>
+              <li>
+                <label for="bottom-position">Bottom</label>
+                <input type="text" class="bottom-position" id="bottom-position">
+              </li>
+            </ul>
+          </div>
+          
+          <p class="">
+            <label for="text-align">Icon</label>
+            <select name="icon-type" id="icon-type" class="text-align">
+              <option value="">-- No icon --</option>
+              <option selected="selected" value="warning">Warning</option>
+              <option value="success">Success</option>
+              <option value="error">Error</option>
+              <option value="info">Information</option>
+            </select>
+          </p>
+
+          <div class="custom-color-info" style="display: none;">
+              <p>
+                <label for="toast-bg">Background Color</label>
+                <input type="color" id="toast-bg" class="toast-bg" value="#444444">
+              </p>
+              
+              <p>
+                <label for="toast-text-color">Text Color</label>
+                <input type="color" id="toast-text-color" class="toast-text-color" value="#eeeeee">
+              </p>
+          </div>
+
+          <p class="">
+            <label for="text-align">Text Alignment</label>
+            <select name="text-align" id="text-align" class="text-align">
+              <option value="left">Left</option>
+              <option value="right">Right</option>
+              <option value="center">Center</option>
+            </select>
+          </p>
+
+          <p class="">
+            <label for="add-toast-events">Toast Events</label>
+            <select name="add-toast-events" id="add-toast-events" class="add-toast-events">
+              <option value="true">True</option>
+              <option value="false">False</option>
+            </select>
+          </p>
+
+          <p class="">
+            <label for="show-loader">Show Loader</label>
+            <select name="show-loader" id="show-loader" class="show-loader">
+              <option value="true">True</option>
+              <option value="false">False</option>
+            </select>
+          </p>
+          <p>
+            <label for="loader-bg">Loader Color</label>
+            <input type="color" id="loader-bg" class="loader-bg" value="#9EC600">
+          </p>
+          
+
+          <div class="code-runner">
+            <a href="#" class="btn generate-toast eval-js">Generate</a>
+            <pre style="padding:0px; background: #f0f3f3;"><code style="margin:0px;" class="highlight">
+<span class="nd">$</span>.<span class="nf">toast</span>({
+    <span class="toast-text-line"><span class="k">text</span>: "<span class="toast-text s">Hey there fellas, here is a simple toast. Change the options above and then see the code that generates that toast</span>", <span class="c">// Text that is to be shown in the toast</span></span>
+    <span class="toast-heading-line"><span class="k">heading</span>: '<span class="toast-heading s">How to use</span>', <span class="c">// Optional heading to be shown on the toast</span></span>
+    <span class="toast-icon-line"><span class="k">icon</span>: '<span class="toast-icon s">warning</span>', <span class="c">// Type of toast icon</span></span>
+    <span class="toast-transition-line"><span class="k">showHideTransition</span>: '<span class="toast-transition s">fade</span>', <span class="c">// fade, slide or plain</span></span>
+    <span class="toast-allowToastClose-line"><span class="k">allowToastClose</span>: <spna class="kt toast-allowToastClose">true</spna>, <span class="c">// Boolean value <span class="kt">true</span> or <span class="kt">false</span></span></span>
+    <span class="toast-hideAfter-line"><span class="k">hideAfter</span>: <span class="n toast-hideAfter">3000</span>, <span class="c">// <span class="kt">false</span> to make it sticky or number representing the miliseconds as time after which toast needs to be hidden</span></span>
+    <span class="toast-stackLength-line"><span class="k">stack</span>: <span class="n toast-stackLength">5</span>, <span class="c">// <span class="kt">false</span> if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time</span></span>
+    <span class="toast-position-string-line"><span class="k">position</span>: '<span class="s toast-position">bottom-left</span>', <span class="c">// bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values</span></span>
+    <span class="toast-position-string-obj"><span class="k">position</span>: <span class="s toast-position">{ <span class="k">left</span> : <span class="n toast-position-left">20</span>, <span class="k">right</span> : <span class="n toast-position-right">20</span>, <span class="k">top</span> : <span class="n toast-position-top">20</span>, <span class="k">bottom</span> : <span class="n toast-position-bottom">20</span> }</span>, <span class="c">// bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values</span></span>
+    <span class="toast-bgColor-line" style="display: none;"><span class="k">bgColor</span>: '<span class="s toast-bgColor">#444</span>', <span class="c"> // Background color of the toast</span></span>
+    <span class="toast-textColor-line" style="display: none;"><span class="k">textColor</span>: '<span class="s toast-textColor">#eee</span>', <span class="c"> // Text color of the toast</span></span>
+    <span class="toast-textAlign-line"><span class="k">textAlign</span>: '<span class="s toast-textAlign">left</span>', <span class="c"> // Text alignment i.e. left, right or center</span></span>
+    <span class="toast-loader-line"><span class="k">loader</span>: <span class="s toast-textLoader">true</span>, <span class="c"> // Whether to show loader or not. True by default</span></span>
+    <span class="toast-loaderBg-line"><span class="k">loaderBg</span>: '<span class="s toast-textLoaderBg">#9EC600</span>', <span class="c"> // Background color of the toast loader</span></span>
+    <span class="toast-beforeShow-line"><span class="nb k">beforeShow</span>: <span class="nf toast-beforeShow">function ()</span> {}, <span class="c">// will be triggered before the toast is shown</span></span>
+    <span class="toast-afterShown-line"><span class="nb k">afterShown</span>: <span class="nf toast-afterShown">function ()</span> {}, <span class="c">// will be triggered after the toat has been shown</span></span>
+    <span class="toast-beforeHide-line"><span class="nb k">beforeHide</span>: <span class="nf toast-beforeHide">function ()</span> {}, <span class="c">// will be triggered before the toast gets hidden</span></span>
+    <span class="toast-afterHidden-line"><span class="nb k">afterHidden</span>: <span class="nf toast-afterHidden">function ()</span> {} <span class="c"> // will be triggered after the toast has been hidden</span></span>
+});
+              </code></pre>
+
+    </div>
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script type="text/javascript" src="js/jquery.toast.js"></script>
+
+    <script type="text/javascript">
+        $(document).ready(function() {
+            
+            $('.eval-js').on('click', function ( e ) {
+                e.preventDefault();
+
+                if ( !$(this).hasClass('generate-toast') ) {
+                    var code = $(this).siblings('pre').find('code').text();
+                    code.replace("<span class='hidden'>", '');
+                    code.replace("</span");
+
+                    eval( code );
+                };
+            });
+
+            $('#icon-type').on('change', function () {
+                if ( !$(this).val() ) {
+                    $('.custom-color-info').show();
+                    $('.toast-icon-line').hide();
+                    $('.toast-bgColor-line').show();
+                    $('.toast-textColor-line').show();
+                } else {
+                    $('.toast-icon-line').show();
+                    $('.custom-color-info').hide();
+                    $('.toast-bgColor-line').hide();
+                    $('.toast-textColor-line').hide();
+                    $('.toast-icon-line span.toast-icon').text( $(this).val() );
+                }
+            });
+
+            // You are about to see some extremely horrible code that can be MUCH MUCH improved,
+            // I've knowlingly done it that way, please don't judge me based upon this ;)
+            $(document).ready(function () {
+                
+                function generateCode () {
+                    var text = $('.plugin-options #toast-text').val(); 
+                    var heading = $('.plugin-options #toast-heading').val(); 
+                    var transition = $('.toast-transition').val(); 
+                    var allowToastClose = $('#allow-toast-close').val(); 
+                    var autoHide = $('#auto-hide-toast').val(); 
+                    var stackToasts = $('#stack-toasts').val(); 
+                    var toastPosition = $('#toast-position').val() 
+                    var toastBg = $('#toast-bg').val(); 
+                    var toastTextColor = $('#toast-text-color').val();
+                    var toastIcon = $('#icon-type').val();
+                    var textAlign = $('#text-align').val();
+                    var toastEvents = $('#add-toast-events').val();
+                    var loader = $('#show-loader').val();
+                    var loaderBg = $('#loader-bg').val();
+
+                    if ( text ) {
+                        $('.toast-text-line').show(); 
+                        $('.toast-text-line .toast-text').text( text ); 
+                    } else {
+                        $('.toast-text-line').hide() 
+                        $('.toast-text-line .toast-text').text(''); 
+                    };
+
+                    if ( heading ) {
+                        $('.toast-heading-line').show(); 
+                        $('.toast-heading-line .toast-heading').text( heading ); 
+                    } else {
+                        $('.toast-heading-line').hide() 
+                        $('.toast-heading-line .toast-heading').text(''); 
+                    }; 
+
+                    if ( transition ) {
+                        $('.toast-transition-line').show() 
+                        $('.toast-transition-line .toast-transition').text( transition ); 
+                    } else {
+                        $('.toast-transition-line').hide(); 
+                        $('.toast-transition-line .toast-transition').text('fade'); 
+                    } 
+
+                    if ( allowToastClose ) {
+                        $('.toast-allowToastClose-line').show(); 
+                        $('.toast-allowToastClose-line .toast-allowToastClose').text( allowToastClose ); 
+                    } else {
+                        $('.toast-allowToastClose-line').hide(); 
+                        $('.toast-allowToastClose-line .toast-allowToastClose').text( false ); 
+                    } 
+
+                    if ( autoHide && ( autoHide == 'false' ) ) {
+                        $('.toast-hideAfter-line').show(); 
+                        $('.toast-hideAfter-line .toast-hideAfter').text('false'); 
+                        $('.autohide-after').hide(); 
+                    } else {
+                        $('.toast-hideAfter-line').show(); 
+                        $('.toast-hideAfter-line .toast-hideAfter').text( $('#autohide-after').val() ? $('#autohide-after').val() : 3000 ); 
+                        $('.autohide-after').show(); 
+                    } 
+
+                    if ( stackToasts && stackToasts != 'true') {
+                        $('.toast-stackLength-line').show(); 
+                        $('.toast-stackLength-line .toast-stackLength').text( stackToasts ); 
+                        $('.stack-length').hide(); 
+                    } else {
+                        $('.stack-length').show(); 
+                        $('.toast-stackLength-line').show(); 
+                        $('.toast-stackLength-line .toast-stackLength').text( $('#stack-length').val() ? $('#stack-length').val() : 5 ); 
+                    } 
+
+                    if ( toastPosition && ( toastPosition !== 'custom-position' ) ) {
+                        $('.toast-position-string-line').show(); 
+                        $('.custom-toast-position').hide(); 
+                        $('.toast-position-string-line .toast-position').text( toastPosition ); 
+                    } else {
+                        $('.toast-position-string-line').hide(); 
+                        $('.toast-position-string-line .toast-position').text(''); 
+                    } 
+
+                    if ( toastPosition && ( toastPosition === 'custom-position' ) ) {
+                        $('.custom-toast-position').show(); 
+                        $('.toast-position-string-obj').show(); 
+                        var left = $('#left-position').val() ? $('#left-position').val() : 'auto'; 
+                        var right = $('#right-position').val() ? $('#right-position').val() : 'auto'; 
+                        var top = $('#top-position').val() ? $('#top-position').val() : 'auto'; 
+                        var bottom = $('#bottom-position').val() ? $('#bottom-position').val() : 'auto'; 
+                        $('.toast-position-string-obj .toast-position-left').text( ( left !== 'auto' ) ? left : "'" + left + "'" ); 
+                        $('.toast-position-string-obj .toast-position-right').text( ( right !== 'auto' ) ? right : "'" + right + "'" ); 
+                        $('.toast-position-string-obj .toast-position-top').text( ( top !== 'auto' ) ? top : "'" + top + "'" ); 
+                        $('.toast-position-string-obj .toast-position-bottom').text(  ( bottom !== 'auto' ) ? bottom : "'" + bottom + "'"  ); 
+                    } else {
+                        $('.toast-position-string-obj').hide(); 
+                        // $('.toast-position-string-obj toast-position').text('');
+                    } 
+
+                    if ( !toastIcon ) {
+                        if ( toastBg ) {
+                            $('.toast-bgColor-line').show(); 
+                            $('.toast-bgColor-line .toast-bgColor').text( toastBg ); 
+                        } else {
+                            $('.toast-bgColor-line').hide(); 
+                            $('.toast-bgColor-line .toast-bgColor').text(''); 
+                        } 
+
+                        if ( toastTextColor ) {
+                            $('.toast-textColor-line').show(); 
+                            $('.toast-textColor-line .toast-textColor').text( toastTextColor ); 
+                        } else {
+                            $('.toast-textColor-line').hide(); 
+                            $('.toast-textColor-line .toast-textColor').text(''); 
+                        } 
+                    }
+
+                    if ( textAlign ) {
+                        $('.toast-textAlign-line').show(); 
+                        $('.toast-textAlign-line .toast-textAlign').text( textAlign ); 
+                    } else {
+                        $('.toast-textAlign-line').hide(); 
+                        $('.toast-textAlign-line .toast-textAlign').text( ''); 
+                    } 
+
+                    if (loader == 'false') {
+                        $('.toast-textLoader').html('false');
+                    } else {
+                        $('.toast-textLoader').html('true');
+                    }
+                    
+                    if (loaderBg) {
+                        $('.toast-textLoaderBg').html(loaderBg);
+                    }
+
+                    if ( toastEvents == 'false' ) {
+                        $('.toast-beforeShow-line').hide(); 
+                        $('.toast-afterShown-line').hide(); 
+                        $('.toast-beforeHide-line').hide(); 
+                        $('.toast-afterHidden-line').hide(); 
+                    } else {
+                        $('.toast-beforeShow-line').show(); 
+                        $('.toast-afterShown-line').show(); 
+                        $('.toast-beforeHide-line').show(); 
+                        $('.toast-afterHidden-line').show(); 
+                    } 
+                }
+
+                $('#top-position').on('change', function () { $('#bottom-position').val('auto'); });
+                $('#bottom-position').on('change', function () { $('#top-position').val('auto'); });
+                $('#left-position').on('change', function () { $('#right-position').val('auto'); });
+                $('#right-position').on('change', function () {$('#left-position').val('auto'); });
+                $('.plugin-options :input').on('change', function () {
+                  $.toast().reset('all');
+                  generateCode();
+                });
+
+                $('.generate-toast').on('click', function( e ) {
+                  e.preventDefault();
+                  generateToast();
+                });
+
+                function generateToast () {
+                    var options = {};
+
+                    if ( $('.toast-text-line').is(':visible') ) {
+                        options.text = $('.toast-text-line .toast-text').text();
+                    } 
+
+                    if ( $('.toast-heading-line').is(':visible') ) {
+                        options.heading = $('.toast-heading').text(); 
+                    }; 
+
+                    if ( $('.toast-transition-line').is(':visible') ) {
+                        options.showHideTransition = $('.toast-transition-line .toast-transition').text(); 
+                    }; 
+
+                    if ( $('.toast-allowToastClose-line').is(':visible') ) {
+                        options.allowToastClose = ( $('.toast-allowToastClose-line .toast-allowToastClose').text() === 'true' ) ? true : false; 
+                    }; 
+
+                    if ( $('.toast-hideAfter-line').is(':visible') ) {
+                        options.hideAfter = parseInt($('.toast-hideAfter-line .toast-hideAfter').text(), 10) || false; 
+                    }; 
+
+                    if ( $('.toast-stackLength-line').is(':visible') ) {
+                        options.stack = parseInt($('.toast-stackLength-line .toast-stackLength').text(), 10) || false; 
+                    }; 
+
+                    if ( $('.toast-position-string-line').is(':visible') ) {
+                        options.position = $('.toast-position-string-line .toast-position').text(); 
+                    }; 
+
+                    if ( $('.toast-position-string-obj').is(':visible') ) {
+                        options.position = {}; 
+                        options.position.left =  parseFloat( $('.toast-position .toast-position-left').text() ) || 'auto'; 
+                        options.position.right =  parseFloat( $('.toast-position .toast-position-right').text() ) || 'auto'; 
+                        options.position.top =  parseFloat( $('.toast-position .toast-position-top').text() ) || 'auto'; 
+                        options.position.bottom =  parseFloat( $('.toast-position .toast-position-bottom').text() ) || 'auto'; 
+                    }; 
+
+                    if ( $('.toast-icon-line').is(':visible') ) {
+                        options.icon = $('.toast-icon-line .toast-icon').text();
+                    };
+
+                    if ( $('.toast-bgColor-line').is(':visible') ) {
+                        options.bgColor = $('#toast-bg').val(); 
+                    }; 
+
+                    if ( $('.toast-text-color').is(':visible') ) {
+                        options.textColor = $('#toast-text-color').val(); 
+                    }; 
+
+                    if ( $("#text-align").is(':visible') ) {
+                        options.textAlign = $('#text-align').val(); 
+                    };
+
+                    options.loader = $('.toast-textLoader').html() === 'false' ? false : true;
+                    options.loaderBg = $('.toast-textLoaderBg').html();
+
+                    $.toast( options ); 
+                }
+
+                generateCode(); 
+            });
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/assets/plugins/jquery-toast-plugin-master/demos/js/jquery.toast.js b/assets/plugins/jquery-toast-plugin-master/demos/js/jquery.toast.js
new file mode 100644
index 0000000000000000000000000000000000000000..77cdf45c64bf03e60dda155c94d959c00fe1c0fa
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/demos/js/jquery.toast.js
@@ -0,0 +1,359 @@
+// jQuery toast plugin created by Kamran Ahmed copyright MIT license 2015
+if ( typeof Object.create !== 'function' ) {
+    Object.create = function( obj ) {
+        function F() {}
+        F.prototype = obj;
+        return new F();
+    };
+}
+
+(function( $, window, document, undefined ) {
+
+    "use strict";
+    
+    var Toast = {
+
+        _positionClasses : ['bottom-left', 'bottom-right', 'top-right', 'top-left', 'bottom-center', 'top-center', 'mid-center'],
+        _defaultIcons : ['success', 'error', 'info', 'warning'],
+
+        init: function (options, elem) {
+            this.prepareOptions(options, $.toast.options);
+            this.process();
+        },
+
+        prepareOptions: function(options, options_to_extend) {
+            var _options = {};
+            if ( ( typeof options === 'string' ) || ( options instanceof Array ) ) {
+                _options.text = options;
+            } else {
+                _options = options;
+            }
+            this.options = $.extend( {}, options_to_extend, _options );
+        },
+
+        process: function () {
+            this.setup();
+            this.addToDom();
+            this.position();
+            this.bindToast();
+            this.animate();
+        },
+
+        setup: function () {
+            
+            var _toastContent = '';
+            
+            this._toastEl = this._toastEl || $('<div></div>', {
+                class : 'jq-toast-single'
+            });
+
+            // For the loader on top
+            _toastContent += '<span class="jq-toast-loader"></span>';            
+
+            if ( this.options.allowToastClose ) {
+                _toastContent += '<span class="close-jq-toast-single">&times;</span>';
+            };
+
+            if ( this.options.text instanceof Array ) {
+
+                if ( this.options.heading ) {
+                    _toastContent +='<h2 class="jq-toast-heading">' + this.options.heading + '</h2>';
+                };
+
+                _toastContent += '<ul class="jq-toast-ul">';
+                for (var i = 0; i < this.options.text.length; i++) {
+                    _toastContent += '<li class="jq-toast-li" id="jq-toast-item-' + i + '">' + this.options.text[i] + '</li>';
+                }
+                _toastContent += '</ul>';
+
+            } else {
+                if ( this.options.heading ) {
+                    _toastContent +='<h2 class="jq-toast-heading">' + this.options.heading + '</h2>';
+                };
+                _toastContent += this.options.text;
+            }
+
+            this._toastEl.html( _toastContent );
+
+            if ( this.options.bgColor !== false ) {
+                this._toastEl.css("background-color", this.options.bgColor);
+            };
+
+            if ( this.options.textColor !== false ) {
+                this._toastEl.css("color", this.options.textColor);
+            };
+
+            if ( this.options.textAlign ) {
+                this._toastEl.css('text-align', this.options.textAlign);
+            }
+
+            if ( this.options.icon !== false ) {
+                this._toastEl.addClass('jq-has-icon');
+
+                if ( $.inArray(this.options.icon, this._defaultIcons) !== -1 ) {
+                    this._toastEl.addClass('jq-icon-' + this.options.icon);
+                };
+            };
+
+            if ( this.options.class !== false ){
+                this._toastEl.addClass(this.options.class)
+            }
+        },
+
+        position: function () {
+            if ( ( typeof this.options.position === 'string' ) && ( $.inArray( this.options.position, this._positionClasses) !== -1 ) ) {
+
+                if ( this.options.position === 'bottom-center' ) {
+                    this._container.css({
+                        left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
+                        bottom: 20
+                    });
+                } else if ( this.options.position === 'top-center' ) {
+                    this._container.css({
+                        left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
+                        top: 20
+                    });
+                } else if ( this.options.position === 'mid-center' ) {
+                    this._container.css({
+                        left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
+                        top: ( $(window).outerHeight() / 2 ) - this._container.outerHeight()/2
+                    });
+                } else {
+                    this._container.addClass( this.options.position );
+                }
+
+            } else if ( typeof this.options.position === 'object' ) {
+                this._container.css({
+                    top : this.options.position.top ? this.options.position.top : 'auto',
+                    bottom : this.options.position.bottom ? this.options.position.bottom : 'auto',
+                    left : this.options.position.left ? this.options.position.left : 'auto',
+                    right : this.options.position.right ? this.options.position.right : 'auto'
+                });
+            } else {
+                this._container.addClass( 'bottom-left' );
+            }
+        },
+
+        bindToast: function () {
+
+            var that = this;
+
+            this._toastEl.on('afterShown', function () {
+                that.processLoader();
+            });
+
+            this._toastEl.find('.close-jq-toast-single').on('click', function ( e ) {
+
+                e.preventDefault();
+
+                if( that.options.showHideTransition === 'fade') {
+                    that._toastEl.trigger('beforeHide');
+                    that._toastEl.fadeOut(function () {
+                        that._toastEl.trigger('afterHidden');
+                    });
+                } else if ( that.options.showHideTransition === 'slide' ) {
+                    that._toastEl.trigger('beforeHide');
+                    that._toastEl.slideUp(function () {
+                        that._toastEl.trigger('afterHidden');
+                    });
+                } else {
+                    that._toastEl.trigger('beforeHide');
+                    that._toastEl.hide(function () {
+                        that._toastEl.trigger('afterHidden');
+                    });
+                }
+            });
+
+            if ( typeof this.options.beforeShow == 'function' ) {
+                this._toastEl.on('beforeShow', function () {
+                    that.options.beforeShow();
+                });
+            };
+
+            if ( typeof this.options.afterShown == 'function' ) {
+                this._toastEl.on('afterShown', function () {
+                    that.options.afterShown();
+                });
+            };
+
+            if ( typeof this.options.beforeHide == 'function' ) {
+                this._toastEl.on('beforeHide', function () {
+                    that.options.beforeHide();
+                });
+            };
+
+            if ( typeof this.options.afterHidden == 'function' ) {
+                this._toastEl.on('afterHidden', function () {
+                    that.options.afterHidden();
+                });
+            };          
+        },
+
+        addToDom: function () {
+
+             var _container = $('.jq-toast-wrap');
+             
+             if ( _container.length === 0 ) {
+                
+                _container = $('<div></div>',{
+                    class: "jq-toast-wrap",
+                    role: "alert",
+                    "aria-live": "polite"
+                });
+
+                $('body').append( _container );
+
+             } else if ( !this.options.stack || isNaN( parseInt(this.options.stack, 10) ) ) {
+                _container.empty();
+             }
+
+             _container.find('.jq-toast-single:hidden').remove();
+
+             _container.append( this._toastEl );
+
+            if ( this.options.stack && !isNaN( parseInt( this.options.stack ), 10 ) ) {
+                
+                var _prevToastCount = _container.find('.jq-toast-single').length,
+                    _extToastCount = _prevToastCount - this.options.stack;
+
+                if ( _extToastCount > 0 ) {
+                    $('.jq-toast-wrap').find('.jq-toast-single').slice(0, _extToastCount).remove();
+                };
+
+            }
+
+            this._container = _container;
+        },
+
+        canAutoHide: function () {
+            return ( this.options.hideAfter !== false ) && !isNaN( parseInt( this.options.hideAfter, 10 ) );
+        },
+
+        processLoader: function () {
+            // Show the loader only, if auto-hide is on and loader is demanded
+            if (!this.canAutoHide() || this.options.loader === false) {
+                return false;
+            }
+
+            var loader = this._toastEl.find('.jq-toast-loader');
+
+            // 400 is the default time that jquery uses for fade/slide
+            // Divide by 1000 for milliseconds to seconds conversion
+            var transitionTime = (this.options.hideAfter - 400) / 1000 + 's';
+            var loaderBg = this.options.loaderBg;
+
+            var style = loader.attr('style') || '';
+            style = style.substring(0, style.indexOf('-webkit-transition')); // Remove the last transition definition
+
+            style += '-webkit-transition: width ' + transitionTime + ' ease-in; \
+                      -o-transition: width ' + transitionTime + ' ease-in; \
+                      transition: width ' + transitionTime + ' ease-in; \
+                      background-color: ' + loaderBg + ';';
+
+
+            loader.attr('style', style).addClass('jq-toast-loaded');
+        },
+
+        animate: function () {
+
+            var that = this;
+
+            this._toastEl.hide();
+
+            this._toastEl.trigger('beforeShow');
+
+            if ( this.options.showHideTransition.toLowerCase() === 'fade' ) {
+                this._toastEl.fadeIn(function ( ){
+                    that._toastEl.trigger('afterShown');
+                });
+            } else if ( this.options.showHideTransition.toLowerCase() === 'slide' ) {
+                this._toastEl.slideDown(function ( ){
+                    that._toastEl.trigger('afterShown');
+                });
+            } else {
+                this._toastEl.show(function ( ){
+                    that._toastEl.trigger('afterShown');
+                });
+            }
+
+            if (this.canAutoHide()) {
+
+                var that = this;
+
+                window.setTimeout(function(){
+                    
+                    if ( that.options.showHideTransition.toLowerCase() === 'fade' ) {
+                        that._toastEl.trigger('beforeHide');
+                        that._toastEl.fadeOut(function () {
+                            that._toastEl.trigger('afterHidden');
+                        });
+                    } else if ( that.options.showHideTransition.toLowerCase() === 'slide' ) {
+                        that._toastEl.trigger('beforeHide');
+                        that._toastEl.slideUp(function () {
+                            that._toastEl.trigger('afterHidden');
+                        });
+                    } else {
+                        that._toastEl.trigger('beforeHide');
+                        that._toastEl.hide(function () {
+                            that._toastEl.trigger('afterHidden');
+                        });
+                    }
+
+                }, this.options.hideAfter);
+            };
+        },
+
+        reset: function ( resetWhat ) {
+
+            if ( resetWhat === 'all' ) {
+                $('.jq-toast-wrap').remove();
+            } else {
+                this._toastEl.remove();
+            }
+
+        },
+
+        update: function(options) {
+            this.prepareOptions(options, this.options);
+            this.setup();
+            this.bindToast();
+        }
+    };
+    
+    $.toast = function(options) {
+        var toast = Object.create(Toast);
+        toast.init(options, this);
+
+        return {
+            
+            reset: function ( what ) {
+                toast.reset( what );
+            },
+
+            update: function( options ) {
+                toast.update( options );
+            }
+        }
+    };
+
+    $.toast.options = {
+        text: '',
+        heading: '',
+        showHideTransition: 'fade',
+        allowToastClose: true,
+        hideAfter: 3000,
+        loader: true,
+        loaderBg: '#9EC600',
+        stack: 5,
+        position: 'bottom-left',
+        bgColor: false,
+        textColor: false,
+        textAlign: 'left',
+        icon: false,
+        beforeShow: function () {},
+        afterShown: function () {},
+        beforeHide: function () {},
+        afterHidden: function () {}
+    };
+
+})( jQuery, window, document );
diff --git a/assets/plugins/jquery-toast-plugin-master/dist/jquery.toast.min.css b/assets/plugins/jquery-toast-plugin-master/dist/jquery.toast.min.css
new file mode 100644
index 0000000000000000000000000000000000000000..cd7a293341a5391e78e85cccaf0bb948b8e85c98
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/dist/jquery.toast.min.css
@@ -0,0 +1 @@
+.jq-toast-wrap,.jq-toast-wrap *{margin:0;padding:0}.jq-toast-wrap{display:block;position:fixed;width:250px;pointer-events:none!important;letter-spacing:normal;z-index:9000!important}.jq-toast-wrap.bottom-left{bottom:20px;left:20px}.jq-toast-wrap.bottom-right{bottom:20px;right:40px}.jq-toast-wrap.top-left{top:20px;left:20px}.jq-toast-wrap.top-right{top:20px;right:40px}.jq-toast-single{display:block;width:100%;padding:10px;margin:0 0 5px;border-radius:4px;font-size:12px;font-family:arial,sans-serif;line-height:17px;position:relative;pointer-events:all!important;background-color:#444;color:#fff}.jq-toast-single h2{font-family:arial,sans-serif;font-size:14px;margin:0 0 7px;background:0 0;color:inherit;line-height:inherit;letter-spacing:normal}.jq-toast-single a{color:#eee;text-decoration:none;font-weight:700;border-bottom:1px solid #fff;padding-bottom:3px;font-size:12px}.jq-toast-single ul{margin:0 0 0 15px;background:0 0;padding:0}.jq-toast-single ul li{list-style-type:disc!important;line-height:17px;background:0 0;margin:0;padding:0;letter-spacing:normal}.close-jq-toast-single{position:absolute;top:3px;right:7px;font-size:14px;cursor:pointer}.jq-toast-loader{display:block;position:absolute;top:-2px;height:5px;width:0;left:0;border-radius:5px;background:red}.jq-toast-loaded{width:100%}.jq-has-icon{padding:10px 10px 10px 50px;background-repeat:no-repeat;background-position:10px}.jq-icon-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);background-color:#31708f;color:#d9edf7;border-color:#bce8f1}.jq-icon-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=);background-color:#8a6d3b;color:#fcf8e3;border-color:#faebcc}.jq-icon-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=);background-color:#a94442;color:#f2dede;border-color:#ebccd1}.jq-icon-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==);color:#dff0d8;background-color:#3c763d;border-color:#d6e9c6}
\ No newline at end of file
diff --git a/assets/plugins/jquery-toast-plugin-master/dist/jquery.toast.min.js b/assets/plugins/jquery-toast-plugin-master/dist/jquery.toast.min.js
new file mode 100644
index 0000000000000000000000000000000000000000..7943fc78d7a720eb0652e0fd1d194d669426f85b
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/dist/jquery.toast.min.js
@@ -0,0 +1 @@
+"function"!=typeof Object.create&&(Object.create=function(t){function o(){}return o.prototype=t,new o}),function(t,o,i,s){"use strict";var n={_positionClasses:["bottom-left","bottom-right","top-right","top-left","bottom-center","top-center","mid-center"],_defaultIcons:["success","error","info","warning"],init:function(o,i){this.prepareOptions(o,t.toast.options),this.process()},prepareOptions:function(o,i){var s={};"string"==typeof o||o instanceof Array?s.text=o:s=o,this.options=t.extend({},i,s)},process:function(){this.setup(),this.addToDom(),this.position(),this.bindToast(),this.animate()},setup:function(){var o="";if(this._toastEl=this._toastEl||t("<div></div>",{class:"jq-toast-single"}),o+='<span class="jq-toast-loader"></span>',this.options.allowToastClose&&(o+='<span class="close-jq-toast-single">&times;</span>'),this.options.text instanceof Array){this.options.heading&&(o+='<h2 class="jq-toast-heading">'+this.options.heading+"</h2>"),o+='<ul class="jq-toast-ul">';for(var i=0;i<this.options.text.length;i++)o+='<li class="jq-toast-li" id="jq-toast-item-'+i+'">'+this.options.text[i]+"</li>";o+="</ul>"}else this.options.heading&&(o+='<h2 class="jq-toast-heading">'+this.options.heading+"</h2>"),o+=this.options.text;this._toastEl.html(o),!1!==this.options.bgColor&&this._toastEl.css("background-color",this.options.bgColor),!1!==this.options.textColor&&this._toastEl.css("color",this.options.textColor),this.options.textAlign&&this._toastEl.css("text-align",this.options.textAlign),!1!==this.options.icon&&(this._toastEl.addClass("jq-has-icon"),-1!==t.inArray(this.options.icon,this._defaultIcons)&&this._toastEl.addClass("jq-icon-"+this.options.icon)),!1!==this.options.class&&this._toastEl.addClass(this.options.class)},position:function(){"string"==typeof this.options.position&&-1!==t.inArray(this.options.position,this._positionClasses)?"bottom-center"===this.options.position?this._container.css({left:t(o).outerWidth()/2-this._container.outerWidth()/2,bottom:20}):"top-center"===this.options.position?this._container.css({left:t(o).outerWidth()/2-this._container.outerWidth()/2,top:20}):"mid-center"===this.options.position?this._container.css({left:t(o).outerWidth()/2-this._container.outerWidth()/2,top:t(o).outerHeight()/2-this._container.outerHeight()/2}):this._container.addClass(this.options.position):"object"==typeof this.options.position?this._container.css({top:this.options.position.top?this.options.position.top:"auto",bottom:this.options.position.bottom?this.options.position.bottom:"auto",left:this.options.position.left?this.options.position.left:"auto",right:this.options.position.right?this.options.position.right:"auto"}):this._container.addClass("bottom-left")},bindToast:function(){var t=this;this._toastEl.on("afterShown",function(){t.processLoader()}),this._toastEl.find(".close-jq-toast-single").on("click",function(o){o.preventDefault(),"fade"===t.options.showHideTransition?(t._toastEl.trigger("beforeHide"),t._toastEl.fadeOut(function(){t._toastEl.trigger("afterHidden")})):"slide"===t.options.showHideTransition?(t._toastEl.trigger("beforeHide"),t._toastEl.slideUp(function(){t._toastEl.trigger("afterHidden")})):(t._toastEl.trigger("beforeHide"),t._toastEl.hide(function(){t._toastEl.trigger("afterHidden")}))}),"function"==typeof this.options.beforeShow&&this._toastEl.on("beforeShow",function(){t.options.beforeShow(t._toastEl)}),"function"==typeof this.options.afterShown&&this._toastEl.on("afterShown",function(){t.options.afterShown(t._toastEl)}),"function"==typeof this.options.beforeHide&&this._toastEl.on("beforeHide",function(){t.options.beforeHide(t._toastEl)}),"function"==typeof this.options.afterHidden&&this._toastEl.on("afterHidden",function(){t.options.afterHidden(t._toastEl)}),"function"==typeof this.options.onClick&&this._toastEl.on("click",function(){t.options.onClick(t._toastEl)})},addToDom:function(){var o=t(".jq-toast-wrap");if(0===o.length?(o=t("<div></div>",{class:"jq-toast-wrap",role:"alert","aria-live":"polite"}),t("body").append(o)):this.options.stack&&!isNaN(parseInt(this.options.stack,10))||o.empty(),o.find(".jq-toast-single:hidden").remove(),o.append(this._toastEl),this.options.stack&&!isNaN(parseInt(this.options.stack),10)){var i=o.find(".jq-toast-single").length-this.options.stack;i>0&&t(".jq-toast-wrap").find(".jq-toast-single").slice(0,i).remove()}this._container=o},canAutoHide:function(){return!1!==this.options.hideAfter&&!isNaN(parseInt(this.options.hideAfter,10))},processLoader:function(){if(!this.canAutoHide()||!1===this.options.loader)return!1;var t=this._toastEl.find(".jq-toast-loader"),o=(this.options.hideAfter-400)/1e3+"s",i=this.options.loaderBg,s=t.attr("style")||"";s=s.substring(0,s.indexOf("-webkit-transition")),s+="-webkit-transition: width "+o+" ease-in;                       -o-transition: width "+o+" ease-in;                       transition: width "+o+" ease-in;                       background-color: "+i+";",t.attr("style",s).addClass("jq-toast-loaded")},animate:function(){t=this;if(this._toastEl.hide(),this._toastEl.trigger("beforeShow"),"fade"===this.options.showHideTransition.toLowerCase()?this._toastEl.fadeIn(function(){t._toastEl.trigger("afterShown")}):"slide"===this.options.showHideTransition.toLowerCase()?this._toastEl.slideDown(function(){t._toastEl.trigger("afterShown")}):this._toastEl.show(function(){t._toastEl.trigger("afterShown")}),this.canAutoHide()){var t=this;o.setTimeout(function(){"fade"===t.options.showHideTransition.toLowerCase()?(t._toastEl.trigger("beforeHide"),t._toastEl.fadeOut(function(){t._toastEl.trigger("afterHidden")})):"slide"===t.options.showHideTransition.toLowerCase()?(t._toastEl.trigger("beforeHide"),t._toastEl.slideUp(function(){t._toastEl.trigger("afterHidden")})):(t._toastEl.trigger("beforeHide"),t._toastEl.hide(function(){t._toastEl.trigger("afterHidden")}))},this.options.hideAfter)}},reset:function(o){"all"===o?t(".jq-toast-wrap").remove():this._toastEl.remove()},update:function(t){this.prepareOptions(t,this.options),this.setup(),this.bindToast()},close:function(){this._toastEl.find(".close-jq-toast-single").click()}};t.toast=function(t){var o=Object.create(n);return o.init(t,this),{reset:function(t){o.reset(t)},update:function(t){o.update(t)},close:function(){o.close()}}},t.toast.options={text:"",heading:"",showHideTransition:"fade",allowToastClose:!0,hideAfter:3e3,loader:!0,loaderBg:"#9EC600",stack:5,position:"bottom-left",bgColor:!1,textColor:!1,textAlign:"left",icon:!1,beforeShow:function(){},afterShown:function(){},beforeHide:function(){},afterHidden:function(){},onClick:function(){}}}(jQuery,window,document);
diff --git a/assets/plugins/jquery-toast-plugin-master/package.json b/assets/plugins/jquery-toast-plugin-master/package.json
new file mode 100644
index 0000000000000000000000000000000000000000..8a2843afaeae99f5f738268f3889c8b829d5da60
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "jquery-toast-plugin",
+  "filename": "dist/jquery.toast.min.js",
+  "main": "dist/jquery.toast.min.js",
+  "style": "dist/jquery.toast.min.css",
+  "version": "1.3.2",
+  "description": "Highly customizable jquery plugin to show toast messages",
+  "homepage": "http://www.kamranahmed.info/toast",
+  "keywords": [
+    "Toast",
+    "Toast plugin",
+    "Jquery toast plugin"
+  ],
+  "maintainers": [
+    {
+      "name": "Kamran Ahmed",
+      "web": "http://kamranahmed.info"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/kamranahmedse/jquery-toast-plugin.git"
+  },
+  "bugs": "https://github.com/kamranahmedse/jquery-toast-plugin/issues",
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "http://www.opensource.org/licenses/mit-license.php"
+    }
+  ],
+  "devDependencies": {
+  },
+  "scripts": {
+  }
+}
diff --git a/assets/plugins/jquery-toast-plugin-master/src/jquery.toast.css b/assets/plugins/jquery-toast-plugin-master/src/jquery.toast.css
new file mode 100644
index 0000000000000000000000000000000000000000..54ddf672150b73e5590a8dc44e9c1a7a12d92e50
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/src/jquery.toast.css
@@ -0,0 +1,28 @@
+/**
+ * jQuery toast plugin created by Kamran Ahmed copyright MIT license 2014
+ */
+.jq-toast-wrap { display: block; position: fixed; width: 250px;  pointer-events: none !important; margin: 0; padding: 0; letter-spacing: normal; z-index: 9000 !important; }
+.jq-toast-wrap * { margin: 0; padding: 0; }
+
+.jq-toast-wrap.bottom-left { bottom: 20px; left: 20px; }
+.jq-toast-wrap.bottom-right { bottom: 20px; right: 40px; }
+.jq-toast-wrap.top-left { top: 20px; left: 20px; }
+.jq-toast-wrap.top-right { top: 20px; right: 40px; }
+
+.jq-toast-single { display: block; width: 100%; padding: 10px; margin: 0px 0px 5px; border-radius: 4px; font-size: 12px; font-family: arial, sans-serif; line-height: 17px; position: relative;  pointer-events: all !important; background-color: #444444; color: white; }
+
+.jq-toast-single h2 { font-family: arial, sans-serif; font-size: 14px; margin: 0px 0px 7px; background: none; color: inherit; line-height: inherit; letter-spacing: normal; }
+.jq-toast-single a { color: #eee; text-decoration: none; font-weight: bold; border-bottom: 1px solid white; padding-bottom: 3px; font-size: 12px; }
+
+.jq-toast-single ul { margin: 0px 0px 0px 15px; background: none; padding:0px; }
+.jq-toast-single ul li { list-style-type: disc !important; line-height: 17px; background: none; margin: 0; padding: 0; letter-spacing: normal; }
+
+.close-jq-toast-single { position: absolute; top: 3px; right: 7px; font-size: 14px; cursor: pointer; }
+
+.jq-toast-loader { display: block; position: absolute; top: -2px; height: 5px; width: 0%; left: 0; border-radius: 5px; background: red; }
+.jq-toast-loaded { width: 100%; }
+.jq-has-icon { padding: 10px 10px 10px 50px; background-repeat: no-repeat; background-position: 10px; }
+.jq-icon-info { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII='); background-color: #31708f; color: #d9edf7; border-color: #bce8f1; }
+.jq-icon-warning { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII='); background-color: #8a6d3b; color: #fcf8e3; border-color: #faebcc; }
+.jq-icon-error { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII='); background-color: #a94442; color: #f2dede; border-color: #ebccd1; }
+.jq-icon-success { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg=='); color: #dff0d8; background-color: #3c763d; border-color: #d6e9c6; }
\ No newline at end of file
diff --git a/assets/plugins/jquery-toast-plugin-master/src/jquery.toast.js b/assets/plugins/jquery-toast-plugin-master/src/jquery.toast.js
new file mode 100644
index 0000000000000000000000000000000000000000..1563986934361ce70e4b7209d878164771d4e8f1
--- /dev/null
+++ b/assets/plugins/jquery-toast-plugin-master/src/jquery.toast.js
@@ -0,0 +1,374 @@
+// jQuery toast plugin created by Kamran Ahmed copyright MIT license 2015
+if ( typeof Object.create !== 'function' ) {
+    Object.create = function( obj ) {
+        function F() {}
+        F.prototype = obj;
+        return new F();
+    };
+}
+
+(function( $, window, document, undefined ) {
+
+    "use strict";
+    
+    var Toast = {
+
+        _positionClasses : ['bottom-left', 'bottom-right', 'top-right', 'top-left', 'bottom-center', 'top-center', 'mid-center'],
+        _defaultIcons : ['success', 'error', 'info', 'warning'],
+
+        init: function (options, elem) {
+            this.prepareOptions(options, $.toast.options);
+            this.process();
+        },
+
+        prepareOptions: function(options, options_to_extend) {
+            var _options = {};
+            if ( ( typeof options === 'string' ) || ( options instanceof Array ) ) {
+                _options.text = options;
+            } else {
+                _options = options;
+            }
+            this.options = $.extend( {}, options_to_extend, _options );
+        },
+
+        process: function () {
+            this.setup();
+            this.addToDom();
+            this.position();
+            this.bindToast();
+            this.animate();
+        },
+
+        setup: function () {
+            
+            var _toastContent = '';
+            
+            this._toastEl = this._toastEl || $('<div></div>', {
+                class : 'jq-toast-single'
+            });
+
+            // For the loader on top
+            _toastContent += '<span class="jq-toast-loader"></span>';            
+
+            if ( this.options.allowToastClose ) {
+                _toastContent += '<span class="close-jq-toast-single">&times;</span>';
+            };
+
+            if ( this.options.text instanceof Array ) {
+
+                if ( this.options.heading ) {
+                    _toastContent +='<h2 class="jq-toast-heading">' + this.options.heading + '</h2>';
+                };
+
+                _toastContent += '<ul class="jq-toast-ul">';
+                for (var i = 0; i < this.options.text.length; i++) {
+                    _toastContent += '<li class="jq-toast-li" id="jq-toast-item-' + i + '">' + this.options.text[i] + '</li>';
+                }
+                _toastContent += '</ul>';
+
+            } else {
+                if ( this.options.heading ) {
+                    _toastContent +='<h2 class="jq-toast-heading">' + this.options.heading + '</h2>';
+                };
+                _toastContent += this.options.text;
+            }
+
+            this._toastEl.html( _toastContent );
+
+            if ( this.options.bgColor !== false ) {
+                this._toastEl.css("background-color", this.options.bgColor);
+            };
+
+            if ( this.options.textColor !== false ) {
+                this._toastEl.css("color", this.options.textColor);
+            };
+
+            if ( this.options.textAlign ) {
+                this._toastEl.css('text-align', this.options.textAlign);
+            }
+
+            if ( this.options.icon !== false ) {
+                this._toastEl.addClass('jq-has-icon');
+
+                if ( $.inArray(this.options.icon, this._defaultIcons) !== -1 ) {
+                    this._toastEl.addClass('jq-icon-' + this.options.icon);
+                };
+            };
+
+            if ( this.options.class !== false ){
+                this._toastEl.addClass(this.options.class)
+            }
+        },
+
+        position: function () {
+            if ( ( typeof this.options.position === 'string' ) && ( $.inArray( this.options.position, this._positionClasses) !== -1 ) ) {
+
+                if ( this.options.position === 'bottom-center' ) {
+                    this._container.css({
+                        left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
+                        bottom: 20
+                    });
+                } else if ( this.options.position === 'top-center' ) {
+                    this._container.css({
+                        left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
+                        top: 20
+                    });
+                } else if ( this.options.position === 'mid-center' ) {
+                    this._container.css({
+                        left: ( $(window).outerWidth() / 2 ) - this._container.outerWidth()/2,
+                        top: ( $(window).outerHeight() / 2 ) - this._container.outerHeight()/2
+                    });
+                } else {
+                    this._container.addClass( this.options.position );
+                }
+
+            } else if ( typeof this.options.position === 'object' ) {
+                this._container.css({
+                    top : this.options.position.top ? this.options.position.top : 'auto',
+                    bottom : this.options.position.bottom ? this.options.position.bottom : 'auto',
+                    left : this.options.position.left ? this.options.position.left : 'auto',
+                    right : this.options.position.right ? this.options.position.right : 'auto'
+                });
+            } else {
+                this._container.addClass( 'bottom-left' );
+            }
+        },
+
+        bindToast: function () {
+
+            var that = this;
+
+            this._toastEl.on('afterShown', function () {
+                that.processLoader();
+            });
+
+            this._toastEl.find('.close-jq-toast-single').on('click', function ( e ) {
+
+                e.preventDefault();
+
+                if( that.options.showHideTransition === 'fade') {
+                    that._toastEl.trigger('beforeHide');
+                    that._toastEl.fadeOut(function () {
+                        that._toastEl.trigger('afterHidden');
+                    });
+                } else if ( that.options.showHideTransition === 'slide' ) {
+                    that._toastEl.trigger('beforeHide');
+                    that._toastEl.slideUp(function () {
+                        that._toastEl.trigger('afterHidden');
+                    });
+                } else {
+                    that._toastEl.trigger('beforeHide');
+                    that._toastEl.hide(function () {
+                        that._toastEl.trigger('afterHidden');
+                    });
+                }
+            });
+
+            if ( typeof this.options.beforeShow == 'function' ) {
+                this._toastEl.on('beforeShow', function () {
+                    that.options.beforeShow(that._toastEl);
+                });
+            };
+
+            if ( typeof this.options.afterShown == 'function' ) {
+                this._toastEl.on('afterShown', function () {
+                    that.options.afterShown(that._toastEl);
+                });
+            };
+
+            if ( typeof this.options.beforeHide == 'function' ) {
+                this._toastEl.on('beforeHide', function () {
+                    that.options.beforeHide(that._toastEl);
+                });
+            };
+
+            if ( typeof this.options.afterHidden == 'function' ) {
+                this._toastEl.on('afterHidden', function () {
+                    that.options.afterHidden(that._toastEl);
+                });
+            };
+
+            if ( typeof this.options.onClick == 'function' ) {
+                this._toastEl.on('click', function () {
+                    that.options.onClick(that._toastEl);
+                });
+            };    
+        },
+
+        addToDom: function () {
+
+             var _container = $('.jq-toast-wrap');
+             
+             if ( _container.length === 0 ) {
+                
+                _container = $('<div></div>',{
+                    class: "jq-toast-wrap",
+                    role: "alert",
+                    "aria-live": "polite"
+                });
+
+                $('body').append( _container );
+
+             } else if ( !this.options.stack || isNaN( parseInt(this.options.stack, 10) ) ) {
+                _container.empty();
+             }
+
+             _container.find('.jq-toast-single:hidden').remove();
+
+             _container.append( this._toastEl );
+
+            if ( this.options.stack && !isNaN( parseInt( this.options.stack ), 10 ) ) {
+                
+                var _prevToastCount = _container.find('.jq-toast-single').length,
+                    _extToastCount = _prevToastCount - this.options.stack;
+
+                if ( _extToastCount > 0 ) {
+                    $('.jq-toast-wrap').find('.jq-toast-single').slice(0, _extToastCount).remove();
+                };
+
+            }
+
+            this._container = _container;
+        },
+
+        canAutoHide: function () {
+            return ( this.options.hideAfter !== false ) && !isNaN( parseInt( this.options.hideAfter, 10 ) );
+        },
+
+        processLoader: function () {
+            // Show the loader only, if auto-hide is on and loader is demanded
+            if (!this.canAutoHide() || this.options.loader === false) {
+                return false;
+            }
+
+            var loader = this._toastEl.find('.jq-toast-loader');
+
+            // 400 is the default time that jquery uses for fade/slide
+            // Divide by 1000 for milliseconds to seconds conversion
+            var transitionTime = (this.options.hideAfter - 400) / 1000 + 's';
+            var loaderBg = this.options.loaderBg;
+
+            var style = loader.attr('style') || '';
+            style = style.substring(0, style.indexOf('-webkit-transition')); // Remove the last transition definition
+
+            style += '-webkit-transition: width ' + transitionTime + ' ease-in; \
+                      -o-transition: width ' + transitionTime + ' ease-in; \
+                      transition: width ' + transitionTime + ' ease-in; \
+                      background-color: ' + loaderBg + ';';
+
+
+            loader.attr('style', style).addClass('jq-toast-loaded');
+        },
+
+        animate: function () {
+
+            var that = this;
+
+            this._toastEl.hide();
+
+            this._toastEl.trigger('beforeShow');
+
+            if ( this.options.showHideTransition.toLowerCase() === 'fade' ) {
+                this._toastEl.fadeIn(function ( ){
+                    that._toastEl.trigger('afterShown');
+                });
+            } else if ( this.options.showHideTransition.toLowerCase() === 'slide' ) {
+                this._toastEl.slideDown(function ( ){
+                    that._toastEl.trigger('afterShown');
+                });
+            } else {
+                this._toastEl.show(function ( ){
+                    that._toastEl.trigger('afterShown');
+                });
+            }
+
+            if (this.canAutoHide()) {
+
+                var that = this;
+
+                window.setTimeout(function(){
+                    
+                    if ( that.options.showHideTransition.toLowerCase() === 'fade' ) {
+                        that._toastEl.trigger('beforeHide');
+                        that._toastEl.fadeOut(function () {
+                            that._toastEl.trigger('afterHidden');
+                        });
+                    } else if ( that.options.showHideTransition.toLowerCase() === 'slide' ) {
+                        that._toastEl.trigger('beforeHide');
+                        that._toastEl.slideUp(function () {
+                            that._toastEl.trigger('afterHidden');
+                        });
+                    } else {
+                        that._toastEl.trigger('beforeHide');
+                        that._toastEl.hide(function () {
+                            that._toastEl.trigger('afterHidden');
+                        });
+                    }
+
+                }, this.options.hideAfter);
+            };
+        },
+
+        reset: function ( resetWhat ) {
+
+            if ( resetWhat === 'all' ) {
+                $('.jq-toast-wrap').remove();
+            } else {
+                this._toastEl.remove();
+            }
+
+        },
+
+        update: function(options) {
+            this.prepareOptions(options, this.options);
+            this.setup();
+            this.bindToast();
+        },
+        
+        close: function() {
+            this._toastEl.find('.close-jq-toast-single').click();
+        }
+    };
+    
+    $.toast = function(options) {
+        var toast = Object.create(Toast);
+        toast.init(options, this);
+
+        return {
+            
+            reset: function ( what ) {
+                toast.reset( what );
+            },
+
+            update: function( options ) {
+                toast.update( options );
+            },
+            
+            close: function( ) {
+            	toast.close( );
+            }
+        }
+    };
+
+    $.toast.options = {
+        text: '',
+        heading: '',
+        showHideTransition: 'fade',
+        allowToastClose: true,
+        hideAfter: 3000,
+        loader: true,
+        loaderBg: '#9EC600',
+        stack: 5,
+        position: 'bottom-left',
+        bgColor: false,
+        textColor: false,
+        textAlign: 'left',
+        icon: false,
+        beforeShow: function () {},
+        afterShown: function () {},
+        beforeHide: function () {},
+        afterHidden: function () {},
+        onClick: function () {}
+    };
+
+})( jQuery, window, document );