var interact = require('interact.js');
var merge = require('deepmerge');
var Window = function(opts) {
  this.opts = {
    x: 0,
    y: 0,
    width: 200,
    height: 100,
    elementType: "div",
    titleBar: "span",
    title: "",
    dragOpts: {
      inertia: true,
      restrict: {restriction: ".windowsill.workspace"}
    },
    resizeOpts: {
    }
  };

  if(!opts) opts = {};
  this.opts = merge(this.opts, opts);
  this.createDomElement();

  this.move(this.opts.x, this.opts.y);

  this.resize(this.opts.width, this.opts.height);

  this.setTitle(this.opts.title);
};

Window.prototype.createDomElement = function() {
  var element = document.createElement(this.opts.elementType);
  this.element = element;
  this.element.className = "windowsill window";

  if(this.opts.titleBar) {
    var titleBar = document.createElement(this.opts.titleBar);
    titleBar.innerHTML = this.opts.title;
    titleBar.className = "windowsill titlebar";
    this.element.appendChild(titleBar);
    this.titleBarElement = titleBar;
    interact(this.titleBarElement)
      .draggable(this.opts.dragOpts)
      .on("dragmove", function(event) {
        this.move(this.x + event.dx, this.y + event.dy);
      }.bind(this));
  }
  
  this.body = document.createElement("div");
  this.element.appendChild(this.body);

  interact(this.element)
    .resizable(this.opts.resizeOpts)
    .on("resizemove", function(event) {
      this.resize(this.width + event.dx, this.height + event.dy);
    }.bind(this));

  return this.element;
};

Window.prototype.move = function(x, y) {
  this.x = x;
  this.y = y;
  this.element.style.transform = "translate(" + x + "px, " + y + "px)";
};

Window.prototype.resize = function(width, height) {
  this.width = width;
  this.height = height;
  this.element.style.width = width;
  this.element.style.height = height;
};

Window.prototype.setTitle = function(newTitle) {
  if(this.titleBarElement) {
    this.titleBarElement.innerHTML = newTitle;
  }
  this.title = newTitle;
};


module.exports = Window;

@@ -280,16 +280,25 @@
 trict: %7B
+%0A        
 restrict
@@ -329,34 +329,173 @@
 ace%22
-%7D%0A    %7D,%0A    resizeOpts: %7B
+,%0A        elementRect: %7Bleft: 0, right: 1, top: 0, bottom: 1%7D%0A      %7D%0A    %7D,%0A    resizeOpts: %7B%0A      restrict: %7B%0A        restriction: %22.windowsill.workspace%22%0A      %7D
 %0A   
@@ -1179,33 +1179,25 @@
 teract(this.
-titleBarE
+e
 lement)%0A    
@@ -1225,24 +1225,63 @@
 s.dragOpts)%0A
+      .allowFrom(this.titleBarElement)%0A
       .on(%22d
@@ -1438,16 +1438,59 @@
 %22div%22);%0A
+  this.body.className = %22windowsill body%22;%0A
   this.e
@@ -1533,31 +1533,28 @@
 teract(this.
-element
+body
 )%0A    .resiz

Use the body element as the resizable