// JavaScript Document
var vidCtrl = new Object();
$(document).ready(function(){
						   
	var isFirefox = false;
	var html5videoCompatible = true;
	//
	if(navigator.userAgent.match(/firefox/gi) != null){isFirefox=true;}
	if(navigator.userAgent.match(/msie/gi) != null && navigator.userAgent.match(/msie 9/gi) == null){html5videoCompatible=false;}
	//
	vidCtrl.minSeekBarSize = 3;
	vidCtrl.maxSeekBarSize = 15;
	vidCtrl.maxCtrlSize = 20;
	vidCtrl.fullscreen = new Object();
	vidCtrl.volume = new Object();
	vidCtrl.volume.value = 0.5;
	vidCtrl.volume.seeking = false;
	vidCtrl.volume.focusedVideo = null;
	//
	if(html5videoCompatible){
		vidCtrl.fullscreen.mode = false;
		//
		$('body').append('<div id="vc-fullscreen"><div id="vc-fullscreen-back"></div><div id="vc-fullscreen-video"></div></div>');
		vidCtrl.fullscreen.wraper = $('#vc-fullscreen');
		vidCtrl.fullscreen.wraper.css({'position':'fixed', 'top':0, 'left':0, 'z-index':2000});
		vidCtrl.fullscreen.wraper.children('#vc-fullscreen-back').css({'position':'absolute', 'width':'100%', 'height':'100%', 'top':0, 'left':0, 'background':'#000'});
		vidCtrl.fullscreen.wraper.hide();
		//
		// EXIT FULLSCREEN EVENT
		//
		$(document).keydown(function(e){
			if(e.which == 27 && vidCtrl.fullscreen.mode){
				vidCtrl.fullscreen.focusedVideo.data('exitFullscreen')();
				vidCtrl.fullscreen.mode = false;
				vidCtrl.fullscreen.focusedVideo = null;
			}
		});
		//
		// VOLUME SEEKING EVENT
		//
		$(document).mousemove(function(e){
			if(vidCtrl.volume.focusedVideo != null && vidCtrl.volume.seeking){
				var obj = vidCtrl.volume.focusedVideo;
				//
				obj.data('setVolume')(vidCtrl.volume.focusedVideoVolumeBar, e);
			}
		});
		//
		// VOLUME BAR HIDE EVENT
		//
		$(document).mouseup(function(e){
			if(vidCtrl.volume.focusedVideo != null){
				var obj = vidCtrl.volume.focusedVideo;
				//
				if(e.target != obj.find('.vc-volume-bar').get(0) && e.target != obj.find('.vc-volume-value').get(0)){
					obj.data('hideVolume')();
				}
				vidCtrl.volume.seeking = false;
				//
				vidCtrl.volume.focusedVideo = null;
			}
		});
		//
		var videos = $('video');
		videos.each(function(){
			initVideoControls(this);
		});
	}
});
function initVideoControls(video){
	//
	$(video).removeAttr('controls');
	//
	$(video).wrap('<div class="vc-box"></div>');
	var vcBox = $(video).parent();
	vcBox.css({'position':'relative'});
	//
	var hideControlDelay = null;
	//
	// VIDEO CONTROLS
	//
	vcBox.append('<div class="vc-controls"></div>');
	var vcControls = vcBox.children('.vc-controls');
	vcControls.css({'z-index':1000, 'position':'absolute', 'bottom':-vidCtrl.minSeekBarSize-3, 'left':0, 'right':0, 'width':'auto', 'opacity':0.8});
	//
	// SEEK BAR
	//
	vcControls.append('<div class="vc-seek-bar"></div>');
	var vcSeekBar = vcControls.children('.vc-seek-bar');
	//
	vcSeekBar.append('<div class="vc-buffer"></div>');
	vcSeekBar.append('<div class="vc-progress"></div>');
	vcSeekBar.append('<div class="vc-seek-time"></div>');
	// CSS
	// seek bar
	vcSeekBar.css({'position':'relative', 'width':'auto', 'height':vidCtrl.maxSeekBarSize, 'left':0, 'right':0, 'background':'#111', 'border':'#666 solid 1px', 'z-index':1001});
	// load buffer
	var vcBuffer = vcSeekBar.children('.vc-buffer');
	vcBuffer.css({'position':'absolute', 'width':'0%','height':'100%', 'top':0,'left':0, 'background':'#666', 'z-index':1});
	// play progress
	var vcProgress = vcSeekBar.children('.vc-progress');
	vcProgress.css({'position':'absolute', 'width':'0%', 'height':'100%', 'top':0,'left':0, 'background':'#fff', 'z-index':2});
	// seek time
	var vcSeekTime = vcSeekBar.children('.vc-seek-time');
	vcSeekTime.css({'position':'absolute', 'width':30, 'height':10, 'top':-20,'left':0, 'background-color':'#000', 'border-bottom':'#666 solid 2px', 'padding':2, 'color':'#fff', 'text-align':'center', 'font-size':10, 'z-index':3});
	vcSeekTime.hide();
	//
	//	BUTTONS
	//
	vcControls.append('<div class="vc-button-bar"></div>');
	var vcButtonBar = vcControls.children('.vc-button-bar');
	//
	vcButtonBar.append('<div class="vc-play-pause vc-button"></div>');
	vcButtonBar.append('<div class="vc-stop vc-button"></div>');
	vcButtonBar.append('<div class="vc-time"></div>');
	vcButtonBar.append('<div class="vc-volume vc-button"></div>');
	// CSS
	// button bar
	vcButtonBar.css({'position':'relative', 'width':'auto', 'height':vidCtrl.maxCtrlSize, 'left':0, 'right':0, 'background':'#666', 'border-top':'#000 solid 1px', 'z-index':1002});
	// play-pause
	var buttonPlayPause = vcButtonBar.children('.vc-play-pause');
	buttonPlayPause.css({'width':10, 'height':10, 'background':'#666 url(/_lib/_js/vc-images/play-pause-stop.png) -3px -3px no-repeat'});
	// stop
	var buttonStop = vcButtonBar.children('.vc-stop');
	buttonStop.css({'width':10, 'height':10, 'background':'#666 url(/_lib/_js/vc-images/play-pause-stop.png) -3px -43px no-repeat'});
	// time
	var buttonTime = vcButtonBar.children('.vc-time');
	buttonTime.css({'width':65, 'height':10, 'float':'left', 'margin-top':4, 'margin-right':5, 'color':'#fff', 'text-align':'right', 'font-size':10});
	buttonTime.html('00:00/00:00');
	//
	// volume
	var buttonVolume = vcButtonBar.children('.vc-volume');
	buttonVolume.css({'width':10, 'height':10, 'position':'relative', 'background':'#666 url(/_lib/_js/vc-images/volume.png) -3px -3px no-repeat'});
	// volume bar
	buttonVolume.append('<div class="vc-volume-bar"></div>');
	var buttonVolumeBar = buttonVolume.children('.vc-volume-bar');
	buttonVolumeBar.css({'width':11, 'height':0, 'position':'absolute', 'bottom':14,'left':1, 'background-color':'#000', 'border':'#aaa none 1px', 'overflow':'hidden', 'border-radius':4});
	// volume value
	buttonVolumeBar.append('<div class="vc-volume-value"></div>');
	var buttonVolumeValue = buttonVolumeBar.children('.vc-volume-value');
	buttonVolumeValue.css({'width':7, 'height':'50%', 'position':'absolute', 'bottom':0,'left':2, 'background-color':'#fff'});
	video.volume=0.5;
	//
	if($(video).data('fullscreen') == 'yes'){
		// fullscreen
		vcButtonBar.append('<div class="vc-fullscreen vc-button"></div>');
		var buttonFull = vcButtonBar.children('.vc-fullscreen');
		buttonFull.css({'width':10, 'height':10, 'background':'#666 url(/_lib/_js/vc-images/fullscreen.png) -3px -3px no-repeat'});
	}
	//
	vcButtonBar.children('.vc-button').css({'float':'left','padding':'2px', 'margin':'3px', 'border-radius':4});
	vcButtonBar.children('.vc-button').mouseover(function(){$(this).css({'background-color':'#000'});});
	vcButtonBar.children('.vc-button').mouseout(function(){$(this).css({'background-color':'#666'});});
	//
	// VIDEO EVENTS //
	//
	// video LOADING EVENTS
	//
	var durationString;
	video.addEventListener('loadedmetadata',function(e){											 
		durationString = formatTime(video.duration);
		buttonTime.html(writeTime(0));
		vcBuffer.css('width',loadedPerc()+'%');
	}, false);
	video.addEventListener('progress',function(e){
		vcBuffer.css('width',loadedPerc()+'%');
	}, false);
	video.addEventListener('suspend',function(e){
		vcBuffer.css('width',loadedPerc()+'%');
	}, false);
	function loadedPerc(){
		if(video.buffered.length>0){
			return 100*video.buffered.end(0)/video.duration;
		}
	}
	video.addEventListener('timeupdate',function(e){
		buttonTime.html(writeTime(video.currentTime));
		vcProgress.css('width',(video.currentTime/video.duration)*100+'%');
	}, false);
	//
	// video CONTROL EVENTS
	//
	vcBox.mouseover(function(e){
		vcButtonBar.css('border-top-style-top','solid');
		if(vcSeekBar.height()<vidCtrl.maxSeekBarSize && vcBox.has(e.relatedTarget).length == 0 && !vidCtrl.fullscreen.mode){
			showControls(e);
		}
	});
	vcBox.mouseout(function(e){
		vcButtonBar.css('border-style-top','none');
		if(vcSeekBar.height()>vidCtrl.minSeekBarSize && vcBox.has(e.relatedTarget).length == 0 && !vidCtrl.fullscreen.mode){
			hideControls(e);
		}
	});
	vcBox.mousemove(function(e){
		if(vidCtrl.fullscreen.mode){
			vcButtonBar.css('border-style-top','solid');
		}
		if(vidCtrl.fullscreen.mode && hideControlDelay == null){
			showControls(e);
		}else if(vidCtrl.fullscreen.mode){
			clearTimeout(hideControlDelay);
			hideControlDelay = setTimeout(function(){hideControls(e);}, 1000);
		}
	});
	function showControls(e){
		vcSeekBar.animate({'height':vidCtrl.maxSeekBarSize}, 200, function(){
			if(vidCtrl.fullscreen.mode && hideControlDelay == null){
				hideControlDelay = setTimeout(function(){hideControls(e);}, 1000);
			}
		});
		vcButtonBar.animate({'height':vidCtrl.maxCtrlSize}, 200);
	}
	function hideControls(e){
		vcButtonBar.css('overflow','hidden');
		vcSeekBar.animate({'height':vidCtrl.minSeekBarSize}, 200);
		vcButtonBar.animate({'height':0}, 200, function(){
			vcButtonBar.css('overflow','hidden');
			clearTimeout(hideControlDelay);
			hideControlDelay = null;
		});
	}
	//
	video.addEventListener('ended',function(e){
		video.currentTime = 0;
		togglePlay();
	}, false);
	//
	// play-pause-stop
	//
	buttonPlayPause.click(function(){
		togglePlay();
	});
	$(video).click(function(){
		togglePlay();
	});
	function togglePlay(){
		if(video.paused){
			video.play();
			buttonPlayPause.css('background-position','-3px -23px');
		}else{
			video.pause();
			buttonPlayPause.css('background-position','-3px -3px');
		}
	}
	buttonStop.click(function(){
		video.pause();
		buttonPlayPause.css('background-position','-3px -3px');
		video.currentTime=0;
	});
	//
	// volume
	//
	buttonVolume.mouseover(function(){
		if(vcSeekBar.height() == vidCtrl.maxSeekBarSize && buttonVolumeBar.height()==0){
			vcButtonBar.css('overflow','visible');
			buttonVolumeBar.css('border-style','solid');
			buttonVolumeBar.animate({'height':100}, 200);
		}
	});
	buttonVolume.mouseout(function(e){
		if(e.relatedTarget != buttonVolumeBar.get(0) && e.relatedTarget != buttonVolumeValue.get(0) && e.relatedTarget != buttonVolume.get(0) && !vidCtrl.volume.seeking){
			hideVolume();
		}
	});
	//
	// volume mute
	buttonVolume.click(function(e){
		if(e.target == buttonVolume.get(0)){
			video.muted = !video.muted;
			if(video.muted){
				buttonVolume.css('background-position', ' -3px -23px');
			}else{
				buttonVolume.css('background-position', ' -3px -3px');
			}
		}
	});
	vcBox.data('hideVolume', hideVolume);
	function hideVolume(){
		buttonVolumeBar.animate({'height':0}, 200, function(){
			vcButtonBar.css('overflow','hidden'); buttonVolumeBar.css('border-style','none');
		});
		
	}
	//
	// volume seek
	buttonVolumeBar.mousedown(function(e){
		vidCtrl.volume.seeking = true;
		setVolume(this, e);
		vidCtrl.volume.focusedVideo = vcBox;
		vidCtrl.volume.focusedVideoVolumeBar = this;
		// prevent selection
		document.onselectstart= function () {return false;};
		return false;
	});
	//
	vcBox.data('setVolume', setVolume);
	function setVolume(obj, e){
		var newVolume = 100-getRelativePosition(obj, e).top;
		if(newVolume >100){newVolume=100;}
		if(newVolume <0){newVolume=0;}
		buttonVolumeValue.css('height',newVolume);
		video.volume = newVolume/100;
	}
	//
	//	video seek
	// 
	vcSeekBar.mousedown(function(e){
		setPlayTime(this, e);
		showSeekTime(this,e);
	});
	vcSeekBar.mousemove(function(e){
		vcSeekTime.show();
		showSeekTime(this,e);
	});
	vcSeekBar.mouseout(function(e){
		vcSeekTime.hide();
	});
	function setPlayTime(obj, e){
		var wdth = vcSeekBar.width();
		var perc = getRelativePosition(obj, e).left/vcSeekBar.width();
		if(perc > 1){perc=1;}
		if(perc <0){perc=0;}
		vcProgress.css('width',perc*100+'%');
		video.currentTime = video.duration*perc;
	}
	function showSeekTime(obj, e){
		var wdth = vcSeekBar.width();
		var perc = getRelativePosition(obj, e).left/vcSeekBar.width();
		if(perc > 1){perc=1;}
		if(perc <0){perc=0;}
		vcSeekTime.html(formatTime(video.duration*perc));
		vcSeekTime.css('left',perc*wdth-15);
	}
	//
	// FULLSCREEN
	//
	if(buttonFull != null){
		buttonFull.click(function(e){
			vidCtrl.fullscreen.mode = !vidCtrl.fullscreen.mode;
			if(vidCtrl.fullscreen.mode){
				var currentState = video.paused;
				vidCtrl.fullscreen.focusedVideo = vcBox;
				//
				vidCtrl.fullscreen.wraper.show();
				vidCtrl.fullscreen.wraper.width($(window).width());
				vidCtrl.fullscreen.wraper.height($(window).height());
				//
				vcBox.wrap('<div id="vc-normalscreen"></div>');
				//
				vidCtrl.fullscreen.wraper.children('#vc-fullscreen-video').append(vcBox);
				//
				vidCtrl.fullscreen.videoNormalSize = {'width':$(video).width(), 'height':$(video).height()};
				//
				$(video).width($(window).width());
				$(video).height($(window).height()-vidCtrl.minSeekBarSize);
				buttonFull.css({'background-position':'-3px -23px', 'background-color':'#666'});
				hideControlDelay = setTimeout(function(){hideControls(e);}, 1000);
				if(!currentState){video.play();}
			}else{
				exitFullscreen();
			}
		});
	}
	vcBox.data('exitFullscreen', exitFullscreen);
	function exitFullscreen(){
		var currentState = video.paused;
		$('#vc-normalscreen').append(vcBox);
		vidCtrl.fullscreen.wraper.hide();
		vcBox.unwrap();
		//
		$(video).width(vidCtrl.fullscreen.videoNormalSize.width);
		$(video).height(vidCtrl.fullscreen.videoNormalSize.height);
		buttonFull.css({'background-position':'-3px -3px', 'background-color':'#666'});
		clearTimeout(hideControlDelay);
		hideControlDelay = null;
		if(!currentState){video.play();}
	}
	//
	// get mouse event relative position
	function getRelativePosition(obj, e){
		var objPos = $(obj).offset();
		var evPos = {'left':e.pageX, 'top':e.pageY};
		return {'left':(evPos.left - objPos.left), 'top':(evPos.top - objPos.top)};
	}
	//
	// time functions
	function writeTime(time){
		return formatTime(time)+' / '+durationString;
	}
	function formatTime(time){
		var m = Math.floor(time/60);
		var s = Math.floor(time%60);
		if(m<10){m = '0'+m}
		if(s<10){s = '0'+s}
		return m+':'+s;
	}
}