<?php require_once '../lib/Cs_Config.php';?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7>
<title>播放器</title>
<style type="text/css">
body {font-family:"Arial"; font-size:12px; margin:0; padding:0; background:#333;}
.bg {background:url(images/player.png); _background:url(images/player.gif);}
.mode-bg {background:url(images/mode.gif);}
.player {margin-left:auto; margin-right:auto; width:980px; height:35px;}
.player-l{float:left; width:3px; height:35px; background-position:0px 0px;}
.player-r{float:left; width:3px; height:35px; background-position:-11px 0px;}
.player-block {float:left; width:974px; display:block; height:35px; background-position:0px -38px; background-repeat: repeat-x; }
.player-block .playlist {float:left; margin-top:8px; margin-left:10px; margin-right:10px; width:240px; height:18px; border:1px solid #6d6d6d; background:#585858; position:relative; display:inline;}
.player-block .playlist p {position:absolute; width:10px; height:11px; left:4px; top:3px; background-position:-43px -13px; margin:0; padding:0;}
.player-block .playlist span {position:absolute; left:0px; top:0px; padding-left:20px; padding-right:10px; color:#fff;display:block; background-color:#616161;border-right:1px solid #6d6d6d; line-height:18px; _line-height:20px; height:18px; overflow:hidden;}
.player-block .playlist .select {position:absolute; right:0px;top:0px; border:3px solid #585858; width:238px; height:12px; z-index:3; display:none; *display:block; _display:none;}
.player-block .playlist select {width:183px; height:18px; position:absolute; top:0px; left:56px; background:#585858; border:none; padding:2px; color:#fff; padding-top:1px; z-index:1; font-size:12px;}
.seprator {float:left; width:3px; height:35px; background-position:-17px 0px; }
.player-block .controls {float:left; width: auto; height:35px; padding-left:5px; padding-right:5px; }
.player-block .controls a {margin-left:5px;display:inline; }
.player-block .controls a.single-mode {float:left; width:29px; height:26px; display:block; background-position:0px -40px; margin-top:5px; margin-left:0px;}
.player-block .controls a:hover.single-mode,.player-block .controls a.single-mode-select {background-position:0px -5px;}
.player-block .controls a.random-mode {float:left; width:28px; height:26px; display:block; background-position:-61px -40px; margin-top:5px; margin-left:0px;}
.player-block .controls a:hover.random-mode,.player-block .controls a.random-mode-select {background-position:-61px -5px;}
.player-block .controls a.order-mode {float:left; width:28px; height:26px; display:block; background-position:-31px -40px; margin-top:5px; margin-left:0px;}
.player-block .controls a:hover.order-mode,.player-block .controls a.order-mode-select {background-position:-31px -5px;}
.player-block .controls a.pre {float:left; width:26px; height:26px; display:block; background-position:-92px -40px; margin-top:5px; }
.player-block .controls a:hover.pre {background-position:-92px -5px;}
.player-block .controls a.pause {float:left; width:30px; height:30px; display:block; background-position:-171px -40px; margin-top:4px;}
.player-block .controls a:hover.pause {background-position:-171px -5px;}
.player-block .controls a.play {float:left; width:30px; height:30px; display:block; background-position:-130px -40px; margin-top:4px; }
.player-block .controls a:hover.play {background-position:-130px -5px;}
.player-block .controls a.next {float:left; width:26px; height:27px; display:block;background-position:-253px -40px; margin-top:4px;}
.player-block .controls a:hover.next {background-position:-253px -5px;}
.player-block .controls a.download {float:left; width:34px; height:20px; display:block; background-position:-58px -10px; margin-top:8px; color:#fff; padding-left:23px; line-height:20px; text-decoration:none;}
.player-block .info {float:left; width:300px; height:26px; color:#fff; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;}
.player-block .info .song-name {float:left; width:210px; height:15px; margin-top:2px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
.player-block .info .s {float:left; width:5px; height:15px; line-height:15px; margin-top:2px; text-align:right;}
.player-block .info .time {float:left;height:15px; line-height:15px; margin-top:2px; text-align:right;}
.player-block .info .tracks {float:left; width:290px; height:7px; background-position:0px -198px; margin-top:5px; padding-left:3px; position:relative;}
.player-block .info .tracks .download-bar {position:absolute; left:0px; top:-1px; _top:0px; width:30%; height:7px; margin-left:2px; display:inline; background-position:0px -231px; background-repeat:repeat-x; min-width:2px; z-index:0;}
.player-block .info .tracks .download-bar .l {float:left; width:3px; height:7px; background-position:0px -224px; margin-left:-3px; _margin-top:-1px;font-size:0px; position:relative; display:inline;}
.player-block .info .tracks .download-bar .r {float:right; width:5px; height:7px; background-position:0px -238px; margin-right:-3px; _margin-top:-1px;font-size:0px; position:relative; display:inline;}
.player-block .info .tracks .seek-bar {position:absolute; left:0px; top:0px; width:10%; height:7px; margin-left:2px; display:inline; background-position:0px -271px; background-repeat:repeat-x; min-width:2px; z-index:1;}
.player-block .info .tracks .seek-bar .l {float:left; width:4px; height:7px; background-position:0px -262px; margin-left:-3px; margin-top:-1px; _margin-top:-2px; font-size:0px; position:relative; display:inline; }
.player-block .info .tracks .seek-bar .r {float:right; width:3px; height:7px; background-position:-1px -279px; margin-right:-3px; margin-top:0px;font-size:0px; position:absolute; right:0px; display:inline;}
.player-block .info .tracks .seek-bar .point {position:absolute; right:0px; width:13px; height:13px; background-position:-146px -12px; margin-right:-5px; margin-top:-4px; _margin-top:-5px;}
.player-block .volumn {float:left; width:110px; height:26px; color:#fff; padding-left:5px; padding-right:5px; padding-top:2px; padding-bottom:2px;}
.player-block .volumn .mute {float:left; width:20px; height:17px;  background-position:-287px -2px; margin-top:10px; display:none;}
.player-block .volumn .unmute {float:left; width:20px; height:17px;  background-position:-287px -22px;; margin-top:10px;}
.player-block .volumn .line {float:left; width:80px; background-position:0px -107px; margin-top:11px; margin-left:10px; display:inline;}
.player-block .volumn .tracks {float:left; width:90%; height:10px; padding-left:6px; position:relative;}
.player-block .volumn .tracks .volumn-bar {position:absolute; left:0px; top:0px; width:40%; height:10px; margin-left:2px; display:inline; background-position:0px -85px; background-repeat:repeat-x; min-width:2px;}
.player-block .volumn .tracks .volumn-bar .l {float:left; width:4px; height:10px; background-position:0px -75px; margin-left:-3px; margin-top:0px; _margin-top:0px; font-size:0px; position:relative; display:inline; }
.player-block .volumn .tracks .volumn-bar .r {float:right; width:3px; height:10px; background-position:-1px -95px; margin-right:-3px; margin-top:0px;font-size:0px; position:absolute; right:0px; display:inline;}
.player-block .volumn .tracks .volumn-bar .point {position:absolute; right:0px; width:15px; _width:16px; height:15px; background-position:-122px -12px; margin-right:-5px; margin-top:-2px; _margin-top:-3px;}
</style>
</head>
<body>
<div id="player"></div>
<div class="player">
	<div class="player-l bg"></div>
	<div class="player-block bg">
		<div class="playlist">
			<span><p class="bg"></p>列表</span>
			<select class="selectobj" id="list"></select>
			<div class="select"></div>
		</div>
		<div class="seprator bg"></div>
		<div class="controls">
			<a href="#" class="pre mode-bg" title="上一曲"></a>
			<a href="#" class="play mode-bg" title="播放" style="display:none"></a>
			<a href="#" class="pause mode-bg" title="暂停"></a>
			<a href="#" class="next mode-bg" title="下一曲"></a>
			<span style="float:left; margin-left:5px; margin-right:3px; display:inline;">
				<a href="#" class="random-mode mode-bg"  title="随机播放"></a>
				<a href="#" class="order-mode mode-bg"  title="列表循环"></a>
				<a href="#" class="single-mode mode-bg"  title="单曲循环"></a>
			</span>
			<a href="#" class="download bg" id="download" title="下载舞曲">下载</a>
		</div>
		<div class="seprator bg"></div>
		<div class="info">
			<div class="song-name">欢迎使用音乐网播放器!</div><div class="time" id="playtime">00:00</div><div class="s" >/</div><div class="time" id="totaltime">00:00</div>
			<div class="tracks bg">
				<div class="download-bar bg">
					<div class="l bg">l</div>
					<div class="r bg">r</div>
				</div>
				<div class="seek-bar bg">
					<div class="l bg"></div>
					<div class="r bg"></div>
					<div class="point bg"></div>
				</div>
			</div>
		</div>
		<div class="seprator bg"></div>
		<div class="volumn">
			<a class="mute mode-bg"></a>
			<a class="unmute mode-bg"></a>
			<div class="line bg">
				<div class="tracks" id="volumn">
					<div class="volumn-bar bg">
					  <div class="l bg"></div>
					  <div class="r bg"></div>
					  <div class="point bg"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="player-r bg"></div>
</div>
<script language="javascript">
function DATA(songname,songurl)
{
	songname = (document.getElementById("list").options.length + 1) + "." + songname;
	var opt = new Option(songname,songurl);
	opt.setAttribute("downloadid",arguments[2]);
	document.getElementById("list").options.add(opt);
}

function GetRandomNum(Min,Max)
{
	var Range = Max - Min;
	var Rand = Math.random();
	return(Min + Math.round(Rand * Range));
}
</script>
<script language="javascript" type="text/javascript" src="http://<?php echo $_SERVER['HTTP_HOST'].Web_Path?>index.php/dance/real"></script>
<script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.jplayer.min.js"></script>
<script language="javascript" type="text/javascript">
var play_mode = "rand";
var loop_mode = "list"; //取值: list: 列表循环, single: 单曲循环, none: 不循环
$(document.body).ready(function(){
	$.jPlayer.timeFormat.showHour = true;
	$("#player").jPlayer({
		ready:function (event){
			$("#list").get(0).selectedIndex=0;
			$("#list").trigger("change");
		},
		play:function(event)
		{
			$(".song-name").html(event.jPlayer.status.media.title);
			var id = event.jPlayer.status.media.id;
			var src=event.jPlayer.status.src;
			if(id!="undefined")
			{
				$("#download").attr("target","_blank");
				$("#download").attr("href","http://<?php echo $_SERVER['HTTP_HOST'].Web_Path?>index.php/dance/down/id/"+id);
			}
			else
			{
				$("#download").attr("target","");
				$("#download").attr("href","#");
				return false;
			}
		},
		ended:function(event)
		{
			$(".song-name").html("播放完毕");
			if(play_mode=="single" && loop_mode=="single")
			{
				var index = $("#list").get(0).selectedIndex;
				$("#list").get(0).selectedIndex=index;
				$("#list").trigger("change");
			}
			else if(play_mode=="rand")
			{
				var max = document.getElementById("list").options.length;
				var targetIndex = GetRandomNum(0,max);
				$("#list").get(0).selectedIndex=targetIndex;
				$("#list").trigger("change");
			}
			$(".song-name").html("欢迎使用音乐网播放器!");
		},
		timeupdate:function(event)
		{
			var percent = (event.jPlayer.status.currentTime / event.jPlayer.status.duration) *100;
			$(".seek-bar").css("width",percent + "%");
			$("#duration").html($.jPlayer.convertTime(event.jPlayer.status.duration));

		},
		supplied:"mp3",
		swfPath:"js",
		wmode:"window",
		loop:false,
		volume:1,
		cssSelectorAncestor: "",
		cssSelector:{
			currentTime:"#playtime",
			duration:"#totaltime",
			seekBar:".download-bar",
			playBar:".seek-bar",
			play: ".play",
			pause: ".pause",
			mute: ".mute",
			unmute: ".unmute",
			volumeBar: "#volumn",
			volumeBarValue: ".volumn-bar"
		}
	});




	//绑定停止按钮
	$(".btn-stop").click(function(){
		$("#playing-state").html("播放停止");
		$("#playing-songname").html("欢迎使用DJ前卫音乐网播放器!");
		//$("#player").jPlayer("clearMedia");
		$("#player").jPlayer("stop");
                return false;
	});

	//绑定列表选择事件
	$("#list").change(function(){
		var url = $("#list").find("option:selected").val();
		var songname = $("#list").find("option:selected").text();
		var id = $("#list").find("option:selected").attr("downloadid");
		$("#player").jPlayer("setMedia",{title:songname,mp3:url,id:id}).jPlayer("play");
	});

	//绑定上一曲，下一曲事件
	$(".pre,.next").click(function(){
		var targetIndex = -1;
		var index = $("#list").get(0).selectedIndex;
		var mode = null;
		var state = $("#playing-state").html();
	    /*
        if(state=="播放完毕")
		{
			mode = "rand";
		}
		else
		{
			mode = play_mode;
		}
        */
        mode = play_mode;
		switch(mode)
		{
			//随机播放
			case "rand":
			{
				var max = document.getElementById("list").options.length;
				if(loop_mode=="single")
				{
					//单曲循环模式,
					targetIndex=index;
				}
				else
				{
					//targetIndex = GetRandomNum(0,max);
					if(this.className=="pre mode-bg")
					{
						if(index==0)
						{
							targetIndex==document.getElementById("list").options.length-1;
						}
						else
						{
							targetIndex=index-1;
						}
					}
					else if(this.className=="next mode-bg")
					{
						if(index==document.getElementById("list").options.length-1)
						{
							targetIndex=0;
						}
						else
						{
							targetIndex=index+1;
						}
					}
				}
				break;
			}
			//单曲循环
			case "single":
			{
				if(this.className=="pre mode-bg")
				{
					if(index==0)
					{
						targetIndex=document.getElementById("list").options.length-1;
					}
					else
					{
						targetIndex=index-1;
					}
				}
				else if(this.className=="next mode-bg")
				{
					if(index==document.getElementById("list").options.length-1)
					{
						targetIndex=0;
					}
					else
					{
						targetIndex=index+1;
					}
				}
				break;
			}
			//顺序播放
			case "order":
			{
				if(loop_mode=="single")
				{
					//单曲循环模式,
					targetIndex=index;
				}
				else
				{
					if(this.className=="pre mode-bg")
					{

						if(index==0)
						{
							if(loop_mode=="list")
							{
								targetIndex = document.getElementById("list").options.length-1;
							}
							else if(loop_mode=="none")
							{
								$(".btn-stop").trigger("click");
							}
						}
						else
						{
							targetIndex = index - 1;
						}
					}
					else if(this.className=="next mode-bg")
					{
						//已经达到最后一个id
						if(index==document.getElementById("list").options.length-1)
						{
							if(loop_mode=="list")
							{
								targetIndex = 0;
							}
							else if(loop_mode=="none")
							{
								$(".btn-stop").trigger("click");
							}
						}
						else
						{
							targetIndex = index + 1;
						}
					}
					else
					{
						return false;
					}
				}
				break;
			}
		}
		if(targetIndex!=-1)
		{
			$("#list").get(0).selectedIndex=targetIndex;
			$("#list").trigger("change");
		}
		return false;
	});

	//绑定循环模式
	$(".controls span a").click(function(){
		$(".controls span a.order-mode").removeClass("order-mode-select");
		$(".controls span a.random-mode").removeClass("random-mode-select");
		$(".controls span a.single-mode").removeClass("single-mode-select");

		var current_classname = $(this).attr("class").split(" ")[0];
		$(this).addClass(current_classname + "-select");
		switch(current_classname)
		{
			case "order-mode":
			{
				play_mode = "order";
				loop_mode = "list";
				break;
			}
			case "single-mode":
			{
				play_mode = "single";
				loop_mode = "single";
				break;
			}
			case "random-mode":
			{
				play_mode = "rand";
				loop_mode = "list";
				break;
			}

		}


		return false;
	});
});
</script>
<script type="text/javascript">
function get_cookie(_name){
	var Res=eval('/'+_name+'=([^;]+)/').exec(document.cookie); return Res==null?'':unescape(Res[1]);
};

function chk_open() {
    if( 'Y' == get_cookie('open_player') )
    {
        location.href='close.html';
    }else {
        setTimeout('chk_open()', 3000);
    }
};
chk_open();
</script>
</body>
</html>