<!--
    @license
    Copyright (c) 2014 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="../../core-icons/core-icons.html">
<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="../../marked-element/marked-element.html">
<link rel="import" href="../../prettify-element/prettify-import.html">
<link rel="import" href="../../context-free-parser/context-free-parser.html">

<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700|Source+Code+Pro' rel='stylesheet' type='text/css'>

<!--

Displays formatted source documentation scraped from input urls.

@element core-doc-page
-->

<polymer-element name="core-doc-page" attributes="data" relative>

  <template>

    <link rel="stylesheet" href="core-doc-page.css">

    <core-header-panel id="panel" mode="waterfall" fit>

      <!--<core-toolbar>
        <span style="margin: 0 72px;">{{data.name}}</span>
      </core-toolbar>-->

      <div class="main" on-marked-js-highlight="{{hilight}}">

        <h1>{{data.name}}</h1>

        <p id="info" layout horizontal center>
          <span layout horizontal center><core-icon icon="home"></core-icon><a href="{{data | homepageFilter}}">Home Page</a></span>
          <span layout horizontal center hidden?="{{!data.version}}"><core-icon icon="info-outline"></core-icon>Version: {{data.version}}</span>
        </p>

        <template bind="{{data as data}}" if="{{data.extends || data.mixins}}">
          <div class="inheritance">
            <template if="{{data.extends}}">
              <section class="top extends" layout horizontal center>
                <h3 id="{{data.name}}.extends">Extends:</h3>
                <template repeat="{{e, i in data.extends}}">
                  <div>
                    <template if="{{e.url}}">
                      <a href="{{e.url}}">{{e.name}}</a>
                    </template>
                    <template if="{{!e.url}}"><a href="#{{e.name}}">{{e.name}}</a></template>
                    <span hidden?="{{i == data.extends.length - 1}}">,</span>
                  </div>
                </template>
              </section>
            </template>

            <template if="{{data.mixins}}">
              <section class="top mixins" layout horizontal center>
                <h3 id="{{data.name}}.mixins">Mixins:</h3>
                <template repeat="{{e, i in data.mixins}}">
                  <div>
                    <template if="{{e.url}}">
                      <a href="{{e.url ? e.url : e.name}}">{{e.name}}</a>
                    </template>
                    <template if="{{!e.url}}"><span>{{e.name}}</span></template>
                    <span hidden?="{{i == data.mixins.length - 1}}">,</span>
                  </div>
                </template>
              </section>
            </template>
          </div>
        </template>

        <template if="{{data.description}}">
          <section class="box top">
            <h3 id="{{data.name}}.summary">Summary</h3>
            <marked-element text="{{data.description}}"></marked-element>
          </section>
        </template>

        <template if="{{data.attributes.length}}">
          <section class="box attribute-box">
            <h3 id="{{data.name}}.attributes">Attributes</h3>
            <template repeat="{{attribute in data.attributes}}">
              <div class="details" horizontal layout>
                <div class="details-name" flex id="{{data.name}}.attributes.{{attribute.name}}">
                  <p><code>{{attribute.name}}</code></p>
                </div>
                <div class="details-info" flex three>
                  <p layout horizontal center justified>
                    <code>&lt;<em>{{attribute.type}}</em>&gt;</code><span class="default" hidden?="{{!attribute.default}}">default: <code>{{attribute.default}}</code></span>
                  </p>
                  <marked-element text="{{attribute.description}}"></marked-element>
                </div>
              </div>
            </template>
          </section>
        </template>

        <template if="{{data.properties.length}}">
          <section class="box property-box">
            <h3 id="{{data.name}}.properties">Properties</h3>
            <template repeat="{{property in data.properties}}">
              <div class="details" horizontal layout>
                <div class="details-name" flex id="{{data.name}}.properties.{{property.name}}">
                  <p><code>{{property.name}}</code></p>
                </div>
                <div class="details-info" flex three>
                  <p layout horizontal center justified>
                    <code>&lt;<em>{{property.type}}</em>&gt;</code><span class="default" hidden?="{{!property.default}}">default: <code>{{property.default}}</code></span>
                  </p>
                  <marked-element text="{{property.description}}"></marked-element>
                </div>
              </div>
            </template>
          </section>
        </template>

        <template if="{{data.events.length}}">
          <section class="box event-box">
            <h3 id="{{data.name}}.events">Events</h3>
            <template repeat="{{event in data.events}}">
              <div class="details" horizontal layout>
                <div class="details-name" flex id="{{data.name}}.events.{{event.name}}">
                  <p><code>{{event.name}}</code></p>
                </div>
                <div class="details-info" flex three>
                  <marked-element text="{{event.description}}"></marked-element>
                  <template if="{{event.params.length}}">
                    <div class="params">
                      <p>Event details:</p>
                      <template repeat="{{param in event.params}}">
                        <p><code>&lt;<em>{{param.type}}</em>&gt; {{param.name}}</code></p>
                        <p><span>{{param.description}}</span></p>
                      </template>
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </section>
        </template>

        <template if="{{data.methods.length}}">
          <section class="box method-box">
            <h3 id="{{data.name}}.methods">Methods</h3>
            <template repeat="{{method in data.methods}}">
              <div class="details" horizontal layout>
                <div class="details-name" flex id="{{data.name}}.methods.{{method.name}}">
                  <p><code>{{method.name}}</code></p>
                </div>
                <div class="details-info" flex three>
                  <marked-element text="{{method.description}}"></marked-element>
                  <template if="{{method.params.length}}">
                    <div class="params">
                      <p>Method parameters:</p>
                      <template repeat="{{param in method.params}}">
                        <p><code>&lt;<em>{{param.type}}</em>&gt; {{param.name}}</code></p>
                        <p><span>{{param.description}}</span></p>
                      </template>
                    </div>
                  </template>
                </div>
              </div>
            </template>
          </section>
        </template>

      </div>

    </core-header-panel>

  </template>

  <script>

    Polymer('core-doc-page', {

      hilight: function(event, detail, sender) {
        detail.code = prettyPrintOne((detail.code || '').replace(/</g,'&lt;').replace(/>/g,'&gt;'));
      },

      homepageFilter: function(data) {
        if (!data) {
          return '';
        }
        if (!data.homepage || data.homepage === 'github.io') {
          return '//polymer.github.io/' + data.name;
        } else {
          return data.homepage;
        }
      },

      dataChanged: function() {
        // Wrap in async() to delay execution until the next animation frame,
        // since the <template> contents won't be stamped at the time this is executed.
        this.async(function() {
          var elementToFocus = this.shadowRoot.getElementById(window.location.hash.slice(1));
          if (elementToFocus) {
            elementToFocus.scrollIntoView();
          }
          else {
            var viewer = this.$.panel.scroller;
            viewer.scrollTop = 0;
            viewer.scrollLeft = 0;
          }
        });
      }

    });

  </script>

</polymer-element>
