/**********************************************************************
 player.js

$Comment: provides JavaScript to load and control the flvplayer (free flash video player)
$Source : player.js,v $

$InitialAuthor: guenter richter $
$InitialDate: $
$Author: guenter richter $
$Id: htmlgui.js 8 2011-09-16 08:14:02Z Guenter Richter $

Copyright (c) Guenter Richter
$Log: player.js,v $
**********************************************************************/

/** 
 * @fileoverview This file provides JavaScript to load and control the flvplayer<br>
 * @author Guenter Richter guenter.richter@medienobjekte.de
 * @version 1.1 
 */

/**
 * define namespace myvideo
 */
(function( myvideo, $, undefined ) {

	/* ------------------------------------------------------------------ * 
		local variables
	 * ------------------------------------------------------------------ */

	var _szImageDiv = null;
	var _loadedUrl = null;
	var _introImageWidth = null;
	var _introImageHeight = null;
	var _width = 0;
	var _height = 0;
	var _dWidth = 0;
	var _dHeight = 0;
	var nFormat = 16/9;
	var fIn = null;
	var lastPosition = null;

	var szEffect = "diagonal";
	var nEffectFrames = 18;

	/* ------------------------------------------------------------------ * 
		local functions
	 * ------------------------------------------------------------------ */

	function show_video(){
		try{
			document.getElementById("video").style.visibility = "visible";
		}
		catch (e){}
	}
	function hide_video(){
		try{
			document.getElementById("video").style.visibility = "hidden";
		}
		catch (e){}
	}
	function is_video(){
		try{
			return (document.getElementById("video").style.visibility == "visible");
		}
		catch (e){ return false;}
	}
	function hide_image(){
		try{
			document.getElementById(_szImageDiv).style.visibility = "hidden";
		}
		catch (e){}
	}
	function show_image(){
		try{
			document.getElementById(_szImageDiv).style.visibility = "visible";
		}
		catch (e){}
	}
	function hide_controls(){
		try{
			document.getElementById("video_controls").style.visibility = "hidden";
			document.getElementById("pause_transparent").style.visibility = "hidden";
			document.getElementById("play_transparent").style.visibility = "hidden";
		}
		catch (e){}
	}
	function show_controls(){
		try{
			document.getElementById("video_controls").style.visibility = "visible";
			document.getElementById("pause_transparent").style.visibility = "visible";
		}
		catch (e){}
	}
	function show_loading(){
		try{
			document.getElementById("video_loading").style.visibility = "visible";
			document.getElementById("video_start").style.visibility = "hidden";
		}
		catch (e){}
	}
	function hide_loading(){
		try{
			document.getElementById("video_loading").style.visibility = "hidden";
			document.getElementById("video_start").style.visibility = "visible";
		}
		catch (e){}
	}
	function getFlashObject()
	{
		return document.getElementById("myFlash");
	}
	function play()
	{
		getFlashObject().SetVariable("method:play", "");
	}
	function pause()
	{
		getFlashObject().SetVariable("method:pause", "");
	}
	function stop()
	{
		getFlashObject().SetVariable("method:stop", "");
	}

	/**	***********************************	*** 
	/**		from the flvplayer sample		*** 
	/**		keep it for further depelopment ***
	/**	***********************************	*** 
	/**
	function setWidth()
	{
		var width = document.getElementById("inputWidth").value;
		getFlashObject().width = width+"px";
	}
	function setHeight()
	{
		var height = document.getElementById("inputHeight").value;
		getFlashObject().height = height+"px";
	}
	function setPosition()
	{
		var position = document.getElementById("inputPosition").value;
		getFlashObject().SetVariable("method:setPosition", position);
	}
	function setVolume()
	{
		var volume = document.getElementById("inputVolume").value;
		getFlashObject().SetVariable("method:setVolume", volume);
	}
	function loadImage()
	{
		var url = document.getElementById("inputImage").value;
		var depth = document.getElementById("inputImageDepth").value;
		var verticalAlign = document.getElementById("inputImageVertical").value;
		var horizontalAlign = document.getElementById("inputImageHorizontal").value;
		
		getFlashObject().SetVariable("method:loadMovieOnTop", url+"|"+depth+"|"+verticalAlign+"|"+horizontalAlign);
	}
	function unloadImage()
	{
		var depth = document.getElementById("inputUnloadDepth").value;
		getFlashObject().SetVariable("method:unloadMovieOnTop", depth);
	}
	**/

	/**	***********************************	*** 
	/**		transition effects				*** 
	/**	***********************************	**/ 

	function slideIn(){
		if ( fIn ){
			return;
		}
		fIn = true;
		show_video();
		if ( _width == 0 ){
			_width = parseFloat(getFlashObject().width);
			_height = parseFloat(getFlashObject().height);

			try	{
				_introImageWidth = document.getElementById(_szImageDiv).clientWidth;
				_introImageHeight = document.getElementById(_szImageDiv).clientHeight;
				_width = _introImageWidth;
				_height = _introImageHeight-3;
			}
			catch (e){}
			if ( !_introImageWidth ){
				_introImageWidth = 700;
				_width = _introImageWidth;
				_height = Math.round(_introImageWidth/nFormat);
			}
			if ( szEffect == "diagonal" ){
				_dWidth = _width/nEffectFrames;
				_dHeight = _height/nEffectFrames;
				getFlashObject().width = 1+"px";
				getFlashObject().height = 1+"px";
			}else
			if ( szEffect == "down" ){
				_dWidth = _width;
				_dHeight = _height/nEffectFrames;
				getFlashObject().width = 1+"px";
				getFlashObject().height = 1+"px";
			}else{
				getFlashObject().width = _width;
				getFlashObject().height = _height;
				_dWidth = _width;
				_dHeight = _height;
			}
		}
		setTimeout("myvideo.doSlideIn()",25);
	}

	function slideOut(){
		if ( !fIn ){
			return;
		}
		setTimeout("myvideo.doSlideOut()",25);
	}

	/* ------------------------------------------------------------------ * 
		global helpers (global because of setTimeout(...) )
	 * ------------------------------------------------------------------ */

	myvideo.doSlideIn = function(){
		var repeat = false;
		if ( parseInt(getFlashObject().width) < _width ){
			getFlashObject().width = Math.min(_width,parseFloat(getFlashObject().width)+_dWidth)+"px";
			repeat = true;
		}
		if ( parseInt(getFlashObject().height) < _height ){
			getFlashObject().height = Math.min(_height,parseFloat(getFlashObject().height)+_dHeight)+"px";
			repeat = true;
		}
		if ( repeat ){
			setTimeout("myvideo.doSlideIn()",25);
		}else{
			show_controls();
			hide_image();
		}
	}
	myvideo.doSlideOut = function(){
		var repeat = false;
		if ( parseInt(getFlashObject().width) > 1 ){
			getFlashObject().width = Math.max(1,parseFloat(getFlashObject().width)-_dWidth)+"px";
			repeat = true;
		}
		if ( parseInt(getFlashObject().height) > 1 ){
			getFlashObject().height = Math.max(1,parseFloat(getFlashObject().height)-_dHeight)+"px";
			repeat = true;
		}
		if ( repeat ){
			setTimeout("myvideo.doSlideOut()",25);
		}else{
			hide_video();
			show_image();
			fIn = false;
		}
	}

	/* ------------------------------------------------------------------ * 
		global functions
	 * ------------------------------------------------------------------ */

	myvideo.loadVideo = function(szImageDiv,szTargetDiv,szVideo,options){
		_szImageDiv = szImageDiv;
		injectVideo(szTargetDiv,szVideo);
		if ( options ){
			if ( options.format ){
				nFormat = options.format;
			}
			if ( options.effect ){
				szEffect = options.effect;
			}
			if ( options.effectframes ){
				nEffectFrames = options.effectframes;
			}
		}
	};

	myvideo.startVideo = function(_videoToLoad){

		if ( _videoToLoad == null || !_videoToLoad.length ){
			_videoToLoad ="../videos/P1040790x.FLV";
		}
		show_loading();
		if (_loadedUrl != _videoToLoad ){
			getFlashObject().SetVariable("method:setUrl", _videoToLoad );
		}
		stop();
		play();
	};

	myvideo.stopVideo = function(){
		hide_loading();
		hide_controls();
		slideOut();
		stop();
	};

	myvideo.pauseVideo = function(){
		this.isPaused = true;
		pause();
		try{
			document.getElementById("pause_transparent").style.visibility = "hidden";
			document.getElementById("play_transparent").style.visibility = "visible";
		}
		catch (e){}
	};

	myvideo.playVideo = function(){
		this.isPaused = false;
		play();
		try{
			document.getElementById("play_transparent").style.visibility = "hidden";
			document.getElementById("pause_transparent").style.visibility = "visible";
		}
		catch (e){}
	};


	/* ------------------------------------------------------------------ * 
		global variables and objects
	 * ------------------------------------------------------------------ */

	myvideo.myListener = new Object();
					
		/**
		 * Initialisation
		 */
		myvideo.myListener.onInit = function()
		{
			
		};
		/**
		 * onClick event on the video
		 */
		myvideo.myListener.onClick = function()
		{

		};
		/**
		 * onKeyUp event on the video
		 */
		myvideo.myListener.onKeyUp = function(pKey)
		{
		};
		/**
		 * onComplete event
		 */
		myvideo.myListener.onFinished = function()
		{
			myvideo.stopVideo();
		};
		/**
		 * Update
		 */
		myvideo.myListener.onUpdate = function()
		{
			if ( (this.isPlaying == "true") && (this.position > 50) ){
				_loadedUrl = this.url;
				slideIn();
			}

			if ( !this.isPlaying && (this.position == lastPosition) && (lastPosition > 50) ){
				getFlashObject().SetVariable("method:play", "");
			}
			lastPosition = this.position;

			try	{
				var _progress_width = _width-70;
				document.getElementById("progress-loading").width = _progress_width / this.bytesTotal * this.bytesLoaded;
				document.getElementById("progress-playing").width = _progress_width / this.duration * this.position;
				document.getElementById("progress-loading2").width = Math.min(60,60/100*this.bytesPercent);
				document.getElementById("video_loading_percent").innerHTML = (isNaN(this.bytesPercent)?0:this.bytesPercent).toString() + "%"; //this.bytesLoaded.toString();
			}
			catch (e){}

			/**	***********************************	*** 
			/**		from the flvplayer sample		*** 
			/**		keep it for further depelopment ***
			/**	***********************************	*** 

			document.getElementById("info_playing").innerHTML = this.isPlaying;
			document.getElementById("info_url").innerHTML = this.url;
			document.getElementById("info_volume").innerHTML = this.volume;
			document.getElementById("info_position").innerHTML = this.position;
			document.getElementById("info_duration").innerHTML = this.duration;
			document.getElementById("info_buffer").innerHTML = this.bufferLength + "/" + this.bufferTime;
			document.getElementById("info_bytes").innerHTML = this.bytesLoaded + "/" + this.bytesTotal + " (" + this.bytesPercent + "%)";

		   
			var isPlaying = (this.isPlaying == "true");
			document.getElementById("playerplay").style.display = (isPlaying)?"none":"block";
			document.getElementById("playerpause").style.display = (isPlaying)?"block":"none";
			
			var timelineWidth = 160;
			var sliderWidth = 40;
			var sliderPositionMin = 40;
			var sliderPositionMax = sliderPositionMin + timelineWidth - sliderWidth;
			var sliderPosition = sliderPositionMin + Math.round((timelineWidth - sliderWidth) * this.position / this.duration);
			
			if (sliderPosition < sliderPositionMin) {
				sliderPosition = sliderPositionMin;
			}
			if (sliderPosition > sliderPositionMax) {
				sliderPosition = sliderPositionMax;
			}
			
			document.getElementById("playerslider").style.left = sliderPosition+"px";
	**/
		};

	/* ------------------------------------------------------------------ * 
		this is all we need
	 * ------------------------------------------------------------------ */

	function injectVideo(szDiv,szVideo){

		// inject the flvplayer
		// this flash video player is 'naked' and free, and can be controled by JavaScript

		var szInjection = ''
		szInjection += '<div id="video_player_injected" >';
							// a button to start the video
		szInjection += '	<div id="video_start" class="play_transparent" style="position:absolute;bottom:5px;left:3px;visibility:visible;">';
		szInjection += '		<img src="resources/images/play.png" title="start video" width="62" height="62" onclick="javascript:myvideo.startVideo(\''+szVideo+'\');">';
		szInjection += '	</div>';
							// the loading image (before the player is streaming)
		szInjection += '	<div id="video_loading" class="play_transparent" style="position:absolute;bottom:3px;left:3px;visibility:hidden;">';
		szInjection += '		<img src="resources/images/loading.gif" title="loading video" width="64" height="64" onclick="javascript:startVideo();">';
		szInjection += '		<img id="progress-loading2" style="position:absolute;top:58px;left:1px;" src="resources/images/GreenLine.gif" width="0" height="5" >';
		szInjection += '		<span id="video_loading_percent" style="color:white;position:absolute;top:20px;left:10px;width:40px;text-align:center;"<span>';
		szInjection += '	</div>';

		szInjection += '	<div id="video" style="position:absolute;top:0px;left:0px;visibility:visible;" >';
								// the video player
		szInjection += '		<object id="myFlash" type="application/x-shockwave-flash" data="resources/flvplayer/player_flv_js.swf" width="0" height="0">'; 
		szInjection += '			<param name="movie" value="resources/flvplayer/player_flv_js.swf" >';
		szInjection += '			<param name="FlashVars" value="listener=myvideo.myListener&amp;interval=500&amp;useHandCursor=0&amp;bgcolor=000000&amp;buffer=9" >';
		szInjection += '		</object>';
		szInjection += '		<div id="video_controls" style="visibility:hidden;" >';
									// a button to stop the video
		szInjection += '			<div id="stop_transparent" style="position:absolute;top:99.9%;left:95.8%;z-index:1000;">';
		szInjection += '				<img src="resources/images/eject.png" width="32" height="32" onclick="javascript:myvideo.stopVideo();">';
		szInjection += '			</div>';
									// a button to pause the video
		szInjection += '			<div id="pause_transparent" style="position:absolute;top:99.4%;left:-5px;z-index:1000;visibility:hidden;">';
		szInjection += '				<img src="resources/images/pause.png" width="32" height="32" onclick="javascript:myvideo.pauseVideo();">';
		szInjection += '			</div>';
									// a button to play the video
		szInjection += '			<div id="play_transparent" style="position:absolute;top:99.4%;left:-5px;z-index:1000;visibility:hidden;">';
		szInjection += '				<img src="resources/images/play.png" width="32" height="32" onclick="javascript:myvideo.playVideo();">';
		szInjection += '			</div>';
									// the progress bar
		szInjection += '			<div id="progress" >';
		szInjection += '				<img id="progress-loading" src="resources/images/LightLine.gif" width="0" height="5" style="position:absolute;top:101%;left:30px">';
		szInjection += '				<img id="progress-playing" src="resources/images/GrayLine.gif" width="0" height="2" style="position:absolute;top:101.5%;left:30px" >';
		szInjection += '			</div>';
		szInjection += '		</div>';
		szInjection += '	</div>';

		szInjection += '</div>';
		 
		document.getElementById(szDiv).innerHTML = szInjection;
	}

}( window.myvideo = window.myvideo || {} ));

// -----------------------------
// EOF
// -----------------------------