$(function() {
	// packupHeader();
	var footerHeight = $(".footer").innerHeight();
	var $imian = $("#i-mian"),
		$viewportCont = $(".viewport-cont"),
		$fixedViewIco = $(".fixed-view-ico a"),
		viewportHeight = $(window).height(),
		VIEWPORT_LEN = 4,	// viewport 的个数
		curIndex = 0,
		canMousewheel = true,
		lazyScroll;
		
	// 滚动到 viewport, target 为滚动到的viewport的索引
	function viewportGo(target) {
		var direction;	// 滚动方向，down 向下滚, up向上滚
		// 判断target是否超出
		target = Math.max(0, Math.min(VIEWPORT_LEN, target));
		// 判断目标viewport和当前的是否是同一个
		if (target == curIndex) {
			return;
		}
		canMousewheel = false;
		//底部高度
		console.log(footerHeight);
		if (target == VIEWPORT_LEN) {
			$imian.stop().animate({"scrollTop": "+="+footerHeight},  1500, 'easeInOutExpo', function() {
				canMousewheel = true;
			});
			curIndex = VIEWPORT_LEN;
			$(".pc-bocweb-header3").css({
				"background":"#fff"
			});
			$(".fixed-view-ico").addClass("footercur");
			return;
		}
		if (curIndex == VIEWPORT_LEN && target == VIEWPORT_LEN - 1) {
			$imian.stop().animate({"scrollTop": "-="+footerHeight},  1500, 'easeInOutExpo', function() {
				canMousewheel = true;
			});
			curIndex = VIEWPORT_LEN - 1;
			$(".pc-bocweb-header3").css({
				"background":"transparent"
			});
			$(".fixed-view-ico").removeClass("footercur");
			return;
		}

		

		// 判断imian滚动的方向
		direction = target > curIndex ? "down" : "up";

		// 执行入场出场动画
		if (curIndex != VIEWPORT_LEN) {
			viewportOut(curIndex, direction);	
		}
		viewportIn(target, direction);
		
		// 更新浏览器右侧选中
		setTimeout(function() {
			$fixedViewIco.removeClass("cur").eq(target).addClass("cur");

			if (target == 1 || target == 3) {
				$(".pc-bocweb-header3").addClass("indexon");
			}else{
				$(".pc-bocweb-header3").removeClass("indexon");
			}
			
		}, 400);
		curIndex = target;
	};

	// viewport出去
	function viewportOut(viewportIndex, direction) {
		var viewportMarginTop,
			$viewport = $viewportCont.eq(viewportIndex),
			$children = $viewport.data("children"),
			len = $children.length;
		// 判断imian是向上还是向下滚动 down 向下滚, up向上滚
		viewportMarginTop = (direction == "down" ? "-" : "+") + "=150";

		$viewport.stop().animate({"margin-top": viewportMarginTop}, 1100, 'easeInOutExpo');

		// 子元素移动
		$children.each(function() {
			var targetTop = direction == "down" ? -(len - $(this).index())*150 : ($(this).index() + 1)*150;
			$(this).stop().animate({"top": targetTop}, 1100, 'easeInOutExpo', function() {
				$(this).css("top", 0);
			});
		});
	};

	// viewport进来
	function viewportIn(viewportIndex, direction) {
		var viewportMarginTop,
			$viewport = $viewportCont.eq(viewportIndex),
			$children = $viewport.data("children"),
			len = $children.length;

		// 判断imian是向上还是向下滚动 down 向下滚, up向上滚
		if (direction == "down") {
			viewportMarginTop = "-=150";
			viewportInitMarginTop = $viewport.data("defaultMarginTop") + 150;
		} else {
			viewportMarginTop = "+=150";
			viewportInitMarginTop = $viewport.data("defaultMarginTop") - 150;
		};
		// 滚动imian
		$imian.stop().animate({"scrollTop": viewportIndex * viewportHeight},  1500, 'easeInOutExpo');

		// 初始化$viewport 并运动
		$viewport.css("margin-top", viewportInitMarginTop).stop().delay(380).animate({"margin-top": viewportMarginTop}, 1100, 'easeInOutExpo', function() {
			canMousewheel = true;
		});

		// 初始化子元素并运动
		$children.each(function(index) {
			$(this).css("top", function(index) {
				return (direction == "down" ? index * 150 : -index*150);
			}).stop().delay(380).animate({"top": 0}, 1100, 'easeInOutExpo')
		});
	};

	// 鼠标滚动事件
	function fnMousewheel(e) {
		var direction,
			e = e || event;

		if (!canMousewheel) {
			return;
		}
		clearTimeout(lazyScroll);
		// 获取滚轮方向
		if (e.wheelDelta)  {//IE/Opera/Chrome 
			direction = e.wheelDelta;
		} else if (e.detail) {//Firefox 
			direction = e.detail * (-1);
		}

		lazyScroll = setTimeout(function() {
			// 判断滚动方向
			if (direction < 0) {
				viewportGo(curIndex + 1);


			} else {

				viewportGo(curIndex - 1);
			}	
		}, 100);
	}

    // 初始化页面
    function initViewport() {
        $imian.css({"overflow": "hidden", "height": viewportHeight});
        $imian.scrollTop(curIndex*viewportHeight);
        $(".viewport").css("overflow", "hidden");
        $fixedViewIco.eq(curIndex).addClass("cur");
        $(".pc-bocweb-header3").addClass("index");
    }
    if ($(window).width()>1024) {
    	initViewport();
    }
    // 初始化缓存
    $viewportCont.each(function() { // 保存默认的margin-top，缓存children()
        var defaultMarginTop = parseInt($(this).css("margin-top")),
            $children = $(this).children();

        $(this).data({"defaultMarginTop": defaultMarginTop, "children": $children});
        $children.css({"position": "relative"});
    });


	// 右侧小点绑定点击事件
	$fixedViewIco.on("click", function() {
		var index = $(this).index();

		viewportGo(index);
	});

	// 下一屏按钮添加事件
	$(".view-next").each(function(index) {
		$(this).on("click", function() {
			viewportGo(index+1);
		});
	});

	//绑定滚轮事件
	if ($(window).width()>1024) {
		if ($imian[0].addEventListener) {//ff3.5以下
			$imian[0].addEventListener("DOMMouseScroll", function(e) {
				fnMousewheel(e);
			}, false);
		}
		$imian[0].onmousewheel = function(e) {
			fnMousewheel(e);
		};
	}
	
    // 默认进入页面停留位置

    // (function() {
    //     curIndex = parseInt(location.hash.split("=")[1]) || 0;
    //     $imian.scrollTop(curIndex*viewportHeight);
    //     $fixedViewIco.removeClass("cur").eq(curIndex).addClass("cur");
    // })();

    // $(".menu-son, .fot-nav").on("click", " a", function() {
    // 	setTimeout(function() {
	   //  	var target = parseInt(location.hash.split("=")[1]) || 0;
	   //      if (target != curIndex) {
	   //          viewportGo(target);
	   //      }
    // 	}, 20);
    // });

	// 改变窗口大小事件
	$(window).on("resize", function() {
		viewportHeight = $(window).height();
		if ($(window).width()>1024) {
	    	initViewport();
	    }
	});
});