<?xml version="1.0" encoding="utf-8" ?>

<!-- Copyright 2016 Roku Corp.  All Rights Reserved. -->

<!-- FadingBackground - Background for all nodes. It is basically poster that
     gets picture Url from HDBackgroundImageUrl field of content meta-data of
     current focused item. Between switching uri, starts animation with fading
     out old image and fading in new picture after loading.-->
<component name="FadingBackground" extends="Rectangle">

  <children>
    <Rectangle
      id="backgroundColor"/>
    <Poster
      id="oldBackground"
      loadDisplayMode="scaleToFill"
      loadHeight="48"
      loadWidth="48"/>
    <Poster
      id="background"
      loadDisplayMode="scaleToFill"
      loadHeight="48"
      loadWidth="48"
      opacity="0"/>
    <Rectangle
      id="shade"
      color="0x000000"
      opacity="0.8"/>

    <Animation
      id="fadeoutAnimation"
      repeat="false"
      duration="0.5">
      <FloatFieldInterpolator
        id="oldbackgroundInterpolator"
        key="[0.0, 1.0]"
        keyValue="[1.0, 0.0]"
        fieldToInterp="oldBackground.opacity"/>
    </Animation>

    <Animation
      id="fadeinAnimation"
      repeat="false"
      duration="0.5">
      <FloatFieldInterpolator
        id="backgroundInterpolator"
        key="[0.0, 1.0]"
        keyValue="[0.0, 1.0]"
        fieldToInterp="background.opacity"/>
    </Animation>
  </children>

  <interface>
    <!--Uri of image.-->
    <field id="uri"    type="string"   onChange="OnBackgroundUriChange"/>

    <!--Set color of background while image is loading.-->
    <field id="ShadeOpacity"  type="float" alias="shade.opacity"/>
  </interface>

  <script type="text/brightscript" uri="pkg:/components/Animations/FadingBackground.brs" />

</component>
