<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
viewSourceURL="@mx-professional-flex-code-23-Main1.html" xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns="*">
	
	<mx:Style>
		
		Application
		{
			background-color: #000000;
		}
		
		TileList
		{
			font-size: 40;
			color: #FFFFFF;
			background-alpha: 0;
			border-style: none;
			font-family: myFontFamily;
			roll-over-color: #990000;
			selection-color: #0099CC;
		}
		
		LinkButton
		{
			roll-over-color: #990000;
			color: #EEEEEE;
		}
		
		Label
		{
			color: #FFFFFF;
		}
		
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			
			import mx.events.*;
			import mx.controls.Button;
			import mx.collections.ArrayCollection;
			import mx.utils.ObjectUtil;
			import mx.controls.Alert;
			import mx.rpc.events.*;
			
			[Bindable]
			public var videoId:String;
			
			[Bindable]
			public var videos:ArrayCollection;
			
			private function onListByTagResult(event:ResultEvent):void
			{
				trace(ObjectUtil.toString(event.result));
				videos = event.result.ut_response.video_list.video;
			}
			
			private function onListByTagFault(event:FaultEvent):void
			{
				Alert.show(event.fault.message);
			}
			
			private function onGetFileResult(event:ResultEvent):void
			{
				var result:String = String(event.result);
				videoDisplay.source = "http://www.youtube.com/get_video?video_id=" + videoList.selectedItem.id + result;
				trace(ObjectUtil.toString(event.result));
				trace(videoDisplay.source);
			}
			
			private function onGetFileFault(event:FaultEvent):void
			{
				Alert.show(event.fault.message);
			}
			
			private function playPause(event:MouseEvent):void
			{
				var bInstance:Button = event.currentTarget as Button;
				
				if (bInstance.label == "Play")
				{
					bInstance.label = "Pause";
					videoDisplay.play();
				}
				else if (bInstance.label == "Pause")
				{
					bInstance.label = "Play";
					videoDisplay.pause();
				}
			}
			
			private function onStateChange(event:VideoEvent):void
			{
				status_label.text = event.state;
				if (event.state == "playing")
				{
					playPauseBtn.label = "Pause";
				}
				else if (event.state == "stopped")
				{
					playPauseBtn.label = "Play";
				}
			}
			
		]]>
	</mx:Script>
	
	<mx:HTTPService id="listByTagSrv"
		useProxy="false"
		showBusyCursor="true"

		url="http://www.youtube.com/api2_rest?method=youtube.videos.list_by_tag&amp;dev_id=AI39si6BKwQupEtcDqcU91gql-F6xzE_SrB1-fTnDCvxKXxLyTtBkVapreaP8j8ZQpjbqqPHqSfU_PzN0bkzIqy1ioEUsc00Og&amp;per_page=50&amp;tag={tag_ti.text}"
		result="onListByTagResult(event)"
		fault="onListByTagFault(event)" />
	
	<mx:HTTPService id="getFileSrv"
		useProxy="false"
		showBusyCursor="true"
		url="http://192.168.1.5:8888/get_file.php"
		result="onGetFileResult(event)"
		fault="onGetFileFault(event)" />
	
	<mx:Form>
		<mx:FormItem direction="horizontal">
			<mx:TextInput id="tag_ti" />
			<mx:LinkButton label="Search" click="listByTagSrv.send();" />
		</mx:FormItem>
	</mx:Form>
	
	<mx:HBox width="100%" height="100%" horizontalAlign="center" horizontalGap="20">
		<mx:VBox verticalGap="0">
			<mx:VideoDisplay id="videoDisplay" width="320" height="240" stateChange="onStateChange(event)" />
			<mx:Canvas width="100%" height="100%">
				<professional_flex_code_23_Reflection id="reflection" target="{videoDisplay}" width="320" height="240" />
				
				<mx:VBox top="5" width="100%" borderStyle="solid" borderColor="#000000" backgroundColor="#FFFFFF" backgroundAlpha="0.2" cornerRadius="6"
					paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10">
					<mx:ProgressBar source="{videoDisplay}" width="300" labelPlacement="top" color="#FFFFFF" />
					<mx:Label id="status_label" fontWeight="bold" />
					
					<mx:HBox>
						<mx:LinkButton id="playPauseBtn" label="Play" click="playPause(event)" />
						<mx:LinkButton label="Stop" click="videoDisplay.stop()" />
					</mx:HBox>
				</mx:VBox>
			</mx:Canvas>
		</mx:VBox>
		
		<mx:TileList id="videoList" width="100%" height="100%" dataProvider="{videos}"
			change="getFileSrv.send({video_id: event.currentTarget.selectedItem.id});">
			<mx:itemRenderer>
				<mx:Component>
					<mx:VBox width="140" height="107" horizontalAlign="center" verticalAlign="middle">
						<mx:Image source="{data.thumbnail_url}" />
					</mx:VBox>
				</mx:Component>
			</mx:itemRenderer>
		</mx:TileList>
	</mx:HBox>
	
</mx:Application>