<!DOCTYPE html>
<!--
 | Hybrid navigation (SbUiNavigation) demo web page.
 |
 | This demonstrates basic use of focus items and scroll containers. On
 | platforms which implement SbUiNavGetInterface, the user can change focus
 | with a platform-appropriate input device.
 |
 | HTMLElements using "overflow: auto" or "overflow: scroll" are treated as
 | scroll containers. HTMLElements with "tabindex" <= -2 are treated as focus
 | items.
 -->
<html>
  <head>
    <style>
      body {
        background-color: rgb(25,25,25);
        color: rgb(200,200,200);
        width: 1280px;
        height: 720px;
      }

      .vscroll {
        overflow: auto;
        position: absolute;
        transform: translate(100px,100px);
        background-color: rgb(50,50,50);
        width: 1080px;
        height: 520px;
      }

      .hscroll {
        overflow: auto;
        position: relative;
        background-color: rgb(75, 75, 75);
        /*
         * Leave a slight margin on the right for vscroll's scrollbar (only
         * needed for non-Cobalt browsers). Cobalt does not show scrollbars,
         * so this can be the same width as vscroll.
         */
        width: 1060px;
        /*
         * Also make the height big enough to show a horizontal scrollbar
         * (for non-Cobalt browsers) in addition to the contents.
         */
        height: 320px;
      }

      /*
       * focusItem is used as the actual focusable item. Its dimensions are
       * static so that the underlying SbUiNavigation system knows how much to
       * scroll to ensure it is fully visible. The scroll animation is usually
       * calculated to bring the to-be-focused item into view, but if that item
       * is resized after the animation starts, then the animation may no
       * longer end with the larger item in full view.
       */
      .focusItem {
        overflow: hidden;
        position: absolute;
        width: 300px;
        height: 300px;
        outline: none;
      }

      /*
       * focusContent will react to focus changes. Its size will grow when
       * its parent receives focus.
       */
      .focusContent {
        overflow: hidden;
        margin: 20px;
        border: 5px solid rgb(0,0,0);
        width: 250px;
        height: 250px;
        line-height: 250px;
        text-align: center;
        vertical-align: middle;
        font-size: 100px;

        /*
         * The user may be scrolling through items quickly. Use a transition
         * delay so that the transition is shown once the user settles on a
         * focus item.
         */
        transition: transform 0.5s;
        transition-delay: 0.1s;
      }

      /*
       * Update focusContent when the parent is focused.
       */
      div.focusItem:focus .focusContent {
        background-color: rgb(240,240,240);
        color: rgb(0,0,0);
        transform: scale(1.1);
      }

      /*
       * Add a spotlight to focusContent when the parent is focused.
       */
      div.focusItem:focus .focusContent::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient(rgba(255,0,0,0.5) 0%, rgba(255,0,0,0) 30%);

        /*
         * This Cobalt-specific transform function for hybrid navigation tracks
         * the direction in which focus is moving. This can be used to provide
         * feedback about user input that is too small to result in a focus
         * change. The transform function queries the closest hybrid navigation
         * focus item (i.e. this element or an ancestor element with tabindex
         * set appropriately). If the closest hybrid navigation focus item does
         * not have focus, or the platform does not provide focus movement
         * information, then this transform function will evaluate to the zero
         * scale. Otherwise the transform will evaluate to a translation ranging
         * from -50% to +50% in the X and Y directions.
         */
        transform: -cobalt-ui-nav-spotlight-transform();
      }
    </style>
  </head>

  <body class="body">
    <div class="vscroll">
      <div class="hscroll">
        <div class="focusItem" tabindex="-2" style="transform: translateX(0px)">
          <div class="focusContent">A0</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(300px)">
          <div class="focusContent">A1</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(600px)">
          <div class="focusContent">A2</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(900px)">
          <div class="focusContent">A3</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(1200px)">
          <div class="focusContent">A4</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(1500px)">
          <div class="focusContent">A5</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(1800px)">
          <div class="focusContent">A6</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(2100px)">
          <div class="focusContent">A7</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(2400px)">
          <div class="focusContent">A8</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(2700px)">
          <div class="focusContent">A9</div>
        </div>
      </div>
      <div class="hscroll">
        <div class="focusItem" tabindex="-2" style="transform: translateX(0px)">
          <div class="focusContent">B0</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(300px)">
          <div class="focusContent">B1</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(600px)">
          <div class="focusContent">B2</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(900px)">
          <div class="focusContent">B3</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(1200px)">
          <div class="focusContent">B4</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(1500px)">
          <div class="focusContent">B5</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(1800px)">
          <div class="focusContent">B6</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(2100px)">
          <div class="focusContent">B7</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(2400px)">
          <div class="focusContent">B8</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(2700px)">
          <div class="focusContent">B9</div>
        </div>
      </div>
      <div class="hscroll">
        <div class="focusItem" tabindex="-2" style="transform: translateX(0px)">
          <div class="focusContent">C0</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(300px)">
          <div class="focusContent">C1</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(600px)">
          <div class="focusContent">C2</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(900px)">
          <div class="focusContent">C3</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(1200px)">
          <div class="focusContent">C4</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(1500px)">
          <div class="focusContent">C5</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(1800px)">
          <div class="focusContent">C6</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(2100px)">
          <div class="focusContent">C7</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(2400px)">
          <div class="focusContent">C8</div>
        </div>
        <div class="focusItem" tabindex="-2" style="transform: translateX(2700px)">
          <div class="focusContent">C9</div>
        </div>
      </div>
    </div>
  </body>
</html>