## Required: path, id
## Optional: width, autostart, hit or asset (for the file name)

## Required: path, id
## Optional: width, autostart, hit or asset (for the file name)
#set ( $urlutils = $context.getPageValue("url_util"))
#if (!$urlutils)
	#set ($urlenc = $asset.sourcepath)
#else
	#set ( $urlenc = $urlutils.encode($asset.sourcepath))
	#set ( $urlenc = $urlenc.replace("%2F", "/") )
#end


#set ($path = "$!cdn$home/${mediadbappid}/services/module/asset/downloads/preset/$urlenc/audio.mp3")

#set( $id = $asset.id )
#set( $name = $asset.name )

<div id="playerwindow${id}" style="width: 120px;">

<script type="text/javascript" src="$!cdn$home/${mediadbappid}/services/module/asset/players/jplayer/jquery.jplayer.js">  </script>
<link  rel="stylesheet" type="text/css" href="$!cdn$home/${mediadbappid}/services/module/asset/players/jplayer/jplayer.blue.monday.css"/>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){

	$("#jquery_jplayer_$id").jPlayer({
		ready: function (event) {
			$(this).jPlayer("setMedia", {
				mp3:"$path"
			}).jPlayer("play");
		},
		swfPath: '$home$apphome/components/javascript',
		supplied: "mp3",
		cssSelectorAncestor: "#jp_container_${id}",
		wmode: "window"
	});
});
//]]>
</script>


		<div id="jp_container_${id}" class="jp-audio" style="width: 120px;height: 41px;margin-left: 10px;">
		
			<div class="jp-type-single">
				<div class="jp-gui jp-interface" style="height: 41px; width: 120px;" >
					<ul class="jp-controls" style="padding: 1px 0 0 4px; width: 120px;">
						<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
						<li><a href="javascript:;" class="jp-pause" tabindex="1" style="display:block;">pause</a></li>
					</ul>
					<div class="jp-progress" style="left: 65px; width: 50px; top: 15px">
						<div class="jp-seek-bar">
							<div class="jp-play-bar"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="jquery_jplayer_${id}" class="jp-jplayer"></div>
		
</div>