diff --git a/bower_components/paper-listbox/.bower.json b/bower_components/paper-listbox/.bower.json
new file mode 100644
index 0000000..8ac9cc0
--- /dev/null
+++ b/bower_components/paper-listbox/.bower.json
@@ -0,0 +1,48 @@
+{
+  "name": "paper-listbox",
+  "version": "1.1.2",
+  "description": "Implements an accessible material design listbox",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "listbox"
+  ],
+  "main": [
+    "paper-listbox.html",
+    "paper-sublistbox.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-listbox"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-listbox",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.1.0",
+    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+    "iron-collapse": "PolymerElements/iron-collapse#^1.0.0",
+    "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^3.4.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  },
+  "_release": "1.1.2",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.1.2",
+    "commit": "b0fde50f57db3e8e4926e9d046be9d3c159a2bff"
+  },
+  "_source": "git://github.com/polymerelements/paper-listbox.git",
+  "_target": "~1.1.2",
+  "_originalSource": "polymerelements/paper-listbox",
+  "_direct": true
+}
\ No newline at end of file
diff --git a/bower_components/paper-listbox/.gitignore b/bower_components/paper-listbox/.gitignore
new file mode 100644
index 0000000..fbe05fc
--- /dev/null
+++ b/bower_components/paper-listbox/.gitignore
@@ -0,0 +1 @@
+bower_components/
diff --git a/bower_components/paper-listbox/.travis.yml b/bower_components/paper-listbox/.travis.yml
new file mode 100644
index 0000000..9384cad
--- /dev/null
+++ b/bower_components/paper-listbox/.travis.yml
@@ -0,0 +1,31 @@
+language: node_js
+sudo: false
+cache:
+  directories:
+  - node_modules
+matrix:
+  include:
+  - node_js: stable
+    script: xvfb-run -a wct --simpleOutput -l firefox -l chrome
+    addons:
+      firefox: latest
+      apt:
+        sources:
+        - google-chrome
+        packages:
+        - google-chrome-stable
+  - node_js: node
+    script:
+    - |
+      if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then
+        wct --simpleOutput -s 'Windows 10/microsoftedge' -s 'Windows 8.1/internet explorer@11' -s 'Windows 7/internet explorer@10' -s 'OS X 10.10/safari@8' -s 'OS X 10.9/safari@7'
+      fi
+before_script:
+- npm install bower
+- npm install web-component-tester
+- export PATH=$PWD/node_modules/.bin:$PATH
+- bower install
+env:
+  global:
+  - secure: uR09ZOD9Sm4HB8QLY2CAr2dWkjxzCggAQF7Tf9mjyk6ZFdzIkktv/IG5Q6ywUPrBwEgpR15a//vknAh1e96w2sdsU7x4SHdnVFV46mN0i3higjiQ0V6qSbFKH0Lom89yh3+nQtmJ8JCF/zWRYGsgpfUC/O3kRQv0ghZ0pjWeO57pvSv8mOTRMUi34cSJchBDZj9U1CzJqJYakST30XBMDHabqm6wbIqvSDve9duPiFPJi6GloRfMXxzC+Lt+WpEdjiYuZ33cmqepW3TEQf0TiZFqg9aQcBINv8723O9IcInvylXmtHRCBikCqoXE6xUNDJZWXbjxzNOwiFO4WSF9t1M7il99ByE3r4MwHlmKTCwHUb4VTvfXy1Ad+sZ0dwDJl92CmTd1/jJGXLXrqUjnUTDFucH4OxQPWtSPxOINzxBebXq+x+cpjdZPe5wp0BpcNiYN0QBNOT08C9B+vLw+/cSn5FXkYO/T+8F/Lhu6SYN1ZQ3HGpjUsNpqhEJgw+l6syQoIZfs3xN6mWqWFbs1RgtGJNrJRwn8umH1I8xy+5yZaif88RhoqTSZnTIkVWMF3/USEDZlhPv+iivFn3Oq3sAopxbR39s9KAGCMu9XdaJk/WA8crS3Jeeq+78tknrpO0VTth8DY6fHY/dV56ZJrc8wHO5souGzg2NLC+D/X20=
+  - secure: k4qJ+VUFYDfWN1FEGqDSLXz6s6zb9fQu9Pwc+b4EMCvhC4Tfhdk7LbGDaw8cnBuDEA1jA9NvmbNN5PqvQ65MxTtPOWpQ/G2N08x9BVJ/u/MkWIY5/LZZoabaiHj4pQAA10sBEeBnhOhfKjNHT3H9s1lo2aWTucc+27fhiWsf2Kmkc4meYU9HKLazrCh+34neOdrkLAMA0EGIEn8OSsmDNhaY5yL71X3wil3qNvfpzXIy0ceAPvLqhM4WvEEYSeel7AohlSyTSC/9GdBvdqN6UmPKJTrk1J2wMsAMcznWDjashORcf/PaVVg4WHfYEBuDk7ECnX+G3Zb02hhw1JnVP+zK/wI9vwwkQXvYqNa+Q+713cWuGXYgVwH2TXKpsO6u69WHw50yKn6k+oOqDvX5SzRgOouFaHFO4GAllgFuX4iAltpluE+aE7I98C968FI3JrHEhCSxH8NlmmPRx794MKUsXBzPLeZ8CqrFs2llvBjVif0vJkad+X4xSxXgxs7SzK0sQS+CtKG3EFLMRNqi9OR98LRFgmkwM7OtOABnZ49lVXqrIaBk0quKAvjSg6PPXf4BUOJdvs8G91N1sf80XOfMj22iGdVUVnmwcktfhdwbm+hN5ToGgbVFTpYOM45+husfmUn7DamYmPudN2EJoawqe44zD6MfjfwqjJCv5Dk=
diff --git a/bower_components/paper-listbox/README.md b/bower_components/paper-listbox/README.md
new file mode 100644
index 0000000..95f0106
--- /dev/null
+++ b/bower_components/paper-listbox/README.md
@@ -0,0 +1,5 @@
+# paper-listbox
+
+![Build status](https://api.travis-ci.org/PolymerElements/paper-listbox.svg?branch=master)
+
+`<paper-listbox>` implements an accessible listbox control with Material Design styling.
diff --git a/bower_components/paper-listbox/bower.json b/bower_components/paper-listbox/bower.json
new file mode 100644
index 0000000..66a0910
--- /dev/null
+++ b/bower_components/paper-listbox/bower.json
@@ -0,0 +1,38 @@
+{
+  "name": "paper-listbox",
+  "version": "1.1.2",
+  "description": "Implements an accessible material design listbox",
+  "authors": "The Polymer Authors",
+  "keywords": [
+    "web-components",
+    "polymer",
+    "listbox"
+  ],
+  "main": [
+    "paper-listbox.html",
+    "paper-sublistbox.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-listbox"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-listbox",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.1.0",
+    "iron-behaviors": "PolymerElements/iron-behaviors#^1.0.0",
+    "iron-collapse": "PolymerElements/iron-collapse#^1.0.0",
+    "iron-menu-behavior": "PolymerElements/iron-menu-behavior#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "paper-item": "PolymerElements/paper-item#^1.0.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^3.4.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
+  }
+}
diff --git a/bower_components/paper-listbox/demo/index.html b/bower_components/paper-listbox/demo/index.html
new file mode 100644
index 0000000..c79e63e
--- /dev/null
+++ b/bower_components/paper-listbox/demo/index.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <title>paper-listbox demo</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../paper-item/paper-item.html">
+  <link rel="import" href="../../iron-collapse/iron-collapse.html">
+  <link rel="import" href="../paper-listbox.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+
+  <style is="custom-style">
+    .horizontal-section {
+      padding: 0 !important;
+    }
+
+    .avatar {
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      overflow: hidden;
+      background: #ccc;
+    }
+
+    paper-item {
+      --paper-item: {
+        cursor: pointer;
+      };
+    }
+
+    .sublist {
+      padding-left: 20px;
+      padding-right: 20px;
+
+    }
+  </style>
+</head>
+<body unresolved>
+  <div class="horizontal-section-container">
+    <div>
+      <h4>Standard</h4>
+      <div class="horizontal-section">
+        <paper-listbox>
+          <paper-item>Inbox</paper-item>
+          <paper-item>Starred</paper-item>
+          <paper-item>Sent mail</paper-item>
+          <paper-item>Drafts</paper-item>
+        </paper-listbox>
+      </div>
+    </div>
+
+    <div>
+      <h4>Pre-selected</h4>
+      <div class="horizontal-section">
+        <paper-listbox selected="0">
+          <paper-item>Inbox</paper-item>
+          <paper-item disabled>Starred</paper-item>
+          <paper-item>Sent mail</paper-item>
+          <paper-item>Drafts</paper-item>
+        </paper-listbox>
+      </div>
+    </div>
+
+    <div>
+      <h4>Multi-select</h4>
+      <div class="horizontal-section">
+        <paper-listbox multi>
+          <paper-item>Bold</paper-item>
+          <paper-item>Italic</paper-item>
+          <paper-item>Underline</paper-item>
+          <paper-item>Strikethrough</paper-item>
+        </paper-listbox>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/bower_components/paper-listbox/hero.svg b/bower_components/paper-listbox/hero.svg
new file mode 100644
index 0000000..91af1f6
--- /dev/null
+++ b/bower_components/paper-listbox/hero.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<g>
+		<circle cx="86.5" cy="39" r="4"/>
+		<path d="M138,44c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
+			c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,37.3,100,36,98,36v-2
+			c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
+			c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V44z"/>
+		<circle cx="86.5" cy="63" r="4"/>
+		<path d="M138,68c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
+			c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,61.3,100,60,98,60v-2
+			c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
+			c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V68z"/>
+		<circle cx="86.5" cy="88" r="4"/>
+		<path d="M138,93c-2,0-3.6-2.4-4.6-4.6c-1.1-2.1-1.7-3.4-3-3.4s-2,1.3-3,3.4c-1.1,2.1-2.2,4.6-4.9,4.6c-2.6,0-3.8-2.4-4.9-4.6
+			c-1.1-2.1-1.8-3.4-3.1-3.4c-1.3,0-2,1.3-3.1,3.4c-1.1,2.1-2.3,4.6-4.9,4.6c-2.6,0-4.1-2.4-5.1-4.6C100.3,86.3,100,85,98,85v-2
+			c3,0,4.1,2.4,5.1,4.6c1.1,2.1,1.9,3.4,3.2,3.4c1.3,0,2.1-1.3,3.2-3.4c1.1-2.1,2.3-4.6,4.9-4.6c2.6,0,3.8,2.4,4.9,4.6
+			c1.1,2.1,1.8,3.4,3.1,3.4c1.3,0,2-1.3,3.1-3.4c1.1-2.1,2.3-4.6,4.9-4.6s3.6,2.4,4.6,4.6c1.1,2.1,1.9,3.4,2.9,3.4V93z"/>
+		<path d="M151,102H73V24h78V102z M75,100h74V26H75V100z"/>
+	</g>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/bower_components/paper-listbox/index.html b/bower_components/paper-listbox/index.html
new file mode 100644
index 0000000..b9dad4b
--- /dev/null
+++ b/bower_components/paper-listbox/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+  <title>paper-listbox</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../polymer/polymer.html">
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+  <iron-component-page></iron-component-page>
+
+</body>
+</html>
diff --git a/bower_components/paper-listbox/paper-listbox.html b/bower_components/paper-listbox/paper-listbox.html
new file mode 100644
index 0000000..15d6cf0
--- /dev/null
+++ b/bower_components/paper-listbox/paper-listbox.html
@@ -0,0 +1,96 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-menu-behavior/iron-menu-behavior.html">
+<link rel="import" href="../paper-styles/default-theme.html">
+
+<!--
+Material design: [Menus](https://www.google.com/design/spec/components/menus.html)
+
+`<paper-listbox>` implements an accessible listbox control with Material Design styling. The focused item
+is highlighted, and the selected item has bolded text.
+
+    <paper-listbox>
+      <paper-item>Item 1</paper-item>
+      <paper-item>Item 2</paper-item>
+    </paper-listbox>
+
+An initial selection can be specified with the `selected` attribute.
+
+    <paper-listbox selected="0">
+      <paper-item>Item 1</paper-item>
+      <paper-item>Item 2</paper-item>
+    </paper-listbox>
+
+Make a multi-select listbox with the `multi` attribute. Items in a multi-select listbox can be deselected,
+and multiple item can be selected.
+
+    <paper-listbox multi>
+      <paper-item>Item 1</paper-item>
+      <paper-item>Item 2</paper-item>
+    </paper-listbox>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-listbox-background-color`   | Menu background color                                            | `--primary-background-color`
+`--paper-listbox-color`              | Menu foreground color                                            | `--primary-text-color`
+`--paper-listbox`                    | Mixin applied to the listbox                                        | `{}`
+
+### Accessibility
+
+`<paper-listbox>` has `role="listbox"` by default. A multi-select listbox will also have
+`aria-multiselectable` set. It implements key bindings to navigate through the listbox with the up and
+down arrow keys, esc to exit the listbox, and enter to activate a listbox item. Typing the first letter
+of a listbox item will also focus it.
+
+@group Paper Elements
+@element paper-listbox
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="paper-listbox">
+  <template>
+    <style>
+      :host {
+        display: block;
+        padding: 8px 0;
+
+        background: var(--paper-listbox-background-color, --primary-background-color);
+        color: var(--paper-listbox-color, --primary-text-color);
+
+        @apply(--paper-listbox);
+      }
+    </style>
+
+    <content></content>
+  </template>
+
+  <script>
+    (function() {
+      Polymer({
+        is: 'paper-listbox',
+
+        behaviors: [
+          Polymer.IronMenuBehavior
+        ],
+
+        hostAttributes: {
+          role: 'listbox'
+        }
+      });
+    })();
+  </script>
+</dom-module>
diff --git a/bower_components/paper-listbox/test/index.html b/bower_components/paper-listbox/test/index.html
new file mode 100644
index 0000000..59a5e2b
--- /dev/null
+++ b/bower_components/paper-listbox/test/index.html
@@ -0,0 +1,34 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+
+    <title>paper-listbox tests</title>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+    <script src="../../web-component-tester/browser.js"></script>
+
+  </head>
+  <body>
+
+    <script>
+
+      WCT.loadSuites([
+        'paper-listbox.html'
+      ]);
+
+    </script>
+
+  </body>
+</html>
diff --git a/bower_components/paper-listbox/test/paper-listbox.html b/bower_components/paper-listbox/test/paper-listbox.html
new file mode 100644
index 0000000..58a4fa3
--- /dev/null
+++ b/bower_components/paper-listbox/test/paper-listbox.html
@@ -0,0 +1,64 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+
+    <title>paper-listbox tests</title>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../paper-listbox.html">
+
+  </head>
+  <body>
+
+    <test-fixture id="basic">
+      <template>
+        <paper-listbox selected="0">
+          <div role="option">item 1</div>
+          <div role="option">item 2</div>
+          <div role="option">item 3</div>
+        </paper-listbox>
+      </template>
+    </test-fixture>
+
+    <script>
+
+      suite('<paper-listbox>', function() {
+        var listbox;
+
+        setup(function() {
+          listbox = fixture('basic');
+        });
+
+        test('selected item has an appropriate className', function(done) {
+          Polymer.Base.async(function() {
+            assert(listbox.selectedItem.classList.contains('iron-selected'));
+            done();
+          }, 1);
+        });
+
+        test('has listbox aria role', function() {
+          assert(listbox.getAttribute('role') === 'listbox');
+        });
+
+        a11ySuite('basic');
+      });
+
+    </script>
+
+  </body>
+</html>
diff --git a/controllets/select-marker-map-controllet/select-marker-map-controllet.html b/controllets/select-marker-map-controllet/select-marker-map-controllet.html
new file mode 100644
index 0000000..ad16e9f
--- /dev/null
+++ b/controllets/select-marker-map-controllet/select-marker-map-controllet.html
@@ -0,0 +1,364 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
+<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html"/>
+<link rel="import" href="../../bower_components/paper-listbox/paper-listbox.html"/>
+<link rel="import" href="../../bower_components/paper-item/paper-item.html"/>
+
+<script src="../../locales/paper_card_controllet_ln.js"></script>
+
+<dom-module id="select-marker-map-controllet">
+
+    <template>
+        <style is="custom-style">
+            #map_tootlbar{
+                background: #ffffff;
+                border: 1px solid #ccc;
+                position: absolute;
+                top: 2%;
+                right: 1%;
+                z-index: 1;
+                padding: 4px;
+            }
+
+            div.ol3-geocoder-container{
+                position: absolute;
+                top: 26%;
+                left: .5em;
+                box-sizing: border-box;
+            }
+        </style>
+        <link href="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css" rel="stylesheet">
+
+
+        <div id="map_tootlbar">
+            <paper-dropdown-menu label="Interaction" id="interaction_box">
+                <paper-listbox id="interaction_box" class="dropdown-content" selected={{selected_interaction}}>
+                    <paper-item>Marker</paper-item>
+                    <paper-item>LineString</paper-item>
+                    <paper-item>Polygon</paper-item>
+                    <paper-item disabled>Circle</paper-item>
+                    <paper-item>Square</paper-item>
+                    <paper-item>Box</paper-item>
+                    <paper-item>Text</paper-item>
+                </paper-listbox>
+            </paper-dropdown-menu>
+
+            <!--<paper-input id="shape_label" label="Shape label" maxlenght="30" value="{{label}}"></paper-input>-->
+
+        </div>
+
+        <div id="map" tabindex="0" style="height: 100%; width: 100%"></div>
+        <div id="popup" class="ol-popup">
+            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+            <div id="popup_content"></div>
+        </div>
+    </template>
+
+    <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
+    <script src="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
+
+    <script>
+
+        _this = null;
+        Polymer({
+            is: "select-marker-map-controllet",
+
+            listeners : {
+                'iron-select' : '_changeInteraction'
+            },
+
+            properties: {
+                lang:{
+                    type: String,
+                    value: navigator.language
+                },
+                map:{
+                    type: Object
+                },
+
+                olview:{
+                    type: Object
+                },
+
+                geocoder:{
+                    type: Object
+                },
+
+                overlay:{
+                    type: Object
+                },
+
+                iconStyle:{
+                    type : Object
+                },
+
+                vectorSource:{
+                    type: Object
+                },
+
+                coordinate: {
+                    type: Array,
+                    value: []
+                },
+
+                interaction:{
+                    type: String,
+                    value: "marker"//marker - geojson
+                },
+
+                selected_interaction:{
+                    type: Number,
+                    value: 0
+                },
+
+                draw_layer:{
+                    type: Object
+                },
+
+                source: {
+                    type: Object
+                },
+
+                draw:{
+                    type: Object
+                },
+
+                textStyle:{
+                    type: Object
+                },
+
+                geoStyle:{
+                    type: Object
+                },
+
+                label: {
+                    type: String,
+                    value: ""
+                }
+            },
+
+            ready : function(){
+                _this = this;
+                this.olview = new ol.View({
+                            center: [0, 0],
+                            projection: "EPSG:4326",
+                            zoom: 3,
+                            minZoom: 2,
+                            maxZoom: 20
+                        });
+
+                var baseLayer = new ol.layer.Tile({
+                    source: new ol.source.OSM()
+                });
+
+                //marker layer
+                this.iconStyle = new ol.style.Style({
+                    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                        anchor: [0.5, 46],
+                        anchorXUnits: 'fraction',
+                        anchorYUnits: 'pixels',
+                        opacity: 0.75,
+                        src: 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images/marker-icon.png'
+                    }))
+                });
+
+                this.vectorSource = new ol.source.Vector({});
+
+                //draw layer
+                this.source = new ol.source.Vector({wrapX: false});
+
+                this.draw_layer = new ol.layer.Vector({
+                    source: this.source,
+                    style: new ol.style.Style({
+                        fill: new ol.style.Fill({
+                            color: 'rgba(255, 255, 255, 0.6)'
+                        }),
+                        stroke: new ol.style.Stroke({
+                            color: '#ffff00',
+                            width: 4
+                        }),
+                        image: new ol.style.Circle({
+                            radius: 7,
+                            fill: new ol.style.Fill({
+                                color: '#ffff00'
+                            })
+                        })
+                    })
+                });
+
+                this.map = new ol.Map({
+                    target:'map',
+                    view: this.olview,
+                    controls: ol.control.defaults({
+                    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+                        collapsible: false
+                    })}),
+                    loadTilesWhileAnimating: true,
+                    loadTilesWhileInteracting: true,
+                    layers: [baseLayer,
+                             new ol.layer.Vector({
+                                 source: this.vectorSource
+                             }),
+                             this.draw_layer
+                    ]
+                });
+
+                //Instantiate with some options and add the Control
+                this.geocoder = new Geocoder('nominatim', {
+                    provider: 'photon',
+                    lang: 'en',
+                    placeholder: 'Search for ...',
+                    limit: 5,
+                    keepOpen: true,
+                    preventDefault : true
+                });
+
+                this.overlay = new ol.Overlay({
+                    element: document.getElementById('popup'),
+                    offset: [0, -40]
+                });
+
+                this.map.addControl(this.geocoder);
+
+                //Listen when an address is chosen
+                this.geocoder.on('addresschosen', function(evt){
+                    _this.olview.setCenter(evt.coordinate);
+                    _this.olview.setZoom(16);
+                    if(_this.selected_interaction == 0) {
+                        _this.setMarker(evt.coordinate);
+                    }
+
+                    //_this.$.popup_content.innerHTML = '<p>'+ evt.address.formatted +'</p>';
+                    //_this.overlay.setPosition(coord);
+                });
+
+                this.map.on('click', function(evt) {
+                    if(_this.selected_interaction == 0) {
+                        _this.setMarker(evt.coordinate);
+                    }
+                });
+
+                this.async(function(){this.resize($(document).height(), $(document).width())}, 100);
+            },
+
+            setMarker: function(coordinate){
+                var iconFeature = new ol.Feature({
+                    geometry: new ol.geom.Point(coordinate),
+                    name: 'New Point'
+                });
+
+                iconFeature.setStyle(_this.iconStyle);
+
+                this.vectorSource.clear(true);
+                this.vectorSource.addFeature( iconFeature );
+
+                //this.coordinate =  ol.proj.transform([coordinate[1],coordinate[0]], "EPSG:900913", "EPSG:4326");
+                this.coordinate = [coordinate[1],coordinate[0]];
+            },
+
+            addInteraction : function() {
+                this.map.removeInteraction(this.draw);
+                var geometryFunction, maxPoints, interaction_type;
+                switch(this.selected_interaction){
+                    case 0:
+                        //this.map.addInteraction(ol.interaction.default());
+                        break;
+                    case 1:
+                        interaction_type = "LineString";
+                        break;
+                    case 2:
+                        interaction_type = "Polygon";
+                        break;
+                    case 3:
+                        interaction_type = "Circle";
+                        alert("Circle is not supported by GeoJSON");
+                        return;
+                        break;
+                    case 4:
+                        interaction_type = "Circle";
+                        geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
+                        break;
+                    case 5:
+                        interaction_type = "LineString";
+                        maxPoints = 2;
+                        geometryFunction = function(coordinates, geometry) {
+                            if (!geometry) {
+                                geometry = new ol.geom.Polygon(null);
+                            }
+                            var start = coordinates[0];
+                            var end = coordinates[1];
+                            geometry.setCoordinates([
+                                [start, [start[0], end[1]], end, [end[0], start[1]], start]
+                            ]);
+                            return geometry;
+                        };
+                }
+
+                if(this.selected_interaction != 0) {
+                    this.draw = new ol.interaction.Draw({
+                        source: this.source,
+                        type: /** @type {ol.geom.GeometryType} */ (interaction_type),
+                        geometryFunction: geometryFunction,
+                        maxPoints: maxPoints,
+                        style : this.getTextStyle(-12)
+                    });
+
+                    this.map.addInteraction(this.draw);
+
+                    this.draw.on('drawend', function(e) {
+                        e.feature.setStyle(_this.getTextStyle(-12));
+                    });
+                }
+            },
+
+            getGeoJSON: function(){
+                var allFeatures = this.draw_layer.getSource().getFeatures();
+                var format = new ol.format.GeoJSON();
+                return format.writeFeatures(allFeatures);
+            },
+
+            _changeInteraction: function(e){
+                this.addInteraction();
+            },
+
+            getTextStyle: function(offsetX) {
+                return new ol.style.Style({
+                    fill: new ol.style.Fill({
+                        color: 'rgba(255, 255, 255, 0.6)'
+                    }),
+                    stroke: new ol.style.Stroke({
+                        color: '#ffff00',
+                        width: 4
+                    }),
+                    text : new ol.style.Text({
+                        fill : new ol.style.Fill({
+                            color : '#000'
+                        }),
+                        stroke : new ol.style.Stroke({
+                            color : '#fff',
+                            width : 4
+                        }),
+                        text : this.label,
+                        font : '20px Verdana',
+                        offsetX : offsetX ? offsetX : 0,
+                        offsetY : 12
+                    })
+                });
+            },
+
+            resize : function(h,w){
+                this.$.map.style.height = h + "px";
+                this.$.map.style.width  = w + "px";
+                $("#OpenLayers_Map_2_OpenLayers_ViewPort").css('height',($(document).height() + "px"));
+                $("#OpenLayers_Map_2_OpenLayers_ViewPort").css('width',($(document).width() + "px"));
+                this.map.updateSize();
+            }
+        })
+    </script>
+
+</dom-module>
\ No newline at end of file
diff --git a/controllets/select-marker-map-controllet/select-marker-map-controllet_.html b/controllets/select-marker-map-controllet/select-marker-map-controllet_.html
new file mode 100644
index 0000000..6cb62b5
--- /dev/null
+++ b/controllets/select-marker-map-controllet/select-marker-map-controllet_.html
@@ -0,0 +1,167 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html"/>
+<link rel="import" href="../../bower_components/paper-material/paper-material.html"/>
+<link rel="import" href="../../bower_components/paper-fab/paper-fab.html"/>
+<link rel="import" href="../../bower_components/iron-icons/iron-icons.html"/>
+<link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"/>
+<link rel="import" href="../../bower_components/neon-animation/neon-animation.html"/>
+
+<script src="../../locales/paper_card_controllet_ln.js"></script>
+
+<dom-module id="select-marker-map-controllet">
+
+    <template>
+        <link href="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.min.css" rel="stylesheet">
+
+        <div id="map" tabindex="0" style="height: 100%; width: 100%"></div>
+        <div id="popup" class="ol-popup">
+            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
+            <div id="popup_content"></div>
+        </div>
+    </template>
+
+    <script src="http://openlayers.org/en/v3.17.1/build/ol.js"></script>
+    <script src="http://cdn.jsdelivr.net/openlayers.geocoder/latest/ol3-geocoder.js"></script>
+    <script src="http://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.6/proj4.js"></script>
+
+    <script>
+
+        _this = null;
+        Polymer({
+            is: "select-marker-map-controllet",
+            properties: {
+                lang:{
+                    type: String,
+                    value: navigator.language
+                },
+                map:{
+                    type: Object
+                },
+
+                olview:{
+                    type: Object
+                },
+
+                geocoder:{
+                    type: Object
+                },
+
+                overlay:{
+                    type: Object
+                },
+
+                iconStyle:{
+                    type : Object
+                },
+
+                vectorSource:{
+                    type: Object
+                },
+
+                coordinate: {
+                    type: Array,
+                    value: []
+                }
+
+            },
+
+            ready : function(){
+                _this = this;
+
+                this.olview = new ol.View({
+                            center: [0, 0],
+                            zoom: 3,
+                            minZoom: 2,
+                            maxZoom: 20
+                        });
+
+                var baseLayer = new ol.layer.Tile({
+                    source: new ol.source.OSM()
+                });
+
+                this.iconStyle = new ol.style.Style({
+                    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
+                        anchor: [0.5, 46],
+                        anchorXUnits: 'fraction',
+                        anchorYUnits: 'pixels',
+                        opacity: 0.75,
+                        src: 'http://services.routetopa.eu/DEEalerProvider/COMPONENTS/datalets/leafletjs-datalet/leafletsjs/images/marker-icon.png'
+                    }))
+                });
+
+                this.vectorSource = new ol.source.Vector({});
+
+                this.map = new ol.Map({
+                    target:'map',
+                    view: this.olview,
+                    controls: ol.control.defaults({
+                    attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
+                        collapsible: false
+                    })}),
+                    loadTilesWhileAnimating: true,
+                    loadTilesWhileInteracting: true,
+                    layers: [baseLayer,
+                        new ol.layer.Vector({
+                            source: this.vectorSource
+                        })
+                    ]
+                });
+
+                //Instantiate with some options and add the Control
+                this.geocoder = new Geocoder('nominatim', {
+                    provider: 'photon',
+                    lang: 'en',
+                    placeholder: 'Search for ...',
+                    limit: 5,
+                    keepOpen: true,
+                    preventDefault : true
+                });
+
+                this.overlay = new ol.Overlay({
+                    element: document.getElementById('popup'),
+                    offset: [0, -40]
+                });
+
+                this.map.addControl(this.geocoder);
+
+                //Listen when an address is chosen
+                this.geocoder.on('addresschosen', function(evt){
+                    _this.setMarker(evt.coordinate);
+                    _this.olview.setCenter(evt.coordinate);
+                    _this.olview.setZoom(16);
+
+                    //_this.$.popup_content.innerHTML = '<p>'+ evt.address.formatted +'</p>';
+                    //_this.overlay.setPosition(coord);
+                });
+
+                this.map.on('click', function(evt) {
+                    _this.setMarker(evt.coordinate);
+                });
+            },
+
+            setMarker: function(coordinate){
+                var iconFeature = new ol.Feature({
+                    geometry: new ol.geom.Point(coordinate),
+                    name: 'Null Island',
+                    population: 4000,
+                    rainfall: 500
+                });
+
+                iconFeature.setStyle(_this.iconStyle);
+
+                this.vectorSource.clear(true);
+                this.vectorSource.addFeature( iconFeature );
+
+                this.coordinate =  ol.proj.transform([coordinate[1],coordinate[0]], "EPSG:900913", "EPSG:4326");
+            },
+
+            resize : function(h,w){
+                this.$.map.style.height = h + "px";
+                this.$.map.style.width  = w + "px";
+                this.map.updateSize();
+            },
+
+
+        })
+    </script>
+
+</dom-module>
\ No newline at end of file