// Méthode ajoutée à Jquery pour trouver la position d'un élément:
jQuery.fn.extend({
   videoFindPos : function() {
       obj = jQuery(this).get(0);
       var curleft = obj.offsetLeft || 0;
       var curtop = obj.offsetTop || 0;
       while (obj = obj.offsetParent) {
                curleft += obj.offsetLeft
                curtop += obj.offsetTop
       }
       return {x:curleft,y:curtop};
   }
});

/**
 * Plugin vidéo
 */
(function($) {
	/**
	 * Définition du plugin
	 *
	 * @param	<array>	Liste des paramètres.
	 */
    $.fn.video = function(pOptions) {
		// Paramètres par défaut:
		var defaults = {
			// Largeur de la vidéo :
            width: 640,

			// Hauteur de la vidéo :
            height: 480,

			// Indique la lecture automatique:
			autoplay: true,

			// Le poster (pour quand l'autoplay est désactivé)
			poster: false,

			// Si on doit cacher la barre de menu:
			hideMenuBar: true,

			// Le fichier à jouer (sans l'extension)
			filename: 'videos/sample',

			// Pour la version flash : chemin d'accès vers le fichier XML de configuration
			pathConfig: '/video/flash/_config/',

			// Pour la version flash : chemin d'accès vers le dossier des images de contrôles de la visionneuse
			pathImages: '/video/images/',

			// Pour la version flash : chemin d'accès vers le répertoire des vidéos
			pathVideoDir: '/video/',

			// CSS : chargement dynamtique d'un fichier CSS
			css: '',

			// styleFlash: pour charger un XML de style différent à la visionneuse flash
			styleFlash: ''
        };

		// Paramètres à utiliser:
        var opts = $.extend(defaults, pOptions);

		var _basicParams = new Array();

		// Durée de la vidéo
		var _duree = 0;

		// Permet de gérer l'avancement dans la barre de son:
		var _followMouse = false;

		// Permet de gérer le volume au passage de la souris:
		var _followSound = false;

		// Longueur de la jauge de temps:
		var _longueurJauge = 0;

		// Indique si on a déjà enclenché les évènements pouvant cacher la barre de menu.
		var _setupHideMenuBar = false;

		// La vidéo:
		var _this = $(this);

		// Compteur de temps qui cache de menu:
		var _timer = 0;

		/**
		 * Permet de vérifier si le navigateur supporte la balise video
		 *
		 * @return bool
		 */
		function canPlayVideo()
		{
			if(document.createElement('video').canPlayType)
			{
				return true;
			}

			return false;
		}

		/**
		 * Convertit un temps en secondes au format mm:ss
		 */
		function secondsToTime(pTime)
		{
			// Arrondi de la durée:
			pTime = Math.round(pTime);

			// Calcul du nombre de minutes:
			var minutes = Math.floor(pTime / 60);

			if(minutes < 10)
			{
				minutes = '0'+minutes;
			}

			// Calcul du nombre de secondes:
			var secondes = pTime % 60;

			if(secondes < 10)
			{
				secondes = '0'+secondes;
			}

			return minutes+':'+secondes;
		}

		/**
		 * Affiche la temps de vidéo déjà passé, et la durée au besoin:
		 */
		function displayActualTime()
		{
			// On regarde si le fichier se joue:
			if(_this.find('.play_pause').hasClass('pause'))
			{
				var vid = getVideoElement();

				// if((vid.readyState == 0) && !canPlayVideo())
				if(vid.readyState == 0)
				{
					displayFlashVideo();
				}
			}

			// Si la durée est vide, on tente de la renseigner:
			if(_this.find('.duree').text() == '00:00')
			{
				var duration = _this.find('video').attr('duration');

				_duree = duration;

				if(!isNaN(duration))
				{
					duration = secondsToTime(duration);
					
					_this.find('.duree').text(duration);
				}
			}

			// Gestion du temps écoulé:
			var now = _this.find('video').attr('currentTime');

			// Calcul de l'emplacement du palet en fonction du temps écoulé:
			var decalage = (_longueurJauge / _duree) * now;

			_this.find('.palet').css('width', decalage+'px');

			now = secondsToTime(now);

			_this.find('.current_time').text(now);

			// On regarde si on est à la fin de la vidéo:
			var myVideo = getVideoElement();

			if((myVideo) && (myVideo.ended == true))
			{
				_this.find('.palet').css('width', '100%');
				_this.find('.play_pause').removeClass('pause').addClass('play');
			}

			// Prochain appel à la fonction:
			setTimeout(displayActualTime, 250);
		}

		/**
		 * Modification du volume (nombre réel de 0 à 1)
		 *
		 * @param <float> volume désiré
		 */
		function setVolume(pVolume)
		{
			if(isNaN(pVolume))
			{
				pVolume = pVolume.attr('id').replace(_this.attr('id')+'_batonnet_', '');

				pVolume = pVolume / 10;
			}

			var i = 0.1;

			_this.find('.sound .batonnet').each(function(){
				if(i <= pVolume)
				{
					$(this).addClass('active');
				}
				else
				{
					$(this).removeClass('active');
				}

				i += 0.1;
			});

			var myVideo = getVideoElement();
			myVideo.volume = pVolume;
		}

		function setPositionByCursor(pEvent)
		{
			// On prend l'emplacement de la jauge:
			var coords = _this.find('.fond_jauge').videoFindPos();

			// Calcul du nouveau décalage du curseur:
			var decalage = pEvent.pageX - coords.x;

			// On regarde si on est pas "hors champ":
			if(decalage > _this.find('.fond_jauge').width())
			{
				decalage = _this.find('.fond_jauge').width();
			}

			// On déplace le palet:
			_this.find('.palet').css('width', decalage+'px');

			// Maintenant, synchronisation avec le passage dans la vidéo:
			var myVideo = getVideoElement();
			var video_duree = myVideo.duration;

			// MAJ pour la balise video:
			var currentTime = (video_duree / _this.find('.fond_jauge').width()) * decalage;

			myVideo.currentTime = currentTime;
		}

		/**
		 * Renvoie l'élément vidéo.
		 */
		function getVideoElement()
		{
			var div = document.getElementById(_this.attr('id'));
			return div.getElementsByTagName('video')[0];
		}

		/**
		 * Sortie du plein écran
		 */
		function exitFullscreen()
		{
			_this.find('.screen.fullscreen').show();
			_this.find('.screen.normalscreen').hide();

			_this.find('.video-container').css({
				'position'			: _basicParams['position-container'],
				'width'				: opts['width']+'px',
				'height'			: opts['height']+'px',
				'z-index'			: 'auto'
			});

			if(_this.find('video').css('display') == 'block')
			{
				_this.find('.video-container').css({
					'background'	: 'none'
				});
			}

			_this.find('video').css({
				'position'	: _basicParams['position-video'],
				'width'		: opts['width']+'px',
				'height'	: opts['height']+'px',
				'z-index'	: 'auto'
			}).removeClass('fullscreen');

			var tmpH = opts['height'] - _this.find('.video-controls').height();
			
			_this.find('.video-controls').css({
				'position'		: _basicParams['position-controls'],
				'top'			: tmpH+'px',
				'left'			: '0px',
				'margin'		: '0 0 0 0',
				'padding'		: '0 0 0 0',
				'z-index'		: 'auto'
			}).removeClass('mode_fullscreen');
		}

		/**
		 * Cache automatiquement la barre de menu.
		 */
		function hideMenuBar()
		{
			_this.find('.video-controls').fadeOut('slow');
		}

		function setupHidingMenuBar()
		{
			_this.find('video').mousemove(function(){
				_this.find('.video-controls').fadeIn('fast');
				clearTimeout(_timer);
				_timer = setTimeout(hideMenuBar, 3000);
			});

			_this.find('.video-controls').hover(function(){
				clearTimeout(_timer);
			}, function(){
				_timer = setTimeout(hideMenuBar, 3000);
			});
		}

		/**
		 * Affiche la visionneuse flash.
		 */
		function displayFlashVideo()
		{
			var vid = new SWFObject('/web/public/_module_pelicule/flash/video.swf', 'my_video_'+_this.attr('id'), opts.width, (opts.height+27), '9.0', '#FFFFFF');
			vid.addParam('allowFullScreen', 'true');
			vid.addParam('wmode', 'window');
			vid.addVariable('configPath', opts.pathConfig);
			vid.addVariable('imagesPath', opts.pathImages);
			vid.addVariable('filename', opts.filename+'.mp4');
			vid.addVariable('width', opts.width);
			vid.addVariable('height', opts.height);
			vid.addVariable('styleFlash', opts.styleFlash);

			if((opts.autoplay == true) || canPlayVideo())
			{
				vid.addVariable('autoplay', 'true');
			}

			if(opts.poster != false)
			{
				vid.addVariable('poster', opts.poster);
			}

			if(opts.hideMenuBar == true)
			{
				vid.addVariable('hideMenuBar', 'true');
			}

			vid.write(_this.attr('id'));
		}

		// Création du code HTML pour afficher la vidéo:
		// Version HTML5:
		if(canPlayVideo() && (1 == 2))
		{
			// Chargement d'une CSS dynamique au besoin:
			if(opts.css != '')
			{
				// Création de l'id CSS:
				var classCSS = opts.css;
				classCSS = classCSS.split('/');
				classCSS = classCSS.pop();
				classCSS = classCSS.toLowerCase();
				classCSS = classCSS.replace('.css', '');
				
				if($('#jquery-video-css-'+classCSS).length > 0)
				{
					$('#jquery-video-css-'+classCSS).attr('href', opts.css);
				}
				else
				{
					$('head').append('<link rel="stylesheet" id="jquery-video-css-'+classCSS+'" type="text/css" href="'+opts.css+'" />');
				}
			}

			// Génération du code HTML de la vidéo
			var str = '<div class="video-container">';
				str += '<video width="'+opts.width+'" height="'+opts.height+'" autobuffer';
				if(opts.autoplay == true)
				{
					str += ' autoplay';
				}

				if(opts.css != '')
				{
					str += ' class="'+classCSS+'"';
				}

				str += '>';
					str += '<source src="'+opts.filename+'.ogv" type=\'video/ogg; codecs="theora, vorbis"\' />';
					str += '<source src="'+opts.filename+'.ogg" type=\'video/ogg; codecs="theora, vorbis"\' />';
					str += '<source src="'+opts.filename+'.mp4" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' />';
				str += '</video>';
			str += '</div>';
			// Génération du code HTML de la barre de contrôles:
			str += '<div class="video-controls clearfix">';
				str += '<p class="play_pause ';
				if(opts.autoplay == true)
				{
					str += 'pause';
				}
				else
				{
					str += 'play';
				}
				str += '">Lire / Pause</p>';
				str += '<div class="current_time">00:00</div>';
				str += '<div class="jauge_temps">';
					str += '<div class="palet"></div>';
					str += '<div class="fond_jauge"></div>';
				str += '</div>';

				str += '<div class="duree">00:00</div>';
				str += '<div class="mute mute_off"></div>';
				str += '<div class="mute mute_on"></div>';
				str += '<div class="sound">';
					var i = 1;

					while(i <= 10)
					{
						str += '<div class="batonnet" id="'+_this.attr('id')+'_batonnet_'+i+'"></div>';

						i++;
					}
				str += '</div>';
				/*
str += '<div class="screen fullscreen"></div>';
				str += '<div class="screen normalscreen"></div>';
*/
			str += '</div>';
			
			$(this).html(str);

			if((opts.hideMenuBar == true) && (opts.autoplay == true))
			{
				setupHidingMenuBar();
			}

			// Si pas d'autoplay et un poster, on l'affiche:
			if((opts.autoplay == false) && (opts.poster != false))
			{
				_this.find('video').hide();
				
				_this.find('.video-container').css({
					'height'				: opts.height,
					'width'					: opts.width,
					'background'			: 'none',
					'background-image'		: 'url('+opts.poster+')',
					'background-repeat'		: 'no-repeat',
					'background-position'	: 'center center'
				});
			}

			_this.find('.video-controls').css({
				'width'		: opts.width,
				'z-index'	: 'auto'
			});

			_this.find('.fond_jauge').css({
				'width' : (opts.width - 260)
			});

			_this.find('.video-controls .screen').css({
				'margin-left' : (opts.width - 30)
			});

			_this.find('.video-controls .sound').css({
				'margin-left' : (opts.width - 70)
			});

			_this.find('.video-controls .mute').css({
				'margin-left' : (opts.width - 102)
			});

			_this.find('.video-controls .duree').css({
				'margin-left' : (opts.width - 142)
			});

			setVolume(0.5);

			// Récupération de la longueur de la jauge de temps:
			_longueurJauge = _this.find('.jauge_temps').css('width').replace('px', '');
			
			setTimeout(displayActualTime, 1000);

			// Gestion de l'entrée/sortie du fullscreen:
			_this.find('.screen').click(function(){
				$(this).hide();
				
				if($(this).hasClass('fullscreen'))
				{
					_this.find('.screen.normalscreen').show();

					_basicParams['position-container'] = _this.find('.video-container').css('position');
					_basicParams['position-controls'] = _this.find('.video-controls').css('position');
					_basicParams['position-video'] = _this.find('video').css('position');

					// Récupération de l'ancienne position de la barre de contrôles:
					var posControls = _this.find('.video-controls').videoFindPos();
					_basicParams['xControls'] = posControls.x;
					_basicParams['yControls'] = posControls.y;

					var decalage = _this.find('.video-controls').width() / 2;

					_this.find('.video-controls').css({
							'position'		: 'fixed',
							'top'			: '100%',
							'left'			: '50%',
							'margin-top'	: '-27px',
							'margin-left'	: '-'+decalage+'px',
							'z-index'		: '5100'
						}).addClass('mode_fullscreen');
					
					_this.find('.video-container').css({
							'position'			: 'fixed',
							'top'				: '0',
							'left'				: '0',
							'width'				: '100%',
							'height'			: '100%',
							'z-index'			: '4999',
							'background-color'	: '#000000'
					});

					_this.find('video').css({
							'position'	: 'fixed',
							'top'		: '0',
							'left'		: '0',
							'width'		: '100%',
							'height'	: '100%',
							'z-index'	: '5000'
						}).addClass('fullscreen');
				}
				else
				{
					exitFullscreen();
				}
			});

			/*
			  On surveille en mode fullscreen :
			  - l'appui sur la touche "Echap" pour la sortie du mode fullscreen.
			  - l'appui sur la touche "Espace" pour gérer le play/pause.
			 */
			$(document).keydown(function(e){
				if(_this.find('video').hasClass('fullscreen'))
				{
					if(e.keyCode == 27)
					{
						exitFullscreen();
					}
					else if(e.keyCode == 32)
					{
						_this.find('.play_pause').trigger('click');
					}
				}
			});

			// Clic pour activer le déplacement du palet:
			_this.find('.fond_jauge,.palet').mousedown(function(event){
				_followMouse = true;

				setPositionByCursor(event);
			});

			// Fin du clic, fin du déplacement:
			$(document).mouseup(function(event){
				_followMouse = false;
			});

			$(document).mousemove(function(event){
				if(_followMouse == true)
				{
					setPositionByCursor(event);
				}
			});

			// Clic sur la barre de son:
			_this.find('.sound').mousedown(function(){
				_followSound = true;
			});

			// Fin du clic sur la barre de son:
			_this.find('.sound').mouseup(function(){
				_followSound = false;
			});

			// Clic sur un batonnet de son:
			_this.find('.batonnet').click(function(){
				setVolume($(this));
			});

			// Déplacement sur la barre de son:
			_this.find('.batonnet').hover(function(){
				if(_followSound == true)
				{
					setVolume($(this));
				}
			});

			// Clic sur le bouton de pause/lecture:
			_this.find('.play_pause').click(function(){
				// Récupération de la vidéo:
				var myVideo = getVideoElement();

				// On on est en train de lire la vidéo:
				if($(this).hasClass('pause'))
				{
					$(this).removeClass('pause').addClass('play');
					
					myVideo.pause();
				}
				else
				{
					$(this).removeClass('play').addClass('pause');

					if((opts.poster != false) && !_this.find('video').hasClass('fullscreen'))
					{
						_this.find('.video-container').css({
							'background' : 'none'
						});

						_this.find('video').show();
					}

					if((opts.autoplay == false) && (opts.hideMenuBar == true) && (_setupHideMenuBar == false))
					{
						setupHidingMenuBar();
					}
					
					myVideo.play();
				}
			});

			_this.find('.mute').click(function(){
				$(this).hide();

				if($(this).hasClass('mute_off'))
				{
					$('.mute_on').show();

					setVolume(0);
				}
				else
				{
					$('.mute_off').show();

					setVolume(0.5);
				}
			});
		} // Sinon, utilisation de flash:
		else
		{
			displayFlashVideo();
		}

        return $(this);
    };
})(jQuery);

function seeRes(data)
{
	alert(data);
}