<!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.
 |
 | "-cobalt-ui-nav-focus-transform()" is a Cobalt-specific transform function
 | for hybrid navigation which tracks interaction with the navigation item when
 | it is focused. This function queries the closest hybrid navigation focus item
 | (i.e. this element or an ancestor element with tabindex set appropriately).
 | If that navigation item does not have focus, or the system does not provide
 | interaction animations, then this transform function will evaluate to
 | identity. If no ancestor is a hybrid navigation focus item, then the
 | currently-focused item (which may be in a different subtree) is used.
 |
 | "-cobalt-ui-nav-spotlight-transform()" is a Cobalt-specific transform
 | function for hybrid navigation which 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. If no ancestor is a hybrid navigation focus item, then the
 | currently-focused item (which may be in a different subtree) is queried.
 -->
<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.
       */
      .focusItem:focus .focusContent {
        background-color: rgb(240,240,240);
        color: rgb(0,0,0);
        transform: -cobalt-ui-nav-focus-transform() scale(1.1);
      }

      /*
       * Add a spotlight to focusContent when the parent is focused.
       */
      .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%);
        transform: -cobalt-ui-nav-spotlight-transform();
      }
    </style>
  </head>

  <body class="body">
    <div class="vscroll">
      <div class="hscroll">
        <div id="start" 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>
  <script>
    window.onload = function() {
      document.getElementById("start").focus();
    }
  </script>
</html>