var xmlData;
var counter;
var itemSize;
var firstLoadItem = 'yes';
var delayTimer;
var pauseWidget = 'no';
var pauseButtonClicked = 'no';

var pageSet;
var xmlDoc;

var timeBetweenFades = 3000;
var fadeInSpeed = 1000;
var fadeOutSpeed = 1000;

var fadeInSpeedTopPanel = 500;
var fadeOutSpeedTopPanel = 500;

var popUpModalHeaderContent = "Don't just spray it. Say it.";
var popUpModalBodyContent = "Contact TAG if you have any questions or concerns about our products. Or even if you just want to give us a shout out. <a href='http://pg.custhelp.com/cgi-bin/pg.cfg/php/enduser/std_alp.php?p_pv=1.667&p_prods=667&prod_lvl1=667' target='_blank'>Get instant answers</a> to your questions or <a href='http://pg.custhelp.com/cgi-bin/pg.cfg/php/enduser/std_alp.php?p_pv=1.667&p_prods=667&prod_lvl1=667' target='_blank'>send us an email</a> or call us at 1-800-445-5388.<br/><br/><a href='mailTo:tagrec@gmail.com?subject=TAG%20Records%20Question/Comment'>Click here</a> to send a message to TAG Records.";

$(function()
{	
	/*******************************************************
		Image Preloader
	*******************************************************/
	imagePreLoader();
	
	initWidget();
	
	$('#selectorIconPausePlay').livequery('click', function()
	{
		if($('#selectorIconPausePlay').hasClass('selectorIconPause'))
		{
			initPauseWidget();
		}
		
		else
		{
			initPlayWidget();
		}
	});
	
	$('#buttonNavOverContainer .selectorIcon').livequery('click', function()
	{
		if(!$(this).is('#selectorIconPausePlay'))
		{
			var itemIndex = $('#buttonNavOverContainer .selectorIcon').index(this);
			counter = itemIndex;
			initPauseWidget();
			populateContentContainer(itemIndex);
		}
	});
	
	$('.productLandingCapsule').hover(function()
	{
		var capsuleID = $(this).attr('id');
		var TAGCanID;
		
		switch(capsuleID)
		{
			case "productLandingLudacrisCapsule":
				TAGCanID = "luda";
				break;
			case "productLandingRobCapsule":
				TAGCanID = "rob";
				break;
			case "productLandingCarmeloCapsule":
				TAGCanID = "melo";
				break;
			default:
				TAGCanID = "luda";
				break;
		}
		
		rotateBottleFlash(TAGCanID);
		
	}, function()
	{
		return false;
	});	
});

///////////////////////////////////////////////////////////////////////////
//		initPauseWidget() - performs all the actions to Pause the widget
///////////////////////////////////////////////////////////////////////////

function initPauseWidget()
{
	pauseButtonClicked = 'yes';
	pauseAndStartWidget('pause');
	$('#selectorIconPausePlay').removeClass('selectorIconPause');
	$('#selectorIconPausePlay').addClass('selectorIconPlay');	
	
	$('#selectorIconPausePlay').css('backgroundPosition', '0px -35px');
}

///////////////////////////////////////////////////////////////////////////
//		initPlayWidget() - performs all the actions to Play the widget
///////////////////////////////////////////////////////////////////////////

function initPlayWidget()
{
	pauseButtonClicked = 'no';
	pauseAndStartWidget('start');
	$('#selectorIconPausePlay').removeClass('selectorIconPlay');
	$('#selectorIconPausePlay').addClass('selectorIconPause');
	
	$('#selectorIconPausePlay').css('backgroundPosition', '0px 0px');
}

///////////////////////////////////////////////////////////////////////////
//		initWidget() - creates the css for the widget and pulls in the
//			dynamic content using ajax.
///////////////////////////////////////////////////////////////////////////

function initWidget()
{
	$('#buttonNav').css(
	{
		height: 50,
		width: '100%',
		bottom: 0,
		position: 'absolute'
	});
	
	$('.overLayer').css(
	{
		opacity: 0
	});
	
	if($('#slideShowWidget').hasClass("Ludacris"))
	{
		pageSet = "Ludacris";	
	}
	
	else if($('#slideShowWidget').hasClass('Carmelo'))
	{
		pageSet = "Carmelo";	
	}
	
	else if($('#slideShowWidget').hasClass('Rob'))
	{
		pageSet = "Rob";	
	}
	
	else if($('#slideShowWidget').hasClass('homePage'))
	{
		pageSet = "homePage";	
	}
	
	switch(pageSet)
	{
		case 'Ludacris': xmlDoc = "ludacrisWidgetFeed.xml";
				 break;
		case 'Rob': xmlDoc = "robWidgetFeed.xml";
				 break;
		case 'Carmelo': xmlDoc = "carmeloWidgetFeed.xml";
				 break;
		case 'homePage': xmlDoc = "homePageWidgetFeed.xml";
				 break;
	}
	
	if(xmlDoc)
	{
		$.get('xml/'+xmlDoc, function(data)
		{
			xmlData = data;
			$('#SEOWidgetContent').html(xmlData);
			itemSize = $(xmlData).find('item').size();
			
			populateNav();
			counter = 0;
			initLoop();
		});
	}
}

///////////////////////////////////////////////////////////////////////////
//		populateNav() - populates the widget navigation at the bottom
///////////////////////////////////////////////////////////////////////////

function populateNav()
{
	if(itemSize != 1)
	{
		for(var b = 1; b < itemSize+1; b++)
		{
			var selectorIcon = "<div class='selectorIcon png'><span>"+b+"</span><div class='overLayer png'></div></div>";
			$('#buttonNavOverContainer').append(selectorIcon);
		}
		
		var selectorIconPause = "<div id='selectorIconPausePlay' class='selectorIcon selectorIconPause png'></div>";
		$('#buttonNavOverContainer').append(selectorIconPause);
	}
}

///////////////////////////////////////////////////////////////////////////
//		initLoop() - performs the timeouts and looping through the items
///////////////////////////////////////////////////////////////////////////

function initLoop()
{
	if(itemSize == 1)
	{
		populateContentContainer(counter);
	}
	
	else
	{
		clearTimeout(delayTimer);
		
		if(pauseWidget != 'yes')
		{
			if(firstLoadItem == 'yes')
			{
				if(counter < itemSize)
				{
					populateContentContainer(counter);
				}
				
				else
				{
					counter = 0;
					populateContentContainer(counter);
				}
			}
			
			else
			{
				if(counter < itemSize)
				{
					delayTimer = setTimeout('populateContentContainer("'+counter+'");', timeBetweenFades);
				}
				
				else
				{
					counter = 0;
					delayTimer = setTimeout('populateContentContainer("'+counter+'");', timeBetweenFades);
				}	
			}
		}
		
		else
		{
			clearTimeout(delayTimer);
		}
	}
}

///////////////////////////////////////////////////////////////////////////
//		populateContentContainer(index) - 
//			performs the populating of the container with the appropriate
//			content.
///////////////////////////////////////////////////////////////////////////

function populateContentContainer(index)
{
	var widgetItem = $(xmlData).find('item').eq(index).find('content').text();
	var widgetItemImage = $(xmlData).find('item').eq(index).find('mainImage').text();
	var widgetItemImageLink = $(xmlData).find('item').eq(index).find('imageLink').text();
	var widgetItemImageTarget = $(xmlData).find('item').eq(index).find('imageLinkTarget').text();
	var widgetItemImageAltText = $(xmlData).find('item').eq(index).find('imageLinkAltText').text();
	
	var widgetTopPanelImage = $(xmlData).find('item').eq(index).find('topHeadline').text();
	var widgetTopPanelText = $(xmlData).find('item').eq(index).find('topContent').text();
	
	if(widgetItemImageLink == '')
	{
		var widgetImage = "<img class='widgetImage' src='"+widgetItemImage+"' alt='"+widgetItemImageAltText+"' />";
	}
	
	else
	{
		if(widgetItemImageTarget == '')
		{
			var widgetImage = '<a href="'+widgetItemImageLink+'" target="_blank"><img class="widgetImage" src="'+widgetItemImage+'" alt="'+widgetItemImageAltText+'" /></a>';	
		}
		
		else
		{
			var widgetImage = '<a href="'+widgetItemImageLink+'" target="'+widgetItemImageTarget+'"><img class="widgetImage" src="'+widgetItemImage+'" alt="'+widgetItemImageAltText+'" /></a>';
		}
	}
	
	widgetTopPanelImage = "<img class='topPanelImage png' src='"+widgetTopPanelImage+"' />";
	widgetTopPanelText = "<div class='topPanelText'>"+widgetTopPanelText+"</div>";
	
	var topPanelContent = widgetTopPanelImage+widgetTopPanelText;
			
	if(widgetItem != '' || widgetItem != null)
	{
		if(firstLoadItem == 'yes')
		{
			// Top Panel Population
			$('#widgetTopPanel #contentArea').hide();
			$('#contentArea').html(topPanelContent);
			$('#widgetTopPanel #contentArea').fadeIn(fadeInSpeedTopPanel);
			
			// Main Panel Population
			$('#contentContainer #content').hide();
			$('#contentContainer #content').html(widgetImage);
			highLightNav(index);
			$('#contentContainer #content').fadeIn(fadeInSpeed, function()
			{
				if(itemSize == 1)
				{
					return false;
				}
				
				else
				{
					counter++;
					
					if(pauseWidget == 'no')
					{
						initLoop();
						return true;
					}
					
					else
					{
						return false;
					}
				}
			});
			
			firstLoadItem = 'no';
		}
		
		else
		{
			$('#widgetTopPanel #contentArea').fadeOut(fadeOutSpeedTopPanel, function()
			{
				// Top Panel Population
				$('#widgetTopPanel #contentArea').hide();
				$('#widgetTopPanel #contentArea').html(topPanelContent);
				$('#widgetTopPanel #contentArea').fadeIn(fadeInSpeedTopPanel);
			});
			
			$('#contentContainer #content').fadeOut(fadeOutSpeed, function()
			{
				// Main Panel Population
				$('#contentContainer #content').hide();
				$('#contentContainer #content').html(widgetImage);
				highLightNav(index);
				$('#contentContainer #content').fadeIn(fadeInSpeed, function()
				{
					if(itemSize == 1)
					{
						return false;
					}
					
					else
					{
						counter++;
						
						if(pauseWidget == 'no')
						{
							initLoop();
							return true;
						}
						
						else
						{
							return false;
						}
					}
				});
			});
		}
	}
	
	else
	{
		$('#contentContainer #content').html("Content could not be pulled in!");
	}
}

///////////////////////////////////////////////////////////////////////////
//		highLightNav(index) - performs the highlighting of the navigation
///////////////////////////////////////////////////////////////////////////

function highLightNav(index)
{
	//$('#buttonNavOverContainer').find('.selectorIconHighlight').removeClass('selectorIconHighlight');
	//$('.selectorIcon').eq(index).addClass('selectorIconHighlight');
	
	var selectorIconSize = $('#buttonNavOverContainer .selectorIcon').size();
	
	for(var u = 0; u < selectorIconSize; u++)
	{
		$('.selectorIcon').not('#selectorIconPausePlay').eq(u).css('backgroundPosition', '0px 0px');
		$('.selectorIcon').not('#selectorIconPausePlay').eq(u).css('color', '#000000');
	}
	
	$('.selectorIcon').eq(index).css('backgroundPosition', '0px -35px');
	$('.selectorIcon').eq(index).css('color', '#FFFFFF');
}

///////////////////////////////////////////////////////////////////////////
//		pauseAndStartWidget(action) - 
//			changes the pauseWidget variable that is used in the initLoop()
///////////////////////////////////////////////////////////////////////////

function pauseAndStartWidget(action)
{
	if(action == 'pause')
	{
		$('#contentContainer #content').stop(true, true).show();
		pauseWidget = 'yes';
	}
	
	else
	{
		pauseWidget = 'no';
	}
	
	initLoop();
}

///////////////////////////////////////////////////////////////////////////
//		imagePreLoader() - 
//			image preloader for TAG
///////////////////////////////////////////////////////////////////////////

function imagePreLoader()
{
	var imageToPreLoad = new Array(
		"/images/common/navigation/navTagLogo.png",
		"/images/common/navigation/navSocialize.png",
		"/images/common/navigation/subNavTagBlogOff.png",
		"/images/common/navigation/subNavTagBlogOn.png",
		"/images/common/navigation/subNavTwitterOff.png",
		"/images/common/navigation/subNavTwitterOn.png",
		"/images/common/navigation/subNavYouTubeOff.png",
		"/images/common/navigation/subNavYouTubeOn.png",
		"/images/common/navigation/subNavMySpaceOff.png",
		"/images/common/navigation/subNavMySpaceOn.png",
		"/images/common/navigation/subNavFlickrOff.png",
		"/images/common/navigation/subNavFlickrOn.png",
		"/images/common/navigation/navProducts.png",
		"/images/common/navigation/subNavStayUpOff.png",
		"/images/common/navigation/subNavStayUpOn.png",
		"/images/common/navigation/subNavGetYoursOff.png",
		"/images/common/navigation/subNavGetYoursOn.png",
		"/images/common/navigation/subNavMakeMovesOff.png",
		"/images/common/navigation/subNavMakeMovesOn.png",
		"/images/common/navigation/navTagRecords.png",
		"/images/common/navigation/navEvents.png",
		"/images/common/navigation/navBuyTag.png",
		"/images/common/navigation/navRightCapper.png");
	
	for(var i = 0; i < imageToPreLoad.length; i++)
	{
		$('<img>').attr('src', imageToPreLoad[i]);
	}
}