--- a/.gitignore
+++ b/.gitignore
@@ -6,4 +6,8 @@
 /lib/
 /local/
 /include/
+
+#uploads directory
+mouchak/static/uploads/*
+mouchak/static/user_plugins/*
--- a/mouchak/server.py
+++ b/mouchak/server.py
@@ -7,7 +7,16 @@
 import pymongo
 import bson
 import conf
+import os
+from werkzeug import secure_filename
 
+PLUGIN_UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__))
+                                    + '/static/user_plugins')
+PLUGIN_ALLOWED_EXTENSIONS = set(['js', 'css'])
+
+FILE_UPLOAD_FOLDER = os.path.join(os.path.dirname(os.path.abspath(__file__)) +
+                                  '/static/uploads')
+
 app = flask.Flask(__name__)
 
 
@@ -40,6 +49,11 @@
     return {'content': content, 'menu': menu}
 
 
+def allowed_file(filename):
+    return '.' in filename and \
+            filename.rsplit('.', 1)[1] in PLUGIN_ALLOWED_EXTENSIONS
+
+
 @app.errorhandler(404)
 def pageNotFound(e):
     return flask.render_template('404.html'), 404
@@ -153,6 +167,37 @@
     flask.flash('You were logged out')
     return flask.redirect(flask.url_for('login'))
 
+
+#TODO: refactor these code to classes
+#TODO: find out if this is a good method for saving plugins..
+@app.route('/static/user_plugins/<filename>', methods=['POST'])
+def savePlugin(filename):
+    if flask.request.method == 'POST':
+        if filename and allowed_file(filename):
+            data = flask.request.form['code']
+            filename = secure_filename(filename)
+            fh = open(os.path.join(PLUGIN_UPLOAD_FOLDER + '/' + filename), 'w')
+            fh.write(data)
+            fh.close()
+            return flask.jsonify(saved = True)
+
+#TODO: find out if this is a good method for uploading plugins..
+@app.route('/upload/plugin', methods=['POST'])
+def uploadPlugin():
+    if flask.request.method == 'POST':
+        print flask.request.files
+        file = flask.request.files['plugin-file']
+        if file and allowed_file(file.filename):
+            filename = secure_filename(file.filename)
+            file.save(os.path.join(app.config['PLUGIN_UPLOAD_FOLDER'],
+                                   filename))
+
+            #return flask.redirect(flask.url_for('uploaded_file',
+            #            filename=filename))
+            return flask.jsonify(uploaded = True,
+                                 path=flask.url_for('static', filename =
+                                                    'user_plugins/'+ filename))
+
 @app.route('/robots.txt')
 @app.route('/crossdomain.xml')
 def static_from_root():
@@ -160,6 +205,7 @@
 
 
 app.config.from_object(conf)
+app.config['PLUGIN_UPLOAD_FOLDER'] = PLUGIN_UPLOAD_FOLDER
 
 import logging,os
 from logging import FileHandler
--- a/mouchak/static/css/editor.css
+++ b/mouchak/static/css/editor.css
@@ -73,7 +73,7 @@
   left: 33%;
   top: 0px;
 }
-#code-edit {
+.ace-mouchak {
   position: relative;
   top: 0;
   left: 0;
--- a/mouchak/static/js/editor.js
+++ b/mouchak/static/js/editor.js
@@ -186,6 +186,7 @@
         split('-')[1];
       var content = this.model.get('content')[idx];
       content = new M.types.model[content.type](content);
+      console.log('model inited ', content);
       this.editing = true;
       this.edit_idx = idx;
       var contentview = new ContentView({model: content});
@@ -299,7 +300,9 @@
       'click #updateContent': 'update',
       'click #back' : 'back',
       'click #edit-type button' : 'editTypeChanged',
-      'change .contentview select': 'typeChanged'
+      'change .contentview select': 'typeChanged',
+      /* plugin events */
+      'click #upload-plugin': 'uploadPlugin'
     },
     initialize: function() {
       _.bindAll.apply(_, [this].concat(_.functions(this)));
@@ -358,6 +361,14 @@
           src: this.model.get('src'),
           callback: this.model.get('callback')
         }));
+        if(this.model.get('src')) {
+          var plugin_type = this.model.get('plugin_type');
+          plugin_type = (plugin_type === 'js') ? 'javascript': 'css';
+          this.model.getCode(function(data) {
+            $('#plugin-edit').html(escapeHtml(data));
+            M.editor.code.init('plugin-edit', plugin_type);
+          });
+        }
       }
       else if(type === 'map') {
         var template = _.template($('#map-template').html());
@@ -371,6 +382,10 @@
       var type = this.$select.val();
       //TODO: do validation on type - a list of valid models is in
       //M.types.model
+      var base_props = _.keys(new M.types.model.base().defaults);
+      var props = _.omit(this.model.toJSON(), base_props);
+      var new_model = new M.types.model[type](props);
+      this.model = new_model;
       this.model.set({'type': type});
       this.render();
     },
@@ -410,6 +425,12 @@
           new_attrs['data'] = data;
         }
       }
+      else if(this.$select.val() === 'plugin') {
+        var data = M.editor.code.save('plugin-edit');
+        this.model.saveCode(data, function(resp) {
+          console.log('plugin saved..');
+        });
+      }
       this.model.set(new_attrs);
       M.editor.pageview.updateContent(this.model.toJSON());
     },
@@ -425,6 +446,28 @@
     },
     back: function() {
       this.cleanUp();
+    },
+    //upload inputed plugin file to server
+    uploadPlugin: function(event) {
+      var self = this;
+      M.editor.showOverlay();
+      var $form = $('#plugin-upload-form')[0];
+      console.log($form);
+      var formdata = new FormData($form);
+      console.log(formdata);
+      $.ajax({
+        type: 'POST',
+        url: M.PluginUploadURL(),
+        data: formdata,
+        processData: false,
+        contentType: false,
+        success: function(response) {
+          self.model.set({'src': response.path})
+          self.render();
+          M.editor.hideOverlay();
+          console.log(self.model.toJSON());
+        }
+      });
     }
   });
 
--- a/mouchak/static/js/models.js
+++ b/mouchak/static/js/models.js
@@ -80,10 +80,19 @@
       data: {},
       callback: ""
     }, BaseType.prototype.defaults),
+
     initialize: function() {
       BaseType.prototype.initialize.call(this, arguments);
-
       if(this.get('src').match(/\.js/)) {
+        this.set({'plugin_type': 'js'});
+      }
+      else if(this.get('src').match(/\.css/)) {
+        this.set({'plugin_type': 'css'});
+      }
+    },
+    exec: function() {
+      console.log('exec called');
+      if(this.get('src').match(/\.js/)) {
         var script = document.createElement('script');
         var callback = this.get('callback');
         script.src = this.get('src');
@@ -102,6 +111,30 @@
         link.type = 'text/css';
         document.body.appendChild(link);
       }
+    },
+    // get the source code of the plugin from the src path
+    getCode: function(cb) {
+      var self = this;
+      $.ajax({
+        type: 'GET',
+        url: self.get('src'),
+        cache: false,
+        success: function(data) {
+          cb(data);
+        }
+      });
+    },
+    // save the source code of the plugin to the src path
+    saveCode: function(data, cb) {
+      var self = this;
+      $.ajax({
+        type: 'POST',
+        url: this.get('src'),
+        data: {code: data},
+        success: function(data) {
+          cb(data);
+        }
+      });
     }
   });
 
--- a/mouchak/static/js/views.js
+++ b/mouchak/static/js/views.js
@@ -106,7 +106,7 @@
       return;
     },
     render: function(el) {
-      return;
+      this.model.exec();
     }
   });
 
--- a/mouchak/templates/editor.html
+++ b/mouchak/templates/editor.html
@@ -21,8 +21,9 @@
   <script>
     // initialize editor
     window.M = window.M || {};
-    M.MenuURL = function() { return "{{ url_for('insertMenu') }}"};
-    M.PageURL = function() { return "{{ url_for('insertPage') }}"};
+    M.MenuURL = function() { return "{{ url_for('insertMenu') }}"; };
+    M.PageURL = function() { return "{{ url_for('insertPage') }}"; };
+    M.PluginUploadURL = function() { return "{{ url_for('uploadPlugin') }}"; };
     M.site_content = {{ content|tojson|safe }};
     window.onload = function() {
       M.editor.init();
@@ -290,7 +291,7 @@
 
   <script type="text/template" id="plugin-template">
     <div class="data">
-      <div class="row">
+      <!--div class="row">
         <div class="form-group col-lg-6">
           <div class="input-group">
             <span class="input-group-addon"><strong>path to file</strong></span>
@@ -298,7 +299,22 @@
             m-data-target="src">
           </div>
         </div>
-      </div>
+      </div-->
+      <% if(!src) { %>
+        <div class="row">
+          <div class="form-group col-lg-6">
+            <form id="plugin-upload-form" action="" method="post" enctype="multipart/form-data">
+              <input type="file" name="plugin-file" id="select-plugin"> 
+              <input type="button" id="upload-plugin" class="btn btn-info" value="Upload Plugin">
+            </form>
+          </div>
+        </div>
+        <div class="row">
+          <div class="form-group col-lg-6">
+            <button type="button" class="btn btn-info" id="create-plugin">Create a new plugin</button>
+          </div>
+        </div>
+      <% } %>
       <div class="row">
         <div class="form-group col-lg-6">
           <div class="input-group">
@@ -309,6 +325,9 @@
           </div>
         </div>
       </div>
+      <% if(src) { %>
+        <div class="ace-mouchak" id="plugin-edit"></div>
+      <% } %>
       <div class="preview"></div>
     </div>
   </script>
@@ -339,7 +358,7 @@
           <%= data %>
         </textarea>
         <% } else { %>
-        <div id="code-edit" m-data-target="data">
+        <div id="code-edit" class="ace-mouchak" m-data-target="data">
           <%= M.escapeHtml(data) %>
         </div>
         <% } %>