/*!
 * Media Element jQuery plugin
 * http://mediaelementjs.com/
 *
 * Creates a controller bar for HTML5 <video> tags
 * and falls back to a Flash player or Silverlight player for browsers that
 * do not support <video> or cannot play the video type.
 * Mostly designed for H.264, but can also play Ogg, WebM, FLV, WMV, ACC and MP3
 *
 * Copyright 2010, John Dyer
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Version: 1.0.2
 */

// TODO:
// - make volume be event driven, remember setting (cookie, startup)
// - poster for <audio>

(function ($) {

	var v = document.createElement('video');
	var ua = navigator.userAgent;
	
	// native fullscreen (Safari only, Chrome fails)
	var hasNativeFullScreen = (typeof v.webkitEnterFullScreen !== 'undefined');
	if (ua.match('Chrome')) hasNativeFullScreen = false;

	// default player values
	var mediaElementPlayerDefaults = {
		  defaultVideoWidth: 480   	// default if the <video width> is not specified
		, defaultVideoHeight: 270  	// default if the <video height> is not specified
		, videoWidth: -1						// if set, overrides <video width> 
		, videoHeight: -1						// if set, overrides <video height>
		, audioWidth: 300						// width of audio player
		, audioHeight: 30						// height of audio player
		, messages: {
				  start: "Click to Start"
				, loading: "Loading"				  
				, paused: "Paused"
				, error: "Error"
				, ended: "Ended"				
		}		
	}

	// utility methods
	function formatTime(seconds) {
		seconds = Math.round(seconds);
		minutes = Math.floor(seconds / 60);
		minutes = (minutes >= 10) ? minutes : "0" + minutes;
		seconds = Math.floor(seconds % 60);
		seconds = (seconds >= 10) ? seconds : "0" + seconds;
		return minutes + ":" + seconds;
	}

	var playerIndex = 0;

	// wraps a MediaElement object in player controls
	function MediaElementPlayer($media, o) {

		$media = $($media);
		var options = $.extend(true,{},mediaElementPlayerDefaults,o);

		var isVideo = $media[0].tagName.toLowerCase() == 'video';
		var id = 'mep_' + playerIndex++;

		// ipad/iphone test
		var u = navigator.userAgent;
		var isiPad = (u.match(/iPad/i) != null);
		var isiPhone = (u.match(/iPhone/i) != null);
		var isAndroid = (u.match(/Android/i) != null);

		if (isiPad || isiPhone) {
			// add controls and stop
			$media.attr('controls', 'controls');
			// fix Apple bug
			$media.removeAttr('poster');

			// override Apple's autoplay override for iPads
			if (isiPad && $media[0].getAttribute('autoplay') !== null) {
				$media[0].load();
				$media[0].play();
			}

			// don't do the rest
			return;
		} else if (isAndroid && isVideo) {

			// Andriod is better off with native controls (like iOS)
			$media.attr('controls', 'controls');
			return;
			
		} else {

			// remove native controls and use MEP
			$media.removeAttr('controls');
		}

		var html = $(
		'<div id="' + id + '" class="mep-container">\
			<div class="mep-mediaelement">\
			</div>\
			<div class="mep-poster">\
				<img />\
			</div>\
			<div class="mep-overlay">\
				<div class="mep-overlay-message"></div>\
			</div>\
			<div class="mep-controls">\
				<div class="mep-playpause-button mep-play"><span></span></div>\
				<div class="mep-time-rail">\
					<span class="mep-time-total">\
						<span class="mep-time-loaded"></span>\
						<span class="mep-time-current"></span>\
						<span class="mep-time-handle"></span>\
					</span>\
				</div>\
				<div class="mep-time">\
					<span class="mep-currenttime"></span>\
					<span>|</span>\
					<span class="mep-duration"></span>\
				</div>\
				<div class="mep-volume-button mep-mute">\
					<span></span> \
					<div class="mep-volume-slider">\
						<div class="mep-volume-rail">\
							<div class="mep-volume-handle"></div>\
						</div>\
					</div>\
				</div>\
				<div class="mep-fullscreen-button"><span></span></div>\
			</div>\
			<div class="mep-clear"></div>\
		</div>');

		// insert and switch position
		$media.before(html);
		var container = $('#' + id);

		// put the <video> tag in the right spot
		container.find('.mep-mediaelement').append($media);

		// move any skins up to the container
		container.addClass($media[0].className);

		var poster = container.find('.mep-poster');
		var posterImg = poster.find('img');
		poster.hide();

		// append a poster
		var posterUrl = $media.attr('poster');

		if (posterUrl !== '') {			
			posterImg.attr('src',posterUrl);
			poster.show();
		}

		// create overlay
		var overlay = container.find('.mep-overlay');
		var overlayMessage = container.find('.mep-overlay-message');
		if ($media[0].getAttribute('autoplay') !== null)
			showMessage(options.messages.loading);
		else
			showMessage(options.messages.start);		

		// set container size to video size
		function setPlayerSize(width,height) {
			
			// ie9 appears to need this (jQuery bug?)
			width = parseInt(width);
			height = parseInt(height);
			
			container
				.width(width)
				.height(height);

			overlay
				.width(width)
				.height(height);	
				
			posterImg
				.height(height)
				.width(width);								
		}
		
		var width = 0;
		var height = 0;
				
		if (isVideo) {			
			// priority = videoWidth (forced), width attribute, defaultVideoWidth		
			width = (options.videoWidth > 0) ? options.videoWidth : ($media[0].getAttribute('width') !== null) ? $media.attr('width') : options.defaultVideoWidth;
			height = (options.videoHeight > 0) ? options.videoHeight : ($media[0].getAttribute('height') !== null) ? $media.attr('height') : options.defaultVideoHeight;				
		} else {
			width = options.audioWidth;
			height = options.audioHeight;
		}
		
		setPlayerSize(width, height);
		
		// controls bar
		var controls = container.find('.mep-controls')
		var isControlsVisible = true;

		if (isVideo) {
			// show/hide controls
			container
				.bind('mouseenter', function () { controls.fadeIn(200); setRailSize(); isControlsVisible = true; })
				.bind('mouseleave', function () { controls.fadeOut(200); isControlsVisible = false; });
		}

		function showMessage(text) {
			if (isVideo) {
				overlayMessage.html(text);
				//overlay.show();
				overlay.css('visibility','visible');
			}
		}
		function hideMessage() {
			//overlay.hide();
			overlay.css('visibility','hidden');
		}


		// find controls
		var playpause = controls.find('.mep-playpause-button');
		var fullscreen = controls.find('.mep-fullscreen-button');
		if (!isVideo)
			fullscreen.remove();

		var time = controls.find('.mep-time');
		var currentTime = controls.find('.mep-currenttime').html('00:00');
		var duration = controls.find('.mep-duration').html('00:00');

		var mute = controls.find('.mep-volume-button');
		var volumeSlider = controls.find('.mep-volume-slider');
		var volumeRail = controls.find('.mep-volume-rail');
		var volumeHandle = controls.find('.mep-volume-handle');

		var timeRail = controls.find('.mep-time-rail');
		var timeCurrent = timeRail.find('.mep-time-current').width(0);
		var timeLoaded = timeRail.find('.mep-time-loaded').width(0);
		var timeTotal = timeRail.find('.mep-time-total');
		var timeHandle = controls.find('.mep-time-handle');

		function setRailSize() {
			var usedWidth = playpause.outerWidth(true) +
												time.outerWidth(true) +
												mute.outerWidth(true) +
												((isVideo) ? fullscreen.outerWidth(true) : 0);

			var railWidth = controls.width() - usedWidth - (timeRail.outerWidth(true) - timeRail.outerWidth(false));

			timeRail.width(railWidth);
			timeTotal.width(railWidth - 10);
		}

		function setupControls(mediaElement, domNode) {
			controls.show();
			setRailSize();

			// play/pause button
			playpause.bind('click', function () {

				if (playpause.hasClass('mep-play')) {
					//if (mediaElement.paused) {
					mediaElement.play();
					playpause.removeClass('mep-play').addClass('mep-pause');
				} else {
					mediaElement.pause();
					playpause.removeClass('mep-pause').addClass('mep-play');
				}
			});

			// VOLUME SLIDER
			function volumeMove(e) {
				//$('body').css('cursor','N-resize');

				// only allow it to move within the rail
				var railHeight = volumeRail.height();
				var newY = e.pageY - volumeRail.offset().top;
				if (newY < 0)
					newY = 0;
				else if (newY > railHeight)
					newY = railHeight;

				// set position
				volumeHandle.css('top', newY - (volumeHandle.height() / 2));

				// calculate volume
				var volume = (railHeight - newY) / railHeight;

				// make sure to check mute status
				if (volume == 0) {
					mediaElement.setMuted(true);
					mute.removeClass('mep-mute').addClass('mep-unmute');
				} else {
					mediaElement.setMuted(false);
					mute.removeClass('mep-unmute').addClass('mep-mute');
				}

				mediaElement.setVolume(volume);
			};
			function positionVolumeHandle(volume) {
				volumeHandle.css('top', volumeRail.height() - (volumeRail.height() * volume) - (volumeHandle.height() / 2));
			}
			function removeMouseMove() {
				//$(document).css('cursor','');
				$(document)
					.unbind('mousemove', volumeMove)
					.unbind('mouseup', removeMouseMove);
			}
			volumeSlider.bind('mousedown', function (e) {
				volumeMove(e);
				$(document)
					.bind('mousemove', volumeMove)
					.bind('mouseup', removeMouseMove);
			});

			// MUTE
			mute.find('span').bind('click', function () {
				if (mediaElement.muted) {
					mediaElement.setMuted(false);
					mute.removeClass('mep-unmute').addClass('mep-mute');
					positionVolumeHandle(1);
				} else {
					mediaElement.setMuted(true);
					mute.removeClass('mep-mute').addClass('mep-unmute');
					positionVolumeHandle(0);
				}
			});

			// FULLSCREEN
			var isFullScreen = false;
			var normalHeight = 0;
			var normalWidth = 0;
			fullscreen.bind('click', function () {
				setFullScreen(!isFullScreen);
			});

			function setFullScreen(goFullScreen) {
				switch (mediaElement.pluginType) {
					case 'flash':
						mediaElement.setFullscreen(goFullScreen);
						break;
					case 'silverlight':
						mediaElement.setFullscreen(goFullScreen);
						break;
					case 'native':

						if (hasNativeFullScreen) {
							
							if (goFullScreen) {
								mediaElement.webkitEnterFullScreen();
							} else {
								mediaElement.webkitExitFullScreen();
							}
						
						} else {			
							if (goFullScreen) {

								// store
								normalHeight = $media.height();
								normalWidth = $media.width();

								// make full size
								container
									.addClass('mep-container-fullscreen')
									.width('100%')
									.height('100%')
									.css('z-index', 1000);

								$media
									.width('100%')
									.height('100%');

								overlay
									.width('100%')
									.height('100%');

								posterImg
									.width('100%')
									.height('auto');

								fullscreen
									.removeClass('mep-fullscreen')
									.addClass('mep-unfullscreen');

								setRailSize();


								$(document).bind('keydown', escListener);
								$(window).bind('resize', resizeListener);
							} else {

								container
									.removeClass('mep-container-fullscreen')
									.width(normalWidth)
									.height(normalHeight)
									.css('z-index', 1);
								$media
									.width(normalWidth)
									.height(normalHeight);

								posterImg
									.width(normalWidth)
									.height(normalHeight);

								fullscreen
									.removeClass('mep-unfullscreen')
									.addClass('mep-fullscreen');

								setRailSize();

								$(document).unbind('keydown', escListener);
								$(window).unbind('resize', resizeListener);

							}
						}
					}
					isFullScreen = goFullScreen;
			}

			function escListener(e) {
				if (e.keyCode == 27)
					setFullScreen(false);
			}

			function resizeListener(e) {
				setRailSize();
			}

			// time rail
			timeRail.delegate('span', 'click', function (e) {
				// mouse position relative to the object!
				var x = e.pageX;
				var offset = timeTotal.offset();
				var width = timeTotal.outerWidth();
				var percentage = ((x - offset.left) / width);
				var newTime = percentage * mediaElement.duration;

				mediaElement.setCurrentTime(newTime);
			});
			
			overlay.bind('click', function (e) {
				if (mediaElement.paused)
					mediaElement.play();
			}, true);

			// attach events to <video>
			mediaElement.addEventListener('timeupdate', function (e) {

				if (!isControlsVisible)
					return;

				if (mediaElement.currentTime && mediaElement.duration) {

					// update current:duration
					currentTime.html(formatTime(mediaElement.currentTime));
					if (mediaElement.duration)
						duration.html(formatTime(mediaElement.duration));

					// update time bar
					var newWidth = timeTotal.width() * mediaElement.currentTime / mediaElement.duration;
					timeCurrent.width(newWidth);

					// position handle
					var handlePos = newWidth - (timeHandle.width() / 2);
					timeHandle.css('left', handlePos);
				}

				setTimeLoaded(e.target);

			}, true);

			mediaElement.addEventListener('progress', function (e) {				
				setTimeLoaded(e.target);
			}, true);

			// removed byte/loaded
			// changed over to W3C method, even through Chrome currently does this wrong.
			// TODO: account for a real array with multiple values			
			function setTimeLoaded(target) {
				if (target && target.buffered && target.buffered.length > 0 && target.buffered.end && target.duration) {
					// calculate percentage
					var percent = target.buffered.end(0) / target.duration;

					// update loaded bar
					timeLoaded.width(timeTotal.width() * percent);
				}			
			}

			mediaElement.addEventListener('click', function (e) {
				if (mediaElement.paused)
					mediaElement.play();
			}, true);

			mediaElement.addEventListener('playing', function (e) {
				poster.hide();
				playpause.removeClass('mep-play').addClass('mep-pause');
				hideMessage();
			}, true);

			mediaElement.addEventListener('pause', function (e) {	
				playpause.removeClass('mep-pause').addClass('mep-play');
				showMessage(options.messages.paused);
			}, true);

			mediaElement.addEventListener('ended', function (e) {
				poster.show();
				playpause.removeClass('mep-pause').addClass('mep-play');
				showMessage(options.messages.ended);
			}, true);
			
			mediaElement.addEventListener('loadedmetadata', function(e) {				
				console.log(e, e.target, e.target.videoWidth);
				// if the <video height> was not set and the options.videoHeight was not set
				// then resize to the real dimensions
				if (isVideo && options.videoHeight <= 0 && $media[0].getAttribute('height') === null && !isNaN(e.target.videoHeight)) {
					setPlayerSize(e.target.videoWidth, e.target.videoHeight);
					setRailSize();
					mediaElement.setVideoSize(e.target.videoWidth, e.target.videoHeight);			
				}
				
			}, true);
			
			var testEvents = 'play playing played paused pausing'.split(' ');
			for (var i=0; i<testEvents.length;i++) {
				mediaElement.addEventListener(testEvents[i], function(e) {				
					console.log(e.type, e.target.paused);
				}, true);
			}

			// webkit has trouble doing this without a delay
			setTimeout(function () {
				setRailSize();
			}, 50);

			if (options.success)
				options.success(mediaElement, domNode);
		} // end setupControls

		function handleError(me) {
			showMessage(options.messages.error);
			
			var et = '';
			for (var ee in me)
				et += ee + ' = ' + me[ee] + ',';
			console.log('medialementplayer ERROR', et);
		}
		
		// create MediaElement, setup controls on success
		var meOptions = $.extend({}, options, { 
			pluginWidth: height, 
			pluginHeight: width,
			success: setupControls, 
			error: handleError });
			
		var mediaElement = html5.MediaElement($media[0], meOptions);

		return mediaElement;
	}

	// turn into jQuery plugin
	jQuery.fn.mediaelementplayer = function (options) {
		return this.each(function () {
			return new MediaElementPlayer($(this), options);
		});
	};

	window.html5.MediaElementPlayer = MediaElementPlayer;
	window.MediaElementPlayer = MediaElementPlayer;

})(jQuery);