<link rel="import" href="../../../../packages/polymer/polymer.html">
<link rel="import" href="observatory_element.html">

<polymer-element name="nav-bar" extends="observatory-element">
  <template>
    <link rel="stylesheet" href="css/shared.css">
    <style>
      nav {
        position: fixed;
        width: 100%;
        z-index: 1000;
      }
      nav ul {
        display: inline-table;
        position: relative;
        list-style: none;
        padding-left: 0;
        margin-left: 0;
        width: 100%;
        z-index: 1000;
        font: 400 16px 'Montserrat', sans-serif;
        color: white;
        background-color: #0489c3;
      }
      nav ul:after {
        content: ""; clear: both; display: block;
      }
      .vertical-spacer {
        height: 40px;
        background-color: #0489c3;
      }
    </style>
    <nav>
      <ul>
        <nav-notify events="{{ app.notifications }}"></nav-notify>
        <content></content>
      </ul>
    </nav>
    <div class="vertical-spacer">
    </div>
    <template if="{{ pad }}">
      <br>
    </template>
  </template>
</polymer-element>

<polymer-element name="nav-menu" extends="observatory-element">
  <template>
    <style>
      .menu, .spacer {
        float: left;
      }
      .menu a, .spacer {
        display: block;
        padding: 12px 8px;
        color: White;
        text-decoration: none;
      }
      .menu:hover {
        background: #455;
      }
      .menu ul {
        display: none;
        position: absolute;
        top: 98%;
        list-style: none;
        margin: 0;
        padding: 0;
        width: auto;
        z-index: 1000;
        font: 400 16px 'Montserrat', sans-serif;
        color: white;
        background: #567;
      }
      .menu ul:after {
        content: ""; clear: both; display: block;
      }
      .menu:hover > ul {
        display: block;
      }
    </style>

    <li class="menu">
      <a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a>
      <ul><content></content></ul>
    </li>
    <template if="{{ !last }}">
      <li class="spacer">&gt;</li>
    </template>

  </template>
</polymer-element>

<polymer-element name="nav-menu-item" extends="observatory-element">
  <template>
    <style>
      li {
        float: none;
        border-top: 1px solid #677;
        border-bottom: 1px solid #556; position: relative;
      }
      li:hover {
        background: #455;
      }
      li ul {
        display: none;
        position: absolute;
        top:0;
        left: 100%;
        list-style: none;
        padding: 0;
        margin-left: 0;
        width: auto;
        z-index: 1000;
        font: 400 16px 'Montserrat', sans-serif;
        color: white;
        background: #567;
      }
      li ul:after {
        content: ""; clear: both; display: block;
      }
      li:hover > ul {
        display: block;
      }
      li a {
        display: block;
        padding: 12px 12px;
        color: white;
        text-decoration: none;
      }
    </style>
    <li><a on-click="{{ goto }}" href="{{ gotoLink(link) }}">{{ anchor }}</a>
      <ul><content></content></ul>
    </li>
  </template>
</polymer-element>

<polymer-element name="nav-refresh" extends="observatory-element">
  <template>
    <style>
      .active {
        color: #aaa;
        cursor: wait;
      }
      .idle {
        color: #000;
      }
      li {
        float: right;
        margin: 0;
      }
      li button {
        margin: 3px;
        padding: 8px;
      }
    </style>
    <li>
      <template if="{{ active }}">
        <button class="active" on-click="{{ buttonClick }}">{{ label }}</button>
      </template>
      <template if="{{ !active }}">
        <button class="idle" on-click="{{ buttonClick }}">{{ label }}</button>
      </template>
    </li>
  </template>
</polymer-element>

<polymer-element name="nav-control" extends="observatory-element">
  <template>
    <style>
      .black {
        color: #000;
      }
      li {
        float: right;
        margin: 0;
      }
      button {
        margin: 3px;
        padding: 8px;
      }
    </style>
    <!-- Disable until issues with history in Dartium are fixed
    <li>
      <button class="black" on-click="{{ back }}">&#9664;</button>
      <button class="black" on-click="{{ forward }}">&#9654;</button>
    </li>
    -->
  </template>
</polymer-element>

<polymer-element name="top-nav-menu">
  <template>
    <nav-menu link="/vm" anchor="Observatory" last="{{ last }}">
      <nav-menu-item link="/vm-connect/" anchor="Connect to a different VM"></nav-menu-item>
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="isolate-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ hashLinkWorkaround }}" anchor="{{ isolate.name }}" last="{{ last }}">
      <nav-menu-item link="{{ isolate.relativeLink('stacktrace') }}"
                     anchor="stack trace"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('profile') }}"
                     anchor="cpu profile"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('allocationprofile') }}"
                     anchor="allocation profile"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('heapmap') }}"
                     anchor="heap map"></nav-menu-item>
      <nav-menu-item link="{{ isolate.relativeLink('debug/breakpoints') }}"
                     anchor="breakpoints"></nav-menu-item>
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="library-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ library.link }}"
              anchor="{{ library.name }}" last="{{ last }}">
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="class-nav-menu" extends="observatory-element">
  <template>
    <nav-menu link="{{ cls.link }}"
              anchor="{{ cls.name }}" last="{{ last }}">
      <content></content>
    </nav-menu>
  </template>
</polymer-element>

<polymer-element name="nav-notify" extends="observatory-element">
  <template>
    <style>
      .menu {
        float: right;
      }
      .menu .list {
        display: block;
        position: absolute;
        top: 98%;
        right: 0;
        margin: 0;
        padding: 0;
        width: auto;
        z-index: 1000;
        font: 400 12px 'Montserrat', sans-serif;
        color: white;
        background: none;
      }
    </style>

    <div class="menu">
      <div class="list">
        <template repeat="{{ event in events }}">
          <nav-notify-item events="{{ events }}" event="{{ event }}">
          </nav-notify-item>
        </template>
      </div>
    </div>
  </template>
</polymer-element>

<polymer-element name="nav-notify-item" extends="observatory-element">
  <template>
    <style>
      .item {
        position: relative;
        padding: 16px;
        margin-top: 10px;
        margin-right: 10px;
        padding-right: 25px;
        width: 200px;
        color: #ddd;
        background: rgba(0,0,0,.6);
        border: solid 2px white;
        box-shadow: 0 0 5px black;
        border-radius: 5px;
        animation: fadein 1s;
      }

      @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      a.link {
        color: white;
        text-decoration: none;
      }
      a.link:hover {
        text-decoration: underline;
      }

      a.boxclose {
        position: absolute;
        display: block;
        top: 4px;
        right: 4px;
        height: 18px;
        width: 18px;
        line-height: 16px;
        border-radius: 9px;
        color: white;
        font-size: 18px;
        cursor: pointer;
        text-align: center;
      }
      a.boxclose:hover {
        background: rgba(255,255,255,0.5);
      }
    </style>
    <template if="{{ event.eventType == 'IsolateInterrupted' }}">
      <div class="item">
        Isolate
        <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
        is paused
        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
      </div>
    </template>
    <template if="{{ event.eventType == 'BreakpointReached' }}">
      <div class="item">
        Isolate
        <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
        is paused at breakpoint {{ event.breakpoint['id'] }}
        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
      </div>
    </template>
    <template if="{{ event.eventType == 'ExceptionThrown' }}">
      <div class="item">
        Isolate
        <a class="link" on-click="{{ goto }}" href="{{ event.isolate.link }}">{{ event.isolate.name }}</a>
        is paused at exception
        <a class="boxclose" on-click="{{ closeItem }}">&times;</a>
      </div>
    </template>
  </template>
</polymer-element>


<script type="application/dart" src="nav_bar.dart"></script>