<%--
  Created by IntelliJ IDEA.
  User: ZJW
  Date: 2019/4/11
  Time: 23:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Logined</title>
    <link rel="shortcut icon" href="http://dsada1.oss-cn-beijing.aliyuncs.com/img/xicon.png" type="image/x-icon">
    <script src="bootstrap/js/jquery-3.3.1.min.js"></script>
    <style type="text/css">
        body{
            background-color: #2b2b2b;
            text-align:center;
        }
        a{
            text-decoration: none;
            color: white;
        }
        input{

            border:none;//去除边框
        border-radius:0;
            box-shadow: 0px 0px 0px 0px;//去除阴影
        }
        .basic{
            margin:0 auto;
            /*border:1px solid #000;*/
            width:960px;
            height:920px;
        }
        .top{
            height: 80px;
            left: 0px;
            /*border:1px solid red;*/
        }
        .titleBG{
            margin: 0px;
            position: relative;
            left: -7px;
            float: right;
        }
        .titleImg{
            position: relative;

            top: -235px;
            left: -240px;

        }
        .login{
            font-family: "Microsoft YaHei";
            font-size: 10px;
            position: relative;
            top: -300px;
            left: 240px;
            text-align: right;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .bannerImg{
            margin:0 auto;
            position: absolute;
            /*border:1px solid red;*/
        }
        .banner{
            background-color: #111231;
            position: absolute;
            height: 30px;
            width: 100%;
            color: white;
            font-family: "Microsoft YaHei";
            text-decoration: none;
            /*border:1px solid red;//*/
        }
        .bannerChoice{
            position: relative;
            left: -250px;
            top: 4px;
            font-weight: bold;
        }
        .bannerSearch{
            width:200px;
            height: 30px;
            position: relative;
            top:-20px ;
            left:600px ;

        }
        .bannerForm{
            width: 200px;
            position: relative;
            top: 33px;
            left: 680px;

        }
        .bannerSearchBG{

        }
        .bannerSearchText{
            position: relative;
            top: -61px;
            left: -680px;

            width: 120px;
            margin: 0;
            padding: 0;
            background: transparent;
            color: #fff;
        }
        .bannerSearchIco{
            position: relative;
            top: -56px;
            left: -675px;
            /*border: 1px solid red;*/
        }
        .google{
            position: relative;
            top: -50px;
            left: 400px;
        }
        .left{
            /*border: 1px solid yellow;*/
            height: 645px;
            width: 240px;
            position: absolute;
            top: 479px;
            background-color: #201f31;
        }
        .personImg{
            margin: 10px 0 0 10px;
            position: relative;
            left: -55px;
        }
        .personDetail{
            /*border: 1px solid green;*/
            font-family: 'Microsoft YaHei';
            width: 100px;
            height: 80px;
            position: relative;
            top: -138px;
            left: 130px;
            font-size: 10px;
            text-align: right;
            color: white;
        }
        .likes{
            font-family: 'Microsoft YaHei';
            font-weight: bold;
            position: relative;
            top: -55px;
            left: -70px;
            color: white;
        }
        .reload{
            position: relative;
            top: -75px;
            left: 85px;
        }
        .likesDetail{
            /*border: 1px solid green;*/
            height: 300px;
            width: 210px;
            position: relative;
            top: -40px;
            left: 25px;
            color: white;
            font-size: 10px;
            font-family: 'Microsoft YaHei';
        }
        .LDname{
            text-align: left;
            margin: 0;
        }
        .LDcode{
            text-align: right;
            margin: 0;
        }
        .right{
            /*border: 1px solid green;*/
            height: 645px;
            width: 715px;
            position: relative;
            top: 391px;
            left: 240px;
            background-color: #434059;
            color: white;
        }
        .searchedSongName{
            /*background-color: white;*/
            position: relative;
            height: 15px;
            top:-50px;
            left: -40px;
        }
        .bottom{
            /*border: 1px solid red;*/
            width: 955px;
            height: 100px;
            background-color: #1d1f2e;
            /*float: bottom;*/
            position: relative;
            top: 300px;
        }
        .copyright{
            color: white;
            font-size: 12px;
            font-family: 'Microsoft YaHei';
            font-weight: normal;
            text-align: left;
            position: relative;
            top: 35px;
            left: 120px;
        }
        .contectUS{
            position: relative;
            left: 240px ;
            top:-26px;
        }
        .mySongList{
            border: 0px solid red;
            position: relative;
            height: auto;
            left: 70px;
            top: 0;
        }
        table th,table td{
            border:0px solid #aaa;
        }
        table{
            color: white;
            border-collapse:collapse;
        }
        .heart{
            /*border: 1px solid green;*/
            width: 11px;
            height: 11px;
        }



    </style>
    <%--<script type='text/javascript'>--%>
    <%--//禁用右键（防止右键查看源代码）--%>
    <%--window.oncontextmenu=function(){return false;}--%>
    <%--//禁止任何键盘敲击事件（防止F12和shift+ctrl+i调起开发者工具）--%>
    <%--window.onkeydown = window.onkeyup = window.onkeypress = function () {--%>
    <%--window.event.returnValue = false;--%>
    <%--return false;--%>
    <%--}--%>
    <%--//如果用户在工具栏调起开发者工具，那么判断浏览器的可视高度和可视宽度是否有改变，如有改变则关闭本页面--%>
    <%--var h = window.innerHeight,w=window.innerWidth;--%>
    <%--window.onresize = function () {--%>
    <%--if (h!= window.innerHeight||w!=window.innerWidth){--%>
    <%--window.close();--%>
    <%--window.location = "about:blank";--%>
    <%--}--%>
    <%--}--%>
    <%--</script>--%>

    <script type="text/javascript">
        <%--function playMusic(thisId){--%>
        <%--var audio = document.getElementById("music");--%>
        <%--audio.src ="http://music.163.com/song/media/outer/url?id="+thisId+".mp3";--%>
        <%--console.log(thisId + " " + audio.src);--%>
        <%--audio.load();--%>
        <%--audio.play();--%>
        <%--}--%>

    </script>

</head>
<body >
<div class="basic">
    <div id="top" class="top">
        <img class="titleBG" src="http://dsada1.oss-cn-beijing.aliyuncs.com/img/mainBasic.png"/>
        <a href="logo.action"><img class="titleImg" src="http://dsada1.oss-cn-beijing.aliyuncs.com/img/title.png"></a>
        <a class="login" href="aboutMe.action">Welcome,${username}</a>
    </div>
    <div class="bannerImg" >
        <div class="banner">
            <div class="bannerChoice">
                <a href="findMusic.action">发&nbsp;现&nbsp;音&nbsp;乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="myMusic.action">我&nbsp;的&nbsp;音&nbsp;乐</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="myFriends.action">我&nbsp;的&nbsp;朋&nbsp;友</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div class="bannerSearch">
                <img class="bannerSearchBG" src="http://dsada1.oss-cn-beijing.aliyuncs.com/img/bannerSearchBG.png" alt="">
                <form class="bannerForm" method="get" name="serach" action="searchSongs.action">
                    <input class="bannerSearchText" type="text" name="searchText">
                    <img class="bannerSearchIco" src="http://dsada1.oss-cn-beijing.aliyuncs.com/img/bannerSearchIco.png" onclick="serach.submit()">
                </form>
            </div>
            <img class="google" src="http://dsada1.oss-cn-beijing.aliyuncs.com/img/google.png" alt="">
        </div>
        <img src="http://dsada1.oss-cn-beijing.aliyuncs.com/img/banner_picture.png"/>
    </div>
    <div class="left">
        <img class="personImg" id="pict" src="">
        <script>
            var  url ="https://music-ol.oss-cn-beijing.aliyuncs.com/personPict/%23${noSharp}?"+Math.random();
            document.getElementById("pict").src = url;
        </script>
        <div class="personDetail">
            ${username}
            <br><br>
            ${personCode}
            <br><br>
            L.${personLevel}
            <br><br>
            您已经搜索过${personListened}首MP3
        </div>
        <%--<form name="reload" action="loginSuccess.action?username=${username}&password=${password}">--%>
        <div class="likes">猜你喜欢:</div>
        <%--<a class="reload" href="#" onclick="reload.submit()">换一下</a>--%>
        <div id="likesDetail" class="likesDetail">
            <script type="text/javascript">
                function cancel(thisId) {
                    $.ajax({
                        url:"unlikeAct.action",
                        type:"post",
                        async : false,
                        data:{"id":thisId},
                        dataType:"json",
                        success:function(data){
                            if (data!=1 ) {  //failed
                                alert("Sorry,Unliked Failed");
                            }else {
                                location.reload();
                                alert("successed");
                            }
                        },
                        error : function(re,jqXHR){
                            alert(re+jqXHR.status)
                        }
                    });
                }
                function playMusic(thisId){
                    var audio = document.getElementById("music");
                    audio.src ="http://music.163.com/song/media/outer/url?id="+thisId+".mp3";
                    console.log(thisId + " " + audio.src);
                    audio.load();
                    audio.play();
                }
                function buyMusic(thisId) {
                    $.ajax({
                        url:"buyAct.action",
                        type:"post",
                        async : false,
                        data:{"id":thisId},
                        dataType:"json",
                        success:function(data){
                            if (data!=1 ) {  //failed
                                alert("Sorry,you had bought");
                            }else {
                                location.reload();
                                alert("successed");
                            }
                        },
                        error : function(re,jqXHR){
                            alert(re+jqXHR.status)
                        }
                    });
                }


            </script>

            <c:forEach items="${list}" var="list"><div>
                <div class="LDname">${list.name}</div>
                <script type="text/javascript">
                    function DontLike${list.id}() {
                        document.getElementById("${list.id}ILike").src ="https://dsada1.oss-cn-beijing.aliyuncs.com/img/unlike.png?"+Math.random();//img.src ok
                        document.getElementById("${list.id}DontLike").src =""+Math.random();//img.src ok

                        <%--document.getElementById("${list.id}DontLike").onclick="${list.id}LikedSpan"; //span.onclick--%>
                        <%--//document.getElementById("${list.id}DontLike").value="${list.id}ILike";//img.id--%>
                        <%--$("[id = '${list.id}DontLike']").val("${list.id}ILike")--%>
                    }
                    function like${list.id}() {
                        document.getElementById("${list.id}DontLike").src ="https://dsada1.oss-cn-beijing.aliyuncs.com/img/like.png?"+Math.random();
                        document.getElementById("${list.id}ILike").src =""+Math.random();

                        <%--document.getElementById("${list.id}LikedSpan").onclick="${list.id}DontLike";--%>
                        <%--//document.getElementById("${list.id}ILike").value="${list.id}DontLike";--%>
                        <%--$("[id = '${list.id}Like']").val("${list.id}DontLike")--%>
                    }
                    function likeAct${list.id}(){
                        $.ajax({
                            url:"likeAct.action",
                            type:"post",
                            data:{"id":${list.id}},
                            dataType:"json",
                            success:function(data){
                                if (data!=1 ) {  //failed
                                    alert("Sorry,Liked Failed");
                                }else {
                                    location.reload();

                                }

                            }
                        });
                    }
                    function unlikeAct${list.id}(){
                        $.ajax({
                            url:"unlikeAct.action",
                            type:"post",
                            data:{"id":${list.id}},
                            dataType:"json",
                            success:function(data){
                                if (data!=1 ) {  //failed
                                    alert("Sorry,Unliked Failed");
                                }else {
                                    location.reload();

                                }

                            }
                        });
                    }
                    <%--id="LikedSpan${list.id}"--%>
                </script>

                <div class="LDcode" >
                            <span >
                                <img class="heart" onclick="like${list.id}();likeAct${list.id}();" id="${list.id}ILike" src="https://dsada1.oss-cn-beijing.aliyuncs.com/img/unlike.png">
                                <img class="heart" onclick="DontLike${list.id}();unlikeAct${list.id}();" id="${list.id}DontLike" src="">
                            </span>&nbsp;&nbsp;<span onclick="playMusic(${list.id})">#${list.id}</span></div>
                <br>
            </div></c:forEach>

        </div>
        <%--</form>--%>
    </div>


    <div class="right">
        <div class="searchedSongName">
            ${searchedSong.name}
            <a href="ILike.action"><img src=""></a>
        </div>
        <%--end of div-showSearchedSongName--%>

        <audio id="music" controls="controls">
            <source src="http://music.163.com/song/media/outer/url?id=${searchedSong.id}.mp3" type="audio/mp3" />
            Your browser does not support this audio format.
        </audio>
        <%--end of andio--%>

        <div class="mySongList">
            <div class="tableWrap" style="margin:20px;width:616px;">
                <%--<label>可滚动表格——表格宽度自动每列宽度设置<col></label>--%>
                <table class="table-thead">
                    <colgroup>
                        <col width="170">
                        <col width="400">
                        <col width="240">
                        <col width="17">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>搜索ID</th>
                        <th>歌曲名称</th>
                        <th>操作</th>
                        <th></th>
                    </tr>
                    </thead>
                </table>
                <div class="comTbody" style="height:200px;overflow:auto;border:0px solid #ddd">

                    <c:forEach items="${mySong}" var="mySongList">

                        <table class="table-tbody" style="border-top: 0;">
                            <colgroup>
                                <col width="160">
                                <col width="400">
                                <col width="240">
                            </colgroup>
                            <tbody>
                            <tr>
                                <td>#${mySongList.id}</td>
                                <td>${mySongList.name}</td>
                                <td><a href="#" onclick="cancel(${mySongList.id})"> Unlike</a>
                                    &nbsp; <a href="#" onclick="playMusic(${mySongList.id})">Play</a>
                                    &nbsp;<a href="#" onclick="buyMusic(${mySongList.id})">Buy</a>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </c:forEach>
                </div>
                <%--end of div-comTbody--%>
            </div>
            <%--end of div-tableWarp--%>
        </div>
        <%--end of div-mysonglist--%>

    </div>

    <div class="bottom">
        <div class="copyright">Holy版权所有©2017-2018   违法和不良信息举报电话：xxxx-xxxxxxxx <br>举报邮箱：xxx@holys.top</div>
        <img class="contectUS" src="http://dsada1.oss-cn-beijing.aliyuncs.com/img/1545468262.png">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <img class="contectUS" src="http://dsada1.oss-cn-beijing.aliyuncs.com/img/1545468365.png">
    </div>
</div>
</body>
</html>
