diff --git a/.gitignore b/.gitignore
index c33fd54..cd24b50 100644
--- a/.gitignore
+++ b/.gitignore
@@ -50,3 +50,4 @@ node_modules/
 test/story-formats/
 build.bat
 test/tweego.exe
+test/
diff --git a/dist/noble.min.css b/dist/noble.min.css
new file mode 100644
index 0000000..8d9df92
--- /dev/null
+++ b/dist/noble.min.css
@@ -0,0 +1 @@
+div.noble-wrapper{position:relative;width:400px;height:400px;margin:1em}div.noble-wrapper div.layer{position:absolute;width:100%;height:100%}div#editor-container{height:400px}div#editor-container #edit-window{height:400px;width:400px;float:left}div#editor-container #edit-options{height:400px;padding:1em}div#editor-container div.tab-container{overflow:hidden;border:1px solid #ccc;background-color:#555}div#editor-container #tab-buttons{background-color:#f5f5f5;float:left;border:none;outline:0;cursor:pointer;padding:1em;transition:.3s}div#editor-container #tab-buttons:hover{background-color:#ddd;color:#111}div#editor-container #tab-buttons.active{background-color:#ccc;color:#111}div#editor-container div.tab-content{display:none;padding:1em;border:1px solid #ccc;border-top:none}div.noble-wrapper.flat{border:none}div.noble-wrapper.material-light{box-shadow:0 0 2px #888}div.noble-wrapper.material-dark{box-shadow:0 0 2px #000}div.noble-wrapper.border-thin-light{border:2px solid #111}div.noble-wrapper.border-thin-dark{border:2px solid #eee}div.noble-wrapper.border-thick-light{border:6px solid #111}div.noble-wrapper.border-thick-dark{border:6px solid #eee}div.noble-wrapper.border-outset-light{border:6px outset #555}div.noble-wrapper.border-outset-dark{border:6px outset #ccc}div.noble-wrapper.border-inset-light{border:6px inset #555}div.noble-wrapper.border-inset-dark{border:6px inset #ccc}div.noble-wrapper.tiny{width:64px;height:64px}div.noble-wrapper.small{width:128px;height:128px}div.noble-wrapper.medium{width:256px;height:256px}div.noble-wrapper.large{width:320px;height:320px}div.noble-wrapper.max-safe{width:400px;height:400px}div.noble-wrapper.oversized{width:600px;height:600px}div.noble-wrapper.relative{max-width:400px;max-height:400px}div.noble-wrapper.relative.small-em{max-width:4rem;max-height:4rem}div.noble-wrapper.relative.medium-em{max-width:8rem;max-height:8rem}div.noble-wrapper.relative.large-em{max-width:12rem;max-height:12rem}div.noble-wrapper.relative.very-large-em{max-width:16rem;max-height:16rem}
\ No newline at end of file
diff --git a/dist/noble.min.js b/dist/noble.min.js
new file mode 100644
index 0000000..e859a6e
--- /dev/null
+++ b/dist/noble.min.js
@@ -0,0 +1 @@
+window.Noble=window.Noble||{},Noble.config={cache:!0,portraitPassages:{tag:"portrait",onStartup:!0},storyVar:"$nobleAvatars"},window.Noble=window.Noble||{},window.Noble.cache=function(){var c=this,r=[],o=document.location.href.split("/");o.pop(),o=o.join("/")+"/",c.push=function(e,n){e.match(/^http/)||(e=o+e);var a=new Image;r[e]&&n?n(e):(n&&(a.onload=n,a.onerror=n),r[e]=a),a.src=e},c.pushArray=function(e,n,a){for(var r=0,o=e.length,t=0;t<o;t++)c.push(e[t],function(e){n&&n(e),++r==o&&setTimeout(function(){a(e)},1)})}},window.Noble=window.Noble||{},window.Noble.components={accessories:{components:{u:["accessory_1.png","accessory_10.png","accessory_11.png","accessory_12.png","accessory_13.png","accessory_14.png","accessory_15.png","accessory_16.png","accessory_17.png","accessory_18.png","accessory_19.png","accessory_2.png","accessory_20.png","accessory_3.png","accessory_4.png","accessory_5.png","accessory_6.png","accessory_7.png","accessory_8.png","accessory_9.png"],f:["accessory_f21.png"],m:["accessory_m21.png"]},required:!1,dir:{u:"./cac/accessories/",f:"./cac/accessories/f/",m:"./cac/accessories/m/"}},base:{components:{u:[],f:["head_f1.png","head_f10.png","head_f11.png","head_f12.png","head_f13.png","head_f14.png","head_f15.png","head_f2.png","head_f3.png","head_f4.png","head_f5.png","head_f6.png","head_f7.png","head_f8.png","head_f9.png"],m:["head_m1.png","head_m10.png","head_m11.png","head_m12.png","head_m13.png","head_m14.png","head_m15.png","head_m2.png","head_m3.png","head_m4.png","head_m5.png","head_m6.png","head_m7.png","head_m8.png","head_m9.png"]},required:!0,dir:{u:"./cac/base/",f:"./cac/base/f/",m:"./cac/base/m/"}},beard:{components:{u:[],f:[],m:["beard_1.png","beard_2.png","beard_3.png","beard_4.png","beard_5.png"]},required:!1,dir:{u:"./cac/beard/",f:"./cac/beard/f/",m:"./cac/beard/m/"}},eyes:{components:{u:[],f:["eye_f1.png","eye_f2.png","eye_f3.png","eye_f4.png","eye_f5.png","eye_f6.png","eye_f7.png","eye_f8.png"],m:["eye_m1.png","eye_m2.png","eye_m3.png","eye_m4.png","eye_m5.png","eye_m6.png","eye_m7.png","eye_m8.png"]},required:!0,dir:{u:"./cac/eyes/",f:"./cac/eyes/f/",m:"./cac/eyes/m/"}},features:{components:{u:["scar_1.png","scar_2.png"],f:[],m:["mustache_1.png","sideburn_1.png"]},required:!1,dir:{u:"./cac/features/",f:"./cac/features/f/",m:"./cac/features/m/"}},glasses:{components:{u:["eyepatch_1.png","eyepatch_2.png","glasses_1.png","glasses_2.png","glasses_3.png","glasses_4.png"],f:[],m:[]},required:!1,dir:{u:"./cac/glasses/",f:"./cac/glasses/f/",m:"./cac/glasses/m/"}},hair:{components:{u:[],f:["hair_f1.png","hair_f10.png","hair_f11.png","hair_f12.png","hair_f13.png","hair_f14.png","hair_f15.png","hair_f16.png","hair_f17.png","hair_f18.png","hair_f19.png","hair_f2.png","hair_f20.png","hair_f21.png","hair_f22.png","hair_f23.png","hair_f24.png","hair_f25.png","hair_f26.png","hair_f3.png","hair_f4.png","hair_f5.png","hair_f6.png","hair_f7.png","hair_f8.png","hair_f9.png"],m:["hair_m1.png","hair_m10.png","hair_m11.png","hair_m12.png","hair_m13.png","hair_m14.png","hair_m15.png","hair_m16.png","hair_m17.png","hair_m18.png","hair_m19.png","hair_m2.png","hair_m20.png","hair_m21.png","hair_m22.png","hair_m23.png","hair_m24.png","hair_m25.png","hair_m26.png","hair_m3.png","hair_m4.png","hair_m5.png","hair_m6.png","hair_m7.png","hair_m8.png","hair_m9.png"]},required:!1,dir:{u:"./cac/hair/",f:"./cac/hair/f/",m:"./cac/hair/m/"}},mouths:{components:{u:[],f:["mouth_f1.png","mouth_f2.png","mouth_f3.png","mouth_f4.png","mouth_f5.png","mouth_f6.png","mouth_f7.png","mouth_f8.png"],m:["mouth_m1.png","mouth_m2.png","mouth_m3.png","mouth_m4.png","mouth_m5.png","mouth_m6.png","mouth_m7.png","mouth_m8.png"]},required:!0,dir:{u:"./cac/mouths/",f:"./cac/mouths/f/",m:"./cac/mouths/m/"}},neck:{components:{u:["necklace_1.png","necklace_2.png","necklace_3.png","necklace_4.png","necklace_5.png","necklace_6.png"],f:["boa_1.png","boa_2.png","boa_3.png","boa_4.png","necklace_f7.png","necklace_f8.png"],m:["necklace_m7.png","necklace_m8.png"]},required:!1,dir:{u:"./cac/neck/",f:"./cac/neck/f/",m:"./cac/neck/m/"}}},function(){function r(e,n,a,r,o){$(document).trigger({type:":set-slot",action:e,group:n,gender:a,component:r,previous:o})}function n(e,n){var a=Noble.components[e].components[n],r=Noble.components[e].dir[n];return a.map(function(e){return r+e})}function a(e){return n(e,"u")}function o(e){return n(e,"f")}function t(e){return n(e,"m")}function c(e){return Noble.components[e].required}function e(e,n){switch(n){case"f":return a(e).concat(o(e));case"m":return a(e).concat(t(e));default:return a(e)}}var s={female:{accessories:{has:!0,component:"",options:e("accessories","f")},base:{has:!0,component:"",options:e("base","f"),required:c("base")},beard:{has:!1,component:"",options:[]},eyes:{has:!0,component:"",options:e("eyes","f")},features:{has:!0,component:"",options:e("features","f")},glasses:{has:!0,component:"",options:e("glasses","f")},hair:{has:!0,component:"",options:e("hair","f")},mouths:{has:!0,component:"",options:e("mouths","f")},neck:{has:!0,component:"",options:e("neck","f")}},male:{accessories:{has:!0,component:"",options:e("accessories","m")},base:{has:!0,component:"",options:e("base","m")},beard:{has:!0,component:"",options:e("beard","m")},eyes:{has:!0,component:"",options:e("eyes","m")},features:{has:!0,component:"",options:e("features","m")},glasses:{has:!0,component:"",options:e("glasses","m")},hair:{has:!0,component:"",options:e("hair","m")},mouths:{has:!0,component:"",options:e("mouths","m")},neck:{has:!0,component:"",options:e("neck","m")}}};function p(e,n){return s[n][e].has}function i(e,n){var a=s[n][e].component;return r("unset",e,n,"",a),s[n][e].component="",a}function g(e,n,a){return!(!p(e,n)||!s[n][e].options.includes(a))&&(r("set",e,n,a,s[n][e].component),s[n][e].component=a)}function h(e,n){if(!p(e,n))return i(e,n);var a=clone(s[n][e].options);return c(e)||("hair"===e?a.push(""):a.concat(["","",""])),g(e,n,a.random())}window.Noble.slots={get:{female:o,male:t,unisex:a},female:s.female,male:s.male,check:{required:c,possible:p},set:g,unset:i,randomize:h,randomizeAll:function(e){var n,a=Object.keys(s[e]),r=a.length;for(n=0;n<r;n++)h(a[n],e)},convert:function(n){var a={};return Object.keys(n).forEach(function(e){a[e]=n[e].component}),a}}}(),Noble.editor={gender:"female"},function(){var t=["base","eyes","mouths","beard","features","glasses","hair","neck","accessories"];Noble.Portrait=function(e,a,n){if(!(this instanceof Noble.Portrait))return new Noble.Portrait(e,a,n);var r=$(document.createElement("div")).addClass("noble-wrapper").attr("id",Util.slugify(e)),o=t.map(function(e){var n=a[e]?'url("'+a[e]+'")':"";return console.log(n,a[e],a),$(document.createElement("div")).addClass("layer").attr("data-group",e).css("background-image",n)});n&&r.ariaClick(function(){$.wiki(n)}),r.append(o),this.$el=r,this.wiki=n,this.id=e,this.$layers=o},Noble.Portrait.prototype={constructor:Noble.Porait,getLayerIdx:function(n){return this.$layers.findIndex(function(e){return e.attr("data-group")===n})},getLayer:function(n){return this.$layers.find(function(e){return e.attr("data-group")===n})},changeLayer:function(e,n){var a=this.getLayer(e);a[0]&&a.css("background-image",n)}}}(),State.setVar(Noble.config.storyVar,[]),Noble.Character=function(e,n){if(!(this instanceof Noble.Character))return new Noble.Character(e,n);this.id=e,this.def=clone(n)},Noble.Character.is=function(e){return e instanceof Noble.Character},Noble.Character.add=function(e,n){n.base.hasOwnProperty("has")&&(n=Noble.slots.convert(n));var a=new Noble.Character(e,n);return State.getVar(Noble.config.storyVar).push(a),a},Noble.Character.generateFromPassage=function(e){try{var n=JSON.parse(Story.get(e).text);Noble.Character.add(e,n)}catch(e){console.error("uh oh")}},Noble.Character.getByID=function(n){return State.getVar(Noble.config.storyVar).find(function(e){return e.id===n&&Noble.Character.is(e)})},Noble.Character.random=function(e,n){return e=e||either("male","female"),n=n||"rnd"+Math.random().toString(36).substring(7),Noble.slots.randomizeAll(e),Noble.Character.add(n,Noble.slots[e])},Noble.Character.test=function(e){var n=Noble.Character.random(e),a=Noble.Portrait(n.id,n.def);$("#passages").append(a.$el)},Noble.Character.prototype={constructor:Noble.Character,toJSON:function(){JSON.reviveWrapper("new Noble.Character("+JSON.stringify(this.id)+", "+JSON.stringify(this.def)+")")},clone:function(){return new Noble.Character(this.id,this.def)},portrait:function(){return Noble.Portrait(this.id,this.def)},clickablePt:function(e){return Noble.Portrait(this.id,this.def,e)}};
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
index bf26848..96ab4ae 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -28,80 +28,90 @@ function retrieve (dir, type, obj) {
 
 function getImageAssets () {
     var imgDir = './dist/cac/',
+        pDir = './cac/',
         ext = '.png',
         imgs = {
             
             accessories : {
                 components : retrieve(imgDir + 'accessories/'),
                 required : false,
-                masterDir : imgDir + 'accessories/',
-                uni : imgDir + 'accessories/',
-                fem : imgDir + 'accessories/' + 'f/',
-                mal : imgDir + 'accessories/' + 'm/'
+                dir : {
+                    u : pDir + 'accessories/',
+                    f : pDir + 'accessories/f/',
+                    m : pDir + 'accessories/m/'
+                }
             },
             base : {
                 components : retrieve(imgDir + 'base/'),
                 required : true,
-                masterDir : imgDir + 'base/',
-                uni : imgDir + 'base/',
-                fem : imgDir + 'base/' + 'f/',
-                mal : imgDir + 'base/' + 'm/'
+                dir : {
+                    u : pDir + 'base/',
+                    f : pDir + 'base/f/',
+                    m : pDir + 'base/m/'
+                }
             },
             beard : {
                 components : retrieve(imgDir + 'beard/'),
                 required : false,
-                masterDir : imgDir + 'beard/',
-                uni : imgDir + 'beard/',
-                fem : imgDir + 'beard/' + 'f/',
-                mal : imgDir + 'beard/' + 'm/'
+                dir : {
+                    u : pDir + 'beard/',
+                    f : pDir + 'beard/f/',
+                    m : pDir + 'beard/m/'
+                }
             },
             eyes : {
                 components : retrieve(imgDir + 'eyes/'),
                 required : true,
-                masterDir : imgDir + 'eyes/',
-                uni : imgDir + 'eyes/',
-                fem : imgDir + 'eyes/' + 'f/',
-                mal : imgDir + 'eyes/' + 'm/'
+                dir : {
+                    u : pDir + 'eyes/',
+                    f : pDir + 'eyes/f/',
+                    m : pDir + 'eyes/m/'
+                }
             },
             features : {
                 components : retrieve(imgDir + 'features/'),
                 required : false,
-                masterDir : imgDir + 'features/',
-                uni : imgDir + 'features/',
-                fem : imgDir + 'features/' + 'f/',
-                mal : imgDir + 'features/' + 'm/'
+                dir : {
+                    u : pDir + 'features/',
+                    f : pDir + 'features/f/',
+                    m : pDir + 'features/m/'
+                }
             },
             glasses : {
                 components : retrieve(imgDir + 'glasses/'),
                 required : false,
-                masterDir : imgDir + 'glasses/',
-                uni : imgDir + 'glasses/',
-                fem : imgDir + 'glasses/' + 'f/',
-                mal : imgDir + 'glasses/' + 'm/'
+                dir : {
+                    u : pDir + 'glasses/',
+                    f : pDir + 'glasses/f/',
+                    m : pDir + 'glasses/m/'
+                }
             },
             hair : {
                 components : retrieve(imgDir + 'hair/'),
                 required : false,
-                masterDir : imgDir + 'hair/',
-                uni : imgDir + 'hair/',
-                fem : imgDir + 'hair/' + 'f/',
-                mal : imgDir + 'hair/' + 'm/'
+                dir : {
+                    u : pDir + 'hair/',
+                    f : pDir + 'hair/f/',
+                    m : pDir + 'hair/m/'
+                }
             },
             mouths : {
                 components : retrieve(imgDir + 'mouths/'),
                 required : true,
-                masterDir : imgDir + 'mouths/',
-                uni : imgDir + 'mouths/',
-                fem : imgDir + 'mouths/' + 'f/',
-                mal : imgDir + 'mouths/' + 'm/'
+                dir : {
+                    u : pDir + 'mouths/',
+                    f : pDir + 'mouths/f/',
+                    m : pDir + 'mouths/m/'
+                }
             },
             neck : {
                 components : retrieve(imgDir + 'neck/'),
                 required : false,
-                masterDir : imgDir + 'neck/',
-                uni : imgDir + 'neck/',
-                fem : imgDir + 'neck/' + 'f/',
-                mal : imgDir + 'neck/' + 'm/'
+                dir : {
+                    u : pDir + 'neck/',
+                    f : pDir + 'neck/f/',
+                    m : pDir + 'neck/m/'
+                }
             }
         };
         
@@ -118,4 +128,46 @@ function getImages () {
         .pipe(gulp.dest('./src/js/'));
 }
 
-gulp.task('img', getImages);
\ No newline at end of file
+gulp.task('img', getImages);
+
+// build source
+
+var jsFiles = 'src/js/**/*.js',
+    jsDest = 'dist',
+    cssFiles = 'src/css/**/*.css',
+    cssDest = 'dist';
+
+function scripts () {
+    return gulp.src(jsFiles)
+        .pipe(concat('noble.min.js'))
+        .pipe(gulp.dest(jsDest))
+        .pipe(rename('noble.min.js'))
+        .pipe(uglify().on('error', function(e){
+            console.log(e);
+         }))
+        .pipe(gulp.dest(jsDest));
+}
+function styles () {
+    return gulp.src(cssFiles)
+        .pipe(concat('noble.min.css'))
+        .pipe(gulp.dest(cssDest))
+        .pipe(rename('noble.min.css'))
+        .pipe(autopre())
+        .pipe(minify())
+        .pipe(gulp.dest(cssDest));
+}
+
+gulp.task('build', function () {
+    scripts();
+    styles();
+});
+
+// lint task
+
+function lint () {
+    return gulp.src('src/js/**/*.js')
+        .pipe(jshint())
+        .pipe(jshint.reporter('default', { beep : true }));
+}
+
+gulp.task('lint', lint);
\ No newline at end of file
diff --git a/src/component-loader.js b/src/component-loader.js
index db0f851..8a70fcf 100644
--- a/src/component-loader.js
+++ b/src/component-loader.js
@@ -4,4 +4,22 @@
 
     window.Noble.components = /* [target] */;
     
+    if (Noble.config && Noble.config.cache) {
+        var allImages = (function () {
+            var comps = Object.keys(Noble.components),
+                ret = [];
+            comps.forEach( function (comp) {
+                var obj = Noble.compontents[comp].components;
+                ret.concat(obj.u, obj.f, obj.m);
+            });
+            return ret;
+        });
+        
+        var lock = LoadScreen.lock();
+        
+        Noble.cache(allImages, null, function () {
+            LoadScreen.unlock(lock);
+        });
+    }
+    
 }());
\ No newline at end of file
diff --git a/src/css/basic.css b/src/css/basic.css
new file mode 100644
index 0000000..ed7fcb6
--- /dev/null
+++ b/src/css/basic.css
@@ -0,0 +1,11 @@
+div.noble-wrapper {
+    position: relative;
+    width: 400px;
+    height: 400px;
+    margin: 1em;
+}
+
+div.noble-wrapper div.layer {
+    position: absolute;
+    width: 100%; height: 100%;
+}
\ No newline at end of file
diff --git a/src/css/editor.css b/src/css/editor.css
new file mode 100644
index 0000000..1babe56
--- /dev/null
+++ b/src/css/editor.css
@@ -0,0 +1,47 @@
+div#editor-container {
+    height: 400px;
+}
+
+div#editor-container #edit-window {
+    height: 400px;
+    width: 400px;
+    float: left;
+}
+
+div#editor-container #edit-options {
+    height: 400px;
+    padding: 1em;
+}
+
+div#editor-container div.tab-container {
+    overflow: hidden;
+    border: 1px solid #ccc;
+    background-color: #555;
+}
+
+div#editor-container #tab-buttons {
+    background-color: #f5f5f5;
+    float: left;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 1em;
+    transition: 0.3s;
+}
+
+div#editor-container #tab-buttons:hover {
+    background-color: #ddd;
+    color: #111;
+}
+
+div#editor-container #tab-buttons.active {
+    background-color: #ccc;
+    color: #111;
+}
+
+div#editor-container div.tab-content {
+    display: none;
+    padding: 1em;
+    border: 1px solid #ccc;
+    border-top: none;
+}
\ No newline at end of file
diff --git a/src/css/options.css b/src/css/options.css
new file mode 100644
index 0000000..6b3c47c
--- /dev/null
+++ b/src/css/options.css
@@ -0,0 +1,76 @@
+/* outside styling */
+div.noble-wrapper.flat {
+    border: none;
+}
+div.noble-wrapper.material-light {
+    box-shadow: 0px 0px 2px #888;
+}
+div.noble-wrapper.material-dark {
+    box-shadow: 0px 0px 2px #000;
+}
+div.noble-wrapper.border-thin-light {
+    border: 2px solid #111;
+}
+div.noble-wrapper.border-thin-dark {
+    border: 2px solid #eee;
+}
+div.noble-wrapper.border-thick-light {
+    border: 6px solid #111;
+}
+div.noble-wrapper.border-thick-dark {
+    border: 6px solid #eee;
+}
+div.noble-wrapper.border-outset-light {
+    border: 6px outset #555;
+}
+div.noble-wrapper.border-outset-dark {
+    border: 6px outset #ccc;
+}
+div.noble-wrapper.border-inset-light {
+    border: 6px inset #555;
+}
+div.noble-wrapper.border-inset-dark {
+    border: 6px inset #ccc;
+}
+
+/* sizes (absolute) */
+div.noble-wrapper.tiny {
+    width: 64px; height: 64px;
+}
+div.noble-wrapper.small {
+    width: 128px; height: 128px;
+}
+div.noble-wrapper.medium {
+    width: 256px; height: 256px;
+}
+div.noble-wrapper.large {
+    width: 320px; height: 320px;
+}
+div.noble-wrapper.max-safe {
+    width: 400px; height: 400px;
+}
+div.noble-wrapper.oversized {
+    width: 600px; height: 600px;
+}
+
+/* sizes (relative) */
+div.noble-wrapper.relative {
+    max-width: 400px; 
+    max-height: 400px;
+}
+div.noble-wrapper.relative.small-em {
+    max-width: 4rem; 
+    max-height: 4rem;
+}
+div.noble-wrapper.relative.medium-em {
+    max-width: 8rem; 
+    max-height: 8rem;
+}
+div.noble-wrapper.relative.large-em {
+    max-width: 12rem; 
+    max-height: 12rem;
+}
+div.noble-wrapper.relative.very-large-em {
+    max-width: 16rem; 
+    max-height: 16rem;
+}
\ No newline at end of file
diff --git a/src/css/screen.css b/src/css/screen.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/js/a-cfg.js b/src/js/a-cfg.js
new file mode 100644
index 0000000..4159102
--- /dev/null
+++ b/src/js/a-cfg.js
@@ -0,0 +1,47 @@
+(function () {
+    
+    window.Noble = window.Noble || {};
+    
+    Noble.config = {
+        
+        /*
+            cache option (boolean):
+                If true, image assets will be cached at startup.  this will slow down initial load times 
+                the first time your game is run by a user and any time after a long period (months) passes
+                between plays, but will not effect initial load times otherwise.  The benefit is that all
+                images will be ready to go immediately, so there won't be any load times during play.
+            
+                Default: true
+        */
+        cache : true,
+        
+        /*
+            portraitPassages (object):
+                These settings alter how the system treats portrait passages.
+                
+                tag (string):
+                    The tag that denotes a passage as portrait data.  You can alter this tag if you're already
+                    using the default one for something else. If not, it's probably best left alone.
+                    
+                    Default: 'portrait'
+                    
+                onStartup (boolean):
+                    If true, all portrait passages are loaded into memory on startup.  This may slowdown initial
+                    load times, so you can shut it off if needed, though doing so may introduce lag in passages
+                    with lots of portraits.
+                    
+                    Default: true
+                    
+        */
+        portraitPassages : {
+            tag : 'portrait',
+            onStartup : true
+        },
+        
+        /**/
+        storyVar : '$nobleAvatars'
+        
+        
+    };
+    
+}());
\ No newline at end of file
diff --git a/src/js/cache.js b/src/js/cache.js
new file mode 100644
index 0000000..5d9724a
--- /dev/null
+++ b/src/js/cache.js
@@ -0,0 +1,63 @@
+(function () {
+    /**
+     * imageCache.js - image caching framework.
+     * Zoltan Hawryluk - http://www.useragentman.com/
+     * MIT License.
+     */
+
+    var imageCache = function () {
+        var me = this;
+        
+        var cache = [];
+        var root = document.location.href.split('/');
+        
+        root.pop();
+        root = root.join('/') + '/';
+        
+        me.push = function (src, loadEvent) {
+            
+            if (!src.match(/^http/)) {
+                src = root + src;
+            } 
+            
+            var item = new Image();
+            
+            
+            if (cache[src] && loadEvent) {
+                loadEvent(src);
+            } else {
+                if (loadEvent) {
+                    item.onload = loadEvent;
+                    item.onerror = loadEvent;
+                }
+                cache[src]=item;
+            }
+            
+            item.src =  src;
+        };
+        
+        me.pushArray = function (array, imageLoadEvent, imagesLoadEvent) {
+            var numLoaded = 0;
+            var arrayLength = array.length;
+            for (var i=0; i<arrayLength; i++) {
+                me.push(array[i], function (e) {
+                    if (imageLoadEvent) {
+                        imageLoadEvent(e);
+                    }
+                    numLoaded++;
+                    if (numLoaded == arrayLength) {
+                        setTimeout(function () {
+                            imagesLoadEvent(e);
+                        }, 1);
+                        
+                    }
+                });
+            }
+        };
+        
+    };
+    
+    window.Noble = window.Noble || {};
+    
+    window.Noble.cache = imageCache;
+}());
\ No newline at end of file
diff --git a/src/js/components.js b/src/js/components.js
index 1881f2e..05c9fa6 100644
--- a/src/js/components.js
+++ b/src/js/components.js
@@ -2,298 +2,325 @@
 
     window.Noble = window.Noble || {};
 
-    window.Noble.components = { 
-        "accessories": {
-            "components": {
-                "u": [
-                    "accessory_1.png",
-                    "accessory_10.png",
-                    "accessory_11.png",
-                    "accessory_12.png",
-                    "accessory_13.png",
-                    "accessory_14.png",
-                    "accessory_15.png",
-                    "accessory_16.png",
-                    "accessory_17.png",
-                    "accessory_18.png",
-                    "accessory_19.png",
-                    "accessory_2.png",
-                    "accessory_20.png",
-                    "accessory_3.png",
-                    "accessory_4.png",
-                    "accessory_5.png",
-                    "accessory_6.png",
-                    "accessory_7.png",
-                    "accessory_8.png",
-                    "accessory_9.png"
-                ],
-                "f": [
-                    "accessory_f21.png"
-                ],
-                "m": [
-                    "accessory_m21.png"
-                ]
-            },
-            "required": false,
-            "masterDir": "./dist/cac/accessories/",
-            "uni": "./dist/cac/accessories/",
-            "fem": "./dist/cac/accessories/f/",
-            "mal": "./dist/cac/accessories/m/"
+    window.Noble.components = {
+    "accessories": {
+        "components": {
+            "u": [
+                "accessory_1.png",
+                "accessory_10.png",
+                "accessory_11.png",
+                "accessory_12.png",
+                "accessory_13.png",
+                "accessory_14.png",
+                "accessory_15.png",
+                "accessory_16.png",
+                "accessory_17.png",
+                "accessory_18.png",
+                "accessory_19.png",
+                "accessory_2.png",
+                "accessory_20.png",
+                "accessory_3.png",
+                "accessory_4.png",
+                "accessory_5.png",
+                "accessory_6.png",
+                "accessory_7.png",
+                "accessory_8.png",
+                "accessory_9.png"
+            ],
+            "f": [
+                "accessory_f21.png"
+            ],
+            "m": [
+                "accessory_m21.png"
+            ]
         },
-        "base": {
-            "components": {
-                "u": [],
-                "f": [
-                    "head_f1.png",
-                    "head_f10.png",
-                    "head_f11.png",
-                    "head_f12.png",
-                    "head_f13.png",
-                    "head_f14.png",
-                    "head_f15.png",
-                    "head_f2.png",
-                    "head_f3.png",
-                    "head_f4.png",
-                    "head_f5.png",
-                    "head_f6.png",
-                    "head_f7.png",
-                    "head_f8.png",
-                    "head_f9.png"
-                ],
-                "m": [
-                    "head_m1.png",
-                    "head_m10.png",
-                    "head_m11.png",
-                    "head_m12.png",
-                    "head_m13.png",
-                    "head_m14.png",
-                    "head_m15.png",
-                    "head_m2.png",
-                    "head_m3.png",
-                    "head_m4.png",
-                    "head_m5.png",
-                    "head_m6.png",
-                    "head_m7.png",
-                    "head_m8.png",
-                    "head_m9.png"
-                ]
-            },
-            "required": true,
-            "masterDir": "./dist/cac/base/",
-            "uni": "./dist/cac/base/",
-            "fem": "./dist/cac/base/f/",
-            "mal": "./dist/cac/base/m/"
+        "required": false,
+        "dir": {
+            "u": "./cac/accessories/",
+            "f": "./cac/accessories/f/",
+            "m": "./cac/accessories/m/"
+        }
+    },
+    "base": {
+        "components": {
+            "u": [],
+            "f": [
+                "head_f1.png",
+                "head_f10.png",
+                "head_f11.png",
+                "head_f12.png",
+                "head_f13.png",
+                "head_f14.png",
+                "head_f15.png",
+                "head_f2.png",
+                "head_f3.png",
+                "head_f4.png",
+                "head_f5.png",
+                "head_f6.png",
+                "head_f7.png",
+                "head_f8.png",
+                "head_f9.png"
+            ],
+            "m": [
+                "head_m1.png",
+                "head_m10.png",
+                "head_m11.png",
+                "head_m12.png",
+                "head_m13.png",
+                "head_m14.png",
+                "head_m15.png",
+                "head_m2.png",
+                "head_m3.png",
+                "head_m4.png",
+                "head_m5.png",
+                "head_m6.png",
+                "head_m7.png",
+                "head_m8.png",
+                "head_m9.png"
+            ]
         },
-        "beard": {
-            "components": {
-                "u": [],
-                "f": [],
-                "m": [
-                    "beard_1.png",
-                    "beard_2.png",
-                    "beard_3.png",
-                    "beard_4.png",
-                    "beard_5.png"
-                ]
-            },
-            "required": false,
-            "masterDir": "./dist/cac/beard/",
-            "uni": "./dist/cac/beard/",
-            "fem": "./dist/cac/beard/f/",
-            "mal": "./dist/cac/beard/m/"
+        "required": true,
+        "dir": {
+            "u": "./cac/base/",
+            "f": "./cac/base/f/",
+            "m": "./cac/base/m/"
+        }
+    },
+    "beard": {
+        "components": {
+            "u": [],
+            "f": [],
+            "m": [
+                "beard_1.png",
+                "beard_2.png",
+                "beard_3.png",
+                "beard_4.png",
+                "beard_5.png"
+            ]
         },
-        "eyes": {
-            "components": {
-                "u": [],
-                "f": [
-                    "eye_f1.png",
-                    "eye_f2.png",
-                    "eye_f3.png",
-                    "eye_f4.png",
-                    "eye_f5.png",
-                    "eye_f6.png",
-                    "eye_f7.png",
-                    "eye_f8.png"
-                ],
-                "m": [
-                    "eye_m1.png",
-                    "eye_m2.png",
-                    "eye_m3.png",
-                    "eye_m4.png",
-                    "eye_m5.png",
-                    "eye_m6.png",
-                    "eye_m7.png",
-                    "eye_m8.png"
-                ]
-            },
-            "required": true,
-            "masterDir": "./dist/cac/eyes/",
-            "uni": "./dist/cac/eyes/",
-            "fem": "./dist/cac/eyes/f/",
-            "mal": "./dist/cac/eyes/m/"
+        "required": false,
+        "dir": {
+            "u": "./cac/beard/",
+            "f": "./cac/beard/f/",
+            "m": "./cac/beard/m/"
+        }
+    },
+    "eyes": {
+        "components": {
+            "u": [],
+            "f": [
+                "eye_f1.png",
+                "eye_f2.png",
+                "eye_f3.png",
+                "eye_f4.png",
+                "eye_f5.png",
+                "eye_f6.png",
+                "eye_f7.png",
+                "eye_f8.png"
+            ],
+            "m": [
+                "eye_m1.png",
+                "eye_m2.png",
+                "eye_m3.png",
+                "eye_m4.png",
+                "eye_m5.png",
+                "eye_m6.png",
+                "eye_m7.png",
+                "eye_m8.png"
+            ]
         },
-        "features": {
-            "components": {
-                "u": [
-                    "scar_1.png",
-                    "scar_2.png"
-                ],
-                "f": [],
-                "m": [
-                    "mustache_1.png",
-                    "sideburn_1.png"
-                ]
-            },
-            "required": false,
-            "masterDir": "./dist/cac/features/",
-            "uni": "./dist/cac/features/",
-            "fem": "./dist/cac/features/f/",
-            "mal": "./dist/cac/features/m/"
+        "required": true,
+        "dir": {
+            "u": "./cac/eyes/",
+            "f": "./cac/eyes/f/",
+            "m": "./cac/eyes/m/"
+        }
+    },
+    "features": {
+        "components": {
+            "u": [
+                "scar_1.png",
+                "scar_2.png"
+            ],
+            "f": [],
+            "m": [
+                "mustache_1.png",
+                "sideburn_1.png"
+            ]
         },
-        "glasses": {
-            "components": {
-                "u": [
-                    "eyepatch_1.png",
-                    "eyepatch_2.png",
-                    "glasses_1.png",
-                    "glasses_2.png",
-                    "glasses_3.png",
-                    "glasses_4.png"
-                ],
-                "f": [],
-                "m": []
-            },
-            "required": false,
-            "masterDir": "./dist/cac/glasses/",
-            "uni": "./dist/cac/glasses/",
-            "fem": "./dist/cac/glasses/f/",
-            "mal": "./dist/cac/glasses/m/"
+        "required": false,
+        "dir": {
+            "u": "./cac/features/",
+            "f": "./cac/features/f/",
+            "m": "./cac/features/m/"
+        }
+    },
+    "glasses": {
+        "components": {
+            "u": [
+                "eyepatch_1.png",
+                "eyepatch_2.png",
+                "glasses_1.png",
+                "glasses_2.png",
+                "glasses_3.png",
+                "glasses_4.png"
+            ],
+            "f": [],
+            "m": []
         },
-        "hair": {
-            "components": {
-                "u": [],
-                "f": [
-                    "hair_f1.png",
-                    "hair_f10.png",
-                    "hair_f11.png",
-                    "hair_f12.png",
-                    "hair_f13.png",
-                    "hair_f14.png",
-                    "hair_f15.png",
-                    "hair_f16.png",
-                    "hair_f17.png",
-                    "hair_f18.png",
-                    "hair_f19.png",
-                    "hair_f2.png",
-                    "hair_f20.png",
-                    "hair_f21.png",
-                    "hair_f22.png",
-                    "hair_f23.png",
-                    "hair_f24.png",
-                    "hair_f25.png",
-                    "hair_f26.png",
-                    "hair_f3.png",
-                    "hair_f4.png",
-                    "hair_f5.png",
-                    "hair_f6.png",
-                    "hair_f7.png",
-                    "hair_f8.png",
-                    "hair_f9.png"
-                ],
-                "m": [
-                    "hair_m1.png",
-                    "hair_m10.png",
-                    "hair_m11.png",
-                    "hair_m12.png",
-                    "hair_m13.png",
-                    "hair_m14.png",
-                    "hair_m15.png",
-                    "hair_m16.png",
-                    "hair_m17.png",
-                    "hair_m18.png",
-                    "hair_m19.png",
-                    "hair_m2.png",
-                    "hair_m20.png",
-                    "hair_m21.png",
-                    "hair_m22.png",
-                    "hair_m23.png",
-                    "hair_m24.png",
-                    "hair_m25.png",
-                    "hair_m26.png",
-                    "hair_m3.png",
-                    "hair_m4.png",
-                    "hair_m5.png",
-                    "hair_m6.png",
-                    "hair_m7.png",
-                    "hair_m8.png",
-                    "hair_m9.png"
-                ]
-            },
-            "required": false,
-            "masterDir": "./dist/cac/hair/",
-            "uni": "./dist/cac/hair/",
-            "fem": "./dist/cac/hair/f/",
-            "mal": "./dist/cac/hair/m/"
+        "required": false,
+        "dir": {
+            "u": "./cac/glasses/",
+            "f": "./cac/glasses/f/",
+            "m": "./cac/glasses/m/"
+        }
+    },
+    "hair": {
+        "components": {
+            "u": [],
+            "f": [
+                "hair_f1.png",
+                "hair_f10.png",
+                "hair_f11.png",
+                "hair_f12.png",
+                "hair_f13.png",
+                "hair_f14.png",
+                "hair_f15.png",
+                "hair_f16.png",
+                "hair_f17.png",
+                "hair_f18.png",
+                "hair_f19.png",
+                "hair_f2.png",
+                "hair_f20.png",
+                "hair_f21.png",
+                "hair_f22.png",
+                "hair_f23.png",
+                "hair_f24.png",
+                "hair_f25.png",
+                "hair_f26.png",
+                "hair_f3.png",
+                "hair_f4.png",
+                "hair_f5.png",
+                "hair_f6.png",
+                "hair_f7.png",
+                "hair_f8.png",
+                "hair_f9.png"
+            ],
+            "m": [
+                "hair_m1.png",
+                "hair_m10.png",
+                "hair_m11.png",
+                "hair_m12.png",
+                "hair_m13.png",
+                "hair_m14.png",
+                "hair_m15.png",
+                "hair_m16.png",
+                "hair_m17.png",
+                "hair_m18.png",
+                "hair_m19.png",
+                "hair_m2.png",
+                "hair_m20.png",
+                "hair_m21.png",
+                "hair_m22.png",
+                "hair_m23.png",
+                "hair_m24.png",
+                "hair_m25.png",
+                "hair_m26.png",
+                "hair_m3.png",
+                "hair_m4.png",
+                "hair_m5.png",
+                "hair_m6.png",
+                "hair_m7.png",
+                "hair_m8.png",
+                "hair_m9.png"
+            ]
+        },
+        "required": false,
+        "dir": {
+            "u": "./cac/hair/",
+            "f": "./cac/hair/f/",
+            "m": "./cac/hair/m/"
+        }
+    },
+    "mouths": {
+        "components": {
+            "u": [],
+            "f": [
+                "mouth_f1.png",
+                "mouth_f2.png",
+                "mouth_f3.png",
+                "mouth_f4.png",
+                "mouth_f5.png",
+                "mouth_f6.png",
+                "mouth_f7.png",
+                "mouth_f8.png"
+            ],
+            "m": [
+                "mouth_m1.png",
+                "mouth_m2.png",
+                "mouth_m3.png",
+                "mouth_m4.png",
+                "mouth_m5.png",
+                "mouth_m6.png",
+                "mouth_m7.png",
+                "mouth_m8.png"
+            ]
         },
-        "mouths": {
-            "components": {
-                "u": [],
-                "f": [
-                    "mouth_f1.png",
-                    "mouth_f2.png",
-                    "mouth_f3.png",
-                    "mouth_f4.png",
-                    "mouth_f5.png",
-                    "mouth_f6.png",
-                    "mouth_f7.png",
-                    "mouth_f8.png"
-                ],
-                "m": [
-                    "mouth_m1.png",
-                    "mouth_m2.png",
-                    "mouth_m3.png",
-                    "mouth_m4.png",
-                    "mouth_m5.png",
-                    "mouth_m6.png",
-                    "mouth_m7.png",
-                    "mouth_m8.png"
-                ]
-            },
-            "required": true,
-            "masterDir": "./dist/cac/mouths/",
-            "uni": "./dist/cac/mouths/",
-            "fem": "./dist/cac/mouths/f/",
-            "mal": "./dist/cac/mouths/m/"
+        "required": true,
+        "dir": {
+            "u": "./cac/mouths/",
+            "f": "./cac/mouths/f/",
+            "m": "./cac/mouths/m/"
+        }
+    },
+    "neck": {
+        "components": {
+            "u": [
+                "necklace_1.png",
+                "necklace_2.png",
+                "necklace_3.png",
+                "necklace_4.png",
+                "necklace_5.png",
+                "necklace_6.png"
+            ],
+            "f": [
+                "boa_1.png",
+                "boa_2.png",
+                "boa_3.png",
+                "boa_4.png",
+                "necklace_f7.png",
+                "necklace_f8.png"
+            ],
+            "m": [
+                "necklace_m7.png",
+                "necklace_m8.png"
+            ]
         },
-        "neck": {
-            "components": {
-                "u": [
-                    "necklace_1.png",
-                    "necklace_2.png",
-                    "necklace_3.png",
-                    "necklace_4.png",
-                    "necklace_5.png",
-                    "necklace_6.png"
-                ],
-                "f": [
-                    "boa_1.png",
-                    "boa_2.png",
-                    "boa_3.png",
-                    "boa_4.png",
-                    "necklace_f7.png",
-                    "necklace_f8.png"
-                ],
-                "m": [
-                    "necklace_m7.png",
-                    "necklace_m8.png"
-                ]
-            },
-            "required": false,
-            "masterDir": "./dist/cac/neck/",
-            "uni": "./dist/cac/neck/",
-            "fem": "./dist/cac/neck/f/",
-            "mal": "./dist/cac/neck/m/"
+        "required": false,
+        "dir": {
+            "u": "./cac/neck/",
+            "f": "./cac/neck/f/",
+            "m": "./cac/neck/m/"
         }
-    };
-    
+    }
+};
+/*
+    if (Noble.config && Noble.config.cache) {
+        var allImages = (function () {
+            var comps = Object.keys(Noble.components),
+                ret = [];
+            comps.forEach( function (comp) {
+                var obj = Noble.compontents[comp].components;
+                ret.concat(obj.u, obj.f, obj.m);
+            });
+            return ret;
+        });
+        
+        var lock = LoadScreen.lock();
+        
+        Noble.cache(allImages, null, function () {
+            LoadScreen.unlock(lock);
+        });
+    }
+*/
 }());
\ No newline at end of file
diff --git a/src/js/equip-slots.js b/src/js/equip-slots.js
index 463f206..548bd1b 100644
--- a/src/js/equip-slots.js
+++ b/src/js/equip-slots.js
@@ -1,13 +1,32 @@
 (function () {
     
+    function setCompEv (action, group, gender, component, old) {
+        // this event is used to change the image dynamically
+        $(document).trigger({
+            type : ':set-slot',
+            action : action,
+            group : group,
+            gender : gender,
+            component : component,
+            previous : old
+        });
+    }
+    
+    function mapComponents (group, gender) {
+        var comps = Noble.components[group].components[gender],
+            dir = Noble.components[group].dir[gender];
+        return comps.map( function (comp) {
+            return dir + comp;
+        });
+    }
     function getUnisexComponents (group) {
-        return Noble.components[group].u;
+        return mapComponents(group, 'u');
     }
     function getFemaleComponents (group) {
-        return Noble.components[group].f;
+        return mapComponents(group, 'f');
     }
     function getMaleComponents (group) {
-        return Noble.components[group].m;
+        return mapComponents(group, 'm');
     }
     function isRequired (group) {
         return Noble.components[group].required;
@@ -17,20 +36,13 @@
         switch (gender) {
             case 'f':
                 return getUnisexComponents(group).concat(getFemaleComponents(group));
-                break;
             case 'm':
                 return getUnisexComponents(group).concat(getMaleComponents(group));
-                break;
-            case 'u':
             default:
                 return getUnisexComponents(group);
         }
     }
     
-    function canHave (group, gender) {
-        return slots[gender][group].has;
-    }
-    
     var slots = {
         
         female : {
@@ -114,7 +126,7 @@
             hair : {
                 has : true,
                 component : '',
-                options : getComponents('hair', 'f')
+                options : getComponents('hair', 'm')
             },
             mouths : {
                 has : true,
@@ -130,16 +142,22 @@
         
     };
     
+    function canHave (group, gender) {
+        return slots[gender][group].has;
+    }
+    
     function unsetSlot (group, gender) {
         var cached = slots[gender][group].component;
+        setCompEv('unset', group, gender, '', cached);
         slots[gender][group].component = '';
         return cached;
     }
     
     function setSlot (group, gender, component) {
-        if (canHave(gender, group) && 
+        if (canHave(group, gender) && 
             slots[gender][group].options.includes(component)) {
             
+            setCompEv('set', group, gender, component, slots[gender][group].component);
             slots[gender][group].component = component;
             return component;
         }
@@ -147,7 +165,7 @@
     }
     
     function setRandomSlot (group, gender) {
-        if (!canHave(gender, group)) {
+        if (!canHave(group, gender)) {
             return unsetSlot(group, gender);
         }
         
@@ -174,6 +192,14 @@
         }
     }
     
+    function convertToDefObj (slots) {
+        var ret = {};
+        Object.keys(slots).forEach( function (key) {
+            ret[key] = slots[key].component;
+        });
+        return ret;
+    }
+    
     // send to global scope
     window.Noble.slots = {
         
@@ -181,7 +207,7 @@
             female : getFemaleComponents,
             male : getMaleComponents,
             unisex : getUnisexComponents
-        }
+        },
         
         female : slots.female,
         
@@ -198,8 +224,10 @@
         
         randomize : setRandomSlot,
         
-        randomizeAll : setAllRandom
+        randomizeAll : setAllRandom,
+        
+        convert : convertToDefObj
         
     };
     
-}();
\ No newline at end of file
+}());
\ No newline at end of file
diff --git a/src/js/events.js b/src/js/events.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/js/layout.js b/src/js/layout.js
new file mode 100644
index 0000000..4f1f3d3
--- /dev/null
+++ b/src/js/layout.js
@@ -0,0 +1,104 @@
+(function () {
+    
+    Noble.editor = { gender : 'female' };
+    
+    // editor pain
+    
+    function tabButton (name, id) {
+        
+        return $(document.createElement('button'))
+            .addClass('editor-tabs tab-buttons')
+            .attr('id', id)
+            .wiki(name)
+            .ariaClick( function () {
+                
+                $(document).trigger({
+                    type : ':switch-editor-tab',
+                    id : id,
+                    name : name
+                });
+                
+            });
+        
+    }
+    
+    function createBlocks (id, src) {
+        
+        return $(document.createElement('img'))
+            .addClass('editor-options grid-img')
+            .attr({
+                id : id,
+                src : src
+            }).ariaClick( function () {
+                $(document).trigger({
+                    type : ':editor-option',
+                    opt : src,
+                    id : id
+                });
+            });
+        
+    }
+    
+    function tabContent (id, els) {
+        
+        return $(document.createElement('div'))
+            .addClass('editor-tabs tab-content')
+            .attr('id', id)
+            .append(els);
+        
+    }
+    
+    function tabs () {
+        
+        return $(document.createElement('div'))
+            .addClass('editor-tabs tab-container')
+            .attr('id', 'tab-wrapper');
+        
+    }
+    
+    function generateEditorOptions () {
+        
+        var slots = Noble.slots[Noble.editor.gender],
+            gender = Noble.editor.gender[0];
+            groups = Object.keys(slots);
+        
+        var $buttons = (function () {
+            var ret = [];
+            groups.forEach( function (group) {
+                if (Noble.slots.check.possible(group, gender)) {
+                    ret.push(tabButton(group.toUpperFirst(), 'tab-' + group));
+                }
+            });
+            return ret;
+        }());
+        
+        var $tabContents = (function () {
+            var ret = [];
+            groups.forEach( function (group) {
+                if (Noble.slots.check.possible(group, gender)) {
+                    var $imgs = slots[group].options.map( function (opt, i) {
+                        return createBlock('edit-' + group + '-opt-' + i, opt);
+                    });
+                    ret.push(tabContent('tab-group-' + group, $imgs));
+                }
+            });
+            return ret;
+        }());
+        
+        var $tab = tabs(),
+            $editor = $(document.createElement)
+                .addClass('editor-right-side')
+                .attr('id', 'edit-options');
+        
+        $tabs.append($buttons);
+        $editor.append($tabs, $tabContents);
+        
+        return $editor;
+        
+    }
+    
+    // viewer
+    
+    
+    
+}());
\ No newline at end of file
diff --git a/src/js/portrait.js b/src/js/portrait.js
new file mode 100644
index 0000000..cd8f41b
--- /dev/null
+++ b/src/js/portrait.js
@@ -0,0 +1,77 @@
+(function () {
+    
+    var layerList = [ // the order is important
+        'base',
+        'eyes',
+        'mouth',
+        'features',
+        'glasses',
+        'hair',
+        'neck',
+        'beard',
+        'accessories'
+    ];
+    
+    Noble.Portrait = function (id, def, clickableContent) {
+        
+        if (this instanceof Noble.Portrait) {
+            var $wrapper = $(document.createElement('div'))
+                .addClass('noble-wrapper')
+                .attr('id', Util.slugify(id));
+            
+            var $layers = layerList.map( function (group) {
+                var bg = (def[group]) ? ('url("' + def[group] + '")') : '';
+                console.log(bg, def[group], def);
+                return $(document.createElement('div'))
+                    .addClass('layer')
+                    .attr('data-group', group)
+                    .css('background-image', bg);
+            });
+            
+            if (clickableContent) {
+                $wrapper.ariaClick( function () {
+                    $.wiki(clickableContent);
+                });
+            }
+            
+            $wrapper.append($layers);
+            
+            this.$el = $wrapper;
+            this.wiki = clickableContent;
+            this.id = id;
+            this.$layers = $layers;
+        
+        } else {
+            
+            return new Noble.Portrait(id, def, clickableContent);
+            
+        }
+        
+    };
+    
+    Noble.Portrait.prototype = {
+        
+        constructor : Noble.Porait,
+        
+        getLayerIdx : function (group) {
+            return this.$layers.findIndex( function (lay) {
+                return lay.attr('data-group') === group;
+            });
+        },
+        
+        getLayer : function (group) {
+            return this.$layers.find( function (lay) {
+                return lay.attr('data-group') === group;
+            });
+        },
+        
+        changeLayer : function (group, comp) {
+            var lay = this.getLayer(group);
+            if (lay[0]) {
+                lay.css('background-image', comp);
+            }
+        }
+        
+    };
+    
+}());
\ No newline at end of file
diff --git a/src/js/z-character.js b/src/js/z-character.js
new file mode 100644
index 0000000..864b5a2
--- /dev/null
+++ b/src/js/z-character.js
@@ -0,0 +1,82 @@
+(function () {
+    
+    State.setVar(Noble.config.storyVar, []);
+    
+    Noble.Character = function (id, def) {
+        
+        if (this instanceof Noble.Character) {
+            this.id = id;
+            this.def = clone(def);
+        } else {
+            return new Noble.Character(id, def);
+        }
+        
+    };
+    
+    Noble.Character.is = function (o) {
+        return o instanceof Noble.Character;
+    };
+    
+    Noble.Character.add = function (id, def) {
+        if (def['base'].hasOwnProperty('has')) {
+            // this is a slots API object
+            def = Noble.slots.convert(def);
+        }
+        var ch = new Noble.Character(id, def);
+        State.getVar(Noble.config.storyVar).push(ch);
+        return ch;
+    };
+    
+    Noble.Character.generateFromPassage = function (psg) {
+        try {
+            var def = JSON.parse(Story.get(psg).text);
+            Noble.Character.add(psg, def);
+        } catch (err) {
+            // todo
+            console.error('uh oh');
+        }
+    };
+    
+    Noble.Character.getByID = function (id) {
+        return State.getVar(Noble.config.storyVar).find( function (chr) {
+            return chr.id === id && Noble.Character.is(chr);
+        }); 
+    };
+    
+    Noble.Character.random = function (gender, id) {
+        gender = gender || either('male', 'female');
+        id = id || 'rnd' + Math.random().toString(36).substring(7);
+        Noble.slots.randomizeAll(gender);
+        return Noble.Character.add(id, Noble.slots[gender]);
+    };
+    
+    Noble.Character.test = function (gender) {
+        var ch = Noble.Character.random(gender),
+            $ch = Noble.Portrait(ch.id, ch.def);
+        
+        $('#passages').append($ch.$el);    
+    };
+    
+    Noble.Character.prototype = {
+        
+        // boilerplate 
+        constructor : Noble.Character,
+        toJSON : function () {
+            JSON.reviveWrapper('new Noble.Character(' + JSON.stringify(this.id) + ', ' + JSON.stringify(this.def) + ')');
+        },
+        clone : function () {
+            return new Noble.Character(this.id, this.def);
+        },
+        
+        // methods
+        portrait : function () {
+            return Noble.Portrait(this.id, this.def);
+        },
+        
+        clickablePt : function (wiki) {
+            return Noble.Portrait(this.id, this.def, wiki);
+        }
+        
+    };
+    
+}());
\ No newline at end of file
diff --git a/src/js/z-macros.js b/src/js/z-macros.js
new file mode 100644
index 0000000..e69de29