## 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 = "$!siteroot$home/${mediadbappid}/services/module/asset/downloads/preset/$urlenc/audio.mp3")
    
<div class="audio-thumb-container" >    
	<div id="jp_container_$!viewer$asset.id" class="jp-audio mini">
	    <div class="jp-type-single">
	        <div id="jquery_jplayer_$!viewer$asset.id" data-container="jp_container_$!viewer$asset.id"  class="jp-jplayer" data-url="$path"></div>            
	        <div class="jp-gui jp-interface jp-volume-control">
	            <div class="jp-controls" >
	              <div class="jp-control jp-play" data-target="jquery_jplayer_$!viewer$asset.id" data-pause="jquery_jplayer_pause_$!viewer$asset.id" id="jquery_jplayer_play_$!viewer$asset.id" tabindex="1">[[play]]</div>
	              <div class="jp-control jp-pause" data-target="jquery_jplayer_$!viewer$asset.id" data-play="jquery_jplayer_play_$!viewer$asset.id" id="jquery_jplayer_pause_$!viewer$asset.id" tabindex="1">[[pause]]</div>
	            </div>
	            <div class="jp-time-rail">
	           		<div class="jp-progress">
	                	<div class="jp-seek-bar">
	                          <div class="jp-play-bar" > </div>
	                	</div>
	            	</div>
	            </div>
	            <div class="jp-controls" >
					<div class="jp-control jp-mute" data-target="jquery_jplayer_$!viewer$asset.id" tabindex="0">[[max volume]]</div>
					<div class="jp-control jp-unmute" data-target="jquery_jplayer_$!viewer$asset.id" tabindex="0">[[min volume]]</div>
				</div>
				<div class="jp-volume-bar">
							<div class="jp-volume-bar-value" style="width: 80%;"></div>
				</div>
	        </div>
	        <div class="jp-time-holder">
					<div class="jp-current-time">00:00</div>
			        <div class="jp-duration">#if($length)$length#end</div>
		        </div>
	    </div>
	</div>
	##<div class="smallname">$asset.getName()</div>
</div>