<?xml version="1.0" encoding="UTF-8"?>
<component name="GridScreen" extends="BaseGroup"  initialFocus="markupList">
    <script type="text/brightscript" uri="GridScreen.brs" />
	<interface>
        <!-- Specifies the content for the Grid -->
        <field id="content" type="node" alias="markupGrid.content" />
		<field id="category" type="node" alias="markupList.content" />
		<field id="searchContent" type="node" alias="filteredList.content" />
		<field id="itemSelected" type="intarray" alwaysnotify="true" alias="markupGrid.itemSelected" /> 
		<field id="itemSelectedFilter" type="intarray" alwaysnotify="true" alias="filteredList.itemSelected" />
        <field id="jumpToItem" type="intarray" alias="markupList.jumpToItem" />
		<field id="jumpToRowItem" type="intarray" alias="markupGrid.jumpToItem" />
		<field id="jumpToRowItemFilter" type="intarray" alias="filteredList.jumpToItem" />
		<field id="categorySelected" type="intarray" alwaysnotify="true" alias="markupList.itemSelected" />
		<field id="keyboardText" type="string" alias="searchKeyboard.text" alwaysNotify="true"/>
		<field id="screenLabel" type="string" alias="contentLabel.text" />
    </interface>
    <children>
	
		<Rectangle id = "listContainer"  color = "0x000000FF" opacity = "0.9" width = "400">
		  <Rectangle id = "lineWhite"  color = "0xffffff" width = "3" translation="[402,0]"/>
          <Rectangle id = "lineSearchBox"  color = "0xffffff" height = "3" width = "400" translation="[0,210]"/>
		  <Poster id="logo" height = "75" width = "215" translation="[20,20]" uri = "pkg:/images/logo.png" />
		  <Poster id="pointer" width="26" height="34" translation="[404,20]" uri = "pkg:/images/icons/left.png" />
	      <Group id = "group" translation="[0,115]">
		    <Poster id="search" width="50" height="50" translation="[335,20]" uri = "pkg:/images/icons/search.png" />
	        <TextEditBox id="searchBox" width="325" height="60" hintText="Search..." textColor="0xFFFFFF" hintTextColor = "0xffffff" backgroundUri="pkg:/images/icons/searchBox.png" translation="[20,20]" clearOnDownKey="false"/>
			<Rectangle color = "0xffffff" height = "1" width = "320" translation="[20,70]"/>
            <MarkupList
                id = "markupList"
				translation="[0,120]"
                itemComponentName = "MarkupListItem" 
                wrapDividerBitmapUri = ""
                wrapDividerHeight = "0"					
				itemSize="[400,60]"
                drawFocusFeedback = "false" 
                vertFocusAnimationStyle = "floatingfocus" />
			<keyboardSearch id="searchKeyboard" hideTextBox="true" translation="[20,120]" visible="false"/>
	      </Group>
		</Rectangle>
		
	    <MarkupGrid 
            id = "markupGrid" 
            translation="[420,20]"
            itemComponentName = "MarkupGridItem" 
            numColumns = "6" 
            numRows = "5" 
            vertFocusAnimationStyle = "fixed"
            itemSize = "[ 280, 350 ]" 
            itemSpacing = "[ 20, 40 ]" 
            drawFocusFeedback = "false" />	
			
	    <MarkupGrid 
            id = "filteredList" 
            translation="[420,20]"
            itemComponentName = "MarkupGridItem" 
            numColumns = "6" 
            numRows = "5" 
            vertFocusAnimationStyle = "fixed"
            itemSize = "[ 280, 350 ]" 
            itemSpacing = "[ 20, 40 ]" 
            drawFocusFeedback = "false" />
		
		<Group id = "groupSection" translation="[1700, 980]">
		    <Label id="contentLabel" horizAlign="center">
                <Font role = "font" uri = "pkg:/fonts/Montserrat-Black.ttf" size = "40" />
		    </Label>	
        </Group>
		
	    <ParallelAnimation  id = "openMenu" >
            <Animation id="transAnimationIn" duration="0.2" repeat="false" easeFunction="linear" >
                <Vector2DFieldInterpolator id = "translateInInterp" key="[0.0, 1.0]" keyValue="[ [-381, 0.0], [0.0, 0.0] ]" fieldToInterp="listContainer.translation" />
				<Vector2DFieldInterpolator id = "translateInInterp" key="[0.0, 1.0]" keyValue="[ [40, 20], [420, 20] ]" fieldToInterp="markupGrid.translation" />
				<Vector2DFieldInterpolator id = "translateInInterp" key="[0.0, 1.0]" keyValue="[ [40, 20], [420, 20] ]" fieldToInterp="filteredList.translation" />
            </Animation>
	    </ParallelAnimation>

	    <ParallelAnimation  id = "closeMenu" >
            <Animation id="transAnimationOut" duration="0.2" repeat="false" easeFunction="linear" >
                <Vector2DFieldInterpolator id = "translateOutInterp" key="[0.0, 1.0]" keyValue="[ [0.0, 0.0] , [-381, 0.0] ]" fieldToInterp="listContainer.translation" />
				<Vector2DFieldInterpolator id = "translateOutInterp" key="[0.0, 1.0]" keyValue="[ [420, 20] , [40, 20] ]" fieldToInterp="markupGrid.translation" />
				<Vector2DFieldInterpolator id = "translateOutInterp" key="[0.0, 1.0]" keyValue="[ [420, 20] , [40, 20] ]" fieldToInterp="filteredList.translation" />
            </Animation>
	    </ParallelAnimation>			

    </children>
</component>
