jQuery(document).ready(function($) {
	/**
	 * For the scrollable content, we only want the arrows to be visible when we can scroll
	 * We do this by keeping count of how many things are on screen, and how many more we have to show
	 */
	
	// As we have very similar code on both portfolio and people
	// We need to determine what we're applying this to (if any)
	var scroll_mode, scroll_item, scroll_left, scroll_right, scroll_width;
	if($('.people-item').length > 0) {
		scroll_mode = 'people';
		scroll_item = '.people-item';
		scroll_left = '.scroll-left-people';
		scroll_right = '.scroll-right-people';
		scroll_width = 178;
	} else {
		scroll_mode = 'portfolio';
		scroll_item = '.portfolio-item';
		scroll_left = '.scroll-left-portfolio';
		scroll_right = '.scroll-right-portfolio';
		scroll_width = 224;
	}
	
	// Get the total number of items we have to display
	var number_of_items = $(scroll_item).length;
	if(scroll_mode == 'people') number_of_items = Math.ceil(number_of_items / 2);
	
	// Get the viewport width
	var viewport_width;

	// The more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
	if(typeof window.innerWidth != 'undefined') {
		viewport_width = window.innerWidth;
	} else if(typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
		// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
		viewport_width = document.documentElement.clientWidth;
	} else { // Older versions of IE
		viewport_width = document.getElementsByTagName('body')[0].clientWidth;
	}
	
	// Work out how much space we have for displaying these at any one time
	var scroller_width = viewport_width - 240 - 10; // Viewport width - sidebar (- not the full padding)
	
	// How many items can we show at once
	var num_items_on_screen = scroller_width / scroll_width;
	// We'll round this down as we need to make sure it's a whole number
	num_items_on_screen = Math.floor(num_items_on_screen);
	
	// We need a counter which is the number of clicks we've done so far
	// We use this to know when to show or hide the arrows
	var scroll_counter = 0;
	
	// If the number of items currently in view is less then or equal to the total number, no need for arrows
	if(number_of_items <= num_items_on_screen) {
		$(scroll_left).addClass('disabled').find('img').hide();
		$(scroll_right).addClass('disabled').find('img').hide();
	}
	
	// When we start, we can't scroll left, so disable that
	$(scroll_left).addClass('disabled').find('img').hide();
	
	// Calculate the upper bound, this is the number the counter can reach
	var scroll_upper_band = number_of_items - num_items_on_screen;
	
	// Every time the right arrow is pressed, we increment the counter, and check if we've reached the end
	// And then we do the same for left, but we decrement and stop on zero
	$(scroll_right).click(function() {
		if($(scroll_right).hasClass('disabled')) return false;
		scroll_counter++;
		
		if(scroll_counter >= scroll_upper_band) {
			$(scroll_right).addClass('disabled').find('img').fadeOut(500, function() {
				$(this).css('width', '36px');
			});
		}
		// If we've just scrolled right, we need to be able to go back left
		$(scroll_left).removeClass('disabled').find('img').fadeIn();
	});
	
	$(scroll_left).click(function() {
		if($(scroll_left).hasClass('disabled')) return false;
		scroll_counter--;
		
		if(scroll_counter <= 0) {
			$(scroll_left).addClass('disabled').find('img').fadeOut(500, function() {
				$(this).css('width', '36px');
			});
		}
		// If we've just scrolled left, we need to be able to go back right
		$(scroll_right).removeClass('disabled').find('img').fadeIn();
	});
	
	
	
	/**
	 * For the page headings (.title h2)
	 * We need to wrap it in span, so that it has the background
	 * But we can't wrap it all, as that will make it a big block
	 * And we want an uneven end to the lines
	 */
	if($('.title h1').length > 0) {
		var title = $('.title h1');
		var title_text = title.text();
		
		// Split this into parts, and then wrap each one in span
		var title_words = title_text.split(' ');
		
		// Wrap each word in a span and stick it back in the title
		var str = '';
		for(var i in title_words) {
			str += '<span>' + title_words[i] + '</span>';
		}
		title.html(str);
	}
	if($('.title h2').length > 0) {
		var title = $('.title h2');
		var title_text = title.text();
		
		// Split this into parts, and then wrap each one in span
		var title_words = title_text.split(' ');
		
		// Wrap each word in a span and stick it back in the title
		var str = '';
		for(var i in title_words) {
			str += '<span>' + title_words[i] + '</span>';
		}
		title.html(str);
	}
	
	/**
	 * If we have a subnav item selected, slide that nav item down
	 * There is a minor delay of half a second to allow for the font face to load
	 */
	if($('.about.subnav li.selected, li.about.selected').length > 0) {
		$('.about.subnav').delay(500).slideDown(500, function() {
			fix_sidebar();
		});
	}
	if($('.portfolio.subnav li.selected, li#nav-portfolio.selected').length > 0) {
		$('.portfolio.subnav').delay(500).slideDown(500, function() {
			fix_sidebar();
		});
	}
	
	
	
	/**
	 * Generic scrollable item
	 * We check that both the scrolling parent exists, and has enough items to scroll
	 */
	var scroller = $('.image-rotator');
	if(scroller.length > 0 && scroller.find('img').length > 1) {
		scroller.cycle({ 
			fx:		'scrollHorz', 
			speed:	400, 
			timeout:5000, 
			next:   '.next-image', 
			prev:   '.previous-image' ,
			pause:	true
		});
	}
	
	
	/**
	 * Show and hide the jobs
	 */
	// Start off by hiding them all originally
	$('.job-details').hide();
	
	$('.job-link').click(function() {
		// We only want to execute this code if we don't already have this job on show
		// Otherwise it will slide up and then down again
		if($('#job-' + this.hash.substring(1) + ':visible').length > 0) return false;
		
		$('#job-intro, .job-details').slideUp();
		$('#job-' + this.hash.substring(1)).slideDown(500, function() {
			fix_sidebar();
		});
		return false;
	});
	
	$('.back-to-jobs').live('click', function() {
		$('.job-details').slideUp();
		$('#job-intro').slideDown();
		return false;
	});
	
	
	/**
	 * Fix the nav, text overlay and scrolling issue
	 */
	function fix_sidebar() {
		var viewport_height, content_height, nav_height, actual_nav_height;
		if(typeof(window.innerWidth) == 'number') viewport_height = window.innerHeight;
		else if(document.documentElement && document.documentElement.clientHeight) viewport_height = document.documentElement.clientHeight;
		else if(document.body && document.body.clientHeight) viewport_height = document.body.clientHeight;
		
		var profile_page	= $('.people-items-container').length == 0;
		var people_page		= $('.people-items-container').length != 0;
		
		// Get the height of the content area
		// There are a few special cases, where the content wrapper height isn't the real height
		// So we need to check a few special cases as well
		content_height	= $('.content-wrapper').height();
		if($('.portfolio-items-container').length > 0) content_height = 635;
		if($('#people-wrapper').length > 0) content_height = 635;

		// Jobs page needs some extra love and attention
		if($('#job-intro').length) {
			content_height = 121 + $('.main-panel').height() + 30; // We just need the 30 to make it work
		}
		
		nav_height		= content_height < viewport_height ? viewport_height : content_height;
		
		// Is the nav as it is tall enough? We need the height of the nav plus height for the logo and footer
		actual_nav_height = 120 + $('#nav-links').height() + 28 + 20; // Logo + links + footer + footer margin
		
		if(actual_nav_height > nav_height) {
			nav_height = actual_nav_height;
			$('body').height(nav_height);
		}
		
		if(actual_nav_height > content_height) {
			content_height = actual_nav_height = nav_height;
		}
		
		if($('#people-wrapper').length > 0 && people_page) {
			$('.background-people').height(nav_height);
		}
		
		$('#nav').height(nav_height);
		
		if(people_page) $('.content-wrapper').height(content_height);
		
		if($('#people-wrapper, #main-content.portfolio').length > 0) {
			$('#main-content').height(nav_height);
		}
		
		if(actual_nav_height < viewport_height) {
			$('#nav, #footer').css('position', 'fixed');
		} else {
			$('#nav, #footer').css('position', 'absolute');
		}
	};
	
	fix_sidebar();
	
	window.onresize = fix_sidebar;
});


$(window).load(profile_fix);

function profile_fix() {
	/**
	 * On the people page, we need the background to scroll vertically
	 * We need this done with JS, otherwise we either lose the scrollbar, or the image gets cut off
	 * As 100% height is based on the viewport size, not the content  height
	 * 
	 * Only do this on the profile page
	 */
	if($('.profile-fix').length > 0) {
		// Height variables
		var person_height, window_height, the_height = 0;
		// DOM elements
		var people_wrapper		= $('#people-wrapper');
		var background_people	= $('.background-people');
		
		// Calculate what height we need the background to be
		// This will either be the height of the content, or 100%
		// Whichever is greatest (otherwise we get a white gap at the bottom)
		person_height = $('.content-wrapper').height();
		
		if(typeof(window.innerWidth) == 'number') window_height = window.innerHeight;
		else if(document.documentElement && document.documentElement.clientHeight) window_height = document.documentElement.clientHeight;
		else if(document.body && document.body.clientHeight) window_height = document.body.clientHeight;
		
		if(person_height < $('.content-wrapper').height() && false) {
			$('.profile-fix').
				css('background-repeat', 'repeat').
				css('position', 'absolute').
				css('height', $('.content-wrapper').height() + 'px').
				css('width', '9999').
				find('img').remove();
			
			if($('body').hasClass('single-people')) $('.profile-fix').css('background-image', 'url(../wp-content/themes/stockley/assets/images/bg-people.jpg)');
		}
		
		if(person_height < window_height) {
			the_height = window_height;
		} else {
			the_height = person_height;
			background_people.css('background-repeat', 'repeat');
		}

		people_wrapper.height(the_height);
		
		// We need this to force the scrollbar in IE as the height of the div isn;t enough!
		if($.browser.msie) $('html').height(the_height);
		
		$('#nav').height(the_height);
	}
}