<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<%@ Import Namespace="Domain" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta http-equiv="cache-control" content="max-age=0" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />
	<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
	<meta http-equiv="pragma" content="no-cache" />
	<title>房间号：<%: ViewData["RoomNumber"] %></title>
	<link type="text/css" rel="stylesheet" href="/Styles/WeiXin/common.css" />
	<link type="text/css" rel="stylesheet" href="/Styles/WeiXin/tip.css" />
	<link type="text/css" rel="stylesheet" href="/Styles/WeiXin/music.css" />
	<script type="text/javascript" src="/Scripts/jquery.min.js"></script>
	<script type="text/javascript" src="/Scripts/WeiXin/tip.js"></script>
	<script type="text/javascript">
		$(function () {

			function setMusic(key) {
				$.ajax({
					url: '/WeiXin/Music',
					type: 'POST',
					dataType: 'JSON',
					data: {
						RoomNumber: $('#hfRoomNumber').val(),
						Key: key
					},
					success: function (r) {
						if (!r.IsSuccess) {
							showTip(r.Message);
						}

					}
				});
			}



			$('#music-panel a').click(function () {

				if (this.id == "music-key-Play") {

					if ($(this).hasClass('selected')) {
						$(this).removeClass('selected');
						setMusic($(this).attr('key'));
					}
					else {
						$(this).addClass('selected');
						setMusic($(this).attr('keyPause'));
					}

				} else if (this.id == "music-mute") {

					if ($(this).hasClass('selected')) {
						$(this).removeClass('selected');
						setMusic($(this).attr('UnKey'));						
					}
					else {
						$(this).addClass('selected');
						setMusic($(this).attr('key'));
					}

					setMusic($(this).attr('key'));

				} else if (this.id == "music-key-VoiceInc" ||
							this.id == "music-key-Prev" ||
								this.id == "music-key-Next" ||
									this.id == "music-key-VoiceDec") {


					$(this).addClass('selected').siblings().removeClass("selected");

					setMusic($(this).attr('key'));

					var index = this;

					setTimeout(function () {
						$(index).removeClass('selected');
					}, 1000);





				} else {

					$(this).addClass('selected').siblings().removeClass("selected");

					setMusic($(this).attr('key'));
				}


			});


		});
	</script>
</head>
<body>
	<%--<input id="hfTvModalId" type="hidden" name="TvModalId" value='<%: ViewData["TvModalId"] %>' />--%>
	<input id="hfRoomNumber" type="hidden" name="RoomNumber" value='<%: ViewData["RoomNumber"] %>' />
	<div id="music-panel">
		<div id="top" class="clearfix">
			<a id="music-mute" href="javascript:void(0)" key='<%: MusicKey.Mute.ToString() %>' UnKey='<%: MusicKey.Unmute.ToString() %>'><span
				class="icon icon-music-mute"></span></a>
		</div>
		<div id="musicBg" class="clearfix">
		</div>
		<div id="middle" class="clearfix">
			<div id="dir-panel">
				<div style="width: 175px; height: 180px; position: relative; margin: 0 auto;">
					<a id="music-key-VoiceInc" href="javascript:void(0)" key='<%: MusicKey.VoiceInc.ToString() %>'>
						<span class="icon icon-music-key-VoiceInc"></span>
					</a>
					<a id="music-key-VoiceDec" href="javascript:void(0)"
									key='<%: MusicKey.VoiceDec.ToString() %>'><span class="icon icon-music-key-VoiceDec">
							</span></a>

				
					<a id="music-key-Play" href="javascript:void(0)" key='<%: MusicKey.Play.ToString() %>'
							keypause='<%: MusicKey.Pause.ToString() %>'><span class="icon icon-music-key-Play">
							</span>
					</a>
						<a id="music-key-Prev" href="javascript:void(0)"
							key='<%: MusicKey.Prev.ToString() %>'><span class="icon icon-music-key-Prev"></span>
					</a>

					<a id="music-key-Next" href="javascript:void(0)" key='<%: MusicKey.Next.ToString() %>'>
							<span class="icon icon-music-key-Next"></span>
					</a>
					
				</div>
			</div>
		</div>
		<div id="bottom" class="clearfix">
			<a id="music-key-SingleCycle" key='<%: MusicKey.SingleCycle.ToString() %>'>
				<i class="icon icon-music-key-SingleCycle"></i>
			</a>
			<a id="music-key-RandomPlay" key='<%: MusicKey.RandomPlay.ToString() %>'>
			<i class="icon icon-music-key-RandomPlay"></i>
			</a>
			<a id="music-key-SequentialPlay" key='<%: MusicKey.SequentialPlay.ToString() %>'>
			<i class="icon icon-music-key-SequentialPlay"></i>
			</a>
		</div>
	</div>
	<% Html.RenderPartial("Footer"); %>
</body>
</html>
