5 files changed, 46 insertions, 6 deletions

diff --git a/js/app.js b/js/app.js
index d65f239..0532c81 100644
--- a/js/app.js
+++ b/js/app.js
@@ -32,6 +32,7 @@ function build () {
   brush.build()
 
   // controls.grid.use()
+  controls.rotate.refresh()
 }
 function bind () {
   canvas.bind()
diff --git a/js/matrix.js b/js/matrix.js
index f661ceb..90ff7fc 100644
--- a/js/matrix.js
+++ b/js/matrix.js
@@ -182,7 +182,7 @@ Matrix.prototype.resize = function(w,h){
   this.h = h
   this.bind && this.bind()
 
-  if (this.rotated) { controls.rotate.use(this.rotated) }
+  if (this.rotated) { controls.rotate.refresh(this.rotated) }
 }
 
 //
diff --git a/js/ui/controls.js b/js/ui/controls.js
index 3b9dfc4..50eea73 100644
--- a/js/ui/controls.js
+++ b/js/ui/controls.js
@@ -199,22 +199,45 @@ var controls = (function(){
   controls.rotate = new BlurredCheckbox (rotate_checkbox)
   controls.rotate.use = function(state){
   	canvas.rotated = typeof state == "boolean" ? state : ! canvas.rotated
+  	controls.rotate.refresh()
+  }
+  controls.rotate.refresh = function(){
 		if (canvas.rotated) {
 			canvas_rapper.parentNode.classList.add("rotated")
-			canvas_rapper.parentNode.style.height = (canvas_rapper.offsetWidth+20) + "px"
-			// canvas_rapper.parentNode.style.width = (canvas_rapper.offsetHeight+20) + "px"
+			canvas_rapper.parentNode.style.height = (canvas_rapper.firstChild.offsetWidth+20) + "px"
+			canvas_rapper.parentNode.style.width = (canvas_rapper.offsetHeight+20) + "px"
 			canvas_rapper.style.top = ((canvas_rapper.offsetWidth+20)/2) + "px"
 			// canvas_rapper.style.left = ((canvas_rapper.offsetHeight+20)/2) + "px"
 		}
 		else {
 			canvas_rapper.parentNode.classList.remove("rotated")
 			canvas_rapper.parentNode.style.height = ""
-			// canvas_rapper.parentNode.style.width = (canvas_rapper.offsetWidth+20) + "px"
+			canvas_rapper.style.width = 
+			canvas_rapper.parentNode.style.width = (canvas_rapper.firstChild.offsetWidth+20) + "px"
 			canvas_rapper.style.top = ""
 			// canvas_rapper.style.left = "auto"
 		}
 		this.update(canvas.rotated)
   }
+  
+  //
+  
+  controls.vertical = new BlurredCheckbox (vertical_checkbox)
+  controls.vertical.use = function(state){
+  	canvas.vertical = typeof state == "boolean" ? state : ! canvas.vertical
+  	controls.vertical.refresh()
+  }
+  controls.vertical.refresh = function(){
+		if (canvas.vertical) {
+			document.body.classList.add("vertical")
+		}
+		else {
+			document.body.classList.remove("vertical")
+		}
+		palette.repaint()
+		letters.repaint()
+		this.update(canvas.vertical)
+	}
 
   //
   
@@ -251,6 +274,7 @@ var controls = (function(){
       controls.bg,
       controls.char,
       controls.rotate,
+      controls.vertical,
       controls.shader,
       controls.animate,
       controls.save,
diff --git a/js/ui/letters.js b/js/ui/letters.js
index 702512a..36d778b 100644
--- a/js/ui/letters.js
+++ b/js/ui/letters.js
@@ -19,11 +19,17 @@ var letters = (function(){
     last_charset = charset
     var chars = unicode.block(charset, 32)
     if (chars[0] != " ") chars.unshift(" ")
-    letters.resize( 32, Math.ceil( chars.length / 32 ) )
+    if (canvas.vertical) {
+			letters.resize( Math.ceil( chars.length / 16 ), 16 )
+    }
+    else {
+			letters.resize( 32, Math.ceil( chars.length / 32 ) )
+    }
 
     var i = 0
 
   	letters.forEach(function(lex,x,y){
+  		if (canvas.vertical) { x=x^y;y=x^y;x=x^y }
   	  var char = chars[i++]
   	  if (palette.chars.indexOf(brush.char) > 1) {
         lex.bg = brush.fg
@@ -40,7 +46,7 @@ var letters = (function(){
 	}
   
   letters.bind = function(){
-    letters.forEach(function(lex, x, y){
+    letters.forEach(function(lex,x,y){
       if (lex.bound) return
       lex.bound = true
 
diff --git a/js/ui/palette.js b/js/ui/palette.js
index 1fc17cf..7417316 100644
--- a/js/ui/palette.js
+++ b/js/ui/palette.js
@@ -11,7 +11,16 @@ var palette = (function(){
   palette.chars = "  ▓▒░"
 
   palette.repaint = function(){
+		var xw = use_experimental_palette ? 5 : 2
+    if (canvas.vertical) {
+			palette.resize( xw, 16 )
+    }
+    else {
+			palette.resize( 32, xw )
+    }
+
   	palette.forEach(function(lex,x,y){
+  		if (canvas.vertical) { x=x^y;y=x^y;x=x^y;x*=2 }
   		if (y < 2) {
 				lex.bg = palette_fn(x>>1)
 				lex.fg = palette_fn(x>>1)