<?xml version="1.0" encoding="utf-8"?>
  <mx:Application 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&dev_id=AI39si6BKwQupEtcDqcU91gql-F6xzE_SrB1-fTnDCvxKXxLyTtBkVapreaP8j8ZQpjbqqPHqSfU_PzN0bkzIqy1ioEUsc00Og&per_page=50&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>