1 files changed, 174 insertions, 0 deletions
diff --git a/static/html/space.packing.html b/static/html/space.packing.html
new file mode 100644
index 0000000..7f46061
--- /dev/null
+++ b/static/html/space.packing.html
@@ -0,0 +1,174 @@
+<!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>
+
+  <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>
+
+var marginWidth = 16
+var marginHeight = 16
+
+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()
+  var numColumns = calcColumns()
+  Columns = []
+  for (var i = 0; i < numColumns; i++) {
+    Columns.push({"height": 0})
+  }
+
+  if (columnSpacingStyle == "center") {
+    marginWidth = 16
+    columnSpacingAmt = (Width - (numColumns * (columnSize + marginWidth) + marginWidth)) / 2
+
+  } else if (columnSpacingStyle == "justify")
+    marginWidth = (Width - (numColumns * columnSize)) / (numColumns + 1)
+
+
+  setTimeout(fill, 50)
+}
+
+
+function fill(){
+  var img = randomImage()
+
+  var colIndex = shortestColumn()
+  var col = Columns[colIndex]
+
+  if (col.height > 2 * Height) return;
+
+  if (columnSpacingStyle == "center") {
+    var colLeft = colIndex * (marginWidth + columnSize) + columnSpacingAmt
+    var imgLeft = Math.floor((marginWidth / 2) + (columnSize / 2) - (parseInt(img.style.width) / 2)) + colLeft + "px"
+  } else if (columnSpacingStyle == "justify") {
+    var colLeft = (colIndex * (marginWidth + columnSize))
+    var imgLeft = Math.floor((marginWidth / 2) + (columnSize / 2) - (parseInt(img.style.width) / 2)) + colLeft + "px"
+  }
+
+
+
+  img.style.position = 'absolute'
+  img.style.top = col.height + marginHeight + "px"
+  img.style.left = imgLeft
+
+  col.height += marginHeight + parseInt(img.style.height)
+
+  $("#content").append(img)
+
+  setTimeout(fill, 50)
+
+}
+
+function shortestColumn(){
+  var min = Infinity
+  var mindex = 0
+  for(var i = 0; i< Columns.length; i++){
+      var col = Columns[i]
+      if ( min > col.height) {
+        min = col.height
+        mindex = i
+      }
+  }
+
+  return mindex
+
+
+}
+
+
+
+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 calcColumns(){
+  var minMargin = 16
+  var columns = 0;
+  var width = Width - minMargin;
+  var columnSub = columnSize + minMargin
+  while (width > columnSub) {
+    width -= columnSub
+    columns ++
+  }
+
+  return columns
+
+}
+
+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>
+