Merge pull request #1523 from laf/issue-685

Dynamic dashboard
2026-07-12 16:06:25 +02:00 · 2015-08-01 10:06:28 +00:00
parent 3227156599 f091ba3877
commit b01fa8a751
50 changed files with 14078 additions and 206 deletions
@@ -47,6 +47,9 @@ vis:
 typeahead:
 	$(GIT_SUBTREE) --prefix=lib/typeahead https://github.com/twitter/typeahead.js.git master

+gridster:
+	$(GIT_SUBTREE) --prefix=lib/gridster https://github.com/ducksboard/gridster.js.git master
+
 jquery-mapael:
 	$(GIT_SUBTREE) --prefix=lib/jQuery-Mapael https://github.com/neveldo/jQuery-Mapael.git master

@@ -22,6 +22,7 @@ LibreNMS 3rd party acknowledgements
  - Moment (http://momentjs.com/): MIT
  - Tag Manager (http://soliantconsulting.github.io/tagmanager/): MIT
  - TW Sack (https://code.google.com/p/tw-sack/): GPLv3
+  - Gridster (http://gridster.net/): MIT

 #### 3rd Party GPLv3 Non-compliant

@@ -0,0 +1,47 @@
+<?php
+
+/*
+ * LibreNMS
+ *
+ * Copyright (c) 2014 Neil Lathwood <https://github.com/laf/ http://www.lathwood.co.uk/fa>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.  Please see LICENSE.txt at the top level of
+ * the source code distribution for details.
+ */
+
+require_once '../includes/defaults.inc.php';
+set_debug($_REQUEST['debug']);
+require_once '../config.php';
+require_once '../includes/definitions.inc.php';
+require_once 'includes/functions.inc.php';
+require_once '../includes/functions.php';
+require_once 'includes/authenticate.inc.php';
+
+if (!$_SESSION['authenticated']) {
+    echo 'unauthenticated';
+    exit;
+}
+
+$type = mres($_POST['type']);
+
+if ($type == 'placeholder') {
+    $output = 'Please add a Widget to get started';
+    $status = 'ok';
+}
+elseif (is_file('includes/common/'.$type.'.inc.php')) {
+
+    include 'includes/common/'.$type.'.inc.php';
+    $output = implode('', $common_output);
+    $status = 'ok';
+
+}
+
+$response = array(
+                  'status' => $status,
+                  'html' => $output,
+                 );
+
+echo _json_encode($response);
@@ -13,15 +13,9 @@
 */

 // FUA
-if (isset($_REQUEST['debug'])) {
-    ini_set('display_errors', 1);
-    ini_set('display_startup_errors', 0);
-    ini_set('log_errors', 0);
-    ini_set('allow_url_fopen', 0);
-    ini_set('error_reporting', E_ALL);
-}

 require_once '../includes/defaults.inc.php';
+set_debug($_REQUEST['debug']);
 require_once '../config.php';
 require_once '../includes/definitions.inc.php';
 require_once 'includes/functions.inc.php';
@@ -11,15 +11,8 @@
 * @copyright  (C) 2006 - 2012 Adam Armstrong
 */

-if (isset($_GET['debug'])) {
-    ini_set('display_errors', 1);
-    ini_set('display_startup_errors', 0);
-    ini_set('log_errors', 0);
-    ini_set('allow_url_fopen', 0);
-    ini_set('error_reporting', E_ALL);
-}
-
 require_once '../includes/defaults.inc.php';
+set_debug($_REQUEST['debug']);
 require_once '../config.php';
 require_once '../includes/definitions.inc.php';
 require_once 'includes/functions.inc.php';
@@ -29,6 +29,7 @@ if (!isset($_SESSION['authenticated'])) {
 }

 require_once '../includes/defaults.inc.php';
+set_debug($_REQUEST['debug']);
 require_once '../config.php';
 require_once '../includes/definitions.inc.php';
 require_once '../includes/functions.php';
@@ -1,14 +1,7 @@
 <?php

-if (isset($_REQUEST['debug'])) {
-    ini_set('display_errors', 1);
-    ini_set('display_startup_errors', 0);
-    ini_set('log_errors', 0);
-    ini_set('allow_url_fopen', 0);
-    ini_set('error_reporting', E_ALL);
-}
-
 require_once '../includes/defaults.inc.php';
+set_debug($_REQUEST['debug']);
 require_once '../config.php';
 require_once '../includes/definitions.inc.php';
 require_once 'includes/functions.inc.php';
@@ -12,15 +12,8 @@
 * the source code distribution for details.
 */

-if (isset($_REQUEST['debug'])) {
-    ini_set('display_errors', 1);
-    ini_set('display_startup_errors', 0);
-    ini_set('log_errors', 0);
-    ini_set('allow_url_fopen', 0);
-    ini_set('error_reporting', E_ALL);
-}
-
 require_once '../includes/defaults.inc.php';
+set_debug($_REQUEST['debug']);
 require_once '../config.php';
 require_once '../includes/definitions.inc.php';
 require_once 'includes/functions.inc.php';
@@ -0,0 +1 @@
+../../lib/gridster/dist/jquery.gridster.min.css
@@ -1654,6 +1654,69 @@ tr.search:nth-child(odd) {
 	color: #FFFFFF;
 }

+.gridster * {
+  margin:0;
+}
+
+.grid ul {
+  list-style-type: none;
+}
+
+.gridster li {
+    font-size: 1em;
+    font-weight: bold;
+    text-align: center;
+    line-height: 100%;
+}
+
+
+.gridster {
+    margin: 0 auto;
+
+    opacity: .8;
+
+    -webkit-transition: opacity .6s;
+    -moz-transition: opacity .6s;
+    -o-transition: opacity .6s;
+    -ms-transition: opacity .6s;
+    transition: opacity .6s;
+}
+
+.gridster .gs-w {
+    background: #ffffff;
+    box-shadow: inset 0 0 2px #000;
+    color: 000000
+    cursor: pointer;
+    -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+
+}
+
+.gridster .player {
+    background: #BBB;
+}
+
+
+.gridster .preview-holder {
+    border: none!important;
+    background: red!important;
+}
+
+.widget_header {
+    padding: 0.8em;
+    background-color: #000000;
+    color: #ffffff;
+    -webkit-border-top-left-radius: 4px;
+     -moz-border-top-right-radius: 4px;
+          border-top-left-radius: 4px;
+          border-top-right-radius: 4px;
+}
+
+.widget_body {
+    padding: 0.8em;
+}
+
 .mapTooltip {
    position : fixed;
    background-color : #B2B3B1;
@@ -0,0 +1,59 @@
+<?php
+
+$status  = 'error';
+$message = 'Error updating user dashboard config';
+
+$data = json_decode($_POST['data'],true);
+$sub_type = mres($_POST['sub_type']);
+$widget_id = mres($_POST['widget_id']);
+
+if ($sub_type == 'remove' && is_numeric($widget_id)) {
+    if ($widget_id == 0 || dbDelete('users_widgets','`user_id`=? AND `user_widget_id`=?', array($_SESSION['user_id'],$widget_id))) {
+        $status = 'ok';
+        $message = '';
+    }
+}
+elseif ($sub_type == 'remove-all') {
+    if (dbDelete('users_widgets','`user_id`=?', array($_SESSION['user_id']))) {
+        $status = 'ok';
+        $message = '';
+    }
+}
+elseif ($sub_type == 'add' && is_numeric($widget_id)) {
+    $dupe_check = dbFetchCEll('SELECT `user_widget_id` FROM `users_widgets` WHERE `user_id`=? AND `widget_id`=?',array($_SESSION['user_id'],$widget_id));
+
+    if (is_numeric($dupe_check)) {
+        $message = 'This widget has already been added';
+    }
+    else {
+
+        $widget = dbFetchRow('SELECT * FROM `widgets` WHERE `widget_id`=?', array($widget_id));
+        if (is_array($widget)) {
+            list($x,$y) = explode(',',$widget['base_dimensions']);
+            $item_id = dbInsert(array('user_id'=>$_SESSION['user_id'],'widget_id'=>$widget_id,'title'=>$widget['widget_title'],'size_x'=>$x,'size_y'=>$y),'users_widgets');
+            if (is_numeric($item_id)) {
+                $extra = array('widget_id'=>$widget_id,'title'=>$widget['widget_title'],'widget'=>$widget['widget'],'size_x'=>$x,'size_y'=>$y);
+                $status = 'ok';
+                $message = '';
+            }
+        }
+    }
+}
+else {
+    $status = 'ok';
+    $message = '';
+
+    foreach ($data as $line) {
+        if (is_array($line)) {
+            $update = array('col'=>$line['col'],'row'=>$line['row'],'size_x'=>$line['size_x'],'size_y'=>$line['size_y']);
+            dbUpdate($update, 'users_widgets', '`user_widget_id`=?', array($line['id']));
+        }
+    }
+}
+
+$response = array(
+    'status'        => $status,
+    'message'       => $message,
+    'extra'         => $extra,
+);
+echo _json_encode($response);
@@ -1,3 +1,6 @@
+<?php
+
+$common_output[] = '
 <div class="row">
    <div class="col-sm-12">
        <span id="message"></span>
@@ -25,39 +28,39 @@ var grid = $("#alerts").bootgrid({
    {
        return {
            id: "alerts",
-            device_id: '<?php echo $device['device_id']; ?>'
+            device_id: \'' . $device['device_id'] .'\'
        };
    },
    url: "/ajax_table.php",
    formatters: {
        "status": function(column,row) {
-            return "<h4><span class='label label-"+row.extra+" threeqtr-width'>" + row.msg + "</span></h4>";
+            return "<h4><span class=\'label label-"+row.extra+" threeqtr-width\'>" + row.msg + "</span></h4>";
        },
        "ack": function(column,row) {
-            return "<button type='button' class='btn btn-"+row.ack_col+" btn-sm command-ack-alert' data-target='#ack-alert' data-state='"+row.state+"' data-alert_id='"+row.alert_id+"' name='ack-alert' id='ack-alert' data-extra='"+row.extra+"'><span class='glyphicon glyphicon-"+row.ack_ico+"'aria-hidden='true'></span></button>";
+            return "<button type=\'button\' class=\'btn btn-"+row.ack_col+" btn-sm command-ack-alert\' data-target=\'#ack-alert\' data-state=\'"+row.state+"\' data-alert_id=\'"+row.alert_id+"\' name=\'ack-alert\' id=\'ack-alert\' data-extra=\'"+row.extra+"\'><span class=\'glyphicon glyphicon-"+row.ack_ico+"\'aria-hidden=\'true\'></span></button>";
        }
    },
    templates: {
    }
 }).on("loaded.rs.jquery.bootgrid", function() {
    grid.find(".incident-toggle").each( function() {
-      $(this).parent().addClass('incident-toggle-td');
+      $(this).parent().addClass(\'incident-toggle-td\');
    }).on("click", function(e) {
      var target = $(this).data("target");
-      $(target).collapse('toggle');
-      $(this).toggleClass('glyphicon-plus glyphicon-minus');
+      $(target).collapse(\'toggle\');
+      $(this).toggleClass(\'glyphicon-plus glyphicon-minus\');
    });
    grid.find(".incident").each( function() {
-      $(this).parent().addClass('col-lg-4 col-md-4 col-sm-4 col-xs-4');
+      $(this).parent().addClass(\'col-lg-4 col-md-4 col-sm-4 col-xs-4\');
      $(this).parent().parent().on("mouseenter", function() {
        $(this).find(".incident-toggle").fadeIn(200);
      }).on("mouseleave", function() {
        $(this).find(".incident-toggle").fadeOut(200);
      }).on("click", "td:not(.incident-toggle-td)", function() {
        var target = $(this).parent().find(".incident-toggle").data("target");
-        if( $(this).parent().find(".incident-toggle").hasClass('glyphicon-plus') ) {
-          $(this).parent().find(".incident-toggle").toggleClass('glyphicon-plus glyphicon-minus');
-          $(target).collapse('toggle');
+        if( $(this).parent().find(".incident-toggle").hasClass(\'glyphicon-plus\') ) {
+          $(this).parent().find(".incident-toggle").toggleClass(\'glyphicon-plus glyphicon-minus\');
+          $(target).collapse(\'toggle\');
        }
      });
    });
@@ -70,15 +73,17 @@ var grid = $("#alerts").bootgrid({
            url: "/ajax_form.php",
            data: { type: "ack-alert", alert_id: alert_id, state: state },
            success: function(msg){
-                $("#message").html('<div class="alert alert-info">'+msg+'</div>');
+                $("#message").html(\'<div class="alert alert-info">\'+msg+\'</div>\');
                if(msg.indexOf("ERROR:") <= -1) {
                    location.reload();
                }
            },
            error: function(){
-                 $("#message").html('<div class="alert alert-info">An error occurred acking this alert.</div>');
+                 $("#message").html(\'<div class="alert alert-info">An error occurred acking this alert.</div>\');
            }
        });
    });
 });
-</script>
+</script>';
+
+
@@ -0,0 +1,53 @@
+<?php
+/*
+* LibreNMS
+*
+* Copyright (c) 2015 Søren Friis Rosiak <sorenrosiak@gmail.com>
+* This program is free software: you can redistribute it and/or modify it
+* under the terms of the GNU General Public License as published by the
+* Free Software Foundation, either version 3 of the License, or (at your
+* option) any later version.  Please see LICENSE.txt at the top level of
+* the source code distribution for details.
+*/
+require_once 'includes/object-cache.inc.php';
+
+$sql = 'SELECT `D`.`hostname`,`D`.`device_id`,`D`.`status`,`D`.`uptime` FROM `devices` AS `D`';
+
+if (is_normal_user() === true) {
+    $sql.= ' , `devices_perms` AS P WHERE D.`device_id` = P.`device_id` AND P.`user_id` = ? AND';
+    $param = array(
+        $_SESSION['user_id']
+    );
+}
+else {
+    $sql.= ' WHERE';
+}
+
+$sql.= " `D`.`ignore` = '0' AND `D`.`disabled` = '0' ORDER BY `hostname`";
+$temp_output = array();
+$c = '0';
+
+foreach(dbFetchRows($sql, $param) as $device) {
+    if ($device['status'] == '1') {
+        $btn_type = 'btn-success';
+        if ($device['uptime'] < $config['uptime_warning']) {
+            $btn_type = 'btn-warning';
+            $c++;
+        }
+    }
+    else {
+        $btn_type = 'btn-danger';
+    }
+
+    $temp_output[] = '<a href="' . generate_url(array(
+        'page' => 'device',
+        'device' => $device['device_id']
+    )) . '" role="button" class="btn ' . $btn_type . ' btn-xs" title="' . $device['hostname'] . '" style="min-height:25px; min-width:25px; border-radius:0px; border:0px; margin:0; padding:0;"></a>';
+}
+
+$temp_rows = count($temp_output);
+$temp_output[] = '</div>';
+$temp_header = array(
+    '<div style="margin-left:auto; margin-right:auto;"><center><h5><i class="fa fa-check" style="color:green">' . $devices['up'] . ' </i> <i class="fa fa-exclamation-triangle" style="color:orange"> '. $c .'</i> <i class="fa fa-exclamation-circle" style="color:red"> ' . $devices['down'] . '</i></h5></center><br />'
+);
+$common_output = array_merge($temp_header, $temp_output);
@@ -1,6 +1,7 @@
 <?php
 require_once 'includes/object-cache.inc.php';
-?>
+
+$temp_output = '
 <div class="panel panel-default panel-condensed table-responsive">
 <table class="table table-hover table-condensed table-striped">
  <thead>
@@ -16,30 +17,37 @@ require_once 'includes/object-cache.inc.php';
  <tbody>
    <tr class="active">
      <td><a href="devices/">Devices</a></td>
-      <td><a href="devices/"><span><?php echo($devices['count']) ?></span></a></td>
-      <td><a href="devices/state=up/format=list_detail/"><span class="green"> <?php echo($devices['up']) ?> up</span></a></td>
-      <td><a href="devices/state=down/format=list_detail/"><span class="red"> <?php echo($devices['down']) ?> down</span></a></td>
-      <td><a href="devices/ignore=1/format=list_detail/"><span class="grey"> <?php echo($devices['ignored']) ?> ignored </span></a></td>
-      <td><a href="devices/disabled=1/format=list_detail/"><span class="black"> <?php echo($devices['disabled']) ?> disabled</span></a></td>
+      <td><a href="devices/"><span>'.$devices['count'].'</span></a></td>
+      <td><a href="devices/state=up/format=list_detail/"><span class="green"> '.$devices['up'].'</span></a></td>
+      <td><a href="devices/state=down/format=list_detail/"><span class="red"> '.$devices['down'].'</span></a></td>
+      <td><a href="devices/ignore=1/format=list_detail/"><span class="grey"> '.$devices['ignored'].'</span></a></td>
+      <td><a href="devices/disabled=1/format=list_detail/"><span class="black"> '.$devices['disabled'].'</span></a></td>
    </tr>
    <tr class="active">
      <td><a href="ports/">Ports</a></td>
-      <td><a href="ports/"><span><?php echo($ports['count']) ?></span></a></td>
-      <td><a href="ports/format=list_detail/state=up/"><span class="green"> <?php echo($ports['up']) ?> up </span></a></td>
-      <td><a href="ports/format=list_detail/state=down/"><span class="red"> <?php echo($ports['down']) ?> down </span></a></td>
-      <td><a href="ports/format=list_detail/ignore=1/"><span class="grey"> <?php echo($ports['ignored']) ?> ignored </span></a></td>
-      <td><a href="ports/format=list_detail/state=admindown/"><span class="black"> <?php echo($ports['shutdown']) ?> shutdown</span></a></td>
-    </tr>
-<?php if ($config['show_services']) { ?>
+      <td><a href="ports/"><span>'.$ports['count'].'</span></a></td>
+      <td><a href="ports/format=list_detail/state=up/"><span class="green"> '.$ports['up'].'</span></a></td>
+      <td><a href="ports/format=list_detail/state=down/"><span class="red"> '.$ports['down'].'</span></a></td>
+      <td><a href="ports/format=list_detail/ignore=1/"><span class="grey"> '.$ports['ignored'].'</span></a></td>
+      <td><a href="ports/format=list_detail/state=admindown/"><span class="black"> '.$ports['shutdown'].'</span></a></td>
+    </tr>';
+if ($config['show_services']) {
+
+$temp_output .= '
    <tr class="active">
      <td><a href="services/">Services</a></td>
-      <td><a href="services/"><span><?php echo($services['count']) ?></span></a></td>
-      <td><a href="services/state=up/view=details/"><span class="green"><?php echo($services['up']) ?> up</span></a></td>
-      <td><a href="services/state=down/view=details/"><span class="red"> <?php echo($services['down']) ?> down</span></a></td>
-      <td><a href="services/ignore=1/view=details/"><span class="grey"> <?php echo($services['ignored']) ?> ignored</span></a></td>
-      <td><a href="services/disabled=1/view=details/"><span class="black"> <?php echo($services['disabled']) ?> disabled</span></a></td>
-    </tr>
-<?php } ?>
+      <td><a href="services/"><span>'.$services['count'].'</span></a></td>
+      <td><a href="services/state=up/view=details/"><span class="green">'.$services['up'].'</span></a></td>
+      <td><a href="services/state=down/view=details/"><span class="red"> '.$services['down'].'</span></a></td>
+      <td><a href="services/ignore=1/view=details/"><span class="grey"> '.$services['ignored'].'</span></a></td>
+      <td><a href="services/disabled=1/view=details/"><span class="black"> '.$services['disabled'].'</span></a></td>
+    </tr>';
+}
+$temp_output .= '
  </tbody>
 </table>
 </div>
+';
+
+unset($common_output);
+$common_output[] = $temp_output;
@@ -1,6 +1,7 @@
 <?php
 require_once 'includes/object-cache.inc.php';
-?>
+
+$temp_output = '
 <div class="panel panel-default panel-condensed table-responsive">
 <table class="table table-hover table-condensed table-striped">
  <thead>
@@ -8,52 +9,102 @@ require_once 'includes/object-cache.inc.php';
      <th>Summary</th>
      <th><a href="devices/">Devices</a></th>
      <th><a href="ports/">Ports</a></th>
-<?php if ($config['show_services']) { ?>
+';
+
+if ($config['show_services']) {
+
+    $temp_output .= '
      <th><a href="services/">Services</a></th>
-<?php } ?>
+';
+
+}
+
+$temp_output .= '
    </tr>
  </thead>
  <tbody>
    <tr class="active">
      <th><span class="green">Up</span></th>
-      <td><a href="devices/format=list_detail/state=up/"><span class="green"><?php echo($devices['up']) ?></span></a></td>
-      <td><a href="ports/format=list_detail/state=up/"><span class="green"><?php echo($ports['up']) ?></span></a></td>
-<?php if ($config['show_services']) { ?>
-      <td><a href="services/view=details/state=up/"><span class="green"><?php echo($services['up']) ?></span></a></td>
-<?php } ?>
+      <td><a href="devices/format=list_detail/state=up/"><span class="green">'. $devices['up'] .'</span></a></td>
+      <td><a href="ports/format=list_detail/state=up/"><span class="green">'. $ports['up'] .'</span></a></td>
+';
+if ($config['show_services']) {
+
+    $temp_output .= '
+      <td><a href="services/view=details/state=up/"><span class="green">'. $services['up'] .'</span></a></td>
+';
+
+}
+
+$temp_output .= '
    </tr>
    <tr class="active">
      <th><span class="red">Down</span></th>
-      <td><a href="devices/format=list_detail/state=down/"><span class="red"><?php echo($devices['down']) ?></span></a></td>
-      <td><a href="ports/format=list_detail/state=down/"><span class="red"><?php echo($ports['down']) ?></span></a></td>
-<?php if ($config['show_services']) { ?>
-      <td><a href="services/view=details/state=down/"><span class="red"><?php echo($services['down']) ?></span></a></td>
-<?php } ?>
+      <td><a href="devices/format=list_detail/state=down/"><span class="red">'. $devices['down'] .'</span></a></td>
+      <td><a href="ports/format=list_detail/state=down/"><span class="red">'. $ports['down'] .'</span></a></td>
+';
+
+if ($config['show_services']) {
+
+    $temp_output .= '
+      <td><a href="services/view=details/state=down/"><span class="red">'. $services['down'] .'</span></a></td>
+';
+
+}
+
+$temp_output .= '
    </tr>
    <tr class="active">
      <th><span class="grey">Ignored</span></th>
-      <td><a href="devices/format=list_detail/ignore=1/"><span class="grey"><?php echo($devices['ignored']) ?></span></a></td>
-      <td><a href="ports/format=list_detail/ignore=1/"><span class="grey"><?php echo($ports['ignored']) ?></span></a></td>
-<?php if ($config['show_services']) { ?>
-      <td><a href="services/view=details/ignore=1/"><span class="grey"><?php echo($services['ignored']) ?></span></a></td>
-<?php } ?>
+      <td><a href="devices/format=list_detail/ignore=1/"><span class="grey">'. $devices['ignored'] .'</span></a></td>
+      <td><a href="ports/format=list_detail/ignore=1/"><span class="grey">'. $ports['ignored'] .'</span></a></td>
+';
+
+if ($config['show_services']) {
+
+    $temp_output .= '
+      <td><a href="services/view=details/ignore=1/"><span class="grey">'. $services['ignored'] .'</span></a></td>
+';
+}
+
+$temp_output .= '
    </tr>
    <tr class="active">
      <th><span class="black">Disabled/Shutdown</span></th>
-      <td><a href="devices/format=list_detail/disabled=1/"><span class="black"><?php echo($devices['disabled']) ?></span></a></td>
-      <td><a href="ports/format=list_detail/state=admindown/"><span class="black"><?php echo($ports['shutdown']) ?></span></a></td>
-<?php if ($config['show_services']) { ?>
-      <td><a href="services/view=details/disabled=1/"><span class="black"><?php echo($services['disabled']) ?></span></a></td>
-<?php } ?>
+      <td><a href="devices/format=list_detail/disabled=1/"><span class="black">'. $devices['disabled'] .'</span></a></td>
+      <td><a href="ports/format=list_detail/state=admindown/"><span class="black">'. $ports['shutdown'] .'</span></a></td>
+';
+
+if ($config['show_services']) {
+
+    $temp_output .= '
+      <td><a href="services/view=details/disabled=1/"><span class="black">'. $services['disabled'] .'</span></a></td>
+';
+
+}
+
+$temp_output .= '
    </tr>
    <tr class="active">
      <th>Total</th>
-      <td><a href="devices/"><span><?php echo($devices['count']) ?></span></a></td>
-      <td><a href="ports/"><span><?php echo($ports['count']) ?></span></a></td>
-<?php if ($config['show_services']) { ?>
-      <td><a href="services/"><span><?php echo($services['count']) ?></span></a></td>
-<?php } ?>
+      <td><a href="devices/"><span>'. $devices['count'] .'</span></a></td>
+      <td><a href="ports/"><span>'. $ports['count'] .'</span></a></td>
+';
+
+if ($config['show_services']) {
+
+    $temp_output .= '
+      <td><a href="services/"><span>'. $services['count'] .'</span></a></td>
+';
+
+}
+
+$temp_output .= '
    </tr>
  </tbody>
 </table>
 </div>
+';
+
+unset($common_output);
+$common_output[] = $temp_output;
@@ -0,0 +1,108 @@
+<?php
+/* Copyright (C) 2014 Daniel Preussker <f0o@devilcode.org>
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+/*
+ * Custom Frontpage
+ * @author f0o <f0o@devilcode.org>
+ * @copyright 2014 f0o, LibreNMS
+ * @license GPL
+ * @package LibreNMS
+ * @subpackage Frontpage
+ */
+
+$temp_output .= "
+<script type='text/javascript'>
+    google.load('visualization', '1', {'packages': ['geochart'], callback: function() {
+
+    drawRegionsMap();
+    function drawRegionsMap() {
+        var data = new google.visualization.DataTable();
+        data.addColumn('string', 'Site');
+        data.addColumn('number', 'Status');
+        data.addColumn('number', 'Size');
+        data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
+        data.addRows([
+";
+
+$locations = array();
+foreach (getlocations() as $location) {
+    $devices = array();
+    $devices_down = array();
+    $devices_up = array();
+    $count = 0;
+    $down  = 0;
+    foreach (dbFetchRows("SELECT devices.device_id,devices.hostname,devices.status FROM devices LEFT JOIN devices_attribs ON devices.device_id = devices_attribs.device_id WHERE ( devices.location = ? || ( devices_attribs.attrib_type = 'override_sysLocation_string' && devices_attribs.attrib_value = ? ) ) && devices.disabled = 0 && devices.ignore = 0 GROUP BY devices.hostname", array($location,$location)) as $device) {
+        if( $config['frontpage_globe']['markers'] == 'devices' || empty($config['frontpage_globe']['markers']) ) {
+            $devices[] = $device['hostname'];
+            $count++;
+            if( $device['status'] == "0" ) {
+                $down++;
+                $devices_down[] = $device['hostname']." DOWN";
+            }
+            else {
+                $devices_up[] = $device;
+            }
+        }
+        elseif( $config['frontpage_globe']['markers'] == 'ports' ) {
+            foreach( dbFetchRows("SELECT ifName,ifOperStatus,ifAdminStatus FROM ports WHERE ports.device_id = ? && ports.ignore = 0 && ports.disabled = 0 && ports.deleted = 0",array($device['device_id'])) as $port ) {
+                $count++;
+                if( $port['ifOperStatus'] == 'down' && $port['ifAdminStatus'] == 'up' ) {
+                    $down++;
+                    $devices_down[] = $device['hostname']."/".$port['ifName']." DOWN";
+                }
+                else {
+                    $devices_up[] = $port;
+                }
+            }
+        }
+    }
+    $pdown = ($down / $count)*100;
+    if( $config['frontpage_globe']['markers'] == 'devices' || empty($config['frontpage_globe']['markers']) ) {
+        $devices_down = array_merge(array(count($devices_up). " Devices OK"), $devices_down);
+    }
+    elseif( $config['frontpage_globe']['markers'] == 'ports' ) {
+        $devices_down = array_merge(array(count($devices_up). " Ports OK"), $devices_down);
+    }
+    $locations[] = "            ['".$location."', ".$pdown.", ".$count.", '".implode(",<br/> ", $devices_down)."']";
+}
+$temp_output .= implode(",\n", $locations);
+
+$map_world = $config['frontpage_globe']['region'] ? $config['frontpage_globe']['region'] : 'world';
+$map_countries = $config['frontpage_globe']['resolution'] ? $config['frontpage_globe']['resolution'] : 'countries';
+
+$temp_output .= "
+        ]);
+        var options = {
+            region: '". $map_world ."',
+            resolution: '". $map_countries ."',
+            displayMode: 'markers',
+            keepAspectRatio: 1,
+            magnifyingGlass: {enable: true, zoomFactor: 100},
+            colorAxis: {minValue: 0,  maxValue: 100, colors: ['green', 'yellow', 'red']},
+            markerOpacity: 0.90,
+            tooltip: {isHtml: true},
+        };
+        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
+        chart.draw(data, options);
+    };
+    }
+});
+</script>
+<div id='chart_div'></div>
+";
+
+unset($common_output);
+$common_output[] = $temp_output;
@@ -953,6 +953,25 @@ function is_read() {

 }//end is_read()

+function is_demo_user() {
+
+    if ($_SESSION['userlevel'] == 11) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}// end is_demo_user();
+
+function is_normal_user() {
+
+    if (is_admin() === false && is_read() === false && is_demo_user() === false) {
+        return true;
+    }
+    else {
+        return false;
+    }
+}// end is_normal_user()

 function demo_account() {
    print_error("You are logged in as a demo account, this page isn't accessible to you");
@@ -1117,3 +1136,4 @@ function alert_details($details) {
    return $fault_detail;

 }//end alert_details()
+
@@ -138,6 +138,7 @@ else {
  <link href="css/mktree.css" rel="stylesheet" type="text/css" />
  <link href="css/vis.min.css" rel="stylesheet" type="text/css" />
  <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
+  <link href="css/jquery.gridster.min.css" rel="stylesheet" type="text/css" />
  <link href="css/leaflet.css" rel="stylesheet" type="text/css" />
  <link href="css/MarkerCluster.css" rel="stylesheet" type="text/css" />
  <link href="css/MarkerCluster.Default.css" rel="stylesheet" type="text/css" />
@@ -0,0 +1 @@
+../../lib/gridster/dist/jquery.gridster.min.js
@@ -13,5 +13,6 @@
 */

 $device['device_id'] = '-1';
-require_once 'includes/print-alerts.php';
+require_once 'includes/common/alerts.inc.php';
+echo implode('',$common_output);
 unset($device['device_id']);
@@ -1,40 +1,4 @@
 <?php
-/*
-* LibreNMS
-*
-* Copyright (c) 2015 Søren Friis Rosiak <sorenrosiak@gmail.com>
-* This program is free software: you can redistribute it and/or modify it
-* under the terms of the GNU General Public License as published by the
-* Free Software Foundation, either version 3 of the License, or (at your
-* option) any later version.  Please see LICENSE.txt at the top level of
-* the source code distribution for details.
-*/

-if ($_SESSION['userlevel'] >= '10') {
-    $sql = "SELECT `hostname`,`device_id`,`status`,`uptime` FROM `devices` WHERE `ignore` = '0' AND `disabled` = '0' ORDER BY `hostname`";
-    $sqlcount = "SELECT COUNT(*) FROM `devices` WHERE `ignore` = '0' AND `disabled` = '0' ORDER BY `hostname`";
-    $rows = dbFetchCell($sqlcount);
-    echo "<div style='max-width:800px; margin-left:auto; margin-right:auto;'><center><h3>All Devices(" . $rows . ")</h3></center>";
-}
-else {
-    $sql = "SELECT D.`hostname`,D.`device_id`,D.`status`,D.`uptime` FROM `devices` AS D, `devices_perms` AS P WHERE D.`device_id` = P.`device_id` AND P.`user_id` = '" . $_SESSION['user_id'] . "' AND D.`ignore` = '0' AND D.`disabled` = '0' ORDER BY D.`hostname`";
-    $sqlcount = "SELECT COUNT(*) FROM `devices` AS D, `devices_perms` AS P WHERE D.`device_id` = P.`device_id` AND P.`user_id` = '" . $_SESSION['user_id'] . "' AND D.`ignore` = '0' AND D.`disabled` = '0' ORDER BY D.`hostname`";
-    $rows = dbFetchCell($sqlcount);
-    echo "<div style='max-width:800px; margin-left:auto; margin-right:auto;'><center><h3>All Devices(" . $rows . ")</h3></center>";
-}
-
-foreach(dbFetchRows($sql) as $device) {
-    if ($device['status'] == '1') {
-        $btn_type = 'btn-success';
-        if ($device['uptime'] < $config['uptime_warning']) {
-            $btn_type = 'btn-warning';
-        }
-    }
-    else {
-        $btn_type = 'btn-danger';
-    }
-    echo "<a href='" .generate_url(array('page' => 'device', 'device' => $device['device_id'])). "' role='button' class='btn " . $btn_type . " btn-xs' title='" . $device['hostname'] . "' style='min-height:25px; min-width:25px; border-radius:0px;'></a>";
-
-}
-
-echo "</div>";
+include_once 'includes/common/availability-map.inc.php';
+echo implode('',$common_output);
@@ -12,4 +12,5 @@
 * the source code distribution for details.
 */

-require_once 'includes/print-alerts.php';
+require_once 'includes/common/alerts.inc.php';
+echo implode('',$common_output);
@@ -160,7 +160,8 @@ if ($config['vertical_summary']) {
 }
 else {
    echo '   <div class="col-md-4">';
-    include_once 'includes/device-summary-horiz.inc.php';
+    include_once 'includes/common/device-summary-horiz.inc.php';
+    echo implode('',$common_output);
 }

 echo '
@@ -23,84 +23,22 @@
 * @subpackage Frontpage
 */

-?>
-<script type='text/javascript' src='https://www.google.com/jsapi'></script>
-<script type='text/javascript'>
-    google.load('visualization', '1', {'packages': ['geochart']});
-    google.setOnLoadCallback(drawRegionsMap);
-    function drawRegionsMap() {
-        var data = new google.visualization.DataTable();
-        data.addColumn('string', 'Site');
-        data.addColumn('number', 'Status');
-        data.addColumn('number', 'Size');
-        data.addColumn({type: 'string', role: 'tooltip', 'p': {'html': true}});
-        data.addRows([
-<?php
-$locations = array();
-foreach (getlocations() as $location) {
-    $devices = array();
-    $devices_down = array();
-    $devices_up = array();
-    $count = 0;
-    $down  = 0;
-    foreach (dbFetchRows("SELECT devices.device_id,devices.hostname,devices.status FROM devices LEFT JOIN devices_attribs ON devices.device_id = devices_attribs.device_id WHERE devices.location = ?  && devices.disabled = 0 && devices.ignore = 0 GROUP BY devices.hostname", array($location)) as $device) {
-        if( $config['frontpage_globe']['markers'] == 'devices' || empty($config['frontpage_globe']['markers']) ) {
-            $devices[] = $device['hostname'];
-            $count++;
-            if( $device['status'] == "0" ) {
-                $down++;
-                $devices_down[] = $device['hostname']." DOWN";
-            }
-            else {
-                $devices_up[] = $device;
-            }
-        }
-        elseif( $config['frontpage_globe']['markers'] == 'ports' ) {
-            foreach( dbFetchRows("SELECT ifName,ifOperStatus,ifAdminStatus FROM ports WHERE ports.device_id = ? && ports.ignore = 0 && ports.disabled = 0 && ports.deleted = 0",array($device['device_id'])) as $port ) {
-                $count++;
-                if( $port['ifOperStatus'] == 'down' && $port['ifAdminStatus'] == 'up' ) {
-                    $down++;
-                    $devices_down[] = $device['hostname']."/".$port['ifName']." DOWN";
-                }
-                else {
-                    $devices_up[] = $port;
-                }
-            }
-        }
-    }
-    $pdown = ($down / $count)*100;
-    if( $config['frontpage_globe']['markers'] == 'devices' || empty($config['frontpage_globe']['markers']) ) {
-        $devices_down = array_merge(array(count($devices_up). " Devices OK"), $devices_down);
-    }
-    elseif( $config['frontpage_globe']['markers'] == 'ports' ) {
-        $devices_down = array_merge(array(count($devices_up). " Ports OK"), $devices_down);
-    }
-    $locations[] = "            ['".$location."', ".$pdown.", ".$count.", '".implode(",<br/> ", $devices_down)."']";
-}
-echo implode(",\n", $locations);
 ?>

-        ]);
-        var options = {
-            region: '<?php echo($config['frontpage_globe']['region'] ? $config['frontpage_globe']['region'] : "world") ?>',
-            resolution: '<?php echo($config['frontpage_globe']['resolution'] ? $config['frontpage_globe']['resolution'] : "countries") ?>',
-            displayMode: 'markers',
-            keepAspectRatio: 1,
-            magnifyingGlass: {enable: true, zoomFactor: 100},
-            colorAxis: {minValue: 0,  maxValue: 100, colors: ['green', 'yellow', 'red']},
-            markerOpacity: 0.90,
-            tooltip: {isHtml: true},
-        };
-        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
-        chart.draw(data, options);
-    };
-</script>
+<script src='https://www.google.com/jsapi'></script>
+
 <?php
-include_once("includes/object-cache.inc.php");
+
+include_once 'includes/object-cache.inc.php';
 echo '<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
-            <div id="chart_div"></div>
+';
+
+include_once 'includes/common/globe.inc.php';
+echo implode(',',$common_output);
+
+echo '
        </div>
        <div class="col-md-4">
            <div class="container-fluid">
@@ -120,7 +58,8 @@ echo '                  </div>
    <div class="row">
        <div class="col-md-12">';
            $device['device_id'] = '-1';
-            require_once('includes/print-alerts.php');
+            require_once('includes/common/alerts.inc.php');
+            echo implode('',$common_output);
            unset($device['device_id']);
 echo '      </div>
    </div>
@@ -0,0 +1,239 @@
+<?php
+
+/*
+ * LibreNMS
+ *
+ * Copyright (c) 2014 Neil Lathwood <https://github.com/laf/ http://www.lathwood.co.uk/fa>
+ *
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the
+ * Free Software Foundation, either version 3 of the License, or (at your
+ * option) any later version.  Please see LICENSE.txt at the top level of
+ * the source code distribution for details.
+ */
+
+/*
+ * Code for Gridster.sort_by_row_and_col_asc(serialization) call is from http://gridster.net/demos/grid-from-serialize.html
+ */
+
+$no_refresh = true;
+
+foreach (dbFetchRows('SELECT * FROM `users_widgets` LEFT JOIN `widgets` ON `widgets`.`widget_id`=`users_widgets`.`widget_id` WHERE `user_id`=?',array($_SESSION['user_id'])) as $items) {
+    $data[] = $items;
+}
+
+if (!is_array($data)) {
+    $data[] = array('user_widget_id'=>'0','widget_id'=>1,'title'=>'Add a widget','widget'=>'placeholder','col'=>1,'row'=>1,'size_x'=>2,'size_y'=>2,'refresh'=>60);
+}
+
+$data = serialize(json_encode($data));
+$dash_config = unserialize(stripslashes($data));
+
+?>
+
+<div class="btn-group" role="group">
+    <a class="btn btn-default disabled" role="button">Widgets</a>
+    <a class="btn btn-success" role="button" data-toggle="collapse" href="#add_widget" aria-expanded="false" aria-controls="add_widget"><i class="fa fa-plus fa-fw"></i></a>
+    <a class="btn btn-danger" role="button" id="clear_widgets" name="clear_widgets"><i class="fa fa-trash fa-fw"></i></a>
+</div>
+<div class="collapse" id="add_widget">
+  <div class="well">
+<?php
+
+foreach (dbFetchRows("SELECT * FROM `widgets` ORDER BY `widget_title`") as $widgets) {
+    echo '<a class="btn btn-success" role="button" id="place_widget" name="place_widget" data-widget_id="'.$widgets['widget_id'] .'">'. $widgets['widget_title'] .'</a> ';
+}
+
+?>
+  </div>
+</div>
+
+<script src='https://www.google.com/jsapi'></script>
+<script src="js/jquery.gridster.min.js"></script>
+
+<span class="message" id="message"></span>
+
+<div class="row">
+    <div class="col-sm-12">
+        <div class="gridster grid">
+            <ul>
+            </ul>
+        </div>
+     </div>
+</div>
+
+<script type="text/javascript">
+
+    var gridster;
+
+    var serialization = <?php echo $dash_config; ?>;
+
+    serialization = Gridster.sort_by_row_and_col_asc(serialization);
+
+    function updatePos(gridster) {
+        var s = JSON.stringify(gridster.serialize());
+        $.ajax({
+            type: 'POST',
+            url: '/ajax_form.php',
+            data: {type: "update-dashboard-config", data: s},
+            dataType: "json",
+            success: function (data) {
+                if (data.status == 'ok') {
+                }
+                else {
+                    $("#message").html('<div class="alert alert-info">' + data.message + '</div>');
+                }
+            },
+            error: function () {
+                $("#message").html('<div class="alert alert-info">An error occurred.</div>');
+            }
+        });
+    }
+
+    $(function(){
+        gridster = $(".gridster ul").gridster({
+            widget_base_dimensions: [100, 100],
+            widget_margins: [5, 5],
+            avoid_overlapped_widgets: true,
+            draggable: {
+                handle: 'header',
+                stop: function(e, ui, $widget) {
+                    updatePos(gridster);
+                },
+            },
+            resize: {
+                enabled: true,
+                stop: function(e, ui, $widget) {
+                    updatePos(gridster);
+                }
+            },
+            serialize_params: function($w, wgd) { 
+                return { 
+                    id: $($w).attr('id'), 
+                    col: wgd.col, 
+                    row: wgd.row, 
+                    size_x: wgd.size_x, 
+                    size_y: wgd.size_y 
+                };
+            }
+        }).data('gridster');
+
+        gridster.remove_all_widgets();
+        $.each(serialization, function() {
+            gridster.add_widget(
+                '<li id="'+this.user_widget_id+'">'+
+                '\<script\>var timeout'+this.user_widget_id+' = grab_data('+this.user_widget_id+','+this.refresh+',\''+this.widget+'\');\<\/script\>'+
+                '<header class="widget_header">'+this.title+'<button style="color: #ffffff" type="button" class="close close-widget" data-widget-id="'+this.user_widget_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
+                '<div class="widget_body" id="widget_body_'+this.user_widget_id+'">'+this.widget+'</div>'+
+                '</li>',
+                parseInt(this.size_x), parseInt(this.size_y), parseInt(this.col), parseInt(this.row)
+            );
+        });
+
+        $(document).on('click','#clear_widgets', function() {
+            var widget_id = $(this).data('widget-id');
+            $.ajax({
+                type: 'POST',
+                url: '/ajax_form.php',
+                data: {type: "update-dashboard-config", sub_type: 'remove-all'},
+                dataType: "json",
+                success: function (data) {
+                    if (data.status == 'ok') {
+                        gridster.remove_all_widgets();
+                    }
+                    else {
+                        $("#message").html('<div class="alert alert-info">' + data.message + '</div>');
+                    }
+                },
+                error: function () {
+                    $("#message").html('<div class="alert alert-info">An error occurred.</div>');
+                }
+            });
+        });
+
+        $('a[name="place_widget"]').on('click',  function(event, state) {
+            var widget_id = $(this).data('widget_id');
+            $.ajax({
+                type: 'POST',
+                url: '/ajax_form.php',
+                data: {type: "update-dashboard-config", sub_type: 'add', widget_id: widget_id},
+                dataType: "json",
+                success: function (data) {
+                    if (data.status == 'ok') {
+                        var widget_id = data.extra.widget_id;
+                        var title = data.extra.title;
+                        var widget = data.extra.widget;
+                        var size_x = data.extra.size_x;
+                        var size_y = data.extra.size_y;
+                        gridster.add_widget(
+                            '<li id="'+widget_id+'">'+
+                            '\<script\>var timeout'+widget_id+' = grab_data('+widget_id+',60,\''+widget+'\');\<\/script\>'+
+                            '<header class="widget_header">'+title+'<button type="button" class="close close-widget" data-widget-id="'+widget_id+'" aria-label="Close"><span aria-hidden="true">&times;</span></button></header>'+
+                            '<div class="widget_body" id="widget_body_'+widget_id+'">'+widget+'</div>'+
+                            '</li>',
+                            parseInt(size_x), parseInt(size_y)
+                        );
+                        updatePos(gridster);
+                    }
+                    else {
+                        $("#message").html('<div class="alert alert-info">' + data.message + '</div>');
+                    }
+                },
+                error: function () {
+                    $("#message").html('<div class="alert alert-info">An error occurred.</div>');
+                }
+            });
+        });
+
+        $(document).on( "click", ".close-widget", function() {
+            var widget_id = $(this).data('widget-id');
+            $.ajax({
+                type: 'POST',
+                url: '/ajax_form.php',
+                data: {type: "update-dashboard-config", sub_type: 'remove', widget_id: widget_id},
+                dataType: "json",
+                success: function (data) {
+                    if (data.status == 'ok') {
+                        gridster.remove_widget($('#'+widget_id));
+                        updatePos(gridster);
+                    }
+                    else {
+                        $("#message").html('<div class="alert alert-info">' + data.message + '</div>');
+                    }
+                },
+                error: function () {
+                    $("#message").html('<div class="alert alert-info">An error occurred.</div>');
+                }
+            });
+        });
+
+   });
+
+   function grab_data(id,refresh,data_type) {
+       new_refresh = refresh * 1000;
+       $.ajax({
+           type: 'POST',
+           url: '/ajax_dash.php',
+           data: {type: data_type},
+           dataType: "json",
+           success: function (data) {
+               if (data.status == 'ok') {
+                   $("#widget_body_"+id).html(data.html);
+               }
+               else {
+                   $("#widget_body_"+id).html('<div class="alert alert-info">' + data.message + '</div>');
+               }
+           },
+           error: function () {
+               $("#widget_body_"+id).html('<div class="alert alert-info">Problem with backend</div>');
+           }
+       });
+     
+       setTimeout(function() {
+           grab_data(id,refresh,data_type);
+       },
+       new_refresh);
+   }
+$('#new-widget').popover();
+
+</script>
@@ -23,6 +23,18 @@
 //
 error_reporting(E_ERROR);

+function set_debug($debug) {
+
+    if (isset($debug)) {
+        ini_set('display_errors', 1);
+        ini_set('display_startup_errors', 0);
+        ini_set('log_errors', 0);
+        ini_set('allow_url_fopen', 0);
+        ini_set('error_reporting', E_ALL);
+    }
+
+}//end set_debug()
+
 // Default directories
 $config['project_name'] = 'LibreNMS';
 $config['project_id']   = strtolower($config['project_name']);
@@ -0,0 +1,4 @@
+{
+  "directory": "libs",
+  "json": "package.json"
+}
@@ -0,0 +1,7 @@
+node_modules/
+libs/
+gh-pages/
+demo/
+.idea
+.DS_Store
+.idea
@@ -0,0 +1,185 @@
+<a name="v0.5.6"></a>
+### v0.5.6 (2014-09-25)
+
+
+#### Bug Fixes
+
+* **draggable:** namespace events with unique ids ([79aff38c](http://github.com/ducksboard/gridster.js/commit/79aff38c60cc6ce2c0f0160bd3c6f93cb2511642))
+
+<a name="v0.5.5"></a>
+### v0.5.5 (2014-07-25)
+
+
+#### Bug Fixes
+
+* **gridster:** fire `positionschanged` when widget orig position changes ([9926ceff](http://github.com/ducksboard/gridster.js/commit/9926ceff59cba49c71542e45aa095be35eb1df58))
+
+<a name="v0.5.4"></a>
+### v0.5.4 (2014-07-16)
+
+
+#### Bug Fixes
+
+* **gridster:** serialize returns an Array object, not a jQuery object ([93df6cf6](http://github.com/ducksboard/gridster.js/commit/93df6cf6907fd0fb8787b3d068c9a9c467dcc020), closes [#394](http://github.com/ducksboard/gridster.js/issues/394))
+
+<a name="v0.5.3"></a>
+### v0.5.3 (2014-07-04)
+
+
+#### Bug Fixes
+
+* **gridster:**
+  * custom `ignore_dragging` overwrites the default value ([6bcfa6e1](http://github.com/ducksboard/gridster.js/commit/6bcfa6e16e4a88cbb5efff1ce29308737884a89d))
+  * sort widgets appropriately when reading them from DOM ([5c6d25cb](http://github.com/ducksboard/gridster.js/commit/5c6d25cbbe3de021806408f3cff6cb1e139c0a25))
+
+
+#### Features
+
+* make gridster AMD compatible ([589d7fd5](http://github.com/ducksboard/gridster.js/commit/589d7fd509a570fd02666c2f8231545211d6c83f))
+* **gridster:** move widget up when added if there is space available ([8ec307b6](http://github.com/ducksboard/gridster.js/commit/8ec307b6f7173e94610409adcb1671372cc2c67d))
+
+<a name="v0.5.2"></a>
+### v0.5.2 (2014-06-16)
+
+
+#### Bug Fixes
+
+* **draggable:**
+  * handle both touch and click events ([021a6c23](http://github.com/ducksboard/gridster.js/commit/021a6c23e851210c1b817bd353a1e5e19ce10b90), closes [#207](http://github.com/ducksboard/gridster.js/issues/207), [#236](http://github.com/ducksboard/gridster.js/issues/236), [#329](http://github.com/ducksboard/gridster.js/issues/329), [#380](http://github.com/ducksboard/gridster.js/issues/380))
+  * replaced scrollX/Y with scrollLeft/Top ([bb7463a3](http://github.com/ducksboard/gridster.js/commit/bb7463a3241750397492dfbac133cea193f0254f))
+  * fix offset during drag ([c726c4ad](http://github.com/ducksboard/gridster.js/commit/c726c4ad9c18fea95e4b46b9bacd36c42aa9691c))
+  * bind drag events to $document ([dd6c7420](http://github.com/ducksboard/gridster.js/commit/dd6c7420087d5810a9f6b02bf9d81a04a60ae840))
+* **gridster:**
+  * fix add_widget to use correct size_y when adding rows ([7d22e6c8](http://github.com/ducksboard/gridster.js/commit/7d22e6c8b201de33e33def77a93dc9009d0aa4cb))
+  * Removing previously added style tags before adding new one. ([93c46ff4](http://github.com/ducksboard/gridster.js/commit/93c46ff45ebe59f3658b7f32f05b67109aa87311))
+
+
+#### Features
+
+* **draggable:**
+  * allow ignore_dragging config option to be a function ([69fcfe45](http://github.com/ducksboard/gridster.js/commit/69fcfe459678e833cb53de040b9fbc96dd687543))
+  * option to not remove helper on drag stop ([03910df9](http://github.com/ducksboard/gridster.js/commit/03910df967a1ae7bcb2fa3aadd58255e0bcbf327))
+
+<a name="v0.5.1"></a>
+### v0.5.1 (2014-03-05)
+
+
+#### Features
+
+* **collision:** overlapping region as a config option ([720d487e](http://github.com/ducksboard/gridster.js/commit/720d487e3988593e2c60909c88aaff13fbd4f842))
+* **coords:**
+  * allow both (left/x1) and (top/y1) attr keys ([6f22217f](http://github.com/ducksboard/gridster.js/commit/6f22217f056e4fc52f6405f2af49596105aae150))
+  * add destroy method ([fdeee4f6](http://github.com/ducksboard/gridster.js/commit/fdeee4f636266c7a0579ced833f04fec013b6863))
+* **draggable:** keep container position prop if different than static ([04868a38](http://github.com/ducksboard/gridster.js/commit/04868a384d655d110f2d153d2fddb94b1c6d54a9))
+* **gridster:** destroy element's data and optionally remove from DOM ([dc09f191](http://github.com/ducksboard/gridster.js/commit/dc09f191d8503669cfa4737122c77cb0f5b9c3d2))
+
+<a name="v0.5.0"></a>
+## v0.5.0 (2014-02-14)
+
+
+#### Bug Fixes
+
+* **autogrow:** refining autogrow_cols behavior and grid width issues ([835c2df8](http://github.com/ducksboard/gridster.js/commit/835c2df84419a92b1641b687fcf083f3ff102627))
+* **resize.stop:** Call resize.stop at the latest possible moment ([e21f63a0](http://github.com/ducksboard/gridster.js/commit/e21f63a05a539f5c611eb49cd6861b1e38b36531))
+
+
+#### Features
+
+* **draggable:** Add toggle draggable method. ([073fdc40](http://github.com/ducksboard/gridster.js/commit/073fdc40e0a94dd371646fc54cd420e3ddab0254))
+
+<a name="v0.4.4"></a>
+### v0.4.4 (2014-02-13)
+
+
+#### Features
+
+* **resize:** add start/stop/resize event triggers ([7ca8deec](http://github.com/ducksboard/gridster.js/commit/7ca8deec8559d950097a6dc351cb0c6fcef3458d))
+
+<a name="v0.4.3"></a>
+### v0.4.3 (2014-02-11)
+
+
+#### Bug Fixes
+
+* **generated-styles:** cleaning cached serializations properly ([f8b04f29](http://github.com/ducksboard/gridster.js/commit/f8b04f298e12e46ca9b07f0bae0abc6b08ed6e18))
+
+<a name="v0.4.2"></a>
+### v0.4.2 (2014-02-07)
+
+
+#### Bug Fixes
+
+* recalculate grid width when adding widgets ([47745978](http://github.com/ducksboard/gridster.js/commit/4774597834300601fc81d5111a31a8c1672c55e1))
+
+<a name="v0.4.1"></a>
+### v0.4.1 (2014-02-07)
+
+#### Bug Fixes
+
+* add resize.min_size option to default config object ([5672edb0](http://github.com/ducksboard/gridster.js/commit/5672edb05e39c6b9ff5e3ca31d68c9e94dfaa617))
+
+<a name="v0.4.0"></a>
+## v0.4.0 (2014-02-07)
+
+
+#### Bug Fixes
+
+* **gridster:**
+  * leaking options with multiple Gridster instances ([07c71097](http://github.com/ducksboard/gridster.js/commit/07c7109771094d98be51d68448a20e1d2987b35d))
+  * resize.axes default option only 'both' ([62988780](http://github.com/ducksboard/gridster.js/commit/6298878077d5db129daa9780939fec5237b82af9))
+* **licenses:** add required copyright message for underscore ([b563c094](http://github.com/ducksboard/gridster.js/commit/b563c094cf0f3a5da2288492f95759ae32e8967c))
+* **readme:** link title jsfiddle -> jsbin, edit 5) of process steps ([0641aa89](http://github.com/ducksboard/gridster.js/commit/0641aa89833ecf9d167f7d8e89ee8bd5b4304248))
+
+
+#### Features
+
+* **draggable:**
+  * method to set drag limits dynamically ([d4482ec1](http://github.com/ducksboard/gridster.js/commit/d4482ec1476f8a0b6fb6cdeb25b7774ef678d81c))
+  * support horizontal scrolling while dragging ([ae4921b7](http://github.com/ducksboard/gridster.js/commit/ae4921b70798944211267cacf8a89e62d0818369))
+* **gridster:** increase grid width when dragging or resizing ([37c4e943](http://github.com/ducksboard/gridster.js/commit/37c4e94358b9392710452b9e7f96454837bf9845))
+* **resize:** add option to set min_size of a widget ([ff511872](http://github.com/ducksboard/gridster.js/commit/ff511872e65992ee89bd2a88d862caaf99733f38))
+
+<a name="v0.3.0"></a>
+## v0.3.0 (2013-11-18)
+
+
+#### Features
+
+* **draggable:**
+  * method to set drag limits dynamically ([d4482ec1](http://github.com/ducksboard/gridster.js/commit/d4482ec1476f8a0b6fb6cdeb25b7774ef678d81c))
+  * support horizontal scrolling while dragging ([ae4921b7](http://github.com/ducksboard/gridster.js/commit/ae4921b70798944211267cacf8a89e62d0818369))
+* **gridster:** increase grid width when dragging or resizing ([b61df653](http://github.com/ducksboard/gridster.js/commit/b61df6535f728970fb8c6f25a208275dbde66550))
+
+<a name="v0.2.1"></a>
+### v0.2.1 (2013-10-28)
+
+
+#### Features
+
+* **resize:** Add start/stop/resize callbacks ([d4ec7140](http://github.com/ducksboard/gridster.js/commit/d4ec7140f736bc30697c75b54ed3242ddf1d75b9))
+
+<a name="v0.2.0"></a>
+## v0.2.0 (2013-10-26)
+
+
+#### Bug Fixes
+
+* fixes and improvements in widget-resizing. ([ae02b32b](http://github.com/ducksboard/gridster.js/commit/ae02b32b9210c6328f4acc339e215ae50c134f77), closes [#32](http://github.com/ducksboard/gridster.js/issues/32))
+* **gridster:**
+  * the preview holder should not always use `li` ([1ade74e2](http://github.com/ducksboard/gridster.js/commit/1ade74e239485b07e870fca44e1eafb3ff1ae283))
+  * overlapping widget problem ([31fd8d6b](http://github.com/ducksboard/gridster.js/commit/31fd8d6ba893e4c39b91ba30d429e37f3da30b24))
+  * Orphan preview holder when dragging is interrupted ([1b13617d](http://github.com/ducksboard/gridster.js/commit/1b13617df2ce53235bdf3a1e38f1555f529663c3))
+  * remove_widget Returns the instance of the Gridster Class ([5bfbc5c0](http://github.com/ducksboard/gridster.js/commit/5bfbc5c0b5ab49c2a7c651327ce2e0f30f594985))
+
+
+#### Features
+
+* **draggable:**
+  * new config option to move or not the dragged element ([4d9b2a84](http://github.com/ducksboard/gridster.js/commit/4d9b2a84f11cb7cb2ddad51c158d92b82e7bc447))
+  * CSS selectors support in `ignore_dragging` config opt ([0f956249](http://github.com/ducksboard/gridster.js/commit/0f95624925be97aee7a8450707e04e887e4dac58))
+  * pass previous position to the drag callback ([055cc0e4](http://github.com/ducksboard/gridster.js/commit/055cc0e4f6f9de5721986515656ac894855f9e02))
+  * Don't start new drag if previous one hasn't stopped ([91ca6572](http://github.com/ducksboard/gridster.js/commit/91ca65721c2eb32b5dec82cdc5e5e7f81dac329e))
+  * pass useful data to all drag callbacks ([8dda2410](http://github.com/ducksboard/gridster.js/commit/8dda2410f300592706985c05141ca6b702977dc0))
+* **gridster:** drag-and-drop widget resizing ([e1924053](http://github.com/ducksboard/gridster.js/commit/e19240532de0bad35ffe6e5fc63934819390adc5))
+* **utils:** add delay helper to utils ([faa6c5db](http://github.com/ducksboard/gridster.js/commit/faa6c5db0002feccf681e9f919ed583eef152773))
+
@@ -0,0 +1,143 @@
+# Contributing to this project
+
+Please take a moment to review this document in order to make the contribution
+process easy and effective for everyone involved.
+
+Following these guidelines helps to communicate that you respect the time of
+the developers managing and developing this open source project. In return,
+they should reciprocate that respect in addressing your issue or assessing
+patches and features.
+
+
+## Using the issue tracker
+
+The issue tracker is the preferred channel for [bug reports](#bugs),
+[features requests](#features) and [submitting pull
+requests](#pull-requests), but please respect the following restrictions:
+
+* Please **do not** use the issue tracker for personal support requests (use
+  [Stack Overflow](http://stackoverflow.com)).
+
+* Please **do not** derail or troll issues. Keep the discussion on topic and
+  respect the opinions of others.
+
+
+<a name="bugs"></a>
+## Bug reports
+
+A bug is a _demonstrable problem_ that is caused by the code in the repository.
+Good bug reports are extremely helpful - thank you!
+
+Guidelines for bug reports:
+
+1. **Use the GitHub issue search** &mdash; check if the issue has already been
+   reported.
+
+2. **Check if the issue has been fixed** &mdash; try to reproduce it using the
+   latest `master` or development branch in the repository.
+
+3. **Isolate the problem** &mdash; ideally create a [reduced test
+   case](http://css-tricks.com/6263-reduced-test-cases/) and a live example (you can use something like [jsfiddle](http://jsfiddle.net/) or [jsbin](http://jsbin.com/)) .
+
+A good bug report shouldn't leave others needing to chase you up for more
+information. Please try to be as detailed as possible in your report. What is
+your environment? What steps will reproduce the issue? What browser(s) and OS
+experience the problem? What would you expect to be the outcome? All these
+details will help people to fix any potential bugs.
+
+Example:
+
+> Short and descriptive example bug report title
+>
+> A summary of the issue and the browser/OS environment in which it occurs. If
+> suitable, include the steps required to reproduce the bug.
+>
+> 1. This is the first step
+> 2. This is the second step
+> 3. Further steps, etc.
+>
+> `<url>` - a link to the reduced test case
+>
+> Any other information you want to share that is relevant to the issue being
+> reported. This might include the lines of code that you have identified as
+> causing the bug, and potential solutions (and your opinions on their
+> merits).
+
+
+<a name="features"></a>
+## Feature requests
+
+Feature requests are welcome. But take a moment to find out whether your idea
+fits with the scope and aims of the project. It's up to *you* to make a strong
+case to convince the project's developers of the merits of this feature. Please
+provide as much detail and context as possible.
+
+**Please, use the GitHub issue search** to check if the feature has already been requested.
+
+
+<a name="pull-requests"></a>
+## Pull requests
+
+Good pull requests - patches, improvements, new features - are a fantastic
+help. They should remain focused in scope and avoid containing unrelated
+commits.
+
+**Please ask first** before embarking on any significant pull request (e.g.
+implementing features, refactoring code, porting to a different language),
+otherwise you risk spending a lot of time working on something that the
+project's developers might not want to merge into the project.
+
+Code must follow, mostly, these [coding conventions](http://javascript.crockford.com/code.html) .
+
+Adhering to the following this process is the best way to get your work
+included in the project:
+
+1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
+   and configure the remotes:
+
+   ```bash
+   # Clone your fork of the repo into the current directory
+   git clone https://github.com/<your-username>/gridster.js
+   # Navigate to the newly cloned directory
+   cd gridster.js
+   # Assign the original repo to a remote called "upstream"
+   git remote add upstream https://github.com/ducksboard/gridster.js
+   ```
+
+2. If you cloned a while ago, get the latest changes from upstream:
+
+   ```bash
+   git checkout master
+   git pull upstream master
+   ```
+
+3. Create a new topic branch (off the main project development branch) to
+   contain your feature, change, or fix:
+
+   ```bash
+   git checkout -b <topic-branch-name>
+   ```
+
+4. Commit your changes in logical chunks. Please adhere to these [git commit
+   message guidelines](https://docs.google.com/document/d/1QrDFcIiPjSLDn3EL15IJygNPiHORgU1_OOAqWjiDU5Y)
+   or your code is unlikely be merged into the main project. Use Git's
+   [interactive rebase](https://help.github.com/articles/interactive-rebase)
+   feature to tidy up your commits before making them public.
+
+5. Merge or rebase the upstream development branch into your topic branch:
+
+   ```bash
+   git pull --rebase upstream master
+   ```
+
+6. Push your topic branch up to your fork:
+
+   ```bash
+   git push origin <topic-branch-name>
+   ```
+
+7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
+    with a clear title and description.
+
+**IMPORTANT**: By submitting a patch, you agree to allow the project owner to
+license your work under the same license as that used by the project.
@@ -0,0 +1,183 @@
+/*global module:false*/
+module.exports = function(grunt) {
+
+  // Project configuration.
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    meta: {
+      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+              '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
+              '<%= pkg.homepage ? "* " + pkg.homepage : "" %>\n' +
+              '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+              ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n\n',
+
+      minibanner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +
+                  '<%= grunt.template.today("yyyy-mm-dd") %> - ' +
+                  '<%= pkg.homepage ? "* " + pkg.homepage + " - " : "" %>' +
+                  'Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +
+                  ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */ '
+    },
+    concat: {
+      options: {
+        stripBanners: true,
+        banner: '<%= meta.banner %>'
+      },
+      dist_js: {
+        src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js'],
+        dest: 'dist/jquery.<%= pkg.name %>.js'
+      },
+
+      dist_extras_js: {
+        src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js', 'src/jquery.<%= pkg.name %>.extras.js'],
+        dest: 'dist/jquery.<%= pkg.name %>.with-extras.js'
+      },
+
+      dist_css: {
+        src: ['src/jquery.<%= pkg.name %>.css'],
+        dest: 'dist/jquery.<%= pkg.name %>.css'
+      },
+
+      dist_demo_js: {
+        src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js'],
+        dest: 'gh-pages/dist/jquery.<%= pkg.name %>.js'
+      },
+
+      dist_extras_demo_js: {
+        src: ['src/jquery.coords.js', 'src/jquery.collision.js', 'src/utils.js', 'src/jquery.draggable.js', 'src/jquery.<%= pkg.name %>.js', 'src/jquery.<%= pkg.name %>.extras.js'],
+        dest: 'gh-pages/dist/jquery.<%= pkg.name %>.with-extras.js'
+      },
+
+      dist_demo_css: {
+        src: ['src/jquery.<%= pkg.name %>.css'],
+        dest: 'gh-pages/dist/jquery.<%= pkg.name %>.css'
+      }
+    },
+    uglify: {
+      options: {
+        banner: '<%= meta.minibanner %>'
+      },
+      dist: {
+        files: {
+          'dist/jquery.<%= pkg.name %>.min.js': ['<%= concat.dist_js.dest %>']
+        }
+      },
+
+      dist_extras: {
+        files: {
+          'dist/jquery.<%= pkg.name %>.with-extras.min.js': ['<%= concat.dist_extras_js.dest %>']
+        }
+      },
+
+      dist_demo: {
+        files: {
+          'gh-pages/dist/jquery.<%= pkg.name %>.min.js': ['<%= concat.dist_js.dest %>'],
+        }
+      },
+
+      dist_extras_demo: {
+        files: {
+          'gh-pages/dist/jquery.<%= pkg.name %>.with-extras.min.js': ['<%= concat.dist_extras_js.dest %>']
+        }
+      }
+    },
+    cssmin: {
+      compress: {
+        options: {
+          keepSpecialComments: 0,
+          banner: '<%= meta.minibanner %>'
+        },
+        files: {
+          "dist/jquery.<%= pkg.name %>.min.css": ["dist/jquery.<%= pkg.name %>.css"],
+          "gh-pages/dist/jquery.<%= pkg.name %>.min.css": ["dist/jquery.<%= pkg.name %>.css"]
+        }
+      }
+    },
+    jshint: {
+      files: ['grunt.js', 'src/**/*.js', 'test/**/*.js']
+    },
+    watch: {
+      files: ['<%= lint.files %>', 'src/jquery.<%= pkg.name %>.css'],
+      tasks: 'min concat'
+    },
+    jshint: {
+      options: {
+        curly: true,
+        eqeqeq: true,
+        immed: true,
+        latedef: true,
+        newcap: true,
+        noarg: true,
+        sub: true,
+        undef: true,
+        boss: true,
+        eqnull: true,
+        browser: true
+      },
+      globals: {
+        jQuery: true
+      }
+    },
+    yuidoc: {
+      compile: {
+        "name": 'gridster.js',
+        "description": 'gridster.js, a drag-and-drop multi-column jQuery grid plugin',
+        "version": '0.1.0',
+        "url": 'http://gridster.net/',
+        "logo": 'https://ducksboard.com/static/images/svg/logo-ducksboard-black-small.svg',
+        options: {
+          paths: "src/",
+          outdir: "gh-pages/docs/"
+        }
+      }
+    },
+
+    bump: {
+      options: {
+        files: ['package.json'],
+        updateConfigs: ['pkg'],
+        commit: true,
+        commitMessage: 'Release v%VERSION%',
+        commitFiles: ['package.json', 'CHANGELOG.md', 'dist/'], // '-a' for all files
+        createTag: true,
+        tagName: 'v%VERSION%',
+        tagMessage: 'Version %VERSION%',
+        push: false,
+        pushTo: 'origin',
+        gitDescribeOptions: '--tags --always --abbrev=1 --dirty=-d' // options to use with '$ git describe'
+      }
+    },
+
+    changelog: {
+        options: {
+            dest: 'CHANGELOG.md'
+        }
+    },
+
+    watch: {
+      files: ['libs/*.js', 'src/*.js', 'src/*.css', 'Gruntfile.js'],
+      tasks: ['concat', 'uglify', 'cssmin']
+    }
+  });
+
+
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-concat');
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-cssmin');
+  grunt.loadNpmTasks('grunt-contrib-yuidoc');
+  grunt.loadNpmTasks('grunt-bump');
+  grunt.loadNpmTasks('grunt-conventional-changelog');
+
+  // Default task.
+  grunt.registerTask('default', ['jshint', 'concat', 'uglify', 'cssmin']);
+  grunt.registerTask('build', ['default']);
+  grunt.registerTask('docs', ['yuidoc']);
+
+  grunt.registerTask('release', ['build', 'bump-only:patch', 'build', 'docs', 'changelog']);
+  grunt.registerTask('release:minor', ['build', 'bump-only:minor', 'build', 'docs', 'changelog']);
+  grunt.registerTask('release:major', ['build', 'bump-only:major', 'build', 'docs', 'changelog']);
+  grunt.registerTask('release:git', ['build', 'bump-only:git', 'build', 'docs', 'changelog', 'bump-commit']);
+  grunt.registerTask('release:commit', ['bump-commit']);
+
+};
@@ -0,0 +1,19 @@
+Copyright (c) 2012 Ducksboard
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
@@ -0,0 +1,50 @@
+Gridster.js
+===========
+
+[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/ducksboard/gridster.js/trend.png)](https://bitdeli.com/free "Bitdeli Badge")
+
+Gridster is a jQuery plugin that makes building intuitive draggable
+layouts from elements spanning multiple columns. You can even
+dynamically add and remove elements from the grid.
+
+More at [http://gridster.net/](http://gridster.net/).
+
+[Releases](https://github.com/ducksboard/gridster.js/releases)
+
+[CHANGELOG](https://github.com/ducksboard/gridster.js/blob/master/CHANGELOG.md)
+
+Gridster is maintained by Ducksboard occasionally but not actively.
+@dustmoo and @pushmatrix have also write permissions as Gridster maintainers
+they are. Thank you guys!
+
+## Forks
+
+Mr @dustmoo (maintainer of Gridster) has his own fork of gridster.js
+with some new interesting features like widget-swapping and static widgets.
+
+Can be found here: [dustmoo/gridster.js](https://github.com/dustmoo/gridster.js)
+
+@dustmoo is working in his spare time to merge all these changes into
+ducksboard/gridster.js
+
+If anyone would like to help @dustmoo improve his fork and reconcile
+it with the main library he would be happy for the help.
+
+
+## Contributing to this project
+
+Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.
+
+* [Bug reports](CONTRIBUTING.md#bugs)
+* [Feature requests](CONTRIBUTING.md#features)
+* [Pull requests](CONTRIBUTING.md#pull-requests)
+
+
+## License
+
+Distributed under the MIT license.
+
+## Whodunit
+
+Gridster is built by [Ducksboard](http://ducksboard.com/) with the help of all
+these [wonderful people](https://github.com/ducksboard/gridster.js/graphs/contributors).
@@ -0,0 +1,121 @@
+/*! gridster.js - v0.5.6 - 2014-09-25
+* http://gridster.net/
+* Copyright (c) 2014 ducksboard; Licensed MIT */
+
+.gridster {
+    position:relative;
+}
+
+.gridster > * {
+    margin: 0 auto;
+    -webkit-transition: height .4s, width .4s;
+    -moz-transition: height .4s, width .4s;
+    -o-transition: height .4s, width .4s;
+    -ms-transition: height .4s, width .4s;
+    transition: height .4s, width .4s;
+}
+
+.gridster .gs-w {
+    z-index: 2;
+    position: absolute;
+}
+
+.ready .gs-w:not(.preview-holder) {
+    -webkit-transition: opacity .3s, left .3s, top .3s;
+    -moz-transition: opacity .3s, left .3s, top .3s;
+    -o-transition: opacity .3s, left .3s, top .3s;
+    transition: opacity .3s, left .3s, top .3s;
+}
+
+.ready .gs-w:not(.preview-holder),
+.ready .resize-preview-holder {
+    -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+}
+
+.gridster .preview-holder {
+    z-index: 1;
+    position: absolute;
+    background-color: #fff;
+    border-color: #fff;
+    opacity: 0.3;
+}
+
+.gridster .player-revert {
+    z-index: 10!important;
+    -webkit-transition: left .3s, top .3s!important;
+    -moz-transition: left .3s, top .3s!important;
+    -o-transition: left .3s, top .3s!important;
+    transition:  left .3s, top .3s!important;
+}
+
+.gridster .dragging,
+.gridster .resizing {
+    z-index: 10!important;
+    -webkit-transition: all 0s !important;
+    -moz-transition: all 0s !important;
+    -o-transition: all 0s !important;
+    transition: all 0s !important;
+}
+
+
+.gs-resize-handle {
+    position: absolute;
+    z-index: 1;
+}
+
+.gs-resize-handle-both {
+    width: 20px;
+    height: 20px;
+    bottom: -8px;
+    right: -8px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
+    background-position: top left;
+    background-repeat: no-repeat;
+    cursor: se-resize;
+    z-index: 20;
+}
+
+.gs-resize-handle-x {
+    top: 0;
+    bottom: 13px;
+    right: -5px;
+    width: 10px;
+    cursor: e-resize;
+}
+
+.gs-resize-handle-y {
+    left: 0;
+    right: 13px;
+    bottom: -5px;
+    height: 10px;
+    cursor: s-resize;
+}
+
+.gs-w:hover .gs-resize-handle,
+.resizing .gs-resize-handle {
+    opacity: 1;
+}
+
+.gs-resize-handle,
+.gs-w.dragging .gs-resize-handle {
+    opacity: 0;
+}
+
+.gs-resize-disabled .gs-resize-handle {
+    display: none!important;
+}
+
+[data-max-sizex="1"] .gs-resize-handle-x,
+[data-max-sizey="1"] .gs-resize-handle-y,
+[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle {
+    display: none !important;
+}
+
+/* Uncomment this if you set helper : "clone" in draggable options */
+/*.gridster .player {
+  opacity:0;
+}
+*/
@@ -0,0 +1,2 @@
+/*! gridster.js - v0.5.6 - 2014-09-25 - * http://gridster.net/ - Copyright (c) 2014 ducksboard; Licensed MIT */ 
+.gridster{position:relative}.gridster>*{margin:0 auto;-webkit-transition:height .4s,width .4s;-moz-transition:height .4s,width .4s;-o-transition:height .4s,width .4s;-ms-transition:height .4s,width .4s;transition:height .4s,width .4s}.gridster .gs-w{z-index:2;position:absolute}.ready .gs-w:not(.preview-holder){-webkit-transition:opacity .3s,left .3s,top .3s;-moz-transition:opacity .3s,left .3s,top .3s;-o-transition:opacity .3s,left .3s,top .3s;transition:opacity .3s,left .3s,top .3s}.ready .gs-w:not(.preview-holder),.ready .resize-preview-holder{-webkit-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-moz-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;-o-transition:opacity .3s,left .3s,top .3s,width .3s,height .3s;transition:opacity .3s,left .3s,top .3s,width .3s,height .3s}.gridster .preview-holder{z-index:1;position:absolute;background-color:#fff;border-color:#fff;opacity:.3}.gridster .player-revert{z-index:10!important;-webkit-transition:left .3s,top .3s!important;-moz-transition:left .3s,top .3s!important;-o-transition:left .3s,top .3s!important;transition:left .3s,top .3s!important}.gridster .dragging,.gridster .resizing{z-index:10!important;-webkit-transition:all 0s!important;-moz-transition:all 0s!important;-o-transition:all 0s!important;transition:all 0s!important}.gs-resize-handle{position:absolute;z-index:1}.gs-resize-handle-both{width:20px;height:20px;bottom:-8px;right:-8px;background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=);background-position:top left;background-repeat:no-repeat;cursor:se-resize;z-index:20}.gs-resize-handle-x{top:0;bottom:13px;right:-5px;width:10px;cursor:e-resize}.gs-resize-handle-y{left:0;right:13px;bottom:-5px;height:10px;cursor:s-resize}.gs-w:hover .gs-resize-handle,.resizing .gs-resize-handle{opacity:1}.gs-resize-handle,.gs-w.dragging .gs-resize-handle{opacity:0}.gs-resize-disabled .gs-resize-handle{display:none!important}[data-max-sizex="1"] .gs-resize-handle-x,[data-max-sizey="1"] .gs-resize-handle-y,[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle{display:none!important}
@@ -0,0 +1,41 @@
+{
+  "name": "gridster",
+  "title": "gridster.js",
+  "description": "a drag-and-drop multi-column jQuery grid plugin",
+  "version": "0.5.6",
+  "homepage": "http://gridster.net/",
+  "author": {
+    "name": "ducksboard",
+    "email": "hackers@ducksboard.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/ducksboard/gridster.js.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ducksboard/gridster.js/issues"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/ducksboard/gridster.js/blob/master/LICENSE"
+    }
+  ],
+  "keywords": [],
+  "dependencies": {
+    "jquery": "git+https://github.com/jquery/jquery.git#2.0.3"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-uglify": "~0.2.0",
+    "grunt-contrib-jshint": "~0.3.0",
+    "grunt-contrib-concat": "~0.1.3",
+    "grunt-contrib-watch": "~0.3.1",
+    "grunt-contrib-cssmin": "~0.5.0",
+    "grunt-contrib-yuidoc": "~0.4.0",
+    "bower": "~0.9.2",
+    "qunitjs": "~1.11.0",
+    "grunt-bump": "0.0.11",
+    "grunt-conventional-changelog": "~1.0.0"
+  }
+}
@@ -0,0 +1,242 @@
+/*
+ * jquery.collision
+ * https://github.com/ducksboard/gridster.js
+ *
+ * Copyright (c) 2012 ducksboard
+ * Licensed under the MIT licenses.
+ */
+
+;(function(root, factory) {
+
+    if (typeof define === 'function' && define.amd) {
+        define('gridster-collision', ['jquery', 'gridster-coords'], factory);
+    } else {
+        root.GridsterCollision = factory(root.$ || root.jQuery,
+            root.GridsterCoords);
+    }
+
+}(this, function($, Coords) {
+
+    var defaults = {
+        colliders_context: document.body,
+        overlapping_region: 'C'
+        // ,on_overlap: function(collider_data){},
+        // on_overlap_start : function(collider_data){},
+        // on_overlap_stop : function(collider_data){}
+    };
+
+
+    /**
+    * Detects collisions between a DOM element against other DOM elements or
+    * Coords objects.
+    *
+    * @class Collision
+    * @uses Coords
+    * @param {HTMLElement} el The jQuery wrapped HTMLElement.
+    * @param {HTMLElement|Array} colliders Can be a jQuery collection
+    *  of HTMLElements or an Array of Coords instances.
+    * @param {Object} [options] An Object with all options you want to
+    *        overwrite:
+    *   @param {String} [options.overlapping_region] Determines when collision
+    *    is valid, depending on the overlapped area. Values can be: 'N', 'S',
+    *    'W', 'E', 'C' or 'all'. Default is 'C'.
+    *   @param {Function} [options.on_overlap_start] Executes a function the first
+    *    time each `collider ` is overlapped.
+    *   @param {Function} [options.on_overlap_stop] Executes a function when a
+    *    `collider` is no longer collided.
+    *   @param {Function} [options.on_overlap] Executes a function when the
+    * mouse is moved during the collision.
+    * @return {Object} Collision instance.
+    * @constructor
+    */
+    function Collision(el, colliders, options) {
+        this.options = $.extend(defaults, options);
+        this.$element = el;
+        this.last_colliders = [];
+        this.last_colliders_coords = [];
+        this.set_colliders(colliders);
+
+        this.init();
+    }
+
+    Collision.defaults = defaults;
+
+    var fn = Collision.prototype;
+
+
+    fn.init = function() {
+        this.find_collisions();
+    };
+
+
+    fn.overlaps = function(a, b) {
+        var x = false;
+        var y = false;
+
+        if ((b.x1 >= a.x1 && b.x1 <= a.x2) ||
+            (b.x2 >= a.x1 && b.x2 <= a.x2) ||
+            (a.x1 >= b.x1 && a.x2 <= b.x2)
+        ) { x = true; }
+
+        if ((b.y1 >= a.y1 && b.y1 <= a.y2) ||
+            (b.y2 >= a.y1 && b.y2 <= a.y2) ||
+            (a.y1 >= b.y1 && a.y2 <= b.y2)
+        ) { y = true; }
+
+        return (x && y);
+    };
+
+
+    fn.detect_overlapping_region = function(a, b){
+        var regionX = '';
+        var regionY = '';
+
+        if (a.y1 > b.cy && a.y1 < b.y2) { regionX = 'N'; }
+        if (a.y2 > b.y1 && a.y2 < b.cy) { regionX = 'S'; }
+        if (a.x1 > b.cx && a.x1 < b.x2) { regionY = 'W'; }
+        if (a.x2 > b.x1 && a.x2 < b.cx) { regionY = 'E'; }
+
+        return (regionX + regionY) || 'C';
+    };
+
+
+    fn.calculate_overlapped_area_coords = function(a, b){
+        var x1 = Math.max(a.x1, b.x1);
+        var y1 = Math.max(a.y1, b.y1);
+        var x2 = Math.min(a.x2, b.x2);
+        var y2 = Math.min(a.y2, b.y2);
+
+        return $({
+            left: x1,
+            top: y1,
+             width : (x2 - x1),
+            height: (y2 - y1)
+          }).coords().get();
+    };
+
+
+    fn.calculate_overlapped_area = function(coords){
+        return (coords.width * coords.height);
+    };
+
+
+    fn.manage_colliders_start_stop = function(new_colliders_coords, start_callback, stop_callback){
+        var last = this.last_colliders_coords;
+
+        for (var i = 0, il = last.length; i < il; i++) {
+            if ($.inArray(last[i], new_colliders_coords) === -1) {
+                start_callback.call(this, last[i]);
+            }
+        }
+
+        for (var j = 0, jl = new_colliders_coords.length; j < jl; j++) {
+            if ($.inArray(new_colliders_coords[j], last) === -1) {
+                stop_callback.call(this, new_colliders_coords[j]);
+            }
+
+        }
+    };
+
+
+    fn.find_collisions = function(player_data_coords){
+        var self = this;
+        var overlapping_region = this.options.overlapping_region;
+        var colliders_coords = [];
+        var colliders_data = [];
+        var $colliders = (this.colliders || this.$colliders);
+        var count = $colliders.length;
+        var player_coords = self.$element.coords()
+                             .update(player_data_coords || false).get();
+
+        while(count--){
+          var $collider = self.$colliders ?
+                           $($colliders[count]) : $colliders[count];
+          var $collider_coords_ins = ($collider.isCoords) ?
+                  $collider : $collider.coords();
+          var collider_coords = $collider_coords_ins.get();
+          var overlaps = self.overlaps(player_coords, collider_coords);
+
+          if (!overlaps) {
+            continue;
+          }
+
+          var region = self.detect_overlapping_region(
+              player_coords, collider_coords);
+
+            //todo: make this an option
+            if (region === overlapping_region || overlapping_region === 'all') {
+
+                var area_coords = self.calculate_overlapped_area_coords(
+                    player_coords, collider_coords);
+                var area = self.calculate_overlapped_area(area_coords);
+                var collider_data = {
+                    area: area,
+                    area_coords : area_coords,
+                    region: region,
+                    coords: collider_coords,
+                    player_coords: player_coords,
+                    el: $collider
+                };
+
+                if (self.options.on_overlap) {
+                    self.options.on_overlap.call(this, collider_data);
+                }
+                colliders_coords.push($collider_coords_ins);
+                colliders_data.push(collider_data);
+            }
+        }
+
+        if (self.options.on_overlap_stop || self.options.on_overlap_start) {
+            this.manage_colliders_start_stop(colliders_coords,
+                self.options.on_overlap_start, self.options.on_overlap_stop);
+        }
+
+        this.last_colliders_coords = colliders_coords;
+
+        return colliders_data;
+    };
+
+
+    fn.get_closest_colliders = function(player_data_coords){
+        var colliders = this.find_collisions(player_data_coords);
+
+        colliders.sort(function(a, b) {
+            /* if colliders are being overlapped by the "C" (center) region,
+             * we have to set a lower index in the array to which they are placed
+             * above in the grid. */
+            if (a.region === 'C' && b.region === 'C') {
+                if (a.coords.y1 < b.coords.y1 || a.coords.x1 < b.coords.x1) {
+                    return - 1;
+                }else{
+                    return 1;
+                }
+            }
+
+            if (a.area < b.area) {
+                return 1;
+            }
+
+            return 1;
+        });
+        return colliders;
+    };
+
+
+    fn.set_colliders = function(colliders) {
+        if (typeof colliders === 'string' || colliders instanceof $) {
+            this.$colliders = $(colliders,
+                 this.options.colliders_context).not(this.$element);
+        }else{
+            this.colliders = $(colliders);
+        }
+    };
+
+
+    //jQuery adapter
+    $.fn.collision = function(collider, options) {
+          return new Collision( this, collider, options );
+    };
+
+    return Collision;
+
+}));
@@ -0,0 +1,125 @@
+/*
+ * jquery.coords
+ * https://github.com/ducksboard/gridster.js
+ *
+ * Copyright (c) 2012 ducksboard
+ * Licensed under the MIT licenses.
+ */
+
+;(function(root, factory) {
+
+    if (typeof define === 'function' && define.amd) {
+        define('gridster-coords', ['jquery'], factory);
+    } else {
+       root.GridsterCoords = factory(root.$ || root.jQuery);
+    }
+
+}(this, function($) {
+    /**
+    * Creates objects with coordinates (x1, y1, x2, y2, cx, cy, width, height)
+    * to simulate DOM elements on the screen.
+    * Coords is used by Gridster to create a faux grid with any DOM element can
+    * collide.
+    *
+    * @class Coords
+    * @param {HTMLElement|Object} obj The jQuery HTMLElement or a object with: left,
+    * top, width and height properties.
+    * @return {Object} Coords instance.
+    * @constructor
+    */
+    function Coords(obj) {
+        if (obj[0] && $.isPlainObject(obj[0])) {
+            this.data = obj[0];
+        }else {
+            this.el = obj;
+        }
+
+        this.isCoords = true;
+        this.coords = {};
+        this.init();
+        return this;
+    }
+
+
+    var fn = Coords.prototype;
+
+
+    fn.init = function(){
+        this.set();
+        this.original_coords = this.get();
+    };
+
+
+    fn.set = function(update, not_update_offsets) {
+        var el = this.el;
+
+        if (el && !update) {
+            this.data = el.offset();
+            this.data.width = el.width();
+            this.data.height = el.height();
+        }
+
+        if (el && update && !not_update_offsets) {
+            var offset = el.offset();
+            this.data.top = offset.top;
+            this.data.left = offset.left;
+        }
+
+        var d = this.data;
+
+        typeof d.left === 'undefined' && (d.left = d.x1);
+        typeof d.top === 'undefined' && (d.top = d.y1);
+
+        this.coords.x1 = d.left;
+        this.coords.y1 = d.top;
+        this.coords.x2 = d.left + d.width;
+        this.coords.y2 = d.top + d.height;
+        this.coords.cx = d.left + (d.width / 2);
+        this.coords.cy = d.top + (d.height / 2);
+        this.coords.width  = d.width;
+        this.coords.height = d.height;
+        this.coords.el  = el || false ;
+
+        return this;
+    };
+
+
+    fn.update = function(data){
+        if (!data && !this.el) {
+            return this;
+        }
+
+        if (data) {
+            var new_data = $.extend({}, this.data, data);
+            this.data = new_data;
+            return this.set(true, true);
+        }
+
+        this.set(true);
+        return this;
+    };
+
+
+    fn.get = function(){
+        return this.coords;
+    };
+
+    fn.destroy = function() {
+        this.el.removeData('coords');
+        delete this.el;
+    };
+
+    //jQuery adapter
+    $.fn.coords = function() {
+        if (this.data('coords') ) {
+            return this.data('coords');
+        }
+
+        var ins = new Coords(this, arguments[0]);
+        this.data('coords', ins);
+        return ins;
+    };
+
+    return Coords;
+
+}));
@@ -0,0 +1,432 @@
+/*
+ * jquery.draggable
+ * https://github.com/ducksboard/gridster.js
+ *
+ * Copyright (c) 2012 ducksboard
+ * Licensed under the MIT licenses.
+ */
+
+;(function(root, factory) {
+
+    if (typeof define === 'function' && define.amd) {
+        define('gridster-draggable', ['jquery'], factory);
+    } else {
+        root.GridsterDraggable = factory(root.$ || root.jQuery);
+    }
+
+}(this, function($) {
+
+    var defaults = {
+        items: 'li',
+        distance: 1,
+        limit: true,
+        offset_left: 0,
+        autoscroll: true,
+        ignore_dragging: ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'], // or function
+        handle: null,
+        container_width: 0,  // 0 == auto
+        move_element: true,
+        helper: false,  // or 'clone'
+        remove_helper: true
+        // drag: function(e) {},
+        // start : function(e, ui) {},
+        // stop : function(e) {}
+    };
+
+    var $window = $(window);
+    var dir_map = { x : 'left', y : 'top' };
+    var isTouch = !!('ontouchstart' in window);
+
+    var capitalize = function(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1);
+    };
+
+    var idCounter = 0;
+    var uniqId = function() {
+        return ++idCounter + '';
+    }
+
+    /**
+    * Basic drag implementation for DOM elements inside a container.
+    * Provide start/stop/drag callbacks.
+    *
+    * @class Draggable
+    * @param {HTMLElement} el The HTMLelement that contains all the widgets
+    *  to be dragged.
+    * @param {Object} [options] An Object with all options you want to
+    *        overwrite:
+    *    @param {HTMLElement|String} [options.items] Define who will
+    *     be the draggable items. Can be a CSS Selector String or a
+    *     collection of HTMLElements.
+    *    @param {Number} [options.distance] Distance in pixels after mousedown
+    *     the mouse must move before dragging should start.
+    *    @param {Boolean} [options.limit] Constrains dragging to the width of
+    *     the container
+    *    @param {Object|Function} [options.ignore_dragging] Array of node names
+    *      that sould not trigger dragging, by default is `['INPUT', 'TEXTAREA',
+    *      'SELECT', 'BUTTON']`. If a function is used return true to ignore dragging.
+    *    @param {offset_left} [options.offset_left] Offset added to the item
+    *     that is being dragged.
+    *    @param {Number} [options.drag] Executes a callback when the mouse is
+    *     moved during the dragging.
+    *    @param {Number} [options.start] Executes a callback when the drag
+    *     starts.
+    *    @param {Number} [options.stop] Executes a callback when the drag stops.
+    * @return {Object} Returns `el`.
+    * @constructor
+    */
+    function Draggable(el, options) {
+      this.options = $.extend({}, defaults, options);
+      this.$document = $(document);
+      this.$container = $(el);
+      this.$dragitems = $(this.options.items, this.$container);
+      this.is_dragging = false;
+      this.player_min_left = 0 + this.options.offset_left;
+      this.id = uniqId();
+      this.ns = '.gridster-draggable-' + this.id;
+      this.init();
+    }
+
+    Draggable.defaults = defaults;
+
+    var fn = Draggable.prototype;
+
+    fn.init = function() {
+        var pos = this.$container.css('position');
+        this.calculate_dimensions();
+        this.$container.css('position', pos === 'static' ? 'relative' : pos);
+        this.disabled = false;
+        this.events();
+
+        $(window).bind(this.nsEvent('resize'),
+            throttle($.proxy(this.calculate_dimensions, this), 200));
+    };
+
+    fn.nsEvent = function(ev) {
+        return (ev || '') + this.ns;
+    };
+
+    fn.events = function() {
+        this.pointer_events = {
+            start: this.nsEvent('touchstart') + ' ' + this.nsEvent('mousedown'),
+            move: this.nsEvent('touchmove') + ' ' + this.nsEvent('mousemove'),
+            end: this.nsEvent('touchend') + ' ' + this.nsEvent('mouseup'),
+        };
+
+        this.$container.on(this.nsEvent('selectstart'),
+            $.proxy(this.on_select_start, this));
+
+        this.$container.on(this.pointer_events.start, this.options.items,
+            $.proxy(this.drag_handler, this));
+
+        this.$document.on(this.pointer_events.end, $.proxy(function(e) {
+            this.is_dragging = false;
+            if (this.disabled) { return; }
+            this.$document.off(this.pointer_events.move);
+            if (this.drag_start) {
+                this.on_dragstop(e);
+            }
+        }, this));
+    };
+
+    fn.get_actual_pos = function($el) {
+        var pos = $el.position();
+        return pos;
+    };
+
+
+    fn.get_mouse_pos = function(e) {
+        if (e.originalEvent && e.originalEvent.touches) {
+            var oe = e.originalEvent;
+            e = oe.touches.length ? oe.touches[0] : oe.changedTouches[0];
+        }
+
+        return {
+            left: e.clientX,
+            top: e.clientY
+        };
+    };
+
+
+    fn.get_offset = function(e) {
+        e.preventDefault();
+        var mouse_actual_pos = this.get_mouse_pos(e);
+        var diff_x = Math.round(
+            mouse_actual_pos.left - this.mouse_init_pos.left);
+        var diff_y = Math.round(mouse_actual_pos.top - this.mouse_init_pos.top);
+
+        var left = Math.round(this.el_init_offset.left +
+            diff_x - this.baseX + $(window).scrollLeft() - this.win_offset_x);
+        var top = Math.round(this.el_init_offset.top +
+            diff_y - this.baseY + $(window).scrollTop() - this.win_offset_y);
+
+        if (this.options.limit) {
+            if (left > this.player_max_left) {
+                left = this.player_max_left;
+            } else if(left < this.player_min_left) {
+                left = this.player_min_left;
+            }
+        }
+
+        return {
+            position: {
+                left: left,
+                top: top
+            },
+            pointer: {
+                left: mouse_actual_pos.left,
+                top: mouse_actual_pos.top,
+                diff_left: diff_x + ($(window).scrollLeft() - this.win_offset_x),
+                diff_top: diff_y + ($(window).scrollTop() - this.win_offset_y)
+            }
+        };
+    };
+
+
+    fn.get_drag_data = function(e) {
+        var offset = this.get_offset(e);
+        offset.$player = this.$player;
+        offset.$helper = this.helper ? this.$helper : this.$player;
+
+        return offset;
+    };
+
+
+    fn.set_limits = function(container_width) {
+        container_width || (container_width = this.$container.width());
+        this.player_max_left = (container_width - this.player_width +
+            - this.options.offset_left);
+
+        this.options.container_width = container_width;
+
+        return this;
+    };
+
+
+    fn.scroll_in = function(axis, data) {
+        var dir_prop = dir_map[axis];
+
+        var area_size = 50;
+        var scroll_inc = 30;
+
+        var is_x = axis === 'x';
+        var window_size = is_x ? this.window_width : this.window_height;
+        var doc_size = is_x ? $(document).width() : $(document).height();
+        var player_size = is_x ? this.$player.width() : this.$player.height();
+
+        var next_scroll;
+        var scroll_offset = $window['scroll' + capitalize(dir_prop)]();
+        var min_window_pos = scroll_offset;
+        var max_window_pos = min_window_pos + window_size;
+
+        var mouse_next_zone = max_window_pos - area_size;  // down/right
+        var mouse_prev_zone = min_window_pos + area_size;  // up/left
+
+        var abs_mouse_pos = min_window_pos + data.pointer[dir_prop];
+
+        var max_player_pos = (doc_size - window_size + player_size);
+
+        if (abs_mouse_pos >= mouse_next_zone) {
+            next_scroll = scroll_offset + scroll_inc;
+            if (next_scroll < max_player_pos) {
+                $window['scroll' + capitalize(dir_prop)](next_scroll);
+                this['scroll_offset_' + axis] += scroll_inc;
+            }
+        }
+
+        if (abs_mouse_pos <= mouse_prev_zone) {
+            next_scroll = scroll_offset - scroll_inc;
+            if (next_scroll > 0) {
+                $window['scroll' + capitalize(dir_prop)](next_scroll);
+                this['scroll_offset_' + axis] -= scroll_inc;
+            }
+        }
+
+        return this;
+    };
+
+
+    fn.manage_scroll = function(data) {
+        this.scroll_in('x', data);
+        this.scroll_in('y', data);
+    };
+
+
+    fn.calculate_dimensions = function(e) {
+        this.window_height = $window.height();
+        this.window_width = $window.width();
+    };
+
+
+    fn.drag_handler = function(e) {
+        var node = e.target.nodeName;
+        // skip if drag is disabled, or click was not done with the mouse primary button
+        if (this.disabled || e.which !== 1 && !isTouch) {
+            return;
+        }
+
+        if (this.ignore_drag(e)) {
+            return;
+        }
+
+        var self = this;
+        var first = true;
+        this.$player = $(e.currentTarget);
+
+        this.el_init_pos = this.get_actual_pos(this.$player);
+        this.mouse_init_pos = this.get_mouse_pos(e);
+        this.offsetY = this.mouse_init_pos.top - this.el_init_pos.top;
+
+        this.$document.on(this.pointer_events.move, function(mme) {
+            var mouse_actual_pos = self.get_mouse_pos(mme);
+            var diff_x = Math.abs(
+                mouse_actual_pos.left - self.mouse_init_pos.left);
+            var diff_y = Math.abs(
+                mouse_actual_pos.top - self.mouse_init_pos.top);
+            if (!(diff_x > self.options.distance ||
+                diff_y > self.options.distance)
+                ) {
+                return false;
+            }
+
+            if (first) {
+                first = false;
+                self.on_dragstart.call(self, mme);
+                return false;
+            }
+
+            if (self.is_dragging === true) {
+                self.on_dragmove.call(self, mme);
+            }
+
+            return false;
+        });
+
+        if (!isTouch) { return false; }
+    };
+
+
+    fn.on_dragstart = function(e) {
+        e.preventDefault();
+
+        if (this.is_dragging) { return this; }
+
+        this.drag_start = this.is_dragging = true;
+        var offset = this.$container.offset();
+        this.baseX = Math.round(offset.left);
+        this.baseY = Math.round(offset.top);
+        this.initial_container_width = this.options.container_width || this.$container.width();
+
+        if (this.options.helper === 'clone') {
+            this.$helper = this.$player.clone()
+                .appendTo(this.$container).addClass('helper');
+            this.helper = true;
+        } else {
+            this.helper = false;
+        }
+
+        this.win_offset_y = $(window).scrollTop();
+        this.win_offset_x = $(window).scrollLeft();
+        this.scroll_offset_y = 0;
+        this.scroll_offset_x = 0;
+        this.el_init_offset = this.$player.offset();
+        this.player_width = this.$player.width();
+        this.player_height = this.$player.height();
+
+        this.set_limits(this.options.container_width);
+
+        if (this.options.start) {
+            this.options.start.call(this.$player, e, this.get_drag_data(e));
+        }
+        return false;
+    };
+
+
+    fn.on_dragmove = function(e) {
+        var data = this.get_drag_data(e);
+
+        this.options.autoscroll && this.manage_scroll(data);
+
+        if (this.options.move_element) {
+            (this.helper ? this.$helper : this.$player).css({
+                'position': 'absolute',
+                'left' : data.position.left,
+                'top' : data.position.top
+            });
+        }
+
+        var last_position = this.last_position || data.position;
+        data.prev_position = last_position;
+
+        if (this.options.drag) {
+            this.options.drag.call(this.$player, e, data);
+        }
+
+        this.last_position = data.position;
+        return false;
+    };
+
+
+    fn.on_dragstop = function(e) {
+        var data = this.get_drag_data(e);
+        this.drag_start = false;
+
+        if (this.options.stop) {
+            this.options.stop.call(this.$player, e, data);
+        }
+
+        if (this.helper && this.options.remove_helper) {
+            this.$helper.remove();
+        }
+
+        return false;
+    };
+
+    fn.on_select_start = function(e) {
+        if (this.disabled) { return; }
+
+        if (this.ignore_drag(e)) {
+            return;
+        }
+
+        return false;
+    };
+
+    fn.enable = function() {
+        this.disabled = false;
+    };
+
+    fn.disable = function() {
+        this.disabled = true;
+    };
+
+    fn.destroy = function() {
+        this.disable();
+
+        this.$container.off(this.ns);
+        this.$document.off(this.ns);
+        $(window).off(this.ns);
+
+        $.removeData(this.$container, 'drag');
+    };
+
+    fn.ignore_drag = function(event) {
+        if (this.options.handle) {
+            return !$(event.target).is(this.options.handle);
+        }
+
+        if ($.isFunction(this.options.ignore_dragging)) {
+            return this.options.ignore_dragging(event);
+        }
+
+        return $(event.target).is(this.options.ignore_dragging.join(', '));
+    };
+
+    //jQuery adapter
+    $.fn.drag = function ( options ) {
+        return new Draggable(this, options);
+    };
+
+    return Draggable;
+
+}));
@@ -0,0 +1,117 @@
+.gridster {
+    position:relative;
+}
+
+.gridster > * {
+    margin: 0 auto;
+    -webkit-transition: height .4s, width .4s;
+    -moz-transition: height .4s, width .4s;
+    -o-transition: height .4s, width .4s;
+    -ms-transition: height .4s, width .4s;
+    transition: height .4s, width .4s;
+}
+
+.gridster .gs-w {
+    z-index: 2;
+    position: absolute;
+}
+
+.ready .gs-w:not(.preview-holder) {
+    -webkit-transition: opacity .3s, left .3s, top .3s;
+    -moz-transition: opacity .3s, left .3s, top .3s;
+    -o-transition: opacity .3s, left .3s, top .3s;
+    transition: opacity .3s, left .3s, top .3s;
+}
+
+.ready .gs-w:not(.preview-holder),
+.ready .resize-preview-holder {
+    -webkit-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    -moz-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    -o-transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+    transition: opacity .3s, left .3s, top .3s, width .3s, height .3s;
+}
+
+.gridster .preview-holder {
+    z-index: 1;
+    position: absolute;
+    background-color: #fff;
+    border-color: #fff;
+    opacity: 0.3;
+}
+
+.gridster .player-revert {
+    z-index: 10!important;
+    -webkit-transition: left .3s, top .3s!important;
+    -moz-transition: left .3s, top .3s!important;
+    -o-transition: left .3s, top .3s!important;
+    transition:  left .3s, top .3s!important;
+}
+
+.gridster .dragging,
+.gridster .resizing {
+    z-index: 10!important;
+    -webkit-transition: all 0s !important;
+    -moz-transition: all 0s !important;
+    -o-transition: all 0s !important;
+    transition: all 0s !important;
+}
+
+
+.gs-resize-handle {
+    position: absolute;
+    z-index: 1;
+}
+
+.gs-resize-handle-both {
+    width: 20px;
+    height: 20px;
+    bottom: -8px;
+    right: -8px;
+    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
+    background-position: top left;
+    background-repeat: no-repeat;
+    cursor: se-resize;
+    z-index: 20;
+}
+
+.gs-resize-handle-x {
+    top: 0;
+    bottom: 13px;
+    right: -5px;
+    width: 10px;
+    cursor: e-resize;
+}
+
+.gs-resize-handle-y {
+    left: 0;
+    right: 13px;
+    bottom: -5px;
+    height: 10px;
+    cursor: s-resize;
+}
+
+.gs-w:hover .gs-resize-handle,
+.resizing .gs-resize-handle {
+    opacity: 1;
+}
+
+.gs-resize-handle,
+.gs-w.dragging .gs-resize-handle {
+    opacity: 0;
+}
+
+.gs-resize-disabled .gs-resize-handle {
+    display: none!important;
+}
+
+[data-max-sizex="1"] .gs-resize-handle-x,
+[data-max-sizey="1"] .gs-resize-handle-y,
+[data-max-sizey="1"][data-max-sizex="1"] .gs-resize-handle {
+    display: none !important;
+}
+
+/* Uncomment this if you set helper : "clone" in draggable options */
+/*.gridster .player {
+  opacity:0;
+}
+*/
@@ -0,0 +1,175 @@
+;(function(root, factory) {
+
+    if (typeof define === 'function' && define.amd) {
+        define(['jquery', 'gridster'], factory);
+    } else {
+        root.Gridster = factory(root.$ || root.jQuery, root.Gridster);
+    }
+
+}(this, function($, Gridster) {
+
+    var fn = Gridster.prototype;
+
+    fn.widgets_in_col = function(col) {
+        if (!this.gridmap[col]) {
+            return false;
+        }
+
+        for (var i = this.gridmap[col].length - 1; i >= 0; i--) {
+            if (this.is_widget(col, i) !== false) {
+                return true;
+            }
+        }
+
+        return false;
+    };
+
+    fn.widgets_in_row = function(row) {
+        for (var i = this.gridmap.length; i >= 1; i--) {
+            if (this.is_widget(i, row) !== false) {
+                return true;
+            }
+        }
+
+        return false;
+    };
+
+
+    fn.widgets_in_range = function(col1, row1, col2, row2) {
+        var valid_cols = [];
+        var valid_rows = [];
+        var $widgets = $([]);
+        var c, r, $w, wgd;
+
+        for (c = col2; c >= col1; c--) {
+            for (r = row2; r >= row1; r--) {
+                $w = this.is_widget(c, r);
+
+                if ($w !== false) {
+                    wgd = $w.data('coords').grid;
+                    if (wgd.col >= col1 && wgd.col <= col2 &&
+                        wgd.row >= row1 && wgd.row <= row2
+                       ) {
+                        $widgets = $widgets.add($w);
+                    }
+                }
+            }
+        }
+
+        return $widgets;
+    };
+
+
+    fn.get_bottom_most_occupied_cell = function() {
+        var row = 0;
+        var col = 0;
+        this.for_each_cell(function($el, c, r) {
+            if ($el && r > row) {
+                row = r;
+                col = c;
+            }
+        });
+
+        return {col: col, row: row};
+    };
+
+
+    fn.get_right_most_occupied_cell = function() {
+        var row = 0;
+        var col = 0;
+        this.for_each_cell(function($el, c, r) {
+            if ($el) {
+                row = r;
+                col = c;
+                return false;
+            }
+        });
+
+        return {col: col, row: row};
+    };
+
+
+    fn.for_each_cell = function(callback, gridmap) {
+        gridmap || (gridmap = this.gridmap);
+        var cols = gridmap.length;
+        var rows = gridmap[1].length;
+
+        cols_iter:
+        for (var c = cols - 1; c >= 1; c--) {
+            for (var r = rows - 1; r >= 1; r--) {
+                var $el = gridmap[c] && gridmap[c][r];
+                if (callback) {
+                    if (callback.call(this, $el, c, r) === false) {
+                        break cols_iter;
+                    } else { continue; }
+                }
+            }
+        }
+    };
+
+
+    fn.next_position_in_range = function(size_x, size_y, max_rows) {
+        size_x || (size_x = 1);
+        size_y || (size_y = 1);
+        var ga = this.gridmap;
+        var cols_l = ga.length;
+        var valid_pos = [];
+        var rows_l;
+
+        for (var c = 1; c < cols_l; c++) {
+            rows_l = max_rows || ga[c].length;
+            for (var r = 1; r <= rows_l; r++) {
+                var can_move_to = this.can_move_to({
+                    size_x: size_x,
+                    size_y: size_y
+                }, c, r, max_rows);
+
+                if (can_move_to) {
+                    valid_pos.push({
+                        col: c,
+                        row: r,
+                        size_y: size_y,
+                        size_x: size_x
+                    });
+                }
+            }
+        }
+
+        if (valid_pos.length >= 1) {
+            return Gridster.sort_by_col_asc(valid_pos)[0];
+        }
+
+        return false;
+    };
+
+
+    fn.closest_to_right = function(col, row) {
+        if (!this.gridmap[col]) { return false; }
+        var cols_l = this.gridmap.length - 1;
+
+        for (var c = col; c <= cols_l; c++) {
+            if (this.gridmap[c][row]) {
+                return { col: c, row: row };
+            }
+        }
+
+        return false;
+    };
+
+
+    fn.closest_to_left = function(col, row) {
+        var cols_l = this.gridmap.length - 1;
+        if (!this.gridmap[col]) { return false; }
+
+        for (var c = col; c >= 1; c--) {
+            if (this.gridmap[c][row]) {
+                return { col: c, row: row };
+            }
+        }
+
+        return false;
+    };
+
+    return Gridster;
+
+}));
@@ -0,0 +1,72 @@
+;(function(window, undefined) {
+
+    /* Delay, debounce and throttle functions taken from underscore.js
+     *
+     * Copyright (c) 2009-2013 Jeremy Ashkenas, DocumentCloud and
+     * Investigative Reporters & Editors
+     *
+     * Permission is hereby granted, free of charge, to any person
+     * obtaining a copy of this software and associated documentation
+     * files (the "Software"), to deal in the Software without
+     * restriction, including without limitation the rights to use,
+     * copy, modify, merge, publish, distribute, sublicense, and/or sell
+     * copies of the Software, and to permit persons to whom the
+     * Software is furnished to do so, subject to the following
+     * conditions:
+     *
+     * The above copyright notice and this permission notice shall be
+     * included in all copies or substantial portions of the Software.
+     *
+     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+     * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+     * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+     * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+     * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+     * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+     * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+     * OTHER DEALINGS IN THE SOFTWARE.
+     */
+
+    window.delay = function(func, wait) {
+        var args = Array.prototype.slice.call(arguments, 2);
+        return setTimeout(function(){ return func.apply(null, args); }, wait);
+    };
+
+    window.debounce = function(func, wait, immediate) {
+        var timeout;
+        return function() {
+          var context = this, args = arguments;
+          var later = function() {
+            timeout = null;
+            if (!immediate) func.apply(context, args);
+          };
+          if (immediate && !timeout) func.apply(context, args);
+          clearTimeout(timeout);
+          timeout = setTimeout(later, wait);
+        };
+    };
+
+    window.throttle = function(func, wait) {
+        var context, args, timeout, throttling, more, result;
+        var whenDone = debounce(
+            function(){ more = throttling = false; }, wait);
+        return function() {
+          context = this; args = arguments;
+          var later = function() {
+            timeout = null;
+            if (more) func.apply(context, args);
+            whenDone();
+          };
+          if (!timeout) timeout = setTimeout(later, wait);
+          if (throttling) {
+            more = true;
+          } else {
+            result = func.apply(context, args);
+          }
+          whenDone();
+          throttling = true;
+          return result;
+        };
+    };
+
+})(window);
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>gridster.js Test Suite</title>
+  <!-- Load local jQuery, removing access to $ (use jQuery, not $). -->
+  <script src="../libs/jquery/jquery.js"></script>
+  <script>jQuery.noConflict()</script>
+
+
+  <script type="text/javascript" src="../libs/jquery/jquery.js"></script>
+
+  <script src="../dist/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
+
+  <link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.css">
+
+
+  <!-- Load local QUnit (grunt requires v1.0.0 or newer). -->
+  <link rel="stylesheet" href="../libs/qunit/qunit.css" media="screen">
+
+  <script src="../libs/qunit/qunit.js"></script>
+  <!-- Load local lib and tests. -->
+  <script src="../src/jquery.gridster.js"></script>
+  <script src="jquery.gridster_test.js"></script>
+
+</head>
+<body>
+  <h1 id="qunit-header">gridster.js Test Suite</h1>
+  <h2 id="qunit-banner"></h2>
+  <div id="qunit-testrunner-toolbar"></div>
+  <h2 id="qunit-userAgent"></h2>
+  <ol id="qunit-tests"></ol>
+  <div id="qunit-fixture">
+
+  <div class="wrapper">
+      <ul>
+        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"></li>
+        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2"></li>
+        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"></li>
+        <li data-row="3" data-col="2" data-sizex="3" data-sizey="1"></li>
+
+        <li data-row="4" data-col="1" data-sizex="1" data-sizey="1"></li>
+        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1"></li>
+        <li data-row="4" data-col="2" data-sizex="1" data-sizey="1"></li>
+        <li data-row="5" data-col="2" data-sizex="1" data-sizey="1"></li>
+        <li data-row="4" data-col="4" data-sizex="1" data-sizey="1"></li>
+
+        <li data-row="1" data-col="5" data-sizex="1" data-sizey="3"></li>
+
+
+        <li data-row="5" data-col="1" data-sizex="1" data-sizey="2"></li>
+        <li data-row="4" data-col="3" data-sizex="1" data-sizey="2"></li>
+        <li data-row="5" data-col="4" data-sizex="1" data-sizey="1"></li>
+        <li data-row="6" data-col="2" data-sizex="3" data-sizey="1"></li>
+
+        <li data-row="4" data-col="5" data-sizex="1" data-sizey="2"></li>
+        <li data-row="6" data-col="5" data-sizex="1" data-sizey="1"></li>
+
+        <li data-row="7" data-col="3" data-sizex="1" data-sizey="1"></li>
+
+      </ul>
+    </div>
+  </div>
+
+
+</body>
+</html>
@@ -0,0 +1,38 @@
+/*global QUnit:false, module:false, test:false, asyncTest:false, expect:false*/
+/*global start:false, stop:false ok:false, equal:false, notEqual:false, deepEqual:false*/
+/*global notDeepEqual:false, strictEqual:false, notStrictEqual:false, raises:false*/
+(function($) {
+
+  /*
+    ======== A Handy Little QUnit Reference ========
+    http://docs.jquery.com/QUnit
+
+    Test methods:
+      expect(numAssertions)
+      stop(increment)
+      start(decrement)
+    Test assertions:
+      ok(value, [message])
+      equal(actual, expected, [message])
+      notEqual(actual, expected, [message])
+      deepEqual(actual, expected, [message])
+      notDeepEqual(actual, expected, [message])
+      strictEqual(actual, expected, [message])
+      notStrictEqual(actual, expected, [message])
+      raises(block, [expected], [message])
+  */
+
+  module('jQuery#gridster', {
+    setup: function() {
+
+      this.el = $('#qunit-fixture').find(".wrapper ul");
+
+    }
+  });
+
+  // test('is chainable', 1, function() {
+  //   // Not a bad test to run on collection methods.
+  //   strictEqual(this.el, this.el.gridster(), 'should be chaninable');
+  // });
+
+}(jQuery));
@@ -0,0 +1,3 @@
+CREATE TABLE `users_widgets` (   `user_widget_id` int(11) NOT NULL AUTO_INCREMENT,   `user_id` int(11) NOT NULL,   `widget_id` int(11) NOT NULL,   `col` tinyint(4) NOT NULL,   `row` tinyint(4) NOT NULL,   `size_x` tinyint(4) NOT NULL,   `size_y` tinyint(4) NOT NULL,   `title` varchar(255) NOT NULL,   `refresh` tinyint(4) NOT NULL DEFAULT '60',   PRIMARY KEY (`user_widget_id`),   KEY `user_id` (`user_id`,`widget_id`) ) ENGINE=InnoDB AUTO_INCREMENT=46 DEFAULT CHARSET=latin1;
+CREATE TABLE `widgets` (  `widget_id` int(11) NOT NULL AUTO_INCREMENT,  `widget_title` varchar(255) NOT NULL,  `widget` varchar(255) NOT NULL,  `base_dimensions` varchar(10) NOT NULL,  PRIMARY KEY (`widget_id`),  UNIQUE KEY `widget` (`widget`)) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=latin1;
+INSERT INTO `widgets` (`widget_id`, `widget_title`, `widget`, `base_dimensions`) VALUES (1, 'Availability map', 'availability-map', '4,3'), (2, 'Device summary horizontal', 'device-summary-horiz', '4,2'), (3, 'Alerts', 'alerts', '8,4'), (4, 'Device summary vertical', 'device-summary-vert', '4,3'), (5, 'World map', 'globe', '3,3');
				`@@ -0,0 +1 @@`
				`../../lib/gridster/dist/jquery.gridster.min.css`