<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    width="100%" height="100%" backgroundGradientColors="[#8a8a8a, #ffffff]"
    creationComplete="init()"
    paddingLeft="0"
    paddingTop="0"
    paddingBottom="0"
    paddingRight="0"
>

<!--
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
FlexVideoPlayer 0.2b
Florian Plag
www.video-flash.de
2007
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
-->


    <mx:Script>
        <![CDATA[   
				
        import mx.controls.Alert;
		import mx.events.VideoEvent;
		
		[Bindable]
        private var myVideos:XML;		

		// ::::::::::::::: Initiere Anwendung :::::::::::::::::::::
		public function init():void {
			
			myDataGrid.selectedIndex=0;	
		
			// XML-Datei laden
			var myLoader:URLLoader = new URLLoader();
			var myURL:URLRequest = new URLRequest("playlist.xml")
			myLoader.load(myURL);
			myLoader.addEventListener (Event.COMPLETE, onXMLLoaded);
			myLoader.addEventListener (IOErrorEvent.IO_ERROR, onFileFailed);		
			
			// StateHandler für Video
			myVid.addEventListener (VideoEvent.STATE_CHANGE, stateHandler);		

		}
	

		// :::::::::::::::: XML Funktionen :::::::::::::::::::::::	

		private function onXMLLoaded(evt:Event):void {
			
			// XML-Objekt erstellen
			try {
				myVideos = new XML(evt.target.data);
			}
			catch (e:TypeError) {
				Alert.show("Fehler: Ungültige XML-Datei");
			}
			
			// Bild vom ersten Listeneintrag als Default laden
			previewPicture.source=myVideos.video[0].preview;
		}
		
		private function onFileFailed(evt:IOErrorEvent):void {
			
			// wenn XML-Datei nicht vorhanden
			Alert.show("Fehler: Leider konnte die benötigte XML-Datei nicht geladen werden!");
		}		
		

		// :::::::::::::::: Video laden  :::::::::::::::::::::::
		
		public function loadVideo(vidURL:String):void {
			
			// Video laden, wenn Playbutton im Datagrid gedrückt wird
			myVid.source = vidURL;
			
			// Überschrift des aktuellen Films oberhalb des Videos
			headlineText.text = " " + myVideos.video[selectedVideoIndex].title;	
			
			// Bedienelemente aktivieren
			enableControlers(true, true, true, true, true);	
			
		}		
	

		// :::::::::::::::: Statusmeldungen des Videos  :::::::::::::::::::::::
		
		private function stateHandler (evt:VideoEvent):void {
			
			// Hilfe: enableControlers(rewindB:Boolean, pauseB:Boolean, playB:Boolean, stopB:Boolean, seekB:Boolean)
			
			// Für jeden Videostatus das OnScreenDisplay und die Steuerelemente anpassen
			
			switch (evt.state) {
				
			 case "connectionError" :
				Alert.show("\nLeider wurde diese Videodatei gefunden!");
				myVid.close();
				enableControlers(false, false, false, false, false);
				onScreenText.htmlText = "&#61555;";				
				onScreenText.visible = true;
				break;
			
			
			case "buffering":	
				onScreenText.htmlText ="Buffering ..";
				onScreenText.visible = true;
				enableControlers(true, true, true, true, true);					
				break;
						
			case "loading":	
				onScreenText.htmlText ="Loading";						
				enableControlers(true, true, true, true, true);	
				break;
			
				
			case "seeking":		
				onScreenText.htmlText = "Seeking"
				onScreenText.visible = true;
				enableControlers(true, true, true, true, true);			
				break;				
			
			case "playing":	
				onScreenText.htmlText = "Playing"					
				onScreenText.visible = false;
				enableControlers(true, true, false, true, true);
				break;
				
			
			case "paused":	
				onScreenText.htmlText = "Paused"					
				onScreenText.visible = true;
				enableControlers(true, false, true, true, true);
				break;
			
			
			case "stopped":
				onScreenText.htmlText = "Stopped";					
				onScreenText.visible = true;
				enableControlers(false, false, true, false, true);
				break;
			}
										
		}		


		// :::::::::::::::: Zeit im Minuten/Sekunden umrechnen  :::::::::::::::::::::::

		private function generateTimecode(value:int):String{
		
			var vidTime:Date = new Date(2007, 0, 1 , 0, 0, value);
			var result:String;
		    if (vidTime.getSeconds() <10) {
		       result = vidTime.getMinutes() + ":0" + vidTime.getSeconds();
		    }
		    else {
		        result = vidTime.getMinutes() + ":" + vidTime.getSeconds();
		    };
	        return result;
		}
			
			
		// :::::::::::::::: Steuerungselemente aktivieren/deaktivieren :::::::::::::::::::::::			
		
		private function enableControlers(rewindB:Boolean, pauseB:Boolean, playB:Boolean, stopB:Boolean, seekB:Boolean):void {
			rewindButton.enabled = rewindB;			
			pauseButton.enabled = pauseB;
			playButton.enabled = playB;	
			stopButton.enabled = stopB;		
			seekBar.enabled = seekB;									
		}		


		// :::::::::::::::: Steuerungselemente aktivieren/deaktivieren :::::::::::::::::::::::			
		
		private function changeView():void {
			if (currentState == 'smallLeftPanel' ) {
			currentState = '';
			}
			else {
				currentState = 'smallLeftPanel';
			}
			
			titleColumn.width = 200; // hack: damit die Playbuttons in der Liste nicht größer werden
			
			
		}

        ]]>

	</mx:Script>


	<!-- ::::::::::::::::::::::::: Styles ::::::::::::::::::::::::: -->
	<mx:Style>

	     .MyIconsStyle 
	     { 
	         font-family: Arial; 
	         font-size: 10pt;    
	     }
	
	     .MySmallIconsStyle 
	     { 
	         font-family: Arial; 
	         font-size: 14pt;    
	     }	

	     .MyCreditsStyle 
	     { 
	        font-size: 9pt;    
	     }
	

	     .MyHeadlineStyle 
	     { 
	        font-size: 16pt;
	        fontWeight: bold;

	    
	     }	
	
	     .MySmallHeadlineStyle 
	     { 
	        font-size: 10pt;
	        fontWeight: bold;

	    
	     }	
	
	     .MyOnScreenStyle 
	     { 
         	font-family: Arial; 	
	        font-size: 14pt;
			color: #FFFFFF;
	        fontWeight: bold;
	    
	     }	

	 </mx:Style>   


    <!-- ::::::::::::::: Ansicht mit eingeklapptem linkem Panel (Playlist) ::::::::::::::::::::::::::::-->
    <mx:states>
        <mx:State name="smallLeftPanel">
            <mx:SetProperty target="{leftPanel}" name="width" value="0"/>	
			<mx:RemoveChild target="{creditsFlexVideoPlayer}" />	
        </mx:State>
    </mx:states>

    <!-- ::::::::::::::: Übergangseffekt für Ansichtswechsel ::::::::::::::::::::::::::::-->	
	<mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Resize target="{leftPanel}" duration="500"/>
        </mx:Transition>
    </mx:transitions>
	

    <!-- ::::::::::::: Stuff ::::::::::::::::: -->
    <mx:Number id="selectedVideoIndex">{myDataGrid.selectedIndex}</mx:Number>
    <mx:Fade id="fadeOut" duration="2000" alphaFrom="1.0" alphaTo="0.0"/>
    <mx:Fade id="fadeIn" duration="2000" alphaFrom="0.0" alphaTo="1.0"/>


<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxx Layout xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

	<!-- ::::::::::::::::::::::::: Main Panel ::::::::::::::::::::::::: -->

	 <mx:Panel id="main" layout="horizontal" width="100%" height="100%"
		headerHeight="0" cornerRadius="2" borderStyle="solid" borderThickness="0"
		borderThicknessBottom="0" borderThicknessLeft="0" borderThicknessRight="0"
		borderThicknessTop="0"
	 >
 


		<!-- ::::::::::::::::::::::::: Linkes Panel ::::::::::::::::::::::::: -->
	    <mx:Panel id="leftPanel" title="" paddingBottom="0" 
		paddingTop="0" width="270" height="100%" 
		> 

	        <!-- ::::::::::::::::::::::::: Datagrid ::::::::::::::::::::::::: -->
	        <mx:DataGrid id="myDataGrid" dataProvider="{myVideos.video}" width="100%" height="200" 
			change="previewPicture.source=myVideos.video[selectedVideoIndex].preview"
			>
	            <mx:columns>
	                <mx:DataGridColumn id="titleColumn" dataField="title" headerText="Videos" width="200"/>
	                <mx:DataGridColumn  dataField="playSymbolColumn" headerText="">

	                    <mx:itemRenderer>
	                        <mx:Component>
	                            <mx:Button                            
	                                click="outerDocument.loadVideo(data.@FLV);"
									height="13"
									icon="@Embed('play.png')"
									toolTip="Video laden und abspielen"
	                            />                                    
	                        </mx:Component>

	                    </mx:itemRenderer>                        
	                </mx:DataGridColumn>
	            </mx:columns>
	        </mx:DataGrid>
        
			<!-- ::::::::::::::::::::::::: Detailansicht des ausgeaehlten Videos ::::::::::::::::::::::::: -->

	        <mx:Form width="100%" >
	            <mx:FormHeading label="Filminformationen"/>

	            <mx:FormItem label="Titel:" width="100%">
	                <mx:Text 
	                    id="titleText" 
	                    width="100%"
	                    text="{myVideos.video[selectedVideoIndex].title}"
	                />

	            </mx:FormItem>
	            <mx:FormItem label="Autor:" width="100%">
	                <mx:Text 
	                    id="authorText"
	                    width="100%"
	                    text="{myVideos.video[selectedVideoIndex].author}"
	                />

	            </mx:FormItem>

	            <mx:FormItem label="Infos:" width="100%">
	                <mx:Text 
	                    id="descriptionText"
	                    width="100%" height="75"
	                    text="{myVideos.video[selectedVideoIndex].description}"
	                />

	            </mx:FormItem>

				<mx:Image id="previewPicture" width="200" height="150"/>
					
	        </mx:Form>


    </mx:Panel>

	<!-- ::::::::::::::::::::::::: Rechtes Panel ::::::::::::::::::::::::: -->
			
	<mx:Panel id="vidPanel" title="" width="100%" height="100%" 
	       horizontalAlign="center"  verticalAlign="middle"
	       paddingTop="0" paddingBottom="0" verticalGap="0"
	>


			<mx:HBox id="headerCanvas" width="100%" height="25" horizontalAlign="right" verticalAlign="middle" backgroundColor="#CCCCCC">
			
					<!-- Headline -->
		           <mx:Text 
		               id="headlineText" styleName="MySmallHeadlineStyle" textAlign="left" width="100%"           
		           />
		
					<!-- ViewButtons -->	
		           <mx:LinkButton id="changeViewButton" styleName="MySmallIconsStyle" width="25" 
					 click="changeView()" toolTip="Ansicht wechseln (Vollbild / Listenansicht)"
					 icon="@Embed('ansicht.png')"/>
				
			</mx:HBox>		

			<!-- Video-Canvas -->
			<mx:Canvas id="myVidCanvas" width="100%" height="100%">
			
					<!-- Videodisplay -->
		       		<mx:VideoDisplay id="myVid" width="100%" height="100%" autoPlay="true"/>
		
					<!-- OnScreenDisplay -->		
		            <mx:Text 
		                id="onScreenText" styleName="MyOnScreenStyle" textAlign="right" right="30" y="30"
					 	visible ="false" selectable="false"
						hideEffect="{fadeOut}" showEffect="{fadeIn}"
		                width="100%" height="50"
		            />
			</mx:Canvas>

	
		   <!-- Panel mit Steuerelemente -->
			<mx:Panel id="controlPanel" layout="absolute" width="100%" height="65" horizontalAlign="center" 
			headerHeight="0" cornerRadius="2" borderStyle="solid" borderThickness="0" 
			>
						
					<!-- ProgressBar -->
					<mx:ProgressBar width="100%" id="progressBar" y="10"  label="" mode="event"
						minimum="0" maximum="100" height="20" left="7" right="5"
						source="{myVid}" trackHeight="10" trackColors="[#AAAAAA, #DDDDDD]"
					
						
					/>
			
					<!-- seekBar -->
		 			   <mx:HSlider id="seekBar" y="19" width="100%" height="0" thumbPress="myVid.pause()" 
							thumbRelease="myVid.play()" change="myVid.playheadTime = seekBar.value"			
		 					value="{myVid.playheadTime}" minimum="0" maximum="{myVid.totalTime}" 
							dataTipFormatFunction="generateTimecode"
							useHandCursor = "true"	buttonMode = "true"			
						/>

		 			<!-- Steuerung -->

				    <mx:HBox y="30" horizontalAlign="center" width="100%">
				           <mx:Button id="rewindButton" height="20" styleName="MyIconsStyle" click="myVid.playheadTime=0;" enabled="false" label="Rewind" toolTip="Video zum Anfang zurückspulen"/>				
				           <mx:Button id="playButton" height="20" styleName="MyIconsStyle" click="myVid.play();" enabled="false" label="Play" toolTip="Video abspielen"/>
				           <mx:Button id="pauseButton" height="20" styleName="MyIconsStyle" label="Pause" click="myVid.pause();" enabled="false" toolTip="Video pausieren"/>
				           <mx:Button id="stopButton" height="20" styleName="MyIconsStyle" label="Stop" click="myVid.stop();" enabled="false" toolTip="Video abbrechen"/>		
									
				    </mx:HBox>
			</mx:Panel>

		   <!-- Credits	-->
			<mx:Box >
					<mx:LinkButton id="creditsFlexVideoPlayer" height="30" label="FlexVideoPlayer" styleName="MyCreditsStyle" 
						click="navigateToURL(new URLRequest('http://www.video-flash.de/index.php/flexvideoplayer/'), '_blank')"
					/>
			</mx:Box>
 		
		</mx:Panel>

	</mx:Panel>

</mx:Application>