diff --git a/README.md b/README.md
index a37f647..5a796ff 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,86 @@
 # RubikHelperUI
 PanelUI extension for RubikHelper page
+
+## Table of contents
+
+- [Overview](#overview)
+- [Scramble Panel](#scramble-panel)
+- [Solve Panel](#solve-panel)
+- [Explain Panel](#explain-panel)
+- [Highlight Panel](#highlight-panel)
+- [Setup Panel](#setup-panel)
+
+## Overview
+
+## Scramble Panel
+![Scramble Panel](images/ui/panel-scramble.png)
+
+- The user can use this tab to scramble the cube using the keyboard or the interface buttons
+- It's case insensitive, so typing `f` or `F` will get the same result.
+- The user can also use parenthesis for grouping moves and then close the group with `)'` to make it negative, `)i` to invert it or `)m` to mirror it (inverse rotation while swapping `L` with `R` and viceversa).
+    - eg:  
+`(FU'R)` = `FU'R`  
+`(FU'R)'` = `F'UR'`  
+`(FU'R)i` = `R'UF'`  
+`(FU'R)m` = `F'UL'`  
+`((FU'R)')m` = `FU'L`  
+`((FU'R)i)m` = `LU'F`  
+`(((FU'R)')i)m` = `L'UF'`
+- Also use parenthesis to execute N times that group (eg. `(M'U)4 (MU)4`).
+    - eg:  
+`(FU'R)2` = `FU'RFU'R`  
+`((FU'R)i)3` = `R'UF'R'UF'R'UF'`
+- Use square brackets to write down a piece and obtaining the setup pattern (or the full pattern for pieces that don't have the setup/unsetup, like `DRB`).
+- Every character written or every button pressed, the final "moves" sequence will be updated (expanding pieces Setup and other patterns) showing only simple rotations (for faces/slices/cube) with `+` for clockwise and `-` for counterclockwise rotations.
+- Click on **execute** button to see the cube scrambled with the given sequence.
+- Using the GUI the user can write the sequence using provided buttons.
+- To write a piece:
+    - click on **new** under "piece"
+    - click on face buttons (two or three of them) in order to name the piece
+    - note that each face button clicked disables all other face buttons that cannot be used, avoiding typo errors
+    - click on the resulting piece button when complete in order to add it to the sequence
+- To manage groups:
+    - click on **(** button under "group"
+    - compose the sequence
+    - close the group clicking on any `)` button (see 3rd point of this list)
+
+Note: to write a negative rotation (counterclockwise) use `i`, `'`, or `-` (eg. `F'` , `Fi` , `F-` are the same, just like `F` and `F+`).
+
+some examples:
+- scramble: `[dr] d'b (lu)' u2 (r'bu)4 [ulb]`
+- scramble: `( (R U [BR])m )i F [LB] (F' [BL])'`
+- `UF`: `(U2 M')2`
+- `FR`: `URU'`
+- `BR`: `([FR])i`
+- `RU`: `x' ([BR])'`  
+so, the full `RU` pattern is: `x' ([BR])' M2 (x' ([BR])')i`  
+or, more easily: `[RU] M2 ([RU])i`
+
+## Solve Panel
+![Solve Panel](images/ui/panel-solve.png)
+
+- Here the user can see the button **get pattern** which evaluate the scrambled cube and get the **M2R2 sequence** to solve it.
+- Click on the **execute** button in this tab to watch it solve the cube!
+- The **replay** feature currently allows the user to re-scramble the cube in order to execute the solve process once again.
+- This tab accepts only pieces or faces comma separated.
+    - eg. `RF,UR,LD,R-,B2,FUR,BLD`
+- For each piece written here, it expands its pattern as full (ie. including `Setup, M2/R2, Unsetup`)
+
+## Explain Panel
+![Explain Panel](images/ui/panel-explain.png)
+
+## Highlight Panel
+![Highlight Panel](images/ui/panel-highlight.png)
+
+This tab has teaching purposes only: it helps the user to identify pieces of the cube.
+
+## Setup Panel
+![Setup Panel](images/ui/panel-setup.png)
+
+- Here the user can click on **edit cube** to setup the cube like a real one, so the tool can help the user to solve his own cube.
+    - while "edit cube" is active, click on a cube's piece to show its position name and its current stickers
+    - click on face buttons under "faces" to compose the piece name (see 9th point of [Scramble Panel](#scramble-panel))
+    - note: only the same type of piece can be set (if edit an edge it will end editing after the second face clicked, for corners after the third)
+- Click on **show back faces** to hide `F`,`R`,`U` faces and see only `L`,`B`,`D` back-faces (from the inside).
+- Click on **get image** to save the current cube state as an image (use the browser's "save as.." command).
+- The user can also choose the color for each cube's face to match the real cube (it could have colors not compliant with the original Rubik).
diff --git a/bower.json b/bower.json
index 903a27c..f90e150 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "RubikHelperUI",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "homepage": "https://github.com/FabioDiMonte/RubikHelperUI",
   "authors": [
     "Fabio Di Monte <fdimonte@expedia.com>"
diff --git a/images/ui/panel-explain.png b/images/ui/panel-explain.png
new file mode 100644
index 0000000..c3297a8
Binary files /dev/null and b/images/ui/panel-explain.png differ
diff --git a/images/ui/panel-highlight.png b/images/ui/panel-highlight.png
new file mode 100644
index 0000000..9e9ad4e
Binary files /dev/null and b/images/ui/panel-highlight.png differ
diff --git a/images/ui/panel-scramble.png b/images/ui/panel-scramble.png
new file mode 100644
index 0000000..7e375fb
Binary files /dev/null and b/images/ui/panel-scramble.png differ
diff --git a/images/ui/panel-setup.png b/images/ui/panel-setup.png
new file mode 100644
index 0000000..747ffb4
Binary files /dev/null and b/images/ui/panel-setup.png differ
diff --git a/images/ui/panel-solve.png b/images/ui/panel-solve.png
new file mode 100644
index 0000000..e2a5b15
Binary files /dev/null and b/images/ui/panel-solve.png differ
diff --git a/images/ui/small/panel-explain.png b/images/ui/small/panel-explain.png
new file mode 100644
index 0000000..330737a
Binary files /dev/null and b/images/ui/small/panel-explain.png differ
diff --git a/images/ui/small/panel-highlight.png b/images/ui/small/panel-highlight.png
new file mode 100644
index 0000000..6a2f90f
Binary files /dev/null and b/images/ui/small/panel-highlight.png differ
diff --git a/images/ui/small/panel-scramble.png b/images/ui/small/panel-scramble.png
new file mode 100644
index 0000000..0885667
Binary files /dev/null and b/images/ui/small/panel-scramble.png differ
diff --git a/images/ui/small/panel-setup.png b/images/ui/small/panel-setup.png
new file mode 100644
index 0000000..d54efa6
Binary files /dev/null and b/images/ui/small/panel-setup.png differ
diff --git a/images/ui/small/panel-solve.png b/images/ui/small/panel-solve.png
new file mode 100644
index 0000000..b2d73cf
Binary files /dev/null and b/images/ui/small/panel-solve.png differ
diff --git a/package.json b/package.json
index 0be493c..c8af8ca 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "rubikhelperui",
   "title": "RubikHelperUI",
   "description": "PanelUI extension for RubikHelper page",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": {
     "name": "FabioDiMonte"
   },
diff --git a/public/0.1.1/rubikhelperui-0.1.1.min.js b/public/0.1.1/rubikhelperui-0.1.1.min.js
new file mode 100644
index 0000000..8c0c249
--- /dev/null
+++ b/public/0.1.1/rubikhelperui-0.1.1.min.js
@@ -0,0 +1,3 @@
+/*! RubikHelperUI Package - v0.1.1 - 2015-05-04 */
+var RubikHelperUI=function(a){var b=function(){var a=function(){function a(a,b){this.name=a,this.title=b||a,this.parent=null,this.mainUI=null,this.enabled=!0,this.elements=[],this.elementsMap={},this.listeners={},this.$el=this.getElement(),this.initEvents()}return a.prototype={getElement:function(){return null},initEvents:function(){},setValue:function(){},getValue:function(){},addTo:function(a){this.parent=a,this.mainUI=a.mainUI||a,this.updateChildrenHierarchy()},addChild:function(a){this.elements.push(a);var b;if(a.components)for(var c=0;c<a.components.length;c++)b=a.components[c],b.addTo(this),this.elementsMap[b.name]=b;else a.addTo(this),this.elementsMap[a.name]=a},updateChildrenHierarchy:function(){for(var a,b=this.components?this.components:this.elements,c=0;c<b.length;c++)a=b[c],a.mainUI=this.mainUI,a.updateChildrenHierarchy()},toDom:function(){for(var a=0;a<this.elements.length;a++)this.$el.append(this.elements[a].toDom());return this.$el},enable:function(){this.enabled=!0,this.$el.addClass("enabled"),this.$el.removeClass("disabled")},disable:function(){this.enabled=!1,this.$el.addClass("disabled"),this.$el.removeClass("enabled")},toggle:function(){this.enabled?this.disable():this.enable()},setEvent:function(a,b,c){"function"==typeof b?this.$el.on(a,b.bind(this)):"string"==typeof b&&this.$el.on(a,b,c.bind(this))},on:function(a,b){this.listeners[a]||(this.listeners[a]=[]),this.listeners[a].push(b)},off:function(a){this.listeners[a]=null},trigger:function(a,b){if(this.listeners[a]){this.mainUI&&this.mainUI.eventlog&&console.log("trigger: ",this.name,a,b);for(var c=0;c<this.listeners[a].length;c++)this.listeners[a][c](b,a)}}},a}(),b=function(a,b){function c(a,c,d){this.type=d,b.call(this,a,c)}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").attr("id","ic-"+this.name).addClass("ic-"+this.type).append(a("<p/>").text(this.title))},c}(jQuery,a),c=function(a){function b(b,c){a.call(this,b,c,"panel"),this.addComponents()}return b.prototype=Object.create(a.prototype),b.prototype.addComponents=function(){},b}(b),d=function(a){function b(b,c,d){a.call(this,b+"-"+c,d,"panel-component")}return b.prototype=Object.create(a.prototype),b}(b),e=function(a,b){function c(a){this.components=a,b.call(this,"group")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){for(var b=a("<div/>").addClass("block"),c=0;c<this.components.length;c++)b.append(this.components[c].toDom());return b},c}(jQuery,a),f=function(a){function b(){a.call(this,"navigation","navigation","navigation")}return b.prototype=Object.create(a.prototype),b.prototype.getElement=function(){return $("<nav/>").append("<ul/>")},b.prototype.initEvents=function(){this.setEvent("click","a",function(a){this.trigger("click",$(a.currentTarget).data("panel"))})},b.prototype.addTab=function(a,b){this.$el.find("ul").append($("<li/>").append($("<a/>").data("panel",a).text(b)))},b}(b),g=function(a,b){function c(b){if(this.ID=b,this.$el=a("#"+b),0==this.$el.length)throw new Error("main UI not initialized: probably given ID does not exists in dom");this.panels=[],this.panelsMap={},this.currentPanel=null,this.eventlog=!1,this.nav=null}return c.prototype={init:function(){this.initNavigation()},initNavigation:function(){this.nav=new b,this.nav.on("click",function(a){this.changePanel(a,200)}.bind(this)),this.addPanel(this.nav)},logEvents:function(a){this.eventlog=a},changePanel:function(b,c){var d="ic-"+b,e=a("#"+d),f=null==this.currentPanel||this.currentPanel.attr("id")!=d;f&&(this.currentPanel&&this.currentPanel.fadeOut(c),this.currentPanel=e,c?this.currentPanel.fadeIn(c):this.currentPanel.show())},addPanel:function(a,c){return c||(c=a.name),!(a instanceof b)&&this.nav&&this.nav.addTab(a.name,c),this.panels.push(a),this.panelsMap[a.name]=a,a.addTo(this),this.$el.append(a.toDom()),a}},c}(jQuery,f),h=function(a,b,c,d,e,f,g){var h={};return h.core={},h.core.PUIElement=a,h.core.PUIElementContainer=b,h.core.PUIMain=c,h.panels={},h.panels.PUINavigation=d,h.panels.PUIPanel=e,h.panels.PUIPanelComponent=f,h.panels.PUIPanelComponentGroup=g,h}(a,b,g,f,c,d,e);return h}(),c=function(a,b){function c(){b.call(this,"analyze")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-solve-analyze").append(a("<span/>").text("get pattern"))))},c.prototype.initEvents=function(){this.setEvent("click","#ic-solve-analyze",function(){this.trigger("get_pattern")})},c}(jQuery,b.core.PUIElement),d=function(a,b,c){function d(){this.colorsData=null,this.canvasWidth=220,this.canvasHeight=100,b.call(this,"cubecolors")}function e(a){var b=a.getContext("2d");b.rect(0,0,a.width,a.height);for(var d=a.width,e=a.height,f=0,g=d/6,h=g/2,i=0,j=h,k=d,l=e-h,m=["#FF0000","#FFFF00","#00FF00","#00FFFF","#0000FF","#FF00FF","#FF0000"],n=b.createLinearGradient(i,j+l,i+k,j+l),o=0;o<m.length;o++)n.addColorStop(Math.floor(100/6*o)/100,m[o]);var p=b.createLinearGradient(i+k,j,i+k,j+l/2);p.addColorStop(0,"rgba(255,255,255,0.9)"),p.addColorStop(1,"rgba(255,255,255,0)");var q=b.createLinearGradient(i+k,j+l/2,i+k,j+l);q.addColorStop(0,"rgba(0,0,0,0)"),q.addColorStop(1,"rgba(0,0,0,0.9)"),b.fillStyle=n,b.fill(),b.fillStyle=p,b.fill(),b.fillStyle=q,b.fill();for(var r=[c.colors.U,c.colors.D,c.colors.F,c.colors.B,c.colors.L,c.colors.R],s=0;s<r.length;s++)b.fillStyle=r[s],b.fillRect(g*s,f,g,f+h);b.strokeStyle="#222222",b.stroke()}return d.prototype=Object.create(b.prototype),d.prototype.getElement=function(){var b=document.createElement("canvas");b.width=this.canvasWidth,b.height=this.canvasHeight,e(b);var c=b.getContext("2d"),d=c.getImageData(0,0,b.width,b.height);return this.colorsData=d.data,a(b).attr("id","ColorPicker")},d.prototype.initEvents=function(){this.setEvent("click",function(b){var c=a(b.currentTarget).offset(),d={top:b.pageY,left:b.pageX},e={left:d.left-c.left,top:d.top-c.top},f=4*Math.round(e.top*this.canvasWidth+e.left),g=this.colorsData[f+0],h=this.colorsData[f+1],i=this.colorsData[f+2],j=("00"+g.toString(16)).substr(-2),k=("00"+h.toString(16)).substr(-2),l=("00"+i.toString(16)).substr(-2),m="#"+j+k+l;this.trigger("change_colors",m)})},d}(jQuery,b.core.PUIElement,a["static"].RubikUtils),e=function(a,b){function c(){b.call(this,"cubesetup")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<div/>").append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-cubesetup-reset").append(a("<span/>").text("reset cube")))).append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-cubesetup-getimage").append(a("<span/>").text("get image"))))).append(a("<div/>").append(a("<label/>").append(a("<input/>").attr("type","checkbox").attr("id","ic-cubesetup-editcube")).append(a("<span/>").text("edit cube"))).append(a("<label/>").append(a("<input/>").attr("type","checkbox").attr("id","ic-cubesetup-backfaces")).append(a("<span/>").text("show back faces"))))},c.prototype.initEvents=function(){this.setEvent("change","input",function(b){var c=a(b.currentTarget);c.attr("id").indexOf("backfaces")>-1?this.trigger("togglebackface",c.is(":checked")):c.attr("id").indexOf("editcube")>-1&&this.trigger("toggleeditcube",c.is(":checked"))}),this.setEvent("click","button",function(b){var c=a(b.currentTarget);c.attr("id").indexOf("getimage")>-1?this.trigger("getimage"):c.attr("id").indexOf("reset")>-1&&this.trigger("reset")})},c}(jQuery,b.core.PUIElement),f=function(a,b){function c(){b.call(this,"explain-list"),this.explainArray=null,this.currentGroup=0,this.currentPriority=-1}function d(){this.$el.empty(),this.currentGroup=this.$el}function e(b){var c=a("<p/>"),d=this.currentGroup,e=a("<div/>"),f=1==b.g,g=-1==b.g;f?(c=a("<strong/>"),d=e,this.currentGroup.append(e),this.currentGroup=e):g&&this.currentGroup!=this.$el&&(this.currentGroup=this.currentGroup.parent()),d.append(c.data("priority",b.p).addClass("p_"+b.p).text(b.m))}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>")},c.prototype.initEvents=function(){this.setEvent("click","strong",function(b){var c=a(b.currentTarget),d=c.parent();d.find(">div").toggle(),d.find(">p").toggle(),this.showCurrentPriority()})},c.prototype.setValue=function(a){this.explainArray=a,d.call(this);for(var b=0;b<a.length;b++)e.call(this,a[b]);this.collapseAll(),this.showCurrentPriority()},c.prototype.getValue=function(){return this.explainArray},c.prototype.setPriority=function(a){this.currentPriority=Number(a)},c.prototype.showCurrentPriority=function(){var b=this.currentPriority;b>=0?this.$el.find("div").addClass("showall"):this.$el.find("div").removeClass("showall"),this.$el.find("strong,p").each(function(){-1==b||b>=a(this).data("priority")?a(this).data("hidden",!1).removeClass("hidden"):a(this).data("hidden",!0).addClass("hidden")})},c.prototype.collapseAll=function(){this.$el.find("div div, div p").hide()},c.prototype.expandAll=function(){this.$el.find("div, p:not(.hidden)").show()},c}(jQuery,b.core.PUIElement),g=function(a,b){function c(){b.call(this,"explain-priority")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<span/>").append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(-1).prop("checked",!0)).append(a("<span/>").text("all"))).append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(0)).append(a("<span/>").text("0"))).append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(1)).append(a("<span/>").text("1"))).append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(2)).append(a("<span/>").text("2")))},c.prototype.initEvents=function(){this.setEvent("change","input",function(b){this.trigger("change_priority",a(b.currentTarget).val())})},c.prototype.setValue=function(a){var b=this.$el.find("input[name=priority][value="+a+"]");b.length>0&&b.prop("checked",!0)},c.prototype.getValue=function(){return this.$el.find("input:checked").val()},c}(jQuery,b.core.PUIElement),h=function(a,b){function c(a,c){this.faces=c,b.call(this,a)}function d(b){var c=this.$el.find(".ic-ui-face");return b&&(c=c.filter(function(c,d){return b.indexOf(a(d).data("face"))>-1})),c}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){for(var b=a("<ul/>"),c=0;c<this.faces.length;c++)b.append(this.faceButton(this.faces[c],this.name,"<li/>"));return b},c.prototype.initEvents=function(){this.setEvent("click",".ic-ui-face",function(b){var c=a(b.currentTarget);if(!c.hasClass("disabled")){var d=c.data("face");this.trigger("click",d)}})},c.prototype.disableFaces=function(a){var b=d.call(this,a);b.addClass("disabled")},c.prototype.enableFaces=function(a){var b=d.call(this,a);b.removeClass("disabled")},c.prototype.faceButton=function(b,c,d){return c||(c="face"),a(d).data("face",b).addClass("ic-ui-face").addClass("ic-ui-"+c+"-"+b)},c}(jQuery,b.core.PUIElement),i=function(a,b){function c(){b.call(this,"groupbuttons"),this.group=0}function d(b,c,d){return c||(c=b),a("<label/>").append(a("<button/>").attr("type","button").attr("data-action",b)).addClass(d?"disabled":"").append(a("<span/>").text(c))}function e(){return this.group++,g.call(this),!0}function f(){return 0==this.group?!1:(0==--this.group&&h.call(this),!0)}function g(){this.$el.find(".disabled").removeClass("disabled")}function h(){this.$el.find("button").filter(":not([data-action=open])").addClass("disabled")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<span/>").append(d("open")).append(d("close",null,!0)).append(d("negative",null,!0)).append(d("inverse",null,!0)).append(d("mirror",null,!0))},c.prototype.initEvents=function(){this.setEvent("click","button",function(b){var c=a(b.currentTarget),d=c.data("action");switch(d){case"open":e.call(this)&&this.trigger("click","(");break;case"close":f.call(this)&&this.trigger("click",") ");break;case"negative":f.call(this)&&this.trigger("click",")' ");break;case"inverse":f.call(this)&&this.trigger("click",")i ");break;case"mirror":f.call(this)&&this.trigger("click",")m ")}})},c.prototype.updateGroupStatus=function(a){var b,c,d=0,e=a.replace(/[^/(|/)]/g,"");for(b=0;b<e.length;b++)c=e.charAt(b),"("==c&&d++,")"==c&&d--;d>0?g.call(this):h.call(this)},c}(jQuery,b.core.PUIElement),j=function(a,b,c,d){function e(a,c){this.avoidInteraction=c,b.call(this,a||"piece"),this.setValue(a),this.faces=null,this.axis=null}return e.prototype=Object.create(b.prototype),e.prototype.getElement=function(){return a("<ul/>").addClass("ic-ui-piece").data("piece",this.name)},e.prototype.initEvents=function(){this.avoidInteraction||this.setEvent("click",function(){if(!this.enabled)return!1;if(this.faces){var a=this.faces.join("");a.length>=2&&(a="["+a+"]"),this.reset(),this.trigger("editend",a)}else this.faces=[],this.trigger("editbegin","");return!0})},e.prototype.setValue=function(a){if(a){this.reset();for(var b=0;b<a.length;b++)this.addFace(a.charAt(b))}},e.prototype.getValue=function(){return this.$el.data("piece")},e.prototype.addFace=function(a,b){this.$el.append(c.prototype.faceButton(a,"face","<li/>")),(this.faces||b)&&(this.faces||(this.faces=[]),this.faces.push(a),this.$el.data("piece",this.faces.join("")),this.trigger("wontaccept",d.service.notAcceptedWithPiece(this.faces)))},e.prototype.reset=function(){this.faces=null,this.$el.empty()},e}(jQuery,b.core.PUIElement,h,a["static"].RubikUtils),k=function(a,b){function c(){b.call(this,"highlights-list")}function d(b,c,d,e){return a("<li/>").append(a("<label/>").text(c).prepend(a("<input/>").addClass("ic-hl-"+b).attr("type","radio").attr("name","hl-choice").attr("value",d).prop("checked",e)))}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").append(a("<input/>").attr("type","checkbox").attr("id","ic-highlight-colors")).append(a("<span/>").text("show colors"))).append(a("<ul/>").append(d("render","none","none",!0)).append(d("highlight","face U",["ULB","UB","UBR","UL","U","UR","UFL","UF","URF"])).append(d("highlight","face F",["FLU","FU","FUR","FL","F","FR","FDL","FD","FRD"])).append(d("highlight","face R",["RFU","RU","RUB","RF","R","RB","RDF","RD","RBD"])).append(d("highlight","face D",["DLF","DF","DFR","DL","D","DR","DBL","DB","DRB"])).append(d("highlight","face B",["BRU","BU","BUL","BR","B","BL","BDR","BD","BLD"])).append(d("highlight","face L",["LBU","LU","LUF","LB","L","LF","LDB","LD","LFD"])).append(d("highlight","slice M",["F","U","B","D","UF","UB","DB","DF"])).append(d("highlight","slice E",["F","R","B","L","FL","FR","BL","BR"])).append(d("highlight","slice S",["U","R","D","L","UL","UR","DR","DL"])).append(d("highlight","parity",["DF","DFR","UB","UBR"])).append(d("highlight","J-perm",["ULB","UL","UFL","UF"])).append(d("highlight","N-perm",["URF,UR,ULB,UL"])).append(d("highlight","orient 2 edges",["UF","UB"])).append(d("highlight","orient 4 edges",["UF","UB","UL","UR"])).append(d("highlight","orient corner",["UFL"])).append(d("highlight","custom","custom")))},c.prototype.initEvents=function(){this.setEvent("change","#ic-highlight-colors",function(b){this.trigger("showcolors",a(b.currentTarget).prop("checked"))}),this.setEvent("change","input[type=radio]",function(b){this.trigger("changelist",a(b.currentTarget).val())})},c.prototype.setValue=function(b){var c=this.$el.find("label").filter(function(c,d){return a(d).text()==b});1==c.length&&c.find("input[type=radio]").prop("checked",!0)},c.prototype.getValue=function(){return this.$el.find("input[type=radio]:checked").val()},c}(jQuery,b.core.PUIElement),l=function(a,b,c,d){function e(){b.call(this,"highlights-pieces"),this.pieces=[]}function f(a){var b=new c(a,!0);return b.toDom().addClass("unselected")}return e.prototype=Object.create(b.prototype),e.prototype.getElement=function(){return a("<div/>").append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("U")).append(f("D")).append(f("F")).append(f("B")).append(f("L")).append(f("R"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("UF")).append(f("UB")).append(f("UL")).append(f("UR"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("DF")).append(f("DB")).append(f("DL")).append(f("DR"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("FL")).append(f("FR")).append(f("BL")).append(f("BR"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("UFL")).append(f("ULB")).append(f("UBR")).append(f("URF"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("DFR")).append(f("DRB")).append(f("DBL")).append(f("DLF")))},e.prototype.initEvents=function(){this.setEvent("click",".ic-ui-piece",function(b){var c=a(b.currentTarget),d=c.data("piece");if(c.hasClass("unselected"))c.removeClass("unselected"),this.pieces.push(d);else{c.addClass("unselected");var e=this.pieces.indexOf(d);e>-1&&this.pieces.splice(e,1)}this.trigger("changepiece",this.pieces.join(","))})},e.prototype.setValue=function(b){if("array"!=typeof b)throw new Error("RHHighlightPieces.setValue() called with a wrong value");this.pieces=b;var c,e,f,g,h=this.$el.find(".ic-ui-piece");for(h.addClass("unselected"),c=0;c<this.pieces.length;c++)e=this.pieces[c],f=d.service.targetOf(e),g=h.filter(function(b,c){return a(c).data("piece")==e}),g.removeClass("unselected");this.trigger("changepiece",this.pieces.join(","))},e.prototype.getValue=function(){return this.pieces},e}(jQuery,b.core.PUIElement,j,a["static"].RubikUtils),m=function(a,b){function c(){b.call(this,"moveslist")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<p/>").addClass("ic-ui-moves").html("&nbsp;")},c.prototype.setValue=function(a){this.$el.html(a)},c.prototype.getValue=function(){return this.$el.text()},c}(jQuery,b.core.PUIElement),n=function(a,b){function c(){b.call(this,"replay"),this.replaytype="play"}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").addClass("ic-solve-replay-chose").append(a("<input/>").attr("type","radio").attr("name","replay").val("restore").prop("checked",!0)).append(a("<span/>").text("restore the last scrambled cube"))).append(a("<label/>").addClass("ic-solve-replay-chose").addClass("disabled").append(a("<input/>").attr("type","radio").attr("name","replay").val("click")).append(a("<span/>").text("click the cube to step ahead"))).append(a("<label/>").addClass("ic-solve-replay-chose").addClass("disabled").append(a("<input/>").attr("type","radio").attr("name","replay").val("play")).append(a("<span/>").text("play each single move every")).append(a("<input/>").attr("type","textfield").addClass("ic-ui-textfield").attr("id","ic-solve-replay-delay").val("1.5")).append(a("<span/>").text("seconds"))).append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-solve-replay-execute").append(a("<span/>").text("replay"))))},c.prototype.initEvents=function(){this.setEvent("change","input[name=replay]",function(b){var c=this.$el.find(".ic-solve-replay-chose");c.addClass("disabled");var d=a(b.currentTarget);d.is(":checked")&&d.closest(".ic-solve-replay-chose").removeClass("disabled")}),this.setEvent("click",".ic-solve-replay-chose",function(b){var c=a(b.currentTarget).find("input[name=replay]");c.length&&!c.is(":checked")&&(this.replaytype=c.val(),this.trigger("change",this.replaytype))}),this.setEvent("click","#ic-solve-replay-execute",function(){var a="play"==this.replaytype?this.$el.find("#ic-solve-replay-delay").val():"manual";this.trigger("replay",a)})},c}(jQuery,b.core.PUIElement),o=function(a,b){function c(a){b.call(this,a)}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").append(a("<input/>").addClass("ic-ui-sequence").attr("type","text"))).append(a("<label/>").append(a("<button/>").attr("id","ic-"+this.name+"-execute").attr("type","button").append(a("<span/>").text("execute"))))},c.prototype.initEvents=function(){this.setEvent("keyup",".ic-ui-sequence",function(a){var b=13==a.keyCode?"execute":"change",c=this.$el.find(".ic-ui-sequence").val();this.trigger(b,c)}),this.setEvent("click","button",function(){this.trigger("execute",this.$el.find(".ic-ui-sequence").val())})},c.prototype.setValue=function(a){this.$el.find(".ic-ui-sequence").val(a),this.trigger("change",a)},c.prototype.getValue=function(){return this.$el.find(".ic-ui-sequence").val()},c}(jQuery,b.core.PUIElement),p=function(a,b,c,d,e,f){function g(a){this.sequence=null,this.moveslist=null,b.call(this,a),this.addCustomComponents()}function h(b,c){"solve"==c&&(c="pieces");var d=a.parse[c],e=d?d(b):[];e.length||(e=["&nbsp;"]),this.elementsMap[this.name+"-moveslist"].elementsMap.moveslist.setValue(e.join(","))}function i(){if(this.mainUI.isocube){var b=this.elementsMap[this.name+"-moveslist"].elementsMap.moveslist.getValue().split(",");this.mainUI.isocube.execute(a.clear.uncollapseSequence(b),10)}}function j(a,b){switch(b){case"change":h.call(this,a,this.name);break;case"execute":i.call(this)}}return g.prototype=Object.create(b.prototype),g.prototype.addComponents=function(){var a=new c(this.name,"sequence","sequence");this.sequence=new e(this.name),a.addChild(this.sequence);var b=new c(this.name,"moveslist","moves");this.moveslist=new f,b.addChild(this.moveslist),this.sequence.on("change",j.bind(this)),this.sequence.on("execute",j.bind(this))},g.prototype.addCustomComponents=function(){this.addChild(new d([this.sequence.parent])),this.addChild(new d([this.moveslist.parent]))},g}(a["static"].RubikUtils,b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,o,m),q=function(a,b,c,d,e,f){function g(){a.call(this,"moves"),this.editpiece=!1}function h(a){var b=this.elementsMap[this.name+"-sequence"].elementsMap.moves,c=b.getValue(),d=c+a;b.setValue(d)}function i(a){var b=this.elementsMap[this.name+"-piece"].elementsMap.piece;b.addFace(a)}function j(){this.elementsMap[this.name+"-faces"].elementsMap.face.enableFaces(),this.elementsMap[this.name+"-slices"].elementsMap.slice.enableFaces(),this.elementsMap[this.name+"-axis"].elementsMap.axis.enableFaces()}function k(a){this.elementsMap[this.name+"-faces"].elementsMap.face.disableFaces(a)}function l(a){this.editpiece?i.call(this,a):h.call(this,"X"==a||"Y"==a||"Z"==a?a.toLowerCase():a)}function m(a,b){switch(b){case"editbegin":this.editpiece=!0,this.elementsMap[this.name+"-slices"].elementsMap.slice.disableFaces(),this.elementsMap[this.name+"-axis"].elementsMap.axis.disableFaces();break;case"wontaccept":k.call(this,a);break;case"editend":this.editpiece=!1,j.call(this),h.call(this,a)}}function n(a){h.call(this,a)}return g.prototype=Object.create(a.prototype),g.prototype.addCustomComponents=function(){var a=new b(this.name,"faces","faces"),g=new d("face",["U","D","F","B","L","R"]);a.addChild(g);var h=new b(this.name,"piece","piece"),i=new e;h.addChild(i);var j=new b(this.name,"slices","slices"),k=new d("slice",["M","E","S"]);j.addChild(k);var o=new b(this.name,"axis","axis"),p=new d("axis",["X","Y","Z"]);o.addChild(p);var q=new b(this.name,"group","group"),r=new f;q.addChild(r),g.on("click",l.bind(this)),i.on("editbegin",m.bind(this)),i.on("editend",m.bind(this)),i.on("wontaccept",m.bind(this)),k.on("click",l.bind(this)),p.on("click",l.bind(this)),r.on("click",n.bind(this)),this.sequence.on("change",function(a){this.elementsMap["moves-group"].elementsMap.groupbuttons.updateGroupStatus(a)}.bind(this)),this.addChild(new c([this.sequence.parent])),this.addChild(new c([a,h])),this.addChild(new c([j,o])),this.addChild(new c([q])),this.addChild(new c([this.moveslist.parent]))},g}(p,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,h,j,i),r=function(a,b,c,d,e,f,g){function h(){c.call(this,"solve"),this.lastScramble=null}function i(){var c=a.solve.explain(this.mainUI.isocube.getCube()),d=c.s.join(","),e=c.e;this.sequence.setValue(d),this.trigger("get_pattern",b.explainAll(e))}function j(a){switch(this.lastScramble&&this.mainUI.isocube.setCube(this.lastScramble),this.trigger("replaybegin",a),a){case"":}}function k(){}return h.prototype=Object.create(c.prototype),h.prototype.addCustomComponents=function(){var a=new d("solve","pattern","analyze"),b=new f;a.addChild(b);var c=new d("solve","replay","replay"),h=new g;c.addChild(h),b.on("get_pattern",i.bind(this)),h.on("replay",j.bind(this)),h.on("change",k.bind(this)),this.sequence.on("execute",function(){this.lastScramble=this.mainUI.isocube.getCube()}.bind(this)),this.addChild(new e([a])),this.addChild(new e([this.sequence.parent])),this.addChild(new e([this.moveslist.parent])),this.addChild(new e([c]))},h}(a["static"].RubikSolver,a["static"].RubikTeacher,p,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,c,n),s=function(a,b,c,d,e,f,g){function h(){a.call(this,"cubesetup"),this.editpiece=!1,this.current_position=null,this.current_piece=null,this.current_face=null,this.disableFaces(),this.togglePieceEnable(),this.elementsMap[this.name+"-piece"].elementsMap.piece.disable()}function i(a,b){if(!a||!b)return null;var c="",d=a.indexOf(b);if(-1==d)return null;for(var e=0;e<a.length;e++)c+=a.charAt(d),++d==a.length&&(d=0);return c}function j(a){if(this.mainUI.isocube){var b=this.mainUI.isocube.iso.engine.getObjectsAtScreenCoord({x:a.pageX,y:a.pageY});if(b.length>0){b.sort(this.mainUI.isocube.backfaceState()?function(a,b){return a._zIndex-b._zIndex}:function(a,b){return b._zIndex-a._zIndex});var c=b[0],d=c._parent,e=i(d.get("sticker"),c.get("sticker")),f=i(d.get("position"),c.get("position"));e&&f?this.setPiece(e,f):this.unsetPiece()}else this.unsetPiece()}}function k(a){this.mainUI&&this.mainUI.isocube&&this.mainUI.isocube.backfaceToggle(a)}function l(a){if(this.mainUI&&this.mainUI.isocube){var b=this.elementsMap[this.name+"-piece"].elementsMap.piece,c=this.mainUI.isocube.iso.container;a?($(c).on("click",j.bind(this)),b.enable()):($(c).off("click"),this.unsetPiece(),b.disable(),b.reset())}}function m(){var a=this.mainUI.isocube.getImage();window.open(a)}function n(){this.mainUI.isocube.setCube()}function o(a){this.editpiece&&this.addMoveToPiece(a)}function p(a){this.disableFaces(a)}function q(a){if(this.current_face){var b={};b[this.current_face]=a,this.trigger("change_colors",b)}}function r(a){this.current_face=a;var b=this.$el.find(".ic-ui-face-"+a);b.length>0&&(this.$el.find(".ic-ui-face.active").removeClass("active"),b.addClass("active"))}return h.prototype=Object.create(a.prototype),h.prototype.addComponents=function(){var a=new b(this.name,"setup","setup"),h=new d;a.addChild(h);var i=new b(this.name,"piece","get piece"),j=new f(null,!0);i.addChild(j);var s=new b("editcube","faces","faces"),t=new e("face",["U","D","F","B","L","R"]);s.addChild(t);var u=new b("editcube","piece","set piece"),v=new f(null,!0);u.addChild(v);var w=new b(this.name,"colors","colors"),x=new e("face",["U","D","F","B","L","R"]),y=new g;w.addChild(x),w.addChild(y),h.on("togglebackface",k.bind(this)),h.on("toggleeditcube",l.bind(this)),h.on("getimage",m.bind(this)),h.on("reset",n.bind(this)),t.on("click",o.bind(this)),v.on("wontaccept",p.bind(this)),x.on("click",r.bind(this)),y.on("change_colors",q.bind(this)),this.addChild(new c([a])),this.addChild(new c([i])),this.addChild(new c([u,s])),this.addChild(new c([w]))},h.prototype.addMoveToPiece=function(a){var b=this.elementsMap["editcube-piece"].elementsMap.piece;b.addFace(a,!0);var c=b.getValue();c.length==this.current_position.length&&(this.current_piece=c,this.mainUI.isocube.setPiece(this.current_position,this.current_piece),this.unsetPiece(),b.reset())},h.prototype.enableAllFaces=function(){this.elementsMap["editcube-faces"].elementsMap.face.enableFaces()},h.prototype.disableFaces=function(a){this.elementsMap["editcube-faces"].elementsMap.face.disableFaces(a)},h.prototype.togglePieceEnable=function(a){var b=this.elementsMap["editcube-piece"].elementsMap.piece;a?b.enable():b.disable()},h.prototype.setPiece=function(a,b){return this.mainUI.isocube.iso.console._children.cubeletInfo.setRenderInfo(b+" : "+a),this.mainUI.isocube.iso.console._render(),this.mainUI.isocube.iso.console._children.cubeletInfo.setAnimationStep(function(a){this.setOptions({alpha:1-a/1e3})}),this.mainUI.isocube.iso.console.startAnimation(1e3),1==b.length?void this.unsetPiece():(this.current_piece=a,this.current_position=b,this.elementsMap[this.name+"-piece"].elementsMap.piece.setValue(a),this.elementsMap["editcube-piece"].elementsMap.piece.enable(),this.elementsMap["editcube-piece"].elementsMap.piece.reset(),this.editpiece=!0,void this.enableAllFaces())},h.prototype.unsetPiece=function(){this.current_piece=null,this.current_position=null,this.mainUI.isocube.iso.console.clear(),this.elementsMap[this.name+"-piece"].elementsMap.piece.reset(),this.elementsMap["editcube-piece"].elementsMap.piece.disable(),this.elementsMap["editcube-piece"].elementsMap.piece.reset(),this.editpiece=!1,this.disableFaces()},h}(b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,e,h,j,d),t=function(a,b,c,d,e){function f(){a.call(this,"explain")}function g(a){var b=this.elementsMap["explain-list"].elementsMap["explain-list"];b.setPriority(a),b.showCurrentPriority()}return f.prototype=Object.create(a.prototype),f.prototype.addComponents=function(){var a=new b("explain","priority","verbosity"),f=new d;a.addChild(f);var h=new b("explain","list","solving process"),i=new e;h.addChild(i),f.on("change_priority",g.bind(this)),this.addChild(new c([a])),this.addChild(new c([h]))},f.prototype.setExplain=function(a){var b=this.elementsMap["explain-list"].elementsMap["explain-list"];b.setValue(a)},f}(b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,g,f),u=function(a,b,c,d,e){function f(){a.call(this,"highlights")}function g(a){this.parent.isocube&&(a.indexOf("none")>-1?this.parent.isocube.highlight():this.parent.isocube.highlight(a))}function h(a,b){switch(b){case"changepiece":this.elementsMap["highlights-predefined"].elementsMap["highlights-list"].setValue("custom");break;case"changelist":"custom"==a&&(a=this.elementsMap["highlights-pieces"].elementsMap["highlights-pieces"].pieces.join(","))}g.call(this,a.split(","))}function i(a){this.parent.isocube&&this.parent.isocube.highlightColor(a)}return f.prototype=Object.create(a.prototype),f.prototype.addComponents=function(){var a=new b("highlights","predefined","list"),f=new d;a.addChild(f);var g=new b("highlights","pieces","pieces"),j=new e;g.addChild(j),f.on("showcolors",i.bind(this)),f.on("changelist",h.bind(this)),j.on("changepiece",h.bind(this)),this.addChild(new c([a])),this.addChild(new c([g]))},f}(b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,k,l),v=function(a,b,c,d,e,f,g,h){function i(a,b){c.call(this,a),this.init(b)}function j(a){this.isocube.updateColors(a),this.initStyles()}function k(a){this.panelsMap.explain.setExplain(a)}return i.prototype=Object.create(c.prototype),i.prototype.init=function(a){this.initNavigation(),this.initStyles(),this.isocube=a,this.addPanel(new d,"scramble"),this.addPanel(new e,"solve").on("get_pattern",k.bind(this)),this.addPanel(new f,"explain"),this.addPanel(new g,"highlight"),this.addPanel(new h,"setup").on("change_colors",j.bind(this)),this.uiStateChange("edit"),setTimeout(function(){this.changePanel("moves",1e3)}.bind(this),100)},i.prototype.uiStateChange=function(a){switch(this.eventlog&&console.log("ui state changed to",a),a){case"execute":break;case"replay":break;case"solve":break;case"edit":}},i.prototype.initStyles=function(){var c="faces_colors",d=a("#"+c),e=[];0==d.length&&(d=a("<style/>").attr("id",c),a("head").append(d));for(var f in b.colors)b.colors.hasOwnProperty(f)&&e.push("#"+this.ID+" .ic-ui-face-"+f+" {background-color:"+b.colors[f]+";}");d.text(e.join(" "))},i}(jQuery,a["static"].RubikUtils,b.core.PUIMain,q,r,t,u,s),w=function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t){
+var u={};return u.RHMainUI=a,u.elements={},u.elements.RHAnalyze=b,u.elements.RHCubeColors=c,u.elements.RHCubeSetup=d,u.elements.RHExplainList=e,u.elements.RHExplainPriority=f,u.elements.RHFaceButtons=g,u.elements.RHGroupButtons=h,u.elements.RHHighlightList=i,u.elements.RHHighlightPieces=j,u.elements.RHMovesList=k,u.elements.RHPieceButton=l,u.elements.RHReplay=m,u.elements.RHSequenceInput=n,u.panels={},u.panels.PanelCubeSetup=o,u.panels.PanelExplain=p,u.panels.PanelHighlights=q,u.panels.PanelMoves=r,u.panels.PanelSequenceToMoves=s,u.panels.PanelSolve=t,u}(v,c,d,e,f,g,h,i,k,l,m,j,n,o,s,t,u,q,p,r);return w}(RubikHelper);
\ No newline at end of file
diff --git a/public/rubikhelperui-latest.min.js b/public/rubikhelperui-latest.min.js
index d672e36..8c0c249 100644
--- a/public/rubikhelperui-latest.min.js
+++ b/public/rubikhelperui-latest.min.js
@@ -1,3 +1,3 @@
-/*! RubikHelperUI Package - v0.1.0 - 2015-04-26 */
-var RubikHelperUI=function(a){var b=function(){var a=function(){function a(a,b){this.name=a,this.title=b||a,this.parent=null,this.mainUI=null,this.enabled=!0,this.elements=[],this.elementsMap={},this.listeners={},this.$el=this.getElement(),this.initEvents()}return a.prototype={getElement:function(){return null},initEvents:function(){},setValue:function(){},getValue:function(){},addTo:function(a){this.parent=a,this.mainUI=a.mainUI||a,this.updateChildrenHierarchy()},addChild:function(a){this.elements.push(a);var b;if(a.components)for(var c=0;c<a.components.length;c++)b=a.components[c],b.addTo(this),this.elementsMap[b.name]=b;else a.addTo(this),this.elementsMap[a.name]=a},updateChildrenHierarchy:function(){for(var a,b=this.components?this.components:this.elements,c=0;c<b.length;c++)a=b[c],a.mainUI=this.mainUI,a.updateChildrenHierarchy()},toDom:function(){for(var a=0;a<this.elements.length;a++)this.$el.append(this.elements[a].toDom());return this.$el},enable:function(){this.enabled=!0,this.$el.addClass("enabled"),this.$el.removeClass("disabled")},disable:function(){this.enabled=!1,this.$el.addClass("disabled"),this.$el.removeClass("enabled")},toggle:function(){this.enabled?this.disable():this.enable()},setEvent:function(a,b,c){"function"==typeof b?this.$el.on(a,b.bind(this)):"string"==typeof b&&this.$el.on(a,b,c.bind(this))},on:function(a,b){this.listeners[a]||(this.listeners[a]=[]),this.listeners[a].push(b)},off:function(a){this.listeners[a]=null},trigger:function(a,b){if(this.listeners[a]){this.mainUI&&this.mainUI.eventlog&&console.log("trigger: ",this.name,a,b);for(var c=0;c<this.listeners[a].length;c++)this.listeners[a][c](b,a)}}},a}(),b=function(a,b){function c(a,c,d){this.type=d,b.call(this,a,c)}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").attr("id","ic-"+this.name).addClass("ic-"+this.type).append(a("<p/>").text(this.title))},c}(jQuery,a),c=function(a){function b(b,c){a.call(this,b,c,"panel"),this.addComponents()}return b.prototype=Object.create(a.prototype),b.prototype.addComponents=function(){},b}(b),d=function(a){function b(b,c,d){a.call(this,b+"-"+c,d,"panel-component")}return b.prototype=Object.create(a.prototype),b}(b),e=function(a,b){function c(a){this.components=a,b.call(this,"group")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){for(var b=a("<div/>").addClass("block"),c=0;c<this.components.length;c++)b.append(this.components[c].toDom());return b},c}(jQuery,a),f=function(a){function b(){a.call(this,"navigation","navigation","navigation")}return b.prototype=Object.create(a.prototype),b.prototype.getElement=function(){return $("<nav/>").append("<ul/>")},b.prototype.initEvents=function(){this.setEvent("click","a",function(a){this.trigger("click",$(a.currentTarget).data("panel"))})},b.prototype.addTab=function(a,b){this.$el.find("ul").append($("<li/>").append($("<a/>").data("panel",a).text(b)))},b}(b),g=function(a,b){function c(b){if(this.ID=b,this.$el=a("#"+b),0==this.$el.length)throw new Error("main UI not initialized: probably given ID does not exists in dom");this.panels=[],this.panelsMap={},this.currentPanel=null,this.eventlog=!1,this.nav=null}return c.prototype={init:function(){this.initNavigation()},initNavigation:function(){this.nav=new b,this.nav.on("click",function(a){this.changePanel(a,200)}.bind(this)),this.addPanel(this.nav)},logEvents:function(a){this.eventlog=a},changePanel:function(b,c){var d="ic-"+b,e=a("#"+d),f=null==this.currentPanel||this.currentPanel.attr("id")!=d;f&&(this.currentPanel&&this.currentPanel.fadeOut(c),this.currentPanel=e,c?this.currentPanel.fadeIn(c):this.currentPanel.show())},addPanel:function(a,c){return c||(c=a.name),!(a instanceof b)&&this.nav&&this.nav.addTab(a.name,c),this.panels.push(a),this.panelsMap[a.name]=a,a.addTo(this),this.$el.append(a.toDom()),a}},c}(jQuery,f),h=function(a,b,c,d,e,f,g){var h={};return h.core={},h.core.PUIElement=a,h.core.PUIElementContainer=b,h.core.PUIMain=c,h.panels={},h.panels.PUINavigation=d,h.panels.PUIPanel=e,h.panels.PUIPanelComponent=f,h.panels.PUIPanelComponentGroup=g,h}(a,b,g,f,c,d,e);return h}(),c=function(a,b){function c(){b.call(this,"analyze")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-solve-analyze").append(a("<span/>").text("get pattern"))))},c.prototype.initEvents=function(){this.setEvent("click","#ic-solve-analyze",function(){this.trigger("get_pattern")})},c}(jQuery,b.core.PUIElement),d=function(a,b,c){function d(){this.colorsData=null,this.canvasWidth=220,this.canvasHeight=100,b.call(this,"cubecolors")}function e(a){var b=a.getContext("2d");b.rect(0,0,a.width,a.height);for(var d=a.width,e=a.height,f=0,g=d/6,h=g/2,i=0,j=h,k=d,l=e-h,m=["#FF0000","#FFFF00","#00FF00","#00FFFF","#0000FF","#FF00FF","#FF0000"],n=b.createLinearGradient(i,j+l,i+k,j+l),o=0;o<m.length;o++)n.addColorStop(Math.floor(100/6*o)/100,m[o]);var p=b.createLinearGradient(i+k,j,i+k,j+l/2);p.addColorStop(0,"rgba(255,255,255,0.9)"),p.addColorStop(1,"rgba(255,255,255,0)");var q=b.createLinearGradient(i+k,j+l/2,i+k,j+l);q.addColorStop(0,"rgba(0,0,0,0)"),q.addColorStop(1,"rgba(0,0,0,0.9)"),b.fillStyle=n,b.fill(),b.fillStyle=p,b.fill(),b.fillStyle=q,b.fill();for(var r=[c.colors.U,c.colors.D,c.colors.F,c.colors.B,c.colors.L,c.colors.R],s=0;s<r.length;s++)b.fillStyle=r[s],b.fillRect(g*s,f,g,f+h);b.strokeStyle="#222222",b.stroke()}return d.prototype=Object.create(b.prototype),d.prototype.getElement=function(){var b=document.createElement("canvas");b.width=this.canvasWidth,b.height=this.canvasHeight,e(b);var c=b.getContext("2d"),d=c.getImageData(0,0,b.width,b.height);return this.colorsData=d.data,a(b).attr("id","ColorPicker")},d.prototype.initEvents=function(){this.setEvent("click",function(b){var c=a(b.currentTarget).offset(),d={top:b.pageY,left:b.pageX},e={left:d.left-c.left,top:d.top-c.top},f=4*Math.round(e.top*this.canvasWidth+e.left),g=this.colorsData[f+0],h=this.colorsData[f+1],i=this.colorsData[f+2],j=("00"+g.toString(16)).substr(-2),k=("00"+h.toString(16)).substr(-2),l=("00"+i.toString(16)).substr(-2),m="#"+j+k+l;this.trigger("change_colors",m)})},d}(jQuery,b.core.PUIElement,a["static"].RubikUtils),e=function(a,b){function c(){b.call(this,"cubesetup")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<div/>").append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-cubesetup-reset").append(a("<span/>").text("reset cube")))).append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-cubesetup-getimage").append(a("<span/>").text("get image"))))).append(a("<div/>").append(a("<label/>").append(a("<input/>").attr("type","checkbox").attr("id","ic-cubesetup-editcube")).append(a("<span/>").text("edit cube"))).append(a("<label/>").append(a("<input/>").attr("type","checkbox").attr("id","ic-cubesetup-backfaces")).append(a("<span/>").text("show back faces"))))},c.prototype.initEvents=function(){this.setEvent("change","input",function(b){var c=a(b.currentTarget);c.attr("id").indexOf("backfaces")>-1?this.trigger("togglebackface",c.is(":checked")):c.attr("id").indexOf("editcube")>-1&&this.trigger("toggleeditcube",c.is(":checked"))}),this.setEvent("click","button",function(b){var c=a(b.currentTarget);c.attr("id").indexOf("getimage")>-1?this.trigger("getimage"):c.attr("id").indexOf("reset")>-1&&this.trigger("reset")})},c}(jQuery,b.core.PUIElement),f=function(a,b){function c(){b.call(this,"explain-list"),this.explainArray=null,this.currentGroup=0,this.currentPriority=-1}function d(){this.$el.empty(),this.currentGroup=this.$el}function e(b){var c=a("<p/>"),d=this.currentGroup,e=a("<div/>"),f=1==b.g,g=-1==b.g;f?(c=a("<strong/>"),d=e,this.currentGroup.append(e),this.currentGroup=e):g&&this.currentGroup!=this.$el&&(this.currentGroup=this.currentGroup.parent()),d.append(c.data("priority",b.p).addClass("p_"+b.p).text(b.m))}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>")},c.prototype.initEvents=function(){this.setEvent("click","strong",function(b){var c=a(b.currentTarget),d=c.parent();d.find(">div").toggle(),d.find(">p").toggle(),this.showCurrentPriority()})},c.prototype.setValue=function(a){this.explainArray=a,d.call(this);for(var b=0;b<a.length;b++)e.call(this,a[b]);this.collapseAll(),this.showCurrentPriority()},c.prototype.getValue=function(){return this.explainArray},c.prototype.setPriority=function(a){this.currentPriority=Number(a)},c.prototype.showCurrentPriority=function(){var b=this.currentPriority;b>=0?this.$el.find("div").addClass("showall"):this.$el.find("div").removeClass("showall"),this.$el.find("strong,p").each(function(){-1==b||b>=a(this).data("priority")?a(this).data("hidden",!1).removeClass("hidden"):a(this).data("hidden",!0).addClass("hidden")})},c.prototype.collapseAll=function(){this.$el.find("div div, div p").hide()},c.prototype.expandAll=function(){this.$el.find("div, p:not(.hidden)").show()},c}(jQuery,b.core.PUIElement),g=function(a,b){function c(){b.call(this,"explain-priority")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<span/>").append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(-1).prop("checked",!0)).append(a("<span/>").text("all"))).append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(0)).append(a("<span/>").text("0"))).append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(1)).append(a("<span/>").text("1"))).append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(2)).append(a("<span/>").text("2")))},c.prototype.initEvents=function(){this.setEvent("change","input",function(b){this.trigger("change_priority",a(b.currentTarget).val())})},c.prototype.setValue=function(a){var b=this.$el.find("input[name=priority][value="+a+"]");b.length>0&&b.prop("checked",!0)},c.prototype.getValue=function(){return this.$el.find("input:checked").val()},c}(jQuery,b.core.PUIElement),h=function(a,b){function c(a,c){this.faces=c,b.call(this,a)}function d(b){var c=this.$el.find(".ic-ui-face");return b&&(c=c.filter(function(c,d){return b.indexOf(a(d).data("face"))>-1})),c}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){for(var b=a("<ul/>"),c=0;c<this.faces.length;c++)b.append(this.faceButton(this.faces[c],this.name,"<li/>"));return b},c.prototype.initEvents=function(){this.setEvent("click",".ic-ui-face",function(b){var c=a(b.currentTarget);if(!c.hasClass("disabled")){var d=c.data("face");this.trigger("click",d)}})},c.prototype.disableFaces=function(a){var b=d.call(this,a);b.addClass("disabled")},c.prototype.enableFaces=function(a){var b=d.call(this,a);b.removeClass("disabled")},c.prototype.faceButton=function(b,c,d){return c||(c="face"),a(d).data("face",b).addClass("ic-ui-face").addClass("ic-ui-"+c+"-"+b)},c}(jQuery,b.core.PUIElement),i=function(a,b){function c(){b.call(this,"groupbuttons"),this.group=0}function d(b,c,d){return c||(c=b),a("<label/>").append(a("<button/>").attr("type","button").attr("data-action",b)).addClass(d?"disabled":"").append(a("<span/>").text(c))}function e(){return this.group++,g.call(this),!0}function f(){return 0==this.group?!1:(0==--this.group&&h.call(this),!0)}function g(){this.$el.find(".disabled").removeClass("disabled")}function h(){this.$el.find("button").filter(":not([data-action=open])").addClass("disabled")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<span/>").append(d("open")).append(d("close",null,!0)).append(d("negative",null,!0)).append(d("inverse",null,!0)).append(d("mirror",null,!0))},c.prototype.initEvents=function(){this.setEvent("click","button",function(b){var c=a(b.currentTarget),d=c.data("action");switch(d){case"open":e.call(this)&&this.trigger("click","(");break;case"close":f.call(this)&&this.trigger("click",") ");break;case"negative":f.call(this)&&this.trigger("click",")' ");break;case"inverse":f.call(this)&&this.trigger("click",")i ");break;case"mirror":f.call(this)&&this.trigger("click",")m ")}})},c.prototype.updateGroupStatus=function(a){var b,c,d=0,e=a.replace(/[^/(|/)]/g,"");for(b=0;b<e.length;b++)c=e.charAt(b),"("==c&&d++,")"==c&&d--;d>0?g.call(this):h.call(this)},c}(jQuery,b.core.PUIElement),j=function(a,b,c,d){function e(a,c){this.avoidInteraction=c,b.call(this,a||"piece"),this.setValue(a),this.faces=null,this.axis=null}return e.prototype=Object.create(b.prototype),e.prototype.getElement=function(){return a("<ul/>").addClass("ic-ui-piece").data("piece",this.name)},e.prototype.initEvents=function(){this.avoidInteraction||this.setEvent("click",function(){if(!this.enabled)return!1;if(this.faces){var a=this.faces.join("");a.length>=2&&(a="["+a+"]"),this.reset(),this.trigger("editend",a)}else this.faces=[],this.trigger("editbegin","");return!0})},e.prototype.setValue=function(a){if(a){this.reset();for(var b=0;b<a.length;b++)this.addFace(a.charAt(b))}},e.prototype.getValue=function(){return this.$el.data("piece")},e.prototype.addFace=function(a,b){this.$el.append(c.prototype.faceButton(a,"face","<li/>")),(this.faces||b)&&(this.faces||(this.faces=[]),this.faces.push(a),this.$el.data("piece",this.faces.join("")),this.trigger("wontaccept",d.service.notAcceptedWithPiece(this.faces)))},e.prototype.reset=function(){this.faces=null,this.$el.empty()},e}(jQuery,b.core.PUIElement,h,a["static"].RubikUtils),k=function(a,b){function c(){b.call(this,"highlights-list")}function d(b,c,d,e){return a("<li/>").append(a("<label/>").text(c).prepend(a("<input/>").addClass("ic-hl-"+b).attr("type","radio").attr("name","hl-choice").attr("value",d).prop("checked",e)))}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<ul/>").append(d("render","none","none",!0)).append(d("highlight","face U",["ULB","UB","UBR","UL","U","UR","UFL","UF","URF"])).append(d("highlight","face F",["FLU","FU","FUR","FL","F","FR","FDL","FD","FRD"])).append(d("highlight","face R",["RFU","RU","RUB","RF","R","RB","RDF","RD","RBD"])).append(d("highlight","face D",["DLF","DF","DFR","DL","D","DR","DBL","DB","DRB"])).append(d("highlight","face B",["BRU","BU","BUL","BR","B","BL","BDR","BD","BLD"])).append(d("highlight","face L",["LBU","LU","LUF","LB","L","LF","LDB","LD","LFD"])).append(d("highlight","slice M",["F","U","B","D","UF","UB","DB","DF"])).append(d("highlight","slice E",["F","R","B","L","FL","FR","BL","BR"])).append(d("highlight","slice S",["U","R","D","L","UL","UR","DR","DL"])).append(d("highlight","parity",["DF","DFR","UB","UBR"])).append(d("highlight","J-perm",["ULB","UL","UFL","UF"])).append(d("highlight","orient 2 edges",["UF","UB"])).append(d("highlight","orient 4 edges",["UF","UB","UL","UR"])).append(d("highlight","orient corner",["UFL"])).append(d("highlight","custom","custom"))},c.prototype.initEvents=function(){this.setEvent("change","input",function(b){this.trigger("changelist",a(b.currentTarget).val())})},c.prototype.setValue=function(b){var c=this.$el.find("label").filter(function(c,d){return a(d).text()==b});1==c.length&&c.find("input").prop("checked",!0)},c.prototype.getValue=function(){return this.$el.find("input:checked").val()},c}(jQuery,b.core.PUIElement),l=function(a,b,c,d){function e(){b.call(this,"highlights-pieces"),this.pieces=[]}function f(a){var b=new c(a,!0);return b.toDom().addClass("unselected")}return e.prototype=Object.create(b.prototype),e.prototype.getElement=function(){return a("<div/>").append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("U")).append(f("D")).append(f("F")).append(f("B")).append(f("L")).append(f("R"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("UF")).append(f("UB")).append(f("UL")).append(f("UR"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("DF")).append(f("DB")).append(f("DL")).append(f("DR"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("FL")).append(f("FR")).append(f("BL")).append(f("BR"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("UFL")).append(f("ULB")).append(f("UBR")).append(f("URF"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("DFR")).append(f("DRB")).append(f("DBL")).append(f("DLF")))},e.prototype.initEvents=function(){this.setEvent("click",".ic-ui-piece",function(b){var c=a(b.currentTarget),d=c.data("piece");if(c.hasClass("unselected"))c.removeClass("unselected"),this.pieces.push(d);else{c.addClass("unselected");var e=this.pieces.indexOf(d);e>-1&&this.pieces.splice(e,1)}this.trigger("changepiece",this.pieces.join(","))})},e.prototype.setValue=function(b){if("array"!=typeof b)throw new Error("RHHighlightPieces.setValue() called with a wrong value");this.pieces=b;var c,e,f,g,h=this.$el.find(".ic-ui-piece");for(h.addClass("unselected"),c=0;c<this.pieces.length;c++)e=this.pieces[c],f=d.service.targetOf(e),g=h.filter(function(b,c){return a(c).data("piece")==e}),g.removeClass("unselected");this.trigger("changepiece",this.pieces.join(","))},e.prototype.getValue=function(){return this.pieces},e}(jQuery,b.core.PUIElement,j,a["static"].RubikUtils),m=function(a,b){function c(){b.call(this,"moveslist")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<p/>").addClass("ic-ui-moves").html("&nbsp;")},c.prototype.setValue=function(a){this.$el.html(a)},c.prototype.getValue=function(){return this.$el.text()},c}(jQuery,b.core.PUIElement),n=function(a,b){function c(){b.call(this,"replay"),this.replaytype="play"}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").addClass("ic-solve-replay-chose").append(a("<input/>").attr("type","radio").attr("name","replay").val("restore").prop("checked",!0)).append(a("<span/>").text("restore the last scrambled cube"))).append(a("<label/>").addClass("ic-solve-replay-chose").addClass("disabled").append(a("<input/>").attr("type","radio").attr("name","replay").val("click")).append(a("<span/>").text("click the cube to step ahead"))).append(a("<label/>").addClass("ic-solve-replay-chose").addClass("disabled").append(a("<input/>").attr("type","radio").attr("name","replay").val("play")).append(a("<span/>").text("play each single move every")).append(a("<input/>").attr("type","textfield").addClass("ic-ui-textfield").attr("id","ic-solve-replay-delay").val("1.5")).append(a("<span/>").text("seconds"))).append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-solve-replay-execute").append(a("<span/>").text("replay"))))},c.prototype.initEvents=function(){this.setEvent("change","input[name=replay]",function(b){var c=this.$el.find(".ic-solve-replay-chose");c.addClass("disabled");var d=a(b.currentTarget);d.is(":checked")&&d.closest(".ic-solve-replay-chose").removeClass("disabled")}),this.setEvent("click",".ic-solve-replay-chose",function(b){var c=a(b.currentTarget).find("input[name=replay]");c.length&&!c.is(":checked")&&(this.replaytype=c.val(),this.trigger("change",this.replaytype))}),this.setEvent("click","#ic-solve-replay-execute",function(){var a="play"==this.replaytype?this.$el.find("#ic-solve-replay-delay").val():"manual";this.trigger("replay",a)})},c}(jQuery,b.core.PUIElement),o=function(a,b){function c(a){b.call(this,a)}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").append(a("<input/>").addClass("ic-ui-sequence").attr("type","text"))).append(a("<label/>").append(a("<button/>").attr("id","ic-"+this.name+"-execute").attr("type","button").append(a("<span/>").text("execute"))))},c.prototype.initEvents=function(){this.setEvent("keyup",".ic-ui-sequence",function(a){var b=13==a.keyCode?"execute":"change",c=this.$el.find(".ic-ui-sequence").val();this.trigger(b,c)}),this.setEvent("click","button",function(){this.trigger("execute",this.$el.find(".ic-ui-sequence").val())})},c.prototype.setValue=function(a){this.$el.find(".ic-ui-sequence").val(a),this.trigger("change",a)},c.prototype.getValue=function(){return this.$el.find(".ic-ui-sequence").val()},c}(jQuery,b.core.PUIElement),p=function(a,b,c,d,e,f){function g(a){this.sequence=null,this.moveslist=null,b.call(this,a),this.addCustomComponents()}function h(b,c){"solve"==c&&(c="pieces");var d=a.parse[c],e=d?d(b):[];e.length||(e=["&nbsp;"]),this.elementsMap[this.name+"-moveslist"].elementsMap.moveslist.setValue(e.join(","))}function i(){if(this.mainUI.isocube){var b=this.elementsMap[this.name+"-moveslist"].elementsMap.moveslist.getValue().split(",");this.mainUI.isocube.execute(a.clear.uncollapseSequence(b),10)}}function j(a,b){switch(b){case"change":h.call(this,a,this.name);break;case"execute":i.call(this)}}return g.prototype=Object.create(b.prototype),g.prototype.addComponents=function(){var a=new c(this.name,"sequence","sequence");this.sequence=new e(this.name),a.addChild(this.sequence);var b=new c(this.name,"moveslist","moves");this.moveslist=new f,b.addChild(this.moveslist),this.sequence.on("change",j.bind(this)),this.sequence.on("execute",j.bind(this))},g.prototype.addCustomComponents=function(){this.addChild(new d([this.sequence.parent])),this.addChild(new d([this.moveslist.parent]))},g}(a["static"].RubikUtils,b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,o,m),q=function(a,b,c,d,e,f){function g(){a.call(this,"moves"),this.editpiece=!1}function h(a){var b=this.elementsMap[this.name+"-sequence"].elementsMap.moves,c=b.getValue(),d=c+a;b.setValue(d)}function i(a){var b=this.elementsMap[this.name+"-piece"].elementsMap.piece;b.addFace(a)}function j(){this.elementsMap[this.name+"-faces"].elementsMap.face.enableFaces(),this.elementsMap[this.name+"-slices"].elementsMap.slice.enableFaces(),this.elementsMap[this.name+"-axis"].elementsMap.axis.enableFaces()}function k(a){this.elementsMap[this.name+"-faces"].elementsMap.face.disableFaces(a)}function l(a){this.editpiece?i.call(this,a):h.call(this,"X"==a||"Y"==a||"Z"==a?a.toLowerCase():a)}function m(a,b){switch(b){case"editbegin":this.editpiece=!0,this.elementsMap[this.name+"-slices"].elementsMap.slice.disableFaces(),this.elementsMap[this.name+"-axis"].elementsMap.axis.disableFaces();break;case"wontaccept":k.call(this,a);break;case"editend":this.editpiece=!1,j.call(this),h.call(this,a)}}function n(a){h.call(this,a)}return g.prototype=Object.create(a.prototype),g.prototype.addCustomComponents=function(){var a=new b(this.name,"faces","faces"),g=new d("face",["U","D","F","B","L","R"]);a.addChild(g);var h=new b(this.name,"piece","piece"),i=new e;h.addChild(i);var j=new b(this.name,"slices","slices"),k=new d("slice",["M","E","S"]);j.addChild(k);var o=new b(this.name,"axis","axis"),p=new d("axis",["X","Y","Z"]);o.addChild(p);var q=new b(this.name,"group","group"),r=new f;q.addChild(r),g.on("click",l.bind(this)),i.on("editbegin",m.bind(this)),i.on("editend",m.bind(this)),i.on("wontaccept",m.bind(this)),k.on("click",l.bind(this)),p.on("click",l.bind(this)),r.on("click",n.bind(this)),this.sequence.on("change",function(a){this.elementsMap["moves-group"].elementsMap.groupbuttons.updateGroupStatus(a)}.bind(this)),this.addChild(new c([this.sequence.parent])),this.addChild(new c([a,h])),this.addChild(new c([j,o])),this.addChild(new c([q])),this.addChild(new c([this.moveslist.parent]))},g}(p,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,h,j,i),r=function(a,b,c,d,e,f,g){function h(){c.call(this,"solve"),this.lastScramble=null}function i(){var c=a.solve.explain(this.mainUI.isocube.getCube()),d=c.s.join(","),e=c.e;this.sequence.setValue(d),this.trigger("get_pattern",b.explainAll(e))}function j(a){switch(this.lastScramble&&this.mainUI.isocube.setCube(this.lastScramble),this.trigger("replaybegin",a),a){case"":}}function k(){}return h.prototype=Object.create(c.prototype),h.prototype.addCustomComponents=function(){var a=new d("solve","pattern","analyze"),b=new f;a.addChild(b);var c=new d("solve","replay","replay"),h=new g;c.addChild(h),b.on("get_pattern",i.bind(this)),h.on("replay",j.bind(this)),h.on("change",k.bind(this)),this.sequence.on("execute",function(){this.lastScramble=this.mainUI.isocube.getCube()}.bind(this)),this.addChild(new e([a])),this.addChild(new e([this.sequence.parent])),this.addChild(new e([this.moveslist.parent])),this.addChild(new e([c]))},h}(a["static"].RubikSolver,a["static"].RubikTeacher,p,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,c,n),s=function(a,b,c,d,e,f,g){function h(){a.call(this,"cubesetup"),this.editpiece=!1,this.current_position=null,this.current_piece=null,this.current_face=null,this.disableFaces(),this.togglePieceEnable(),this.elementsMap[this.name+"-piece"].elementsMap.piece.disable()}function i(a,b){if(!a||!b)return null;var c="",d=a.indexOf(b);if(-1==d)return null;for(var e=0;e<a.length;e++)c+=a.charAt(d),++d==a.length&&(d=0);return c}function j(a){if(this.mainUI.isocube){var b=this.mainUI.isocube.iso.engine.getObjectsAtScreenCoord({x:a.pageX,y:a.pageY});if(b.length>0){b.sort(this.mainUI.isocube.backfaceState()?function(a,b){return a._zIndex-b._zIndex}:function(a,b){return b._zIndex-a._zIndex});var c=b[0],d=c._parent,e=i(d.get("sticker"),c.get("sticker")),f=i(d.get("position"),c.get("position"));e&&f?this.setPiece(e,f):this.unsetPiece()}else this.unsetPiece()}}function k(a){this.mainUI&&this.mainUI.isocube&&this.mainUI.isocube.backfaceToggle(a)}function l(a){if(this.mainUI&&this.mainUI.isocube){var b=this.elementsMap[this.name+"-piece"].elementsMap.piece,c=this.mainUI.isocube.iso.container;a?($(c).on("click",j.bind(this)),b.enable()):($(c).off("click"),this.unsetPiece(),b.disable(),b.reset())}}function m(){var a=this.mainUI.isocube.getImage();window.open(a)}function n(){this.mainUI.isocube.setCube()}function o(a){this.editpiece&&this.addMoveToPiece(a)}function p(a){this.disableFaces(a)}function q(a){if(this.current_face){var b={};b[this.current_face]=a,this.trigger("change_colors",b)}}function r(a){this.current_face=a;var b=this.$el.find(".ic-ui-face-"+a);b.length>0&&(this.$el.find(".ic-ui-face.active").removeClass("active"),b.addClass("active"))}return h.prototype=Object.create(a.prototype),h.prototype.addComponents=function(){var a=new b(this.name,"setup","setup"),h=new d;a.addChild(h);var i=new b(this.name,"piece","get piece"),j=new f(null,!0);i.addChild(j);var s=new b("editcube","faces","faces"),t=new e("face",["U","D","F","B","L","R"]);s.addChild(t);var u=new b("editcube","piece","set piece"),v=new f(null,!0);u.addChild(v);var w=new b(this.name,"colors","colors"),x=new e("face",["U","D","F","B","L","R"]),y=new g;w.addChild(x),w.addChild(y),h.on("togglebackface",k.bind(this)),h.on("toggleeditcube",l.bind(this)),h.on("getimage",m.bind(this)),h.on("reset",n.bind(this)),t.on("click",o.bind(this)),v.on("wontaccept",p.bind(this)),x.on("click",r.bind(this)),y.on("change_colors",q.bind(this)),this.addChild(new c([a])),this.addChild(new c([i])),this.addChild(new c([u,s])),this.addChild(new c([w]))},h.prototype.addMoveToPiece=function(a){var b=this.elementsMap["editcube-piece"].elementsMap.piece;b.addFace(a,!0);var c=b.getValue();c.length==this.current_position.length&&(this.current_piece=c,this.mainUI.isocube.setPiece(this.current_position,this.current_piece),this.unsetPiece(),b.reset())},h.prototype.enableAllFaces=function(){this.elementsMap["editcube-faces"].elementsMap.face.enableFaces()},h.prototype.disableFaces=function(a){this.elementsMap["editcube-faces"].elementsMap.face.disableFaces(a)},h.prototype.togglePieceEnable=function(a){var b=this.elementsMap["editcube-piece"].elementsMap.piece;a?b.enable():b.disable()},h.prototype.setPiece=function(a,b){return this.mainUI.isocube.iso.console._children.cubeletInfo.setRenderInfo(b+" : "+a),this.mainUI.isocube.iso.console._render(),this.mainUI.isocube.iso.console._children.cubeletInfo.setAnimationStep(function(a){this.setOptions({alpha:1-a/1e3})}),this.mainUI.isocube.iso.console.startAnimation(1e3),1==b.length?void this.unsetPiece():(this.current_piece=a,this.current_position=b,this.elementsMap[this.name+"-piece"].elementsMap.piece.setValue(a),this.elementsMap["editcube-piece"].elementsMap.piece.enable(),this.elementsMap["editcube-piece"].elementsMap.piece.reset(),this.editpiece=!0,void this.enableAllFaces())},h.prototype.unsetPiece=function(){this.current_piece=null,this.current_position=null,this.mainUI.isocube.iso.console.clear(),this.elementsMap[this.name+"-piece"].elementsMap.piece.reset(),this.elementsMap["editcube-piece"].elementsMap.piece.disable(),this.elementsMap["editcube-piece"].elementsMap.piece.reset(),this.editpiece=!1,this.disableFaces()},h}(b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,e,h,j,d),t=function(a,b,c,d,e){function f(){a.call(this,"explain")}function g(a){var b=this.elementsMap["explain-list"].elementsMap["explain-list"];b.setPriority(a),b.showCurrentPriority()}return f.prototype=Object.create(a.prototype),f.prototype.addComponents=function(){var a=new b("explain","priority","verbosity"),f=new d;a.addChild(f);var h=new b("explain","list","solving process"),i=new e;h.addChild(i),f.on("change_priority",g.bind(this)),this.addChild(new c([a])),this.addChild(new c([h]))},f.prototype.setExplain=function(a){var b=this.elementsMap["explain-list"].elementsMap["explain-list"];b.setValue(a)},f}(b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,g,f),u=function(a,b,c,d,e){function f(){a.call(this,"highlights")}function g(a){this.parent.isocube&&(a.indexOf("none")>-1?this.parent.isocube.highlight():this.parent.isocube.highlight(a))}function h(a,b){switch(b){case"changepiece":this.elementsMap["highlights-predefined"].elementsMap["highlights-list"].setValue("custom");break;case"changelist":"custom"==a&&(a=this.elementsMap["highlights-pieces"].elementsMap["highlights-pieces"].pieces.join(","))}g.call(this,a.split(","))}return f.prototype=Object.create(a.prototype),f.prototype.addComponents=function(){var a=new b("highlights","predefined","list"),f=new d;a.addChild(f);var g=new b("highlights","pieces","pieces"),i=new e;g.addChild(i),f.on("changelist",h.bind(this)),i.on("changepiece",h.bind(this)),this.addChild(new c([a])),this.addChild(new c([g]))},f}(b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,k,l),v=function(a,b,c,d,e,f,g,h){function i(a,b){c.call(this,a),this.init(b)}function j(a){this.isocube.updateColors(a),this.initStyles()}function k(a){this.panelsMap.explain.setExplain(a)}return i.prototype=Object.create(c.prototype),i.prototype.init=function(a){this.initNavigation(),this.initStyles(),this.isocube=a,this.addPanel(new d,"scramble"),this.addPanel(new e,"solve").on("get_pattern",k.bind(this)),this.addPanel(new f,"explain"),this.addPanel(new g,"highlight"),this.addPanel(new h,"setup").on("change_colors",j.bind(this)),this.uiStateChange("edit"),setTimeout(function(){this.changePanel("moves",1e3)}.bind(this),100)},i.prototype.uiStateChange=function(a){switch(this.eventlog&&console.log("ui state changed to",a),a){case"execute":break;case"replay":break;case"solve":break;case"edit":}},i.prototype.initStyles=function(){var c="faces_colors",d=a("#"+c),e=[];0==d.length&&(d=a("<style/>").attr("id",c),a("head").append(d));for(var f in b.colors)b.colors.hasOwnProperty(f)&&e.push("#"+this.ID+" .ic-ui-face-"+f+" {background-color:"+b.colors[f]+";}");d.text(e.join(" "))},i}(jQuery,a["static"].RubikUtils,b.core.PUIMain,q,r,t,u,s),w=function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t){var u={};return u.RHMainUI=a,u.elements={},u.elements.RHAnalyze=b,u.elements.RHCubeColors=c,u.elements.RHCubeSetup=d,u.elements.RHExplainList=e,u.elements.RHExplainPriority=f,u.elements.RHFaceButtons=g,u.elements.RHGroupButtons=h,u.elements.RHHighlightList=i,u.elements.RHHighlightPieces=j,u.elements.RHMovesList=k,u.elements.RHPieceButton=l,u.elements.RHReplay=m,u.elements.RHSequenceInput=n,u.panels={},
-u.panels.PanelCubeSetup=o,u.panels.PanelExplain=p,u.panels.PanelHighlights=q,u.panels.PanelMoves=r,u.panels.PanelSequenceToMoves=s,u.panels.PanelSolve=t,u}(v,c,d,e,f,g,h,i,k,l,m,j,n,o,s,t,u,q,p,r);return w}(RubikHelper);
\ No newline at end of file
+/*! RubikHelperUI Package - v0.1.1 - 2015-05-04 */
+var RubikHelperUI=function(a){var b=function(){var a=function(){function a(a,b){this.name=a,this.title=b||a,this.parent=null,this.mainUI=null,this.enabled=!0,this.elements=[],this.elementsMap={},this.listeners={},this.$el=this.getElement(),this.initEvents()}return a.prototype={getElement:function(){return null},initEvents:function(){},setValue:function(){},getValue:function(){},addTo:function(a){this.parent=a,this.mainUI=a.mainUI||a,this.updateChildrenHierarchy()},addChild:function(a){this.elements.push(a);var b;if(a.components)for(var c=0;c<a.components.length;c++)b=a.components[c],b.addTo(this),this.elementsMap[b.name]=b;else a.addTo(this),this.elementsMap[a.name]=a},updateChildrenHierarchy:function(){for(var a,b=this.components?this.components:this.elements,c=0;c<b.length;c++)a=b[c],a.mainUI=this.mainUI,a.updateChildrenHierarchy()},toDom:function(){for(var a=0;a<this.elements.length;a++)this.$el.append(this.elements[a].toDom());return this.$el},enable:function(){this.enabled=!0,this.$el.addClass("enabled"),this.$el.removeClass("disabled")},disable:function(){this.enabled=!1,this.$el.addClass("disabled"),this.$el.removeClass("enabled")},toggle:function(){this.enabled?this.disable():this.enable()},setEvent:function(a,b,c){"function"==typeof b?this.$el.on(a,b.bind(this)):"string"==typeof b&&this.$el.on(a,b,c.bind(this))},on:function(a,b){this.listeners[a]||(this.listeners[a]=[]),this.listeners[a].push(b)},off:function(a){this.listeners[a]=null},trigger:function(a,b){if(this.listeners[a]){this.mainUI&&this.mainUI.eventlog&&console.log("trigger: ",this.name,a,b);for(var c=0;c<this.listeners[a].length;c++)this.listeners[a][c](b,a)}}},a}(),b=function(a,b){function c(a,c,d){this.type=d,b.call(this,a,c)}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").attr("id","ic-"+this.name).addClass("ic-"+this.type).append(a("<p/>").text(this.title))},c}(jQuery,a),c=function(a){function b(b,c){a.call(this,b,c,"panel"),this.addComponents()}return b.prototype=Object.create(a.prototype),b.prototype.addComponents=function(){},b}(b),d=function(a){function b(b,c,d){a.call(this,b+"-"+c,d,"panel-component")}return b.prototype=Object.create(a.prototype),b}(b),e=function(a,b){function c(a){this.components=a,b.call(this,"group")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){for(var b=a("<div/>").addClass("block"),c=0;c<this.components.length;c++)b.append(this.components[c].toDom());return b},c}(jQuery,a),f=function(a){function b(){a.call(this,"navigation","navigation","navigation")}return b.prototype=Object.create(a.prototype),b.prototype.getElement=function(){return $("<nav/>").append("<ul/>")},b.prototype.initEvents=function(){this.setEvent("click","a",function(a){this.trigger("click",$(a.currentTarget).data("panel"))})},b.prototype.addTab=function(a,b){this.$el.find("ul").append($("<li/>").append($("<a/>").data("panel",a).text(b)))},b}(b),g=function(a,b){function c(b){if(this.ID=b,this.$el=a("#"+b),0==this.$el.length)throw new Error("main UI not initialized: probably given ID does not exists in dom");this.panels=[],this.panelsMap={},this.currentPanel=null,this.eventlog=!1,this.nav=null}return c.prototype={init:function(){this.initNavigation()},initNavigation:function(){this.nav=new b,this.nav.on("click",function(a){this.changePanel(a,200)}.bind(this)),this.addPanel(this.nav)},logEvents:function(a){this.eventlog=a},changePanel:function(b,c){var d="ic-"+b,e=a("#"+d),f=null==this.currentPanel||this.currentPanel.attr("id")!=d;f&&(this.currentPanel&&this.currentPanel.fadeOut(c),this.currentPanel=e,c?this.currentPanel.fadeIn(c):this.currentPanel.show())},addPanel:function(a,c){return c||(c=a.name),!(a instanceof b)&&this.nav&&this.nav.addTab(a.name,c),this.panels.push(a),this.panelsMap[a.name]=a,a.addTo(this),this.$el.append(a.toDom()),a}},c}(jQuery,f),h=function(a,b,c,d,e,f,g){var h={};return h.core={},h.core.PUIElement=a,h.core.PUIElementContainer=b,h.core.PUIMain=c,h.panels={},h.panels.PUINavigation=d,h.panels.PUIPanel=e,h.panels.PUIPanelComponent=f,h.panels.PUIPanelComponentGroup=g,h}(a,b,g,f,c,d,e);return h}(),c=function(a,b){function c(){b.call(this,"analyze")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-solve-analyze").append(a("<span/>").text("get pattern"))))},c.prototype.initEvents=function(){this.setEvent("click","#ic-solve-analyze",function(){this.trigger("get_pattern")})},c}(jQuery,b.core.PUIElement),d=function(a,b,c){function d(){this.colorsData=null,this.canvasWidth=220,this.canvasHeight=100,b.call(this,"cubecolors")}function e(a){var b=a.getContext("2d");b.rect(0,0,a.width,a.height);for(var d=a.width,e=a.height,f=0,g=d/6,h=g/2,i=0,j=h,k=d,l=e-h,m=["#FF0000","#FFFF00","#00FF00","#00FFFF","#0000FF","#FF00FF","#FF0000"],n=b.createLinearGradient(i,j+l,i+k,j+l),o=0;o<m.length;o++)n.addColorStop(Math.floor(100/6*o)/100,m[o]);var p=b.createLinearGradient(i+k,j,i+k,j+l/2);p.addColorStop(0,"rgba(255,255,255,0.9)"),p.addColorStop(1,"rgba(255,255,255,0)");var q=b.createLinearGradient(i+k,j+l/2,i+k,j+l);q.addColorStop(0,"rgba(0,0,0,0)"),q.addColorStop(1,"rgba(0,0,0,0.9)"),b.fillStyle=n,b.fill(),b.fillStyle=p,b.fill(),b.fillStyle=q,b.fill();for(var r=[c.colors.U,c.colors.D,c.colors.F,c.colors.B,c.colors.L,c.colors.R],s=0;s<r.length;s++)b.fillStyle=r[s],b.fillRect(g*s,f,g,f+h);b.strokeStyle="#222222",b.stroke()}return d.prototype=Object.create(b.prototype),d.prototype.getElement=function(){var b=document.createElement("canvas");b.width=this.canvasWidth,b.height=this.canvasHeight,e(b);var c=b.getContext("2d"),d=c.getImageData(0,0,b.width,b.height);return this.colorsData=d.data,a(b).attr("id","ColorPicker")},d.prototype.initEvents=function(){this.setEvent("click",function(b){var c=a(b.currentTarget).offset(),d={top:b.pageY,left:b.pageX},e={left:d.left-c.left,top:d.top-c.top},f=4*Math.round(e.top*this.canvasWidth+e.left),g=this.colorsData[f+0],h=this.colorsData[f+1],i=this.colorsData[f+2],j=("00"+g.toString(16)).substr(-2),k=("00"+h.toString(16)).substr(-2),l=("00"+i.toString(16)).substr(-2),m="#"+j+k+l;this.trigger("change_colors",m)})},d}(jQuery,b.core.PUIElement,a["static"].RubikUtils),e=function(a,b){function c(){b.call(this,"cubesetup")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<div/>").append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-cubesetup-reset").append(a("<span/>").text("reset cube")))).append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-cubesetup-getimage").append(a("<span/>").text("get image"))))).append(a("<div/>").append(a("<label/>").append(a("<input/>").attr("type","checkbox").attr("id","ic-cubesetup-editcube")).append(a("<span/>").text("edit cube"))).append(a("<label/>").append(a("<input/>").attr("type","checkbox").attr("id","ic-cubesetup-backfaces")).append(a("<span/>").text("show back faces"))))},c.prototype.initEvents=function(){this.setEvent("change","input",function(b){var c=a(b.currentTarget);c.attr("id").indexOf("backfaces")>-1?this.trigger("togglebackface",c.is(":checked")):c.attr("id").indexOf("editcube")>-1&&this.trigger("toggleeditcube",c.is(":checked"))}),this.setEvent("click","button",function(b){var c=a(b.currentTarget);c.attr("id").indexOf("getimage")>-1?this.trigger("getimage"):c.attr("id").indexOf("reset")>-1&&this.trigger("reset")})},c}(jQuery,b.core.PUIElement),f=function(a,b){function c(){b.call(this,"explain-list"),this.explainArray=null,this.currentGroup=0,this.currentPriority=-1}function d(){this.$el.empty(),this.currentGroup=this.$el}function e(b){var c=a("<p/>"),d=this.currentGroup,e=a("<div/>"),f=1==b.g,g=-1==b.g;f?(c=a("<strong/>"),d=e,this.currentGroup.append(e),this.currentGroup=e):g&&this.currentGroup!=this.$el&&(this.currentGroup=this.currentGroup.parent()),d.append(c.data("priority",b.p).addClass("p_"+b.p).text(b.m))}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>")},c.prototype.initEvents=function(){this.setEvent("click","strong",function(b){var c=a(b.currentTarget),d=c.parent();d.find(">div").toggle(),d.find(">p").toggle(),this.showCurrentPriority()})},c.prototype.setValue=function(a){this.explainArray=a,d.call(this);for(var b=0;b<a.length;b++)e.call(this,a[b]);this.collapseAll(),this.showCurrentPriority()},c.prototype.getValue=function(){return this.explainArray},c.prototype.setPriority=function(a){this.currentPriority=Number(a)},c.prototype.showCurrentPriority=function(){var b=this.currentPriority;b>=0?this.$el.find("div").addClass("showall"):this.$el.find("div").removeClass("showall"),this.$el.find("strong,p").each(function(){-1==b||b>=a(this).data("priority")?a(this).data("hidden",!1).removeClass("hidden"):a(this).data("hidden",!0).addClass("hidden")})},c.prototype.collapseAll=function(){this.$el.find("div div, div p").hide()},c.prototype.expandAll=function(){this.$el.find("div, p:not(.hidden)").show()},c}(jQuery,b.core.PUIElement),g=function(a,b){function c(){b.call(this,"explain-priority")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<span/>").append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(-1).prop("checked",!0)).append(a("<span/>").text("all"))).append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(0)).append(a("<span/>").text("0"))).append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(1)).append(a("<span/>").text("1"))).append(a("<label/>").append(a("<input/>").attr("type","radio").attr("name","priority").val(2)).append(a("<span/>").text("2")))},c.prototype.initEvents=function(){this.setEvent("change","input",function(b){this.trigger("change_priority",a(b.currentTarget).val())})},c.prototype.setValue=function(a){var b=this.$el.find("input[name=priority][value="+a+"]");b.length>0&&b.prop("checked",!0)},c.prototype.getValue=function(){return this.$el.find("input:checked").val()},c}(jQuery,b.core.PUIElement),h=function(a,b){function c(a,c){this.faces=c,b.call(this,a)}function d(b){var c=this.$el.find(".ic-ui-face");return b&&(c=c.filter(function(c,d){return b.indexOf(a(d).data("face"))>-1})),c}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){for(var b=a("<ul/>"),c=0;c<this.faces.length;c++)b.append(this.faceButton(this.faces[c],this.name,"<li/>"));return b},c.prototype.initEvents=function(){this.setEvent("click",".ic-ui-face",function(b){var c=a(b.currentTarget);if(!c.hasClass("disabled")){var d=c.data("face");this.trigger("click",d)}})},c.prototype.disableFaces=function(a){var b=d.call(this,a);b.addClass("disabled")},c.prototype.enableFaces=function(a){var b=d.call(this,a);b.removeClass("disabled")},c.prototype.faceButton=function(b,c,d){return c||(c="face"),a(d).data("face",b).addClass("ic-ui-face").addClass("ic-ui-"+c+"-"+b)},c}(jQuery,b.core.PUIElement),i=function(a,b){function c(){b.call(this,"groupbuttons"),this.group=0}function d(b,c,d){return c||(c=b),a("<label/>").append(a("<button/>").attr("type","button").attr("data-action",b)).addClass(d?"disabled":"").append(a("<span/>").text(c))}function e(){return this.group++,g.call(this),!0}function f(){return 0==this.group?!1:(0==--this.group&&h.call(this),!0)}function g(){this.$el.find(".disabled").removeClass("disabled")}function h(){this.$el.find("button").filter(":not([data-action=open])").addClass("disabled")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<span/>").append(d("open")).append(d("close",null,!0)).append(d("negative",null,!0)).append(d("inverse",null,!0)).append(d("mirror",null,!0))},c.prototype.initEvents=function(){this.setEvent("click","button",function(b){var c=a(b.currentTarget),d=c.data("action");switch(d){case"open":e.call(this)&&this.trigger("click","(");break;case"close":f.call(this)&&this.trigger("click",") ");break;case"negative":f.call(this)&&this.trigger("click",")' ");break;case"inverse":f.call(this)&&this.trigger("click",")i ");break;case"mirror":f.call(this)&&this.trigger("click",")m ")}})},c.prototype.updateGroupStatus=function(a){var b,c,d=0,e=a.replace(/[^/(|/)]/g,"");for(b=0;b<e.length;b++)c=e.charAt(b),"("==c&&d++,")"==c&&d--;d>0?g.call(this):h.call(this)},c}(jQuery,b.core.PUIElement),j=function(a,b,c,d){function e(a,c){this.avoidInteraction=c,b.call(this,a||"piece"),this.setValue(a),this.faces=null,this.axis=null}return e.prototype=Object.create(b.prototype),e.prototype.getElement=function(){return a("<ul/>").addClass("ic-ui-piece").data("piece",this.name)},e.prototype.initEvents=function(){this.avoidInteraction||this.setEvent("click",function(){if(!this.enabled)return!1;if(this.faces){var a=this.faces.join("");a.length>=2&&(a="["+a+"]"),this.reset(),this.trigger("editend",a)}else this.faces=[],this.trigger("editbegin","");return!0})},e.prototype.setValue=function(a){if(a){this.reset();for(var b=0;b<a.length;b++)this.addFace(a.charAt(b))}},e.prototype.getValue=function(){return this.$el.data("piece")},e.prototype.addFace=function(a,b){this.$el.append(c.prototype.faceButton(a,"face","<li/>")),(this.faces||b)&&(this.faces||(this.faces=[]),this.faces.push(a),this.$el.data("piece",this.faces.join("")),this.trigger("wontaccept",d.service.notAcceptedWithPiece(this.faces)))},e.prototype.reset=function(){this.faces=null,this.$el.empty()},e}(jQuery,b.core.PUIElement,h,a["static"].RubikUtils),k=function(a,b){function c(){b.call(this,"highlights-list")}function d(b,c,d,e){return a("<li/>").append(a("<label/>").text(c).prepend(a("<input/>").addClass("ic-hl-"+b).attr("type","radio").attr("name","hl-choice").attr("value",d).prop("checked",e)))}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").append(a("<input/>").attr("type","checkbox").attr("id","ic-highlight-colors")).append(a("<span/>").text("show colors"))).append(a("<ul/>").append(d("render","none","none",!0)).append(d("highlight","face U",["ULB","UB","UBR","UL","U","UR","UFL","UF","URF"])).append(d("highlight","face F",["FLU","FU","FUR","FL","F","FR","FDL","FD","FRD"])).append(d("highlight","face R",["RFU","RU","RUB","RF","R","RB","RDF","RD","RBD"])).append(d("highlight","face D",["DLF","DF","DFR","DL","D","DR","DBL","DB","DRB"])).append(d("highlight","face B",["BRU","BU","BUL","BR","B","BL","BDR","BD","BLD"])).append(d("highlight","face L",["LBU","LU","LUF","LB","L","LF","LDB","LD","LFD"])).append(d("highlight","slice M",["F","U","B","D","UF","UB","DB","DF"])).append(d("highlight","slice E",["F","R","B","L","FL","FR","BL","BR"])).append(d("highlight","slice S",["U","R","D","L","UL","UR","DR","DL"])).append(d("highlight","parity",["DF","DFR","UB","UBR"])).append(d("highlight","J-perm",["ULB","UL","UFL","UF"])).append(d("highlight","N-perm",["URF,UR,ULB,UL"])).append(d("highlight","orient 2 edges",["UF","UB"])).append(d("highlight","orient 4 edges",["UF","UB","UL","UR"])).append(d("highlight","orient corner",["UFL"])).append(d("highlight","custom","custom")))},c.prototype.initEvents=function(){this.setEvent("change","#ic-highlight-colors",function(b){this.trigger("showcolors",a(b.currentTarget).prop("checked"))}),this.setEvent("change","input[type=radio]",function(b){this.trigger("changelist",a(b.currentTarget).val())})},c.prototype.setValue=function(b){var c=this.$el.find("label").filter(function(c,d){return a(d).text()==b});1==c.length&&c.find("input[type=radio]").prop("checked",!0)},c.prototype.getValue=function(){return this.$el.find("input[type=radio]:checked").val()},c}(jQuery,b.core.PUIElement),l=function(a,b,c,d){function e(){b.call(this,"highlights-pieces"),this.pieces=[]}function f(a){var b=new c(a,!0);return b.toDom().addClass("unselected")}return e.prototype=Object.create(b.prototype),e.prototype.getElement=function(){return a("<div/>").append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("U")).append(f("D")).append(f("F")).append(f("B")).append(f("L")).append(f("R"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("UF")).append(f("UB")).append(f("UL")).append(f("UR"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("DF")).append(f("DB")).append(f("DL")).append(f("DR"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("FL")).append(f("FR")).append(f("BL")).append(f("BR"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("UFL")).append(f("ULB")).append(f("UBR")).append(f("URF"))).append(a("<div/>").addClass("ic-highlights-pieces-container").append(f("DFR")).append(f("DRB")).append(f("DBL")).append(f("DLF")))},e.prototype.initEvents=function(){this.setEvent("click",".ic-ui-piece",function(b){var c=a(b.currentTarget),d=c.data("piece");if(c.hasClass("unselected"))c.removeClass("unselected"),this.pieces.push(d);else{c.addClass("unselected");var e=this.pieces.indexOf(d);e>-1&&this.pieces.splice(e,1)}this.trigger("changepiece",this.pieces.join(","))})},e.prototype.setValue=function(b){if("array"!=typeof b)throw new Error("RHHighlightPieces.setValue() called with a wrong value");this.pieces=b;var c,e,f,g,h=this.$el.find(".ic-ui-piece");for(h.addClass("unselected"),c=0;c<this.pieces.length;c++)e=this.pieces[c],f=d.service.targetOf(e),g=h.filter(function(b,c){return a(c).data("piece")==e}),g.removeClass("unselected");this.trigger("changepiece",this.pieces.join(","))},e.prototype.getValue=function(){return this.pieces},e}(jQuery,b.core.PUIElement,j,a["static"].RubikUtils),m=function(a,b){function c(){b.call(this,"moveslist")}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<p/>").addClass("ic-ui-moves").html("&nbsp;")},c.prototype.setValue=function(a){this.$el.html(a)},c.prototype.getValue=function(){return this.$el.text()},c}(jQuery,b.core.PUIElement),n=function(a,b){function c(){b.call(this,"replay"),this.replaytype="play"}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").addClass("ic-solve-replay-chose").append(a("<input/>").attr("type","radio").attr("name","replay").val("restore").prop("checked",!0)).append(a("<span/>").text("restore the last scrambled cube"))).append(a("<label/>").addClass("ic-solve-replay-chose").addClass("disabled").append(a("<input/>").attr("type","radio").attr("name","replay").val("click")).append(a("<span/>").text("click the cube to step ahead"))).append(a("<label/>").addClass("ic-solve-replay-chose").addClass("disabled").append(a("<input/>").attr("type","radio").attr("name","replay").val("play")).append(a("<span/>").text("play each single move every")).append(a("<input/>").attr("type","textfield").addClass("ic-ui-textfield").attr("id","ic-solve-replay-delay").val("1.5")).append(a("<span/>").text("seconds"))).append(a("<label/>").append(a("<button/>").attr("type","button").attr("id","ic-solve-replay-execute").append(a("<span/>").text("replay"))))},c.prototype.initEvents=function(){this.setEvent("change","input[name=replay]",function(b){var c=this.$el.find(".ic-solve-replay-chose");c.addClass("disabled");var d=a(b.currentTarget);d.is(":checked")&&d.closest(".ic-solve-replay-chose").removeClass("disabled")}),this.setEvent("click",".ic-solve-replay-chose",function(b){var c=a(b.currentTarget).find("input[name=replay]");c.length&&!c.is(":checked")&&(this.replaytype=c.val(),this.trigger("change",this.replaytype))}),this.setEvent("click","#ic-solve-replay-execute",function(){var a="play"==this.replaytype?this.$el.find("#ic-solve-replay-delay").val():"manual";this.trigger("replay",a)})},c}(jQuery,b.core.PUIElement),o=function(a,b){function c(a){b.call(this,a)}return c.prototype=Object.create(b.prototype),c.prototype.getElement=function(){return a("<div/>").append(a("<label/>").append(a("<input/>").addClass("ic-ui-sequence").attr("type","text"))).append(a("<label/>").append(a("<button/>").attr("id","ic-"+this.name+"-execute").attr("type","button").append(a("<span/>").text("execute"))))},c.prototype.initEvents=function(){this.setEvent("keyup",".ic-ui-sequence",function(a){var b=13==a.keyCode?"execute":"change",c=this.$el.find(".ic-ui-sequence").val();this.trigger(b,c)}),this.setEvent("click","button",function(){this.trigger("execute",this.$el.find(".ic-ui-sequence").val())})},c.prototype.setValue=function(a){this.$el.find(".ic-ui-sequence").val(a),this.trigger("change",a)},c.prototype.getValue=function(){return this.$el.find(".ic-ui-sequence").val()},c}(jQuery,b.core.PUIElement),p=function(a,b,c,d,e,f){function g(a){this.sequence=null,this.moveslist=null,b.call(this,a),this.addCustomComponents()}function h(b,c){"solve"==c&&(c="pieces");var d=a.parse[c],e=d?d(b):[];e.length||(e=["&nbsp;"]),this.elementsMap[this.name+"-moveslist"].elementsMap.moveslist.setValue(e.join(","))}function i(){if(this.mainUI.isocube){var b=this.elementsMap[this.name+"-moveslist"].elementsMap.moveslist.getValue().split(",");this.mainUI.isocube.execute(a.clear.uncollapseSequence(b),10)}}function j(a,b){switch(b){case"change":h.call(this,a,this.name);break;case"execute":i.call(this)}}return g.prototype=Object.create(b.prototype),g.prototype.addComponents=function(){var a=new c(this.name,"sequence","sequence");this.sequence=new e(this.name),a.addChild(this.sequence);var b=new c(this.name,"moveslist","moves");this.moveslist=new f,b.addChild(this.moveslist),this.sequence.on("change",j.bind(this)),this.sequence.on("execute",j.bind(this))},g.prototype.addCustomComponents=function(){this.addChild(new d([this.sequence.parent])),this.addChild(new d([this.moveslist.parent]))},g}(a["static"].RubikUtils,b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,o,m),q=function(a,b,c,d,e,f){function g(){a.call(this,"moves"),this.editpiece=!1}function h(a){var b=this.elementsMap[this.name+"-sequence"].elementsMap.moves,c=b.getValue(),d=c+a;b.setValue(d)}function i(a){var b=this.elementsMap[this.name+"-piece"].elementsMap.piece;b.addFace(a)}function j(){this.elementsMap[this.name+"-faces"].elementsMap.face.enableFaces(),this.elementsMap[this.name+"-slices"].elementsMap.slice.enableFaces(),this.elementsMap[this.name+"-axis"].elementsMap.axis.enableFaces()}function k(a){this.elementsMap[this.name+"-faces"].elementsMap.face.disableFaces(a)}function l(a){this.editpiece?i.call(this,a):h.call(this,"X"==a||"Y"==a||"Z"==a?a.toLowerCase():a)}function m(a,b){switch(b){case"editbegin":this.editpiece=!0,this.elementsMap[this.name+"-slices"].elementsMap.slice.disableFaces(),this.elementsMap[this.name+"-axis"].elementsMap.axis.disableFaces();break;case"wontaccept":k.call(this,a);break;case"editend":this.editpiece=!1,j.call(this),h.call(this,a)}}function n(a){h.call(this,a)}return g.prototype=Object.create(a.prototype),g.prototype.addCustomComponents=function(){var a=new b(this.name,"faces","faces"),g=new d("face",["U","D","F","B","L","R"]);a.addChild(g);var h=new b(this.name,"piece","piece"),i=new e;h.addChild(i);var j=new b(this.name,"slices","slices"),k=new d("slice",["M","E","S"]);j.addChild(k);var o=new b(this.name,"axis","axis"),p=new d("axis",["X","Y","Z"]);o.addChild(p);var q=new b(this.name,"group","group"),r=new f;q.addChild(r),g.on("click",l.bind(this)),i.on("editbegin",m.bind(this)),i.on("editend",m.bind(this)),i.on("wontaccept",m.bind(this)),k.on("click",l.bind(this)),p.on("click",l.bind(this)),r.on("click",n.bind(this)),this.sequence.on("change",function(a){this.elementsMap["moves-group"].elementsMap.groupbuttons.updateGroupStatus(a)}.bind(this)),this.addChild(new c([this.sequence.parent])),this.addChild(new c([a,h])),this.addChild(new c([j,o])),this.addChild(new c([q])),this.addChild(new c([this.moveslist.parent]))},g}(p,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,h,j,i),r=function(a,b,c,d,e,f,g){function h(){c.call(this,"solve"),this.lastScramble=null}function i(){var c=a.solve.explain(this.mainUI.isocube.getCube()),d=c.s.join(","),e=c.e;this.sequence.setValue(d),this.trigger("get_pattern",b.explainAll(e))}function j(a){switch(this.lastScramble&&this.mainUI.isocube.setCube(this.lastScramble),this.trigger("replaybegin",a),a){case"":}}function k(){}return h.prototype=Object.create(c.prototype),h.prototype.addCustomComponents=function(){var a=new d("solve","pattern","analyze"),b=new f;a.addChild(b);var c=new d("solve","replay","replay"),h=new g;c.addChild(h),b.on("get_pattern",i.bind(this)),h.on("replay",j.bind(this)),h.on("change",k.bind(this)),this.sequence.on("execute",function(){this.lastScramble=this.mainUI.isocube.getCube()}.bind(this)),this.addChild(new e([a])),this.addChild(new e([this.sequence.parent])),this.addChild(new e([this.moveslist.parent])),this.addChild(new e([c]))},h}(a["static"].RubikSolver,a["static"].RubikTeacher,p,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,c,n),s=function(a,b,c,d,e,f,g){function h(){a.call(this,"cubesetup"),this.editpiece=!1,this.current_position=null,this.current_piece=null,this.current_face=null,this.disableFaces(),this.togglePieceEnable(),this.elementsMap[this.name+"-piece"].elementsMap.piece.disable()}function i(a,b){if(!a||!b)return null;var c="",d=a.indexOf(b);if(-1==d)return null;for(var e=0;e<a.length;e++)c+=a.charAt(d),++d==a.length&&(d=0);return c}function j(a){if(this.mainUI.isocube){var b=this.mainUI.isocube.iso.engine.getObjectsAtScreenCoord({x:a.pageX,y:a.pageY});if(b.length>0){b.sort(this.mainUI.isocube.backfaceState()?function(a,b){return a._zIndex-b._zIndex}:function(a,b){return b._zIndex-a._zIndex});var c=b[0],d=c._parent,e=i(d.get("sticker"),c.get("sticker")),f=i(d.get("position"),c.get("position"));e&&f?this.setPiece(e,f):this.unsetPiece()}else this.unsetPiece()}}function k(a){this.mainUI&&this.mainUI.isocube&&this.mainUI.isocube.backfaceToggle(a)}function l(a){if(this.mainUI&&this.mainUI.isocube){var b=this.elementsMap[this.name+"-piece"].elementsMap.piece,c=this.mainUI.isocube.iso.container;a?($(c).on("click",j.bind(this)),b.enable()):($(c).off("click"),this.unsetPiece(),b.disable(),b.reset())}}function m(){var a=this.mainUI.isocube.getImage();window.open(a)}function n(){this.mainUI.isocube.setCube()}function o(a){this.editpiece&&this.addMoveToPiece(a)}function p(a){this.disableFaces(a)}function q(a){if(this.current_face){var b={};b[this.current_face]=a,this.trigger("change_colors",b)}}function r(a){this.current_face=a;var b=this.$el.find(".ic-ui-face-"+a);b.length>0&&(this.$el.find(".ic-ui-face.active").removeClass("active"),b.addClass("active"))}return h.prototype=Object.create(a.prototype),h.prototype.addComponents=function(){var a=new b(this.name,"setup","setup"),h=new d;a.addChild(h);var i=new b(this.name,"piece","get piece"),j=new f(null,!0);i.addChild(j);var s=new b("editcube","faces","faces"),t=new e("face",["U","D","F","B","L","R"]);s.addChild(t);var u=new b("editcube","piece","set piece"),v=new f(null,!0);u.addChild(v);var w=new b(this.name,"colors","colors"),x=new e("face",["U","D","F","B","L","R"]),y=new g;w.addChild(x),w.addChild(y),h.on("togglebackface",k.bind(this)),h.on("toggleeditcube",l.bind(this)),h.on("getimage",m.bind(this)),h.on("reset",n.bind(this)),t.on("click",o.bind(this)),v.on("wontaccept",p.bind(this)),x.on("click",r.bind(this)),y.on("change_colors",q.bind(this)),this.addChild(new c([a])),this.addChild(new c([i])),this.addChild(new c([u,s])),this.addChild(new c([w]))},h.prototype.addMoveToPiece=function(a){var b=this.elementsMap["editcube-piece"].elementsMap.piece;b.addFace(a,!0);var c=b.getValue();c.length==this.current_position.length&&(this.current_piece=c,this.mainUI.isocube.setPiece(this.current_position,this.current_piece),this.unsetPiece(),b.reset())},h.prototype.enableAllFaces=function(){this.elementsMap["editcube-faces"].elementsMap.face.enableFaces()},h.prototype.disableFaces=function(a){this.elementsMap["editcube-faces"].elementsMap.face.disableFaces(a)},h.prototype.togglePieceEnable=function(a){var b=this.elementsMap["editcube-piece"].elementsMap.piece;a?b.enable():b.disable()},h.prototype.setPiece=function(a,b){return this.mainUI.isocube.iso.console._children.cubeletInfo.setRenderInfo(b+" : "+a),this.mainUI.isocube.iso.console._render(),this.mainUI.isocube.iso.console._children.cubeletInfo.setAnimationStep(function(a){this.setOptions({alpha:1-a/1e3})}),this.mainUI.isocube.iso.console.startAnimation(1e3),1==b.length?void this.unsetPiece():(this.current_piece=a,this.current_position=b,this.elementsMap[this.name+"-piece"].elementsMap.piece.setValue(a),this.elementsMap["editcube-piece"].elementsMap.piece.enable(),this.elementsMap["editcube-piece"].elementsMap.piece.reset(),this.editpiece=!0,void this.enableAllFaces())},h.prototype.unsetPiece=function(){this.current_piece=null,this.current_position=null,this.mainUI.isocube.iso.console.clear(),this.elementsMap[this.name+"-piece"].elementsMap.piece.reset(),this.elementsMap["editcube-piece"].elementsMap.piece.disable(),this.elementsMap["editcube-piece"].elementsMap.piece.reset(),this.editpiece=!1,this.disableFaces()},h}(b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,e,h,j,d),t=function(a,b,c,d,e){function f(){a.call(this,"explain")}function g(a){var b=this.elementsMap["explain-list"].elementsMap["explain-list"];b.setPriority(a),b.showCurrentPriority()}return f.prototype=Object.create(a.prototype),f.prototype.addComponents=function(){var a=new b("explain","priority","verbosity"),f=new d;a.addChild(f);var h=new b("explain","list","solving process"),i=new e;h.addChild(i),f.on("change_priority",g.bind(this)),this.addChild(new c([a])),this.addChild(new c([h]))},f.prototype.setExplain=function(a){var b=this.elementsMap["explain-list"].elementsMap["explain-list"];b.setValue(a)},f}(b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,g,f),u=function(a,b,c,d,e){function f(){a.call(this,"highlights")}function g(a){this.parent.isocube&&(a.indexOf("none")>-1?this.parent.isocube.highlight():this.parent.isocube.highlight(a))}function h(a,b){switch(b){case"changepiece":this.elementsMap["highlights-predefined"].elementsMap["highlights-list"].setValue("custom");break;case"changelist":"custom"==a&&(a=this.elementsMap["highlights-pieces"].elementsMap["highlights-pieces"].pieces.join(","))}g.call(this,a.split(","))}function i(a){this.parent.isocube&&this.parent.isocube.highlightColor(a)}return f.prototype=Object.create(a.prototype),f.prototype.addComponents=function(){var a=new b("highlights","predefined","list"),f=new d;a.addChild(f);var g=new b("highlights","pieces","pieces"),j=new e;g.addChild(j),f.on("showcolors",i.bind(this)),f.on("changelist",h.bind(this)),j.on("changepiece",h.bind(this)),this.addChild(new c([a])),this.addChild(new c([g]))},f}(b.panels.PUIPanel,b.panels.PUIPanelComponent,b.panels.PUIPanelComponentGroup,k,l),v=function(a,b,c,d,e,f,g,h){function i(a,b){c.call(this,a),this.init(b)}function j(a){this.isocube.updateColors(a),this.initStyles()}function k(a){this.panelsMap.explain.setExplain(a)}return i.prototype=Object.create(c.prototype),i.prototype.init=function(a){this.initNavigation(),this.initStyles(),this.isocube=a,this.addPanel(new d,"scramble"),this.addPanel(new e,"solve").on("get_pattern",k.bind(this)),this.addPanel(new f,"explain"),this.addPanel(new g,"highlight"),this.addPanel(new h,"setup").on("change_colors",j.bind(this)),this.uiStateChange("edit"),setTimeout(function(){this.changePanel("moves",1e3)}.bind(this),100)},i.prototype.uiStateChange=function(a){switch(this.eventlog&&console.log("ui state changed to",a),a){case"execute":break;case"replay":break;case"solve":break;case"edit":}},i.prototype.initStyles=function(){var c="faces_colors",d=a("#"+c),e=[];0==d.length&&(d=a("<style/>").attr("id",c),a("head").append(d));for(var f in b.colors)b.colors.hasOwnProperty(f)&&e.push("#"+this.ID+" .ic-ui-face-"+f+" {background-color:"+b.colors[f]+";}");d.text(e.join(" "))},i}(jQuery,a["static"].RubikUtils,b.core.PUIMain,q,r,t,u,s),w=function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t){
+var u={};return u.RHMainUI=a,u.elements={},u.elements.RHAnalyze=b,u.elements.RHCubeColors=c,u.elements.RHCubeSetup=d,u.elements.RHExplainList=e,u.elements.RHExplainPriority=f,u.elements.RHFaceButtons=g,u.elements.RHGroupButtons=h,u.elements.RHHighlightList=i,u.elements.RHHighlightPieces=j,u.elements.RHMovesList=k,u.elements.RHPieceButton=l,u.elements.RHReplay=m,u.elements.RHSequenceInput=n,u.panels={},u.panels.PanelCubeSetup=o,u.panels.PanelExplain=p,u.panels.PanelHighlights=q,u.panels.PanelMoves=r,u.panels.PanelSequenceToMoves=s,u.panels.PanelSolve=t,u}(v,c,d,e,f,g,h,i,k,l,m,j,n,o,s,t,u,q,p,r);return w}(RubikHelper);
\ No newline at end of file
diff --git a/src/elements/RHHighlightList.js b/src/elements/RHHighlightList.js
index e36eb66..1ae2bc6 100644
--- a/src/elements/RHHighlightList.js
+++ b/src/elements/RHHighlightList.js
@@ -25,27 +25,37 @@ var RHHighlightList = (function($, PUIElement){
      * *******************************/
 
     RHHighlightList.prototype.getElement = function() {
-        return $('<ul/>')
-            .append(highlightChoice('render','none','none',true))
-            .append(highlightChoice('highlight','face U',['ULB','UB','UBR','UL','U','UR','UFL','UF','URF']))
-            .append(highlightChoice('highlight','face F',['FLU','FU','FUR','FL','F','FR','FDL','FD','FRD']))
-            .append(highlightChoice('highlight','face R',['RFU','RU','RUB','RF','R','RB','RDF','RD','RBD']))
-            .append(highlightChoice('highlight','face D',['DLF','DF','DFR','DL','D','DR','DBL','DB','DRB']))
-            .append(highlightChoice('highlight','face B',['BRU','BU','BUL','BR','B','BL','BDR','BD','BLD']))
-            .append(highlightChoice('highlight','face L',['LBU','LU','LUF','LB','L','LF','LDB','LD','LFD']))
-            .append(highlightChoice('highlight','slice M',['F','U','B','D','UF','UB','DB','DF']))
-            .append(highlightChoice('highlight','slice E',['F','R','B','L','FL','FR','BL','BR']))
-            .append(highlightChoice('highlight','slice S',['U','R','D','L','UL','UR','DR','DL']))
-            .append(highlightChoice('highlight','parity',['DF','DFR','UB','UBR']))
-            .append(highlightChoice('highlight','J-perm',['ULB','UL','UFL','UF']))
-            .append(highlightChoice('highlight','orient 2 edges',['UF','UB']))
-            .append(highlightChoice('highlight','orient 4 edges',['UF','UB','UL','UR']))
-            .append(highlightChoice('highlight','orient corner',['UFL']))
-            .append(highlightChoice('highlight','custom','custom'));
+        return $('<div/>')
+            .append($('<label/>')
+                .append( $('<input/>').attr('type','checkbox').attr('id','ic-highlight-colors') )
+                .append( $('<span/>').text('show colors') )
+            )
+            .append($('<ul/>')
+                .append(highlightChoice('render','none','none',true))
+                .append(highlightChoice('highlight','face U',['ULB','UB','UBR','UL','U','UR','UFL','UF','URF']))
+                .append(highlightChoice('highlight','face F',['FLU','FU','FUR','FL','F','FR','FDL','FD','FRD']))
+                .append(highlightChoice('highlight','face R',['RFU','RU','RUB','RF','R','RB','RDF','RD','RBD']))
+                .append(highlightChoice('highlight','face D',['DLF','DF','DFR','DL','D','DR','DBL','DB','DRB']))
+                .append(highlightChoice('highlight','face B',['BRU','BU','BUL','BR','B','BL','BDR','BD','BLD']))
+                .append(highlightChoice('highlight','face L',['LBU','LU','LUF','LB','L','LF','LDB','LD','LFD']))
+                .append(highlightChoice('highlight','slice M',['F','U','B','D','UF','UB','DB','DF']))
+                .append(highlightChoice('highlight','slice E',['F','R','B','L','FL','FR','BL','BR']))
+                .append(highlightChoice('highlight','slice S',['U','R','D','L','UL','UR','DR','DL']))
+                .append(highlightChoice('highlight','parity',['DF','DFR','UB','UBR']))
+                .append(highlightChoice('highlight','J-perm',['ULB','UL','UFL','UF']))
+                .append(highlightChoice('highlight','N-perm',['URF,UR,ULB,UL']))
+                .append(highlightChoice('highlight','orient 2 edges',['UF','UB']))
+                .append(highlightChoice('highlight','orient 4 edges',['UF','UB','UL','UR']))
+                .append(highlightChoice('highlight','orient corner',['UFL']))
+                .append(highlightChoice('highlight','custom','custom'))
+            );
     };
 
     RHHighlightList.prototype.initEvents = function() {
-        this.setEvent('change','input',function(e){
+        this.setEvent('change','#ic-highlight-colors',function(e){
+            this.trigger('showcolors',$(e.currentTarget).prop('checked'));
+        });
+        this.setEvent('change','input[type=radio]',function(e){
             this.trigger('changelist',$(e.currentTarget).val());
         });
     };
@@ -55,12 +65,12 @@ var RHHighlightList = (function($, PUIElement){
             return ($(e).text()==value);
         });
         if($el.length==1){
-            $el.find('input').prop('checked',true);
+            $el.find('input[type=radio]').prop('checked',true);
         }
     };
 
     RHHighlightList.prototype.getValue = function() {
-        return this.$el.find('input:checked').val();
+        return this.$el.find('input[type=radio]:checked').val();
     };
 
     /* *******************************
diff --git a/src/panels/PanelHighlights.js b/src/panels/PanelHighlights.js
index 8397a60..c061fd3 100644
--- a/src/panels/PanelHighlights.js
+++ b/src/panels/PanelHighlights.js
@@ -34,6 +34,7 @@ var PanelHighlights = (function(PUIPanel, PUIPanelComponent, PUIPanelComponentGr
         var highlight_pieces_list = new RHHighlightPieces();
         highlight_pieces.addChild(highlight_pieces_list);
 
+        highlight_predefined_list.on('showcolors',highlightColorsHandler.bind(this));
         highlight_predefined_list.on('changelist',highlightHandler.bind(this));
         highlight_pieces_list.on('changepiece',highlightHandler.bind(this));
 
@@ -71,6 +72,11 @@ var PanelHighlights = (function(PUIPanel, PUIPanelComponent, PUIPanelComponentGr
         executeHighlight.call(this,data.split(','));
 
     }
+    
+    function highlightColorsHandler(data,event) {
+        if(!this.parent.isocube) return;
+        this.parent.isocube.highlightColor(data);
+    }
 
     return PanelHighlights;