/*======================================================================================
 Home JS handler
 Created: TH - 03/11/2009
======================================================================================*/



//======================================================================================
// Handles Puma Home Pane Slider Widgets
//======================================================================================
ppanes = { 
	
	pane_builder: function(){
		
		//初始化时就设置一下箭头的样式，很谨慎
		//KV的箭头不需要判断，因为是循环的
		//isHorizontal, stLeftArrowID, stRightArrowID, iRightFeature, iTotalFeatures, iQuantityVisible
		//是否水平,左按钮元素,右按钮元素,目前最右面(下面)项目的序号,滚动项目数量,容器内的可见数量
		checkButtons(true, "#product_arrows .rev a", "#product_arrows .fwd a", iProductsRight, iVisibleProducts, 5);
		checkButtons(false, "#news_arrows .dn a", "#news_arrows .up a", iNewsBottom, iTotalNewsFeatures, 2);
		
		//绑定产品箭头的点击事件
		$("#product_arrows .rev a").click(function(event){
			iProductsRight = moveFrames("#product_list_wrapper", 194, 'left', iVisibleProducts, 5, iProductsRight);
			checkButtons(true, "#product_arrows .rev a", "#product_arrows .fwd a", iProductsRight, iVisibleProducts, 5);
			return false;
		});
		$("#product_arrows .fwd a").click(function(event){
			iProductsRight = moveFrames("#product_list_wrapper", 194, 'right', iVisibleProducts, 5, iProductsRight);
			checkButtons(true, "#product_arrows .rev a", "#product_arrows .fwd a", iProductsRight, iVisibleProducts, 5);
			return false;
		});
		//绑定新闻箭头的点击事件
		$("#news_arrows .dn a").click(function(event){
			iNewsBottom = moveFrames("#news_wrapper", 134, 'down', iTotalNewsFeatures, 2, iNewsBottom);
			checkButtons(false, "#news_arrows .dn a", "#news_arrows .up a", iNewsBottom, iTotalNewsFeatures, 2);
			return false;
		});
		$("#news_arrows .up a").click(function(event){
			iNewsBottom = moveFrames("#news_wrapper", 134, 'up', iTotalNewsFeatures, 2, iNewsBottom);
			checkButtons(false, "#news_arrows .dn a", "#news_arrows .up a", iNewsBottom, iTotalNewsFeatures, 2);
			return false;
		});
	},
	
	//绑定新闻项目的点击事件（在当前窗口打开对应的新闻）
	get_latest_listener: function(){
		$('#news_items li').bind('click', function(){
			window.location = this.getElementsByTagName('a')[0].href;
		})
	},
	
	init: function(){
		iTotalProducts = $("#product_list_wrapper li").length;
		iProductsRight = 5; //可见产品的数量
		iVisibleProducts = iTotalProducts;

		iTotalNewsFeatures = $("#news_wrapper li").length;
		iNewsBottom = 2; //可见新闻的数量

		ppanes.pane_builder();
		ppanes.get_latest_listener();
	}
}

set_switch_sub_nav = {
	builder: function() {
		var b = document.body;
		$('#nav>li').not('.prod, .main').click(function() {
			var c = this.className.split(' ')[0];  //防止将 hover 一起添加
			fnSetBodyClassName(c);
			//alert(b.className);
			this.getElementsByTagName('a')[0].blur();
			return false;
		});
		function fnSetBodyClassName(s) {
			if (b.className==s) b.className = '';
			else b.className = s;
		}
		$(document).click(function() {
			b.className = '';
		});
	},
	init: function() {
		set_switch_sub_nav.builder();
	}
}

set_scroll_prod_select = {
	builder: function() {
		checkButtons(true, "#prod_select_arrows .rev a", "#prod_select_arrows .fwd a", iPsRight, iPsTotal, 4);
		
		//绑定产品箭头的点击事件
		$("#prod_select_arrows .rev a").click(function(event){
			//-----------------------滚动内容元素, 单步位移长度, 方向, 滚动内容中的项目数量, 位移数量, 目前最右面(下面)项目的序号
			iPsRight = moveFrames("#prod_select_wrapper", 225, 'left', iPsTotal, 4, iPsRight);
			//-------------------------是否水平, 左按钮元素, 右按钮元素, 目前最右面(下面)项目的序号, 滚动项目数量, 容器内的可见数量
			checkButtons(true, "#prod_select_arrows .rev a", "#prod_select_arrows .fwd a", iPsRight, iPsTotal, 4);
			return false;
		});
		$("#prod_select_arrows .fwd a").click(function(event){
			//-----------------------滚动内容元素,单步位移长度,方向,滚动内容中的项目数量,位移数量,目前最右面(下面)项目的序号
			iPsRight = moveFrames("#prod_select_wrapper", 225, 'right', iPsTotal, 4, iPsRight);
			checkButtons(true, "#prod_select_arrows .rev a", "#prod_select_arrows .fwd a", iPsRight, iPsTotal, 4);
			return false;
		});
		
		function fnHighLight(theTab){
			//将选中的标签高亮
			$("#prod_select li").removeClass("selected");
			$("#prod_select ." + theTab).addClass("selected");
		}
	},
	
	init: function() {
		iPsTotal = $("#prod_select_wrapper li").length;
		iPsRight = 4;
		
		set_scroll_prod_select.builder();
	}
}

//sub_nav
set_scroll_sub_nav = {
	builder: function() {
		checkButtons(true, "#sports_select_arrows .rev a", "#sports_select_arrows .fwd a", iSubNavSportsRight, iSubNavSportsTotal, 5);
		checkButtons(true, "#lifestyle_select_arrows .rev a", "#lifestyle_select_arrows .fwd a", iSubNavLifestyleRight, iSubNavLifestyleTotal, 5);
		checkButtons(true, "#fashion_select_arrows .rev a", "#fashion_select_arrows .fwd a", iSubNavFashionRight, iSubNavFashionTotal, 5);
		
		//sports_select_arrows
		$("#sports_select_arrows .rev a").click(function(event){
			iSubNavSportsRight = moveFrames("#sports_select_wrapper", 170, 'left', iSubNavSportsTotal, 5, iSubNavSportsRight);
			checkButtons(true, "#sports_select_arrows .rev a", "#sports_select_arrows .fwd a", iSubNavSportsRight, iSubNavSportsTotal, 5);
			return false;
		});
		$("#sports_select_arrows .fwd a").click(function(event){
			iSubNavSportsRight = moveFrames("#sports_select_wrapper", 170, 'right', iSubNavSportsTotal, 5, iSubNavSportsRight);
			checkButtons(true, "#sports_select_arrows .rev a", "#sports_select_arrows .fwd a", iSubNavSportsRight, iSubNavSportsTotal, 5);
			return false;
		});
		//lifestyle_select_arrows
		$("#lifestyle_select_arrows .rev a").click(function(event){
			iSubNavLifestyleRight = moveFrames("#lifestyle_select_wrapper", 170, 'left', iSubNavLifestyleTotal, 5, iSubNavLifestyleRight);
			checkButtons(true, "#lifestyle_select_arrows .rev a", "#lifestyle_select_arrows .fwd a", iSubNavLifestyleRight, iSubNavLifestyleTotal, 5);
			return false;
		});
		$("#lifestyle_select_arrows .fwd a").click(function(event){
			iSubNavLifestyleRight = moveFrames("#lifestyle_select_wrapper", 170, 'right', iSubNavLifestyleTotal, 5, iSubNavLifestyleRight);
			checkButtons(true, "#lifestyle_select_arrows .rev a", "#lifestyle_select_arrows .fwd a", iSubNavLifestyleRight, iSubNavLifestyleTotal, 5);
			return false;
		});
		//fashion_select_arrows
		$("#fashion_select_arrows .rev a").click(function(event){
			iSubNavFashionRight = moveFrames("#fashion_select_wrapper", 170, 'left', iSubNavFashionTotal, 5, iSubNavFashionRight);
			checkButtons(true, "#fashion_select_arrows .rev a", "#fashion_select_arrows .fwd a", iSubNavFashionRight, iSubNavFashionTotal, 5);
			return false;
		});
		$("#fashion_select_arrows .fwd a").click(function(event){
			iSubNavFashionRight = moveFrames("#fashion_select_wrapper", 170, 'right', iSubNavFashionTotal, 5, iSubNavFashionRight);
			checkButtons(true, "#fashion_select_arrows .rev a", "#fashion_select_arrows .fwd a", iSubNavFashionRight, iSubNavFashionTotal, 5);
			return false;
		});
	},
	
	init: function() {
		iSubNavSportsTotal = $("#sports_select_wrapper li").length;
		iSubNavSportsRight = 5;
		
		iSubNavLifestyleTotal = $("#lifestyle_select_wrapper li").length;
		iSubNavLifestyleRight = 5;
		
		iSubNavFashionTotal = $("#fashion_select_wrapper li").length;
		iSubNavFashionRight = 5;
		
		set_scroll_sub_nav.builder();
	}
}

set_prod_select = {
	builder: function(){
		$('#product_list_wrapper li').hover(fnOver,fnOut);
		
		function fnOver() {
			var s = this.className.split(' ')[0];
			$('#prod_select li.selected').removeClass('selected');
			$('#prod_select .' + s).addClass('selected');
		}
		function fnOut() {
			$('#prod_select li.selected').removeClass('selected');
		}
	},
	
	init: function(){
		$('#prod_select li.selected').removeClass('selected');
		set_prod_select.builder();
	}
}


$(document).ready(function() {
	ppanes.init();
	set_prod_select.init();
	//set_scroll_prod_select.init();
	set_switch_sub_nav.init();
	set_scroll_sub_nav.init();
	
	//绑定次KV的点击事件（在当前窗口打开对应的新闻）
	$('#features_list li').click(function () {
		var sUrl =  $(this).find('a').attr('href');
		window.open(sUrl);
	})
});


//----------------------------------------

//Clone what we've got
function cloner(){
	// Pad before
	//将 #features_list 和 #feature_panes 中的内容克隆
	var smfirst = $('#features_list li:first');
	var smfirstclass = $(smfirst).attr('class');
	$('#features_list_container li').each(function(){
		$(this).clone(true).insertBefore(smfirst);
	})
	lgfirst = $('#feature_panes li:first');
	$('#features_panes_container li').each(function(){
		$(this).clone(true).insertBefore(lgfirst);
	})

	// Advance to the ones we need
	$('#features_list_wrapper').css('left', (liL * lisW * limb * -1) - (offset * lisW)  + 'px');
	$('#feature_panes_wrapper').css('left', (liL * lilW * limb * -1) + 'px');

	// Uncomment if you want them to match
	//$('#feature_panes_wrapper').css('left', (liL * lilW * limb * -1) - (offset * lisW) + 'px');

	//Account for new length
	//克隆后的KV数量，真实数量需除以2
	t = $('#features_list_container li').length;
	
	// Pad after
	$('#features_list_container li:gt(' + ((t/2)-1) + ')').each(function(){
		smlast = $('#features_list li:last');
		$(this).clone(true).insertAfter(smlast);
	})
	$('#features_panes_container li:gt(' + ((t/2)-1) + ')').each(function(){
		lglast = $('#feature_panes li:last');
		$(this).clone(true).insertAfter(lglast);
	})
	
	// We hide the first item so it wont show up when the page loads. After we are done initalizing - we show it.
	$('.' + smfirstclass).css('display', 'block');
	
	//Update the li length
	liL		= $('#features_list_container li').length;
}

function adv(){
	inc = inc + 1;
	if(inc >= 1 && inc <= ((liL/3)*2)){
		move(inc, -1);
	}
}
function rev(){
	inc = inc - 1;
	if(inc >= 1 && inc <= ((liL/3)*2)){
		move(inc, 1);
	}
}


function move(page, d){
	var dir = d;
	
	//Depending on Direction - calculate how much to the Small Feature Bar
	if(d == 1){
		swp = ((page + limb + offset) * lisW * dir);
	}else{
		swp = (page * lisW * dir);
	}
	
	//Depending on Direction - calculate how much to the Large Feature Bar
	if(d == 1){
		lwp = ((page + offset) * lilW * dir);
	}else{
		lwp = ((page - offset) * lilW * dir);
	}
	
	
	if(dir == -1){
		// Amts = (LI Width (large or Small) * direction * li Move By) + large or small Wrapper Position
		var samt = (lisW * dir * limb) + swp;
		var lamt = (lilW * dir * limb) + lwp;
	}else{
		var samt = (lisW * dir * limb) - swp;
		var lamt = (lilW * dir * limb) - lwp;
	}
	
	
	$('#features_list_wrapper').animate({ left : samt  }, 500, function(){
		//FWD
		if(dir == -1){
			// At the 3/4 mark we are going to adjust the CSS
			if(page == ((liL/3)*2)){
				
				// Calculate the amount we need to move (adjust for offset)
				var amt = (-1 * (liL/3) * lisW) - (offset * lisW);
				$('#features_list_wrapper').css({ left : amt  });
				
				// Set Incrementer back to the 1/3 mark (or the first panel that is shown onload)
				inc = (liL / 3);
			}
		}
		//REV
		if(dir == 1){	
			// At the first item we are going to adjust the CSS + be sure to include the offset
			if(page == 1){
				
				// Calculate the amount we need to move (adjust for offset)
				var amt = (-1 * ((liL/3)+offset) * lisW) - (offset * lisW);
				$('#features_list_wrapper').css({ left : amt  });
				
				// Set Incrementer back to the 1/3 mark (or the first panel that is shown onload + 1 because of the offset)
				inc = ((liL / 3) + offset); 
			}
		}
	});

	
	
	$('#feature_panes_wrapper').animate({ left : lamt  }, 500, function(){
		//FWD
		if(dir == -1){
			// At the 3/4 mark we are going to adjust the CSS
			if(page == ((liL/3)*2)){
				
				// Calculate the amount we need to move
				var amt = (-1 * (liL/3) * lilW);
				$('#feature_panes_wrapper').css({ left : amt  });
				
				// Set Incrementer back to the 1/3 mark (or the first panel that is shown onload)
				inc = (liL / 3);
			}
		}
		//REV
		if(dir == 1){
			if(page == 1){
				
				// At the first item we are going to adjust the CSS + be sure to include the offset
				var amt = (-1 * ((liL/3)+offset) * lilW);
				$('#feature_panes_wrapper').css({ left : amt  });
				
				// Set Incrementer back to the 1/3 mark (or the first panel that is shown onload + 1 because of the offset)
				inc = ((liL / 3) + offset); 
			}
		}
	});
	
}

function init(){
	cloner();
	
	jQuery('#feature_arrows li.fwd a').click(function(){
		 animate = false;
		 adv();
		 return false;
	})

	jQuery('#feature_arrows li.rev a').click(function(){
		 animate = false;
		 rev();
		 return false;
	})

}	

$(document).ready(function () {
  
	liL		= $('#features_list_container li').length
	lisW 	= 323; 				// 次 KV : li 加上其内、外边距的总宽度 = 322px + 1px right-margin
	lilW 	= 980; 				// 主 KV : li 加上其内、外边距的总宽度 = 970px + 10px right-margin
	limb 	= 1; 				// li to move by
	offset 	= 1;				// 每次移动的数量(?) Featurette offest (moves X items to the left)
	animate = true;	
	inc 	= liL;				// Set incrementer at the position of the first panel shown onload
	
	$(document).everyTime(10000, "features", function(i) {
		if (animate == true) {
			adv();			
		}
	});

	init();
  
});