var animation = false; 
(function($) {

	$(function() {
	
		/* Functionality for the marketing area promo layers
		--------------------------------------------------------*/
		(function() {
			
			var promoHeight = 280;
			var promoWidth = 730;

			var timerHeight = 38; //Max height of the promo scroll timer indicator
			
			var animationSpeedOnClick = "normal"; //Can be 3 string values (slow (600 miliseconds), normal (400 miliseconds), fast (200 miliseconds)) or a number in miliseconds 
			var animationSpeedOnTimer = "slow"; //Can be 3 string values (slow, normal, fast) or a number in miliseconds
			
			var animationSpeed = animationSpeedOnTimer; //Set animation speed to the default value of the Timer
			
			var rotationTimeout; //Interval variable for auto-rotation
			var rotationTime = 10000; //Rotation time in miliseconds - 10000 = 10 seconds
			var rotationTimeAfterClick = 60000; //Time until normal rotation starts again after a user clicks on an item (in miliseconds).
			
			var thumbs = $("#thumbs");
			var promoMenuItems = thumbs.find("li");
			var promoMenuItemAnchors = promoMenuItems.find("a");
			
			//Create the scroll indicator & timer
			var selector = $("<div id=\"selector\"><div id=\"timer\"><span class=\"solid\"></span><span class=\"opaque\"></span></div></div>");
			selector.appendTo(thumbs);
			var timer = selector.find("#timer");
			timer.height(0); //Initialize height of the timer div
			timer.find("span.opaque").css({opacity: .25}); //Initialize opacity of the semi-transparent portion of the timer
			timer.find("span.solid").css({opacity: .50}); //Initialize opacity of the "solid" portion of the timer
			
			var banners = $("#banners"); //This is the containing layer that we'll set the clip dimensions on. It will also be the layer that we slide left/right when moving to the next promo item
			var promoItems = banners.find("div.banner");
			
			//Initialize the promo & promo container layers
			banners.width(promoWidth).height(promoHeight).css("position", "absolute");
			$("#banner_gallery ").width(promoWidth).height(promoHeight).css("overflow", "hidden");
			
			promoItems.css({
				position: "absolute",
				top: 0
			});
			
			promoItems.each(function(i) {
				//Set the left position of each promo item so that they all appear side by side in one long row
				$(this).css("left", promoWidth * i);
				$(this).css("opacity", "100");
			});
			
			promoMenuItemAnchors.bind("click", function(event) {
				event.preventDefault();

				//Stop animations
				selector.stop();
				banners.stop();
				timer.stop();
				
				//Switch to requested item
				switchToItem($(this).parent(), true);
				
			});
			
			var switchToItem = function(item, click) {
				
				var curr_item_href = $('#thumbs li.selected a').attr('href');
				if (curr_item_href !== undefined) {
					$(curr_item_href.substr(curr_item_href.indexOf('#'))).find('object').each(function() {
						this.stopVideo();
					});
				}
				
				//Clear the existing timeout
				clearTimeout(rotationTimeout);
				
				//Reset the animation speed based on what triggered the switch event.
				if (click) {
					animationSpeed = animationSpeedOnClick;
				}
				else {
					animationSpeed = animationSpeedOnTimer;
				}
				
				//un-select all items
				promoMenuItems.removeClass("selected");

				//Select the requested list item
				item.addClass("selected");
				
				//Determine the layer to slide to
				var nextItemHref = item.find("a").attr("href");
				var targetItem = $(nextItemHref.substr(nextItemHref.indexOf("#")));
		
				//position the indicator based on the selected list item
				var newIndicatorLeft = (item.offset().left - item.parent().offset().left);

				function doAnimation() {
				
					//While the indicator is moving, hide the timer portion of it so only the outline shows (but only if the user didn't explicity select this promo by clicking on it
					if (!click) {
						timer.css("visibility", "hidden").height(0); //Hide the timer layer and re-set its height to 0
					}
					else {
						timer.height(timerHeight).find("span.opaque").hide(); //Show just the "solid" part of the progress indicator
					}

					selector.addClass("moving").animate({
						left: newIndicatorLeft
					}, animationSpeed, function() {
						selector.removeClass("moving");
						timer.css("visibility", "");
					});
	
					//Scroll to the next item in parallel with the scroll indicator
					banners.animate({
						left: "-"+targetItem.css("left")
					}, animationSpeed, function() {
					
						//When the target layer has finished it's animation, start the rotation again. Note: if the user selected an item by clicking on it, wait for the alloted time (rotationTimeAfterClick) before starting auto-rotation again by using a timeout 
					
						if (click) {
							rotationTimeout = setTimeout(startRotation, rotationTimeAfterClick)
						}
						else {
							startRotation();
						}
					});

				}
				
				//Animate to the next promo - but only if there isn't a home page module open at the bottom of the home page.
				if (!animation) {
					doAnimation();
				}
				else {
					//If there is a module open, check once every second to make sure that it's closed, and if it is, animate to the next item then!
					var restartInterval = setInterval(function() {
						if (!animation) {
							doAnimation();
							clearInterval(restartInterval);
						}
					}, 1000);					
				}
				
				function startRotation() {
				
					var nextItem = item.next();

					//Reset the promo scroll timer's height to 0 and make sure the span.opaque is visible again if it was hidden by selecting a promo on click
					timer.height(0).find("span.opaque").show();
					
					//Start by animating the Timer layer's height, once that's done, slide to the next item
					timer.animate({height: timerHeight}, rotationTime, function() {
					
						//Switch to next item
						if (item.hasClass("last")) {
							//If we're on the last item, first item is next
							nextItem = promoMenuItems.eq(0);
						}
						
						switchToItem(nextItem);
					
					});
				}

			};
			
			//On window load, switch to the first item
			$(window).bind("load", function() {
			
				switchToItem(promoMenuItems.eq(0));

			});
			
			//If a user clicks on the promo indicator / timer while it's above a promo, stop auto-rotation
			selector.bind("click", function(event) {
				event.preventDefault();
				
				if (!selector.hasClass("moving")) {
					//Stop animations
					selector.stop();
					banners.stop();
					timer.stop();

					switchToItem(thumbs.find("li.selected"), true);
				}
			});
			
		})();


	});

})(jQuery);