
<h2>&nbsp;</h2>

<script type="text/javascript" src="{$site_root}{$index_theme_path}/js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="{$site_root}{$index_theme_path}/js/jquery.jplayer.min.js"></script>
<link href="{$site_root}{$index_theme_path}{$index_theme_css_path}/player_skin/jplayer.blue.monday_{$default_left}.css" rel="stylesheet" type="text/css" />
{literal}
<script type="text/javascript">
$(document).ready(function(){
	// Local copy of jQuery selectors, for performance.
	var jpPlayTime = $("#jplayer_play_time");
	var jpTotalTime = $("#jplayer_total_time");
	$("#jquery_jplayer").jPlayer({
		ready: function () {
			this.element.jPlayer("setFile", "{/literal}{$data_9.audio.url_audio}{literal}").jPlayer("play");
		},
		volume: 50,
		swfPath: "{/literal}{$site_root}{$index_theme_path}/js{literal}"
	})
	.jPlayer("onProgressChange", function(loadPercent, playedPercentRelative, playedPercentAbsolute, playedTime, totalTime) {
		jpPlayTime.text($.jPlayer.convertTime(playedTime));
		jpTotalTime.text($.jPlayer.convertTime(totalTime));
	})
	.jPlayer("onSoundComplete", function() {
		this.element.jPlayer("play");
	});
	$('#close').click(function() {
		$('#jquery_jplayer').jPlayer('stop');
	});
	$('#mask').click(function() {
		$('#jquery_jplayer').jPlayer('stop');
	});
});
</script>
<style>
	a.jp-play {background: url("{/literal}{$site_root}{$index_theme_path}{$index_theme_images_path}{literal}/audio_play.gif") no-repeat;}
	a.jp-play:hover {background: url("{/literal}{$site_root}{$index_theme_path}{$index_theme_images_path}{literal}/audio_play.gif") no-repeat;}
	a.jp-pause {background: url("{/literal}{$site_root}{$index_theme_path}{$index_theme_images_path}{literal}/audio_pause.gif") no-repeat;}
	a.jp-pause:hover {background: url("{/literal}{$site_root}{$index_theme_path}{$index_theme_images_path}{literal}/audio_pause.gif") no-repeat;}
	a.jp-stop {background: url("{/literal}{$site_root}{$index_theme_path}{$index_theme_images_path}{literal}/audio_stop.gif") no-repeat;}
	a.jp-stop:hover {background: url("{/literal}{$site_root}{$index_theme_path}{$index_theme_images_path}{literal}/audio_stop.gif") no-repeat;}
	#song_title{padding: 15px 20px 18px 20px;}
</style>
{/literal}
<div id="jquery_jplayer"></div>
<div class="jp-single-player">
	<div class="jp-interface">
	<div id="song_title">
		<span class="song_author">{$data_9.audio.song_author}</span> - {$data_9.audio.song_name}
	</div>
		<ul class="jp-controls">
			<li><a href="#" id="jplayer_play" class="jp-play" tabindex="1"></a></li>
			<li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1"></a></li>
			<li><a href="#" id="jplayer_stop" class="jp-stop" tabindex="1"></a></li>
			<li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">{$lang.profile.sound_off}</a></li>
		</ul>
		<div class="jp-progress">
			<div id="jplayer_load_bar" class="jp-load-bar">
				<div id="jplayer_play_bar" class="jp-play-bar"></div>
			</div>
		</div>
		<div id="jplayer_volume_bar" class="jp-volume-bar">
			<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div>
		</div>
		<div id="jplayer_play_time" class="jp-play-time"></div>
		<div id="jplayer_total_time" class="jp-total-time"></div>
		<div id="jplayer_time_delimiter">/</div>
	</div>
</div>