<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" Title="小酷音乐" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Main1" runat="server">
    <div id="login">
        <table border="0" cellpadding="4" cellspacing="0" style="border-collapse: collapse;">
            <tr>
                <td>
                    <table>
                        <tr >
                            <td align="center" colspan="2" style="font-size:16px; font-weight: bold; color: white; background-color: #507cd1" >
                                用户登录</td>
                        </tr>
                        <% if (Session["userId"] == null)
                           { %>
                        <tr"190px">
                            <td align="right">
                                <asp:Label ID="UserNameLabel" runat="server">帐户:</asp:Label></td>
                            <td align="right">
                                <asp:TextBox ID="userId" runat="server" Font-Size="0.8em"></asp:TextBox>                      
                                <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="userId"
                                    ErrorMessage="必须填写“帐户”。" ToolTip="必须填写“用户名”。" ValidationGroup="Login1">*</asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr"190px">
                            <td align="right">
                                <asp:Label ID="PasswordLabel" runat="server">密码:</asp:Label></td>
                            <td align="right">
                                <asp:TextBox ID="Password" runat="server" Font-Size="0.8em" TextMode="Password"></asp:TextBox>
                                <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
                                    ErrorMessage="必须填写“密码”。" ToolTip="必须填写“密码”。" ValidationGroup="Login1">*</asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr>
                            <td align="center" colspan="2">
                                <asp:Button ID="btn" runat="server" BackColor="White" BorderColor="#507CD1" BorderStyle="Solid"
                                    BorderWidth="1px" Font-Names="Verdana" Font-Size="13px" ForeColor="#284E98"
                                    Text="登录" ValidationGroup="Login1" OnClick="btn_Click" />
                                <asp:Button ID="button" runat="server" BackColor="White" BorderColor="#507CD1" BorderStyle="Solid"
                                    BorderWidth="1px" Font-Names="Verdana" Font-Size="13px" ForeColor="#284E98"
                                    Text="注册" OnClick="button_Click" />
                            </td>
                            </tr>
                          <tr"190px">
                            <td align="center" colspan="2" style="color: red">
                                <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                            </td>
                        </tr>
                         <%}
                           else
                          { %>
                           <tr>
                           <td> </td>
                           <td>欢迎 <%=Session["userId"]%> 用户登录小酷音乐在线<br />  <a href="lgout.aspx">[注销]</a></td>
                           </tr>
                               <%} 
                                  %>                     
                    </table>
                </td>
            </tr>
        </table>
    </div>
    <div id="search">
        <div id="s_txt">
            搜索区
            <asp:TextBox ID="txt" runat="server"></asp:TextBox>
            <asp:RadioButtonList ID="RadioButtonList2" runat="server" RepeatDirection="horizontal">
                <asp:ListItem Value="music" Selected="true">歌名</asp:ListItem>
                <asp:ListItem Value="singer">歌手</asp:ListItem>
                <asp:ListItem Value="album">专辑</asp:ListItem>
            </asp:RadioButtonList>
            <asp:Button ID="search_btn" runat="server" Text="搜索" OnClick="search_btn_Click" />
        </div>
    </div>
    <div id="list">
        <a href="javascript:l(1)">音乐排行</a><br />
        <a href="javascript:l(2)">专辑排行</a><br />
        <a href="javascript:l(3)">歌手排行</a><br />
         <a href="javascript:l(4)">我的收藏</a>
    </div>
</asp:Content>
<asp:Content ID="Content" ContentPlaceHolderID="Main2" runat="server">
<div id="banner">
    <div style="MARGIN: 0px; OVERFLOW: hidden; WIDTH: 600px; POSITION: relative; HEIGHT: 270px;">
    <div id=l1 style="LEFT: 0px; POSITION: absolute; TOP: 0px"><a id=linkl1 
      href="playlist.aspx" target="_blank" ><img id=img51 height=270 src="images/banner/index_roll_1.jpg" width=600
      border=0 /></a></div>
    <div id=l2 style="LEFT: 360px; POSITION: absolute; TOP: 0px"><a id=linkl2 
      href="playlist.aspx" target="_blank"><img id=img52 height=270 src="images/banner/index_roll_2.jpg" width=600
      border=0 /></a></div>
    <div id=l3 style="LEFT: 720px; POSITION: absolute; TOP: 0px"><a id=linkl3 
      href="playlist.aspx" target="_blank"><img id=img53 height=270 src="images/banner/index_roll_3.jpg" width=600
      border=0 /></a></div>
    <div id=l4 style="LEFT: 1080px; POSITION: absolute; TOP: 0px"><a id=linkl4 
      href="playlist.aspx" target="_blank"><img id=img54 height=270 src="images/banner/index_roll_4.jpg" width=600
      border=0 /></a></div>
    <div id=l5 style="LEFT: 1440px; POSITION: absolute; TOP: 0px"><a id=linkl5 
      href="playlist.aspx" target="_blank"><img id=img55 height=270 src="images/banner/index_roll_5.jpg" width=600
      border=0 /></a></div>
   
    <div id=lfloat 
      style="Z-INDEX: 9999999; LEFT: 400px; WIDTH: 180px; POSITION: absolute; TOP: 250px; HEIGHT: 15px"><a 
      id=btnimg1 href="#" 
      target=_blank><img id=pnl1 onMouseOver="javascript:picsw('l1');" 
      style="BORDER-TOP-STYLE: none; MARGIN-RIGHT: 5px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" 
      onmouseout=javascript:startauto(); height=15 
      src="images/banner/pl1.gif" width=25 name=pnl1 /></a><a id=btnimg2 
      href="#" 
      target=_blank><img id=pnl2 onMouseOver="javascript:picsw('l2');" 
      style="BORDER-TOP-STYLE: none; MARGIN-RIGHT: 5px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" 
      onmouseout=javascript:startauto(); height=15 
      src="images/banner/pl2a.gif" width=25 /></a><a id=btnimg3 
      href="#" target=_blank><img 
      id=pnl3 onMouseOver="javascript:picsw('l3');" 
      style="BORDER-TOP-STYLE: none; MARGIN-RIGHT: 5px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" 
      onmouseout=javascript:startauto(); height=15 
      src="images/banner/pl3a.gif" width=25 /></a><a id=btnimg4 
      href="#" target=_blank><img 
      id=pnl4 onMouseOver="javascript:picsw('l4');" 
      style="BORDER-TOP-STYLE: none; MARGIN-RIGHT: 5px; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" 
      onmouseout=javascript:startauto(); height=15 
      src="images/banner/pl4a.gif" width=25 /></a><a id=btnimg5 
      href="#" 
      target=_blank><img id=pnl5 onMouseOver="javascript:picsw('l5');" 
      style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: none" 
      onmouseout=javascript:startauto(); height=15 
      src="images/banner/pl5a.gif" width=25 /></a></div>
  </div>
  </div>

<script language= "javascript" type="text/javascript">
    var rdm = Math.random();
    rdm = Math.floor(rdm * 5) + 1;
    document.getElementById("img51").src = "images/banner/index_roll_" + rdm + ".jpg";
    document.getElementById("linkl1").href = document.getElementById("linkl" + rdm + "").href;
    document.getElementById("img5" + rdm + "").src = "images/banner/index_roll_1.jpg";
    document.getElementById("linkl" + rdm + "").href = "#"
    document.getElementById("btnimg1").href = document.getElementById("linkl1").href;
    document.getElementById("btnimg" + rdm + "").href = "#"
    var layeri = 0;
    var stopshow = 0;
    var timeout = 0;

    function moveformat(id) {
        if (stopshow == 0) {
            picswin(id);
            var browser = navigator.appName;
            if (browser != "Microsoft Internet Explorer") {
                layeri++;
                document.getElementById(id).style.zIndex = layeri;
                document.getElementById(id).style.left = (0 + "px");
                var linkid = "link" + id;
            }
            else {
                document.getElementById(id).style.posLeft = 600;
                layeri++;
                document.getElementById(id).style.zIndex = layeri;
                movestart(id);
            }
        }
    }

    function movestart(id) {
        if (document.getElementById(id).style.posLeft != 0) {
            var mnum = document.getElementById(id).style.posLeft * 0.2;
            var x = document.getElementById(id).style.posLeft - mnum;
            document.getElementById(id).style.posLeft = x;
            moveid = id;
            setTimeout("movestart(moveid);", 30);
        }
        else {
            var linkid = "link" + id;
        }
    }

    var i = 1;

    function showindexad() {
        if (i < 5 && stopshow == 0) {
            i++;
            var picid = "l";
            picid = picid + i;
            setTimeout("moveformat('" + picid + "');showindexad();", 5000);
        }
        else if (stopshow == 0) {
            i = 1;
            var picid = "l";
            picid = picid + i;
            setTimeout("moveformat('" + picid + "');showindexad();", 5000);
        }
        else {
            timeout = 1;
        }
    }

    showindexad();

    function picsw(id) {
        if (document.getElementById("pn" + id + "").src != "images/banner/p" + id + ".gif") {
            picswin(id);
            showindexad2(id);
        }
    }

    function picswin(id) {
        document.getElementById("pnl1").src = "images/banner/pl1a.gif";
        document.getElementById("pnl2").src = "images/banner/pl2a.gif";
        document.getElementById("pnl3").src = "images/banner/pl3a.gif";
        document.getElementById("pnl4").src = "images/banner/pl4a.gif";
        document.getElementById("pnl5").src = "images/banner/pl5a.gif";
        document.getElementById("pn" + id + "").src = "images/banner/p" + id + ".gif";
    }

    function showindexad2(id) {
        stopshow = 1;
        var browser = navigator.appName;
        if (browser != "Microsoft Internet Explorer") {
            layeri++;
            document.getElementById(id).style.zIndex = layeri;
            document.getElementById(id).style.left = (0 + "px");
            var linkid = "link" + id;
        }
        else {
            document.getElementById(id).style.posLeft = 600;
            layeri++;
            document.getElementById(id).style.zIndex = layeri;
            movestart(id);
        }
    }
    function startauto() {
        stopshow = 0;
        if (timeout == 1) {
            showindexad();
            timeout = 0;
        }
    }

</script>
    <div>
        <h1 id="ltitle">
            音乐排行榜
        </h1>
    </div>
    <div id="mlist">      
    </div>
    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(function () {
            l(1);
        })
        function l(m) {
            $.ajax({
                type: "post",
                url: "ajaxmlist.aspx",
                data: "id=" + m,
                success: function (msg) {
                    if (m == "1") {

                        $("#ltitle").html("音乐排行榜")

                    }
                    if (m == "2") {

                        $("#ltitle").html("专辑排行榜")

                    }
                    if (m == "3") {

                        $("#ltitle").html("歌手排行榜")

                    }
                    if (m == "4") {

                        $("#ltitle").html("我的收藏")

                    }
                    //将数据放入LIST中
                    $("#mlist").html(msg);
                }

            })

        }

        function addsc(m) {
            $.ajax({
                type: "post",
                url: "ajaxsc.aspx",
                data: "id=" + m,
                success: function (msg) {
                    if (msg == "0") {
                        alert("请您先登录！")
                    }
                    if (msg == "1") {

                        alert("收藏成功！")
                    }
                    if (msg == "2") {

                        alert("收藏失败！")
                    }
                    if (msg == "3") {

                        alert("已经收藏了")
                    }
                }

            })
        }
    </script>
</asp:Content>