//	Lexmark.com Business Home Page SCA Rotator and Country Drop Down
//	Created by: Matt Mehlhope, Global Web Designer
//	Last Updated: December 16th, 2011

$(function() {
	//start the SCA banner rotator on the home page
	rotator.start();
	
	// setup the country switch drop down list since initialize.js is not included on index
	countryLayer();
	
	// set the proper width of the selected country at the head of the drop down
	setCountryWidth();	
});
//contains dynamic data for the rotator
var rotatorData = [
	{
		text: "",
		button: ""
	},
	{
		text: "",
		button: ""
	},	
	{
		text: "",
		button: ""
	},	
	{
		text: "",
		button: ""
	}
];
// Business Homepage SCA Rotator
var rotator = {
	// commonly set and re-set variables
	_intervalID: "",
	_thisSlide: "",
	_newSlide: "",
	_right: false,
	_learnMore: "",
	_currentSlide: "",
	_currentThumb: "",
	
	start: function() {
		// show the first slide and highlight the first thumbnail
		$('#businessRotator li:first').show();
		$('#rotatorHeadlines li:first').addClass('selected');
				
		//animate the first bannertext in
		this._right = $('#businessRotator li:visible .bannerText').hasClass('rightAlign');
		if (this._right == true) {
			$('#businessRotator li:visible .bannerText').animate({left:545}, 600,"easeOutCirc");
		}
		else {
			$('#businessRotator li:visible .bannerText').animate({left:30}, 600,"easeOutCirc");
		}
		// show the first button
		this.showButton();
		
		// set click and mouseover events
		$('#rotatorHeadlines li').click(rotator.clickRotate);
		$('#rotatorHeadlines li').hover(rotator.displayBubble, rotator.hideBubble);
		
		// adjust the bubbles
		this.modifyBubbles();
		
		// initiate the rotator
		this._intervalID = setInterval( "rotator.autoRotate()", 6000);
	},
	clickRotate: function() {
		// stop the automatic banner rotation
		clearInterval(rotator._intervalID);
		
		//reset the automatic rotator
		rotator._intervalID = setInterval( "rotator.autoRotate()", 6000);
		
		if (!($(this).hasClass('selected'))) {
			// remove any 'selected' classes from the thumbnails and add it only to the clicked thumb
			$('#rotatorHeadlines li').removeClass('selected');
			$(this).addClass('selected');
			
			// hide the currently visible slide and fade in the one that had its thumbnail clicked
			rotator._thisSlide = $('#businessRotator li:visible').index();
			rotator._newSlide = $(this).index();
			rotator._right = $('#businessRotator li .bannerText').eq(rotator._newSlide).hasClass('rightAlign');
			
			$('#businessRotator li').eq(rotator._thisSlide).hide();
			$('#businessRotator li .bannerText').removeAttr('style');
			$('#businessRotator li').eq(rotator._newSlide).fadeIn(400);
			
			if (rotator._right == true) {
				$('#businessRotator li .bannerText').eq(rotator._newSlide).animate({left:545}, 600,"easeOutCirc");
					rotator.showButton();
			}
			else {
				$('#businessRotator li .bannerText').eq(rotator._newSlide).animate({left:30}, 600,"easeOutCirc", function() {
					rotator.showButton();
				});
					
			}
		} 	
	},
	autoRotate: function() {
		// automatic rotation uses the index of the current thumbnail and slide
		var num_elements = $('#businessRotator li').size();
		this._currentSlide = $('#businessRotator li:visible').index();
		this._currentThumb = $('#rotatorHeadlines li.selected').index();
				
		//hide the current slide
		$('#businessRotator li').eq(rotator._currentSlide).hide();
		
		// if the slide's index is the last element, reset the index to the first slide
		if (this._currentSlide == num_elements-1) {
			this._currentSlide = $('#businessRotator li:first').index();
			this._currentThumb = $('#rotatorHeadlines li.first').index();
		}
		
		// if not last slide, add to the index to show next slide	
		else {
			this._currentThumb++;	
			this._currentSlide++;
		}

		$('#rotatorHeadlines li.selected').removeClass('selected');
		$('#rotatorHeadlines li').eq(rotator._currentThumb).addClass('selected');
		$('#businessRotator li .bannerText').removeAttr('style');
		$('#businessRotator li').eq(rotator._currentSlide).fadeIn(400);
		
		this._right = $('#businessRotator li:visible .bannerText').hasClass('rightAlign');
		
		if (this._right) {
			$('#businessRotator li .bannerText').eq(rotator._currentSlide).animate({left:545}, 600,"easeOutCirc");
			rotator.showButton();
		}
		else {
			$('#businessRotator li .bannerText').eq(rotator._currentSlide).animate({left:30}, 600,"easeOutCirc");
			rotator.showButton();
		}
	},
	modifyBubbles: function() {
		var rotatorLinks = $('#rotatorHeadlines li .bubble');
		
		// allow bubbles to adjust to dynamic content
		$(rotatorLinks).each(function() {
			var thumbnailWidth = $(this).siblings('.thumbnail').width() / 2;
			var bubbleOffsetX = -(($(this).width() / 2) - thumbnailWidth + 10);
			var bubbleArgs = {left: bubbleOffsetX};
			
			// center align bubbles over thumbnails, then center arrow under bubble
			$(this).css(bubbleArgs).each(function() {
				var bubbleArrow = $(this).children('.bubbleArrow');
				var bubbleArrowWidth = $(bubbleArrow).width() / 2;
				var bubbleArrowOffsetX = ($(this).width() / 2) - bubbleArrowWidth + 10;
				var bubbleArrowArgs = {left: bubbleArrowOffsetX};
				
				$(bubbleArrow).css(bubbleArrowArgs)
			});
		});
	},
	displayBubble: function() {
		var bubble = $(this).children('.bubble');
		var thumbnailWidth = $(this).children('.thumbnail').width() / 2;
		var bubbleOffsetY = -($(bubble).height() + 25);
		
		var aniArgs = {
			top: bubbleOffsetY,
			opacity:0.9
		};
		$(bubble).stop(true,false).animate(aniArgs, 200, "easeOutCirc").show();
	},
	hideBubble: function() {
		var bubble = $(this).children('.bubble');
		$(bubble).stop(true,false).css({"display" : "none", "top" : "-30px"});
	},
	showButton: function() {
		$('#businessRotator li .button').removeAttr('style');
		$('#businessRotator li:visible .button').animate({opacity:1}, 600,"easeOutCirc");
	}
}

// Dynamic Country dropdown list handling, pulled from initialize.js which is not included on business home page
function countryLayer() {
	$('#header-selectbox').click(function(){
		if ($('#countrylayer').is(":visible")){
			$('#countrylayer').hide();
			$('a.country-link').css('background','none');
			$('a.country-link .country-wrapper').css('background','none');
		} 
		else {
			$('#countrylayer').slideDown(200);
			// TODO: Should toggle class not set explicit styles here!
			$('a.country-link').css('background','url(/en_US/common/img/country-tab-long.gif) no-repeat scroll left top transparent');
			$('a.country-link .country-wrapper').css('background','url(/en_US/common/img/country-tab-long.gif) no-repeat scroll right top transparent');
			$('#countrylayer').css('_right', 'absolute').css('left','-200px');
			if ($("#countrylayer .content-column").length == 0) {
				$('#countrylayer').load('/common/country-list.shtml?lang='+ window.location.pathname.substr(1,5));
			}
		}
	});
	$('#header-selectbox').mouseup(function(){ return false;});
	$(document).mouseup(function() {
		if ($('#countrylayer').is(":visible")){
			$('#countrylayer').hide().data('open', false);
			$('a.country-link').css('background','none');
			$('a.country-link .country-wrapper').css('background','none');
		}
	}); 
}
// Sets the appropriate width of the visible country at the head of the country drop down list
function setCountryWidth() {
	// set width of country list box
	var $countrySpan = $('#header-selectbox .country-label').width();
	var $countryFlag = $('#header-selectbox .country-flag').width();
	var $countryWidth = $countrySpan + $countryFlag + 45;
	$('#header-selectbox').width($countryWidth);
}