<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="custom.*" xmlns:local="*" layout="absolute" backgroundColor="#3e3e3e" creationComplete=" videoData.send(); init();" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
        
        import fl.video.*;

        public function init(): void

        {

            player.myFlv.source = "http://blog.flexcommunity.net/lab/flvPlayer3/high.flv";
            player.myFlv.play();
            player.myFlv.addEventListener(VideoEvent.REWIND, rewHandler);
            player.myFlv.addEventListener(VideoEvent.FAST_FORWARD, ffHandler);
            player.myFlv.addEventListener(VideoEvent.COMPLETE, ffHandler);            

        }

        private function ffHandler( e:VideoEvent ):void

        {
        
            seekToNext();
            player.myFlv.play();

        }
        
                private function rewHandler( e:VideoEvent ):void

        {
        
            seekToPrev();
            player.myFlv.play();

        }

var i=0;

public function setPath(targetPath):void{
    player.myFlv.source=targetPath;
    player.myFlv.play();
}


public function seekToNext():void{
    if(btn.length-1>i){
    i++
    }
    else{i=0}
    player.myFlv.source=btn[i].path;
}

public function seekToPrev():void{
    if(i>0){
    i--
    }
    player.myFlv.source=btn[i].path;
}

        ]]>
    </mx:Script>
 <mx:Style source="style.css"/>

  
    <mx:HTTPService id="videoData"
        url="playlist.xml"    
        resultFormat="e4x"/>
        
<mx:Panel width="640" height="360" backgroundColor="0x000000" shadowDistance="4" headerHeight="0" roundedBottomCorners = "true" borderThicknessLeft="5" borderThicknessTop="5" borderThicknessBottom="5" borderThicknessRight="5" dropShadowEnabled = "true" horizontalCenter="0" verticalCenter="0">
    
    <local:FLVpb id="player" horizontalCenter="0" verticalCenter="0" width="100%" height="100%" mouseOver="player.setFocus();"/>
    </mx:Panel>
    <mx:ViewStack id="viewstack1" selectedIndex="0" verticalCenter="0" horizontalCenter="420" height="450"  width ="160" >
    
        
    
    <mx:Canvas label="Category 1" height="440"  backgroundAlpha="0" width ="160" >
    <mx:VBox height="440"  width ="160"
            borderStyle="none"
      verticalGap="0">
        <mx:Repeater id="videoRepeater" dataProvider="{videoData.lastResult.item}">
         <mx:Canvas width="120" height="105" backgroundAlpha="0" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="none" backgroundSize="100%">
         <mx:Panel width="90" height="60" horizontalCenter="0" top="0">

                        <custom:Thumbnail id="btn" source="{videoRepeater.currentItem.thumbnail}" path="{videoRepeater.currentItem.file}" mouseDown="i=event.target.repeaterIndices" mouseUp="setPath(event.currentTarget.path)" buttonMode="true" useHandCursor="true" horizontalCenter="0" verticalCenter="0" width="100%" height="100%"/>
         </mx:Panel>
                        <mx:Label horizontalCenter="0" bottom="20"  text="{videoRepeater.currentItem.title}"/> 
                        <mx:Label width="120" horizontalCenter="10" bottom="4" text="{videoRepeater.currentItem.description}"/> 
                        
    </mx:Canvas>             
    </mx:Repeater>
    </mx:VBox>
    </mx:Canvas>

</mx:ViewStack>
    <mx:ButtonBar horizontalCenter="-450" verticalCenter="0" width="160" direction="vertical" dataProvider="viewstack1">
        </mx:ButtonBar>
</mx:Application>