Merge "Embed iframe in div widget context"
diff --git a/dev/demo/plugin-client.html b/dev/demo/plugin-client.html
index 5189e87..2dac29b 100644
--- a/dev/demo/plugin-client.html
+++ b/dev/demo/plugin-client.html
@@ -38,5 +38,6 @@
       <li><a onclick="KorAPlugin.resize()">Resize</a></li>
       <li><a onclick="flood()">Flood!</a></li>
     </ul>
+    <p style="width: 2000px">------------------------------------------------------------------------------------------------------------------------</p>
   </body>
 </html>
diff --git a/dev/demo/plugin-server.html b/dev/demo/plugin-server.html
index 21362fd..c032c33 100644
--- a/dev/demo/plugin-server.html
+++ b/dev/demo/plugin-server.html
@@ -12,7 +12,14 @@
   <body>
     <p>Start the demo server with <code>morbo -l 'http://*:3003' t/plugin-server.pl</code> and open <a href="http://localhost:3003/demo/plugin-server.html"><code>this website</code></a>.</p>
     <main>
-      <div id="container"></div>
+      <div id="search">
+        <ol>
+          <li class="active">
+            <div id="container"></div>
+            <a onclick="KorAP.Plugin.addWidget(document.getElementById('container'), 'http://localhost:3003/demo/plugin-client.html')">Open widget</a>
+          </li>
+        </ol>
+      </div>
     </main>
   </body>
 </html>
diff --git a/dev/demo/plugin-serverdemo.js b/dev/demo/plugin-serverdemo.js
index 563f302..d5f07f8 100644
--- a/dev/demo/plugin-serverdemo.js
+++ b/dev/demo/plugin-serverdemo.js
@@ -7,12 +7,6 @@
 
 define(['app/en','plugin/server','lib/domReady','init','hint/foundries/cnx'], function (lang, pluginClass, domReady) {
   domReady(function () {
-    var p = pluginClass.create();
-
-    // Open widget!
-    p.addWidget(
-      document.getElementById('container'),
-      'http://localhost:3003/demo/plugin-client.html'
-    );
+    KorAP.Plugin = pluginClass.create();
   });
 });
diff --git a/dev/js/src/plugin/widget.js b/dev/js/src/plugin/widget.js
index 7e56603..1fe417a 100644
--- a/dev/js/src/plugin/widget.js
+++ b/dev/js/src/plugin/widget.js
@@ -10,6 +10,10 @@
 define(["util"], function () {
   "use strict";
 
+  // Localization values
+  const loc   = KorAP.Locale;
+  loc.CLOSE     = loc.CLOSE     || 'Close';
+
   return {
 
     /**
@@ -34,23 +38,50 @@
       if (this._element)
         return this._element;
 
+      var div = document.createElement('div');
+      div.classList.add('widget');
+
       // Spawn new iframe
-      var i = document.createElement('iframe');
+      var i = div.addE('iframe');
       i.setAttribute('allowTransparency',"true");
       i.setAttribute('frameborder', 0);
       i.setAttribute('sandbox','allow-scripts');
-      i.classList.add('widget');
       i.style.height = '0px';
       i.setAttribute('name', this.id);
       i.setAttribute('src', this.src);
-      this._element = i;
+      this._iframe = i;
 
-      return i;
+      var ul = div.addE('ul');
+      ul.classList.add('action','right');
+
+      // Add close button
+      var close = ul.addE('li');
+      close.addE('span').addT(loc.CLOSE);
+      close.classList.add('close');
+      close.setAttribute('title', loc.CLOSE);
+
+      // Close match
+      close.addEventListener('click', function (e) {
+        e.halt();
+        this.shutdown()
+      }.bind(this));
+      
+      this._element = div;
+
+      return div;
+    },
+
+    // Return iframe of widget
+    iframe : function () {
+      if (this._iframe)
+        return this._iframe;
+      this.element();
+      return this._iframe;
     },
 
     // Resize iframe
     resize : function (data) {
-      this._element.style.height = data.height + 'px';
+      this.iframe().style.height = data.height + 'px';
     },
 
     // Shutdown suspicious iframe
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
index 1a13ef6..6b2b715 100644
--- a/dev/scss/main/plugin.scss
+++ b/dev/scss/main/plugin.scss
@@ -1,5 +1,13 @@
-iframe.widget {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+@import "../util";
+
+div.widget {
+  margin-right: $right-match-distance;
+
+  > iframe {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    overflow-x: auto;
+  }
 }
\ No newline at end of file