diff --git a/public/editor.html b/public/editor.html
index 9d36eee..de3545b 100644
--- a/public/editor.html
+++ b/public/editor.html
@@ -312,80 +312,82 @@ function main_functions(app, vmName) {
             if (!mode || mode == 'none') {
                 ace_mode = 'markdown';
             }
-            var attributeDoc = getAttributeFromDocSnapshot(app, attribute);
-            if (attributeDoc) {
-                var aceMode = require("ace/mode/" + ace_mode).Mode;
-                editor.session.setMode(new aceMode());
-                var currentMode = attributeDoc.mode;
-                if (!currentMode) {
-                    currentMode = 'none';
-                }
-                app.debug && console.log('modes', attribute, currentMode, mode);
-
-                if (currentMode != mode) {
-                    app.debug && console.log('mode differs', attribute, currentMode, mode);
-                    function doInsert(mode) {
-                        return mode && mode != 'none';
+            return getAttributeFromDocSnapshot(app, attribute, function (err, attributeDoc) {
+                if (attributeDoc) {
+                    var aceMode = require("ace/mode/" + ace_mode).Mode;
+                    editor.session.setMode(new aceMode());
+                    var currentMode = attributeDoc.mode;
+                    if (!currentMode) {
+                        currentMode = 'none';
                     }
+                    app.debug && console.log('modes', attribute, currentMode, mode);
 
-                    replaceAttributeDocKey(app, attribute, 'mode', mode, doInsert, function (err, result) {
-                        app.debug && console.log('err', err, 'result', result);
-                    });
+                    if (currentMode != mode) {
+                        app.debug && console.log('mode differs', attribute, currentMode, mode);
+                        function doInsert(mode) {
+                            return mode && mode != 'none';
+                        }
+
+                        replaceAttributeDocKey(app, attribute, 'mode', mode, doInsert, function (err, result) {
+                            app.debug && console.log('err', err, 'result', result);
+                        });
+                    }
                 }
-            }
+            });
         },
 
         setReadOnly: function (value) {
             editor.ace.setReadOnly(value);
         },
 
-        setDoc: function (attribute, callback) {
+        setAttrDoc: function (attribute, callback) {
             //noinspection JSUnresolvedFunction
             editor.ace.setReadOnly(true);
-            var attributeDoc = getAttributeFromDocSnapshot(app, attribute);
-            var mode = (attributeDoc && attributeDoc.mode) || 'none';
-            app.debug && console.log('setDoc attribute, mode', attribute.title, mode);
+            return getAttributeFromDocSnapshot(app, attribute, function (err, attributeDoc) {
+                var mode = (attributeDoc && attributeDoc.mode) || 'none';
+                app.debug && console.log('setAttrDoc attribute, mode', attribute.title, mode);
 
-            this.setMode(attribute, mode);
+                callFunction(app, 'main').setMode(attribute, mode);
 
-            if (editor.doc != null) {
-                app.debug && console.log('current cursor position', editor.ace.getCursorPosition());
-                callFunction(app, 'user').storeCurrentPosition(editor.doc.name, editor.ace.getCursorPosition());
-                editor.doc.close();
-                editor.doc.detach_ace();
-            }
-            loadAttributeTextDoc(app, attribute, function (error, newDoc) {
-                if (error) {
-                    editor.ace.setReadOnly(true);
-                    console.error(error);
-                    return callback && callback(error);
+                if (editor.doc != null) {
+                    app.debug && console.log('current cursor position', editor.ace.getCursorPosition());
+                    callFunction(app, 'user').storeCurrentPosition(editor.doc.name, editor.ace.getCursorPosition());
+                    editor.doc.close();
+                    editor.doc.detach_ace();
                 }
-                newDoc.on('error', function (err) {
-                    editor.ace.setReadOnly(true);
-                    return callback && callback(err);
-                });
-
-                editor.doc = newDoc;
-
-                //noinspection JSUnresolvedFunction
-                editor.doc.attach_ace(editor.ace);
-                //noinspection JSUnresolvedFunction
-
-                var moveTo = callFunction(app, 'user').getCurrentPosition(editor.doc.name);
-                if (!(moveTo && moveTo.row && moveTo.column)) {
-                    moveTo = {
-                        row: 0,
-                        column: 0
+                loadAttributeTextDoc(app, attribute, function (error, newDoc) {
+                    if (error) {
+                        editor.ace.setReadOnly(true);
+                        console.error(error);
+                        return callback && callback(error);
                     }
-                }
-                app.debug && console.log('moveTo', moveTo);
-                editor.ace.moveCursorToPosition(moveTo);
-                editor.ace.centerSelection();
+                    newDoc.on('error', function (err) {
+                        editor.ace.setReadOnly(true);
+                        return callback && callback(err);
+                    });
 
-                editor.ace.setReadOnly(false);
+                    editor.doc = newDoc;
 
-                editor.ace.focus(); //To focus the ace editor
-                return callback && callback(null);
+                    //noinspection JSUnresolvedFunction
+                    editor.doc.attach_ace(editor.ace);
+                    //noinspection JSUnresolvedFunction
+
+                    var moveTo = callFunction(app, 'user').getCurrentPosition(editor.doc.name);
+                    if (!(moveTo && moveTo.row && moveTo.column)) {
+                        moveTo = {
+                            row: 0,
+                            column: 0
+                        }
+                    }
+                    app.debug && console.log('moveTo', moveTo);
+                    editor.ace.moveCursorToPosition(moveTo);
+                    editor.ace.centerSelection();
+
+                    editor.ace.setReadOnly(false);
+
+                    editor.ace.focus(); //To focus the ace editor
+                    return callback && callback(null);
+                });
             });
         }
     }
@@ -437,6 +439,13 @@ function getAttributeLocation(attribute) {
     }
 }
 
+function getLocation(location) {
+    return {
+        collection: location.collection,
+        name: location.name
+    }
+}
+
 // identifying attributes parent doc
 function getDocId(attribute) {
     return attribute
@@ -444,14 +453,24 @@ function getDocId(attribute) {
             && (attribute.collection + ':' + attribute.name);
 }
 
-function getAttributeDoc(app, attribute) {
+function getAttributeDoc(app, attribute, callback) {
     var docId = getDocId(attribute);
-    return docId && app.doc[docId];
+        app.debug && console.log('getAttributeDoc attribute, docId', attribute, docId, app.doc);
+    if (docId && app.doc[docId]) {
+        return callback && callback(null, app.doc[docId]);
+    } else {
+        loadRawDoc(app, getLocation(attribute), function (err, attributeDoc) {
+            setDoc(app, docId, attributeDoc);
+            return getAttributeDoc(app, attribute, callback);
+        });
+    }
 }
 
-function getAttributeFromDocSnapshot(app, attribute) {
-    var doc = getAttributeDoc(app, attribute);
-    return doc && doc.snapshot && doc.snapshot[attribute.attribute];
+function getAttributeFromDocSnapshot(app, attribute, callback) {
+    return getAttributeDoc(app, attribute, function (err, doc) {
+        app.debug && console.log('getAttributeFromDocSnapshot doc', doc);
+        return callback && callback( err, doc && doc.snapshot && doc.snapshot[attribute.attribute]);
+    });
 }
 
 function getAttributeUrl(attribute) {
@@ -459,25 +478,26 @@ function getAttributeUrl(attribute) {
 }
 
 function replaceAttributeDocKey(app, attribute, key, value, doInsert, callback) {
-    var op = [];
-    var attributeDoc = getAttributeDoc(app, attribute);
-    if (attributeDoc && attributeDoc[key]) {
-        app.debug && console.log('// remove', key);
-        op.push({
-            p: [attribute.attribute, key],
-            od: attributeDoc[key]
+    return getAttributeDoc(app, attribute, function (err, attributeDoc) {
+        var op = [];
+        if (attributeDoc && attributeDoc[key]) {
+            app.debug && console.log('// remove', key);
+            op.push({
+                p: [attribute.attribute, key],
+                od: attributeDoc[key]
+            });
+        }
+        if (typeof doInsert == 'function' && doInsert(value) || doInsert) {
+            app.debug && console.log('//insert', key);
+            op.push({
+                p: [attribute.attribute, key],
+                oi: value
+            });
+        }
+        attributeDoc.submitOp(op, function (err, result) {
+            app.debug && console.log('err', err, 'result', result);
+            return callback && callback(err, result);
         });
-    }
-    if (typeof doInsert == 'function' && doInsert(value) || doInsert) {
-        app.debug && console.log('//insert', key);
-        op.push({
-            p: [attribute.attribute, key],
-            oi: value
-        });
-    }
-    attributeDoc.submitOp(op, function (err, result) {
-        app.debug && console.log('err', err, 'result', result);
-        return callback && callback(err, result);
     });
 }
 
@@ -513,17 +533,17 @@ function initViewModel_main(app, vmName) {
     var viewModel = app.ko.mapping.fromJS(snapshot, mapping);
 
     viewModel._selectedMode = app.ko.observable();
-
+    var self = this;
     var noneAceMode = null;
     /* does not get invalidated */
     viewModel._noneMode = function () {
-        if (!this.noneAceMode) {
-            this.noneAceMode = _.find(viewModel._availableModes(),
+        if (!self.noneAceMode) {
+            self.noneAceMode = _.find(viewModel._availableModes(),
                     function (mode) {
                         return mode.ace() == 'none';
                     });
         }
-        return this.noneAceMode;
+        return self.noneAceMode;
     };
 
     viewModel._selectedMode(viewModel._noneMode());
@@ -538,50 +558,54 @@ function initViewModel_main(app, vmName) {
         return equalAttributes(active, attribute);
     };
 
-    viewModel._getModeForAttribute = function (attribute) {
+    viewModel._getModeForAttribute = function (attribute, callback) {
         if (!attribute) {
-            return viewModel._noneMode();
-        }
-        var attributeDoc = getAttributeFromDocSnapshot(app, attribute);
-        var docMode = (attributeDoc && attributeDoc.mode);
-        if (!docMode) {
-            return viewModel._noneMode();
-        }
-        var mode = _.find(viewModel._availableModes(),
-                function (mode) {
-                    return docMode == mode.ace();
-                });
-        if (mode) {
-            app.debug && console.log('getModeForAttribute', mode);
-            return mode;
-        } else {
-            return viewModel._noneMode();
+            return callback && callback(null, viewModel._noneMode());
         }
+        return getAttributeFromDocSnapshot(app, attribute, function (err, attributeDoc) {
+            var docMode = (attributeDoc && attributeDoc.mode);
+            app.debug && console.log('_getModeForAttribute attribute, docMode', attribute, docMode);
+            if (!docMode) {
+                return callback && callback(null, viewModel._noneMode());
+            }
+            var mode = _.find(viewModel._availableModes(),
+                    function (mode) {
+                        app.debug && console.log('_getModeForAttribute mode.ace()', mode.ace());
+                        return docMode == mode.ace();
+                    });
+            if (mode) {
+                app.debug && console.log('_getModeForAttribute', mode);
+                return callback && callback(null, mode);
+            } else {
+                return callback && callback(null, viewModel._noneMode());
+            }
+        });
     };
 
-    viewModel._getExtensionForAttribute = function (attribute) {
-        var mode = viewModel._getModeForAttribute(attribute);
-        if (mode && mode.ace() == 'markdown') {
-            return '.md';
-        } else {
-            return '.html';
-        }
+    viewModel._getExtensionForAttribute = function (attribute, callback) {
+        return viewModel._getModeForAttribute(attribute, function (err, mode) {
+            if (mode && mode.ace() == 'markdown') {
+                return callback && callback(null, '.md');
+            }
+            return callback && callback(null, '.html');
+        });
     };
 
-    viewModel._getModeForChosenAttribute = function () {
+    viewModel._getModeForChosenAttribute = function (callback) {
         var attribute = viewModel._chosenAttribute();
         app.debug && console.log('getModeForChosenAttribute._chosenAttribute', attribute);
-        return viewModel._getModeForAttribute(attribute)
+        return viewModel._getModeForAttribute(attribute, callback)
     };
 
 
     viewModel._updateSelectedMode = function () {
-        var selectedMode = viewModel._getModeForChosenAttribute();
-        app.debug && console.log('updateSelectedMode.getModeForChosenAttribute', selectedMode);
-        if (selectedMode) {
-            app.debug && console.log('setSelectedMode:', selectedMode.ace());
-            viewModel._selectedMode(selectedMode);
-        }
+        return viewModel._getModeForChosenAttribute(function (err, selectedMode) {
+            app.debug && console.log('updateSelectedMode.getModeForChosenAttribute', selectedMode);
+            if (selectedMode) {
+                app.debug && console.log('setSelectedMode:', selectedMode.ace());
+                return viewModel._selectedMode(selectedMode);
+            }
+        });
     };
     var activeAttribute = callFunction(app, 'user').getActiveAttributes();
 
@@ -591,7 +615,7 @@ function initViewModel_main(app, vmName) {
         app.debug && console.log('_goToAttribute',attribute);
         viewModel._chosenAttribute(attribute);
         viewModel._updateSelectedMode();
-        callFunction(app, 'main').setDoc(attribute, function (err) {
+        callFunction(app, 'main').setAttrDoc(attribute, function (err) {
             if (!_.find(
                     viewModel._activeAttributes(),
                     function (active) {
@@ -599,7 +623,6 @@ function initViewModel_main(app, vmName) {
                     }
             )) { // TODO: do not update viewmodel, instead update sharedoc.
                 callFunction(app, 'user').addActiveAttribute(attribute);
-                //viewModel._activeAttributes.push(attribute);
             }
         });
     };
@@ -608,20 +631,25 @@ function initViewModel_main(app, vmName) {
     viewModel._previewAttribute = function () {
         var attribute = viewModel._chosenAttribute();
         if (attribute) {
-            var ext = viewModel._getExtensionForAttribute(attribute);
-            var url = '/page/' + getAttributeUrl(attribute) + ext + '#!watch';
-            open_in_new_tab(url);
+            return viewModel._getExtensionForAttribute(attribute, function (err, ext) {
+                var url = '/page/' + getAttributeUrl(attribute) + ext + '#!watch';
+                open_in_new_tab(url);
+            });
         }
 
     };
 
-    viewModel._getMode = app.ko.computed(function () {
+    viewModel._getMode = app.ko.observable();
+
+    viewModel._computeMode = app.ko.computed(function () {
         var attribute = viewModel._chosenAttribute();
-        if (!attribute) return attribute;
-
-        var attributeDoc = getAttributeFromDocSnapshot(app, attribute);
-
-        return attribute && attributeDoc && attributeDoc.mode;
+        if (!attribute) {
+            return viewModel._getMode(attribute);
+        } else {
+            return getAttributeFromDocSnapshot(app, attribute, function (err, attributeDoc) {
+                return viewModel._getMode(attribute && attributeDoc && attributeDoc.mode);
+            });
+        }
     });
 
     viewModel._selectedMode.subscribe(function (newValue) {
@@ -931,6 +959,7 @@ function setDoc(app, docId, doc) {
     if (!app.doc) {
         app['doc'] = {};
     }
+    app.debug && console.log('setDoc docId, doc', docId, doc);
     app.doc[docId] = doc;
 }
 
@@ -1058,7 +1087,7 @@ function ensureIndexesOnAttributes(snapshot) {
         var maxAttribute = _.max(snapshot._attributes, function (attributeName) {
             return snapshot[attributeName].index;
         });
-        var max = maxAttribute && snapshot[maxAttribute].index || 0;
+        var max = maxAttribute && snapshot[maxAttribute] && snapshot[maxAttribute].index || 0;
         _.forEach(snapshot._attributes, function (attributeName,index) {
             if (!snapshot[attributeName].hasOwnProperty('index')) {
                 max += 1;
@@ -1068,7 +1097,7 @@ function ensureIndexesOnAttributes(snapshot) {
                     p: path,
                     oi: max
                 });
-                snapshot[attributeName].index=max;
+                snapshot[attributeName].index = max;
             }
         });
     }