var _Step03_Left_Inteval_Index = 0,
	_Step03_Left_Inteval = null;
var _Step03_Right_Inteval_Index = 0,
	_Step03_Right_Inteval = null;
var img_step03_left = [
	"url(img/pro1.png) no-repeat",
	"url(img/pro2.png) no-repeat",
	"url(img/pro3.png) no-repeat",
	"url(img/pro5.png) no-repeat",
	"url(img/pro6.png) no-repeat",
	"url(img/pro7.png) no-repeat"
];
var img_step03_right = [
	"url(img/dtm_type.png) no-repeat",
	"url(img/dtm_fa.png) no-repeat",
	"url(img/upload_img.png) no-repeat",
	"url(img/tmwz.png) no-repeat",
	"url(img/tableAddask1.gif) no-repeat"
];
var click_step04_tab = false;
$(function() {
	var resetSize = function() {
		var videoHeight = $("#videoElement")[0].videoHeight;
		var videoWidth = $("#videoElement")[0].videoWidth;
		$(".step02>.bottom>.right>div.vedio_part>div.vedio-player-btn").css("width", $("#videoElement").width() + "px");
		$(".step02>.bottom>.right>div.vedio_part>div.vedio-player-btn").css("height", videoHeight * $("#videoElement").width() /
			videoWidth + "px");
		$(".step02>.bottom>.right>div.vedio_part>div.vedio-player-btn>.icon").css("margin-top", (videoHeight * $(
				"#videoElement").width() / videoWidth - $(".step02>.bottom>.right>div.vedio_part>div.vedio-player-btn>.icon").height()) /
			2 + "px")

		var border = 0.14 * parseInt($("html").css("font-size"));
		$(".vedio-player-background").css("width", $("#videoElement").width() + "px");
		$(".vedio-player-background").css("height", videoHeight * $("#videoElement").width() / videoWidth + "px");
		$(".vedio-player-background").css("margin", -1 * border + "px");
		$(".vedio-player-background").css("border", border + "px solid #FFFFFF");
	}
	$("#videoElement").on("pause", function() {
		$(this).attr("controls", false);
		$(".step02>.bottom>.right>div.vedio_part>div.vedio-player-btn").addClass("pause");
	})
	$(".step02>.bottom>.right>div.vedio_part>div.vedio-player-btn>.icon").on("click", function() {
		$(".step02>.bottom>.right>div.vedio_part>div.vedio-player-btn").removeClass("pause");
		$("#videoElement").attr("controls", true);
		$("#videoElement").get(0).play();
	});
	$("#videoElement").on("canplaythrough", function() {
		resetSize();
	});
	$(window).resize(function() { //当浏览器大小变化时
		resetSize();
	});

	$(".step04>.path>div.tab").on("click", function(event) {
		event.stopPropagation();
		if (!click_step04_tab) click_step04_tab = !click_step04_tab;
		$(".step04>.path>div.tab").removeClass("active");
		var tab = $(this).data("tab");
		$(".step04>.path>div.tab[data-tab='" + tab + "']").addClass("active");
	});

	$(document).scroll(function() {
		var scroH = $(document).scrollTop(); //滚动高度
		var contentH = $(".step04>.path").offset().top //距顶部高度;
		$(".step04>.path.float").css("left", ($(".step04>.path:not(.float)").offset().left - $(document).scrollLeft()) +
			"px")
		if (contentH <= scroH) {
			!$(".step04>.path.float").hasClass("show") && $(".step04>.path.float").addClass("show");
		} else {
			$(".step04>.path.float").hasClass("show") && $(".step04>.path.float").removeClass("show");
		}
		if (click_step04_tab) {
			click_step04_tab = !click_step04_tab;
		} else {
			if ($("#tab3").offset().top <= scroH + $(".step04>.path.float").height()) {
				$(".step04>.path>div.tab").removeClass("active");
				$(".step04>.path>div.tab[data-tab='tab3']").addClass("active");
			} else if ($("#tab2").offset().top <= scroH + $(".step04>.path.float").height()) {
				$(".step04>.path>div.tab").removeClass("active");
				$(".step04>.path>div.tab[data-tab='tab2']").addClass("active");
			} else if ($("#tab1").offset().top <= scroH + $(".step04>.path.float").height()) {
				$(".step04>.path>div.tab").removeClass("active");
				$(".step04>.path>div.tab[data-tab='tab1']").addClass("active");
			}
		}
	});

	$(".step04>.path.float>div.mask").css("left", $(".container").offset().left);

	$(".step03>.body>div.left>div>div>ul").css("position", "relative");
	$(".step03>.body>div.left>div>div>ul").css("width", "100%");
	$(".step03>.body>div.left>div>div>ul").css("height", "100%");
	$(img_step03_left).each(function(index, img) {
		var $li = $("<li></li>");
		$li.css("background", img);
		$li.css("background-size", "100%");
		$li.css("position", "absolute");
		if (index === 0) {
			$li.css("opacity", 1);
			$li.css("top", "5%");
		} else {
			$li.css("opacity", 0);
			$li.css("top", "10%");
		}
		$li.css("left", "10%");
		$li.css("width", "80%");
		$li.css("height", "100%");
		$(".step03>.body>div.left>div>div>ul").append($li);
	});
	_Step03_Left_Inteval = setInterval(function() {
		var $active_now = $(".step03>.body>div.left>div>div>ul>li").eq(_Step03_Left_Inteval_Index);
		if (++_Step03_Left_Inteval_Index >= $(".step03>.body>div.left>div>div>ul>li").length) {
			_Step03_Left_Inteval_Index = 0;
		}
		var $active_next = $(".step03>.body>div.left>div>div>ul>li").eq(_Step03_Left_Inteval_Index);
		$active_now.animate({
			"top": "15%",
			"opacity": 0
		}, 750);
		$active_next.animate({
			"top": "10%",
			"opacity": 1
		}, 750);
	}, 3000);

	$(".step03>.body>div.right>div>div>ul").css("position", "relative");
	$(".step03>.body>div.right>div>div>ul").css("width", "100%");
	$(".step03>.body>div.right>div>div>ul").css("height", "100%");
	$(img_step03_right).each(function(index, img) {
		var $li = $("<li></li>");
		$li.css("background", img);
		$li.css("background-size", "100%");
		$li.css("position", "absolute");
		if (index === 0) {
			$li.css("opacity", 1);
			$li.css("top", "10%");
		} else {
			$li.css("opacity", 0);
			$li.css("top", "15%");
		}
		$li.css("left", "10%");
		$li.css("width", "80%");
		$li.css("height", "100%");
		$(".step03>.body>div.right>div>div>ul").append($li);
	});
	_Step03_Right_Inteval = setInterval(function() {
		var $active_now = $(".step03>.body>div.right>div>div>ul>li").eq(_Step03_Right_Inteval_Index);
		if (++_Step03_Right_Inteval_Index >= $(".step03>.body>div.right>div>div>ul>li").length) {
			_Step03_Right_Inteval_Index = 0;
		}
		var $active_next = $(".step03>.body>div.right>div>div>ul>li").eq(_Step03_Right_Inteval_Index);
		$active_now.animate({
			"top": "15%",
			"opacity": 0
		}, 750);
		$active_next.animate({
			"top": "10%",
			"opacity": 1
		}, 750);
	}, 3000);
	
	$(".step04>div.tab-body>.tab-frame>div.tab>div.text>h3>span").on("click", function() {
		window.location.href = "https://www.97gg.com/nweb/index.html#/Home"
	});
	$(".entrance").on("click", function() {
		window.location.href = "https://www.97gg.com/nweb/index.html#/Home"
	});
	/*
	 * 控件鼠标悬浮交互
	 */

	$(".step04>div.tab-body>.tab-frame>div.tab>div.text>h3>span").hover(function() {
		$(this).animate({
			"font-size": "0.18rem"
		}, 200);
		$(this).children("span.icon").animate({
			"width": "0.18rem",
			"height": "0.18rem",
			"margin": "0.02rem 0.08rem 0.02rem 0.08rem"
		}, 200);
	}, function() {
		$(this).animate({
			"font-size": "0.14rem"
		}, 10);
		$(this).children("span.icon").animate({
			"width": "0.14rem",
			"height": "0.14rem",
			"margin": "0.04rem 0.08rem 0.04rem 0.08rem"
		}, 10);
	});

	$(".head>.entrance").hover(function() {
		$(this).animate({
			"width": "1.68rem",
			"box-shadow": "0 0 0.05rem 0 #FF863D"
		}, 200);
	}, function() {
		$(this).animate({
			"width": "1.38rem",
			"box-shadow": "none"
		}, 10);
	});

	$(".step02>.bottom>.right>div.vedio_part>div.vedio-player-btn>.icon").hover(function() {
		var videoHeight = $("#videoElement")[0].videoHeight;
		var videoWidth = $("#videoElement")[0].videoWidth;
		$(this).css("width", "0.7rem");
		$(this).css("height", "0.7rem");
		var margin_top = (videoHeight * $("#videoElement").width() / videoWidth - $(this).height()) / 2;
		$(this).css("width", "0.6rem");
		$(this).css("height", "0.6rem");
		$(this).animate({
			"width": "0.7rem",
			"height": "0.7rem",
			"margin-top": margin_top + "px"
		}, 200);
	}, function() {
		var videoHeight = $("#videoElement")[0].videoHeight;
		var videoWidth = $("#videoElement")[0].videoWidth;
		$(this).css("width", "0.6rem");
		$(this).css("height", "0.6rem");
		var margin_top = (videoHeight * $("#videoElement").width() / videoWidth - $(this).height()) / 2;
		$(this).css("width", "0.7rem");
		$(this).css("height", "0.7rem");
		$(this).animate({
			"width": "0.6rem",
			"height": "0.6rem",
			"margin-top": margin_top + "px"
		}, 10);
	});
});
