<link rel="import" href="../vip-layout/vip-layout.html">

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

  <template>
    <style>
      :host {
        position: absolute;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
      }
      #vip_layout {
        left: 80px;
        top: 160px;
        position: absolute;
      }
    </style>
    <vip-layout id="vip_layout" layout='[{"name":"main","horizontal":true,"styles":{"background-color":"#FFECB3"},"children":[{"name":"controls","vertical":true,"center":true},{"name":"areavideoenriquecido","horizontal":true,"styles":{"flex":"3 1 0px"},"children":[{"name":"chapters","vertical":true,"styles":{"flex":"none"}},{"name":"mainvideoenriquecido","vertical":true,"styles":{"flex":"3 1 0px"}}]}]}]' flex hidden>
    </vip-layout>
    <template id="t" repeat="{{ layout }}"></template>
    <section id="{{ name }}" layout flex horizontal>
      <template id="template" ref="t" repeat="{{ children }}"></template>
      <section id="{{ name }}" layout flex center vertical>
        <template ref="t" repeat="{{ children }}"></template>
      </section>
      <section id="{{ name }}" layout flex horizontal>
        <template ref="t" repeat="{{ children }}"></template>
        <section id="{{ name }}" layout flex vertical>
          <template ref="t" repeat="{{ children }}"></template>
        </section>
        <section id="{{ name }}" layout flex vertical>
          <template ref="t" repeat="{{ children }}"></template>
        </section>
      </section>
    </section>
    <template id="t" repeat="{{ layout }}"></template>
    <section id="{{ name }}" layout flex horizontal>
      <template ref="t" repeat="{{ children }}"></template>
      <section id="{{ name }}" layout flex center vertical>
        <template ref="t" repeat="{{ children }}"></template>
      </section>
      <section id="{{ name }}" layout flex horizontal>
        <template ref="t" repeat="{{ children }}"></template>
        <section id="{{ name }}" layout flex vertical>
          <template ref="t" repeat="{{ children }}"></template>
        </section>
        <section id="{{ name }}" layout flex vertical>
          <template ref="t" repeat="{{ children }}"></template>
        </section>
      </section>
    </section>
    <template id="t" repeat="{{ layout }}"></template>
    <section id="{{ name }}" layout flex horizontal>
      <template ref="t" repeat="{{ children }}"></template>
      <section id="{{ name }}" layout flex center vertical>
        <template ref="t" repeat="{{ children }}"></template>
      </section>
      <section id="{{ name }}" layout flex horizontal>
        <template ref="t" repeat="{{ children }}"></template>
        <section id="{{ name }}" layout flex vertical>
          <template ref="t" repeat="{{ children }}"></template>
        </section>
        <section id="{{ name }}" layout flex vertical>
          <template ref="t" repeat="{{ children }}"></template>
        </section>
      </section>
    </section>
  </template>

  <script>

    Polymer({

    });

  </script>

</polymer-element>