new panel layout and improved responsiveness in enyo+ff

2024-11-23 21:29:49 +00:00 · 2014-12-02 22:11:50 +01:00 · 2014-12-02 22:11:50 +01:00 · f77c495caf
commit f77c495caf
parent 6e3d16dc81
28 changed files with 49320 additions and 4484 deletions
--- a/shlr/www/enyo/disasm.css
+++ b/shlr/www/enyo/disasm.css
@ -51,6 +51,15 @@

 input:focus {outline: none; }

+.ec_fline {color: rgb(0,127,127);}
+.ec_help {color: rgb(0,127,127);}
+.ec_args {color: rgb(0,127,127);}
+.ec_label {color: rgb(0,127,127);}
+.ec_flow {color: rgb(0,127,127);}
+.ec_prompt {color: rgb(0,127,127);}
+.ec_input {color: rgb(0,127,127);}
+.ec_btext {color: rgb(0,127,127);}
+.ec_swi {color: rgb(0,127,127);}
 .ec_comment {color: rgb(0,127,127);}
 .ec_fname {color: rgb(127,0,0);}
 .ec_flag {color: rgb(0,127,127);}
@ -76,11 +85,10 @@ input:focus {outline: none; }
 .ec_mov {color: rgb(127,127,127);}
 .ec_num {color: rgb(127,127,0);}

-.ec_jmp_line {color: orange;}
-.ec_cjmp_line {color: yellow;}
+.ec_cflow {color: yellow;}
 .ec_dataoffset {color: rgb(136,136,0);}
-.ec_background {background-color: rgb(10,10,10); }
-.ec_alt_background {background-color: rgb(39,39,39); }
+.ec_background {background-color: rgb(20,20,20); }
+.ec_alt_background {background-color: rgb(40,40,40); }
 .ec_border {border-color: #3a3a3a; }

 .autohighlight { background-color: #8AFF77 !important; }
--- a/shlr/www/enyo/index.js
+++ b/shlr/www/enyo/index.js
--- a/shlr/www/enyo/js/disasm.js
+++ b/shlr/www/enyo/js/disasm.js
@ -53,7 +53,9 @@ BBGraph.prototype.render = function() {
  var canvas = document.createElement("canvas");
  canvas.width = fnum(gdata[2])+100;
  canvas.height = fnum(gdata[3])+100;
-  canvas.id = "gcanvas";
+  canvas.id = "canvas";
+  canvas.setAttribute("tabindex", "1");
+  canvas.setAttribute("style", "outline: none;");
  gbox.appendChild(canvas);
  var ctx = canvas.getContext("2d");
  for (i = 2; true; i++) {
@ -206,10 +208,10 @@ function render_instructions(instructions) {
        line.to = ins.jump;
      }
      if (ins.type == "jmp") {
-        line.color = r2ui.colors[".ec_jmp_line"];
+        line.color = r2ui.colors[".ec_flow"];
        line.dashed = false;
      } else if (ins.type == "cjmp") {
-        line.color = r2ui.colors[".ec_cjmp_line"];
+        line.color = r2ui.colors[".ec_cflow"];
        line.dashed = true;
      }
      line.to_start = true;
@ -241,7 +243,9 @@ function render_instructions(instructions) {
    var canvas = document.createElement("canvas");
    canvas.width = 2500;
    canvas.height = accumulated_heigth + 100;
-    canvas.id = "fcanvas";
+    canvas.id = "canvas";
+    canvas.setAttribute("tabindex", "1");
+    canvas.setAttribute("style", "outline: none;");
    gbox.appendChild(canvas);
    var ctx = canvas.getContext("2d");
    if (!ctx.setLineDash) {
--- a/shlr/www/enyo/js/disassembler.js
+++ b/shlr/www/enyo/js/disassembler.js
@ -46,13 +46,59 @@ enyo.kind ({
    }
    // j Seek to next Instruction
    if (key === 106) {
-      var addr = r2ui.next_instruction();
-      if (addr !== undefined && addr !== null) r2ui.seek(addr, true);
+      var get_more_instructions = false;
+      if ($(this.selected).hasClass("insaddr")) {
+        var next_instruction;
+        if (this.display == "flat") {
+          next_instruction = $(this.selected).closest(".instructionbox").next().find('.insaddr')[0];
+          if ($("#gbox .instructionbox").index( $(this.selected).closest(".instructionbox")[0]) > $("#gbox .instructionbox").length - 10) get_more_instructions = true;
+        }
+        if (this.display == "graph") {
+          var next_instruction = $(this.selected).closest(".instruction").next().find('.insaddr')[0];
+          if (next_instruction === undefined || next_instruction === null) {
+            next_instruction = $(this.selected).closest(".basicblock").next().find('.insaddr')[0];
+          }
+        }
+
+        // if (next_instruction === null || next_instruction === undefined) return;
+        var address = get_address_from_class(next_instruction);
+        if (get_more_instructions) {
+          r2ui.seek(address, false);
+        } else {
+          r2ui.history_push(address);
+          this.selected = next_instruction;
+          this.selected_offset = address;
+        }
+        rehighlight_iaddress(address);
+        scroll_to_address(address);
+      }
    }
    // k Seek to previous instruction
    if (key === 107) {
-      var addr = r2ui.prev_instruction();
-      if (addr !== undefined && addr !== null) r2ui.seek(addr, true);
+      var get_more_instructions = false;
+      if ($(this.selected).hasClass("insaddr")) {
+        var prev_instruction;
+        if (this.display == "flat") {
+          prev_instruction = $(this.selected).closest(".instructionbox").prev().find('.insaddr')[0];
+          if ($("#gbox .instructionbox").index( $(this.selected).closest(".instructionbox")[0]) < 10) get_more_instructions = true;
+        }
+        if (this.display == "graph") {
+          var prev_instruction = $(this.selected).closest(".instruction").prev().find('.insaddr')[0];
+          if (prev_instruction === undefined || prev_instruction === null) {
+            prev_instruction = $(this.selected).closest(".basicblock").prev().find('.insaddr').last()[0];
+          }
+        }
+        var address = get_address_from_class(prev_instruction);
+        if (get_more_instructions) {
+          r2ui.seek(address, false);
+        } else {
+          r2ui.history_push(address);
+          this.selected = prev_instruction;
+          this.selected_offset = address;
+        }
+        rehighlight_iaddress(address);
+        scroll_to_address(address);
+      }
    }
    // c Define function
    if (key === 99) {
@ -172,11 +218,12 @@ enyo.kind ({
      this.renaming = null;

      var renamed = false;
+      var offset = this.selected_offset;
      // If current offset is the beggining of a function, rename it with afr
      r2.cmdj("pdfj", function(x) {
        if (x !== null && x !== undefined) {
-          if (x.addr === this.selected_offset) {
-            r2.cmd("afn " + msg, function() {
+          if ("0x" + x.addr.toString(16) === offset) {
+            r2.cmd("afn " + new_value, function() {
              renamed = true;
             });
          }
--- a/shlr/www/enyo/js/jquery-1.9.0.js
+++ b/shlr/www/enyo/js/jquery-1.9.0.js
--- a/shlr/www/enyo/js/r2ui.js
+++ b/shlr/www/enyo/js/r2ui.js
@ -106,7 +106,7 @@ r2ui.seek = function (addr, push, scroll) {
    if (a !== null) {
      addr = address_canonicalize(a);
    } else {
-      r2.cmd("? $$~[1]", function(x) {
+      r2.cmd("s", function(x) {
        addr = address_canonicalize(x.replace('\n',''));
      });
    }
@ -114,22 +114,20 @@ r2ui.seek = function (addr, push, scroll) {

  if (push) r2ui.history_push(addr);

-  // What is this for?
-  if (r2ui.ra.getIndex ()==2) r2ui.ra.setIndex (1);
+  // if (r2ui.ra.getIndex ()==2) r2ui.ra.setIndex (1);

  r2.cmd ("s " + addr, function () {
    r2ui._dis.seek(addr, scroll);
    //r2ui._dis.scrollTo (0, 0);
-    r2ui._hex.seek(addr);
-    r2ui._hex.scrollTo(0, 0);
+    r2ui._hex.seek(addr, scroll);
+    // r2ui._hex.scrollTo(0, 0);
  });
 }

 r2ui.seek_in_graph = function (addr, push) {
  if (push) r2ui.history_push (addr);

-  // What is this for?
-  if (r2ui.ra.getIndex ()==2) r2ui.ra.setIndex (1);
+  // if (r2ui.ra.getIndex ()==2) r2ui.ra.setIndex (1);

  r2.cmd ("s "+addr, function () {
    rehighlight_iaddress(addr);
--- a/shlr/www/p/colors.html
+++ b/shlr/www/p/colors.html
@ -0,0 +1,156 @@
+<html>
+<head>
+<style>
+h3 {
+	color: white;
+    font-family: Verdana;
+	padding:0px;
+	margin:0px;
+	spacing:0px;
+}
+
+.color_label {
+	color: rgb(127,127,127);
+}
+</style>
+<script type="text/javascript" src="../enyo/js/r2.js"></script>
+<script type="text/javascript" src="../enyo/js/r2ui.js"></script>
+<script type="text/javascript" src="../enyo/js/disasm.js"></script>
+<script type="text/javascript" src="./lib/js/jquery-1.9.0.js"></script>
+<link rel="stylesheet" type="text/css" href="./lib/css/spectrum.css" />
+<link rel="stylesheet" type="text/css" href="../enyo/disasm.css" />
+<script type="text/javascript" src="./lib/js/spectrum.js"></script>
+
+</head>
+
+<body class='tmp_background'>
+<table style=width:100%>
+<tr>
+<td width="85%" valign=top>
+<div style='overflow:hidden'>
+<pre>
+<font class='tmp_prompt'>[0x000027ba]&gt; </font> <font style='color:#f0f0f0'>pd 42</font>
+<font class='tmp_fline'>/</font> <font class='tmp_fname'>(fcn) entry0 1495</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027ba</font>    <font class='tmp_cjmp'>41<font class='tmp_cjmp'>54</font>         </font><font class='tmp_push'>push<font class='tmp_reg'> r12</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027bb</font>    <font class='tmp_cjmp'>58</font>           </font><font class='tmp_pop'>pop<font class='tmp_reg'> rax</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027bc</font>    <font class='tmp_cjmp'>53</font>           </font><font class='tmp_push'>push<font class='tmp_reg'> rbx</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027bd</font>    <font class='tmp_cjmp'>48<font class='tmp_other'>81<font class='tmp_other'>ec<font class='tmp_cjmp'>48<font class='tmp_other'>06<font class='tmp_other'>0.</font> </font><font class='tmp_other'>sub<font class='tmp_reg'> rsp</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> <font class='tmp_push'>0x648</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027c4</font>    <font class='tmp_cjmp'>49<font class='tmp_other'>89<font class='tmp_other'>f5</font>       </font><font class='tmp_mov'>mov<font class='tmp_reg'> r13</font>,<font class='tmp_b0xff'><font class='tmp_reg'> rsi</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027c7</font>    <font class='tmp_other'>89<font class='tmp_other'>bd<font class='tmp_other'>b0<font class='tmp_other'>f9<font class='tmp_b0xff'>ff<font class='tmp_b0xff'>ff</font> </font><font class='tmp_mov'>mov<font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rbp</font>-<font class='tmp_b0xff'><font class='tmp_push'>0x650</font>]<font class='tmp_b0xff'></font>,<font class='tmp_b0xff'><font class='tmp_reg'> edi</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_comment'>   ;      jaja</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027cd</font>    <font class='tmp_cjmp'>48<font class='tmp_other'>8d<font class='tmp_other'>85<font class='tmp_other'>c0<font class='tmp_other'>f9<font class='tmp_other'>f.</font> </font><font class='tmp_push'>lea<font class='tmp_reg'> rax</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rbp</font>-<font class='tmp_b0xff'><font class='tmp_push'>0x640</font>]<font class='tmp_b0xff'></font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027d4</font>    <font class='tmp_cjmp'>48<font class='tmp_other'>89<font class='tmp_other'>85<font class='tmp_other'>b8<font class='tmp_other'>f9<font class='tmp_other'>f.</font> </font><font class='tmp_mov'>mov<font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rbp</font>-<font class='tmp_b0xff'><font class='tmp_push'>0x648</font>]<font class='tmp_b0xff'></font>,<font class='tmp_b0xff'><font class='tmp_reg'> rax</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027db</font>    <font class='tmp_other'>85<font class='tmp_b0xff'>ff</font>         </font><font class='tmp_cmp'>test<font class='tmp_reg'> edi</font>,<font class='tmp_b0xff'><font class='tmp_reg'> edi</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>      ,=&lt; </font><font class='tmp_offset'>0x000027dd</font>    <font class='tmp_b0x7f'>7f<font class='tmp_other'>05</font>         </font><font class='tmp_cjmp'>jg 0x27e4</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>      |   </font><font class='tmp_offset'>0x000027df</font>    <font class='tmp_other'>e8<font class='tmp_other'>b1<font class='tmp_cjmp'>30<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font>   </font><font class='tmp_call'>call 0x5895</font>
+<font class='tmp_fline'>|</font><font class='tmp_b0xff'>  </font><font class='tmp_flow'>      |   </font>   0x00005895(unk, unk) ; entry0</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>      `-&gt; </font><font class='tmp_offset'>0x000027e4</font>    <font class='tmp_cjmp'>48<font class='tmp_other'>8d<font class='tmp_cjmp'>35<font class='tmp_other'>1d<font class='tmp_cjmp'>37<font class='tmp_other'>0.</font> </font><font class='tmp_push'>lea<font class='tmp_reg'> rsi</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rip</font>+<font class='tmp_b0xff'><font class='tmp_push'>0x371d</font>]<font class='tmp_b0xff'></font></font> <font class='tmp_comment'>;  0x00005f08 </font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027eb</font>    <font class='tmp_cjmp'>31<font class='tmp_b0xff'>ff</font>         </font><font class='tmp_math'>xor<font class='tmp_reg'> edi</font>,<font class='tmp_b0xff'><font class='tmp_reg'> edi</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027ed</font>    <font class='tmp_other'>e8<font class='tmp_cjmp'>2e<font class='tmp_cjmp'>32<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font>   </font><font class='tmp_call'>call sym.imp.setlocale</font>
+<font class='tmp_fline'>|</font><font class='tmp_b0xff'>  </font><font class='tmp_flow'>          </font>   0x00005a20() ; sym.imp.setlocale</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027f2</font>    <font class='tmp_other'>bb<font class='tmp_other'>01<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font>   </font><font class='tmp_mov'>mov<font class='tmp_reg'> ebx</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> <font class='tmp_push'>0x1</font></font> <font class='tmp_comment'>;  0x00000001 </font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027f7</font>    <font class='tmp_other'>bf<font class='tmp_other'>01<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font>   </font><font class='tmp_mov'>mov<font class='tmp_reg'> edi</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> <font class='tmp_push'>0x1</font></font> <font class='tmp_comment'>;  0x00000001 </font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x000027fc</font>    <font class='tmp_other'>e8<font class='tmp_other'>cb<font class='tmp_cjmp'>31<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font>   </font><font class='tmp_call'>call sym.imp.isatty</font>
+<font class='tmp_fline'>|</font><font class='tmp_b0xff'>  </font><font class='tmp_flow'>          </font>   0x000059cc() ; sym.imp.isatty</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>          </font><font class='tmp_offset'>0x00002801</font>    <font class='tmp_other'>85<font class='tmp_other'>c0</font>         </font><font class='tmp_cmp'>test<font class='tmp_reg'> eax</font>,<font class='tmp_b0xff'><font class='tmp_reg'> eax</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>     ,==&lt; </font><font class='tmp_offset'>0x00002803</font>    <font class='tmp_cjmp'>74<font class='tmp_cjmp'>60</font>         </font><font class='tmp_cjmp'>je 0x2865</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>     |    </font><font class='tmp_offset'>0x00002805</font>    <font class='tmp_other'>c7<font class='tmp_other'>05<font class='tmp_cjmp'>59<font class='tmp_cjmp'>3e<font class='tmp_b0x00'>00<font class='tmp_other'>0.</font> </font><font class='tmp_mov'>mov dword<font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rip</font>+<font class='tmp_b0xff'><font class='tmp_push'>0x3e59</font>]<font class='tmp_b0xff'></font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> <font class='tmp_push'>0x50</font></font> <font class='tmp_comment'>; "P" ;  0x00000050 </font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>     |    </font><font class='tmp_offset'>0x0000280f</font>    <font class='tmp_cjmp'>48<font class='tmp_other'>8d<font class='tmp_cjmp'>3d<font class='tmp_other'>f3<font class='tmp_cjmp'>36<font class='tmp_other'>0.</font> </font><font class='tmp_push'>lea<font class='tmp_reg'> rdi</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rip</font>+<font class='tmp_b0xff'><font class='tmp_push'>0x36f3</font>]<font class='tmp_b0xff'></font></font> <font class='tmp_comment'>;  0x00005f09 </font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>     |    </font><font class='tmp_offset'>0x00002816</font>    <font class='tmp_other'>e8<font class='tmp_cjmp'>7b<font class='tmp_cjmp'>31<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font>   </font><font class='tmp_call'>call sym.imp.getenv</font>
+<font class='tmp_fline'>|</font><font class='tmp_b0xff'>  </font><font class='tmp_flow'>     |    </font>   0x00005996() ; sym.imp.getenv</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>     |    </font><font class='tmp_offset'>0x0000281b</font>    <font class='tmp_cjmp'>48<font class='tmp_other'>85<font class='tmp_other'>c0</font>       </font><font class='tmp_cmp'>test<font class='tmp_reg'> rax</font>,<font class='tmp_b0xff'><font class='tmp_reg'> rax</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>    ,===&lt; </font><font class='tmp_offset'>0x0000281e</font>    <font class='tmp_cjmp'>74<font class='tmp_other'>0f</font>         </font><font class='tmp_cjmp'>je 0x282f</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>    ||    </font><font class='tmp_offset'>0x00002820</font>    <font class='tmp_other'>80<font class='tmp_cjmp'>38<font class='tmp_b0x00'>00</font>       </font><font class='tmp_cmp'>cmp byte<font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rax</font>]<font class='tmp_b0xff'></font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> <font class='tmp_push'>0x0</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>   ,====&lt; </font><font class='tmp_offset'>0x00002823</font>    <font class='tmp_cjmp'>74<font class='tmp_other'>0a</font>         </font><font class='tmp_cjmp'>je 0x282f</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>   |||    </font><font class='tmp_offset'>0x00002825</font>    <font class='tmp_cjmp'>48<font class='tmp_other'>89<font class='tmp_other'>c7</font>       </font><font class='tmp_mov'>mov<font class='tmp_reg'> rdi</font>,<font class='tmp_b0xff'><font class='tmp_reg'> rax</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>   |||    </font><font class='tmp_offset'>0x00002828</font>    <font class='tmp_other'>e8<font class='tmp_other'>0f<font class='tmp_cjmp'>31<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font>   </font><font class='tmp_call'>call sym.imp.atoi</font>
+<font class='tmp_fline'>|</font><font class='tmp_b0xff'>  </font><font class='tmp_flow'>   |||    </font>   0x0000593c() ; sym.imp.atoi</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>  ,=====&lt; </font><font class='tmp_offset'>0x0000282d</font>    <font class='tmp_other'>eb<font class='tmp_cjmp'>22</font>         </font><font class='tmp_jmp'>jmp 0x2851</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>  |``---&gt; </font><font class='tmp_offset'>0x0000282f</font>    <font class='tmp_cjmp'>48<font class='tmp_other'>8d<font class='tmp_cjmp'>55<font class='tmp_other'>d0</font>     </font><font class='tmp_push'>lea<font class='tmp_reg'> rdx</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rbp</font>-<font class='tmp_b0xff'><font class='tmp_push'>0x30</font>]<font class='tmp_b0xff'></font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>  |  |    </font><font class='tmp_offset'>0x00002833</font>    <font class='tmp_other'>bf<font class='tmp_other'>01<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font>   </font><font class='tmp_mov'>mov<font class='tmp_reg'> edi</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> <font class='tmp_push'>0x1</font></font> <font class='tmp_comment'>;  0x00000001 </font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>  |  |    </font><font class='tmp_offset'>0x00002838</font>    <font class='tmp_other'>be<font class='tmp_cjmp'>68<font class='tmp_cjmp'>74<font class='tmp_other'>08<font class='tmp_cjmp'>40</font>   </font><font class='tmp_mov'>mov<font class='tmp_reg'> esi</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> <font class='tmp_push'>0x40087468</font></font> <font class='tmp_comment'>;  0x40087468 </font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>  |  |    </font><font class='tmp_offset'>0x0000283d</font>    <font class='tmp_cjmp'>30<font class='tmp_other'>c0</font>         </font><font class='tmp_math'>xor<font class='tmp_reg'> al</font>,<font class='tmp_b0xff'><font class='tmp_reg'> al</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>  |  |    </font><font class='tmp_offset'>0x0000283f</font>    <font class='tmp_other'>e8<font class='tmp_other'>82<font class='tmp_cjmp'>31<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font>   </font><font class='tmp_call'>call sym.imp.ioctl</font>
+<font class='tmp_fline'>|</font><font class='tmp_b0xff'>  </font><font class='tmp_flow'>  |  |    </font>   0x000059c6() ; sym.imp.ioctl</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>  |  |    </font><font class='tmp_offset'>0x00002844</font>    <font class='tmp_other'>83<font class='tmp_other'>f8<font class='tmp_b0xff'>ff</font>       </font><font class='tmp_cmp'>cmp<font class='tmp_reg'> eax</font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> <font class='tmp_push'>0xffffffff</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'> ,======&lt; </font><font class='tmp_offset'>0x00002847</font>    <font class='tmp_cjmp'>74<font class='tmp_other'>0e</font>         </font><font class='tmp_cjmp'>je 0x2857</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'> ||  |    </font><font class='tmp_offset'>0x00002849</font>    <font class='tmp_other'>0f<font class='tmp_other'>b7<font class='tmp_cjmp'>45<font class='tmp_other'>d2</font>     </font><font class='tmp_other'>movzx<font class='tmp_reg'> eax</font>,<font class='tmp_b0xff'> word<font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rbp</font>-<font class='tmp_b0xff'><font class='tmp_push'>0x2e</font>]<font class='tmp_b0xff'></font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'> ||  |    </font><font class='tmp_offset'>0x0000284d</font>    <font class='tmp_other'>85<font class='tmp_other'>c0</font>         </font><font class='tmp_cmp'>test<font class='tmp_reg'> eax</font>,<font class='tmp_b0xff'><font class='tmp_reg'> eax</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>,=======&lt; </font><font class='tmp_offset'>0x0000284f</font>    <font class='tmp_cjmp'>74<font class='tmp_other'>06</font>         </font><font class='tmp_cjmp'>je 0x2857</font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>||`-----&gt; </font><font class='tmp_offset'>0x00002851</font>    <font class='tmp_other'>89<font class='tmp_other'>05<font class='tmp_other'>11<font class='tmp_cjmp'>3e<font class='tmp_b0x00'>00<font class='tmp_b0x00'>00</font> </font><font class='tmp_mov'>mov<font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rip</font>+<font class='tmp_b0xff'><font class='tmp_push'>0x3e11</font>]<font class='tmp_b0xff'></font>,<font class='tmp_b0xff'><font class='tmp_reg'> eax</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>``------&gt; </font><font class='tmp_offset'>0x00002857</font>    <font class='tmp_other'>c7<font class='tmp_other'>05<font class='tmp_cjmp'>7b<font class='tmp_cjmp'>41<font class='tmp_b0x00'>00<font class='tmp_other'>0.</font> </font><font class='tmp_mov'>mov dword<font class='tmp_b0xff'> </font>[<font class='tmp_b0xff'>rip</font>+<font class='tmp_b0xff'><font class='tmp_push'>0x417b</font>]<font class='tmp_b0xff'></font>,<font class='tmp_b0xff'><font class='tmp_b0xff'> <font class='tmp_push'>0x1</font></font> <font class='tmp_comment'>;  0x00000001 </font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>     |    </font><font class='tmp_offset'>0x00002861</font>    <font class='tmp_cjmp'>31<font class='tmp_other'>db</font>         </font><font class='tmp_math'>xor<font class='tmp_reg'> ebx</font>,<font class='tmp_b0xff'><font class='tmp_reg'> ebx</font></font>
+<font class='tmp_fline'>|</font>  <font class='tmp_flow'>     |    </font><font class='tmp_offset'>0x00002863</font>    <font class='tmp_other'>eb<font class='tmp_other'>1f</font>         </font><font class='tmp_jmp'>jmp 0x2884</font>
+</pre>
+</div>
+</td>
+<td valign=top style='width="15%" height:100%'>
+<table id="pickers">
+<table>
+</td>
+</tr>
+</table>
+<script>
+
+var pr2ui = parent.r2ui;
+if (pr2ui !== undefined && pr2ui !== null) r2ui = pr2ui;
+
+r2ui.load_colors();
+
+var props = Object.keys(r2ui.colors);
+for (var j in props) {
+	var prop = props[j].replace('.ec_','');
+	$('.tmp_' + prop).css('color', r2ui.colors[props[j]]);
+}
+
+var defaults = {
+    showPaletteOnly: true,
+    hideAfterPaletteSelect:true,
+    preferredFormat: "hex3",
+    change: function(color) {
+    	var prop = this.id.replace('_picker','');
+    	if (prop == "background") $('.tmp_' + prop).css('background-color', color);
+    	if (prop == "alt_background") $('.tmp_' + prop).css('background-color', color);
+    	if (prop == "border") $('.tmp_' + prop).css('border-color', color);
+        else $('.tmp_' + prop).css('color', color);
+        r2.cmd("ec " + prop + " rgb:" + String(color).replace('#',''));
+        r2ui.load_colors();
+    },
+    palette: [["#000","#030","#060","#090","#0c0","#0f0"],["#003","#033","#063","#093","#0c3","#0f3"],["#006","#036","#066","#096","#0c6","#0f6"],["#009","#039","#069","#099","#0c9","#0f9"],
+    		  ["#00c","#03c","#06c","#09c","#0cc","#0fc"],["#00f","#03f","#06f","#09f","#0cf","#0ff"],["#300","#330","#360","#390","#3c0","#3f0"],["#303","#333","#363","#393","#3c3","#3f3"],
+    		  ["#306","#336","#366","#396","#3c6","#3f6"],["#309","#339","#369","#399","#3c9","#3f9"],["#30c","#33c","#36c","#39c","#3cc","#3fc"],["#30f","#33f","#36f","#39f","#3cf","#3ff"],
+    		  ["#600","#630","#660","#690","#6c0","#6f0"],["#603","#633","#663","#693","#6c3","#6f3"],["#606","#636","#666","#696","#6c6","#6f6"],["#609","#639","#669","#699","#6c9","#6f9"],
+    		  ["#60c","#63c","#66c","#69c","#6cc","#6fc"],["#60f","#63f","#66f","#69f","#6cf","#6ff"],["#900","#930","#960","#990","#9c0","#9f0"],["#903","#933","#963","#993","#9c3","#9f3"],
+    		  ["#906","#936","#966","#996","#9c6","#9f6"],["#909","#939","#969","#999","#9c9","#9f9"],["#90c","#93c","#96c","#99c","#9cc","#9fc"],["#90f","#93f","#96f","#99f","#9cf","#9ff"],
+    		  ["#c00","#c30","#c60","#c90","#cc0","#cf0"],["#c03","#c33","#c63","#c93","#cc3","#cf3"],["#c06","#c36","#c66","#c96","#cc6","#cf6"],["#c09","#c39","#c69","#c99","#cc9","#cf9"],
+    		  ["#c0c","#c3c","#c6c","#c9c","#ccc","#cfc"],["#c0f","#c3f","#c6f","#c9f","#ccf","#cff"],["#f00","#f30","#f60","#f90","#fc0","#ff0"],["#f03","#f33","#f63","#f93","#fc3","#ff3"],
+    		  ["#f06","#f36","#f66","#f96","#fc6","#ff6"],["#f09","#f39","#f69","#f99","#fc9","#ff9"],["#f0c","#f3c","#f6c","#f9c","#fcc","#ffc"],["#f0f","#f3f","#f6f","#f9f","#fcf","#fff"]]
+};
+
+var props = ['comment', 'fname', 'fline', 'help', 'args', 'flag', 'label', 'flow', 'prompt' , 'offset', 'input' , 'other', 'b0x00' , 'b0x7f' , 'b0xff', 'math', 'bin', 'btext', 'push', 'pop', 'jmp', 'cjmp', 'call', 'nop', 'ret', 'trap', 'swi', 'cmp', 'reg', 'creg', 'num', 'mov', 'background', 'alt_background', 'cflow', 'dataoffset', 'border'];
+
+var rows = "";
+for (var i in props) rows += '<tr><td><div class="color_label">' + props[i] + ': </div></td><td><input class="picker" type="text" id="' + props[i] + '_picker"></input></td></tr>';
+$('#pickers').html(rows);
+
+for (var i in props) init_picker(props[i]);
+
+
+function init_picker(prop) {
+	color = r2ui.colors['.ec_' + prop]
+	selector = '#' + prop + '_picker';
+	defaults['color'] = rgb2hex(color);
+	$(selector).spectrum(defaults);
+}
+
+function rgb2hex(rgb){
+ rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
+ return (rgb && rgb.length === 4) ? "#" +
+  ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
+  ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
+  ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
+}
+
+</script>
+</body>
+</html>
--- a/shlr/www/p/index.html
+++ b/shlr/www/p/index.html
@ -0,0 +1,103 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
+"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta name="language" content="en" />
+
+	<title>Radare2</title>
+
+	<link rel="stylesheet" type="text/css" href="./lib/css/layout-default-latest.css" />
+	<link rel="stylesheet" type="text/css" href="./lib/css/jquery.ui.tabs.css" />
+	<link rel="stylesheet" type="text/css" href="./lib/css/jquery-ui.css" />
+
+	<link rel="stylesheet" type="text/css" href="../enyo/disasm.css" />
+	<link rel="stylesheet" type="text/css" href="./lib/css/tree.jquery.css" />
+	<link rel="stylesheet" type="text/css" href="./lib/css/main.css" />
+
+
+	<script type="text/javascript" src="../enyo/js/viz.js"></script>
+	<script type="text/javascript" src="../enyo/js/r2.js"></script>
+	<script type="text/javascript" src="../enyo/js/r2ui.js"></script>
+	<script type="text/javascript" src="../enyo/js/disasm.js"></script>
+	<script type="text/javascript" src="./lib/js/jquery-1.9.0.js"></script>
+	<script type="text/javascript" src="./lib/js/jquery-ui-latest.js"></script>
+	<script type="text/javascript" src="./lib/js/jquery.ui-contextmenu.js"></script>
+	<script type="text/javascript" src="./lib/js/jquery.layout-latest.js"></script>
+
+	<script type="text/javascript" src="./lib/js/tree.jquery.js"></script>
+	<script type="text/javascript" src="./lib/js/jquery.layout.resizePaneAccordions-latest.js"></script>
+	<script type="text/javascript" src="./lib/js/jquery.scrollTo-latest.js"></script>
+
+	<script type="text/javascript" src="./lib/js/disasm_panel.js"></script>
+	<script type="text/javascript" src="./lib/js/hex_panel.js"></script>
+	<script type="text/javascript" src="./lib/js/main.js"></script>
+
+</head>
+<body>
+
+<!-- NORTH -->
+<div id="radareApp_mp_toolbar" class="ui-layout-north ui-widget-content" style="display: none;background-color:rgb(20,20,20);color: white;text-align: center">
+	radare 2
+</div>
+
+<!-- SOUTH -->
+<div class="ui-layout-south ui-widget-content ui-state-error" style="display: none;background-color:rgb(20,20,20);">
+	<pre id="cmd_output" class="ui-layout-content">
+
+	</pre>
+	<div>
+		<input id="command" type="text" value=""/>
+	</div>
+</div>
+
+<!-- CENTER -->
+<div id="main_panel" class="ui-layout-center ec_background">
+	<!-- center Tabs layout -->
+	<ul style="-moz-border-radius-bottomleft: 0; -moz-border-radius-bottomright: 0;">
+		<li><a id="disasm_tab_link" href="#disasm_tab"><span>Disassembler</span></a></li>
+		<li><a href="#hex_tab"><span>Hex Dump</span></a></li>
+		<li><a href="#strings_tab"><span>Strings</span></a></li>
+		<li><a href="#settings_tab"><span>Settings</span></a></li>
+	</ul>
+	<div id="center_panel" class="ui-layout-content ui-widget-content ui-corner-bottom" style="border-top: 0; padding-bottom: 1em;">
+		<div id="disasm_tab"></div>
+		<div id="hex_tab"></div>
+		<div id="strings_tab"><div id="strings" style="color:rgb(127,127,127);"></div></div>
+		<div id="settings_tab"><h3>Colors:</h3><iframe id="colors_frame" name="colors_frame" src="colors.html" width="100%" height="400px"></iframe></div>
+	</div>
+	<div>
+		<h3 class="header-footer ui-state-default ui-corner-all" style="padding: 3px 5px 5px; margin-top: 1ex;" id="history">_</h3>
+	</div>
+</div>
+
+<!-- WEST -->
+<div class="ui-layout-west" style="color:rgb(127,127,127);background-color:rgb(20,20,20);display: none;">
+	<div id="accordion1" class="basic">
+		<h3>Functions</h3>
+		<div id="functions"></div>
+		<h3>Symbols</h3>
+		<div id="symbols"></div>
+		<h3>Relocs</h3>
+		<div id="relocs"></div>
+		<h3>Imports</h3>
+		<div id="imports"></div>
+		<h3>Flags</h3>
+		<div id="flags"></div>
+	</div>
+</div>
+
+<!-- EAST -->
+<div class="ui-layout-east" style="color:rgb(127,127,127);background-color:rgb(20,20,20);display: none;">
+	<div class="ui-layout-content">
+		<div id="accordion2" class="basic">
+			<h3>Information</h3>
+			<div id="information"></div>
+			<h3>Sections</h3>
+			<div id="sections"></div>
+		</div>
+	</div>
+</div>
+
+</body>
+</html>
--- a/shlr/www/p/lib/css/jquery-colpick.css
+++ b/shlr/www/p/lib/css/jquery-colpick.css
@ -0,0 +1,420 @@
+/*
+colpick Color Picker / colpick.com
+*/
+
+/*Main container*/
+.colpick {
+	position: absolute;
+	width: 346px;
+	height: 170px;
+	overflow: hidden;
+	display: none;
+	font-family: Arial, Helvetica, sans-serif;
+	background:#ebebeb;
+	border: 1px solid #bbb;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
+
+	/*Prevents selecting text when dragging the selectors*/
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	-o-user-select: none;
+	user-select: none;
+}
+/*Color selection box with gradients*/
+.colpick_color {
+	position: absolute;
+	left: 7px;
+	top: 7px;
+	width: 156px;
+	height: 156px;
+	overflow: hidden;
+	outline: 1px solid #aaa;
+	cursor: crosshair;
+}
+.colpick_color_overlay1 {
+	position: absolute;
+	left:0;
+	top:0;
+	width: 156px;
+	height: 156px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff')"; /* IE8 */
+	background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
+	background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
+	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffffff', endColorstr='#00ffffff'); /* IE6 & IE7 */
+}
+.colpick_color_overlay2 {
+	position: absolute;
+	left:0;
+	top:0;
+	width: 156px;
+	height: 156px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#00000000', endColorstr='#000000')"; /* IE8 */
+	background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
+	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
+}
+/*Circular color selector*/
+.colpick_selector_outer {
+	background:none;
+	position: absolute;
+	width: 11px;
+	height: 11px;
+	margin: -6px 0 0 -6px;
+	border: 1px solid black;
+	border-radius: 50%;
+}
+.colpick_selector_inner{
+	position: absolute;
+	width: 9px;
+	height: 9px;
+	border: 1px solid white;
+	border-radius: 50%;
+}
+/*Vertical hue bar*/
+.colpick_hue {
+	position: absolute;
+	top: 6px;
+	left: 175px;
+	width: 19px;
+	height: 156px;
+	border: 1px solid #aaa;
+	cursor: n-resize;
+}
+/*Hue bar sliding indicator*/
+.colpick_hue_arrs {
+	position: absolute;
+	left: -8px;
+	width: 35px;
+	height: 7px;
+	margin: -7px 0 0 0;
+}
+.colpick_hue_larr {
+	position:absolute;
+	width: 0;
+	height: 0;
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	border-left: 7px solid #858585;
+}
+.colpick_hue_rarr {
+	position:absolute;
+	right:0;
+	width: 0;
+	height: 0;
+	border-top: 6px solid transparent;
+	border-bottom: 6px solid transparent;
+	border-right: 7px solid #858585;
+}
+/*New color box*/
+.colpick_new_color {
+	position: absolute;
+	left: 207px;
+	top: 6px;
+	width: 60px;
+	height: 27px;
+	background: #f00;
+	border: 1px solid #8f8f8f;
+}
+/*Current color box*/
+.colpick_current_color {
+	position: absolute;
+	left: 277px;
+	top: 6px;
+	width: 60px;
+	height: 27px;
+	background: #f00;
+	border: 1px solid #8f8f8f;
+}
+/*Input field containers*/
+.colpick_field, .colpick_hex_field  {
+	position: absolute;
+	height: 20px;
+	width: 60px;
+	overflow:hidden;
+	background:#f3f3f3;
+	color:#b8b8b8;
+	font-size:12px;
+	border:1px solid #bdbdbd;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+}
+.colpick_rgb_r {
+	top: 40px;
+	left: 207px;
+}
+.colpick_rgb_g {
+	top: 67px;
+	left: 207px;
+}
+.colpick_rgb_b {
+	top: 94px;
+	left: 207px;
+}
+.colpick_hsb_h {
+	top: 40px;
+	left: 277px;
+}
+.colpick_hsb_s {
+	top: 67px;
+	left: 277px;
+}
+.colpick_hsb_b {
+	top: 94px;
+	left: 277px;
+}
+.colpick_hex_field {
+	width: 68px;
+	left: 207px;
+	top: 121px;
+}
+/*Text field container on focus*/
+.colpick_focus {
+	border-color: #999;
+}
+/*Field label container*/
+.colpick_field_letter {
+	position: absolute;
+	width: 12px;
+	height: 20px;
+	line-height: 20px;
+	padding-left: 4px;
+	background: #efefef;
+	border-right: 1px solid #bdbdbd;
+	font-weight: bold;
+	color:#777;
+}
+/*Text inputs*/
+.colpick_field input, .colpick_hex_field input {
+	position: absolute;
+	right: 11px;
+	margin: 0;
+	padding: 0;
+	height: 20px;
+	line-height: 20px;
+	background: transparent;
+	border: none;
+	font-size: 12px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: #555;
+	text-align: right;
+	outline: none;
+}
+.colpick_hex_field input {
+	right: 4px;
+}
+/*Field up/down arrows*/
+.colpick_field_arrs {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 9px;
+	height: 21px;
+	cursor: n-resize;
+}
+.colpick_field_uarr {
+	position: absolute;
+	top: 5px;
+	width: 0;
+	height: 0;
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-bottom: 4px solid #959595;
+}
+.colpick_field_darr {
+	position: absolute;
+	bottom:5px;
+	width: 0;
+	height: 0;
+	border-left: 4px solid transparent;
+	border-right: 4px solid transparent;
+	border-top: 4px solid #959595;
+}
+/*Submit/Select button*/
+.colpick_submit {
+	position: absolute;
+	left: 207px;
+	top: 149px;
+	width: 130px;
+	height: 22px;
+	line-height:22px;
+	background: #efefef;
+	text-align: center;
+	color: #555;
+	font-size: 12px;
+	font-weight:bold;
+	border: 1px solid #bdbdbd;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+	border-radius: 3px;
+}
+.colpick_submit:hover {
+	background:#f3f3f3;
+	border-color:#999;
+	cursor: pointer;
+}
+
+/*full layout with no submit button*/
+.colpick_full_ns  .colpick_submit, .colpick_full_ns .colpick_current_color{
+	display:none;
+}
+.colpick_full_ns .colpick_new_color {
+	width: 130px;
+	height: 25px;
+}
+.colpick_full_ns .colpick_rgb_r, .colpick_full_ns .colpick_hsb_h {
+	top: 42px;
+}
+.colpick_full_ns .colpick_rgb_g, .colpick_full_ns .colpick_hsb_s {
+	top: 73px;
+}
+.colpick_full_ns .colpick_rgb_b, .colpick_full_ns .colpick_hsb_b {
+	top: 104px;
+}
+.colpick_full_ns .colpick_hex_field {
+	top: 135px;
+}
+
+/*rgbhex layout*/
+.colpick_rgbhex .colpick_hsb_h, .colpick_rgbhex .colpick_hsb_s, .colpick_rgbhex .colpick_hsb_b {
+	display:none;
+}
+.colpick_rgbhex {
+	width:282px;
+}
+.colpick_rgbhex .colpick_field, .colpick_rgbhex .colpick_submit {
+	width:68px;
+}
+.colpick_rgbhex .colpick_new_color {
+	width:34px;
+	border-right:none;
+}
+.colpick_rgbhex .colpick_current_color {
+	width:34px;
+	left:240px;
+	border-left:none;
+}
+
+/*rgbhex layout, no submit button*/
+.colpick_rgbhex_ns  .colpick_submit, .colpick_rgbhex_ns .colpick_current_color{
+	display:none;
+}
+.colpick_rgbhex_ns .colpick_new_color{
+	width:68px;
+	border: 1px solid #8f8f8f;
+}
+.colpick_rgbhex_ns .colpick_rgb_r {
+	top: 42px;
+}
+.colpick_rgbhex_ns .colpick_rgb_g {
+	top: 73px;
+}
+.colpick_rgbhex_ns .colpick_rgb_b {
+	top: 104px;
+}
+.colpick_rgbhex_ns .colpick_hex_field {
+	top: 135px;
+}
+
+/*hex layout*/
+.colpick_hex .colpick_hsb_h, .colpick_hex .colpick_hsb_s, .colpick_hex .colpick_hsb_b, .colpick_hex .colpick_rgb_r, .colpick_hex .colpick_rgb_g, .colpick_hex .colpick_rgb_b {
+	display:none;
+}
+.colpick_hex {
+	width:206px;
+	height:201px;
+}
+.colpick_hex .colpick_hex_field {
+	width:72px;
+	height:25px;
+	top:168px;
+	left:80px;
+}
+.colpick_hex .colpick_hex_field div, .colpick_hex .colpick_hex_field input {
+	height: 25px;
+	line-height: 25px;
+}
+.colpick_hex .colpick_new_color {
+	left:9px;
+	top:168px;
+	width:30px;
+	border-right:none;
+}
+.colpick_hex .colpick_current_color {
+	left:39px;
+	top:168px;
+	width:30px;
+	border-left:none;
+}
+.colpick_hex .colpick_submit {
+	left:164px;
+	top: 168px;
+	width:30px;
+	height:25px;
+	line-height: 25px;
+}
+
+/*hex layout, no submit button*/
+.colpick_hex_ns  .colpick_submit, .colpick_hex_ns .colpick_current_color {
+	display:none;
+}
+.colpick_hex_ns .colpick_hex_field {
+	width:80px;
+}
+.colpick_hex_ns .colpick_new_color{
+	width:60px;
+	border: 1px solid #8f8f8f;
+}
+
+/*Dark color scheme*/
+.colpick_dark {
+	background: #161616;
+	border-color: #2a2a2a;
+}
+.colpick_dark .colpick_color {
+	outline-color: #333;
+}
+.colpick_dark .colpick_hue {
+	border-color: #555;
+}
+.colpick_dark .colpick_field, .colpick_dark .colpick_hex_field {
+	background: #101010;
+	border-color: #2d2d2d;
+}
+.colpick_dark .colpick_field_letter {
+	background: #131313;
+	border-color: #2d2d2d;
+	color: #696969;
+}
+.colpick_dark .colpick_field input, .colpick_dark .colpick_hex_field input {
+	color: #7a7a7a;
+}
+.colpick_dark .colpick_field_uarr {
+	border-bottom-color:#696969;
+}
+.colpick_dark .colpick_field_darr {
+	border-top-color:#696969;
+}
+.colpick_dark .colpick_focus {
+	border-color:#444;
+}
+.colpick_dark .colpick_submit {
+	background: #131313;
+	border-color:#2d2d2d;
+	color:#7a7a7a;
+}
+.colpick_dark .colpick_submit:hover {
+	background-color:#101010;
+	border-color:#444;
+}
--- a/shlr/www/p/lib/css/jquery-ui.css
+++ b/shlr/www/p/lib/css/jquery-ui.css
@ -0,0 +1,66 @@
+
+.ui-menu {
+	list-style: none;
+	padding: 0;
+	/*margin: 50px 50px;*/
+	display: block;
+	outline: none;
+	background: #c0c0c0;
+	width: 200px;
+	border: 1px solid #AAA;
+	color: #222;
+	z-index: 100;
+}
+
+
+.ui-menu .ui-menu {
+	position: absolute;
+
+}
+.ui-menu .ui-menu-item {
+	font-family: monospace;
+	position: relative;
+	margin: 0;
+	padding: 3px 1em 3px .4em;
+	cursor: pointer;
+	min-height: 0; /* support: IE7 */
+}
+.ui-menu .ui-menu-item:hover {
+	font-family: monospace;
+	position: relative;
+	margin: 0;
+	background: yellow;
+	padding: 3px 1em 3px .4em;
+	cursor: pointer;
+	min-height: 0; /* support: IE7 */
+}
+
+.ui-menu .ui-menu-item a {
+	color: #555555;
+	text-decoration: none;
+	outline: none;
+}
+
+.ui-menu .ui-menu-item a:visited {
+	color: #555555;
+	text-decoration: none;
+	outline: none;
+}
+
+.ui-menu .ui-menu-divider {
+	margin: 5px 0;
+	height: 0;
+	font-size: 0;
+	line-height: 0;
+	border-width: 1px 0 0 0;
+}
+.ui-menu .ui-state-focus,
+.ui-menu .ui-state-active {
+	margin: -1px;
+}
+
+.ui-menu kbd {
+    padding-left: 1em;
+    float: right;
+}
+
--- a/shlr/www/p/lib/css/jquery.ui.tabs.css
+++ b/shlr/www/p/lib/css/jquery.ui.tabs.css
@ -0,0 +1,52 @@
+/*!
+ * jQuery UI Tabs 1.10.0
+ * http://jqueryui.com
+ *
+ * Copyright 2013 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Tabs#theming
+ */
+.ui-tabs {
+	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+	padding: .2em;
+}
+.ui-tabs .ui-tabs-nav {
+	margin: 0;
+	padding: .2em .2em 0;
+}
+.ui-tabs .ui-tabs-nav li {
+	list-style: none;
+	float: left;
+	position: relative;
+	top: 0;
+	margin: 1px .2em 0 0;
+	border-bottom: 0;
+	padding: 0;
+	white-space: nowrap;
+}
+.ui-tabs .ui-tabs-nav li a {
+	float: left;
+	padding: .5em 1em;
+	text-decoration: none;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active {
+	margin-bottom: -1px;
+	padding-bottom: 1px;
+}
+.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
+.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
+.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
+	cursor: text;
+}
+.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
+	cursor: pointer;
+}
+.ui-tabs .ui-tabs-panel {
+	display: block;
+	border-width: 0;
+	padding: 1em 1.4em;
+	background: none;
+}
--- a/shlr/www/p/lib/css/layout-default-latest.css
+++ b/shlr/www/p/lib/css/layout-default-latest.css
@ -0,0 +1,225 @@
+/*
+ * Default Layout Theme
+ *
+ * Created for jquery.layout
+ *
+ * Copyright (c) 2010
+ *   Fabrizio Balliano (http://www.fabrizioballiano.net)
+ *   Kevin Dalman (http://allpro.net)
+ *
+ * Dual licensed under the GPL (http://www.gnu.org/licenses/gpl.html)
+ * and MIT (http://www.opensource.org/licenses/mit-license.php) licenses.
+ *
+ * Last Updated: 2010-02-10
+ * NOTE: For best code readability, view this with a fixed-space font and tabs equal to 4-chars
+ */
+
+/*
+ *	DEFAULT FONT
+ *	Just to make demo-pages look better - not actually relevant to Layout!
+ */
+body {
+	font-family: Geneva, Arial, Helvetica, sans-serif;
+	font-size:   100%;
+	*font-size:  80%;
+}
+
+/*
+ *	PANES & CONTENT-DIVs
+ */
+.ui-layout-pane { /* all 'panes' */
+	background:	#FFF;
+	border:		1px solid #BBB;
+	padding:	10px;
+	overflow:	auto;
+	/* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
+	   otherwise you may get double-scrollbars - on the pane AND on the content-div
+	   - use ui-layout-wrapper class if pane has a content-div
+	   - use ui-layout-container if pane has an inner-layout
+	*/
+	}
+	/* (scrolling) content-div inside pane allows for fixed header(s) and/or footer(s) */
+	.ui-layout-content {
+		padding:	10px;
+		position:	relative; /* contain floated or positioned elements */
+		overflow:	auto; /* add scrolling to content-div */
+	}
+
+/*
+ *	UTILITY CLASSES
+ *	Must come AFTER pane-class above so will override
+ *	These classes are NOT auto-generated and are NOT used by Layout
+ */
+.layout-child-container,
+.layout-content-container {
+	padding:	0;
+	overflow:	hidden;
+}
+.layout-child-container {
+	border:		0; /* remove border because inner-layout-panes probably have borders */
+}
+.layout-scroll {
+	overflow:	auto;
+}
+.layout-hide {
+	display:	none;
+}
+
+/*
+ *	RESIZER-BARS
+ */
+.ui-layout-resizer	{ /* all 'resizer-bars' */
+	background:		#DDD;
+	border:			1px solid #BBB;
+	border-width:	0;
+	}
+	.ui-layout-resizer-drag {		/* REAL resizer while resize in progress */
+	}
+	.ui-layout-resizer-hover	{	/* affects both open and closed states */
+	}
+	/* NOTE: It looks best when 'hover' and 'dragging' are set to the same color,
+		otherwise color shifts while dragging when bar can't keep up with mouse */
+	.ui-layout-resizer-open-hover ,	/* hover-color to 'resize' */
+	.ui-layout-resizer-dragging {	/* resizer beging 'dragging' */
+		background: #C4E1A4;
+	}
+	.ui-layout-resizer-dragging {	/* CLONED resizer being dragged */
+		border: 	 1px solid #BBB;
+	}
+	.ui-layout-resizer-north-dragging,
+	.ui-layout-resizer-south-dragging {
+		border-width:	1px 0;
+	}
+	.ui-layout-resizer-west-dragging,
+	.ui-layout-resizer-east-dragging {
+		border-width:	0 1px;
+	}
+	/* NOTE: Add a 'dragging-limit' color to provide visual feedback when resizer hits min/max size limits */
+	.ui-layout-resizer-dragging-limit {	/* CLONED resizer at min or max size-limit */
+		background: #E1A4A4; /* red */
+	}
+
+	.ui-layout-resizer-closed-hover	{ /* hover-color to 'slide open' */
+		background: #EBD5AA;
+	}
+	.ui-layout-resizer-sliding {	/* resizer when pane is 'slid open' */
+		opacity: .10; /* show only a slight shadow */
+		filter:  alpha(opacity=10);
+		}
+		.ui-layout-resizer-sliding-hover {	/* sliding resizer - hover */
+			opacity: 1.00; /* on-hover, show the resizer-bar normally */
+			filter:  alpha(opacity=100);
+		}
+		/* sliding resizer - add 'outside-border' to resizer on-hover
+		 * this sample illustrates how to target specific panes and states */
+		.ui-layout-resizer-north-sliding-hover	{ border-bottom-width:	1px; }
+		.ui-layout-resizer-south-sliding-hover	{ border-top-width:		1px; }
+		.ui-layout-resizer-west-sliding-hover	{ border-right-width:	1px; }
+		.ui-layout-resizer-east-sliding-hover	{ border-left-width:	1px; }
+
+/*
+ *	TOGGLER-BUTTONS
+ */
+.ui-layout-toggler {
+	border: 1px solid #BBB; /* match pane-border */
+	background-color: #BBB;
+	}
+	.ui-layout-resizer-hover .ui-layout-toggler {
+		opacity: .60;
+		filter:  alpha(opacity=60);
+	}
+	.ui-layout-toggler-hover , /* need when NOT resizable */
+	.ui-layout-resizer-hover .ui-layout-toggler-hover { /* need specificity when IS resizable */
+		background-color: #FC6;
+		opacity: 1.00;
+		filter:  alpha(opacity=100);
+	}
+	.ui-layout-toggler-north ,
+	.ui-layout-toggler-south {
+		border-width: 0 1px; /* left/right borders */
+	}
+	.ui-layout-toggler-west ,
+	.ui-layout-toggler-east {
+		border-width: 1px 0; /* top/bottom borders */
+	}
+	/* hide the toggler-button when the pane is 'slid open' */
+	.ui-layout-resizer-sliding  .ui-layout-toggler {
+		display: none;
+	}
+	/*
+	 *	style the text we put INSIDE the togglers
+	 */
+	.ui-layout-toggler .content {
+		color:			#666;
+		font-size:		12px;
+		font-weight:	bold;
+		width:			100%;
+		padding-bottom:	0.35ex; /* to 'vertically center' text inside text-span */
+	}
+
+/*
+ *	PANE-MASKS
+ *	these styles are hard-coded on mask elems, but are also
+ *	included here as !important to ensure will overrides any generic styles
+ */
+.ui-layout-mask {
+	border:		none !important;
+	padding:	0 !important;
+	margin:		0 !important;
+	overflow:	hidden !important;
+	position:	absolute !important;
+	opacity:	0 !important;
+	filter:		Alpha(Opacity="0") !important;
+}
+.ui-layout-mask-inside-pane { /* masks always inside pane EXCEPT when pane is an iframe */
+	top:		0 !important;
+	left:		0 !important;
+	width:		100% !important;
+	height:		100% !important;
+}
+div.ui-layout-mask {}		/* standard mask for iframes */
+iframe.ui-layout-mask {}	/* extra mask for objects/applets */
+
+/*
+ *	Default printing styles
+ */
+@media print {
+	/*
+	 *	Unless you want to print the layout as it appears onscreen,
+	 *	these html/body styles are needed to allow the content to 'flow'
+	 */
+	html {
+		height:		auto !important;
+		overflow:	visible !important;
+	}
+	body.ui-layout-container {
+		position:	static !important;
+		top:		auto !important;
+		bottom:		auto !important;
+		left:		auto !important;
+		right:		auto !important;
+		/* only IE6 has container width & height set by Layout */
+		_width:		auto !important;
+		_height:	auto !important;
+	}
+	.ui-layout-resizer, .ui-layout-toggler {
+		display:	none !important;
+	}
+	/*
+	 *	Default pane print styles disables positioning, borders and backgrounds.
+	 *	You can modify these styles however it suit your needs.
+	 */
+	.ui-layout-pane {
+		border:		none !important;
+		background:	 transparent !important;
+		position:	relative !important;
+		top:		auto !important;
+		bottom:		auto !important;
+		left:		auto !important;
+		right:		auto !important;
+		width:		auto !important;
+		height:		auto !important;
+		overflow:	visible !important;
+	}
+}
+
--- a/shlr/www/p/lib/css/main.css
+++ b/shlr/www/p/lib/css/main.css
@ -0,0 +1,208 @@
+
+/* CUSTOMIZE/OVERRIDE THE DEFAULT CSS */
+/* remove padding and scrolling from elements that contain an Accordion OR a content-div */
+.ui-layout-center ,	/* has content-div */
+.ui-layout-west ,	/* has Accordion */
+.ui-layout-east ,	/* has content-div ... */
+.ui-layout-east .ui-layout-content { /* content-div has Accordion */
+	padding: 0;
+	overflow: hidden;
+}
+
+.ui-layout-center P.ui-layout-content {
+	line-height:	1.4em;
+	margin:			0; /* remove top/bottom margins from <P> used as content-div */
+}
+
+.ui-layout-resizer {
+	background-color: #373737 !important;
+
+}
+
+.ui-layout-east h4 { /* Footer in East-pane */
+	font-size:		0.9em;
+	font-weight:	normal;
+	/*border-width:	1px 0 0;*/
+}
+
+.ui-layout-pane {
+	border:		none !important;
+}
+
+.ui-layout-toggler {
+	background-color: #797979 !important;
+	border:		none !important;
+}
+
+.ui-layout-center {
+	/* remove default padding on center-pane so tabs widget fills it */
+	padding:	0;
+}
+
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-clearfix {
+	min-height: 0;
+	support: IE7
+}
+
+.ui-tabs .ui-tabs-nav {
+	font-size: 0.8em;
+	background: #c0c0c0;
+	border: 1px solid #797979;
+	color: rgb(89, 89, 89);
+	border-width: 0 0 1px;
+	padding: 7px 10px;
+	height: 17px;
+	margin: 0;
+}
+
+.ui-tabs .ui-tabs-nav li {
+	list-style: none;
+	float: left;
+	position: relative;
+	top: 0;
+	margin: 1px .2em 0 0;
+	border-bottom: 0;
+	padding: 0px 25px;
+	white-space: nowrap;
+	text-decoration: none;
+	background-color: #c0c0c0;
+	height: 20px;
+
+}
+
+.ui-tabs .ui-tabs-nav li a {
+	float: left;
+	padding: 0px;
+	text-decoration: none;
+	outline: none;
+}
+
+.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
+	color: #555555;
+	text-decoration: none;
+	outline: none;
+}
+
+.ui-widget-header {
+	border: 1px solid #aaaaaa;
+	background: #cccccc;
+	font-weight: bold;
+}
+
+.ui-tabs-nav li.ui-tabs-active a {
+    color: rgb(107, 105, 9);
+   /* background-color: blue;*/
+}
+
+.history_idx {
+    color: rgb(107, 105, 9);
+}
+.ui-helper-reset {
+/*	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;*/
+}
+
+.entry {
+	font-size:		0.8em;
+	padding:		0px 0px 0px 10px;
+
+}
+
+.jqtree-tree {
+	margin-top: 5px;
+}
+
+.jqtree-tree .jqtree-element {
+	margin: -0.2em 0;
+	font-family: monospace;
+	cursor: auto;
+	padding: 0px 5px;
+}
+
+.jqtree-tree .jqtree-folder {
+	margin-left: 5px;
+}
+.jqtree-tree .jqtree-title {
+	color: rgb(127,127,127);
+	/*font-size:		0.8em;*/
+	margin-left: 1em;
+}
+.jqtree-tree .jqtree-toggler {
+	color: rgb(127,127,127);
+	font-size:		0.8em;
+	cursor: pointer;
+	/*border: 1px solid #c0c0c0;*/
+}
+
+.jqtree-tree .autohighlighti {
+	background-color: rgb(107, 105, 9);
+	color: yellow;
+	/*font-size:		0.4em;*/
+	/*border: 1px solid #c0c0c0;*/
+}
+
+
+h3, h4 { /* Headers & Footer in Center & East panes */
+	font-size:		0.8em;
+	background:		#c0c0c0;
+	border:			1px solid #797979;
+	color: 			rgb(89, 89, 89);
+	border-width:	0 0 1px;
+	padding:		7px 10px;
+	margin:			0;
+}
+
+p {
+	margin:		0 !important;
+}
+
+#center_panel {
+	padding:	0px;
+	margin:		0px;
+}
+
+
+#command {
+	background:		#c0c0c0;
+	border:			1px solid #797979;
+	font-family: Geneva, Arial, Helvetica, sans-serif;
+	/*font-size: 0.4em;*/
+	padding: 5px;
+	width: 99%;
+	margin: 2px;
+}
+
+#cmd_output {
+	/*font-size: 0.8em;*/
+	color: rgb(127,127,127);
+	margin-top: 0px;
+}
+
+#cmd_output > p {
+	padding: 0px;
+	margin: 0px;
+}
+
+#history {
+	background:	#c0c0c0;
+	padding: 3px 5px;
+	/*font-size: 0.4em;*/
+}
+
+#information {
+	margin-left: 10px;
+}
--- a/shlr/www/p/lib/css/spectrum.css
+++ b/shlr/www/p/lib/css/spectrum.css
@ -0,0 +1,507 @@
+/***
+Spectrum Colorpicker v1.5.2
+https://github.com/bgrins/spectrum
+Author: Brian Grinstead
+License: MIT
+***/
+
+.sp-container {
+    position:absolute;
+    top:0;
+    left:0;
+    display:inline-block;
+    *display: inline;
+    *zoom: 1;
+    /* https://github.com/bgrins/spectrum/issues/40 */
+    z-index: 9999994;
+    overflow: hidden;
+}
+.sp-container.sp-flat {
+    position: relative;
+}
+
+/* Fix for * { box-sizing: border-box; } */
+.sp-container,
+.sp-container * {
+    -webkit-box-sizing: content-box;
+       -moz-box-sizing: content-box;
+            box-sizing: content-box;
+}
+
+/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
+.sp-top {
+  position:relative;
+  width: 100%;
+  display:inline-block;
+}
+.sp-top-inner {
+   position:absolute;
+   top:0;
+   left:0;
+   bottom:0;
+   right:0;
+}
+.sp-color {
+    position: absolute;
+    top:0;
+    left:0;
+    bottom:0;
+    right:20%;
+}
+.sp-hue {
+    position: absolute;
+    top:0;
+    right:0;
+    bottom:0;
+    left:84%;
+    height: 100%;
+}
+
+.sp-clear-enabled .sp-hue {
+    top:33px;
+    height: 77.5%;
+}
+
+.sp-fill {
+    padding-top: 80%;
+}
+.sp-sat, .sp-val {
+    position: absolute;
+    top:0;
+    left:0;
+    right:0;
+    bottom:0;
+}
+
+.sp-alpha-enabled .sp-top {
+    margin-bottom: 18px;
+}
+.sp-alpha-enabled .sp-alpha {
+    display: block;
+}
+.sp-alpha-handle {
+    position:absolute;
+    top:-4px;
+    bottom: -4px;
+    width: 6px;
+    left: 50%;
+    cursor: pointer;
+    border: 1px solid black;
+    background: white;
+    opacity: .8;
+}
+.sp-alpha {
+    display: none;
+    position: absolute;
+    bottom: -14px;
+    right: 0;
+    left: 0;
+    height: 8px;
+}
+.sp-alpha-inner {
+    border: solid 1px #333;
+}
+
+.sp-clear {
+    display: none;
+}
+
+.sp-clear.sp-clear-display {
+    background-position: center;
+}
+
+.sp-clear-enabled .sp-clear {
+    display: block;
+    position:absolute;
+    top:0px;
+    right:0;
+    bottom:0;
+    left:84%;
+    height: 28px;
+}
+
+/* Don't allow text selection */
+.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button  {
+    -webkit-user-select:none;
+    -moz-user-select: -moz-none;
+    -o-user-select:none;
+    user-select: none;
+}
+
+.sp-container.sp-input-disabled .sp-input-container {
+    display: none;
+}
+.sp-container.sp-buttons-disabled .sp-button-container {
+    display: none;
+}
+.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
+    display: none;
+}
+.sp-palette-only .sp-picker-container {
+    display: none;
+}
+.sp-palette-disabled .sp-palette-container {
+    display: none;
+}
+
+.sp-initial-disabled .sp-initial {
+    display: none;
+}
+
+
+/* Gradients for hue, saturation and value instead of images.  Not pretty... but it works */
+.sp-sat {
+    background-image: -webkit-gradient(linear,  0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
+    background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
+    background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+    background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+    background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+    background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
+    filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
+}
+.sp-val {
+    background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
+    background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
+    background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+    background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+    background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+    background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
+    filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
+}
+
+.sp-hue {
+    background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+    background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+    background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+    background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
+    background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+}
+
+/* IE filters do not support multiple color stops.
+   Generate 6 divs, line them up, and do two color gradients for each.
+   Yes, really.
+ */
+.sp-1 {
+    height:17%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
+}
+.sp-2 {
+    height:16%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
+}
+.sp-3 {
+    height:17%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
+}
+.sp-4 {
+    height:17%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
+}
+.sp-5 {
+    height:16%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
+}
+.sp-6 {
+    height:17%;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
+}
+
+.sp-hidden {
+    display: none !important;
+}
+
+/* Clearfix hack */
+.sp-cf:before, .sp-cf:after { content: ""; display: table; }
+.sp-cf:after { clear: both; }
+.sp-cf { *zoom: 1; }
+
+/* Mobile devices, make hue slider bigger so it is easier to slide */
+@media (max-device-width: 480px) {
+    .sp-color { right: 40%; }
+    .sp-hue { left: 63%; }
+    .sp-fill { padding-top: 60%; }
+}
+.sp-dragger {
+   border-radius: 5px;
+   height: 5px;
+   width: 5px;
+   border: 1px solid #fff;
+   background: #000;
+   cursor: pointer;
+   position:absolute;
+   top:0;
+   left: 0;
+}
+.sp-slider {
+    position: absolute;
+    top:0;
+    cursor:pointer;
+    height: 3px;
+    left: -1px;
+    right: -1px;
+    border: 1px solid #000;
+    background: white;
+    opacity: .8;
+}
+
+/*
+Theme authors:
+Here are the basic themeable display options (colors, fonts, global widths).
+See http://bgrins.github.io/spectrum/themes/ for instructions.
+*/
+
+.sp-container {
+    border-radius: 0;
+    background-color: #ECECEC;
+    border: solid 1px #f0c49B;
+    padding: 0;
+}
+.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
+    font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    box-sizing: border-box;
+}
+.sp-top {
+    margin-bottom: 3px;
+}
+.sp-color, .sp-hue, .sp-clear {
+    border: solid 1px #666;
+}
+
+/* Input */
+.sp-input-container {
+    float:right;
+    width: 100px;
+    margin-bottom: 4px;
+}
+.sp-initial-disabled  .sp-input-container {
+    width: 100%;
+}
+.sp-input {
+   font-size: 12px !important;
+   border: 1px inset;
+   padding: 4px 5px;
+   margin: 0;
+   width: 100%;
+   background:transparent;
+   border-radius: 3px;
+   color: #222;
+}
+.sp-input:focus  {
+    border: 1px solid orange;
+}
+.sp-input.sp-validation-error {
+    border: 1px solid red;
+    background: #fdd;
+}
+.sp-picker-container , .sp-palette-container {
+    float:left;
+    position: relative;
+    padding: 10px;
+    padding-bottom: 300px;
+    margin-bottom: -290px;
+}
+.sp-picker-container {
+    width: 172px;
+    border-left: solid 1px #fff;
+}
+
+/* Palettes */
+.sp-palette-container {
+    border-right: solid 1px #ccc;
+}
+
+.sp-palette-only .sp-palette-container {
+    border: 0;
+}
+
+.sp-palette .sp-thumb-el {
+    display: block;
+    position:relative;
+    float:left;
+    width: 24px;
+    height: 15px;
+    margin: 3px;
+    cursor: pointer;
+    border:solid 2px transparent;
+}
+.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
+    border-color: orange;
+}
+.sp-thumb-el {
+    position:relative;
+}
+
+/* Initial */
+.sp-initial {
+    float: left;
+    border: solid 1px #333;
+}
+.sp-initial span {
+    width: 30px;
+    height: 25px;
+    border:none;
+    display:block;
+    float:left;
+    margin:0;
+}
+
+.sp-initial .sp-clear-display {
+    background-position: center;
+}
+
+/* Buttons */
+.sp-palette-button-container,
+.sp-button-container {
+    float: right;
+}
+
+/* Replacer (the little preview div that shows up instead of the <input>) */
+.sp-replacer {
+    margin:0;
+    overflow:hidden;
+    cursor:pointer;
+    padding: 4px;
+    display:inline-block;
+    *zoom: 1;
+    *display: inline;
+    border: solid 1px #91765d;
+    background: #eee;
+    color: #333;
+    vertical-align: middle;
+}
+.sp-replacer:hover, .sp-replacer.sp-active {
+    border-color: #F0C49B;
+    color: #111;
+}
+.sp-replacer.sp-disabled {
+    cursor:default;
+    border-color: silver;
+    color: silver;
+}
+.sp-dd {
+    padding: 2px 0;
+    height: 16px;
+    line-height: 16px;
+    float:left;
+    font-size:10px;
+}
+.sp-preview {
+    position:relative;
+    width:25px;
+    height: 20px;
+    border: solid 1px #222;
+    margin-right: 5px;
+    float:left;
+    z-index: 0;
+}
+
+.sp-palette {
+    *width: 220px;
+    max-width: 220px;
+}
+.sp-palette .sp-thumb-el {
+    width:16px;
+    height: 16px;
+    margin:2px 1px;
+    border: solid 1px #d0d0d0;
+}
+
+.sp-container {
+    padding-bottom:0;
+}
+
+
+/* Buttons: http://hellohappy.org/css3-buttons/ */
+.sp-container button {
+  background-color: #eeeeee;
+  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
+  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
+  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
+  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
+  background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
+  border: 1px solid #ccc;
+  border-bottom: 1px solid #bbb;
+  border-radius: 3px;
+  color: #333;
+  font-size: 14px;
+  line-height: 1;
+  padding: 5px 4px;
+  text-align: center;
+  text-shadow: 0 1px 0 #eee;
+  vertical-align: middle;
+}
+.sp-container button:hover {
+    background-color: #dddddd;
+    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
+    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
+    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
+    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
+    background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
+    border: 1px solid #bbb;
+    border-bottom: 1px solid #999;
+    cursor: pointer;
+    text-shadow: 0 1px 0 #ddd;
+}
+.sp-container button:active {
+    border: 1px solid #aaa;
+    border-bottom: 1px solid #888;
+    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+    -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+    -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+}
+.sp-cancel {
+    font-size: 11px;
+    color: #d93f3f !important;
+    margin:0;
+    padding:2px;
+    margin-right: 5px;
+    vertical-align: middle;
+    text-decoration:none;
+
+}
+.sp-cancel:hover {
+    color: #d93f3f !important;
+    text-decoration: underline;
+}
+
+
+.sp-palette span:hover, .sp-palette span.sp-thumb-active {
+    border-color: #000;
+}
+
+.sp-preview, .sp-alpha, .sp-thumb-el {
+    position:relative;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+}
+.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
+    display:block;
+    position:absolute;
+    top:0;left:0;bottom:0;right:0;
+}
+
+.sp-palette .sp-thumb-inner {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+}
+
+.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
+}
+
+.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
+}
+
+.sp-clear-display {
+    background-repeat:no-repeat;
+    background-position: center;
+    background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
+}
--- a/shlr/www/p/lib/css/tree.jquery.css
+++ b/shlr/www/p/lib/css/tree.jquery.css
@ -0,0 +1,142 @@
+ul.jqtree-tree {
+    margin-left: 0;
+}
+
+ul.jqtree-tree,
+ul.jqtree-tree ul.jqtree_common {
+    list-style: none outside;
+    margin-bottom: 0;
+    padding: 0;
+}
+
+ul.jqtree-tree ul.jqtree_common {
+    display: block;
+    margin-left: 12px;
+    margin-right: 0;
+}
+ul.jqtree-tree li.jqtree-closed > ul.jqtree_common {
+    display: none;
+}
+
+ul.jqtree-tree li.jqtree_common {
+    clear: both;
+    list-style-type: none;
+}
+ul.jqtree-tree .jqtree-toggler {
+    border-bottom: none;
+    /*color: #333;*/
+    text-decoration: none;
+    margin-right: 0.5em;
+}
+
+ul.jqtree-tree .jqtree-toggler:hover {
+    /*color: #000;*/
+    text-decoration: none;
+}
+
+ul.jqtree-tree .jqtree-element {
+    cursor: auto;
+}
+
+.jqtree-tree .jqtree-title {
+    color: #1C4257;
+    vertical-align: middle;
+    margin-left: 1.5em;
+}
+
+.jqtree-tree .jqtree-title.jqtree-title-folder {
+    margin-left: 0;
+}
+
+ul.jqtree-tree li.jqtree-folder {
+    margin-bottom: 4px;
+}
+
+ul.jqtree-tree li.jqtree-folder.jqtree-closed {
+    margin-bottom: 1px;
+}
+
+ul.jqtree-tree .jqtree-toggler.jqtree-closed {
+    background-position: 0 0;
+}
+
+span.jqtree-dragging {
+    color: #fff;
+    background: #000;
+    opacity: 0.6;
+    cursor: pointer;
+    padding: 2px 8px;
+}
+
+ul.jqtree-tree li.jqtree-ghost {
+    position: relative;
+    z-index: 10;
+    margin-right: 10px;
+}
+
+ul.jqtree-tree li.jqtree-ghost span {
+    display: block;
+}
+
+ul.jqtree-tree li.jqtree-ghost span.jqtree-circle {
+    border: solid 2px #0000ff;
+    -webkit-border-radius: 100px;
+    -moz-border-radius: 100px;
+    border-radius: 100px;
+    height: 8px;
+    width: 8px;
+    position: absolute;
+    top: -4px;
+    left: -6px;
+}
+
+/* IE 6, 7, 8 */
+@media \0screen\,screen\9  {
+    ul.jqtree-tree li.jqtree-ghost span.jqtree-circle {
+        background: url(jqtree-circle.png) no-repeat;
+        border: 0 none;
+    }
+}
+
+ul.jqtree-tree li.jqtree-ghost span.jqtree-line {
+    background-color: #0000ff;
+    height: 2px;
+    padding: 0;
+    position: absolute;
+    top: -1px;
+    left: 2px;
+    width: 100%;
+}
+
+ul.jqtree-tree li.jqtree-ghost.jqtree-inside {
+    margin-left: 48px;
+}
+
+ul.jqtree-tree span.jqtree-border {
+    position: absolute;
+    display: block;
+    left: -2px;
+    top: 0;
+    border: solid 2px #0000ff;
+    border-radius: 6px;
+    margin: 0;
+    box-sizing: content-box;
+}
+
+ul.jqtree-tree .jqtree-element {
+    position: relative;
+}
+
+ul.jqtree-tree li.jqtree-selected > .jqtree-element,
+ul.jqtree-tree li.jqtree-selected > .jqtree-element:hover {
+    background-color: #97BDD6;
+    background: -webkit-gradient(linear, left top, left bottom, from(#BEE0F5), to(#89AFCA));
+    background: -moz-linear-gradient(top, #BEE0F5, #89AFCA);
+    background: -ms-linear-gradient(top, #BEE0F5, #89AFCA);
+    background: -o-linear-gradient(top, #BEE0F5, #89AFCA);
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+ul.jqtree-tree .jqtree-moving > .jqtree-element .jqtree-title {
+    outline: dashed 1px #0000ff;
+}
--- a/shlr/www/p/lib/js/disasm_panel.js
+++ b/shlr/www/p/lib/js/disasm_panel.js
@ -0,0 +1,117 @@
+// DISASSEMBLKER PANEL
+var DisasmPanel = function () {
+  this.display = "flat";
+  this.min = 0;
+  this.max = 0;
+  this.block = 512;
+  this.base = "entry0";
+  this.selected = null;
+  this.selected_offset = null;
+  this.renaming = null;
+  this.renameOldValue = "";
+  this.rbox = null;
+  this.panel = $("#disasm_tab")[0];
+};
+DisasmPanel.prototype.seek = function(addr, scroll) {
+    var panel = this.panel;
+    if (this.display === "graph") {
+      var display = "graph";
+      panel.innerHTML = "";
+      r2.store_asm_config();
+      r2.cmd("e asm.bytes = false; e asm.flags = false; e asm.functions = false; e asm.lines = false; e asm.xrefs = false; e asm.cmtright = true; e asm.pseudo = false", function (x) {
+        r2.cmd ("agj " + addr, function(x) {
+          panel.innerHTML = "<div id='bb_canvas' class='bbcanvas enyo-selectable ec_background'></div>";
+          // If render fails (address does not belong to function) then switch to flat view
+          if (render_graph(x) === false) display = "flat";
+        });
+      });
+
+      this.display = display;
+      r2.restore_asm_config();
+    }
+    else if (this.display === "flat") {
+      this.min = this.max = 0;
+      r2.get_disasm_before_after(addr, -0.5*this.block, this.block, function(x) {
+        panel.innerHTML = "<div id='flat_canvas' class='flatcanvas enyo-selectable ec_background'></div>";
+        render_instructions(x);
+      });
+    }
+    this.selected = get_element_by_address(addr);
+    this.selected_offset = addr;
+
+    render_history();
+    rehighlight_iaddress(addr);
+
+};
+DisasmPanel.prototype.display_graph = function() {
+  this.display = "graph";
+  $("#main_panel").removeClass("ec_background");
+  $("#main_panel").addClass("ec_alt_background");
+};
+DisasmPanel.prototype.display_flat = function() {
+  this.display = "flat";
+  $("#main_panel").removeClass("ec_alt_background");
+  $("#main_panel").addClass("ec_background");
+};
+DisasmPanel.prototype.goToAddress = function() {
+
+  if (this.renaming === null && this.selected !== null && (this.selected.className.indexOf(" addr ") > -1)) {
+    var address = get_address_from_class(this.selected);
+    if (this.selected.className.indexOf("ec_dataoffset") > -1) {
+      // address is located in not executable memory, switching to hex view
+      r2ui.openpage(address, 2);
+      return;
+    }
+    if (address !== undefined && address !== null) {
+      address = address_canonicalize(address);
+      do_jumpto(address);
+    }
+  }
+};
+DisasmPanel.prototype.handleInputTextChange = function() {
+  if (this.renaming !== null && this.rbox.value.length > 0) {
+    // Enter belongs to renaming
+    var new_value = this.rbox.value;
+    this.renaming.innerHTML = new_value;
+    renaming = null;
+
+    this.renaming.innerHTML = this.renameOldValue;
+    this.renaming = null;
+
+    var renamed = false;
+    var offset = this.selected_offset;
+    // If current offset is the beggining of a function, rename it with afr
+    r2.cmdj("pdfj", function(x) {
+      if (x !== null && x !== undefined) {
+        if ("0x" + x.addr.toString(16) === offset) {
+          r2.cmd("afn " + new_value, function() {
+            renamed = true;
+           });
+        }
+      }
+    });
+    // Otherwise just add a flag
+    if (!renamed) {
+      var labels = '';
+      r2.cmd("fs functions;f@" + this.selected_offset + "~[2]", function(x) {
+        labels = x.trim().replace('\n', ';');
+      });
+      if (new_value) {
+        var cmd = "fs functions;f-@" + this.selected_offset + ";f+" + new_value + "@" + this.selected_offset + ";";
+        r2.cmd(cmd, function() {});
+      } else {
+        r2.cmd("f-@" + this.selected_offset, function() {});
+      }
+    }
+    r2.update_flags();
+
+    var instruction;
+    if (this.display == "flat") instruction = $(this.selected).closest(".instructionbox").find('.insaddr')[0];
+    if (this.display == "graph") instruction = $(this.selected).closest(".instruction").find('.insaddr')[0];
+    var address = get_address_from_class(instruction);
+    update_binary_details();
+    r2ui.seek(address, false);
+    scroll_to_address(address);
+    document.getElementById("canvas").focus();
+  }
+};
--- a/shlr/www/p/lib/js/hex_panel.js
+++ b/shlr/www/p/lib/js/hex_panel.js
@ -0,0 +1,28 @@
+// HEXDUMP PANEL
+var HexPanel = function () {
+	this.min = 0;
+	this.max = 0;
+	this.block = 1024;
+	this.base = "entry0";
+};
+
+HexPanel.prototype.seek = function(addr, scroll) {
+	this.base = addr;
+	this.min = this.max = 0;
+	r2.get_hexdump (addr, this.block, function (x) {
+	  x = render_hexdump(x);
+	  $("#hex_tab").html("<pre id='hexdump' style='color:rgb(127,127,127);''>" + x + "</pre>");
+	});
+};
+HexPanel.prototype.scrollTo = function(x,y) {
+};
+
+function render_hexdump(x) {
+	var html = "";
+	var lines = x.split('\n');
+	for (var i in lines) {
+		var line = lines[i];
+		html += "<div>" + line + "</div>";
+	}
+	return html;
+};
--- a/shlr/www/p/lib/js/jquery-1.9.0.js
+++ b/shlr/www/p/lib/js/jquery-1.9.0.js
--- a/shlr/www/p/lib/js/jquery-colpick.js
+++ b/shlr/www/p/lib/js/jquery-colpick.js
@ -0,0 +1,520 @@
+/*
+colpick Color Picker
+Copyright 2013 Jose Vargas. Licensed under GPL license. Based on Stefan Petre's Color Picker www.eyecon.ro, dual licensed under the MIT and GPL licenses
+
+For usage and examples: colpick.com/plugin
+ */
+
+(function ($) {
+	var colpick = function () {
+		var
+			tpl = '<div class="colpick"><div class="colpick_color"><div class="colpick_color_overlay1"><div class="colpick_color_overlay2"><div class="colpick_selector_outer"><div class="colpick_selector_inner"></div></div></div></div></div><div class="colpick_hue"><div class="colpick_hue_arrs"><div class="colpick_hue_larr"></div><div class="colpick_hue_rarr"></div></div></div><div class="colpick_new_color"></div><div class="colpick_current_color"></div><div class="colpick_hex_field"><div class="colpick_field_letter">#</div><input type="text" maxlength="6" size="6" /></div><div class="colpick_rgb_r colpick_field"><div class="colpick_field_letter">R</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_g colpick_field"><div class="colpick_field_letter">G</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_rgb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_h colpick_field"><div class="colpick_field_letter">H</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_s colpick_field"><div class="colpick_field_letter">S</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_hsb_b colpick_field"><div class="colpick_field_letter">B</div><input type="text" maxlength="3" size="3" /><div class="colpick_field_arrs"><div class="colpick_field_uarr"></div><div class="colpick_field_darr"></div></div></div><div class="colpick_submit"></div></div>',
+			defaults = {
+				showEvent: 'click',
+				onShow: function () {},
+				onBeforeShow: function(){},
+				onHide: function () {},
+				onChange: function () {},
+				onSubmit: function () {},
+				colorScheme: 'light',
+				color: '3289c7',
+				livePreview: true,
+				flat: false,
+				layout: 'full',
+				submit: 1,
+				submitText: 'OK',
+				height: 156
+			},
+			//Fill the inputs of the plugin
+			fillRGBFields = function  (hsb, cal) {
+				var rgb = hsbToRgb(hsb);
+				$(cal).data('colpick').fields
+					.eq(1).val(rgb.r).end()
+					.eq(2).val(rgb.g).end()
+					.eq(3).val(rgb.b).end();
+			},
+			fillHSBFields = function  (hsb, cal) {
+				$(cal).data('colpick').fields
+					.eq(4).val(Math.round(hsb.h)).end()
+					.eq(5).val(Math.round(hsb.s)).end()
+					.eq(6).val(Math.round(hsb.b)).end();
+			},
+			fillHexFields = function (hsb, cal) {
+				$(cal).data('colpick').fields.eq(0).val(hsbToHex(hsb));
+			},
+			//Set the round selector position
+			setSelector = function (hsb, cal) {
+				$(cal).data('colpick').selector.css('backgroundColor', '#' + hsbToHex({h: hsb.h, s: 100, b: 100}));
+				$(cal).data('colpick').selectorIndic.css({
+					left: parseInt($(cal).data('colpick').height * hsb.s/100, 10),
+					top: parseInt($(cal).data('colpick').height * (100-hsb.b)/100, 10)
+				});
+			},
+			//Set the hue selector position
+			setHue = function (hsb, cal) {
+				$(cal).data('colpick').hue.css('top', parseInt($(cal).data('colpick').height - $(cal).data('colpick').height * hsb.h/360, 10));
+			},
+			//Set current and new colors
+			setCurrentColor = function (hsb, cal) {
+				$(cal).data('colpick').currentColor.css('backgroundColor', '#' + hsbToHex(hsb));
+			},
+			setNewColor = function (hsb, cal) {
+				$(cal).data('colpick').newColor.css('backgroundColor', '#' + hsbToHex(hsb));
+			},
+			//Called when the new color is changed
+			change = function (ev) {
+				var cal = $(this).parent().parent(), col;
+				if (this.parentNode.className.indexOf('_hex') > 0) {
+					cal.data('colpick').color = col = hexToHsb(fixHex(this.value));
+					fillRGBFields(col, cal.get(0));
+					fillHSBFields(col, cal.get(0));
+				} else if (this.parentNode.className.indexOf('_hsb') > 0) {
+					cal.data('colpick').color = col = fixHSB({
+						h: parseInt(cal.data('colpick').fields.eq(4).val(), 10),
+						s: parseInt(cal.data('colpick').fields.eq(5).val(), 10),
+						b: parseInt(cal.data('colpick').fields.eq(6).val(), 10)
+					});
+					fillRGBFields(col, cal.get(0));
+					fillHexFields(col, cal.get(0));
+				} else {
+					cal.data('colpick').color = col = rgbToHsb(fixRGB({
+						r: parseInt(cal.data('colpick').fields.eq(1).val(), 10),
+						g: parseInt(cal.data('colpick').fields.eq(2).val(), 10),
+						b: parseInt(cal.data('colpick').fields.eq(3).val(), 10)
+					}));
+					fillHexFields(col, cal.get(0));
+					fillHSBFields(col, cal.get(0));
+				}
+				setSelector(col, cal.get(0));
+				setHue(col, cal.get(0));
+				setNewColor(col, cal.get(0));
+				cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 0]);
+			},
+			//Change style on blur and on focus of inputs
+			blur = function (ev) {
+				$(this).parent().removeClass('colpick_focus');
+			},
+			focus = function () {
+				$(this).parent().parent().data('colpick').fields.parent().removeClass('colpick_focus');
+				$(this).parent().addClass('colpick_focus');
+			},
+			//Increment/decrement arrows functions
+			downIncrement = function (ev) {
+				ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
+				var field = $(this).parent().find('input').focus();
+				var current = {
+					el: $(this).parent().addClass('colpick_slider'),
+					max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
+					y: ev.pageY,
+					field: field,
+					val: parseInt(field.val(), 10),
+					preview: $(this).parent().parent().data('colpick').livePreview
+				};
+				$(document).mouseup(current, upIncrement);
+				$(document).mousemove(current, moveIncrement);
+			},
+			moveIncrement = function (ev) {
+				ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val - ev.pageY + ev.data.y, 10))));
+				if (ev.data.preview) {
+					change.apply(ev.data.field.get(0), [true]);
+				}
+				return false;
+			},
+			upIncrement = function (ev) {
+				change.apply(ev.data.field.get(0), [true]);
+				ev.data.el.removeClass('colpick_slider').find('input').focus();
+				$(document).off('mouseup', upIncrement);
+				$(document).off('mousemove', moveIncrement);
+				return false;
+			},
+			//Hue slider functions
+			downHue = function (ev) {
+				ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
+				var current = {
+					cal: $(this).parent(),
+					y: $(this).offset().top
+				};
+				$(document).on('mouseup touchend',current,upHue);
+				$(document).on('mousemove touchmove',current,moveHue);
+
+				var pageY = ((ev.type == 'touchstart') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
+				change.apply(
+					current.cal.data('colpick')
+					.fields.eq(4).val(parseInt(360*(current.cal.data('colpick').height - (pageY - current.y))/current.cal.data('colpick').height, 10))
+						.get(0),
+					[current.cal.data('colpick').livePreview]
+				);
+				return false;
+			},
+			moveHue = function (ev) {
+				var pageY = ((ev.type == 'touchmove') ? ev.originalEvent.changedTouches[0].pageY : ev.pageY );
+				change.apply(
+					ev.data.cal.data('colpick')
+					.fields.eq(4).val(parseInt(360*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.y))))/ev.data.cal.data('colpick').height, 10))
+						.get(0),
+					[ev.data.preview]
+				);
+				return false;
+			},
+			upHue = function (ev) {
+				fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
+				fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
+				$(document).off('mouseup touchend',upHue);
+				$(document).off('mousemove touchmove',moveHue);
+				return false;
+			},
+			//Color selector functions
+			downSelector = function (ev) {
+				ev.preventDefault ? ev.preventDefault() : ev.returnValue = false;
+				var current = {
+					cal: $(this).parent(),
+					pos: $(this).offset()
+				};
+				current.preview = current.cal.data('colpick').livePreview;
+
+				$(document).on('mouseup touchend',current,upSelector);
+				$(document).on('mousemove touchmove',current,moveSelector);
+
+				var payeX,pageY;
+				if(ev.type == 'touchstart') {
+					pageX = ev.originalEvent.changedTouches[0].pageX,
+					pageY = ev.originalEvent.changedTouches[0].pageY;
+				} else {
+					pageX = ev.pageX;
+					pageY = ev.pageY;
+				}
+
+				change.apply(
+					current.cal.data('colpick').fields
+					.eq(6).val(parseInt(100*(current.cal.data('colpick').height - (pageY - current.pos.top))/current.cal.data('colpick').height, 10)).end()
+					.eq(5).val(parseInt(100*(pageX - current.pos.left)/current.cal.data('colpick').height, 10))
+					.get(0),
+					[current.preview]
+				);
+				return false;
+			},
+			moveSelector = function (ev) {
+				var payeX,pageY;
+				if(ev.type == 'touchmove') {
+					pageX = ev.originalEvent.changedTouches[0].pageX,
+					pageY = ev.originalEvent.changedTouches[0].pageY;
+				} else {
+					pageX = ev.pageX;
+					pageY = ev.pageY;
+				}
+
+				change.apply(
+					ev.data.cal.data('colpick').fields
+					.eq(6).val(parseInt(100*(ev.data.cal.data('colpick').height - Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageY - ev.data.pos.top))))/ev.data.cal.data('colpick').height, 10)).end()
+					.eq(5).val(parseInt(100*(Math.max(0,Math.min(ev.data.cal.data('colpick').height,(pageX - ev.data.pos.left))))/ev.data.cal.data('colpick').height, 10))
+					.get(0),
+					[ev.data.preview]
+				);
+				return false;
+			},
+			upSelector = function (ev) {
+				fillRGBFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
+				fillHexFields(ev.data.cal.data('colpick').color, ev.data.cal.get(0));
+				$(document).off('mouseup touchend',upSelector);
+				$(document).off('mousemove touchmove',moveSelector);
+				return false;
+			},
+			//Submit button
+			clickSubmit = function (ev) {
+				var cal = $(this).parent();
+				var col = cal.data('colpick').color;
+				cal.data('colpick').origColor = col;
+				setCurrentColor(col, cal.get(0));
+				cal.data('colpick').onSubmit(col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el);
+			},
+			//Show/hide the color picker
+			show = function (ev) {
+				// Prevent the trigger of any direct parent
+				ev.stopPropagation();
+				var cal = $('#' + $(this).data('colpickId'));
+				cal.data('colpick').onBeforeShow.apply(this, [cal.get(0)]);
+				var pos = $(this).offset();
+				var top = pos.top + this.offsetHeight;
+				var left = pos.left;
+				var viewPort = getViewport();
+				var calW = cal.width();
+				if (left + calW > viewPort.l + viewPort.w) {
+					left -= calW;
+				}
+				cal.css({left: left + 'px', top: top + 'px'});
+				if (cal.data('colpick').onShow.apply(this, [cal.get(0)]) != false) {
+					cal.show();
+				}
+				//Hide when user clicks outside
+				$('html').mousedown({cal:cal}, hide);
+				cal.mousedown(function(ev){ev.stopPropagation();})
+			},
+			hide = function (ev) {
+				if (ev.data.cal.data('colpick').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
+					ev.data.cal.hide();
+				}
+				$('html').off('mousedown', hide);
+			},
+			getViewport = function () {
+				var m = document.compatMode == 'CSS1Compat';
+				return {
+					l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
+					w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth)
+				};
+			},
+			//Fix the values if the user enters a negative or high value
+			fixHSB = function (hsb) {
+				return {
+					h: Math.min(360, Math.max(0, hsb.h)),
+					s: Math.min(100, Math.max(0, hsb.s)),
+					b: Math.min(100, Math.max(0, hsb.b))
+				};
+			},
+			fixRGB = function (rgb) {
+				return {
+					r: Math.min(255, Math.max(0, rgb.r)),
+					g: Math.min(255, Math.max(0, rgb.g)),
+					b: Math.min(255, Math.max(0, rgb.b))
+				};
+			},
+			fixHex = function (hex) {
+				var len = 6 - hex.length;
+				if (len > 0) {
+					var o = [];
+					for (var i=0; i<len; i++) {
+						o.push('0');
+					}
+					o.push(hex);
+					hex = o.join('');
+				}
+				return hex;
+			},
+			restoreOriginal = function () {
+				var cal = $(this).parent();
+				var col = cal.data('colpick').origColor;
+				cal.data('colpick').color = col;
+				fillRGBFields(col, cal.get(0));
+				fillHexFields(col, cal.get(0));
+				fillHSBFields(col, cal.get(0));
+				setSelector(col, cal.get(0));
+				setHue(col, cal.get(0));
+				setNewColor(col, cal.get(0));
+			};
+		return {
+			init: function (opt) {
+				opt = $.extend({}, defaults, opt||{});
+				//Set color
+				if (typeof opt.color == 'string') {
+					opt.color = hexToHsb(opt.color);
+				} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
+					opt.color = rgbToHsb(opt.color);
+				} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
+					opt.color = fixHSB(opt.color);
+				} else {
+					return this;
+				}
+
+				//For each selected DOM element
+				return this.each(function () {
+					//If the element does not have an ID
+					if (!$(this).data('colpickId')) {
+						var options = $.extend({}, opt);
+						options.origColor = opt.color;
+						//Generate and assign a random ID
+						var id = 'collorpicker_' + parseInt(Math.random() * 1000);
+						$(this).data('colpickId', id);
+						//Set the tpl's ID and get the HTML
+						var cal = $(tpl).attr('id', id);
+						//Add class according to layout
+						cal.addClass('colpick_'+options.layout+(options.submit?'':' colpick_'+options.layout+'_ns'));
+						//Add class if the color scheme is not default
+						if(options.colorScheme != 'light') {
+							cal.addClass('colpick_'+options.colorScheme);
+						}
+						//Setup submit button
+						cal.find('div.colpick_submit').html(options.submitText).click(clickSubmit);
+						//Setup input fields
+						options.fields = cal.find('input').change(change).blur(blur).focus(focus);
+						cal.find('div.colpick_field_arrs').mousedown(downIncrement).end().find('div.colpick_current_color').click(restoreOriginal);
+						//Setup hue selector
+						options.selector = cal.find('div.colpick_color').on('mousedown touchstart',downSelector);
+						options.selectorIndic = options.selector.find('div.colpick_selector_outer');
+						//Store parts of the plugin
+						options.el = this;
+						options.hue = cal.find('div.colpick_hue_arrs');
+						huebar = options.hue.parent();
+						//Paint the hue bar
+						var UA = navigator.userAgent.toLowerCase();
+						var isIE = navigator.appName === 'Microsoft Internet Explorer';
+						var IEver = isIE ? parseFloat( UA.match( /msie ([0-9]{1,}[\.0-9]{0,})/ )[1] ) : 0;
+						var ngIE = ( isIE && IEver < 10 );
+						var stops = ['#ff0000','#ff0080','#ff00ff','#8000ff','#0000ff','#0080ff','#00ffff','#00ff80','#00ff00','#80ff00','#ffff00','#ff8000','#ff0000'];
+						if(ngIE) {
+							var i, div;
+							for(i=0; i<=11; i++) {
+								div = $('<div></div>').attr('style','height:8.333333%; filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='+stops[i]+', endColorstr='+stops[i+1]+')";');
+								huebar.append(div);
+							}
+						} else {
+							stopList = stops.join(',');
+							huebar.attr('style','background:-webkit-linear-gradient(top,'+stopList+'); background: -o-linear-gradient(top,'+stopList+'); background: -ms-linear-gradient(top,'+stopList+'); background:-moz-linear-gradient(top,'+stopList+'); -webkit-linear-gradient(top,'+stopList+'); background:linear-gradient(to bottom,'+stopList+'); ');
+						}
+						cal.find('div.colpick_hue').on('mousedown touchstart',downHue);
+						options.newColor = cal.find('div.colpick_new_color');
+						options.currentColor = cal.find('div.colpick_current_color');
+						//Store options and fill with default color
+						cal.data('colpick', options);
+						fillRGBFields(options.color, cal.get(0));
+						fillHSBFields(options.color, cal.get(0));
+						fillHexFields(options.color, cal.get(0));
+						setHue(options.color, cal.get(0));
+						setSelector(options.color, cal.get(0));
+						setCurrentColor(options.color, cal.get(0));
+						setNewColor(options.color, cal.get(0));
+						//Append to body if flat=false, else show in place
+						if (options.flat) {
+							cal.appendTo(this).show();
+							cal.css({
+								position: 'relative',
+								display: 'block'
+							});
+						} else {
+							cal.appendTo(document.body);
+							$(this).on(options.showEvent, show);
+							cal.css({
+								position:'absolute'
+							});
+						}
+					}
+				});
+			},
+			//Shows the picker
+			showPicker: function() {
+				return this.each( function () {
+					if ($(this).data('colpickId')) {
+						show.apply(this);
+					}
+				});
+			},
+			//Hides the picker
+			hidePicker: function() {
+				return this.each( function () {
+					if ($(this).data('colpickId')) {
+						$('#' + $(this).data('colpickId')).hide();
+					}
+				});
+			},
+			//Sets a color as new and current (default)
+			setColor: function(col, setCurrent) {
+				setCurrent = (typeof setCurrent === "undefined") ? 1 : setCurrent;
+				if (typeof col == 'string') {
+					col = hexToHsb(col);
+				} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
+					col = rgbToHsb(col);
+				} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
+					col = fixHSB(col);
+				} else {
+					return this;
+				}
+				return this.each(function(){
+					if ($(this).data('colpickId')) {
+						var cal = $('#' + $(this).data('colpickId'));
+						cal.data('colpick').color = col;
+						cal.data('colpick').origColor = col;
+						fillRGBFields(col, cal.get(0));
+						fillHSBFields(col, cal.get(0));
+						fillHexFields(col, cal.get(0));
+						setHue(col, cal.get(0));
+						setSelector(col, cal.get(0));
+
+						setNewColor(col, cal.get(0));
+						cal.data('colpick').onChange.apply(cal.parent(), [col, hsbToHex(col), hsbToRgb(col), cal.data('colpick').el, 1]);
+						if(setCurrent) {
+							setCurrentColor(col, cal.get(0));
+						}
+					}
+				});
+			}
+		};
+	}();
+	//Color space convertions
+	var hexToRgb = function (hex) {
+		var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
+		return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
+	};
+	var hexToHsb = function (hex) {
+		return rgbToHsb(hexToRgb(hex));
+	};
+	var rgbToHsb = function (rgb) {
+		var hsb = {h: 0, s: 0, b: 0};
+		var min = Math.min(rgb.r, rgb.g, rgb.b);
+		var max = Math.max(rgb.r, rgb.g, rgb.b);
+		var delta = max - min;
+		hsb.b = max;
+		hsb.s = max != 0 ? 255 * delta / max : 0;
+		if (hsb.s != 0) {
+			if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
+			else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
+			else hsb.h = 4 + (rgb.r - rgb.g) / delta;
+		} else hsb.h = -1;
+		hsb.h *= 60;
+		if (hsb.h < 0) hsb.h += 360;
+		hsb.s *= 100/255;
+		hsb.b *= 100/255;
+		return hsb;
+	};
+	var hsbToRgb = function (hsb) {
+		var rgb = {};
+		var h = hsb.h;
+		var s = hsb.s*255/100;
+		var v = hsb.b*255/100;
+		if(s == 0) {
+			rgb.r = rgb.g = rgb.b = v;
+		} else {
+			var t1 = v;
+			var t2 = (255-s)*v/255;
+			var t3 = (t1-t2)*(h%60)/60;
+			if(h==360) h = 0;
+			if(h<60) {rgb.r=t1;	rgb.b=t2; rgb.g=t2+t3}
+			else if(h<120) {rgb.g=t1; rgb.b=t2;	rgb.r=t1-t3}
+			else if(h<180) {rgb.g=t1; rgb.r=t2;	rgb.b=t2+t3}
+			else if(h<240) {rgb.b=t1; rgb.r=t2;	rgb.g=t1-t3}
+			else if(h<300) {rgb.b=t1; rgb.g=t2;	rgb.r=t2+t3}
+			else if(h<360) {rgb.r=t1; rgb.g=t2;	rgb.b=t1-t3}
+			else {rgb.r=0; rgb.g=0;	rgb.b=0}
+		}
+		return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
+	};
+	var rgbToHex = function (rgb) {
+		var hex = [
+			rgb.r.toString(16),
+			rgb.g.toString(16),
+			rgb.b.toString(16)
+		];
+		$.each(hex, function (nr, val) {
+			if (val.length == 1) {
+				hex[nr] = '0' + val;
+			}
+		});
+		return hex.join('');
+	};
+	var hsbToHex = function (hsb) {
+		return rgbToHex(hsbToRgb(hsb));
+	};
+	$.fn.extend({
+		colpick: colpick.init,
+		colpickHide: colpick.hidePicker,
+		colpickShow: colpick.showPicker,
+		colpickSetColor: colpick.setColor
+	});
+	$.extend({
+		colpick:{
+			rgbToHex: rgbToHex,
+			rgbToHsb: rgbToHsb,
+			hsbToHex: hsbToHex,
+			hsbToRgb: hsbToRgb,
+			hexToHsb: hexToHsb,
+			hexToRgb: hexToRgb
+		}
+	});
+})(jQuery);
--- a/shlr/www/p/lib/js/jquery-ui-latest.js
+++ b/shlr/www/p/lib/js/jquery-ui-latest.js
--- a/shlr/www/p/lib/js/jquery.layout-latest.js
+++ b/shlr/www/p/lib/js/jquery.layout-latest.js
--- a/shlr/www/p/lib/js/jquery.layout.resizePaneAccordions-latest.js
+++ b/shlr/www/p/lib/js/jquery.layout.resizePaneAccordions-latest.js
@ -0,0 +1,34 @@
+/**
+ *	UI Layout Callback: resizePaneAccordions
+ *
+ *	This callback is used when a layout-pane contains 1 or more accordions
+ *	- whether the accordion a child of the pane or is nested within other elements
+ *	Assign this callback to the pane.onresize event:
+ *
+ *	SAMPLE:
+ *	< jQuery UI 1.9: $("#elem").tabs({ show: $.layout.callbacks.resizePaneAccordions });
+ *	> jQuery UI 1.9: $("#elem").tabs({ activate: $.layout.callbacks.resizePaneAccordions });
+ *	$("body").layout({ center__onresize: $.layout.callbacks.resizePaneAccordions });
+ *
+ *	Version:	1.2 - 2013-01-12
+ *	Author:		Kevin Dalman (kevin@jquery-dev.com)
+ */
+;(function ($) {
+var _ = $.layout;
+
+// make sure the callbacks branch exists
+if (!_.callbacks) _.callbacks = {};
+
+_.callbacks.resizePaneAccordions = function (x, ui) {
+	// may be called EITHER from layout-pane.onresize OR tabs.show
+	var $P = ui.jquery ? ui : $(ui.newPanel || ui.panel);
+	// find all VISIBLE accordions inside this pane and resize them
+	$P.find(".ui-accordion:visible").each(function(){
+		var $E = $(this);
+		if ($E.data("accordion"))		// jQuery < 1.9
+			$E.accordion("resize");
+		if ($E.data("ui-accordion"))	// jQuery >= 1.9
+			$E.accordion("refresh");
+	});
+};
+})( jQuery );
--- a/shlr/www/p/lib/js/jquery.scrollTo-latest.js
+++ b/shlr/www/p/lib/js/jquery.scrollTo-latest.js
@ -0,0 +1,187 @@
+/*!
+ * jQuery.scrollTo
+ * Copyright (c) 2007-2014 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
+ * Licensed under MIT
+ * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
+ * @projectDescription Easy element scrolling using jQuery.
+ * @author Ariel Flesler
+ * @version 1.4.14
+ */
+;(function (define) {
+	'use strict';
+
+	define(['jquery'], function ($) {
+
+		var $scrollTo = $.scrollTo = function( target, duration, settings ) {
+			return $(window).scrollTo( target, duration, settings );
+		};
+
+		$scrollTo.defaults = {
+			axis:'xy',
+			duration: 0,
+			limit:true
+		};
+
+		// Returns the element that needs to be animated to scroll the window.
+		// Kept for backwards compatibility (specially for localScroll & serialScroll)
+		$scrollTo.window = function( scope ) {
+			return $(window)._scrollable();
+		};
+
+		// Hack, hack, hack :)
+		// Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
+		$.fn._scrollable = function() {
+			return this.map(function() {
+				var elem = this,
+					isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
+
+					if (!isWin)
+						return elem;
+
+				var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
+
+				return /webkit/i.test(navigator.userAgent) || doc.compatMode == 'BackCompat' ?
+					doc.body :
+					doc.documentElement;
+			});
+		};
+
+		$.fn.scrollTo = function( target, duration, settings ) {
+			if (typeof duration == 'object') {
+				settings = duration;
+				duration = 0;
+			}
+			if (typeof settings == 'function')
+				settings = { onAfter:settings };
+
+			if (target == 'max')
+				target = 9e9;
+
+			settings = $.extend( {}, $scrollTo.defaults, settings );
+			// Speed is still recognized for backwards compatibility
+			duration = duration || settings.duration;
+			// Make sure the settings are given right
+			settings.queue = settings.queue && settings.axis.length > 1;
+
+			if (settings.queue)
+				// Let's keep the overall duration
+				duration /= 2;
+			settings.offset = both( settings.offset );
+			settings.over = both( settings.over );
+
+			return this._scrollable().each(function() {
+				// Null target yields nothing, just like jQuery does
+				if (target == null) return;
+
+				var elem = this,
+					$elem = $(elem),
+					targ = target, toff, attr = {},
+					win = $elem.is('html,body');
+
+				switch (typeof targ) {
+					// A number will pass the regex
+					case 'number':
+					case 'string':
+						if (/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(targ)) {
+							targ = both( targ );
+							// We are done
+							break;
+						}
+						// Relative/Absolute selector, no break!
+						targ = win ? $(targ) : $(targ, this);
+						if (!targ.length) return;
+					case 'object':
+						// DOMElement / jQuery
+						if (targ.is || targ.style)
+							// Get the real position of the target
+							toff = (targ = $(targ)).offset();
+				}
+
+				var offset = $.isFunction(settings.offset) && settings.offset(elem, targ) || settings.offset;
+
+				$.each( settings.axis.split(''), function( i, axis ) {
+					var Pos	= axis == 'x' ? 'Left' : 'Top',
+						pos = Pos.toLowerCase(),
+						key = 'scroll' + Pos,
+						old = elem[key],
+						max = $scrollTo.max(elem, axis);
+
+					if (toff) {// jQuery / DOMElement
+						attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
+
+						// If it's a dom element, reduce the margin
+						if (settings.margin) {
+							attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
+							attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
+						}
+
+						attr[key] += offset[pos] || 0;
+
+						if(settings.over[pos])
+							// Scroll to a fraction of its width/height
+							attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
+					} else {
+						var val = targ[pos];
+						// Handle percentage values
+						attr[key] = val.slice && val.slice(-1) == '%' ?
+							parseFloat(val) / 100 * max
+							: val;
+					}
+
+					// Number or 'number'
+					if (settings.limit && /^\d+$/.test(attr[key]))
+						// Check the limits
+						attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
+
+					// Queueing axes
+					if (!i && settings.queue) {
+						// Don't waste time animating, if there's no need.
+						if (old != attr[key])
+							// Intermediate animation
+							animate( settings.onAfterFirst );
+						// Don't animate this axis again in the next iteration.
+						delete attr[key];
+					}
+				});
+
+				animate( settings.onAfter );
+
+				function animate( callback ) {
+					$elem.animate( attr, duration, settings.easing, callback && function() {
+						callback.call(this, targ, settings);
+					});
+				}
+			}).end();
+		};
+
+		// Max scrolling position, works on quirks mode
+		// It only fails (not too badly) on IE, quirks mode.
+		$scrollTo.max = function( elem, axis ) {
+			var Dim = axis == 'x' ? 'Width' : 'Height',
+				scroll = 'scroll'+Dim;
+
+			if (!$(elem).is('html,body'))
+				return elem[scroll] - $(elem)[Dim.toLowerCase()]();
+
+			var size = 'client' + Dim,
+				html = elem.ownerDocument.documentElement,
+				body = elem.ownerDocument.body;
+
+			return Math.max( html[scroll], body[scroll] ) - Math.min( html[size]  , body[size]   );
+		};
+
+		function both( val ) {
+			return $.isFunction(val) || $.isPlainObject(val) ? val : { top:val, left:val };
+		}
+
+		// AMD requirement
+		return $scrollTo;
+	})
+}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
+	if (typeof module !== 'undefined' && module.exports) {
+		// Node
+		module.exports = factory(require('jquery'));
+	} else {
+		factory(jQuery);
+	}
+}));
--- a/shlr/www/p/lib/js/jquery.ui-contextmenu.js
+++ b/shlr/www/p/lib/js/jquery.ui-contextmenu.js
@ -0,0 +1,430 @@
+/*******************************************************************************
+ * jquery.ui-contextmenu.js plugin.
+ *
+ * jQuery plugin that provides a context menu (based on the jQueryUI menu widget).
+ *
+ * @see https://github.com/mar10/jquery-ui-contextmenu
+ *
+ * Copyright (c) 2014, Martin Wendt (http://wwWendt.de). Licensed MIT.
+ */
+
+(function( factory ) {
+	"use strict";
+	if ( typeof define === "function" && define.amd ) {
+		// AMD. Register as an anonymous module.
+		define([ "jquery" ], factory );
+	} else {
+		// Browser globals
+		factory( jQuery );
+	}
+}(function( $ ) {
+	"use strict";
+	var supportSelectstart = "onselectstart" in document.createElement("div"),
+		match, uiVersion;
+
+	$.widget("moogle.contextmenu", {
+		version: "@VERSION",
+		options: {
+			autoTrigger: true,    // open menu on browser's `contextmenu` event
+			delegate: null,       // selector
+			hide: { effect: "fadeOut", duration: "fast"},
+			ignoreParentSelect: true, // Don't trigger 'select' for sub-menu parents
+			menu: null,           // selector or jQuery pointing to <UL>, or a definition hash
+			position: null,       // popup positon
+			preventContextMenuForPopup: false, // prevent opening the browser's system context menu on menu entries
+			preventSelect: false, // disable text selection of target
+			show: { effect: "slideDown", duration: "fast"},
+			taphold: false,       // open menu on taphold events (requires external plugins)
+			uiMenuOptions: {},	  // Additional options, used when UI Menu is created
+			// Events:
+			beforeOpen: $.noop,   // menu about to open; return `false` to prevent opening
+			blur: $.noop,         // menu option lost focus
+			close: $.noop,        // menu was closed
+			create: $.noop,       // menu was initialized
+			createMenu: $.noop,   // menu was initialized (original UI Menu)
+			focus: $.noop,        // menu option got focus
+			open: $.noop,         // menu was opened
+			select: $.noop        // menu option was selected; return `false` to prevent closing
+		},
+		/** Constructor */
+		_create: function () {
+			var cssText, eventNames, targetId,
+				opts = this.options;
+
+			this.$headStyle = null;
+			this.$menu = null;
+			this.menuIsTemp = false;
+			this.currentTarget = null;
+
+			if(opts.preventSelect){
+				// Create a global style for all potential menu targets
+				// If the contextmenu was bound to `document`, we apply the
+				// selector relative to the <body> tag instead
+				targetId = ($(this.element).is(document) ? $("body") : this.element).uniqueId().attr("id");
+				cssText = "#" + targetId + " " + opts.delegate + " { " +
+						"-webkit-user-select: none; " +
+						"-khtml-user-select: none; " +
+						"-moz-user-select: none; " +
+						"-ms-user-select: none; " +
+						"user-select: none; " +
+						"}";
+				this.$headStyle = $("<style class='moogle-contextmenu-style' />")
+					.prop("type", "text/css")
+					.appendTo("head");
+
+				try {
+					this.$headStyle.html(cssText);
+				} catch( e ) {
+					// issue #47: fix for IE 6-8
+					this.$headStyle[0].styleSheet.cssText = cssText;
+				}
+
+				// TODO: the selectstart is not supported by FF?
+				if(supportSelectstart){
+					this.element.delegate(opts.delegate, "selectstart" + this.eventNamespace, function(event){
+						event.preventDefault();
+					});
+				}
+			}
+			this._createUiMenu(opts.menu);
+
+			eventNames = "contextmenu" + this.eventNamespace;
+			if(opts.taphold){
+				eventNames += " taphold" + this.eventNamespace;
+			}
+			this.element.delegate(opts.delegate, eventNames, $.proxy(this._openMenu, this));
+		},
+		/** Destructor, called on $().contextmenu("destroy"). */
+		_destroy: function(){
+			this.element.undelegate(this.eventNamespace);
+
+			this._createUiMenu(null);
+
+			if(this.$headStyle){
+				this.$headStyle.remove();
+				this.$headStyle = null;
+			}
+		},
+		/** (Re)Create jQuery UI Menu. */
+		_createUiMenu: function(menuDef){
+			var ct;
+			// Remove temporary <ul> if any
+			if(this.isOpen()){
+				ct = this.currentTarget; // #58: 'replaceMenu' in beforeOpen causing select: to lose ui.target
+				// close without animation, to force async mode
+				this._closeMenu(true);
+				this.currentTarget = ct;
+			}
+
+			if(this.menuIsTemp){
+				this.$menu.remove(); // this will also destroy ui.menu
+			} else if(this.$menu){
+				this.$menu.menu("destroy").hide();
+			}
+			this.$menu = null;
+			this.menuIsTemp = false;
+			// If a menu definition array was passed, create a hidden <ul>
+			// and generate the structure now
+			if( ! menuDef ){
+				return;
+			} else if($.isArray(menuDef)){
+				this.$menu = $.moogle.contextmenu.createMenuMarkup(menuDef);
+				this.menuIsTemp = true;
+			}else if ( typeof menuDef === "string" ){
+				this.$menu = $(menuDef);
+			}else{
+				this.$menu = menuDef;
+			}
+			// Create - but hide - the jQuery UI Menu widget
+			this.$menu
+				.hide()
+//				.addClass("moogle-contextmenu")
+				// Create a menu instance that delegates events to our widget
+				.menu($.extend(true, {}, this.options.uiMenuOptions, {
+					blur: $.proxy(this.options.blur, this),
+					create: $.proxy(this.options.createMenu, this),
+					focus: $.proxy(this.options.focus, this),
+					select: $.proxy(function(event, ui){
+						// User selected a menu entry
+						var retval,
+							isParent = $.moogle.contextmenu.isMenu(ui.item),
+							actionHandler = ui.item.data("actionHandler");
+						ui.cmd = ui.item.attr("data-command");
+						ui.target = $(this.currentTarget);
+						// ignore clicks, if they only open a sub-menu
+						if( !isParent || !this.options.ignoreParentSelect){
+							retval = this._trigger.call(this, "select", event, ui);
+							if( actionHandler ){
+								retval = actionHandler.call(this, event, ui);
+							}
+							if( retval !== false ){
+								this._closeMenu.call(this);
+							}
+							event.preventDefault();
+						}
+					}, this)
+				}));
+		},
+		/** Open popup (called on 'contextmenu' event). */
+		_openMenu: function(event){
+			var opts = this.options,
+				posOption = opts.position,
+				self = this,
+				manualTrigger = !!event.isTrigger,
+				ui = {menu: this.$menu, target: $(event.target), extraData: event.extraData, originalEvent: event};
+
+			if( !opts.autoTrigger && !manualTrigger ) {
+				// ignore browser's `contextmenu` events
+				return;
+			}
+			this.currentTarget = event.target;
+
+			// Prevent browser from opening the system context menu
+			event.preventDefault();
+
+			if( this._trigger("beforeOpen", event, ui) === false ){
+				this.currentTarget = null;
+				return false;
+			}
+			ui.menu = this.$menu; // Might have changed in beforeOpen
+			// Register global event handlers that close the dropdown-menu
+			$(document).bind("keydown" + this.eventNamespace, function(event){
+				if( event.which === $.ui.keyCode.ESCAPE ){
+					self._closeMenu();
+				}
+			}).bind("mousedown" + this.eventNamespace + " touchstart" + this.eventNamespace, function(event){
+				// Close menu when clicked outside menu
+				if( !$(event.target).closest(".ui-menu-item").length ){
+					self._closeMenu();
+				}
+			});
+
+			// required for custom positioning (issue #18 and #13).
+			if ($.isFunction(posOption)) {
+				posOption = posOption(event, ui);
+			}
+			posOption = $.extend({
+				my: "left top",
+				at: "left bottom",
+				// if called by 'open' method, event does not have pageX/Y
+				of: (event.pageX === undefined) ? event.target : event,
+				collision: "fit"
+			}, posOption);
+
+			// Finally display the popup
+			this.$menu
+				.show() // required to fix positioning error
+				.css({
+					position: "absolute",
+					left: 0,
+					top: 0
+				}).position(posOption)
+				.hide(); // hide again, so we can apply nice effects
+
+			if( opts.preventContextMenuForPopup ) {
+				this.$menu.bind("contextmenu" + this.eventNamespace, function(event){
+					event.preventDefault();
+				});
+			}
+			this._show(this.$menu, this.options.show, function(){
+				self._trigger.call(self, "open", event, ui);
+			});
+		},
+		/** Close popup. */
+		_closeMenu: function(immediately){
+			var self = this,
+				hideOpts = immediately ? false : this.options.hide;
+
+			// Note: we don't want to unbind the 'contextmenu' event
+			$(document)
+				.unbind("mousedown" + this.eventNamespace)
+				.unbind("touchstart" + this.eventNamespace)
+				.unbind("keydown" + this.eventNamespace);
+			this.$menu
+				.unbind("contextmenu" + this.eventNamespace);
+			self.currentTarget = null; // issue #44 after hide animation is too late
+
+			this._hide(this.$menu, hideOpts, function() {
+				self._trigger("close");
+			});
+		},
+		/** Handle $().contextmenu("option", key, value) calls. */
+		_setOption: function(key, value){
+			switch(key){
+			case "menu":
+				this.replaceMenu(value);
+				break;
+			}
+			$.Widget.prototype._setOption.apply(this, arguments);
+		},
+		/** Return ui-menu entry (<LI> tag). */
+		_getMenuEntry: function(cmd){
+			return this.$menu.find("li[data-command=" + cmd + "]");
+		},
+		/** Close context menu. */
+		close: function(){
+			if(this.isOpen()){
+				this._closeMenu();
+			}
+		},
+		/** Enable or disable the menu command. */
+		enableEntry: function(cmd, flag){
+			this._getMenuEntry(cmd).toggleClass("ui-state-disabled", (flag === false));
+		},
+		/** Return Menu element (UL). */
+		getMenu: function(){
+			return this.$menu;
+		},
+		/** Return true if menu is open. */
+		isOpen: function(){
+//            return this.$menu && this.$menu.is(":visible");
+			return !!this.$menu && !!this.currentTarget;
+		},
+		/** Open context menu on a specific target (must match options.delegate)
+		 *  Optional `extraData` is passed to event handlers as `ui.extraData`.
+		 */
+		open: function(target, extraData){
+			// Fake a 'contextmenu' event
+			extraData = extraData || {};
+			var e = jQuery.Event("contextmenu", {target: target.get(0), extraData: extraData});
+			return this.element.trigger(e);
+		},
+		/** Replace the menu altogether. */
+		replaceMenu: function(data){
+			this._createUiMenu(data);
+		},
+		/** Redefine menu entry (title or all of it). */
+		setEntry: function(cmd, titleOrData){
+			var $entry = this._getMenuEntry(cmd);
+
+			if(typeof titleOrData === "string"){
+				$.moogle.contextmenu.updateTitle($entry, titleOrData);
+			}else{
+				$entry.empty();
+				titleOrData.cmd = titleOrData.cmd || cmd;
+				$.moogle.contextmenu.createEntryMarkup(titleOrData, $entry);
+			}
+		},
+		/** Show or hide the menu command. */
+		showEntry: function(cmd, flag){
+			this._getMenuEntry(cmd).toggle(flag !== false);
+		}
+	});
+
+	/*
+	 * Global functions
+	 */
+	$.extend($.moogle.contextmenu, {
+		/** Convert a nested array of command objects into a <ul> structure. */
+		createMenuMarkup: function(options, $parentUl){
+			var i, menu, $ul, $li;
+			if( $parentUl == null ){
+				$parentUl = $("<ul class='ui-helper-hidden' />").appendTo("body");
+			}
+			for(i = 0; i < options.length; i++){
+				menu = options[i];
+				$li = $("<li/>").appendTo($parentUl);
+
+				$.moogle.contextmenu.createEntryMarkup(menu, $li);
+
+				if( $.isArray(menu.children) ){
+					$ul = $("<ul/>").appendTo($li);
+					$.moogle.contextmenu.createMenuMarkup(menu.children, $ul);
+				}
+			}
+			return $parentUl;
+		},
+		/** Replaces the value of elem's first text node child*/
+		replaceFirstTextNodeChild: function(elem, text) {
+			elem
+				.contents()
+				.filter(function(){ return this.nodeType === 3; })
+				.first()
+				.replaceWith(text);
+		}
+	});
+
+	match = $.ui.menu.version.match(/^(\d)\.(\d+)/);
+
+	uiVersion = {
+		major: parseInt(match[1], 10),
+		minor: parseInt(match[2], 10)
+	};
+
+	if ( uiVersion.major < 2 && uiVersion.minor < 11 ) {
+		$.extend($.moogle.contextmenu, {
+			/** Convert a menu description into a into a <li> content. */
+			createEntryMarkup: function(entry, $parentLi){
+				var $a = null;
+
+				// if(entry.title.match(/^---/)){
+				if( !/[^\-\u2014\u2013\s]/.test( entry.title ) ){
+					// hyphen, em dash, en dash: separator as defined by UI Menu 1.10
+					$parentLi.text(entry.title);
+				}else{
+					$parentLi.attr("data-command", entry.cmd);
+					$a = $("<a/>", {
+						html: "" + entry.title, // allow to pass HTML markup
+						href: "#"
+					}).appendTo($parentLi);
+					if( $.isFunction(entry.action) ){
+						$parentLi.data("actionHandler", entry.action);
+					}
+					if(entry.uiIcon){
+						$a.append($("<span class='ui-icon' />").addClass(entry.uiIcon));
+					}
+					if(entry.disabled){
+						$parentLi.addClass("ui-state-disabled");
+					}
+					if($.isPlainObject(entry.data)){
+						$a.data(entry.data);
+					}
+				}
+			},
+			/** Returns true if the menu item has child menu items */
+			isMenu: function(item) {
+				return item.has(">a[aria-haspopup='true']").length > 0;
+			},
+			/** Updates the menu item's title */
+			updateTitle: function(item, title) {
+				$.moogle.contextmenu.replaceFirstTextNodeChild($("a", item), title);
+			}
+		});
+	} else {
+		$.extend($.moogle.contextmenu, {
+			/** Convert a menu description into a into a <li> content. */
+			createEntryMarkup: function(entry, $parentLi){
+				if( !/[^\-\u2014\u2013\s]/.test( entry.title ) ){
+					$parentLi.text(entry.title);
+				} else {
+					$parentLi
+						.attr("data-command", entry.cmd)
+						.html("" + entry.title);
+					if( $.isFunction(entry.action) ) {
+						$parentLi.data("actionHandler", entry.action);
+					}
+					if( entry.uiIcon ) {
+						$parentLi
+							.append($("<span class='ui-icon' />")
+							.addClass(entry.uiIcon));
+					}
+					if( entry.disabled ) {
+						$parentLi.addClass("ui-state-disabled");
+					}
+					if( $.isPlainObject(entry.data) ) {
+						$parentLi.data(entry.data);
+					}
+				}
+			},
+			/** Returns true if the menu item has child menu items */
+			isMenu: function(item) {
+				return item.is("[aria-haspopup='true']");
+			},
+			/** Updates the menu item's title */
+			updateTitle: function(item, title) {
+				$.moogle.contextmenu.replaceFirstTextNodeChild(item, title);
+			}
+		});
+	}
+
+}));
--- a/shlr/www/p/lib/js/main.js
+++ b/shlr/www/p/lib/js/main.js
@ -0,0 +1,545 @@
+var myLayout;
+
+$(document).ready( function() {
+  // create tabs FIRST so elems are correct size BEFORE Layout measures them
+  $("#main_panel").tabs({
+    activate: function( event, ui ) {
+      r2ui.seek("$$", false);
+      scroll_to_element(r2ui._dis.selected);
+      document.getElementById("canvas").focus();
+    }
+  });
+
+	// Layout
+	myLayout = $('body').layout({
+		west__size:			200,
+		east__size:			200,
+    south__size:    200,
+    north__resizable: false,
+		west__onresize:		$.layout.callbacks.resizePaneAccordions,
+		east__onresize:		$.layout.callbacks.resizePaneAccordions
+	});
+  myLayout.disableClosable("north", true);
+	$("#accordion1").accordion({ heightStyle:  "fill" });
+	$("#accordion2").accordion({ heightStyle:  "fill" });
+
+  // Boot r2 analysis, settings, ....
+	r2.update_flags();
+	r2.analAll();
+	r2.load_mmap();
+	r2ui.load_colors();
+	r2.load_settings();
+  update_binary_details();
+
+  // Create panels
+	var disasm_panel = new DisasmPanel();
+	var hex_panel = new HexPanel();
+	r2ui._dis = disasm_panel;
+	r2ui._hex = hex_panel;
+
+  // For enyo compatibility
+	r2ui.ra = {};
+  r2ui.mp = {};
+	r2ui.ra.getIndex = function() {};
+	r2ui.ra.setIndex = function() {};
+	r2ui.mp.openPage = function() {};
+
+  var console_history = [];
+  var console_history_idx = 0;
+
+  // Handle commands in console
+  $("#command").keypress(function( inEvent ) {
+    var key = inEvent.keyCode || inEvent.charCode || inEvent.which || 0;
+    if (key === 13) {
+      var cmd = inEvent.target.value.trim();
+      console_history[console_history.length] = cmd;
+      console_history_idx += 1;
+      r2.cmd(cmd, function(x) {
+        var old_value = $("#cmd_output").text();
+        $("#cmd_output").html(old_value + "\n> " + cmd + "\n" + x );
+        $('#cmd_output').scrollTo($('#cmd_output')[0].scrollHeight);
+
+      });
+      if (cmd.indexOf("s ") === 0) {
+        r2ui.history_push(r2ui._dis.selected_offset);
+      }
+      r2.load_settings();
+      r2ui.load_colors();
+      update_binary_details();
+      inEvent.target.value = "";
+      r2ui.seek("$$", false);
+      scroll_to_element(r2ui._dis.selected);
+    }
+  });
+  $("#command").keydown(function( inEvent ) {
+    var key = inEvent.keyCode || inEvent.charCode || inEvent.which || 0;
+    if (key === 40) {
+      console_history_idx++;
+      if (console_history_idx > console_history.length - 1) console_history_idx = console_history.length;
+      inEvent.target.value = console_history[console_history_idx] === undefined ? "" : console_history[console_history_idx];
+    }
+    if (key === 38) {
+      console_history_idx--;
+      if (console_history_idx < 0) console_history_idx = 0;
+      inEvent.target.value = console_history[console_history_idx] === undefined ? "" : console_history[console_history_idx];
+    }
+  });
+
+  // Context menu for addresses:
+  $(document).contextmenu({
+      delegate: ".addr",
+      menu: [
+          {title: "jump to address<kbd>g</kbd>", cmd: "goto"},
+          {title: "rename<kbd>n</kbd>", cmd: "rename"},
+          {title: "add comment<kbd>;</kbd>", cmd: "comment"},
+          {title: "code<kbd>c</kbd>", cmd: "define"},
+          {title: "undefine<kbd>u</kbd>", cmd: "undefine"}
+      ],
+      preventSelect: true,
+      preventContextMenuForPopup: true,
+      show: false,
+      position: function(event, ui){
+        return {my: "left+100 top-10", at: "left bottom", of: ui.target};
+      },
+      beforeOpen: function(event, ui) {
+        var target = ui.target[0];
+        if (target.className.indexOf("insaddr") !== 0) {
+          $(document).contextmenu("showEntry", "define", false);
+          $(document).contextmenu("showEntry", "undefine", false);
+        }
+      },
+      select: function(event, ui) {
+        $(document).contextmenu("close");
+        var target = ui.target[0];
+        var address = get_address_from_class(target);
+        if (ui.cmd  == "goto") do_goto();
+        if (ui.cmd  == "comment") do_comment(target);
+        if (ui.cmd  == "rename") do_rename(target, event);
+        if (ui.cmd  == "define") do_define(target);
+        if (ui.cmd  == "undefine") do_undefine(target);
+      }
+  });
+
+  // Install keyboard and mosuse handlers
+  $("#main_panel").keypress(handleKeypress);
+  $("#main_panel").click(handleClick);
+  $(document).dblclick(handleDoubleClick);
+
+  // Show disasm panel and seek to entrypoint
+	disasm_panel.display_flat();
+	r2ui.seek(disasm_panel.base,true);
+	scroll_to_element(r2ui._dis.selected);
+  document.getElementById("canvas").focus();
+
+});
+
+function scroll_to_element(element) {
+  var top = Math.max(0,element.documentOffsetTop() - ( window.innerHeight / 2 ));
+  $('#center_panel').scrollTo(top, {axis: 'y'});
+}
+
+function scroll_to_address(address) {
+  var elements = document.getElementsByClassName("insaddr addr_" + address);
+  if (elements.length == 1) {
+    var top = elements[0].documentOffsetTop() - ( window.innerHeight / 2 );
+    top = Math.max(0,top);
+    $('#center_panel').scrollTo(top, {axis: 'y'});
+  }
+}
+
+function rehighlight_iaddress(address) {
+  $('.autohighlighti').removeClass('autohighlighti');
+  $('.addr_' + address).addClass('autohighlighti');
+}
+
+function getOffsetRect(elem) {
+    var box = elem.getBoundingClientRect();
+    var offset = $('#gbox').offset().top;
+    var top  = box.top - offset;
+    var bottom  = box.bottom - offset;
+    return {top: Math.round(top), bottom: Math.round(bottom)};
+}
+
+// key handler
+function handleKeypress(inEvent) {
+	var key = inEvent.keyCode || inEvent.charCode || inEvent.which || 0;
+
+  // console.log(key);
+
+	// show help
+	if (key === 63) {
+	  // r2ui.mp.showPopup();
+	}
+  if (r2ui._dis.renaming !== null) return;
+
+	// Spacebar Switch flat and graph views
+	if (key === 32) {
+    var address = get_address_from_class(r2ui._dis.selected);
+    if (address !== undefined && address !== null) {
+      if (r2ui._dis.display === "flat") r2ui._dis.display_graph();
+      else if (r2ui._dis.display === "graph") r2ui._dis.display_flat();
+      r2ui.seek(address, true);
+      scroll_to_address(address);
+      inEvent.preventDefault();
+      document.getElementById("canvas").focus();
+    }
+	}
+	// h Seek to previous address in history
+	if (key === 104) do_jumpto(r2ui.history_prev());
+
+	// l Seek to next address in history
+	if (key === 108) do_jumpto(r2ui.history_next());
+
+	// j Seek to next Instruction
+	if (key === 106) {
+    var get_more_instructions = false;
+    if ($(r2ui._dis.selected).hasClass("insaddr")) {
+      var next_instruction;
+      if (r2ui._dis.display == "flat") {
+        next_instruction = $(r2ui._dis.selected).closest(".instructionbox").next().find('.insaddr')[0];
+        if ($("#gbox .instructionbox").index( $(r2ui._dis.selected).closest(".instructionbox")[0]) > $("#gbox .instructionbox").length - 10) get_more_instructions = true;
+      }
+      if (r2ui._dis.display == "graph") {
+        var next_instruction = $(r2ui._dis.selected).closest(".instruction").next().find('.insaddr')[0];
+        if (next_instruction === undefined || next_instruction === null) {
+          next_instruction = $(r2ui._dis.selected).closest(".basicblock").next().find('.insaddr')[0];
+        }
+      }
+
+      // if (next_instruction === null || next_instruction === undefined) return;
+      var address = get_address_from_class(next_instruction);
+      if (get_more_instructions) {
+        r2ui.seek(address, false);
+      } else {
+        r2ui.history_push(address);
+        render_history();
+        r2ui._dis.selected = next_instruction;
+        r2ui._dis.selected_offset = address;
+      }
+      rehighlight_iaddress(address);
+      scroll_to_address(address);
+      document.getElementById("canvas").focus();
+    }
+	}
+	// k Seek to previous instruction
+	if (key === 107) {
+    var get_more_instructions = false;
+    if ($(r2ui._dis.selected).hasClass("insaddr")) {
+      var prev_instruction;
+      if (r2ui._dis.display == "flat") {
+        prev_instruction = $(r2ui._dis.selected).closest(".instructionbox").prev().find('.insaddr')[0];
+        if ($("#gbox .instructionbox").index( $(r2ui._dis.selected).closest(".instructionbox")[0]) < 10) get_more_instructions = true;
+      }
+      if (r2ui._dis.display == "graph") {
+        var prev_instruction = $(r2ui._dis.selected).closest(".instruction").prev().find('.insaddr')[0];
+        if (prev_instruction === undefined || prev_instruction === null) {
+          prev_instruction = $(r2ui._dis.selected).closest(".basicblock").prev().find('.insaddr').last()[0];
+        }
+      }
+      var address = get_address_from_class(prev_instruction);
+      if (get_more_instructions) {
+        r2ui.seek(address, false);
+      } else {
+        r2ui.history_push(address);
+        render_history();
+        r2ui._dis.selected = prev_instruction;
+        r2ui._dis.selected_offset = address;
+      }
+      rehighlight_iaddress(address);
+      scroll_to_address(address);
+      document.getElementById("canvas").focus();
+    }
+	}
+	// c Define function
+	if (key === 99) do_define(r2ui._dis.selected);
+
+	// u Clear function metadata
+	if (key === 117) do_undefine(r2ui._dis.selected);
+
+	// g Go to address
+	if (key === 103) do_goto();
+
+	// ; Add comment
+	if (key === 59) do_comment(r2ui._dis.selected);
+
+	// n Rename
+	if (key === 110) do_rename(r2ui._dis.selected, inEvent);
+
+	// esc
+	if (key === 27) {
+	  // Esc belongs to renaming
+	  if(r2ui._dis.renaming !== null) {
+	    r2ui._dis.renaming.innerHTML = r2ui._dis.renameOldValue;
+	    r2ui._dis.renaming = null;
+	  } else {
+	    // go back in history
+	    var addr = r2ui.history_prev();
+	    if (addr !== undefined && addr !== null) r2ui.seek(addr, false);
+	    scroll_to_address(addr);
+	  }
+    document.getElementById("canvas").focus();
+	}
+	// enter
+	if (key === 13) {
+	  // Enter go to address
+	  r2ui._dis.goToAddress();
+    document.getElementById("canvas").focus();
+	}
+}
+
+function do_jumpto(address) {
+
+  var element = $('.insaddr.addr_' + address);
+  if (element.length > 0) {
+    r2ui.history_push(address);
+    render_history();
+    r2ui._dis.selected = element;
+    r2ui._dis.selected_offset = address;
+  } else {
+    r2ui.seek(address, true);
+  }
+  rehighlight_iaddress(address);
+  scroll_to_address(address);
+  document.getElementById("canvas").focus();
+}
+
+function do_goto() {
+  r2ui.opendis(prompt('Go to'));
+  scroll_to_element(r2ui._dis.selected);
+  document.getElementById("canvas").focus();
+}
+
+function do_rename(element, inEvent) {
+  if (r2ui._dis.renaming === null && element !== null && (element.className.indexOf(" addr ") ) -1) {
+    var address = get_address_from_class(element);
+    r2ui._dis.selected = element;
+    r2ui._dis.selected_offset = address;
+    r2ui._dis.renaming = element;
+    r2ui._dis.renameOldValue = element.innerHTML;
+    r2ui._dis.rbox = document.createElement('input');
+    r2ui._dis.rbox.setAttribute("type", "text");
+    r2ui._dis.rbox.setAttribute("id", "rename");
+    r2ui._dis.rbox.setAttribute("style", "border-width: 0;padding: 0;");
+    r2ui._dis.rbox.setAttribute("onChange", "handleInputTextChange()");
+    r2ui._dis.rbox.setAttribute("value", "");
+    r2ui._dis.renaming.innerHTML = "";
+    r2ui._dis.renaming.appendChild(r2ui._dis.rbox);
+    setTimeout('r2ui._dis.rbox.focus();', 200);
+    inEvent.returnValue=false;
+    inEvent.preventDefault();
+    update_binary_details();
+  }
+}
+
+function do_comment(element) {
+  var address = get_address_from_class(element);
+  r2.cmd('CC ' + prompt('Comment')  + " @ " + address);
+  r2ui.seek(address, false);
+  scroll_to_address(address);
+  document.getElementById("canvas").focus();
+}
+
+function do_undefine(element) {
+  var address = get_address_from_class(element);
+  r2.cmd("af-");
+  r2.update_flags();
+  update_binary_details();
+  if (r2ui._dis.display == "graph") r2ui._dis.display_flat();
+  r2ui.seek(address, false);
+  scroll_to_address(address);
+  document.getElementById("canvas").focus();
+}
+
+function do_define(element) {
+  var address = get_address_from_class(element);
+  var msg = prompt ('Function name?');
+  r2.cmd("af " + msg + " @ " + address);
+  r2.update_flags();
+  update_binary_details();
+  r2ui.seek(address, false);
+  scroll_to_address(address);
+  document.getElementById("canvas").focus();
+}
+
+function handleClick(inEvent) {
+  if ($(inEvent.target).hasClass('addr')) {
+    var address = get_address_from_class(inEvent.target);
+    r2ui._dis.selected = inEvent.target;
+    r2ui._dis.selected_offset = address;
+    rehighlight_iaddress(address);
+    // If instruction address, add address to history
+    if ($(inEvent.target).hasClass('insaddr')) {
+      r2ui.history_push(address);
+      render_history();
+    }
+  }
+  document.getElementById("canvas").focus();
+}
+
+function handleDoubleClick (inEvent) {
+  if ($(inEvent.target).hasClass('addr') && !$(inEvent.target).hasClass('insaddr')) {
+    handleClick(inEvent);
+    r2ui._dis.goToAddress();
+    inEvent.preventDefault();
+  }
+  document.getElementById("canvas").focus();
+}
+
+
+// METHOD to UPDATE all LATERAL Information
+function update_binary_details() {
+
+  // <div id="symbols"></div>
+  r2.cmdj("isj", function(x) {
+    render_symbols(x);
+  });
+  // <div id="strings"></div>
+  r2.cmdj("izj", function(x) {
+    render_strings(x);
+  });
+  // <div id="functions"></div>
+  // <div id="imports"></div>
+  r2.cmdj("afj", function(x) {
+    render_functions(x);
+  });
+  // <div id="relocs"></div>
+  r2.cmdj("irj", function(x) {
+    render_relocs(x);
+  });
+  // <div id="flags"></div>
+  r2.cmdj("fs *;fj", function(x) {
+    render_flags(x);
+  });
+  // <div id="information"></div>
+  r2.cmd("i", function(x) {
+    $('#information').html("<pre>" + x + "</pre>");
+  });
+  // <div id="sections"></div>
+  r2.cmdj("iSj", function(x) {
+    render_sections(x);
+  });
+  render_history();
+}
+
+
+function render_functions(functions) {
+  var fcn_data = [];
+  var imp_data = [];
+  for (var i in functions) {
+    var f = functions[i];
+    if (f.type == "sym") {
+      var id = {
+        label: "<span class='function addr addr_" + "0x" + f.offset.toString(16) + "'>" + f.name + "</span>",
+        children: [ {label: "offset: " + "0x" + f.offset.toString(16)}, {label: "size: " + f.size} ] };
+      if (f.callrefs.length > 0) {
+        var xrefs = {label: "xrefs:", children: []};
+        for (var j in f.callrefs) {
+          xrefs.children[xrefs.children.length] = "0x" + f.callrefs[j].addr.toString(16) + " (" + (f.callrefs[j].type == "C"? "call":"jump") + ")";
+        }
+        id.children[fd.children.length] = xrefs;
+      }
+      imp_data[fcn_data.length] = id;
+    }
+    if (f.type == "fcn") {
+      var fd = {
+        label: "<span class='function addr addr_" + "0x" + f.offset.toString(16) + "'>" + f.name + "</span>",
+        children: [{label: "offset: " + "0x" + f.offset.toString(16)},  {label: "size: " + f.size} ] };
+      if (f.callrefs.length > 0) {
+        var xrefs = {label: "xrefs:", children: []};
+        for (var j in f.callrefs) {
+          xrefs.children[xrefs.children.length] = "<span class='xref addr addr_0x" + f.callrefs[j].addr.toString(16)  + "'>0x" + f.callrefs[j].addr.toString(16) + "</span> (" + (f.callrefs[j].type == "C"? "call":"jump") + ")";
+        }
+        fd.children[fd.children.length] = xrefs;
+      }
+      fcn_data[fcn_data.length] = fd;
+    }
+  }
+  $('#imports').tree({data: [],selectable: false,slide: false,useContextMenu: false, autoEscape: false});
+  $('#functions').tree({data: [],selectable: false,slide: false,useContextMenu: false, autoEscape: false});
+  $('#imports').tree('loadData', imp_data);
+  $('#functions').tree('loadData', fcn_data);
+}
+function render_symbols(symbols) {
+  var data = [];
+  for (var i in symbols) {
+    var s = symbols[i];
+    var sd = {
+      label: "<span class='symbol addr addr_" + "0x" + s.addr.toString(16) + "'>" + s.name + "</span>",
+      children: [ {label: "offset: " + "0x" + s.addr.toString(16)}, {label: "size: " + s.size} ] };
+    data[data.length] = sd;
+  }
+  $('#symbols').tree({data: data,selectable: false,slide: false,useContextMenu: false, autoEscape: false});
+}
+function render_relocs(relocs) {
+  var data = [];
+  for (var i in relocs) {
+    var r = relocs[i];
+    var rd = {
+      label: "<span class='reloc addr addr_" + "0x" + r.vaddr.toString(16) + "'>" + r.name + "</span>",
+      children: [ {label: "offset: " + "0x" + r.vaddr.toString(16)}, {label: "type: " + r.type} ] };
+    data[data.length] = rd;
+  }
+  $('#relocs').tree({data: [],selectable: false,slide: false,useContextMenu: false, autoEscape: false});
+  $('#relocs').tree('loadData', data);
+}
+function render_flags(flags) {
+  var data = [];
+  for (var i in flags) {
+    var f = flags[i];
+    var fd = {
+      label: "<span class='reloc addr addr_" + "0x" + f.offset.toString(16) + "'>" + f.name + "</span>",
+      children: [ {label: "offset: " + "0x" + f.offset.toString(16)}, {label: "size: " + f.size} ] };
+    data[data.length] = fd;
+  }
+  $('#flags').tree({data: [],selectable: false,slide: false,useContextMenu: false, autoEscape: false});
+  $('#flags').tree('loadData', data);
+}
+function render_strings(strings) {
+  var data = [];
+  for (var i in strings) {
+    var f = strings[i];
+    var fd = {
+      label: f.string,
+      children: [
+        {label: "vaddr: " + "0x" + f.vaddr.toString(16)},
+        {label: "paddr: " + "0x" + f.paddr.toString(16)},
+        {label: "length: " + f.length},
+        {label: "type: " + f.type}
+      ]
+    };
+    data[data.length] = fd;
+  }
+  $('#strings').tree({data: [],selectable: false,slide: false,useContextMenu: false});
+  $('#strings').tree('loadData', data);
+}
+function render_sections(sections) {
+  var data = [];
+  for (var i in sections) {
+    var f = sections[i];
+    var fd = {
+      label: "0x" + f.addr.toString(16) + ": " + f.name,
+      children: [
+        {label: "vaddr: " + "0x" + f.vaddr.toString(16)},
+        {label: "paddr: " + "0x" + f.paddr.toString(16)},
+        {label: "flags: " + f.flags},
+        {label: "size: " + f.size},
+        {label: "vsize: " + f.vsize}
+      ]
+    };
+    data[data.length] = fd;
+  }
+  $('#sections').tree({data: [],selectable: false,slide: false,useContextMenu: false});
+  $('#sections').tree('loadData', data);
+}
+function render_history(){
+  var html = "<div>";
+  for (var i in r2ui.history) {
+    if (i > r2ui.history_idx - 10 && i < r2ui.history_idx + 5) {
+      if (i == r2ui.history_idx - 1) html += "&gt;  <span class='history_idx'>" + r2ui.history[i] + "</span>";
+      else html += "&gt; " + r2ui.history[i];
+    }
+  }
+  html += "</div>";
+  $('#history').html(html);
+
+}
--- a/shlr/www/p/lib/js/spectrum.js
+++ b/shlr/www/p/lib/js/spectrum.js
--- a/shlr/www/p/lib/js/tree.jquery.js
+++ b/shlr/www/p/lib/js/tree.jquery.js
--- a/shlr/www/t/r2.js
+++ b/shlr/www/t/r2.js
@ -372,7 +372,7 @@ function _internal_cmd(c, cb) {
      return hascmd (c, cb);
    }
  } else {
-    Ajax ('GET', r2.root + "/cmd/" + encodeURI (c), '', function(x) {
+    Ajax ('GET', r2.root + "/cmd/" + encodeURI(c), '', function(x) {
      if (cb) {
        cb (x);
      }