$(document).ready(function() {  
	
			//	PAGE TRANSITIONS
			$('#pageContent').animate({
				height: 'show',
				opacity: 1,
				}, 500);
			
			$('#mainLinks li a, #categoryList li a').click(function(){  
				$('#pageContent').animate({
					height: 'hide',
					opacity: 0,
					},500);
			});		
			
			
			//	MAIN SITE NAVIGATION
			//	prevent noScript behaviour, must be set here not on event below
			$('#mainLinks ul.nested').not('.active').css({ 
				'display' : 'inherit',									
				'marginTop' : '-30px',
				'opacity' : '0'		
			});
			
			//	make the nested part of the navigation slide into view, with a fade
			$('#mainLinks ul', this).mouseover(function () {			
				$('.nested', this).stop().animate({
					'marginTop' : '-20px',
					'marginBottom' : '-5px',
					'opacity' : '1'
					}, 300);
			}).mouseout(function () {
				$('.nested', this).css({ 'display' : 'inherit' });
				$('.nested', this).not('.active').stop().animate({
					'marginTop' : '-30px',
					'marginBottom' : '-5px',
					'opacity' : '0'
					}, 500);
			});	
			
			//	animate the main navigation colours	
			$('#mainLinks ul').css({ 'color' : '#7c807a' });
				$('#mainLinks ul', this).mouseover(function () {
				$(this).stop().animate({
					'color' : '#99ff00'
					}, 300);
			}).mouseout(function () {
				$(this).not('.activeColor').stop().animate({
					'color' : '#7c807a'
					}, 500);
			});	
			
			//	animate the nested navigation colours	
			$('.nested li a').mouseover(function () {
				$('.nested li a').not('.activeColor').css({ 'color' : '#7c807a' });
				$(this).stop().animate({
					'color' : '#99ff00'
					}, 300);
			}).mouseout(function () {
				$(this).not('.activeColor').stop().animate({
					'color' : '#7c807a'
					}, 500);
			});	

			
			
			//	HOMEPAGE

			//	homepage page loads, animate the headings
			//	set defualt css
			$('#original, #spontaneous, #stimulating').css({ 
				'font-size' : '1px',
				'opacity' : '0'
			});
			// animate
			$('#original, #spontaneous, #stimulating').delay(200).animate({
				'font-size' : '36px',
				'opacity' : '1'
			}, 300);	
		
			
			//	portfolio mouseover scroll
			/*<![CDATA[*/

			function makeScrollable(wrapper, scrollable){
				// Get jQuery elements
				var wrapper = $(wrapper), scrollable = $(scrollable);
				
				// Hide images until they are not loaded
				scrollable.hide();
				var loading = $('<div class="loading">Loading...</div>').appendTo(wrapper);
				
				// Set function that will check if all images are loaded
				var interval = setInterval(function(){
					var images = scrollable.find('img');
					var completed = 0;
					
					// Counts number of images that are succesfully loaded
					images.each(function(){
						if (this.complete) completed++;	
					});
					
					if (completed == images.length){
						clearInterval(interval);
						// Timeout added to fix problem with Chrome
						setTimeout(function(){
							
							loading.hide();
							// Remove scrollbars	
							wrapper.css({overflow: 'hidden'});						
							
							scrollable.slideDown('slow', function(){
								enable();	
							});					
						}, 1000);	
					}
				}, 100);
				
				function enable(){
					// height of area at the top at bottom, that don't respond to mousemove
					var inactiveMargin = 99;					
					// Cache for performance
					var wrapperWidth = wrapper.width();
					var wrapperHeight = wrapper.height();
					// Using outer height to include padding too
					var scrollableHeight = scrollable.outerHeight() + 2*inactiveMargin;
					// Do not cache wrapperOffset, because it can change when user resizes window
					// We could use onresize event, but it's just not worth doing that 
					// var wrapperOffset = wrapper.offset();
					
					// Create a invisible tooltip
					var tooltip = $('<div class="sc_menu_tooltip"></div>')
						.css('opacity', 0)
						.appendTo(wrapper);
				
					// Save menu titles
					scrollable.find('a').each(function(){				
						$(this).data('tooltipText', this.title);				
					});
					
					// Remove default tooltip
					scrollable.find('a').removeAttr('title');		
					// Remove default tooltip in IE
					scrollable.find('img').removeAttr('alt');	
					
					var lastTarget;
					//When user move mouse over menu			
					wrapper.mousemove(function(e){
						// Save target
						lastTarget = e.target;

						var wrapperOffset = wrapper.offset();
					
						var tooltipLeft = e.pageX - wrapperOffset.left;
						// Do not let tooltip to move out of menu.
						// Because overflow is set to hidden, we will not be able too see it 
						tooltipLeft = Math.min(tooltipLeft, wrapperWidth - 75); //tooltip.outerWidth());
						
						var tooltipTop = e.pageY - wrapperOffset.top + wrapper.scrollTop() - 40;
						// Move tooltip under the mouse when we are in the higher part of the menu
						if (e.pageY - wrapperOffset.top < wrapperHeight/2){
							tooltipTop += 80;
						}				
						tooltip.css({top: tooltipTop, left: tooltipLeft});				
						
						// Scroll menu
						var top = (e.pageY -  wrapperOffset.top) * (scrollableHeight - wrapperHeight) / wrapperHeight - inactiveMargin;
						if (top < 0){
							top = 0;
						}			
						wrapper.scrollTop(top);
					});
					
					// Setting interval helps solving perfomance problems in IE
					var interval = setInterval(function(){
						if (!lastTarget) return;	
													
						var currentText = tooltip.text();
						
						if (lastTarget.nodeName == 'IMG'){					
							// We've attached data to a link, not image
							var newText = $(lastTarget).parent().data('tooltipText');

							// Show tooltip with the new text
							if (currentText != newText) {
								tooltip
									.stop(true)
									.css('opacity', 0)	
									.text(newText)
									.animate({opacity: 1}, 1000);
							}					
						}
					}, 200);
					
					// Hide tooltip when leaving menu
					wrapper.mouseleave(function(){
						lastTarget = false;
						tooltip.stop(true).css('opacity', 0).text('');
					});			
					
					/*
					//Usage of hover event resulted in performance problems
					scrollable.find('a').hover(function(){
						tooltip
							.stop()
							.css('opacity', 0)
							.text($(this).data('tooltipText'))
							.animate({opacity: 1}, 1000);
				
					}, function(){
						tooltip
							.stop()
							.animate({opacity: 0}, 300);
					});
					*/			
				}
			}
				
			$(function(){	
				makeScrollable("div.sc_menu_wrapper", "div.sc_menu");
			});
			/*]]>*/			

			
			//	recognition and social animations:
			//	prevent default noscript css
			$('.highlightContainerCSS').css({ 'display' : 'none' });				
			$('.col-two').css({ 'padding' : '150px 0px 0px 0px'});					
			$('.homepageThumbs').css({ 'display' : 'inherit' });
			
			//	animate the green square into place for recognition
			$('.recognition').mouseover(function() {
				$('#highlightContainer').stop().animate({
					'margin-left' : '0px',
					'opacity' : '1'
				}, 600);
			}).mouseout(function() {
				$('#highlightContainer').stop().animate({
					'margin-left' : '-1300px',
					'opacity' : '0'
				}, 600);
			});
			//	animate the green square into place for social
			$('.social').mouseover(function() {
				$('#highlightContainer').stop().animate({
					'margin-left' : '350px',
					'opacity' : '1'
				}, 600);
			}).mouseout(function() {
				$('#highlightContainer').stop().animate({
					'margin-left' : '-1300px',
					'opacity' : '0'
				}, 600);
			});

			//	slide the li into view and animate visibility
			$('.recognition, .social').mouseover(function() {
				$('.homepageThumbs', this).stop().animate({
					'margin' : '-153px 0 0 23px',
					'opacity' : '1'
				}, 600);
			}).mouseout(function() {
				$('.homepageThumbs', this).stop().animate({
					'margin' : '0 0 0 23px',
					'opacity' : '0'
				}, 600);
			});

			//	move the whole content a little to emphasis mouseover
			$('.recognition, .social').mouseover(function() {
				$(this).stop().animate({
					'padding' : '125px 0px 25px 0px'
				}, 600);
			}).mouseout(function() {
				$(this).stop().animate({
					'padding' : '150px 0px 0px 0px'
				}, 600);
			});
			
			
			//	SERVICES PAGE
			//	remove the scroll bar and change the hight as scroll not there
			$('#overflowContainer').css({ 'overflow-x' : 'hidden' });
			
			//	stops the flicker with the href, and also stops the page lowering to the positon of the anchor
			$('.drops a').click(function() { return false; });		
			
			var	servicesDistance	=	965
			$('#singlePage_link').click(function() {
				$('#overflowContainer').animate({ scrollLeft: 0 }, 500);
			});
			$('#smallBrochure_link').click(function() {
				$('#overflowContainer').animate({ scrollLeft: servicesDistance }, 500);
			});	
			$('#advancedBusiness_link').click(function() {
				$('#overflowContainer').animate({ scrollLeft: servicesDistance*2 }, 500);
			});	
			$('#ecommerce_link').click(function() {
				$('#overflowContainer').animate({ scrollLeft: servicesDistance*3 }, 500);
			});	
			$('#blog_link').click(function() {
				$('#overflowContainer').animate({ scrollLeft: servicesDistance*4 }, 500);
			});	
			$('#customWork_link').click(function() {
				$('#overflowContainer').animate({ scrollLeft: servicesDistance*5 }, 500);
			});	


			//	PORFOLIO PAGE
			//	remove the scroll bar and change the hight as scroll not there
			$('#siteCaps').css({
				'overflow-x' : 'hidden',
				'height' : '330px'
			});
			
			//	show the navigation dots
			$('ul#currentImage').css({ 'display' : 'inherit' });
			$('ul#currentImage li:eq(0)').css({ 'background-color' : '#99ff00' });

			//	stops the flicker with the href, and also stops the page lowering to the positon of the anchor
			$('ul#currentImage').click(function() { return false; });		
			
			//	set where and how fast the scroll
			var portfolioDistance =	572;
			$('ul#currentImage #first').click(function() {
				$('#siteCaps img').fadeOut(800);
				$('#siteCaps').delay(800).animate({ scrollLeft: 0 }, 1);
				$('#siteCaps img').fadeIn(800);
				//	also animate the green dot
				$('ul#currentImage li:eq(0)').animate({ 'background-color' : '#99ff00' }, 1000);
				$('ul#currentImage li:eq(1)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(2)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(3)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(4)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(5)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(6)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(7)').animate({ 'background-color' : '#50545c' }, 1000);
			});
			$('ul#currentImage #second').click(function() {
				$('#siteCaps img').fadeOut(800);
				$('#siteCaps').delay(800).animate({ scrollLeft: portfolioDistance }, 1);
				$('#siteCaps img').fadeIn(800);
				//	also animate the green dot
				$('ul#currentImage li:eq(0)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(1)').animate({ 'background-color' : '#99ff00' }, 1000);
				$('ul#currentImage li:eq(2)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(3)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(4)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(5)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(6)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(7)').animate({ 'background-color' : '#50545c' }, 1000);
			});
			$('ul#currentImage #third').click(function() {
				$('#siteCaps img').fadeOut(800);
				$('#siteCaps').delay(800).animate({ scrollLeft: portfolioDistance*2 }, 1);
				$('#siteCaps img').fadeIn(800);
				//	also animate the green dot
				$('ul#currentImage li:eq(0)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(1)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(2)').animate({ 'background-color' : '#99ff00' }, 1000);
				$('ul#currentImage li:eq(3)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(4)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(5)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(6)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(7)').animate({ 'background-color' : '#50545c' }, 1000);
			});
			$('ul#currentImage #fourth').click(function() {
				$('#siteCaps img').fadeOut(800);
				$('#siteCaps').delay(800).animate({ scrollLeft: portfolioDistance*3 }, 1);
				$('#siteCaps img').fadeIn(800);
				//	also animate the green dot
				$('ul#currentImage li:eq(0)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(1)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(2)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(3)').animate({ 'background-color' : '#99ff00' }, 1000);
				$('ul#currentImage li:eq(4)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(5)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(6)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(7)').animate({ 'background-color' : '#50545c' }, 1000);
			});
			$('ul#currentImage #fifth').click(function() {
				$('#siteCaps img').fadeOut(800);
				$('#siteCaps').delay(800).animate({ scrollLeft: portfolioDistance*4 }, 1);
				$('#siteCaps img').fadeIn(800);
				//	also animate the green dot
				$('ul#currentImage li:eq(0)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(1)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(2)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(3)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(4)').animate({ 'background-color' : '#99ff00' }, 1000);
				$('ul#currentImage li:eq(5)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(6)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(7)').animate({ 'background-color' : '#50545c' }, 1000);
			});
			$('ul#currentImage #sixth').click(function() {
				$('#siteCaps img').fadeOut(800);
				$('#siteCaps').delay(800).animate({ scrollLeft: portfolioDistance*5 }, 1);
				$('#siteCaps img').fadeIn(800);
				//	also animate the green dot
				$('ul#currentImage li:eq(0)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(1)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(2)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(3)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(4)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(5)').animate({ 'background-color' : '#99ff00' }, 1000);
				$('ul#currentImage li:eq(6)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(7)').animate({ 'background-color' : '#50545c' }, 1000);
			});
			$('ul#currentImage #seventh').click(function() {
				$('#siteCaps img').fadeOut(800);
				$('#siteCaps').delay(800).animate({ scrollLeft: portfolioDistance*6 }, 1);
				$('#siteCaps img').fadeIn(800);
				//	also animate the green dot
				$('ul#currentImage li:eq(0)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(1)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(2)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(3)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(4)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(5)').animate({ 'background-color' : '#50545c' }, 1000);
				$('ul#currentImage li:eq(6)').animate({ 'background-color' : '#99ff00' }, 1000);
				$('ul#currentImage li:eq(7)').animate({ 'background-color' : '#50545c' }, 1000);
			});


			
			//	CONTACT PAGE
			//	roll out the soical
			$('#socialIcons li').mouseover(function() {
				$(this).css({ 'backgroundPosition' : '-10px 0px' });
				$(this).stop().animate({
					'backgroundPosition' : '30px 0px'
					}, 300);
			}).mouseout(function () {
				$(this).stop().animate({
					'backgroundPosition' : '-10px 0px'
					}, 500);
			});	
			
			
			
			
			
			
			
		});		// END SCRIPT