/************************* GLOBAL VARIABLES ****************************/

var moduleBoxWidth = 800; // width of the pop up
var moduleBoxHeight = 500; // height of the pop up

var anchorOffsetLeft;

var rolloverState = "";
var modalRolloverState = "";


/***********************************************************************************************************
	Modal Functions
***********************************************************************************************************/
	function initModalBox()
	{
		// check to see if background Module exists
		if(!$("#backgroundModule").length)
		{
			// if not existing, create it
			createBackgroundModule();
			
			// stylize it
			$("#backgroundModule").css(
			{
				backgroundColor: 'black', width: '100%', height: $(window).height(), zIndex: 500, top: 0, left: 0, opacity: 0.6, position: 'absolute'
			});
			
			// hide and fade it in
			$("#backgroundModule").hide();
			$("#backgroundModule").fadeIn(800);
		}		
		else
		{
			if($("#backgroundModule").css('display') == 'none')
			{
				$("#backgroundModule").fadeIn(800);
			}
		}
		
		// Create Content Module
		createModule();
		
		anchorOffsetLeft = $('body').width();
		
		$('html, body').css(
		{
			overflowX: 'hidden'
		});
		
		$("#moduleDiv").css(
		{
			position:'absolute',
			zIndex: 1000,
			left: anchorOffsetLeft,
			opacity: 0.5,
			width: moduleBoxWidth,
			height: moduleBoxHeight
		});
		
		Center();
		
		$("#moduleDiv").animate({
			opacity: 1.0,
			left: '50%',
			marginLeft: -moduleBoxWidth/2
		}, 500);
	}
		
	// Set close button event
	$("#moduleDivCloseButton").livequery('click', function() 
	{
		closeModal();
	});
	
	// Set modal background click event	
	$('#backgroundModule').livequery('click', function()
	{
		closeModal();
	});
	
	function createModule()
	{
		var div = "<div id='moduleDiv'></div>";
		
		$("body").append(div);
		
		var divCloseButton = "<div id='moduleDivCloseButton'><img class='imageTransition' src='Images/Common/icon_close.gif' style='background: url(Images/Common/icon_close_over.gif);' alt='Close'></div>";
		$('#moduleDiv').append(divCloseButton);
	}
	
	function createBackgroundModule()
	{
		var divBackgroundModule = "<div id='backgroundModule'></div>";
		$("body").append(divBackgroundModule);
	}
	
	function closeModal()
	{
		var leftValue;
		
		if ($.browser.safari)
		{
			leftValue = "-200%";
		} 
		else
		{
			leftValue = -moduleBoxWidth;
		}
		
		$("#moduleDiv").animate({
			left: leftValue,
			opacity: 0.5
		}, 1000, function()
		{
			$("#moduleDiv").remove();
			
			$('html, body').css(
			{
				overflowX: 'auto'
			});
		});
		
		$("#backgroundModule").fadeOut(800);
	}
	
	function repeatModal(contentID)
	{
		var leftValue;
		
		if ($.browser.safari)
		{
			leftValue = "-200%";
		} 
		else
		{
			leftValue = -moduleBoxWidth;
		}
	
		$("#moduleDiv").animate({
			opacity: 0.5,
			left: leftValue
		}, 1000, function()
		{
			$("#moduleDiv").remove();
			
			$('html, body').css(
			{
				overflowX: 'auto'
			});
			
			initModalBox();
			ajaxGetContent(contentID);
		});
	}
	
	function initGetContent(contentID)
	{
		if($('#moduleDiv').length)
		{
			repeatModal(contentID);
		}
		
		else
		{
			initModalBox();
			ajaxGetContent(contentID);
		}
	}
	
	function ajaxGetContent(contentID)
	{
		switch(contentID)
		{
			case 'AcrossDigital':
				contentPath = "AcrossDigitalEmergingTraditionalMedia.aspx";
				break;
			case 'imc2HealthAndWellness':
				contentPath = "imc2HealthAndWellness.aspx";
				break;
			
			case 'FostersEngagement':
				contentPath = "FostersEngagement.aspx";
				break;
			case 'BuildSustainableRelationships':
				contentPath = "BuildSustainableRelationships.aspx";
				break;
			case 'BetweenBrandsAndPeople':
				contentPath = "BetweenBrandsAndPeople.aspx";
				break;
			case 'ContactUs':
				contentPath = "ContactUs.aspx";
				break;				
			/*case '':
				contentPath = "";
				break;*/
		}
			
		$.get(contentPath, function(data)
		{			
			$("#moduleDiv").append(data);
			
			// initialize the scrollbar on modal content divs
			$('.scroll-pane').jScrollPane({showArrows:true, animateTo:true, animateInterval:30, animateStep:30});
			
			// jQuery Scroll pane set up the links
			$('a.scrollToElement').bind(
				'click',
				function()
				{
					
					$this = $(this);
					var destinationSelector = $(this).attr('rel');
					$('.scroll-pane', $this.parent().parent().parent()).each(
						function()
						{
							this.scrollTo(destinationSelector);
						}
					);
					
					$('.scroll-pane', $this.parent().parent().parent().parent()).each(
						function()
						{
							this.scrollTo(destinationSelector);
						}
					);
					
					$('.scroll-pane', $this.parent().parent().parent().parent().parent()).each(
						function()
						{
							this.scrollTo(destinationSelector);
						}
					);
					

					return false;
				}
			);
			pageTracker._trackPageview(contentPath);
		});
	}

	
	function Center()
	{
		var windowWidth = $(window).width();
		var windowHeight = $(window).height();
		var scrollTop = $(window).scrollTop();
		var popupWidth = $("#moduleDiv").width();
		var popupHeight = $("#moduleDiv").height();
		var topPos = (windowHeight - popupHeight) / 2 + scrollTop;         
		
		$("#moduleDiv").css(
		{
			"top" : topPos,
			"marginTop" : 0                   
		});
	}
	
	function resizeModalBackground()
	{
		$("#backgroundModule").css(
		{
			height: $(document).height()
		});
	}
	

/***********************************************************************************************************
	Image Rollover Functions
***********************************************************************************************************/


	// Rollover for all non-modal page rollover images with class of "imageTransition"
	$('img.imageTransition').livequery(function()
    {
		var thisObject = $(this);
		
		DetermineImageTransitionType();
		DetermineModalImageTransitionType();
		
		// If in Modal
		if ($("div#moduleDiv").css('display') == "block")
		{
			if (modalRolloverState == "transition")
			{
				ImageTransitionHover(thisObject);
			}
			else
			{
				ImageSwapHover(thisObject);
			}		
		}
		else  // If not in modal
		{
			if (rolloverState == "transition")
			{
				ImageTransitionHover(thisObject);
			}
			else
			{
				ImageSwapHover(thisObject);
			}
		}
	});
	

	
	
//	// Rollover for all modal page rollover images with class of "modalImageTransition"
//	$('img.modalImageTransition').livequery(function()
//    {
//		DetermineModalImageTransitionType();
//    
//		var thisObject = $(this);
//		if (modalRolloverState == "transition")
//		{
//			ImageTransitionHover(thisObject);
//		}
//		else
//		{
//			ImageSwapHover(thisObject);
//		}
//	});
	
	// General Image Transition Hover
	function ImageTransitionHover(obj)
	{
		
		var thisObject = obj;
		thisObject.hover(function()
		{
			imageRollOverTransition(thisObject);                
		}, function()
		{
			imageRollOffTransition(thisObject);                
		});		
	}
	
	// General Image Swap Hover
	function ImageSwapHover(obj)
	{
		var thisObject = obj;
		thisObject.hover(function()
		{
			imageRollOverSwap(thisObject);          
		}, function()
		{
			imageRollOffSwap(thisObject);  
		});		
	}
	
	// Used to Determine Whether non-modal pages are to use transition or swap
	function DetermineImageTransitionType()
	{			
		if ($.browser.msie)
		{
			rolloverState = "transition";
		}
		else if ($.browser.safari && (parseInt($.browser.version) < 530))
		{
			rolloverState = "transition";
		}
		else if ($.browser.safari && (parseInt($.browser.version) >= 530))
		{
			rolloverState = "swap";
		}
		else // firefox, everything else
		{
			rolloverState = "transition";
		}
	}
	
	// Used to Determine Whether modal pages are to use transition or swap
	function DetermineModalImageTransitionType()
	{			
		if ($.browser.msie)
		{
			modalRolloverState = "swap";
		}
		else if ($.browser.safari && (parseInt($.browser.version) < 530))
		{
			modalRolloverState = "transition";
		}
		else if ($.browser.safari && (parseInt($.browser.version) >= 530))
		{
			modalRolloverState = "swap";
		}
		else // firefox, everything else
		{
			modalRolloverState = "transition";
		}
	}
	
	// Image rollover Swap
	function imageRollOverSwap(item)
	{
		var imageSource = item.attr('src');
		//alert("swap" + "  " + imageSource);
		
		overState = imageSource.replace('.gif', '_over.gif');
		overState = overState.replace('.jpg', '_over.jpg');
		
		item.attr('src', overState);				
	}
	
	// Image rollover Transition
	function imageRollOverTransition(item)
	{
		//alert("transition " + item);
		initImageTransitionAlternate(item)

		item.stop().animate({
			opacity: 0
		}, 500);		
	}		
	
	// Image Rolloff Swap
	function imageRollOffSwap(item)
	{	
		var imageSource = item.attr('src');
		onState = imageSource.replace('_over.gif', '.gif');
		onState = onState.replace('_over.jpg', '.jpg');
	
		item.attr('src', onState);				
	}
	
	// Image Rolloff Transition
	function imageRollOffTransition(item)
	{		
		var $$ = item;
		
		$$.stop().animate({
			opacity: 1
		}, 500);
	}
	

    function initImageTransitionAlternate(obj)
    {
		// cache the copy of jQuery(this) - the start image
        var $$ = $(obj);
        
        // get the target from the backgroundImage + regexp
        var target = $$.css('backgroundImage').replace(/^url|[\(\)'"]/g, '');

		if($$.parent('span').length == 0)
		{
			// nice long chain: wrap img element in span
			$$.wrap('<span class="fadeContainer" style="position: relative;"></span>')
				// change selector to parent - i.e. newly created span
				.parent()
				// prepend a new image inside the span
				.prepend('<img>')
				// change the selector to the newly created image
				.find(':first-child')
				// set the image to the target
				.attr('src', target);

			$('.fadeContainer img').css(
			{
				display: 'block'
				//border: 'solid 1px red'
				//background: 'white'
			});

			// the CSS styling of the start image needs to be handled
			// differently for different browsers
			if ($.browser.msie || $.browser.mozilla) {
				$$.css({
					'position' : 'absolute', 
					'left' : 0,
					'background' : '',
					'top' : 0
				});
			} else if ($.browser.opera && $.browser.version < 9.5) {
				// Browser sniffing is bad - however opera < 9.5 has a render bug 
				// so this is required to get around it we can't apply the 'top' : 0 
				// separately because Mozilla strips the style set originally somehow...                    
				$$.css({
					'position' : 'absolute', 
					'left' : 0,
					'background' : '',
					'top' : 0
				});
			} else { // Safari
				$$.css({
					'position' : 'absolute', 
					'left' : 0,
					'background' : '',
					'top' : 0
				});
			}
		}
    }
    
/******************************************************
	Initial Sequential RollOver
******************************************************/
var navigationSize = 0;
var itemIndex = 0;
var sectionName;

	$(function()
	{
	
		navigationSize = $('#navigation img.imageTransition').size();
		setTimeout("processImageFade()", 1000); // TODO: Change time to 6 seconds (6000)
		

		
		//To keep modal box centered on the screen. To use this function, use this call...
		$(window).resize(Center);   //On window Resize        
		$(window).scroll(Center);   //on scroll
		
		$(window).resize(resizeModalBackground);   //On window Resize        
		$(window).scroll(resizeModalBackground);
	});
	
	function processImageFade()
	{
		if(itemIndex < (navigationSize))
		{
			initialImageFade();
			itemIndex++;
		}
	}
	
	function initialImageFade()
	{
		//if ($.browser.safari && (parseInt($.browser.version) >= 530))
		if ($.browser.safari && (parseInt($.browser.version) >= 530))
		{
			// do nothing
		}
		else
		{
			initImageTransitionAlternate($('#navigation img.imageTransition').eq(itemIndex));
		
			$('#navigation img.imageTransition').eq(itemIndex).animate(
			{
				opacity: 0
			}, 1000, function()
			{
				$(this).animate(
				{
					opacity: 1
				}, 1000, function()
				{
					processImageFade();
				});
			});
		}
	}

	
		
/******************************************************
	Footer Image RollOver
******************************************************/	
	$(function()
	{
		DetermineImageTransitionType();
		$("#secondaryNavigation a").mouseover(function() 
		{
			var name = $(this).attr('name'); 			
						
			if ($("img." + name).attr('src') != "undefined")
			{
				var image = $("img." + name); 
				var thisObject = image;
				
				if (rolloverState == "transition")
				{
					imageRollOverTransition(image);
				}
				else
				{
					imageRollOverSwap(image);
				}
			}

		}).mouseout(function()
		{
			var name = $(this).attr('name'); 			
			var image = $("img." + name); 
			var thisObject = image;
		
			if (rolloverState == "transition")
			{
				imageRollOffTransition(thisObject);
			}
			else
			{
				imageRollOffSwap(thisObject);
			}
		});

	});