<?xml version="1.0" encoding="utf-8" ?> 

<!--********** Copyright 2015 Roku Corp.  All Rights Reserved. **********-->

<component name="EpgGuiaScreen" extends="Group">
	<interface>
	    <field id="content" type="node" />
		<field id="channel" type="integer" alwaysNotify="true" onChange="setVideo"/>
		<field id="boxFlag" type="boolean"/>
	</interface>
	
    <script type="text/brightscript" uri="pkg:/components/EpgGuiaScreen/EpgGuiaScreen.brs"/>
  
   <children>
   		  <!--  TV Guide -->
	      <Poster 
	        id = "Guide" 
	        width = "1920" 
	        height = "1080"
	        uri="pkg:/images/TVGuide/GuiaTV.png" >
	        
	        	<!-- Focused Channel EPG -->
		        <Label
			        id="ChannelTitle"
			        width="0"
					font = "font:LargeBoldSystemFont"
			        translation = "[630, 168]" 
			        visible="false">
			      
				    <Label
				        id="showTitle"
				        width="0"
						font = "font:MediumBoldSystemFont"
				        translation = "[0, 51]" />
				    <Label
				        id="start"
				        width="0"
						font = "font:SmallSystemFont"
				        translation = "[0, 90]" />
				    <Poster
				        id="progressBack"
				        width="400"
				        height="32"
				        uri="pkg:/images/TVGuide/progressBack.png"
				        translation = "[153, 90]" />
				    <Poster
				        id="progressBar"
				        height="33"
				        uri="pkg:/images/TVGuide/progressBar.png"
				        translation = "[153, 90]" />
				    <Label
				        id="end"
				        width="0"
						font = "font:SmallSystemFont"
				        translation = "[558, 90]" />
				    <Label
				        id="next"
				        width="720"
				        wrap="true"
				        numLines="2"
				        lineSpacing="0"
						font = "font:SmallSystemFont"
				        translation = "[0, 141]" />
			    </Label>
			    
			    <!-- Date/Time -->
			    <Label 
			    	id="date"
			    	width="600"
			    	horizAlign="right"
			    	font = "font:MediumBoldSystemFont"
			    	translation="[1100,350]">
				    <Label
				    	id="time"
				    	width="0"
				    	font = "font:MediumBoldSystemFont"
				    	translation="[600,0]"/>
			    </Label>
			    
			    <!-- Category Label -->
			    <Label
				 	id="categoria"
					color="#FFFFFF"
					translation="[10,420]"
					text=""
					width="438"
					font = "font:MediumBoldSystemFont"/>
					
				<!-- EPG Guide List -->
	      		<LabelList
			        id="EpgGuia"
			        focusRow = "0"
			        numRows="7"
			        focusFootprintBitmapUri="pkg:/images/TVGuide/next.png"
			        vertFocusAnimationStyle= "floatingFocus"
			        translation="[0,462]"
					itemSize="[456,63]"
					itemSpacing="[0,6]"
			        color="#FFFFFF"/>
			    <LabelList
			        id="EpgNowGrid"
			        focusRow = "0"
			        numRows="7"
			        focusFootprintBitmapUri="pkg:/images/TVGuide/live.png"
			        vertFocusAnimationStyle= "floatingFocus"
			        translation="[461,462]"
					itemSize="[643,63]"
					itemSpacing="[0,6]"
			        color="#FFFFFF"/>
			    <LabelList
			        id="EpgLaterGrid"
			        focusRow = "0"
			        numRows="7"
			        focusFootprintBitmapUri="pkg:/images/TVGuide/next.png"
			        vertFocusAnimationStyle= "floatingFocus"
			        translation="[1109,462]"
					itemSize="[810,63]"
					itemSpacing="[0,6]"
			        color="#FFFFFF"/>	
	      </Poster>
	      
	      <!-- Channel Categories -->
		  <Poster
		  	id="categoryBox"
		  	width="660"
		  	height="710"
		  	translation="[1200,1080]"
		  	uri="pkg:/images/TVGuide/box.png">
		  		<Label
		  			text="Categories:"
		  			font = "font:MediumBoldSystemFont"
		  			translation="[45,45]">
			   <LabelList
				     id="categoryList"
				     translation="[30,45]"
				     numRows="7"/>
				</Label>
		  </Poster>
		  
		  <Animation 
		      id = "categoryAnimation" 
		      duration = "0.1" 
		      easeFunction = "linear" >
		
		      <Vector2DFieldInterpolator
		        key = "[ 0.0, 1.0 ]" 
		        keyValue = "[ [1200,1080], [1200,486] ]" 
		        fieldToInterp = "categoryBox.translation" />

    	   </Animation>
		   <Animation 
		      id = "categoryAnimationReverse" 
		      duration = "0.1" 
		      easeFunction = "linear" >
		
		      <Vector2DFieldInterpolator
		        key = "[ 0.0, 1.0 ]" 
		        keyValue = "[ [1200,486], [1200,1080] ]" 
		        fieldToInterp = "categoryBox.translation" />

    	   </Animation>
    	   
    	   <!-- Update Clock Timer -->
    	  <Timer
    	  	id="clock"
    	  	repeat= "true"
    	  	duration = "60"/>
    	  	 
    	  <!-- Hide Info Bar Timer -->	 
		  <Timer
			id = "Timer"
			repeat = "false"
			duration = "5"/>   
		        
		<!-- The spinning wheel for when content is loading -->
		<LoadingIndicator
		      id="Loading"
		      imageUri="pkg:/components/LoadingIndicator/loader.png"
		      clockwise="true"
		      spinInterval="2"
		      fadeInterval="0.5"
		      spacing="20"
		      imageWidth="100"
		      text="Loading..."
		      width="1920"
		      height="1080"
		      centered="false"
		      translation="[0, 0]"
		      textPadding="10"
		      font="font:SmallBoldSystemFont"
		      backgroundColor="0x551A8B"
		      backgroundOpacity="0"/>
		      
		<Video
	        id="VideoPlayer"
			translation = "[68,48]"
			width = "518"
			height = "280"
			enableUI = "true"
			visible="false">
			
		</Video>
		
		<Label
				id="videoLoading"
				text="Loading..."
				horizAlign="center"
				width="492"
				translation="[84,171]"
				font="font:SmallBoldSystemFont"
				visible="false"/>
				
	    
		<Poster
			id = "info"
			width = "1920"
			height="1080"
			uri="pkg:/images/TVGuide/guia.png"
			visible="false">
	             <Label
	              id="TitleInfo"
	              height="66"
	              width="0"
	              color="#FFFFFF"
		          font = "font:LargeBoldSystemFont"
	              translation = "[450, 810]" />
			    <!-- Date/Time -->
			    <Label 
			    	id="dateInfo"
			    	width="400"
			    	horizAlign="right"
			    	font = "font:MediumBoldSystemFont"
			    	translation="[1180,820]">
				    <Label
				    	id="timeInfo"
				    	width="0"
				    	font = "font:MediumBoldSystemFont"
				    	translation="[410,0]"/>
			    </Label>
	             <Label
	              id="EpgNow"
	              height="66"
	              width="0"
		          font = "font:SmallSystemFont"
	              translation = "[550, 894]" />
	             <Label
	              id="EpgLater"
	              height="66"
	              width="0"
		          font = "font:SmallSystemFont"
	              translation = "[550, 981]" />
				 <Poster
			        id="EpgPoster"
			        uri="pkg:/images/no-poster.jpg"
			        width = "150"
			        height="120"
					translation="[270, 900]" />
				 <Poster
			        id="EpgProgressBack"
			        uri="pkg:/images/TVGuide/progressBack.png"
			        width = "570"
			        height="30"
					translation="[540, 935]" />
				 <Poster
			        id="EpgProgressBar"
			        uri="pkg:/images/TVGuide/progressBar.png"
			        height="30"
					translation="[542, 935]" />					
		</Poster> 
		<!-- EPG Info On Video 	
		<Rectangle
			id="info"
			width="1920"
			height="240"
			translation="[0,840]"
			visible="false">
				<Label
	              id="TitleHint"
	              height="66"
	              width="0"
	              color="0x000000ff"
		          font = "font:LargeBoldSystemFont"
	              translation = "[450, 810]" />
	             <Label
	              id="EpgNow"
	              height="66"
	              width="0"
		          font = "font:SmallSystemFont"
	              translation = "[550, 894]" />
	             <Label
	              id="EpgLater"
	              height="66"
	              width="0"
		          font = "font:SmallSystemFont"
	              translation = "[550, 981]" />
			
		</Rectangle>
		 -->
   </children>

</component>