$(function() {
	setInterval(function() {
		$(".section-next").each(function(){
			/*var $stress = $(this).find(".stress");
			if (! exisit($stress)) {
				$(this).find(".dot:first").addClass("stress");
			} else {
				var $next = $stress.next(".dot");
				$stress.removeClass("stress");
				if (exisit($next)) {
					$next.addClass("stress");
				} else {
					$(this).find(".dot:first").addClass("stress");
				}
			}*/
			
			$(this).fontAnimate("bounce", true);
		});
	}, 1000);
	$(".section-next").hover(function(){
		$(this).addClass("waiting");
	}, function() {
		$(this).removeClass("waiting");
	});
	
	$("#service-dsp .service-section .section-info b").click(function(){
		$div = $(this).parents(".active:first");
		$div.fontAnimate("bounceOutLeft", true, null, function(){
			$div.parent().find(".font-animate").removeClass("hidden").addClass("active").fontAnimate("bounceInRight", true);
			$div.removeClass("active").addClass("hidden font-animate");
		});
	});
	
	// 是否可以翻页
	var autoScroll = true;
	// 中间文字居中
	function contentMiddle() {
		var headerHeight = $("#header").height();
		// 默认与底部的距离
		var DEFAULT_BOTTOM = 10;
		var totalHeight = $(window).height();
		// var width = $(window).width();
		autoScroll = (totalHeight < 540/* || width < 992*/) ? false : true; 
		$("#service-dsp .middle").each(function() {
			var height = $(this).height();
			var top = $(this).data("top");
			if (empty(top)) top = headerHeight;
			var bottom = $(this).data("bottom");
			if (empty(bottom)) bottom = DEFAULT_BOTTOM;
			if (isNaN(bottom)) {
				bottom = $("#service-dsp").find(bottom).height();
			}
			var margin = (totalHeight -  top - bottom - height) / 2;
			margin = margin > 0 ? margin : 0;
			// 居中显示
			$(this).css("margin-top", margin);
			$(this).css("margin-bottom", margin);
		});
		if (autoScroll) {
			var width = $(window).width();
			var flowChartWidth = $("#service-dsp #section-flowchart").width();
			if (flowChartWidth > 0)
				$("#fp-nav.right").removeClass("hidden").css("right", (width - flowChartWidth) / 2);
			
			// $("#service-dsp .section-next").removeClass("hidden");
		} else {
			$("#fp-nav.right").addClass("hidden");
			// $("#service-dsp .section-next").addClass("hidden");
		}
		// $.fn.fullpage.setAutoScrolling(autoScroll);
	};

	// next arrow
	$("#service-dsp .section-next .next").click(function() {
		$.fn.fullpage.moveSectionDown();
	});
	$("#service-dsp .section-next").mousedown(function(){
		$(this).addClass("clicked");
	});
	$("#service-dsp .section-next").mouseup(function(){
		$(this).removeClass("clicked");
	});
	
	// 连线
	jsPlumb.ready(function() {
		var instance = jsPlumb.getInstance({
			Container : "section-flowchart",
			DoNotThrowErrors : false,
			PaintStyle : {
				lineWidth : 2,
				strokeStyle : "#333"
			},
			// 悬停样式
			HoverPaintStyle : {
				lineWidth : 2,
				strokeStyle : "#C60000"
			},
			Connector : "Straight",
			Endpoint : "Blank"
			/*,ConnectionOverlays : [ [ "Arrow", { width: 10, height: 5, foldback : 0.618, location: 1 }] ]*/
		});
		var connections = [];
		var media = getMedia();
		
		function getMedia() {
			var width = $(window).width();
			var current;
			if (width >= 1200)  current = "lg";
			else if (width < 1200 && width >= 992) current = "md";
			else if (width < 992 && width >= 768) current = "sm";
			else current = "xs";
			return current;
		}
		
		// tags
		$("#tags-brands").tagcanvas({
			depth : 0.75,
			imageScale : 0.7,
			outlineColour : "#eee",
			shuffleTags : true,
			wheelZoom : false,
			minSpeed : 0.005, // 最低速度
			maxSpeed : 0.05,
			initial: [0.1, 0.1], // 初始方向
			clickToFront : 700,
			outlineMethod : "none"	
		}, "tags");
		
		$(window).load(contentMiddle);
		$(window).resize(function() {
			var current = getMedia();
			if (media != current) {
				// 移除所有连线
				instance.detachEveryConnection();
				connections = [];
				media = current;
				checkAndConnectAll();
			}
			contentMiddle();
		});
		
		// 连线
		function connectArrow(source, target, label, labelClass) {
			if (empty(labelClass)) labelClass = "section-flowchart-label";
			else  labelClass += " section-flowchart-label";
			return instance.connect({
				source : source, 
			  	target : target,
			  	anchor : [[1, 0.5 , 0 , 1], [0, 0.5, 0 , -1]],
				overlays: [
				      [ "Arrow", { width: 10, height: 5, foldback : 0.618, location: 1 }],
	                  [
		                  "Label", {
		                	  label : label,
		                      location: 0.5,
		                      cssClass: labelClass
		                  } 
	                  ]
	            ],
			});
		}
		function connectDashed(source, target) {
			return instance.connect({
				source : source, 
			  	target : target,
			  	paintStyle : {
					lineWidth : 2,
					strokeStyle : "#555"
				},
			  	anchor : [[1, 0.5 , 0 , 1], [0, 0.5, 0 , -1]]
			});
		}
		function connectFlow(source, target) {
			return instance.connect({
				source : source, 
			  	target : target,
			  	connector : ["Flowchart", {
			  		stub : 70,
			  		alwaysRespectStubs : true
			  	}],
			  	overlays: [
				      [ "Arrow", { width: 10, height: 5, foldback : 0.618, location: 1 }]
	            ],
			  	anchor : [[0.5, 0 , 0 , -1], [0.5 , 0, 0 , 1]]
			});
		}
		
		// 连接所有线
		function checkAndConnectAll() {
			if (empty(connections) && media != "xs") {
				instance.batch(function () {
					connections.push(connectArrow("section-flowchart-start-point", "section-flowchart-adx-point", $.lang.DSP_FLOWCHART_ARROW1));
					connections.push(connectArrow("section-flowchart-adx-point", "section-flowchart-dsp-point1", ""));
					connections.push(connectArrow("section-flowchart-adx-point", "section-flowchart-dsp-point2", $.lang.DSP_FLOWCHART_ARROW2));
					connections.push(connectArrow("section-flowchart-adx-point", "section-flowchart-dsp-point3", ""));
					connections.push(connectDashed("section-flowchart-dsp-point1", "section-flowchart-account-point1"));
					connections.push(connectDashed("section-flowchart-dsp-point2", "section-flowchart-account-point2"));
					connections.push(connectDashed("section-flowchart-dsp-point3", "section-flowchart-account-point3"));
					connections.push(connectArrow("section-flowchart-account-point2", "section-flowchart-end-point", ""));
					connections.push(connectFlow("section-flowchart-end-point", "section-flowchart-start-point"));
				});
			}
		}
		
		var moveSlide = null;
		var anchors = ["why", "flowchart", "media-resource", "identity", "presentation", "monitor-report", "now-start"];
		// fullpage
		$("#service-dsp").fullpage({
			sectionSelector : "#service-dsp .service-section",
			slideSelector : ".slide",
			verticalCentered: false,
			scrollBar : false,
			resize : false,
			navigation : true,
			slidesNavigation : false,
			slidesNavPosition : "top",
			anchors : anchors,
			navigationColor : "#777",
			navigationPosition : "right",
			navigationTooltips : $.lang.DSP_FLOWCHART_NAV,
			afterRender : function() {
				$("#service-dsp .service-section").removeClass("hidden");
				var $header = $("#service-dsp #page1 #service-dsp-header");
				$header.find("h1").fontAnimate("fadeInDown", true);
				$header.find(".help-block").fontAnimate("fadeInUp", true);
				$("#service-dsp #page1 .section-next").fontAnimate("fadeInDown", true);
				
				$(".fp-controlArrow").hide();
			},
			afterLoad: function(anchorLink, index){
				switch(index) {
					case 1 : {
						$("#fp-nav.right").hide();
						// 标题
						var $header = $("#service-dsp #page1 #service-dsp-header");
						$header.find("h1").fontAnimate("fadeInDown", true);
						$header.find(".help-block").fontAnimate("fadeInUp", true);
						break;
					}
					case 2 : {
						$("#section-flowchart").fontAnimate("bounceInDown", true);
						checkAndConnectAll();
						break;
					}
					case 3 : {
						$("#tags-brands-container").fontAnimate("fadeIn", true);
						break;
					}
					case 5 : {
						var $img = $("#service-dsp #page" + index  + " .slide");
						$img.fontAnimate("fadeIn", true);
						$(".fp-controlArrow").fadeIn();
						
						moveSlide = setInterval(function(){
							 $.fn.fullpage.moveSlideRight();
						}, 5000);
						
						break;
					}
					case 4 :
					case 6 : {
						 var $img = $("#service-dsp #page" + index  + " img");
						 $img.fontAnimate("bounceInDown", true);
						 break;
					}
					case 7 : {
						var $description = $("#service-dsp #page" + index  + " .service-description");
						$description.find("img").fontAnimate("fadeInDown", true);
						$description.find("h3").fontAnimate("fadeInDown", true);
						$description.find(".help-block").fontAnimate("fadeInUp", true);
						$description.find(".more").fontAnimate("fadeIn", true);
					}
				}
				var $active = $("#service-dsp #page" + index  + " .section-info .active");
				if (exisit($active)) {
					$active.find("h3").fontAnimate("fadeInDown", true);
					$active.find("p").fontAnimate("fadeInUp", true);
				}
				if (1 != index) $("#fp-nav.right").show();
				$("#service-dsp .service-section.active .section-next").fontAnimate("fadeInDown", true);
				$(window).resize();
			},
			onLeave: function(anchorLink, index) {
				switch(index) {
					case 1 : {
						var $header = $("#service-dsp #page1 #service-dsp-header");
						$header.find("h1").addClass("font-animate");
						$header.find(".help-block").addClass("font-animate");
						break;
					}
					case 2 : {
						$("#section-flowchart").addClass("font-animate");
						break;
					}
					case 3 : {
						$("#tags-brands-container").addClass("font-animate");
						break;
					}
					case 5 : {
						var $img = $("#service-dsp #page" + index  + " .slide");
						$img.addClass("font-animate");
						$(".fp-controlArrow").hide();
						break;
					}
					case 4 : 
					case 6 : {
						 var $img = $("#service-dsp #page" + index  + " img");
						 $img.addClass("font-animate");
						 
						 clearInterval(moveSlide);
						 break;
					}
					case 7 : {
						var $description = $("#service-dsp #page" + index  + " .service-description");
						$description.find("img").addClass("font-animate");
						$description.find("h3").addClass("font-animate");
						$description.find(".help-block").addClass("font-animate");
						$description.find(".more").addClass("font-animate");
						break;
					}
				}
				var $active = $("#service-dsp #page" + index  + " .section-info .active");
				if (exisit($active)) {
					$active.find("h3").addClass("font-animate");
					$active.find("p").addClass("font-animate");
				}
				$("#service-dsp .section-next").addClass("font-animate");
			}	
		});
		
		var moveSlide = setInterval(function(){
			 $.fn.fullpage.moveSlideRight();
		}, 5000);
		
		$("#section-view-again").click(function(){
			$.fn.fullpage.moveTo(1);
		});
		
		$("#service-dsp .fp-controlArrow.fp-prev").html("<i class='fa fa-fw fa-chevron-left'></i>");
		$("#service-dsp .fp-controlArrow.fp-next").html("<i class='fa fa-fw fa-chevron-right'></i>");
	});
});