<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-pages/core-pages.html">
<link rel="import" href="../paper-button/paper-button.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="../paper-input/paper-input.html">

<polymer-element name="my-element">

  <template>
    <style>
      paper-button {
        color: white;
        margin: 10px;
        background-color: rgb(4, 51, 255);
      }
      core-label {
        display: block;
      }
      #core_header_panel {
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
        position: absolute;
      }
      #core_toolbar {
        color: rgb(255, 255, 255);
        background-color: rgb(79, 125, 201);
      }
      #section {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgb(214, 227, 231), rgb(173, 216, 230));
      }
      #menu_back_button {
        display: none;
      }
      #core_pages {
        width: 100%;
        height: 100%;
        border: 1px solid silver;
        left: 0px;
        top: 0px;
        position: absolute;
      }
      #main_screen {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
      }
      #settings_button_save {
        background-color: rgb(4, 51, 255);
      }
      #settings_screen {
        width: 100%;
        height: 100%;
      }
      #core_submenu {
        left: 1690px;
        top: 690px;
      }
      #core_menu {
        font-size: 16px;
        left: 1800px;
        top: 590px;
      }
      #core_tooltip {
        left: 1790px;
        top: 680px;
      }
      #paper_item {
        left: 1690px;
        top: 710px;
      }
      #section1 {
        width: 420px;
        height: 630px;
        border: 5px solid rgb(204, 204, 204);
        left: 1820px;
        top: 740px;
      }
      #paper_progress {
        left: 1720px;
        top: 770px;
      }
      #paper_radio_button {
        left: 1700px;
        top: 710px;
      }
      #paper_radio_group {
        left: 1730px;
        top: 710px;
      }
      #paper_ripple {
        width: 300px;
        height: 300px;
        left: 1670px;
        top: 760px;
      }
      #paper_slider {
        left: 1830px;
        top: 770px;
      }
      #paper_tab {
        width: 120px;
        height: 40px;
        left: 1710px;
        top: 820px;
      }
      #paper_tabs {
        width: 480px;
        color: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px;
        left: 1730px;
        top: 760px;
        background-color: rgb(0, 188, 212);
      }
    </style>
    <core-header-panel mode="standard" id="core_header_panel">
      <core-toolbar id="core_toolbar">
        <core-icon-button icon="arrow-back" id="menu_back_button" on-tap="{{ backButton }}"></core-icon-button>
        <div id="Title">Bluetooth Bridge</div>
      </core-toolbar>
      <section id="section">
        <core-pages selected="0" selectedindex="0" notap id="core_pages">
          <section id="main_screen" active>
            <paper-button id="support_button" on-tap="{{ openSupport }}">Support</paper-button>
            <div></div>
            <paper-button id="settings_button" on-tap="{{ openSettings }}">Settings</paper-button>
          </section>
          <section id="support_screen">
            <core-label for="avesh_devices">Hostname:</core-label>
            <paper-dropdown-menu id="avesh_devices" label="Select device...">
              <paper-dropdown class="dropdown">
                <core-menu class="menu">
                  <paper-item>Croissant</paper-item>
                  <paper-item>Donut</paper-item>
                  <paper-item>Financier</paper-item>
                  <paper-item>Madeleine</paper-item>
                </core-menu>
              </paper-dropdown>
            </paper-dropdown-menu>
            <core-label for="avesh_support">Select support:</core-label>
            <paper-dropdown-menu id="avesh_support" label="Select support server...">
              <paper-dropdown class="dropdown">
                <core-menu class="menu">
                  <paper-item>Croissant</paper-item>
                  <paper-item>Donut</paper-item>
                  <paper-item>Financier</paper-item>
                  <paper-item>Madeleine</paper-item>
                </core-menu>
              </paper-dropdown>
            </paper-dropdown-menu>
            <div></div>
            <paper-button id="search_button" on-tap="{{ searchDevices }}">Search Devices</paper-button>
          </section>
          <section id="settings_screen">
            <core-label for="server_hostname">Hostname:</core-label>
            <paper-input value="205.204.84.132" id="server_hostname"></paper-input>
            <core-label for="server_port">Port:</core-label>
            <paper-input value="2222" id="server_port"></paper-input>
            <div></div>
            <paper-button id="settings_button_save" on-tap="{{ saveSettings }}">Save</paper-button>
          </section>
          <section id="devices_list_screen">
            <core-list height="500" data="[{'index': 0}, {'index': 1}]">
              <template></template>
            </core-list>
          </section>
        </core-pages>
      </section>
    </core-header-panel>
  </template>

  <script>

    Polymer({
      openSupport: function () {
        this.$.core_pages.selected="1";
        this.$.menu_back_button.style.display = "block";
      },
      openSettings: function () {
        this.$.core_pages.selected="2";
        this.$.menu_back_button.style.display = "block";
      },
      backButton: function () {
        this.$.core_pages.selected="0";
        this.$.menu_back_button.style.display = "none";
    	},
      searchDevices: function () {
        this.$.core_pages.selected="3";
    	},
      saveSettings: function () {
      	var x = window.localStorage.length+1;
        window.localStorage.setItem('host_'+x, this.$.server_hostname.value);
        window.localStorage.setItem('port_'+x, this.$.server_port.value);
        alert("Connection is added");
        this.backButton();
      }
    });

  </script>

</polymer-element>