gyorgy@0: (function($) {
gyorgy@0: 	MediaElementPlayer.prototype.buildvolume = function(player, controls, layers, media) {
gyorgy@0: 		var mute = 
gyorgy@0: 			$('<div class="mejs-button mejs-volume-button mejs-mute">'+
gyorgy@0: 				'<button type="button"></button>'+
gyorgy@0: 				'<div class="mejs-volume-slider">'+ // outer background
gyorgy@0: 					'<div class="mejs-volume-total"></div>'+ // line background
gyorgy@0: 					'<div class="mejs-volume-current"></div>'+ // current volume
gyorgy@0: 					'<div class="mejs-volume-handle"></div>'+ // handle
gyorgy@0: 				'</div>'+
gyorgy@0: 			'</div>')
gyorgy@0: 			.appendTo(controls),
gyorgy@0: 		volumeSlider = mute.find('.mejs-volume-slider'),
gyorgy@0: 		volumeTotal = mute.find('.mejs-volume-total'),
gyorgy@0: 		volumeCurrent = mute.find('.mejs-volume-current'),
gyorgy@0: 		volumeHandle = mute.find('.mejs-volume-handle'),
gyorgy@0: 
gyorgy@0: 		positionVolumeHandle = function(volume) {
gyorgy@0: 
gyorgy@0: 			var 
gyorgy@0: 				top = volumeTotal.height() - (volumeTotal.height() * volume);
gyorgy@0: 
gyorgy@0: 			// handle
gyorgy@0: 			volumeHandle.css('top', top - (volumeHandle.height() / 2));
gyorgy@0: 
gyorgy@0: 			// show the current visibility
gyorgy@0: 			volumeCurrent.height(volumeTotal.height() - top + parseInt(volumeTotal.css('top').replace(/px/,''),10));
gyorgy@0: 			volumeCurrent.css('top',  top);
gyorgy@0: 		},
gyorgy@0: 		handleVolumeMove = function(e) {
gyorgy@0: 			var
gyorgy@0: 				railHeight = volumeTotal.height(),
gyorgy@0: 				totalOffset = volumeTotal.offset(),
gyorgy@0: 				totalTop = parseInt(volumeTotal.css('top').replace(/px/,''),10),
gyorgy@0: 				newY = e.pageY - totalOffset.top,
gyorgy@0: 				volume = (railHeight - newY) / railHeight
gyorgy@0: 
gyorgy@0: 			// TODO: handle vertical and horizontal CSS
gyorgy@0: 			// only allow it to move within the rail
gyorgy@0: 			if (newY < 0)
gyorgy@0: 				newY = 0;
gyorgy@0: 			else if (newY > railHeight)
gyorgy@0: 				newY = railHeight;
gyorgy@0: 
gyorgy@0: 			// move the handle to match the mouse
gyorgy@0: 			volumeHandle.css('top', newY - (volumeHandle.height() / 2) + totalTop );
gyorgy@0: 
gyorgy@0: 			// show the current visibility
gyorgy@0: 			volumeCurrent.height(railHeight-newY);
gyorgy@0: 			volumeCurrent.css('top',newY+totalTop);
gyorgy@0: 
gyorgy@0: 			// set mute status
gyorgy@0: 			if (volume == 0) {
gyorgy@0: 				media.setMuted(true);
gyorgy@0: 				mute.removeClass('mejs-mute').addClass('mejs-unmute');
gyorgy@0: 			} else {
gyorgy@0: 				media.setMuted(false);
gyorgy@0: 				mute.removeClass('mejs-unmute').addClass('mejs-mute');
gyorgy@0: 			}
gyorgy@0: 
gyorgy@0: 			volume = Math.max(0,volume);
gyorgy@0: 			volume = Math.min(volume,1);
gyorgy@0: 
gyorgy@0: 			// set the volume
gyorgy@0: 			media.setVolume(volume);
gyorgy@0: 		},
gyorgy@0: 		mouseIsDown = false;
gyorgy@0: 
gyorgy@0: 		// SLIDER
gyorgy@0: 		mute
gyorgy@0: 			.hover(function() {
gyorgy@0: 				volumeSlider.show();
gyorgy@0: 			}, function() {
gyorgy@0: 				volumeSlider.hide();
gyorgy@0: 			})		
gyorgy@0: 		
gyorgy@0: 		volumeSlider
gyorgy@0: 			.bind('mousedown', function (e) {
gyorgy@0: 				handleVolumeMove(e);
gyorgy@0: 				mouseIsDown = true;
gyorgy@0: 				return false;
gyorgy@0: 			});
gyorgy@0: 		$(document)
gyorgy@0: 			.bind('mouseup', function (e) {
gyorgy@0: 				mouseIsDown = false;
gyorgy@0: 			})
gyorgy@0: 			.bind('mousemove', function (e) {
gyorgy@0: 				if (mouseIsDown) {
gyorgy@0: 					handleVolumeMove(e);
gyorgy@0: 				}
gyorgy@0: 			});
gyorgy@0: 
gyorgy@0: 
gyorgy@0: 		// MUTE button
gyorgy@0: 		mute.find('button').click(function() {
gyorgy@0: 			if (media.muted) {
gyorgy@0: 				media.setMuted(false);
gyorgy@0: 				mute.removeClass('mejs-unmute').addClass('mejs-mute');
gyorgy@0: 				positionVolumeHandle(1);
gyorgy@0: 			} else {
gyorgy@0: 				media.setMuted(true);
gyorgy@0: 				mute.removeClass('mejs-mute').addClass('mejs-unmute');
gyorgy@0: 				positionVolumeHandle(0);
gyorgy@0: 			}
gyorgy@0: 		});
gyorgy@0: 
gyorgy@0: 		// listen for volume change events from other sources
gyorgy@0: 		media.addEventListener('volumechange', function(e) {
gyorgy@0: 			if (!mouseIsDown) {
gyorgy@0: 				positionVolumeHandle(e.target.volume);
gyorgy@0: 			}
gyorgy@0: 		}, true);
gyorgy@0: 
gyorgy@0: 		// set initial volume
gyorgy@0: 		positionVolumeHandle(player.options.startVolume);
gyorgy@0: 		
gyorgy@0: 		// shim gets the startvolume as a parameter, but we have to set it on the native <video> and <audio> elements
gyorgy@0: 		if (media.pluginType === 'native') {
gyorgy@0: 			media.setVolume(player.options.startVolume);
gyorgy@0: 		}
gyorgy@0: 	}
gyorgy@0: 
gyorgy@0: })(mejs.$);