/**
 * initial videoplayer loading
 * @param playerId
 */
function onYouTubePlayerReady(playerId) {
	ytplayer = document.getElementById("myytplayer");
	ytplayer.addEventListener('onStateChange', 'onytplayerStateChange');
}



/**
 * observe the current player state
 * @param newState
 */
function onytplayerStateChange(newState) {
	
	var timer;
	if(newState == 1 || newState == 3) {
		timer = setInterval(function() {
			var sValue = Math.floor(ytplayer.getCurrentTime()/ytplayer.getDuration()*100);
			var p =  sValue + '%';
			$('#abgespielt').css('width', p);
			$("#progressSlider").slider({value : sValue});
		},500);	
	} else {
		clearInterval(timer);
	}
}



/**
 * jump to timepoint
 * @param event
 * @param ui
 * @param goodBrowser
 */
function setTimepoint(event, ui, goodBrowser) {
	
	// HTML5 - Player
	if(goodBrowser === true) {
		
		var video = $('#video')[0];	
		var duration = video.duration/100;
		
		$('#progressSlider').mouseover(function() {
			video.pause();
		});
		
		var targetTimepoint = duration * ui.value;
		video.currentTime = targetTimepoint;
		
		$('#progressSlider').bind({
			mouseup: function() {
				video.play();
			},
			mouseout: function() {
				video.play();
			}
		});
	} 
	// Youtube - Player
	else {
		ytplayer.seekTo((ytplayer.getDuration()/100) * ui.value);
	}
}

/**
 * playlist change and start selected video
 * @param direction
 * @param goodBrowser
 */
function changePlaylist(direction, goodBrowser) {
	 
	// find the active element
	var id = $('.activeVideoElement').attr('id');
	 
	// find the next/prev element
	var searchId = (direction === 0) ? $('#' + id).prev().attr('id') : $('#' + id).next().attr('id');
	 
	// if first/last element do nothing
	if(searchId !== undefined) {
		$('#' + id).removeClass('activeVideoElement');		
	 	$('#' + searchId).addClass('activeVideoElement');
		
		// scroll to the visible section
		var position = $('#' + searchId).position();
		$('.rightPlayer')[0].scrollTo(position.top - 120);


		// Youtube - Player
		if(goodBrowser === false) {
			start(goodBrowser, false);
		} 
		// HTML5 - Player
		else {
			var cleanId = $('.activeVideoElement').attr('id').split('vE_');
			var video = $('#video_' + cleanId[1]).val();
			swapVideo(video);
		}

	}	
}

/**
 * delayed for google chrome
 */
function delayed() {
	changePlaylist($(this).index(), true);
}

/**
 * change HTML5 - video
 * @param videoName
 */
function swapVideo(videoName) {
	
	var path = 'fileadmin/images/video/';
	var pathImage = 'typo3conf/ext/mwplayer/Resources/Public/images/';
	var video = $('#video')[0];
	
	$('.titleBar').text($(".activeVideoElement .videoTitle").text());
	$("#playIcon").attr("src", pathImage + 'pause.png');	
	
	// chrome
	if($.browser.chrome){		
		video.src = path + videoName +'.webm';
		// $('#video').attr('src', path + videoName + '.webm');
	} 
	// alle anderen HTML5 Browser
	else {
		if ( video.canPlayType("video/webm") == 'maybe' || video.canPlayType("video/webm") == 'probably' ) {
			video.src = path + videoName +'.webm';
		}
		else if ( video.canPlayType("video/ogg") == 'maybe' || video.canPlayType("video/ogg") == 'probably' ) {
			video.src = path + videoName +'.ogv';		
		} else if ( video.canPlayType("video/mp4") == 'maybe' || video.canPlayType("video/mp4") == 'probably' ) {
			video.src = path + videoName +'.mp4';
		}		
	}
	
	video.load();
	video.play();
	setTimes(true, false);

}



/**
 * video started
 * 
 * @param goodBrowser
 * @param playButton
 */
function start(goodBrowser, playButton) {
	
	var pathImage = 'typo3conf/ext/mwplayer/Resources/Public/images/';
	$("#playIcon").attr("src", pathImage + 'pause.png');
	
	// Youtube - Player
	if(goodBrowser === false) {
		var cleanId = $('.activeVideoElement').attr('id').split('vE_');
		var video = $('#fallback_' + cleanId[1]).val();
		if (ytplayer) {		
			setTimes(goodBrowser, false);
			if(playButton === true && ytplayer.getPlayerState() != -1) {
				if(ytplayer.getPlayerState() != 2) {
					ytplayer.pauseVideo();
					$("#playIcon").attr("src", pathImage + 'play.png');
				} else {
					ytplayer.playVideo();
				}	
								
			} else {
				ytplayer.loadVideoById(video, 0);
			}
		}
	} 	
	// HTML5 - Player 
	else {
		var video = $('#video')[0];
		if(playButton === true && video.readyState != 0) {
			if(video.paused) {
				$("#playIcon").attr("src", pathImage + 'pause.png');
				video.play();
			} else {
				$("#playIcon").attr("src", pathImage + 'play.png');
				video.pause();
			}
		} else {
			var cleanId = $('.activeVideoElement').attr('id').split('vE_');
			var video = $('#video_' + cleanId[1]).val();
			swapVideo(video);
		}	
	}
	
	var titleText = $(".activeVideoElement .videoTitle").text();
	$('.titleBar').text(titleText);
	
}



/**
 * video stopped
 * @param goodBrowser
 */
function stop(goodBrowser) {
	
	var pathImage = 'typo3conf/ext/mwplayer/Resources/Public/images/';
	$("#playIcon").attr("src", pathImage + 'play.png');
	$('#currentTime, #videoDuration').text('00:00');
	
	setTimes(goodBrowser, true);
	
	// Youtube - Player
	if(goodBrowser === false) {
		if (ytplayer) {
			ytplayer.pauseVideo();
			ytplayer.seekTo(0);
		}
	} 
	// HTML5 - Player
	else {
		var video = $('#video')[0];
		video.pause();
		video.currentTime = 0;
		$('#currentTime').text('00:00');
		$("#playIcon").attr("src", pathImage + 'play.png');
		$('#pastBg').css('background-color','transparent');	
	}	
}



/**
 * video soundless
 * @param goodBrowser
 */
function soundless(goodBrowser) {
	
	var path = 'typo3conf/ext/mwplayer/Resources/Public/images/';
	
	// Youtube - Player
	if(goodBrowser === false) {		
		if(ytplayer.isMuted() === false) {
			$("#soundLess").attr("src", path + 'sound_mute.png');
			$("#soundSlider").slider({value : 0});
			ytplayer.mute();
		} else {
			$("#soundLess").attr("src", path + 'sound_none.png');
			$("#soundSlider").slider({value : 100});
			ytplayer.unMute();
		}
	} 
	// HTML5 - Player
	else {
		var video = $('#video')[0];
		video.muted ? video.muted = false : video.muted = true;
		
		if(video.muted) {
			$("#soundLess").attr("src", path + 'sound_mute.png');
			$("#soundSlider").slider({value : 0});
			video.muted = true;
		} else {
			$("#soundLess").attr("src", path + 'sound_none.png');
			$("#soundSlider").slider({value : 100});
			video.volume = 1;
			video.muted = false;
		}
	}
}


/**
 * set the volume
 * @param event
 * @param ui
 */
function setVolume(event, ui, goodBrowser) {	
	var path = 'typo3conf/ext/mwplayer/Resources/Public/images/';

	// Youtube - Player
	if(goodBrowser === false) {
		ytplayer.setVolume(ui.value);
		if(ytplayer.getVolume() == 0) {
			$("#soundLess").attr("src", path + 'sound_mute.png');
			ytplayer.mute();
		} else {
			$("#soundLess").attr("src", path + 'sound_none.png');
			ytplayer.unMute();		
		}
	}
	// HTML5 - Player
	else {
		var video = $('#video')[0];
		video.volume = ui.value / 100;
		
		if(video.volume == 0) {
			video.muted = true;
			$("#soundLess").attr("src", path + 'sound_mute.png');
		} else {
			video.muted = false;
			$("#soundLess").attr("src", path + 'sound_none.png');
		}
	}
}



/**
 * set the current playing video time
 */
function setTimes(goodBrowser, stopped) {

	// Youtube - Player
	if(goodBrowser === false) {
		
		if(stopped !== true) {		
			timer = setInterval(function() {
				$('#currentTime').text(secToStr(ytplayer.getCurrentTime()));
				$('#videoDuration').text(secToStr(ytplayer.getDuration()));
			}, 500);	
		} else {
			clearTimeout(timer);
		}	
	} 
	// HTML5 - Player
	else {
	
		var video = $('#video')[0];
		
		// refresh all 0.5 sec the timeline
		video.addEventListener('play', function() {
			
			timer = setInterval(function() {
				$('#currentTime').text(secToStr(video.currentTime));
				$('#videoDuration').text(secToStr(video.duration));	
				
				$('#pastBg').css({
					'background-color' : '#FFFFFF',
					'width' : Math.floor(video.currentTime/video.duration*100) + '%'
				});
				
				var form = Math.floor((video.currentTime/video.duration*100) * 2) + 'px';
			}, 500);
		}, false);
	}
}