gyorgy@0: (function($) {
gyorgy@0: 	// progress/loaded bar
gyorgy@0: 	MediaElementPlayer.prototype.buildprogress = function(player, controls, layers, media) {
gyorgy@0: 
gyorgy@0: 		$('<div class="mejs-time-rail">'+
gyorgy@0: 			'<span class="mejs-time-total">'+
gyorgy@0: 				'<span class="mejs-time-loaded"></span>'+
gyorgy@0: 				'<span class="mejs-time-current"></span>'+
gyorgy@0: 				'<span class="mejs-time-handle"></span>'+
gyorgy@0: 				'<span class="mejs-time-float">' + 
gyorgy@0: 					'<span class="mejs-time-float-current">00:00</span>' + 
gyorgy@0: 					'<span class="mejs-time-float-corner"></span>' + 
gyorgy@0: 				'</span>'+
gyorgy@0: 			'</span>'+
gyorgy@0: 		'</div>')
gyorgy@0: 			.appendTo(controls);
gyorgy@0: 
gyorgy@0: 		var 
gyorgy@0: 			t = this,
gyorgy@0: 			total = controls.find('.mejs-time-total'),
gyorgy@0: 			loaded  = controls.find('.mejs-time-loaded'),
gyorgy@0: 			current  = controls.find('.mejs-time-current'),
gyorgy@0: 			handle  = controls.find('.mejs-time-handle'),
gyorgy@0: 			timefloat  = controls.find('.mejs-time-float'),
gyorgy@0: 			timefloatcurrent  = controls.find('.mejs-time-float-current'),
gyorgy@0: 			handleMouseMove = function (e) {
gyorgy@0: 				// mouse position relative to the object
gyorgy@0: 				var x = e.pageX,
gyorgy@0: 					offset = total.offset(),
gyorgy@0: 					width = total.outerWidth(),
gyorgy@0: 					percentage = 0,
gyorgy@0: 					newTime = 0;
gyorgy@0: 
gyorgy@0: 
gyorgy@0: 				if (x > offset.left && x <= width + offset.left && media.duration) {
gyorgy@0: 					percentage = ((x - offset.left) / width);
gyorgy@0: 					newTime = (percentage <= 0.02) ? 0 : percentage * media.duration;
gyorgy@0: 
gyorgy@0: 					// seek to where the mouse is
gyorgy@0: 					if (mouseIsDown) {
gyorgy@0: 						media.setCurrentTime(newTime);
gyorgy@0: 					}
gyorgy@0: 
gyorgy@0: 					// position floating time box
gyorgy@0: 					var pos = x - offset.left;
gyorgy@0: 					timefloat.css('left', pos);
gyorgy@0: 					timefloatcurrent.html( mejs.Utility.secondsToTimeCode(newTime) );
gyorgy@0: 				}
gyorgy@0: 			},
gyorgy@0: 			mouseIsDown = false,
gyorgy@0: 			mouseIsOver = false;
gyorgy@0: 
gyorgy@0: 		// handle clicks
gyorgy@0: 		//controls.find('.mejs-time-rail').delegate('span', 'click', handleMouseMove);
gyorgy@0: 		total
gyorgy@0: 			.bind('mousedown', function (e) {
gyorgy@0: 				mouseIsDown = true;
gyorgy@0: 				handleMouseMove(e);
gyorgy@0: 				return false;
gyorgy@0: 			});
gyorgy@0: 
gyorgy@0: 		controls.find('.mejs-time-rail')
gyorgy@0: 			.bind('mouseenter', function(e) {
gyorgy@0: 				mouseIsOver = true;
gyorgy@0: 			})
gyorgy@0: 			.bind('mouseleave',function(e) {
gyorgy@0: 				mouseIsOver = false;
gyorgy@0: 			});
gyorgy@0: 
gyorgy@0: 		$(document)
gyorgy@0: 			.bind('mouseup', function (e) {
gyorgy@0: 				mouseIsDown = false;
gyorgy@0: 				//handleMouseMove(e);
gyorgy@0: 			})
gyorgy@0: 			.bind('mousemove', function (e) {
gyorgy@0: 				if (mouseIsDown || mouseIsOver) {
gyorgy@0: 					handleMouseMove(e);
gyorgy@0: 				}
gyorgy@0: 			});
gyorgy@0: 
gyorgy@0: 		// loading
gyorgy@0: 		media.addEventListener('progress', function (e) {
gyorgy@0: 			player.setProgressRail(e);
gyorgy@0: 			player.setCurrentRail(e);
gyorgy@0: 		}, false);
gyorgy@0: 
gyorgy@0: 		// current time
gyorgy@0: 		media.addEventListener('timeupdate', function(e) {
gyorgy@0: 			player.setProgressRail(e);
gyorgy@0: 			player.setCurrentRail(e);
gyorgy@0: 		}, false);
gyorgy@0: 		
gyorgy@0: 		
gyorgy@0: 		// store for later use
gyorgy@0: 		t.loaded = loaded;
gyorgy@0: 		t.total = total;
gyorgy@0: 		t.current = current;
gyorgy@0: 		t.handle = handle;
gyorgy@0: 	}
gyorgy@0: 	MediaElementPlayer.prototype.setProgressRail = function(e) {
gyorgy@0: 
gyorgy@0: 		var
gyorgy@0: 			t = this,
gyorgy@0: 			target = (e != undefined) ? e.target : t.media,
gyorgy@0: 			percent = null;			
gyorgy@0: 
gyorgy@0: 		// newest HTML5 spec has buffered array (FF4, Webkit)
gyorgy@0: 		if (target && target.buffered && target.buffered.length > 0 && target.buffered.end && target.duration) {
gyorgy@0: 			// TODO: account for a real array with multiple values (only Firefox 4 has this so far) 
gyorgy@0: 			percent = target.buffered.end(0) / target.duration;
gyorgy@0: 		} 
gyorgy@0: 		// Some browsers (e.g., FF3.6 and Safari 5) cannot calculate target.bufferered.end()
gyorgy@0: 		// to be anything other than 0. If the byte count is available we use this instead.
gyorgy@0: 		// Browsers that support the else if do not seem to have the bufferedBytes value and
gyorgy@0: 		// should skip to there. Tested in Safari 5, Webkit head, FF3.6, Chrome 6, IE 7/8.
gyorgy@0: 		else if (target && target.bytesTotal != undefined && target.bytesTotal > 0 && target.bufferedBytes != undefined) {
gyorgy@0: 			percent = target.bufferedBytes / target.bytesTotal;
gyorgy@0: 		}
gyorgy@0: 		// Firefox 3 with an Ogg file seems to go this way
gyorgy@0: 		else if (e && e.lengthComputable && e.total != 0) {
gyorgy@0: 			percent = e.loaded/e.total;
gyorgy@0: 		}
gyorgy@0: 
gyorgy@0: 		// finally update the progress bar
gyorgy@0: 		if (percent !== null) {
gyorgy@0: 			percent = Math.min(1, Math.max(0, percent));
gyorgy@0: 			// update loaded bar
gyorgy@0: 			if (t.loaded && t.total) {
gyorgy@0: 				t.loaded.width(t.total.width() * percent);
gyorgy@0: 			}
gyorgy@0: 		}
gyorgy@0: 	}
gyorgy@0: 	MediaElementPlayer.prototype.setCurrentRail = function() {
gyorgy@0: 
gyorgy@0: 		var t = this;
gyorgy@0: 	
gyorgy@0: 		if (t.media.currentTime != undefined && t.media.duration) {
gyorgy@0: 
gyorgy@0: 			// update bar and handle
gyorgy@0: 			if (t.total && t.handle) {
gyorgy@0: 				var 
gyorgy@0: 					newWidth = t.total.width() * t.media.currentTime / t.media.duration,
gyorgy@0: 					handlePos = newWidth - (t.handle.outerWidth(true) / 2);
gyorgy@0: 
gyorgy@0: 				t.current.width(newWidth);
gyorgy@0: 				t.handle.css('left', handlePos);
gyorgy@0: 			}
gyorgy@0: 		}
gyorgy@0: 
gyorgy@0: 	}	
gyorgy@0: 
gyorgy@0: })(mejs.$);