1 files changed, 115 insertions, 0 deletions
diff --git a/static/tests/space.packing/index.html b/static/tests/space.packing/index.html
new file mode 100755
index 0000000..644758a
--- /dev/null
+++ b/static/tests/space.packing/index.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>dump.fm image packing test</title>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <meta name="description" content="dump.fm - Talk with pictures!" />
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+    <script type="text/javascript" src="spacefill.js"></script>
+
+  <style>
+  html,body,img,div{margin:0; border:0; padding:0}
+  img { max-width: 400px; max-height: 400px;}
+  h1 { display:inline-block; margin: 20px; font-size: 30px;}
+  #content { position: relative; width: 100%; }
+  fieldset { display: inline }
+  p { margin-left: 20px; display: inline-block; }
+  </style>
+
+<script>
+
+function go(){
+
+  $("#content").html("")
+
+  columnSize = parseInt($("#settings-columnSize").val()) || 300
+
+  minImageSize = parseInt($("#settings-minSize").val()) || 16
+  maxImageSize = columnSize
+
+  columnSpacingStyle = $('input:radio[name=settings-column-spacing]:checked').val();
+
+  getWindowSize()
+
+  SpaceFill.init({
+    "container": "#content",
+    "width": Width,
+    "height": Height,
+    "type": "columns",
+    "spacing": columnSpacingStyle,
+    "minMargin": 16,
+    "columnWidth": columnSize
+  })
+
+
+  setTimeout(fill, 50)
+}
+
+
+function fill(){
+
+  if (ColumnFill.isSpaceFilled()) return;
+
+  var img = randomImage()
+
+  SpaceFill.add(img)
+
+  setTimeout(fill, 50)
+
+}
+
+function randomImage(){
+
+  var d = document.createElement("div")
+  d.style.backgroundColor = "#" + rand16() + rand16() + rand16() + rand16() + rand16() + rand16()
+  d.style.width = Math.floor(Math.random() * (maxImageSize - minImageSize) + minImageSize) + "px"
+  d.style.height = Math.floor(Math.random() * (maxImageSize - minImageSize) + minImageSize) + "px"
+
+  return d
+
+}
+
+function rand16(){
+  return Math.floor(Math.random() * 16).toString(16)
+ }
+
+function getWindowSize(){
+  Width = $(document).width()
+  Height = $(document).height()
+}
+
+
+
+</script>
+</head>
+  <body>
+
+  <h1> space packing test. </h1>
+  <p>
+  <fieldset><legend>type: <select><option>columns</option></select></legend>
+  <div>
+  <br>column size <input name="settings-columnSize" id="settings-columnSize" type="text" value="200" size="4" />
+  <br>min image size <input name="settings-minSize" id="settings-minSize" type="text" value="40" size="4" />
+  <br>
+    center <input name="settings-column-spacing" value="center" checked="checked" type="radio">
+    justify <input name="settings-column-spacing" value="justify" type="radio">
+  </div>
+  <br><button onclick="go()">go</button>
+  </fieldset>
+
+
+
+
+  </p>
+
+
+
+
+
+  <div id="content"></div>
+
+
+
+
+  </body>
+ </html>