From 3be3ff85280047c6b51273d9a958fbc08416e12c Mon Sep 17 00:00:00 2001
From: Iam Naughton Phier <truck@notonfire.co.uk>
Date: Mon, 23 Mar 2015 17:44:56 +0200
Subject: [PATCH] visual and some minor code cleanup

---
 sahli.coffee | 18 ++++++++----------
 sahli.css    |  8 ++++++--
 sahli.js     | 38 +++++++++++++++++++++++---------------
 3 files changed, 37 insertions(+), 27 deletions(-)

diff --git a/sahli.coffee b/sahli.coffee
index 7717eab..77fa3b7 100644
--- a/sahli.coffee
+++ b/sahli.coffee
@@ -237,9 +237,9 @@ class @Sahli
         zoomee.width '100%'
         $('canvas').width '100%'
 
-# calculate # strips - how many times does window height go into full height
-# and then move the canvases into it. - done
-# outbox toggled last to avoid losing width. (prolly need to fix.)
+# create a panel of 'strips' so as to show a very long vertical piece on one
+# big 'plate'
+
   @panelmode = ->
     $('#panel').toggle()
     canvs = $('canvas')
@@ -267,7 +267,6 @@ class @Sahli
 
       outer = $('<div>')
       console.log numcols
-#      outer.append @createpanel(i,newwidth - 6) for i in [1..numcols-1]
       outer.addClass 'nosb'
       $('#panel').append outer
       $('#outbox').toggle()
@@ -286,10 +285,10 @@ class @Sahli
           if ct < numpanels
             outer.append @createpanel(drawcol,newwidth - 6)
 
-      console.log "ww: #{ww} wh: #{wh} numpanels: #{numpanels} x: #{x}"
-      console.log "numcols: #{numcols} picdpercol: #{picdpercol}"
-      console.log "psh: #{panelslotheight} pps: #{panelsperslot}"
-      console.log "a*b: #{panelsperslot*(numcols-1)}"
+#      console.log "ww: #{ww} wh: #{wh} numpanels: #{numpanels} x: #{x}"
+#      console.log "numcols: #{numcols} picdpercol: #{picdpercol}"
+#      console.log "psh: #{panelslotheight} pps: #{panelsperslot}"
+#      console.log "a*b: #{panelsperslot*(numcols-1)}"
 
     else
       $('.scrolly').width @origwidth
@@ -300,8 +299,7 @@ class @Sahli
 
 
   @createpanel = (i,amt) ->
-    dcol = $("<div id='column#{i}'>#{i}</div>")
-    dcol.addClass 'panelcolumn'
+    dcol = $("<div id='column#{i}' class='panelcolumn'>#{i}</div>")
     dcol.width amt
 
   @loadkeys = ->
diff --git a/sahli.css b/sahli.css
index 70664ed..4b39b4e 100644
--- a/sahli.css
+++ b/sahli.css
@@ -1,3 +1,7 @@
+/*
+  Sahli css
+*/
+
 body {
     background-color: black;
     margin: 0;
@@ -152,8 +156,8 @@ p.infobox {
 }
 
 .panelcolumn {
-    height: 100%;
-    color: #00f080;
+
+    color: transparent;
     width: 2em;
     background: #082020;
     display: inline-table;
diff --git a/sahli.js b/sahli.js
index 370b415..53ecc99 100644
--- a/sahli.js
+++ b/sahli.js
@@ -281,7 +281,7 @@ l__________/__________|___|______l__________j_____j
     };
 
     Sahli.panelmode = function() {
-      var canvs, colwidth, drawcol, i, level, newheight, newwidth, numcols, numpanels, outer, panelratio, pic, picdpercol, screenratio, wh, ww, x, _i, _j, _k, _len, _len1, _ref;
+      var canvs, ct, drawcol, level, newheight, newwidth, numcols, numpanels, outer, panelratio, panelslotheight, panelsperslot, pic, picdpercol, screenratio, wh, ww, x, _i, _j, _len, _len1, _results;
       $('#panel').toggle();
       canvs = $('canvas');
       if ($('.scrolly').width() === this.origwidth) {
@@ -297,33 +297,42 @@ l__________/__________|___|______l__________j_____j
         picdpercol = Math.round(numpanels / numcols);
         newwidth = ww / numcols;
         canvs.width(newwidth);
-        newheight = $(canvs[0]).height();
-        colwidth = ww / numcols;
+        newheight = canvs.height();
+        panelsperslot = Math.floor(wh / newheight);
+        panelslotheight = panelsperslot * newheight;
         outer = $('<div>');
-        for (i = _i = 1, _ref = numcols - 1; 1 <= _ref ? _i <= _ref : _i >= _ref; i = 1 <= _ref ? ++_i : --_i) {
-          outer.append(this.createpanel(i, colwidth - 6));
-        }
+        console.log(numcols);
         outer.addClass('nosb');
         $('#panel').append(outer);
         $('#outbox').toggle();
         level = 0;
         drawcol = 1;
-        for (_j = 0, _len = canvs.length; _j < _len; _j++) {
-          pic = canvs[_j];
+        ct = 0;
+        outer.append(this.createpanel(1, newwidth - 6));
+        _results = [];
+        for (_i = 0, _len = canvs.length; _i < _len; _i++) {
+          pic = canvs[_i];
           $("#column" + drawcol).append(pic);
           level += 1;
-          if (level > picdpercol) {
+          ct += 1;
+          if (level === panelsperslot) {
             level = 0;
             drawcol = drawcol + 1;
+            if (ct < numpanels) {
+              _results.push(outer.append(this.createpanel(drawcol, newwidth - 6)));
+            } else {
+              _results.push(void 0);
+            }
+          } else {
+            _results.push(void 0);
           }
         }
-        console.log("ww: " + ww + " wh: " + wh + " numpanels: " + numpanels + " x: " + x);
-        return console.log("numcols: " + numcols + " picdpercol: " + picdpercol);
+        return _results;
       } else {
         $('.scrolly').width(this.origwidth);
         $('#outbox').show();
-        for (_k = 0, _len1 = canvs.length; _k < _len1; _k++) {
-          pic = canvs[_k];
+        for (_j = 0, _len1 = canvs.length; _j < _len1; _j++) {
+          pic = canvs[_j];
           $('.scrolly').append(pic);
         }
         canvs.width(this.origwidth);
@@ -333,8 +342,7 @@ l__________/__________|___|______l__________j_____j
 
     Sahli.createpanel = function(i, amt) {
       var dcol;
-      dcol = $("<div id='column" + i + "'>" + i + "</div>");
-      dcol.addClass('panelcolumn');
+      dcol = $("<div id='column" + i + "' class='panelcolumn'>" + i + "</div>");
       return dcol.width(amt);
     };