diff --git a/mojotrollz/page/default_page/default_page.php b/mojotrollz/page/default_page/default_page.php
index 179efc0..d9ff38c 100644
--- a/mojotrollz/page/default_page/default_page.php
+++ b/mojotrollz/page/default_page/default_page.php
@@ -10,6 +10,7 @@ class default_page extends SYSTEM\PAGE\Page {
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PLIB(),'hashmask/jquery.md5.js').'"></script>'.
                 '<script src="https://www.google.com/jsapi" type="text/javascript"></script>'.
                 '<script type="text/javascript">google.load("visualization", "1", {packages:["corechart"]});</script>'.
+                '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/js/system.js').'"></script>'.
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/js/wizard.js').'"></script>'.
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'default_page/js/onlinegraphic.js').'"></script>'.
                 '<script type="text/javascript" language="JavaScript" src="'.SYSTEM\WEBPATH(new PPAGE(),'wizard_details/js/wizard_details.js').'"></script>'.
diff --git a/mojotrollz/page/default_page/js/onlinegraphic.js b/mojotrollz/page/default_page/js/onlinegraphic.js
index 78952b1..40e8d02 100644
--- a/mojotrollz/page/default_page/js/onlinegraphic.js
+++ b/mojotrollz/page/default_page/js/onlinegraphic.js
@@ -1,22 +1,25 @@
+var visual_id = null;
 function load_visualisation(id){
-    $.getJSON('./api.php?call=stats',function(json){
-        if(!json || json.status != true || !json.result){
-            return;
+    visual_id = id;
+    sys.call('call=stats',handle_visualisation_result,{},'json',true);
+}
+
+function handle_visualisation_result(json){
+    if(!json || json.status !== true || !json.result){
+        return;}
+    json = json.result;
+    var data = new google.visualization.DataTable();
+    first = true;        
+    $.each(json[0], function(key, value){
+        if(first){                
+            data.addColumn('datetime',key);
+            first = false;
+        } else {
+            data.addColumn('number',key);
         }
-        json = json.result;
-        var data = new google.visualization.DataTable();
-        first = true;        
-        $.each(json[0], function(key, value){
-            if(first){                
-                data.addColumn('datetime',key);
-                first = false;
-            } else {
-                data.addColumn('number',key);
-            }       
-        });            
-        $.each(json, function(key, value){first = true; data.addRow($.map(value, function(v) { if(first){first=false;return [new Date(v)];}else{return [(v == null || parseFloat(v) <= 0) ? 0 : parseFloat(v)];}}));});
-                                
-        var options = {title: id, backgroundColor: 'darkslategrey', aggregationTarget: 'category', selectionMode: 'multiple', curveType: 'function', /*focusTarget: 'category',*/ chartArea:{left:20,top:40},  interpolateNulls: false, height: "200"};
-        new google.visualization.LineChart(document.getElementById(id)).draw(data, options);
-    });
+    });            
+    $.each(json, function(key, value){first = true; data.addRow($.map(value, function(v) { if(first){first=false;return [new Date(v)];}else{return [(v == null || parseFloat(v) <= 0) ? 0 : parseFloat(v)];}}));});
+
+    var options = {title: visual_id, backgroundColor: 'darkslategrey', aggregationTarget: 'category', selectionMode: 'multiple', curveType: 'function', /*focusTarget: 'category',*/ chartArea:{left:20,top:40},  interpolateNulls: false, height: "200"};
+    new google.visualization.LineChart(document.getElementById(visual_id)).draw(data, options);
 }
\ No newline at end of file
diff --git a/mojotrollz/page/default_page/js/system.js b/mojotrollz/page/default_page/js/system.js
new file mode 100644
index 0000000..d630cc1
--- /dev/null
+++ b/mojotrollz/page/default_page/js/system.js
@@ -0,0 +1,104 @@
+/*
+
+divs -> content wird geladen
+eindeutige id
+url -> formulardaten
+function die danach ausgeführt wird
+
+id : div -> url -> func
+default : div -> url -> func //default load
+
+hole array via json
+lese id
+stelle dar id mithilfe von json
+
+// Define a class like this
+function Person(name, gender){
+
+   // Add object properties like this
+   this.name = name;
+   this.gender = gender;
+}
+
+// Add methods like this.  All Person objects will be able to invoke this
+Person.prototype.speak = function(){
+    alert("Howdy, my name is" + this.name);
+}
+
+// Instantiate new objects with 'new'
+var person = new Person("Bob", "M");
+
+// Invoke methods like this
+person.speak(); // alerts "Howdy, my name is Bob"
+
+ */
+
+//mother object
+function SYSTEM(endpoint, group){
+    this.endpoint = endpoint;
+    this.group = group;
+    this.pagestates = null;
+}
+//internal function to handle pagestate result
+SYSTEM.prototype.handle_call_pagestates = function (data) {
+    if(data['status']){
+        newps = data['result'];
+        console.log('SYSTEM: loaded Pagestates');
+        result = true;
+    } else {
+        console.log('SYSTEM: Problem with your Pagestates.');
+        result = false;}
+}
+//send a call to the endpoint
+SYSTEM.prototype.call = function(call,success,data,data_type,async){
+    $.ajax({
+            async: async,
+            data: data,
+            dataType: data_type,
+            url: this.endpoint+'?'+call,
+            success:    success,
+            //error: function{console.log(call)}
+    });
+}
+//get the pagestates and save em
+SYSTEM.prototype.load_pagestates = function(){
+    result = false;
+    newps = this.pagestates;
+    if(!this.pagestates){
+        this.call('call=pagestates&group='+this.group,this.handle_call_pagestates,{},"json",false);
+    } else { result = true;}
+    this.pagestates = newps;
+    return result;
+};
+//load a pagestatewith given id
+SYSTEM.prototype.load = function(id){
+    if(!this.load_pagestates()){
+        console.log(id+'2');
+        return false;}
+    var push = true;
+    this.pagestates.forEach(function(entry) {
+        if(entry['id'] === id){
+            if(push){
+                window.history.pushState(null, "", '#'+id);
+                push = false;}
+            var fn = window[entry['func']];
+            if(typeof fn !== 'function') {
+                fn = null;}
+            $(entry['div']).load(entry['url'],fn);
+        }
+    });
+    return push ? false : true;
+};
+//what?
+SYSTEM.prototype.cur_state = function() {
+    var pathName = window.location.pathname,
+        pageName = "";
+ 
+    if (pathName.indexOf("/") != -1) {
+        pageName = pathName.split("/").pop();
+    } else {
+        pageName = pathName;
+    }
+ 
+    return pageName;
+}
\ No newline at end of file
diff --git a/mojotrollz/page/default_page/js/wizard.js b/mojotrollz/page/default_page/js/wizard.js
index 2d20f68..b0f5a53 100644
--- a/mojotrollz/page/default_page/js/wizard.js
+++ b/mojotrollz/page/default_page/js/wizard.js
@@ -1,105 +1,3 @@
-/*
-
-divs -> content wird geladen
-eindeutige id
-url -> formulardaten
-function die danach ausgeführt wird
-
-id : div -> url -> func
-default : div -> url -> func //default load
-
-hole array via json
-lese id
-stelle dar id mithilfe von json
-
-// Define a class like this
-function Person(name, gender){
-
-   // Add object properties like this
-   this.name = name;
-   this.gender = gender;
-}
-
-// Add methods like this.  All Person objects will be able to invoke this
-Person.prototype.speak = function(){
-    alert("Howdy, my name is" + this.name);
-}
-
-// Instantiate new objects with 'new'
-var person = new Person("Bob", "M");
-
-// Invoke methods like this
-person.speak(); // alerts "Howdy, my name is Bob"
-
- */
-
-function SYSTEM(endpoint, group){
-    this.endpoint = endpoint;
-    this.group = group;
-    this.pagestates = null;
-}
-
-SYSTEM.prototype.handle_call_pagestates = function (data) {
-    if(data['status']){
-        newps = data['result'];
-        console.log('SYSTEM: loaded Pagestates');
-        result = true;
-    } else {
-        console.log('SYSTEM: Problem with your Pagestates.');
-        result = false;}
-}
-
-SYSTEM.prototype.call = function(call,success,data,data_type,async){
-    $.ajax({
-            async: async,
-            data: data,
-            dataType: data_type,
-            url: this.endpoint+'?'+call,
-            success:    success
-    });
-}
-
-SYSTEM.prototype.load_pagestates = function(){
-    result = false;
-    newps = this.pagestates;
-    if(!this.pagestates){
-        this.call('call=pagestates&group='+this.group,this.handle_call_pagestates,{},"json",false);
-    } else { result = true;}
-    this.pagestates = newps;
-    return result;
-};
-SYSTEM.prototype.load = function(id){
-    if(!this.load_pagestates()){
-        console.log(id+'2');
-        return false;}
-    var push = true;
-    this.pagestates.forEach(function(entry) {
-        if(entry['id'] === id){
-            if(push){
-                window.history.pushState(null, "", '#'+id);
-                push = false;}
-            var fn = window[entry['func']];
-            if(typeof fn !== 'function') {
-                fn = null;}
-            $(entry['div']).load(entry['url'],fn);
-        }
-    });
-    return push ? false : true;
-};
-
-SYSTEM.prototype.cur_state = function() {
-    var pathName = window.location.pathname,
-        pageName = "";
- 
-    if (pathName.indexOf("/") != -1) {
-        pageName = pathName.split("/").pop();
-    } else {
-        pageName = pathName;
-    }
- 
-    return pageName;
-}
-
 var sys = null;
 
 $(document).ready(function() {
@@ -107,14 +5,14 @@ $(document).ready(function() {
     sys.load('start');
 });
 
-
 function sendInfo(json,toolbar){
-    $.get('./api.php?call=charcreation&json='+json,function(){sys.load(toolbar)})}
+    sys.call('call=charcreation&json='+json,
+             function(){sys.load(toolbar)},
+             {},'json',false);}
 
 function init_start(){
     register_login();
     load_visualisation('mojopulse');
-    
     $('#start a').click(function() {
         sys.load('wizard_details');});
 }
diff --git a/mojotrollz/page/wizard_visuals/js/wizard_visuals.js b/mojotrollz/page/wizard_visuals/js/wizard_visuals.js
index f39a079..2f624de 100644
--- a/mojotrollz/page/wizard_visuals/js/wizard_visuals.js
+++ b/mojotrollz/page/wizard_visuals/js/wizard_visuals.js
@@ -21,5 +21,5 @@ function init_wizard_visuals (){
         sendInfo('{"char_facial_hair" : "'+$(this).val()+'"}','wizard_visuals_toolbar');
         sys.load('wizard_visuals');});
     
-    $('.item').draggable();
+    //$('.item').draggable();
 }
\ No newline at end of file
diff --git a/mojotrollz/page/wizard_visuals/wizard_visuals.tpl b/mojotrollz/page/wizard_visuals/wizard_visuals.tpl
index d7484e0..54f4fdd 100644
--- a/mojotrollz/page/wizard_visuals/wizard_visuals.tpl
+++ b/mojotrollz/page/wizard_visuals/wizard_visuals.tpl
@@ -16,7 +16,7 @@
         <param name="allowscriptaccess" value="always">
         <param name="allowfullscreen" value="true">
         <param name="menu" value="false">
-        <param name="flashvars" value="model=${char_race}${char_gender}&amp;modelType=16&amp;cls=1&amp;equipList=${char_equip}&amp;sk=${char_skincolor}&amp;ha=${char_horn}&amp;hc=${char_horn_color}&amp;fa=${char_face}&amp;fh=${char_facial_hair}&amp;fc=8&amp;mode=3&amp;contentPath=//wow.zamimg.com/modelviewer/&amp;hd=true">
+        <param name="flashvars" value="model=${char_race}${char_gender}&amp;modelType=16&amp;cls=1&amp;equipList=${char_equip}&amp;sk=${char_skin_color}&amp;ha=${char_hair}&amp;hc=${char_hair_color}&amp;fa=${char_face}&amp;fh=${char_facial_hair}&amp;fc=8&amp;mode=3&amp;contentPath=//wow.zamimg.com/modelviewer/&amp;hd=true">
     </object>
 <!--    <object data="http://static.wowhead.com/modelviewer/ModelView.swf" width="290px" height="400px" type="application/x-shockwave-flash">
         <param value="high" name="quality" />