var main = document.querySelector("#main");
var oLis = document.querySelectorAll("#list>li");
var winW = document.documentElement.clientWidth;
/*Éè±¸µÄ¿í¶È*/
var winH = document.documentElement.clientHeight;
/*Éè±¸µÄ¸ß¶È*/
var desW = 640;
/*Éè¼Æ¸åµÄ¿í¶È*/
var desH = 960;
/*Éè¼Æ¸åµÄ¸ß¶È*/
/*Éè±¸µÄ¿í¸ß±ÈÀý 320/568
 * Éè¼Æ¸åµÄ¿í¸ß±ÈÀý 320/480
 * 320/568 <320/480  -->ËµÃ÷°´ÕÕ¸ß¶ÈÈ¥Ëõ·Å(960->568)  568/960 ->winH/desH
 * */
if (winW / winH < desW / desH) {
    main.style.webkitTransform = "scale(" + winH / desH + ")";
} else {
    main.style.webkitTransform = "scale(" + winW / desW + ")";
}
[].forEach.call(oLis, function () {
    var oLi = arguments[0];
    oLi.index = arguments[1];
    oLi.addEventListener("touchstart", start, false);
    oLi.addEventListener("touchmove", move, false);
    oLi.addEventListener("touchend", end, false);
})

function start(e) {
    this.touchStart = e.changedTouches[0].pageY;
}

function move(e) {
    e.preventDefault();
    this.flag = true;
    var touchMove = e.changedTouches[0].pageY;
    var pos = touchMove - this.touchStart;
    var index = this.index;//µ±Ç°ÕâÕÅµÄË÷Òý
    [].forEach.call(oLis, function () {
        arguments[0].className = "";
        arguments[0].style.paddingTop = "8px";
        if (arguments[1] != index) {//Ö»ÓÐµ±Ç°ÕâÕÅÊÇÏÔÊ¾µÄ
            arguments[0].style.display = "none"
        }
        arguments[0].firstElementChild.id = "";
    })
    if (pos > 0) {/*¡ý*/
        //ÍùÏÂ»¬»ñµÃÉÏÒ»ÕÅË÷Òý
        this.prevsIndex = (index == 0 ? oLis.length - 1 : index - 1);
        var duration = -winH + pos;  //winHÊÇÓÉ×Ô¼º¶¨µÄ

    } else if (pos < 0) {/*¡ü*/
        //ÍùÉÏ»¬»ñµÃÏÂÒ»ÕÅË÷Òý
        this.prevsIndex = (index == oLis.length - 1 ? 0 : index + 1);
        var duration = winH + pos;
    }
    //°´ÕÕÒÆ¶¯µÄ¾àÀë/Éè±¸µÄ¸ß¶È
    oLis[index].style.webkitTransform = "scale(" + (1 - Math.abs(pos) / winH * 1 / 2) + ") translate(0," + pos + "px)";//°´ÕÕ»¬¶¯µÄ¾àÀëÒÆ¶¯
    oLis[this.prevsIndex].style.webkitTransform = "translate(0," + duration + "px)";
    oLis[this.prevsIndex].style.display = "block";
    oLis[this.prevsIndex].className = "zIndex";//±£Ö¤ÔÚ×îÉÏÃæ
}
function end(e) {
    if (this.flag) {   // ÅÐ¶ÏÊÇµã»÷»¹ÊÇ»¬¶¯
        oLis[this.prevsIndex].style.webkitTransform = "translate(0,0)";
        oLis[this.prevsIndex].style.webkitTransition = "0.5s";
        oLis[this.prevsIndex].addEventListener("webkitTransitionEnd", function () {
            this.style.webkitTransition = "";
            this.firstElementChild.id = "a" + (this.index + 1)
        }, false)
    }
}

//ÒÔÏÂ´úÂëÊÇÓÃÀ´µ÷ÊÔ
document.addEventListener("touchmove", function (e) {
    //console.log(e.target.id);
}, false)

//ÒôÀÖ
window.addEventListener("load", function() {
    var a = document.querySelector(".music")
        , b = a.querySelector("audio");
    b.addEventListener("canplay", function() {
        a.style.display = "block",
            a.className = "music move"
    }, !1),
        b.play(),
        $t.tap(a, {
            end: function() {
                return b.paused ? (b.play(),
                    a.className = "music move",
                    void 0) : (b.pause(),
                    a.className = "music", void 0)
            }
        })
}, !1);
