bgneal@488: /*
bgneal@488:  * jPlayerInspector Plugin for jPlayer (2.0.0+) Plugin for jQuery JavaScript Library
bgneal@488:  * http://www.happyworm.com/jquery/jplayer
bgneal@488:  *
bgneal@488:  * Copyright (c) 2009 - 2011 Happyworm Ltd
bgneal@488:  * Dual licensed under the MIT and GPL licenses.
bgneal@488:  *  - http://www.opensource.org/licenses/mit-license.php
bgneal@488:  *  - http://www.gnu.org/copyleft/gpl.html
bgneal@488:  *
bgneal@488:  * Author: Mark J Panaghiston
bgneal@488:  * Version: 1.0.3
bgneal@488:  * Date: 7th August 2011
bgneal@488:  *
bgneal@488:  * For use with jPlayer Version: 2.0.29
bgneal@488:  *
bgneal@488:  * Note: Declare inspector instances after jPlayer instances. ie., Otherwise the jPlayer instance is nonsense.
bgneal@488:  */
bgneal@488: 
bgneal@488: (function($, undefined) {
bgneal@488: 	$.jPlayerInspector = {};
bgneal@488: 	$.jPlayerInspector.i = 0;
bgneal@488: 	$.jPlayerInspector.defaults = {
bgneal@488: 		jPlayer: undefined, // The jQuery selector of the jPlayer instance to inspect.
bgneal@488: 		idPrefix: "jplayer_inspector_",
bgneal@488: 		visible: false
bgneal@488: 	};
bgneal@488: 	
bgneal@488: 	var methods = {
bgneal@488: 		init: function(options) {
bgneal@488: 			var self = this;
bgneal@488: 			var $this = $(this);
bgneal@488: 			
bgneal@488: 			var config = $.extend({}, $.jPlayerInspector.defaults, options);
bgneal@488: 			$(this).data("jPlayerInspector", config);
bgneal@488: 
bgneal@488: 			config.id = $(this).attr("id");
bgneal@488: 			config.jPlayerId = config.jPlayer.attr("id");
bgneal@488: 
bgneal@488: 			config.windowId = config.idPrefix + "window_" + $.jPlayerInspector.i;
bgneal@488: 			config.statusId = config.idPrefix + "status_" + $.jPlayerInspector.i;
bgneal@488: 			config.configId = config.idPrefix + "config_" + $.jPlayerInspector.i;
bgneal@488: 			config.toggleId = config.idPrefix + "toggle_" + $.jPlayerInspector.i;
bgneal@488: 			config.eventResetId = config.idPrefix + "event_reset_" + $.jPlayerInspector.i;
bgneal@488: 			config.updateId = config.idPrefix + "update_" + $.jPlayerInspector.i;
bgneal@488: 			config.eventWindowId = config.idPrefix + "event_window_" + $.jPlayerInspector.i;
bgneal@488: 			
bgneal@488: 			config.eventId = {};
bgneal@488: 			config.eventJq = {};
bgneal@488: 			config.eventTimeout = {};
bgneal@488: 			config.eventOccurrence = {};
bgneal@488: 			
bgneal@488: 			$.each($.jPlayer.event, function(eventName,eventType) {
bgneal@488: 				config.eventId[eventType] = config.idPrefix + "event_" + eventName + "_" + $.jPlayerInspector.i;
bgneal@488: 				config.eventOccurrence[eventType] = 0;
bgneal@488: 			});
bgneal@488: 			
bgneal@488: 			var structure = 
bgneal@488: 				'<p><a href="#" id="' + config.toggleId + '">' + (config.visible ? "Hide" : "Show") + '</a> jPlayer Inspector</p>' 
bgneal@488: 				+ '<div id="' + config.windowId + '">'
bgneal@488: 					+ '<div id="' + config.statusId + '"></div>'
bgneal@488: 					+ '<div id="' + config.eventWindowId + '" style="padding:5px 5px 0 5px;background-color:#eee;border:1px dotted #000;">'
bgneal@488: 						+ '<p style="margin:0 0 10px 0;"><strong>jPlayer events that have occurred over the past 1 second:</strong>'
bgneal@488: 						+ '<br />(Backgrounds: <span style="padding:0 5px;background-color:#eee;border:1px dotted #000;">Never occurred</span> <span style="padding:0 5px;background-color:#fff;border:1px dotted #000;">Occurred before</span> <span style="padding:0 5px;background-color:#9f9;border:1px dotted #000;">Occurred</span> <span style="padding:0 5px;background-color:#ff9;border:1px dotted #000;">Multiple occurrences</span> <a href="#" id="' + config.eventResetId + '">reset</a>)</p>';
bgneal@488: 			
bgneal@488: 			// MJP: Would use the next 3 lines for ease, but the events are just slapped on the page.
bgneal@488: 			// $.each($.jPlayer.event, function(eventName,eventType) {
bgneal@488: 			// 	structure += '<div id="' + config.eventId[eventType] + '" style="float:left;">' + eventName + '</div>';
bgneal@488: 			// });
bgneal@488: 			
bgneal@488: 			var eventStyle = "float:left;margin:0 5px 5px 0;padding:0 5px;border:1px dotted #000;";
bgneal@488: 			// MJP: Doing it longhand so order and layout easier to control.
bgneal@488: 			structure +=
bgneal@488: 						'<div id="' + config.eventId[$.jPlayer.event.ready] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.flashreset] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.resize] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.repeat] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.click] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.error] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.warning] + '" style="' + eventStyle + '"></div>'
bgneal@488: 
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.loadstart] + '" style="clear:left;' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.progress] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.timeupdate] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.volumechange] + '" style="' + eventStyle + '"></div>'
bgneal@488: 
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.play] + '" style="clear:left;' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.pause] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.waiting] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.playing] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.seeking] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.seeked] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.ended] + '" style="' + eventStyle + '"></div>'
bgneal@488: 
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.loadeddata] + '" style="clear:left;' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.loadedmetadata] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.canplay] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.canplaythrough] + '" style="' + eventStyle + '"></div>'
bgneal@488: 
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.suspend] + '" style="clear:left;' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.abort] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.emptied] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.stalled] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.ratechange] + '" style="' + eventStyle + '"></div>'
bgneal@488: 						+ '<div id="' + config.eventId[$.jPlayer.event.durationchange] + '" style="' + eventStyle + '"></div>'
bgneal@488: 
bgneal@488: 						+ '<div style="clear:both"></div>';
bgneal@488: 
bgneal@488: 			// MJP: Would like a check here in case we missed an event.
bgneal@488: 
bgneal@488: 			// MJP: Check fails, since it is not on the page yet.
bgneal@488: /*			$.each($.jPlayer.event, function(eventName,eventType) {
bgneal@488: 				if($("#" + config.eventId[eventType])[0] === undefined) {
bgneal@488: 					structure += '<div id="' + config.eventId[eventType] + '" style="clear:left;' + eventStyle + '">' + eventName + '</div>';
bgneal@488: 				}
bgneal@488: 			});
bgneal@488: */
bgneal@488: 			structure +=
bgneal@488: 					'</div>'
bgneal@488: 					+ '<p><a href="#" id="' + config.updateId + '">Update</a> jPlayer Inspector</p>'
bgneal@488: 					+ '<div id="' + config.configId + '"></div>'
bgneal@488: 				+ '</div>';
bgneal@488: 			$(this).html(structure);
bgneal@488: 			
bgneal@488: 			config.windowJq = $("#" + config.windowId);
bgneal@488: 			config.statusJq = $("#" + config.statusId);
bgneal@488: 			config.configJq = $("#" + config.configId);
bgneal@488: 			config.toggleJq = $("#" + config.toggleId);
bgneal@488: 			config.eventResetJq = $("#" + config.eventResetId);
bgneal@488: 			config.updateJq = $("#" + config.updateId);
bgneal@488: 
bgneal@488: 			$.each($.jPlayer.event, function(eventName,eventType) {
bgneal@488: 				config.eventJq[eventType] = $("#" + config.eventId[eventType]);
bgneal@488: 				config.eventJq[eventType].text(eventName + " (" + config.eventOccurrence[eventType] + ")"); // Sets the text to the event name and (0);
bgneal@488: 				
bgneal@488: 				config.jPlayer.bind(eventType + ".jPlayerInspector", function(e) {
bgneal@488: 					config.eventOccurrence[e.type]++;
bgneal@488: 					if(config.eventOccurrence[e.type] > 1) {
bgneal@488: 						config.eventJq[e.type].css("background-color","#ff9");
bgneal@488: 					} else {
bgneal@488: 						config.eventJq[e.type].css("background-color","#9f9");
bgneal@488: 					}
bgneal@488: 					config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
bgneal@488: 					// The timer to handle the color
bgneal@488: 					clearTimeout(config.eventTimeout[e.type]);
bgneal@488: 					config.eventTimeout[e.type] = setTimeout(function() {
bgneal@488: 						config.eventJq[e.type].css("background-color","#fff");
bgneal@488: 					}, 1000);
bgneal@488: 					// The timer to handle the occurences.
bgneal@488: 					setTimeout(function() {
bgneal@488: 						config.eventOccurrence[e.type]--;
bgneal@488: 						config.eventJq[e.type].text(eventName + " (" + config.eventOccurrence[e.type] + ")");
bgneal@488: 					}, 1000);
bgneal@488: 					if(config.visible) { // Update the status, if inspector open.
bgneal@488: 						$this.jPlayerInspector("updateStatus");
bgneal@488: 					}
bgneal@488: 				});
bgneal@488: 			});
bgneal@488: 
bgneal@488: 			config.jPlayer.bind($.jPlayer.event.ready + ".jPlayerInspector", function(e) {
bgneal@488: 				$this.jPlayerInspector("updateConfig");
bgneal@488: 			});
bgneal@488: 
bgneal@488: 			config.toggleJq.click(function() {
bgneal@488: 				if(config.visible) {
bgneal@488: 					$(this).text("Show");
bgneal@488: 					config.windowJq.hide();
bgneal@488: 					config.statusJq.empty();
bgneal@488: 					config.configJq.empty();
bgneal@488: 				} else {
bgneal@488: 					$(this).text("Hide");
bgneal@488: 					config.windowJq.show();
bgneal@488: 					config.updateJq.click();
bgneal@488: 				}
bgneal@488: 				config.visible = !config.visible;
bgneal@488: 				$(this).blur();
bgneal@488: 				return false;
bgneal@488: 			});
bgneal@488: 
bgneal@488: 			config.eventResetJq.click(function() {
bgneal@488: 				$.each($.jPlayer.event, function(eventName,eventType) {
bgneal@488: 					config.eventJq[eventType].css("background-color","#eee");
bgneal@488: 				});
bgneal@488: 				$(this).blur();
bgneal@488: 				return false;
bgneal@488: 			});
bgneal@488: 
bgneal@488: 			config.updateJq.click(function() {
bgneal@488: 				$this.jPlayerInspector("updateStatus");
bgneal@488: 				$this.jPlayerInspector("updateConfig");
bgneal@488: 				return false;
bgneal@488: 			});
bgneal@488: 
bgneal@488: 			if(!config.visible) {
bgneal@488: 				config.windowJq.hide();
bgneal@488: 			} else {
bgneal@488: 				// config.updateJq.click();
bgneal@488: 			}
bgneal@488: 			
bgneal@488: 			$.jPlayerInspector.i++;
bgneal@488: 
bgneal@488: 			return this;
bgneal@488: 		},
bgneal@488: 		destroy: function() {
bgneal@488: 			$(this).data("jPlayerInspector") && $(this).data("jPlayerInspector").jPlayer.unbind(".jPlayerInspector");
bgneal@488: 			$(this).empty();
bgneal@488: 		},
bgneal@488: 		updateConfig: function() { // This displays information about jPlayer's configuration in inspector
bgneal@488: 		
bgneal@488: 			var jPlayerInfo = "<p>This jPlayer instance is running in your browser where:<br />"
bgneal@488: 
bgneal@488: 			for(i = 0; i < $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions.length; i++) {
bgneal@488: 				var solution = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").solutions[i];
bgneal@488: 				jPlayerInfo += "&nbsp;jPlayer's <strong>" + solution + "</strong> solution is";				
bgneal@488: 				if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].used) {
bgneal@488: 					jPlayerInfo += " being <strong>used</strong> and will support:<strong>";
bgneal@488: 					for(format in $(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support) {
bgneal@488: 						if($(this).data("jPlayerInspector").jPlayer.data("jPlayer")[solution].support[format]) {
bgneal@488: 							jPlayerInfo += " " + format;
bgneal@488: 						}
bgneal@488: 					}
bgneal@488: 					jPlayerInfo += "</strong><br />";
bgneal@488: 				} else {
bgneal@488: 					jPlayerInfo += " <strong>not required</strong><br />";
bgneal@488: 				}
bgneal@488: 			}
bgneal@488: 			jPlayerInfo += "</p>";
bgneal@488: 
bgneal@488: 			if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.active) {
bgneal@488: 				if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
bgneal@488: 					jPlayerInfo += "<strong>Problem with jPlayer since both HTML5 and Flash are active.</strong>";
bgneal@488: 				} else {
bgneal@488: 					jPlayerInfo += "The <strong>HTML5 is active</strong>.";
bgneal@488: 				}
bgneal@488: 			} else {
bgneal@488: 				if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").flash.active) {
bgneal@488: 					jPlayerInfo += "The <strong>Flash is active</strong>.";
bgneal@488: 				} else {
bgneal@488: 					jPlayerInfo += "No solution is currently active. jPlayer needs a setMedia().";
bgneal@488: 				}
bgneal@488: 			}
bgneal@488: 			jPlayerInfo += "</p>";
bgneal@488: 
bgneal@488: 			var formatType = $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.formatType;
bgneal@488: 			jPlayerInfo += "<p><code>status.formatType = '" + formatType + "'</code><br />";
bgneal@488: 			if(formatType) {
bgneal@488: 				jPlayerInfo += "<code>Browser canPlay('" + $.jPlayer.prototype.format[formatType].codec + "')</code>";
bgneal@488: 			} else {
bgneal@488: 				jPlayerInfo += "</p>";
bgneal@488: 			}
bgneal@488: 			
bgneal@488: 			jPlayerInfo += "<p><code>status.src = '" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.src + "'</code></p>";
bgneal@488: 
bgneal@488: 			jPlayerInfo += "<p><code>status.media = {<br />";
bgneal@488: 			for(prop in $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media) {
bgneal@488: 				jPlayerInfo += "&nbsp;" + prop + ": " + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.media[prop] + "<br />"; // Some are strings
bgneal@488: 			}
bgneal@488: 			jPlayerInfo += "};</code></p>"
bgneal@488: 
bgneal@488: 			+ "<p>Raw browser test for HTML5 support. Should equal a function if HTML5 is available.<br />";
bgneal@488: 			if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.audio.available) {
bgneal@488: 				jPlayerInfo += "<code>htmlElement.audio.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.audio.canPlayType) +"</code><br />"
bgneal@488: 			}
bgneal@488: 			if($(this).data("jPlayerInspector").jPlayer.data("jPlayer").html.video.available) {
bgneal@488: 				jPlayerInfo += "<code>htmlElement.video.canPlayType = " + (typeof $(this).data("jPlayerInspector").jPlayer.data("jPlayer").htmlElement.video.canPlayType) +"</code>";
bgneal@488: 			}
bgneal@488: 			jPlayerInfo += "</p>";
bgneal@488: 
bgneal@488: 			jPlayerInfo += "<p>This instance is using the constructor options:<br />"
bgneal@488: 			+ "<code>$('#" + $(this).data("jPlayerInspector").jPlayer.data("jPlayer").internal.self.id + "').jPlayer({<br />"
bgneal@488: 
bgneal@488: 			+ "&nbsp;swfPath: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "swfPath") + "',<br />"
bgneal@488: 
bgneal@488: 			+ "&nbsp;solution: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "solution") + "',<br />"
bgneal@488: 
bgneal@488: 			+ "&nbsp;supplied: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "supplied") + "',<br />"
bgneal@488: 
bgneal@488: 			+ "&nbsp;preload: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "preload") + "',<br />"
bgneal@488: 			
bgneal@488: 			+ "&nbsp;volume: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "volume") + ",<br />"
bgneal@488: 			
bgneal@488: 			+ "&nbsp;muted: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "muted") + ",<br />"
bgneal@488: 
bgneal@488: 			+ "&nbsp;backgroundColor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "backgroundColor") + "',<br />"
bgneal@488: 
bgneal@488: 			+ "&nbsp;cssSelectorAncestor: '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelectorAncestor") + "',<br />"
bgneal@488: 
bgneal@488: 			+ "&nbsp;cssSelector: {";
bgneal@488: 
bgneal@488: 			var cssSelector = $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector");
bgneal@488: 			for(prop in cssSelector) {
bgneal@488: 				
bgneal@488: 				// jPlayerInfo += "<br />&nbsp;&nbsp;" + prop + ": '" + cssSelector[prop] + "'," // This works too of course, but want to use option method for deep keys.
bgneal@488: 				jPlayerInfo += "<br />&nbsp;&nbsp;" + prop + ": '" + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "cssSelector." + prop) + "',"
bgneal@488: 			}
bgneal@488: 
bgneal@488: 			jPlayerInfo = jPlayerInfo.slice(0, -1); // Because the sloppy comma was bugging me.
bgneal@488: 
bgneal@488: 			jPlayerInfo += "<br />&nbsp;},<br />"
bgneal@488: 
bgneal@488: 			+ "&nbsp;errorAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "errorAlerts") + ",<br />"
bgneal@488: 			
bgneal@488: 			+ "&nbsp;warningAlerts: " + $(this).data("jPlayerInspector").jPlayer.jPlayer("option", "warningAlerts") + "<br />"
bgneal@488: 
bgneal@488: 			+ "});</code></p>";
bgneal@488: 			$(this).data("jPlayerInspector").configJq.html(jPlayerInfo);
bgneal@488: 			return this;
bgneal@488: 		},
bgneal@488: 		updateStatus: function() { // This displays information about jPlayer's status in the inspector
bgneal@488: 			$(this).data("jPlayerInspector").statusJq.html(
bgneal@488: 				"<p>jPlayer is " +
bgneal@488: 				($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.paused ? "paused" : "playing") +
bgneal@488: 				" at time: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentTime*10)/10 + "s." +
bgneal@488: 				" (d: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.duration*10)/10 + "s" +
bgneal@488: 				", sp: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.seekPercent) + "%" +
bgneal@488: 				", cpr: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentRelative) + "%" +
bgneal@488: 				", cpa: " + Math.floor($(this).data("jPlayerInspector").jPlayer.data("jPlayer").status.currentPercentAbsolute) + "%)</p>"
bgneal@488: 			);
bgneal@488: 			return this;
bgneal@488: 		}
bgneal@488: 	};
bgneal@488: 	$.fn.jPlayerInspector = function( method ) {
bgneal@488: 		// Method calling logic
bgneal@488: 		if ( methods[method] ) {
bgneal@488: 			return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
bgneal@488: 		} else if ( typeof method === 'object' || ! method ) {
bgneal@488: 			return methods.init.apply( this, arguments );
bgneal@488: 		} else {
bgneal@488: 			$.error( 'Method ' +  method + ' does not exist on jQuery.jPlayerInspector' );
bgneal@488: 		}    
bgneal@488: 	};
bgneal@488: })(jQuery);