/* widget tabbed sectsion with editor picks */

$(function(){

	$(".widgetTabbedSectionsEditorPicks #editorPicksTabs .tabsContainer").css("display","block");
	$(".widgetTabbedSectionsEditorPicks #editorPicksTabs").tabs();
	$(".widgetTabbedSectionsEditorPicks #editorPicks").tabs();
	
	$(".widgetTabbedSectionsEditorPicks .editorPicksList").lavaLamp({
		fx: 'easeOutSine',
		autoReturn: false,
		speed: 500
	});
	
	cycleEPTime = 5000;
	initEPTime = 10000;
	idleEPTime = 20000;
	
	currEPTab = "editorPick-1";
	currEPTabNum = 1;
	prevEPTab = "";

	//set up a one time timer to trigger tab animation after initEPTime
	$(".widgetTabbedSectionsEditorPicks #"+currEPTab).oneTime(initEPTime,'editorPicksListTimer',initEditorPicksListTimer);
	
	$(".widgetTabbedSectionsEditorPicks .editorPicksList a").each(function(){
		$(this).click(function(e){
			//if is no event pageX value, then user did not trigger click action
			if(e.pageX){
			
				//update currTabNum to reflect the one clicked
				currEPTabNum = $(this).attr("href").substr( $(this).attr("href").length-1 );
				
				$(".widgetTabbedSections #"+currEPTab).stopTime('editorPicksListTimer');
				$(".widgetTabbedSections #"+currEPTab).oneTime(idleEPTime,'editorPicksListTimer',initEditorPicksListTimer);
			}
		});
	});
	
	//when user mouses over the editorPicksContainer, stop all animation
	$(".widgetTabbedSectionsEditorPicks #editorPicksContainer").mouseenter(function(){
		$(".widgetTabbedSectionsEditorPicks #"+currEPTab).stopTime('editorPicksListTimer');
	}).mouseleave(function(){
		$(".widgetTabbedSectionsEditorPicks #"+currEPTab).oneTime(idleEPTime,'editorPicksListTimer',initEditorPicksListTimer);
	});	
	
});

function initEditorPicksListTimer(){
	$(".widgetTabbedSectionsEditorPicks #"+currEPTab).everyTime(cycleEPTime,'editorPicksListTimer',editorPicksListAnimate);
};

function editorPicksListAnimate(){
	if(currEPTabNum>$(".widgetTabbedSectionsEditorPicks .editorPicksList li.ui-state-default").length){
		currEPTabNum = 1;
	} else {
		currEPTabNum++
	}
	//use trigger instead so can differentiate between user clicks and animated trigger
	$(".widgetTabbedSectionsEditorPicks .editorPicksList a:eq("+(currEPTabNum-1)+")").trigger('click');
	
};





/* widget tabbed sections */	

$(function(){
	
	$(".widgetTabbedSections .tabsContainer").css("display","block");
	$(".widgetTabbedSections").tabs();
	$(".widgetTabbedSections #tabHeadlines").tabs();
	$(".widgetTabbedSections #tabPopular").tabs();
	//$(".widgetTabbedSections #tabVideo").tabs();

	$(".widgetTabbedSections #tabHeadlines .tabTitleList").lavaLamp({
		fx: 'easeOutSine',
		autoReturn: false,
		speed: 500
	});
	$(".widgetTabbedSections #tabPopular .tabTitleList").lavaLamp({
		fx: 'easeOutSine',
		autoReturn: false,
		speed: 500
	});
	/*
	$(".widgetTabbedSections #tabVideo .tabTitleList").lavaLamp({
		fx: 'easeOutSine',
		autoReturn: false,
		speed: 500
	});
	*/
	//$("a[href='#tabPopular']").parent().remove();
	cycleTime = 5000;
	initTime = 10000;
	idleTime = 20000;

	currTab = "tabHeadlines";
	currTabNum = 1;
	prevTab = "";
	
	//set up a one time timer to trigger tab animation after initTime
	$(".widgetTabbedSections #"+currTab).oneTime(initTime,'tabsListTimer',initTabsListTimer);	
	//both the animation timer and the idle timer use the same timer ref, tabsListTimer
	//since neither will be active at the same time
	
	//set height of itemMediaAbstract to height of ul+h5 elements, so that overflow will produce scrollbars
	var h = $(".widgetTabbedSections #"+currTab+" .tabTitleList").height() + $("#"+currTab+" h5").height();
	if(h<280){h=280;}
	$(".widgetTabbedSections .itemMediaAbstract").css("height", h);
	
	$(".widgetTabbedSections .tabsList a").each(function(i){
		$(this).click(function(e){
			//when click new tab set curr num to 1
			currTabNum = 1;
			//update previous tab to current tab
			prevTab = currTab;
			//find new tab name from a href
			currTab = $(this).attr("href").substr(1);
			
			//set height of itemMediaAbstract to height of ul+h5 elements, so that overflow will produce scrollbars
			var h = $(".widgetTabbedSections #"+currTab+" .tabTitleList").height() + $("#"+currTab+" h5").height() + 20;
			//$(".widgetTabbedSections .itemMediaAbstract").css("height", h);
			if(h<280){h=280;}
			$(".widgetTabbedSections #"+currTab).css("height", h);
			
			//make sure first link in headlineTitleList is triggered
			$(".widgetTabbedSections #"+currTab+" a:eq("+(currTabNum-1)+")").click();
			//but also need backLava to jump immediately, not animate up
			move($(".widgetTabbedSections #"+currTab+" li:first").get(0));

			/* believe this is redundant since the mouse over/out code should catch when user leaves the list
			but may need cause initial idleTime is not working currently */
			//if new tab has backLava ul
			if(e.pageX){
				//stop previous cycle
				//had to move timer on/off here cause code inited trigger was causing initTime timer to overwrite with idleTime
				$(".widgetTabbedSections #"+prevTab).stopTime('tabsListTimer');
				if( $(".widgetTabbedSections #"+currTab+" a.backLava") ){
					$(".widgetTabbedSections #"+currTab).oneTime(idleTime,'tabsListTimer',initTabsListTimer);
				}
			}
		})		
	});
	//set this up so when user clicks a link it updates the currTabNum
	$(".widgetTabbedSections .tabsContainer div.tabList ul li a").each(function(){
		$(this).click(function(e){
			//update currTabNum to reflect the one clicked
			currTabNum = $(this).attr("href").substr( $(this).attr("href").length-1 );
			currTabDivID = $(this).attr("href");
			//if is no event pageX value, then user did not trigger click action
			if(e.pageX){
				$(".widgetTabbedSections #"+currTab).stopTime('tabsListTimer');
				//set up new timer to restart after n seconds
				//$(".widgetTabbedSections #"+currTab).oneTime(idleTime,'tabsListTimer',initTabsListTimer);
				if(!$(this).hasClass("readyToClick")){
					$(".readyToClick").removeClass("readyToClick");
					$(this).addClass("readyToClick");
				} else {
					window.location = $($(this).attr("href")+" h4 a").attr("href");
				}
			} else {
				if(!$(this).hasClass("readyToClick")){
					$(".readyToClick").removeClass("readyToClick");
					$(this).addClass("readyToClick");
				} 
			}
			//currTabNum is being set twice, once here and once in tabsListAnimate
		});
	});

	//when user mouses over the tabsContainer, stop all animation
	$(".widgetTabbedSections .tabsContainer").mouseenter(function(){
		$(".widgetTabbedSections #"+currTab).stopTime('tabsListTimer');
		//alert("enter");
	}).mouseleave(function(){
		$(".widgetTabbedSections #"+currTab).oneTime(idleTime,'tabsListTimer',initTabsListTimer);
		//alert("out");
	});
	
/*	
	$(".widgetTabbedSections .tabTitleList li a").focus(function(event){
		$(this).trigger("click");
	}); 
	$(".widgetTabbedSections .tabTitleList li a").click(function(e){
		if(e.pageX){
			// user click
			// GOOGLE: track click
			// if 2nd click
		}
	}); 
*/


	$(".widgetTabbedSections .tabsList a:first").click(); // Required in order to ensure overflow and height calculation on first item  This line should be the last line in this document ready block.
	
});



function initTabsListTimer(){
	$(".widgetTabbedSections #"+currTab).everyTime(cycleTime,'tabsListTimer',tabsListAnimate);
};

function tabsListAnimate(){
	if(currTabNum>$(".widgetTabbedSections #"+currTab+" ul li").length){
		currTabNum = 1;
	} else {
		currTabNum++
	}
	//use trigger instead so can differentiate between user clicks and animated trigger
	$(".widgetTabbedSections #"+currTab+" a:eq("+(currTabNum-1)+")").trigger('click');
};

//stole this function from the lavalamp plugin so can have the backLava jump to first a when switch tabs
function move(el) {
	// .backLava element border check and animation fix
	var bx=0, by=0, px=0;
	$back = $(".widgetTabbedSections #"+currTab+" .backLava");
	//if browser is not IE
	if (!jQuery.browser.msie) {
		bx = Math.floor(($back.outerWidth() - $back.innerWidth())/2);
		by = Math.floor(($back.outerHeight() - $back.innerHeight())/2);
	//if is IE 8
	} else if(jQuery.browser.msie==true && jQuery.browser.version=="8.0"){
		px=0;
	//for other IE versions
	} else {
		px=1;
	}
	$back.stop()
	.animate({
		left: el.offsetLeft-bx+px,
		top: el.offsetTop-by,
		width: el.offsetWidth,
		height: el.offsetHeight
	}, 0, 'easeOutSine');
};