//**********************************************************************************************
//
//	DATE		INIT	DESCRIPTION
//	110714	JDC		-	Removed hardcoded objects from arrSlides and am now populating array with
//									info from all "ssPanel" divs in HTML
//								- Removed image object used to load all images and then display slideshow
//									onload.
//								- Loading screen is now set to "display:none" since the loading of images
//									isn't being done programatically.  Have not removed the loading screen
//                  complitely in case we decide to bring it back in the future.
//
//**********************************************************************************************
// JavaScript Document
/*************************************START VARIABLES**********************************************/
var iSSAnimDur = 500;
var sliderAnimDur = 1000;
var sLoadScreenContent = '<p id="ssLoadingText">LOADING...</p>';
var sLoadImg = "/_assets_2011X/images/global/blank.gif";
var iLoadTo = 0;
var iCurrSlide = 0;
var iSlideOffsetX = 0;
var timerAutoSlide;
var iSSTimerDelay = 6000;

var iPrevOrigX = 0;
var iNextOrigX = 0;


// ARRAY TO RETRIEVE DATA TEMPRARILY...
var arrSlides = [];

var iSlides;
var iSlidesCompare;

/**************************************END VARIABLES***********************************************/
/*************************************START FUNCTIONS**********************************************/

// FUNCTION THAT HIDES, SWITCHES, AND REVEALS THE CONTENT
function funcSlideTo(sNo){
	// HIDES THE BLUE BUBBLE FROM ALL BUTTONS NOT MATCHING THE TARGET
	for(var bubble = 0; bubble<iSlides; bubble++){
		if(bubble == sNo){
			$('#contentCap div a:nth('+bubble+') img').stop().css({visibility: 'visible'}).animate({opacity:1}, iSSAnimDur);
		}else{
			$('#contentCap div a:nth('+bubble+') img').stop().animate({opacity:0}, iSSAnimDur, function(){
				$(this).css({visibility: 'hidden'});
			});
		}
	};
	
	// SLIDES THE TARGET IMAGE
	// HIDES CURRENT IMAGE FROM VIEW THEN REPLACES THE CONTENT
	// AFTER CONTENT IS REPLACED, THE TEXT IS FADED BACK INTO VIEW

	
	$('#ssImages').stop().animate({'opacity':1, 'margin-left':(-sNo*iSlideOffsetX)+'px'}, sliderAnimDur, 'easeOutQuint');
	$('#ssText').stop().animate({opacity: 0}, sliderAnimDur, function(){
		$('#ssText h2').html("<a href='"+arrSlides[sNo].url+"' title='"+arrSlides[sNo].title+"'>"+arrSlides[sNo].title+"</a>");
		$('#ssText p').html(arrSlides[sNo].text);
		$('#letsgo a').attr('href', arrSlides[sNo].url);
		$('#letsgo a').attr('title', arrSlides[sNo].title);

		_gaq.push(['_trackEvent', 'VF Featured Ads', 'impression', arrSlides[sNo].id]);

		$('#ssTextFrame').animate({'height': (parseInt($('#ssText').css('height').replace('px',''))+26)+'px'}, iSSAnimDur, function(){
			$('#ssText').animate({opacity: 1}, iSSAnimDur);
		});

		// Attaching event listeners for link and image clicks.
		$("#ssText h2 a, #ssText p a, #letsgo a").click(function(event){
			_gaq.push(['_trackEvent', 'VF Featured Ads', 'click', arrSlides[sNo].id]);
		});
	});
	
};

// FUNCTION TO MOVE TO NEXT SLIDE
function funcSlideToNext(){
	if(iCurrSlide >= iSlidesCompare)
		iCurrSlide = 0;
	else
		iCurrSlide++;

	funcSlideTo(iCurrSlide);
};

// FUNCTION TO MOVE TO PREVIOUS SLIDE
function funcSlideToPrev(){
	if(iCurrSlide == 0)
		iCurrSlide = iSlides-1;
	else
		iCurrSlide--;
	
	funcSlideTo(iCurrSlide);
};

// FUNCTION TO ENABLE BUTTON ACTIONS
function funcEnableButtons(){
	$('#slideNext').click(function(event){
		event.preventDefault();
		clearTimeout(timerAutoSlide);
		funcSlideToNext();
	});
	$('#slidePrev').click(function(event){
		event.preventDefault();
		clearTimeout(timerAutoSlide);
		funcSlideToPrev();
	});
	$('#contentCap div a').click(function(event){
		event.preventDefault();
		clearTimeout(timerAutoSlide);
		
		var iIndex = $(this).index();
		
		if(iIndex != iCurrSlide){
			iCurrSlide = iIndex;
			funcSlideTo(iCurrSlide);
		}
	});
	$('#slidePrev').mouseover(function(event){
		$(this).stop().animate({left: iPrevOrigX-3+'px'}, iSSAnimDur/2, 'easeOutQuint');
	});
	$('#slidePrev').mouseout(function(event){
		$(this).stop().animate({left: iPrevOrigX+'px'}, iSSAnimDur/2, 'easeOutQuint');
	});
	$('#slideNext').mouseover(function(event){
		$(this).stop().animate({right: iNextOrigX-3+'px'}, iSSAnimDur/2, 'easeOutQuint');
	});
	$('#slideNext').mouseout(function(event){
		$(this).stop().animate({right: iNextOrigX+'px'}, iSSAnimDur/2, 'easeOutQuint');
	});
};

// GENERATES THE ELEMENTS USED FOR THE SLIDESHOW
function funcBuildSlideShow(){
	iSlides = arrSlides.length;
	iSlidesCompare = iSlides-1;

	var sSSElements = '<div id="content"><div id="ieDummy"></div>';
	sSSElements += '<div id="ssContainer">';
	sSSElements += '<a id="slidePrev" class="button" href="#" title="Previous"><img src="/_assets_2011X/images/home/btn_prev.png" alt="Previous Slide"/></a>';
	sSSElements += '<a id="slideNext" class="button" href="#" title="Next"><img src="/_assets_2011X/images/home/btn_next.png" alt="Next Slide"/></a>';
	sSSElements += '<div id="ssFrame">';
	sSSElements += '<div id="ssWindow">';
	sSSElements += '<div id="ssLoading">'+sLoadScreenContent+'</div>';
	sSSElements += '<div id="ssImages">';


	$('#ssImages a:nth('+iCurrSlide+') img').attr('src', $(this).attr('src'));
	$('#ssImages a:nth('+iCurrSlide+')').attr('href', arrSlides[iCurrSlide].url);

	for(var img = 0; img<iSlides; img++){
		sSSElements += "<a href='"+arrSlides[img].url+"' title='"+arrSlides[img].title+"'><img src='"+arrSlides[img].img+"' alt='"+arrSlides[img].url+"'/></a>";
	}

	sSSElements += '</div></div></div></div>';
	sSSElements += '<div id="letsgo"><a href="#" title="Let\'s Go!"><img src="/_assets_2011X/images/home/btn_letsgo.png" alt="Let\'s Go!"/></a></div>';
	sSSElements += '<div id="ssTextFrame">';
	sSSElements += '<div id="ssText"><h2></h2><p></p></div></div></div>';
	sSSElements += '<div id="contentCap"><div>';
	
	for(var pnl = 0; pnl<iSlides; pnl++){
		sSSElements += "<a href='#' title=''><img src='_assets_2011X/images/home/btn_bubble_blue.gif' alt=''/></a>";
	}
	
	sSSElements += '</div></div>';
	
	$('#slideShow').html(sSSElements);
	
	// GET THE WIDTH OF THE IMAGE SLIDESHOW WINDOW
	// SET THE TOTAL WIDTH OF THE IMAGE CONTAINER & THE BUTTON CONTAINER ON THE BOTTOM
	iSlideOffsetX = parseInt($('#ssWindow').css('width').replace('px',''));
	$('#ssImages').css({width: (iSlideOffsetX*iSlides)+'px'});
	$('#contentCap div').css({width: (20*iSlides)+'px'});
	
	// GET THE X OFFSET OF THE NAVIGATION BUTTONS TO HAVE A RETURN POIN ON THE ROLL OVER ANIMATIONS
	iPrevOrigX = parseInt($('#slidePrev').css('left').replace('px',''));
	iNextOrigX = parseInt($('#slideNext').css('right').replace('px',''));

	// MOVES THE TEXT CONTENT TO VIEW AREA AND HIDES TO FADE UP AT A LATER TIME
	$('#ssText').css({'margin-top':0, opacity:0});
	
	// DISPLAY THE LOADING SCREEN THEN
	// LOAD THE 1ST IMAGE TO THE DUMMY TO START
	// IMAGE LOADING CYCLE
	$('#ssImages').css({opacity:0}).animate({opacity:1}, iSSAnimDur);
	
	// HIDE LOADING SCREEN SINCE IT IS NO LONGER USED
	$('#ssLoading').css({display: 'none'});
	
	// SELECT FIRST SLIDE
	iCurrSlide = 0;
	funcSlideTo(iCurrSlide);
	
	// ENABLE BUTTON SELECTORS
	funcEnableButtons();

	// BEGINS AUTO SLIDE TIMER (if there is more than one slide
	if(iSlidesCompare > 0) {
		timerAutoSlide = setInterval(funcSlideToNext, iSSTimerDelay);
	}
};

// GRAB ALL 'ssPanel' DIVS, TAKE THEIR ATTRIBUTES AND WRITE THEM TO AN OJECT ARRAY
// THAT WILL BE USED LATER ON TO POPULATE CONTENT DEPENDING ON THE SLIDESHOW INDEX.
function funcSetupSlideShow(){
	var ssPanels = $('.ssPanel');
	var nSSPanels = ssPanels.length;
	if(nSSPanels > 0){
		for(var ssPanel=0;ssPanel<nSSPanels;ssPanel++){
			var objPanel = {
				"id":$(ssPanels[ssPanel]).attr('id'),
				"img":$(ssPanels[ssPanel]).children('img').attr('src'),
				"url":$(ssPanels[ssPanel]).children('h2').children('a').attr('href'),
				"title":$(ssPanels[ssPanel]).children('h2').children('a').html(),
				"text":$(ssPanels[ssPanel]).children('p').html()};
				
			arrSlides.push(objPanel);
		};
		
		funcBuildSlideShow();
	};
};

/**************************************END FUNCTIONS***********************************************/

$(document).ready(function(){
	funcSetupSlideShow();
}); //document.ready