/**
 * 层叠样式切换效果，后面根据情况封装为jQuery插件
 * @author 广平
 */
$(function() {

    //需要做层叠的元素
    var layers = $("#demo li.slide"); 
    //最上层索引值，显示层索引值
    var cIndex = 0;
    //基础的z-index数值，层叠时会在这个数值的基础上增减
    var zIndex = 5;
    //被覆盖层缩小的数值
    var scaleInte = 0.05;
    //每层间隔的距离
    var leftInte = 50;

    //函数：根据当前层的索引进行显示,cIndex是要显示的层
    var showLayer = function(sIndex) {
        var layerCount = layers.size();
        
        //处理当前层
        var topLayer = layers.eq(sIndex);
        topLayer.css("z-index", zIndex);
        topLayer.find(".i_content").css("display", "block");
        topLayer.find(".i_content_fyb").css("display", "block");
        topLayer.find(".verticalTitle").css("display", "none");
        topLayer.css("transform", "scaleY(1)");
  
        //处理层叠进度条
        var progressBar = $(".turnpage");
        if (sIndex == 0) {
            //第一个显示
            progressBar.find("#slider").attr("src", "img/ico6_left.png").css("position", "relative").css("left","0px");
        } else if (sIndex < layerCount - 1) {
            progressBar.find("#slider").attr("src", "img/ico6.png").css("position", "relative").css("left", sIndex * 70 + "px");
        } else {
            //最后一个显示
            progressBar.find("#slider").attr("src", "img/ico6_right.png").css("position", "relative").css("left", "140px");
        }

        //处理当前层前面的层
        for (var i = sIndex - 1; i >= 0; i--) {
            var cLayer = layers.eq(i);
            var layerInte = sIndex - i;
            cLayer.find(".i_content").css("display", "none");
            cLayer.find(".i_content_fyb").css("display", "none");
            cLayer.css("z-index", zIndex - layerInte);
            var cScale = 1 - layerInte * scaleInte;
            cLayer.css("transform", "scaleY(" + cScale + ")");
            var vTitle = cLayer.find(".verticalTitle");
            vTitle.css("right", "").css("left", "10px").css("display", "block");
            vTitle.css("transform", "scaleY(1)");
        }

        //处理当前层后面的层
        for (var i = sIndex + 1; i <= layerCount - 1; i++) {
            var cLayer = layers.eq(i);
            var layerInte = i - sIndex;
            cLayer.find(".i_content").css("display", "none");
            cLayer.find(".i_content_fyb").css("display", "none");
            cLayer.css("z-index", zIndex - layerInte);
            var cScale = 1 - layerInte * scaleInte;
            cLayer.css("transform", "scaleY(" + cScale + ")");
            var vTitle = cLayer.find(".verticalTitle");
            vTitle.css("left", "").css("right", "-12px").css("display", "block");
            vTitle.css("transform", "scaleY(1)");
        }
        
        //设置当前层参数
        cIndex = sIndex;
    };

    //初始化显示
    showLayer(cIndex);
    //绑定点击事件
    layers.each(function(idx) {
        $(this).css("left", idx * leftInte + "px");
        $(this).find(".verticalTitle").on("click", function() {
            showLayer(idx);
        });
    });
    
	
    //下面实现触摸滑动翻页效果
	var $slide = $(".slide");
	
	$slide.each(function(){
		var slide_x;
		$(this).on("touchstart", function(event){
			slide_x = event.originalEvent.targetTouches[0].pageX;
		});
		$(this).on("touchend", function(event){
			var move_x = parseInt(event.originalEvent.changedTouches[0].pageX) - parseInt(slide_x);
			if(move_x > 20) {
				//右移，向前翻页
				if(cIndex > 0) {
					showLayer(cIndex-1);
				}
			} else if(move_x < -20){
				//左移，向后翻页
				if(cIndex < layers.length - 1 ) {
					showLayer(cIndex+1);
				}
			}
		});
		
		$(this).on("mousedown", function(event){
			event.preventDefault();
			slide_x =  event.pageX;
		});
		$(this).on("mouseup", function(event){
			var move_x = parseInt(event.pageX) - parseInt(slide_x);
			if(move_x > 20) {
				//右移，向前翻页
				if(cIndex > 0) {
					showLayer(cIndex-1);
				}
			} else if(move_x < -20){
				//左移，向后翻页
				if(cIndex < layers.length - 1 ) {
					showLayer(cIndex+1);
				}
			}
		});
	})

});