$('html').addClass('js-on');
			$(function(){
				$('div.media-player')
					// init and configure controls
					.jmeControl({
						//we don't need special Themeroller-Classes
						addThemeRoller: false,
						volumeSlider: {
							range: 'min',
							//changeing the volume will unmute the player
							mutestate: true
						},
						timeSlider: {
							range: 'min'
						},
						fullscreen: {
							//firefox has an ugly reframe bug
							tryFullScreen: !!$.browser.mozilla // defaults to true
						}
					})
					
					// add some UI behavior
					.bind('play', function(){
						$(this)
							.unbind('.useridle')
							//useractive/userinactive event is provided by utils/useractivity.js plugin
							.bind('useractive.useridle', function(){
								//for keyboard users: prevent scrollInToView, we handle this with animation
								var that = this;
								setTimeout(function(){
									$('div.media-controls', that).scrollTop(0);
								}, 0);
								$('div.media-controls-box', this).stop().animate({
									opacity: 1, 
									bottom: 0
								});
							})
							//set idletime to 1200ms (defaults to 2500) and assume that control isn't idled initially (idle defaults to true) 
							.bind('userinactive.useridle', {idletime: 2500, idle: false}, function(){
								$('div.media-controls-box', this).stop().animate({
									opacity: 0, 
									bottom: $('div.media-controls-box', this).outerHeight() * -1
								});
							})
						;
					})
					.bind('pause ended', function(e){
						$(this).unbind('.useridle');
						$('div.media-controls-box', this).stop().animate({
							opacity: 1, 
							bottom: 0
						});
					});	
			});