From 1812366c0fbb00f67693efa916752441eb3be8f3 Mon Sep 17 00:00:00 2001
From: David Morse <david.morse@issinc.com>
Date: Thu, 4 Jun 2015 22:09:17 -0600
Subject: [PATCH] feature: Add Chaos demo to test widget placement.

---
 demos/chaosWidget.html | 90 ++++++++++++++++++++++++++++++++++++++++++
 demos/index.html       |  1 +
 2 files changed, 91 insertions(+)
 create mode 100644 demos/chaosWidget.html
diff --git a/demos/chaosWidget.html b/demos/chaosWidget.html
new file mode 100644
index 000000000..3a5793a84
--- /dev/null
+++ b/demos/chaosWidget.html
@@ -0,0 +1,90 @@
+<!doctype html>
+<html>
+<head>
+    <title>Demo &raquo; Resize &raquo; gridster.js</title>
+    <link rel="stylesheet" type="text/css" href="assets/css/demo.css">
+    <link rel="stylesheet" type="text/css" href="../dist/jquery.gridster.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <script src=//cdnjs.cloudflare.com/ajax/libs/seedrandom/2.3.10/seedrandom.min.js></script>
+    <script src="../dist/jquery.gridster.js" type="text/javascript" charset="utf-8"></script>
+</head>
+
+<body>
+
+<h1>Resize</h1>
+
+<p>As  hommage to Netflix's <a href="https://github.com/Netflix/SimianArmy/wiki/Chaos-Monkey">Chaos Monkey</a>, this demo page is for testing.  It  attempts to insert a widget at a random location to ensure the overlap deconfliction locic works.</p>
+
+<div class="controls">
+    <button class="js-fixed-random">Insert widget at random location</button>
+    <button class="js-random-random">Insert random sized widget at random location</button>
+</div>
+
+<div class="gridster">
+    <ul style="z-index: 2; float: left;position: absolute">
+        <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">0</li>
+        <li data-row="1" data-col="3" data-sizex="1" data-sizey="2">1</li>
+        <li data-row="1" data-col="4" data-sizex="1" data-sizey="1">2</li>
+        <li data-row="3" data-col="2" data-sizex="3" data-sizey="1">3</li>
+        <li data-row="4" data-col="1" data-sizex="1" data-sizey="1">4</li>
+        <li data-row="3" data-col="1" data-sizex="1" data-sizey="1">5</li>
+        <li data-row="4" data-col="2" data-sizex="1" data-sizey="1">6</li>
+        <li data-row="5" data-col="2" data-sizex="1" data-sizey="1">7</li>
+        <li data-row="4" data-col="4" data-sizex="1" data-sizey="1">8</li>
+        <li data-row="1" data-col="5" data-sizex="1" data-sizey="3">9</li>
+    </ul>
+    <svg width="100%" height="800px" xmlns="http://www.w3.org/2000/svg" style="float: left;
+  position: relative;
+  z-index: 5;
+    margin-top: 15px;">
+    <defs>
+        <pattern id="grid" width="105" height="105" patternUnits="userSpaceOnUse">
+            <rect width="105" height="105" fill="url(#smallGrid)"/>
+            <path d="M 105 0 L 0 0 0 105" fill="none" stroke="black" stroke-width="1"/>
+        </pattern>
+    </defs>
+
+    <rect width="100%" height="100%" fill="url(#grid)" />
+</svg>
+</div>
+
+
+<script type="text/javascript">
+    Math.seedrandom();
+
+    function getRandomInt (min, max) {
+        return Math.floor(Math.random() * (max - min + 1)) + min;
+    }
+</script>
+
+<script type="text/javascript">
+    var gridster;
+    var nextSimian = 10;
+
+    $(function () {
+
+        gridster = $(".gridster ul").gridster({
+            widget_base_dimensions: [100, 100],
+            avoid_overlapped_widgets: true,
+            widget_margins: [5, 5],
+            helper: 'clone',
+            resize: {
+                enabled: true
+            }
+        }).data('gridster');
+
+
+        $('.js-random-random').on('click', function () {
+            gridster.add_widget('<li>' + nextSimian + '</li>', getRandomInt(1, 5), getRandomInt(1, 5), getRandomInt(1, 15), getRandomInt(1, 15));
+            nextSimian++;
+        });
+
+        $('.js-fixed-random').on('click', function () {
+            gridster.add_widget('<li>' + nextSimian + '</li>', 1 , 1, getRandomInt(1, 15), getRandomInt(1, 15));
+            nextSimian++;
+        });
+
+    });
+</script>
+</body>
+</html>
diff --git a/demos/index.html b/demos/index.html
index f5dfd2559..23feab475 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -18,6 +18,7 @@
     <li><a href="grid-from-serialize.html">Build grid from serialize</a></li>
     <li><a href="multiple-grids.html">Multiple gridster instances on the same page</a></li>
     <li><a href="resize.html">Resizable widgets</a></li>
+    <li><a href="chaosWidget.html">Chaos Widgets</a></li>
     <li><a href="resize-limits.html">Resizable widgets with constraints</a></li>
     <li><a href="serialize.html">Serialize widgets positions</a></li>
     <li><a href="using-drag-callbacks.html">Using drag callbacks</a></li>
