// Once Document is ready we will store stuff in these.
// Declaring these here ensre they are available to all functions.
var $elements, settings  = {};

// DESKTOP
// Controll Sub Nav (Desktop)
var navControllsDesktop = function ($) {

	
	// Combine Both Contianers into one jQuery object
	// if ie7 include the left column as we also need to animate this.	
	var $containers = (ie7) ? $('#' + $elements.container.attr('id') + ', #container2' + ', #' + $elements.leftCol.attr('id')) : $('#' + $elements.container.attr('id') + ', #container2'),
	
	// Every item we need to hide when the left column is collapsed
		$hideItems = $('#' + $elements.mainList.attr('id') + ', #' + $elements.logo.attr('id')),
		
	// Update at start and end of animation
	// isOpen: Update as the nav opens/closes. Use to check if we should close the nav on hover out.
	// firstTime: false once the slideNav function is run
	// speed + ease.  We use these a lot.  Alias them.
		isOpen = true, 
		firstTime = true, 
		speed = settings.speed, 
		ease = settings.ease, 
		$toggleMain = $elements.toggleMain,

	
	// METHODS
	// 1. Slide the nav open or closed
	 	slideNav = function (shouldAnimate) {

		// SHOULD WE ANIMATE?
		// If not then set animSpeed to 0
			var animSpeed = (!shouldAnimate) ? animSpeed = 0 : animSpeed = speed,
	
		// Save the left margin for later
			marginLeft = ($elements.container.hasClass(settings.openClass)) ? get_closed_left_margin() : 0;
	
		// If this is the first time, then attach the hover event.
		// We dont want to be attaching this every time the function is run
			if (firstTime) {
				$elements.rightCol.hover(function() {
					if (isOpen) {
						slideNav(speed);
					}
					
				}, '');			
				firstTime = false;			
			}
			

		// Show/Hide items in the left column
			if (marginLeft) {
				// We Closed it
				isOpen = false;
				// Animate Containers by left margin (negative). Then toggle state class.
				$containers.stop().animate({'marginLeft' : marginLeft}, animSpeed, ease).toggleClass(settings.openClass);
		
		
				if (ie) {
					// IE Cant handle the opacity.  Hide instead
					// Hide/show instead of animate
					$toggleMain.show();
					$hideItems.hide();
			
				} else {
					// Not ie: Animate
					// Hiding the main menu
					// Show the anchor
				
					$hideItems.stop().animate({'opacity' : 0}, animSpeed, ease, function () {
						$hideItems.hide();
					});
					$toggleMain.show();
					$toggleMain.stop().delay(animSpeed / 2).animate({'opacity' : 1}, animSpeed, ease);
					$toggleMain.find('.txt').stop().delay(animSpeed / 2).animate({'marginRight' : 0}, animSpeed - (animSpeed / 2), 'easeInOutBack');
					$toggleMain.find('.icon').stop().delay(animSpeed / 4).animate({'marginRight' : 0}, animSpeed - (animSpeed / 4), 'easeInOutBack');			
			
				}

			} else {
				// We Opened it
				isOpen = true;
		
				if (ie) {
					// IE Cant handle the opacity.  Hide instead
					// Hide/show instead of animate				
					$hideItems.show();
					$toggleMain.hide();
					// Animate Containers by left margin (negative). Then toggle state class.
					$containers.stop().animate({'marginLeft' : marginLeft}, animSpeed, ease).toggleClass(settings.openClass);
			
				} else {
					// Not ie: Animate
					// Showing the main menu
					// Hide the anchor
				
					$toggleMain.find('.icon').stop().animate({'marginRight' : 30}, animSpeed, 'easeInOutBack');
					$toggleMain.find('.txt').stop().delay(speed/12).animate({'marginRight' : 30}, animSpeed - (animSpeed / 12), 'easeInOutBack');
					$toggleMain.stop().delay(speed / 3).animate({'opacity' : 0}, animSpeed - (animSpeed / 3), ease, function() {
					
						// Hide the anchor so we can still click on the main menu
						$toggleMain.hide();
					
						// Animate Containers by left margin (negative). Then toggle state class.	
						$hideItems.show().stop().animate({'opacity' : 1}, animSpeed, ease);
						$containers.stop().animate({'marginLeft' : marginLeft}, animSpeed, ease).toggleClass(settings.openClass);
					});
					
						
				}
			}			
		},
		
		// Return the new left margin
		get_closed_left_margin = function() {
			
		// open class present: left margin = 87% of header columns width
		//               else: left margin = 0	
			return ((parseInt($elements.mainNav.css('width'), 10) / 100) * 85.2) * -1;
		}
		
		

		
		

// FIRE	
// Been here before? close without delay
// First time ? Close with a delay
	if (visited_category_before()) {
		slideNav(false);
	
	} else {
		setTimeout( function () { slideNav(true) }, speed * 1.65);
	
	};



// EVENTS
// 1. CLICK: User clicks the toggle nav button (nav opens)
	$elements.toggleMain.bind( 'click', function(e) {
		e.preventDefault();
		slideNav(true);
		return false;		
	});
	
	
	
// 2. RESIZE: Window resizes - we might need to re-position the containers :-(
	$(window).resize( function() {
			
		var delay = 0; 
		
		// If marginLeft is 0 we wont need to resize it.
		if ($elements.container.css('marginLeft') != 0) {
			
			// IE fires resize event before new dimensions can be calculated - so delay it.
			if (ie) delay = 500
			setTimeout( function() {
				$containers.css('marginLeft', get_closed_left_margin());
			}, delay);
			
		}

	})

	

	
	
};






// DESKTOP:
// Has the user visited before?
var visited_category_before = function() {
	
	// Parent name. The name of the category (alias it)
	// Does a cookie already exists matching the parents name
	var parentName = settings.parentName, cookie = getCookie(parentName);
	
	// parentName is false (page has no parent, and therefore no cookie)
	// cookie is false (it doesnt exist)
	if (!parentName || !cookie) {
		if (!cookie) {
			// Create the cookie for next time
			setCookie(parentName, true);
			
		}		
		return false;
				
	} else {
		return true;
		
	}

}









// DESKTOP
// CHECK IF COOKIE EXISTS
function getCookie (cookie_name) {
	var results = document.cookie.match ( '(^|;) ?' + cookie_name + '=([^;]*)(;|$)' );

  	if (results) {
		return ( unescape ( results[2] ) );
 	} else {
		return false;
	}

}








// DESKTOP
// CREATE A COOKIE
function setCookie (c_name,value)	{

	// Create the cookie
	document.cookie=c_name + "=" + escape(value);
}








// DESKTOP
// Animate the > on the main nav
var animateMenuAnchors = function($navWrapper, inColor, inShadowColor, outShadowColor) {
	
	
	var $navWrapper = $navWrapper,
		ease = 'easeOutElastic',
		speed = 200,
		$anchors = $navWrapper.find('li > a'),
		outColor = $anchors.css('color')
		outPadding = 0;
		
		

	$anchors.hover( function() {
		// IN

		var inPadding, inBgPos, outBgPos, $this = $(this);
		if ($navWrapper.attr('id') == 'navmainlist' ) {
			inPadding = settings.main_menu_anchor_padding_in;
			inBgPos = settings.main_menu_anchor_bg_pos_in;
			outBgPos = settings.main_menu_anchor_bg_pos_out;
			
		} else {
			inPadding = settings.sub_menu_anchor_padding_in;
			inBgPos = settings.sub_menu_anchor_bg_pos_in;
			outBgPos = settings.sub_menu_anchor_bg_pos_out;
			
		}

		// Animate the padding first
		$this.stop().animate({'paddingLeft' : inPadding, 'color' : inColor}, speed/2, 'easeOutQuad');
		
		// If its not IE animate the text shadow
		if (!ie) $this.animate({'textShadow' : '1px 1px 1px' + inShadowColor}, speed/2, 'easeOutQuad');
		
		// Lastly animate the arrow
		$this.parent().delay(speed/2).stop().css('backgroundPosition' , outBgPos).animate({'backgroundPosition' : inBgPos}, speed, 'easeOutBounce');

		
	}, function() {
		// OUT
		
		var inPadding, inBgPos, outBgPos, $this = $(this);
		if ($navWrapper.attr('id') == 'navmainlist' ) {
			outBgPos = settings.main_menu_anchor_bg_pos_out;
			inBgPos = settings.main_menu_anchor_bg_pos_in;
			
		} else {
			outBgPos = settings.sub_menu_anchor_bg_pos_out;
			inBgPos = settings.sub_menu_anchor_bg_pos_in;
			
		}
		
		// Animate arrow first
		$this.parent().stop().css('backgroundPosition' , inBgPos).animate({'backgroundPosition' : outBgPos}, speed, 'easeOutBounce');
		
		// Then animate the left padding	
		$this.stop().delay(speed/4).animate({'paddingLeft' : 0, 'color' : outColor}, speed/2, 'easeOutQuad');
		
		// Now if not ie animate the text shadow
		if (!ie) $this.delay(speed/4).animate({'textShadow' : '1px 1px 1px' + outShadowColor}, speed/2, 'easeOutQuad');
		
	})


	
}









// MOBILE
// Controll Sub Nav (mobile)
var navControllsMobile = function () {
	
	// Toggle Elements
	var $toggleSub = $elements.toggleSub,
		$toggleMain = $elements.toggleMain,
		
	// Toggle Element ID's	
		toggleSubId = $toggleSub.attr('id'),
		toggleMainId = $toggleMain.attr('id');
	

	// METHODS	
	// Show / Hide the Nav
	// Update toggle text to reflect state
	var toggleNav = function ($navList, $toggleAnchor) {
		
		var $toggleAnchorTxt = $toggleAnchor.find('.txt')
		
		if ($navList.hasClass(settings.openClass)) {
			$navList.hide();
			
			if ($toggleAnchor.attr('id') == toggleMainId) {
				$toggleAnchorTxt.html('Main menu');
				
			} else {
				$toggleAnchorTxt.html('Sub menu');
				
			}
			

		} else {
			$navList.show();
			$toggleAnchorTxt.html('close');
		}
			
		$navList.toggleClass(settings.openClass);
		$toggleAnchor.toggleClass('toggleIsClosed');
	};
	
	// EVENTS
	$toggleSub.click(function () {
		toggleNav($elements.subList, $(this));
	});
	
	$toggleMain.click(function () {
		toggleNav($elements.mainList, $(this));
	});
	
	// FIRE
	// Close the nav when the page first loads
	toggleNav($elements.subList, $toggleSub);
	toggleNav($elements.mainList, $toggleMain);

};







// EXTEND jQuery
// Allows cross browser useage of backrounf-position.
// Normally ie returns undefined for background-position
(function($) {
  jQuery.fn.backgroundPosition = function() {
    var p = $(this).css('background-position');
    if(typeof(p) === 'undefined') return $(this).css('background-position-x') + ' ' + $(this).css('background-position-y');
    else return p;
  };
})(jQuery);








// PLACEHOLDER SUPPORT?
// This creates placeholder="" like functionality in ie.
function activatePlaceholders() {

	var inputs = document.getElementsByTagName("input");
	
	for (var i=0;i<inputs.length;i++) {
  		if (inputs[i].getAttribute("type") == "text" || inputs[i].getAttribute("type") == "email") {
   			if (inputs[i].getAttribute("placeholder") && inputs[i].getAttribute("placeholder").length > 0) {
    			inputs[i].value = inputs[i].getAttribute("placeholder");
    			inputs[i].onclick = function() {
     				if (this.value == this.getAttribute("placeholder")) {
      					this.value = "";
     				}
     				return false;
    			}
    			inputs[i].onblur = function() {
     				if (this.value.length < 1) {
      					this.value = this.getAttribute("placeholder");
     				}
    			}
   			}
  		}
	}
}







// DESKTOP
// Hover styles for the process nav.
// Only runs in the process nav is present
function processHoverStyles($wrapper) {
	var $wrapper = $wrapper,
		$sections = $wrapper.find('.copy'),
		sectionHeader = 'h2',
		active = 'active',
		hoverClass = "processHover",
		bulletClassIn = 'bulletIn',
		bulletClassOut = 'bulletOut',
		speed = 150,
		ease = 'easeOutQuad',
		bulletSpansString = '<span class="' + bulletClassOut + ' bullet"></span><span class="' + bulletClassIn + ' bullet"></span>';
		
	// Add the divs that we will animate on hover	
	// Well animate these later
	for (var i=1; i<$sections.length+1; i++) {
		$wrapper.prepend("<div id='c" + i + "-hover' class='" + hoverClass + "' style='opacity: 0; display:none;'></div>");
		
	}
	
	// Add the spans to each list items
	// These spans are the bullet points. 
	// We'll animate these later
	// make the in ones opaue (well show them on hover)
	$sections.find('li').prepend(bulletSpansString);
	$sections.find('.' + bulletClassIn).fadeOut();

		
	$sections.hover(function() {
		// Hover in
		var $this = $(this),	
		// The div we should animate in	
			$hoverDiv = $('#' + $this.attr('id') + '-hover');
		
		// Animate background in	
		$hoverDiv.stop().show().animate({'opacity' : 1}, speed, ease);
		
		// Animate the list items		
		$this.find('li').stop().animate({'color' : '#fff'}, speed, ease);
	
		if (ie) {
			//IE: Dont animate opacity (ie sucks at this), instead hide + show
			$this.find('.'+bulletClassOut).hide();
			$this.find('.'+bulletClassIn).show();
			
		} else {
			// Not IE.  Animate opacity instead
			$this.find('.'+bulletClassOut).stop().animate({'opacity' : 0}, speed, ease);
			$this.find('.'+bulletClassIn).stop().show().animate({'opacity' : 1}, speed, ease);			
		}

		
	}, function() {	
		// Hover out
		var $this = $(this),	
		// The div we should animate out	
			$hoverDiv = $('#' + $(this).attr('id') + '-hover');
		
		// Animate background out	
		$hoverDiv.stop().animate({'opacity' : 0}, speed, ease);
	
	
		// Animate the list items
		$this.find('li').stop().animate({'color' : '#999'}, speed, ease);
		if (ie) {
			//IE: Dont animate opacity (ie sucks at this), instead hide + show
			$this.find('.'+bulletClassOut).show();
			$this.find('.'+bulletClassIn).hide();
			
		} else {
			// Not IE.  Animate opacity instead
			$this.find('.'+bulletClassOut).stop().animate({'opacity' : 1}, speed, ease);
			$this.find('.'+bulletClassIn).stop().animate({'opacity' : 0}, speed, ease);
		}
		
		
	})
		
}







// DESKTOP
// ANIMATE anchors on hover
function animateAnchors ($wrapper, inColor, outColor) {
	
	var speed = 150,
	 	ease = 'easeOutQuad',
		inColor = inColor,
		outColor = outColor,
		$anchors = $wrapper.find('a');	
	
	$anchors.hover(function () {		
		$(this).stop().animate({'color' : inColor}, speed, ease);
		
	}, function() {
		$(this).stop().animate({'color' : outColor}, speed, ease);
		
	})
	
	
}







// DESKTOP
// ANIMATE form elements on hover
function animateFormElements ($wrapper, inColor, outColor) {
	
	var speed = 150,
	 	ease = 'easeOutQuad',
		inColor = inColor,
		outColor = outColor,
		$formElements = $wrapper.find('input, textarea');
		
	$formElements.hover( function() {
		$(this).stop().animate({'borderBottomColor' : inColor, 'borderTopColor' : inColor, 'borderLeftColor' : inColor, 'borderRightColor' : inColor }, speed, ease);
		
	}, function() {
		$(this).stop().animate({'borderBottomColor' : outColor, 'borderTopColor' : outColor, 'borderLeftColor' : outColor, 'borderRightColor' : outColor }, speed, ease);
		
	})
	
	
}









// DESKTOP + not ie
// ANIMATE buttons on hover 

function animateButtons ($buttons) {
	
	/* Commented out for now as we dont have hover styles and its not 100% in FF 
	
	var speed = 150,
		ease = 'easeOutQuad',
		hoverClass = 'hover';
		hoverElem = "<div class='" + hoverClass + "' style='display:block; opacity:0;'></div>";	
	
	// Add the hover span to each button
	$buttons.each( function() {	
		var $this = $(this);
			
		// Insert the hover span
		$this.css('position', 'relative').prepend(hoverElem);
		
		// HACK: Unable to fix mox-inner-focus problem
		// Select just Firefox 3.0.x
		if (jQuery.browser.mozilla) {
		
			if ($this.hasClass('btn-sign-up') || $this.hasClass() ) {
				$this.find('.' + hoverClass).css('top', '-8px')
			}
			
		}

		
	})
	
	// EVENT: User hovers on anchor	
	$buttons.hover( function() {
		$(this).children('.' + hoverClass).stop().animate({'opacity' : 1}, speed, ease);
		
	}, function() {
		$(this).children('.' + hoverClass).stop().animate({'opacity' : 0}, speed, ease);
		
	})
	
	*/
		
		
}








// DESKTOP
// Animate background color on hover
function animateBackgroundColor ($items, inColor, outColor) {
	
	var $items = $items,
		speed = 150,
		ease = 'easeOutQuad',
		inColor = inColor,
		outColor = outColor;
		
	$items.hover( function() {			
		$(this).stop().animate({'backgroundColor' : inColor}, speed, ease);

	}, function() {
		$(this).stop().animate({'backgroundColor' : outColor}, speed, ease);

	})
	
}







// DESKTOP
// Animate the quick links at the bottom of the page
function animateQuickLinks ($wrapper) {
	
	var $items = $wrapper.find('dl'),
		$anchors = $wrapper.find('a')
		speed = 150,
		ease = 'easeOutQuad';
	

	// Hover over a DL
	$items.hover( function() {
		$this = $(this);	
		$this.find('dt').stop().animate({'color' : 'rgb(221, 221, 221)'}, speed, ease);
		$this.find('a').stop().animate({'color' : 'rgb(153, 153, 153)'}, speed, ease)
			
	}, function() {
		$this = $(this);	
		$this.find('dt').stop().animate({'color' : 'rgb(119, 119, 119)'}, speed, ease);
		$this.find('a').stop().animate({'color' : 'rgb(68, 68, 68)'}, speed, ease)	
		
	})
	
	// Hover over anchors is handled via animateAnchors
	
}










// DESKTOP
// Animate image opacity on hover
function animateImageOpacity ($items) {

	var $items = $items;
		$images = $items.find('img')
		speed = 200,
		ease = 'easeOutQuad';
	
	// Animate opacity of each image to its off state one by one,
	// delay each time so that the images fade in sequence	
	var  i = $items.length;
	$images.each(function () {
		$(this).delay(speed * i).animate({'opacity' : 0.6}, speed * 2, ease);
		i--
	})	

	// EVENT: Hover
	$items.hover(function() {
		$(this).find('img').stop().animate({'opacity' : 1}, speed, ease);
		
	}, function() {
		$(this).find('img').stop().animate({'opacity' : 0.6}, speed, ease);
		
	})
		
		
	
	
}









// Check a left position of a div and return true or false
// use this for settings.isMobile && settings.is960
function check_screen_type($element) {
	
	return (parseInt($element.css('left'), 10) > 0) ? true : false;
	
}







// Update settings used for animating nav based on 'is960'
function update_resolution_based_settings() {

	if (check_screen_type($('#is960'))) {
		settings.main_menu_anchor_padding_in = '10px';
		settings.main_menu_anchor_bg_pos_in = '1px -783px';
		settings.main_menu_anchor_bg_pos_out = '-11px -783px';
		
		
		// Sub nav is present - also store these values
		if (settings.hasSubNav) {
			
			settings.sub_menu_anchor_padding_in = '10px';
			settings.sub_menu_anchor_bg_pos_in = '1px -780px';
			settings.sub_menu_anchor_bg_pos_out = '-11px -780px';
			
		}
		
	} else {
		settings.main_menu_anchor_padding_in = '12px';
		settings.main_menu_anchor_bg_pos_in = '1px -426px';
		settings.main_menu_anchor_bg_pos_out = '-11px -426px';	
		
		// Sub nav is present - also store these values
		if (settings.hasSubNav) {
			settings.sub_menu_anchor_padding_in = '12px';
			settings.sub_menu_anchor_bg_pos_in = '1px -429px';
			settings.sub_menu_anchor_bg_pos_out = '-11px -429px';
			
		}		
		
	}
	
}





// The Service icons - handle animation, position and hover
function service_icons($wrapper) {
	

	var $icons = $wrapper.find('.icon'),
		label_class = '.service',
		$labels = $wrapper.find(label_class),
		speed = 150,
		ease = 'easeOutQuad',
		off_opacity = 0.6,
		trim = function(val) { return parseInt(val.replace(/([\d.]+)(px|pt|em|%)/,'$1'), 10)},
		i = $labels.length;
		
	
	// Position, hide & prepare each label for animation
	$labels.each(function () {
		var $this = $(this)
		$this.css({'marginLeft' : ((trim($this.css('width')) / 2 ) * -1), 'opacity' : 0, 'display' : 'block'})
		$this.find('.arw').css('opacity', 0);
		
		i--
	})	
			
	// Animate opacity of each icon to its off state one by one,
	// delay each time so that the images fade in sequence	
	i = $icons.length;
	$icons.each(function () {
		$(this).delay(speed * i).animate({'opacity' : off_opacity}, speed * 2, ease);
		i--
	})	
	
	
	// EVENT: Hover 
	$icons.hover( function() {	
		
		$this = $(this)		
			
		$labels.stop().animate({'opacity' : 0}, speed, ease);
		$this.stop().animate({'opacity' : 1}, speed, ease);
		$this.find(label_class).stop().animate({'opacity' : 1}, speed, ease)
		$this.find('.arw').stop().animate({'opacity' : 1}, speed, ease);
		
	}, function() {	
		
		$this = $(this);
			
		$labels.stop().animate({'opacity' : 0}, speed, ease);
		$this.stop().animate({'opacity' : off_opacity}, speed, ease);
		$this.find('.arw').stop().animate({'opacity' : 0}, speed, ease);
		
		
	})
	
	

	
	
}











// FIRE
$('document').ready(function ($) {
	
	// STORE elements needed globally (extend on a per fucntion basis)
	$elements = {
		'subNav' : $('#navsub'),
		'container' : $('#container'),
		'toggleMain' : $('#navmainanchor'),
		'mainList' : $('#navmainlist'),
		'toggleSub' : $('#navsubanchor'),
		'subList' : $('#navsublist'),
		'leftCol' : $('#leftcol'),
		'rightCol' : $('#rightcol'),
		'mainNav' : $('#headermain'),
		'viewport' : $('window'),
		'logo' : $('#logo')
	};
	// STORE settings needed globally (extend on a per fucntion basis)
	settings = {
		'openClass' : 'open',
		'noSubClass' : 'nosub',
		'delay' : 1250,
		'speed' : 400,
		'ease' : 'easeOutExpo',
		'parentName' : parentName,
		'exdays' : 7
	};
	
	// JS: Let CSS know we have JS
	$('body').addClass('hasJS');
	
	// IE: is the browser ie?
	if (ie) activatePlaceholders();
	
	// MOBILE: Are we a mobile ?	
	settings.isMobile = check_screen_type($('#ismobile'));
	
	
	
	if (settings.isMobile) {
// SMALL SCREEN (Smart Phone)
		navControllsMobile($);
		







	} else {
// LARGE SCREEN (Desktop, iPad etc)

	// IPAD: if iPad change the click event to touchend
		var ua = navigator.userAgent;
		if (!ie) settings.clickEvent = (ua.match(/iPad/i)) ? "touchstart" : "click";

	// MAIN MENU: Set Main Menu settings based on resolution. Recalculate if the window resize
		update_resolution_based_settings();
		$(window).resize( function() {
			update_resolution_based_settings();
		})


	// MAIN MENU: Add animations to hover effects
		animateMenuAnchors($elements.mainList, 'rgb(255, 255, 255)');

		
	// PROCESS: Process styles for desktop
		// Checks if it exists then passes it into the function
		var $processWrapper = $('#process')
		if ($processWrapper) processHoverStyles($processWrapper);
		
		
	// QUICKLINKS: Animate the Quick links at the bottom of the page
		$quickLinks = $('#quickLinks')
		if ($quickLinks) animateQuickLinks($quickLinks);
	
		
	// COLORS: Animate the color of every other anchor on hover 
		animateAnchors($('#rightcol .sixcol, #contactR, .banner3, #list3, #banner4, #c-page-contacts'), 'rgb(255, 255, 255)', 'rgb(221, 22, 66)');
		animateAnchors($quickLinks, 'rgb(221, 22, 66)',  'rgb(153, 153, 153)')
		animateAnchors($('#footer #email'), 'rgb(224, 22, 67)', 'rgb(119, 119, 119)');
		
		
	// BORDERS: Animate the border Color of every form element on hover
		if ($('#form1') || $('#form2') || $('#form3')) animateFormElements ($('#form1, #form2, #form3'), 'rgb(266, 30, 71)', 'rgb(34, 34, 34)');
		
	// BACKGROUNDS: Animate backgrounds on hover
		$list1Anchors = $('#list1 .copy a');
		if ($list1Anchors) animateBackgroundColor($list1Anchors , 'rgb(34, 34, 34)', 'rgb(21, 21, 21)');
		
		$ServicesAnchors = $('#services .copy a');
		if ($ServicesAnchors) {
			animateBackgroundColor($ServicesAnchors , 'rgb(34, 34, 34)', 'rgb(21, 21, 21)');
			
		// Also needs image animating on hover			
			if (!ie) animateImageOpacity($ServicesAnchors)
			
		}
		
		
	// SERVICE ICONS: The icons that have a hover bubble 
		var $service_icons_wrapper = $('.list9');		
		if ($service_icons_wrapper.length) service_icons($service_icons_wrapper)
		
		
		
		
	// PORTFOLIO: The Portfolio page
		$portfolioList = $('#portfolio-list .copy a');	
		if ($portfolioList) animateBackgroundColor($portfolioList, 'rgb(34, 34, 34)', 'rgb(21, 21, 21)');
	
		
	// BUTTONS: Animate the hover effect of buttons
		// Ie screws up the opacity, so lets fall back to css 
		if (!ie) animateButtons($('.btn-view-all, .btn-sign-up, .btn-services, .btn-portfolio, .btn-lets-talk, .btn-call-me-back'));	



		




		if ($elements.container.hasClass(settings.noSubClass)) {
// SUB NAV: No Sub Nav
			// We need to add the nosub class to the body			
			$('body').addClass(settings.noSubClass);






			
		} else {
// SUB NAV: We have sub nav	

			// Update the settings to include the sub nav settings
			settings.hasSubNav = true;
			update_resolution_based_settings();
			
			// Animate the sub nav anchors on hover
			animateMenuAnchors($elements.subList, 'rgb(255, 255, 255)', 'rgb(161, 16, 49)', 'rgb(189, 69, 97)');
			
			// Inititate the Sub Nav Controlls 
			if (!(ua.match(/iPad/i))) navControllsDesktop($);	
					
		}
		
	}
	
	

	
});