$(document).ready(function()
{
	// Stuff to do as soon as the DOM is ready;

	// put the search in the middle on load
	var windowHeight = $(window).height();
	var positionTop = ((windowHeight - 138)/2);
	$('#searchForm').css('top', positionTop + "px");

//	$('#first').find('#question1').delay(1000).show('drop', { direction: 'up' }, 1000);
//	$('#first').find('#question2').delay(1150).show('drop', { direction: 'up' }, 1000);
//	$('#first').find('#question3').delay(1300).show('drop', { direction: 'up' }, 1000);
/*	$('#first').find('#question4').delay(1450).show('drop', { direction: 'up' }, 1000);
	$('#first').find('#question5').delay(1600).show('drop', { direction: 'up' }, 1000);
	$('#first').find('#question6').delay(1750).show('drop', { direction: 'up' }, 1000);
	$('#first').find('#question7').delay(1900).show('drop', { direction: 'up' }, 1000);
	$('#first').find('#question8').delay(2050).show('drop', { direction: 'up' }, 1000);
	$('#first').find('#searchForm').delay(2200).fadeIn(1000);
                                                              */
	// enable smooth scrolling effect when a question is selected
	$.localScroll();

	// save selectors as variables to increase performance
	var $window = $(window);
	var $first = $('#first');
	var $second = $('#second');
	var $third = $('#third');
	var $fourth = $('#fourth');
	var $fifth = $('#fifth');
	var $sixth = $('#sixth');
	var $seventh = $('#seventh');
	var $eighth = $('#eighth');
	var $ninth = $('#ninth');
	var $tenth = $('#tenth');

	// bind class "inview" to the visible section in the viewport
	$('#first, #second, #third, #fourth').bind('inview', function (event, visible)
	{
		if (visible == true) { $(this).addClass('inview'); }
		else { $(this).removeClass('inview'); }
	});

	// function that is called for every pixel the user scrolls. Determines the position of the background
	// arguments: horizontal position of bg, viewport height, scrollbar position, background offset from top, scroll speed multiplier for bg, prevent positive value
	function newPos(x, windowHeight, pos, adjuster, multiplier, reset)
	{
		var result = -((windowHeight + pos) - adjuster);
		if(reset && result > 0) result = 0;
		return x + "% " + (result * multiplier)  + "px";
	}

	// function to be called whenever the window is scrolled or resized
	function Move()
	{
		// get the position of the scrollbar
		var pos = $window.scrollTop();
		
		if(!jQuery.browser.msie && jQuery.browser.version < 9){
			$('.inview').each(function()
			{
				if($(this).attr('id') != 'first' && $(this).attr('id') != 'fourth')
				{
					$(this).css({'backgroundPosition': newPos(50, windowHeight, pos, 2000, 0.6, false)});
					$(this).find('.answer').show();
	
					var blockPosTop = $(this).find('.content').offset().top;
					var blockHeight = $(this).find('.content').height();
	
					if(pos - blockPosTop + windowHeight > 0 && pos - blockPosTop + (windowHeight / 2) - (blockHeight / 2) < 0)
					{
						$(this).find('.content').css('opacity', (pos - blockPosTop + windowHeight) / ((windowHeight + blockHeight) / 2));
					}
				
					if(pos - blockPosTop + (windowHeight / 2) - (blockHeight / 2) > 0 && pos - blockPosTop - blockHeight < 0)
					{
						$(this).find('.content').css('opacity', -1 * (pos - blockPosTop - blockHeight) / ((windowHeight + blockHeight) / 2));
					}
				}
			});
		}

		// only move the background of the section which has the inview class
		if($first.hasClass('inview'))
		{
			$first.css({'backgroundPosition': newPos(50, windowHeight, pos, 750, 0.6, true)});
		}

		if($second.hasClass('inview'))
		{
			$second.css({'backgroundPosition': newPos(50, windowHeight, pos, 1900, 0.6, false)});
		}

		if($third.hasClass('inview'))
		{
			$third.css({'backgroundPosition': newPos(60, windowHeight, pos, 3150, 0.6, false)});
		}

		if($fourth.hasClass('inview'))
		{
			$fourth.css({'backgroundPosition': newPos(50, windowHeight, pos, 4400, 0.6, false)});
		}

		if($fifth.hasClass('inview'))
		{
			$fifth.css({'backgroundPosition': newPos(50, windowHeight, pos, 5600, 0.6, false)});
		}

		if($sixth.hasClass('inview'))
		{
			$sixth.css({'backgroundPosition': newPos(50, windowHeight, pos, 6800, 0.6, false)});
		}

		if($seventh.hasClass('inview'))
		{
			$seventh.css({'backgroundPosition': newPos(50, windowHeight, pos, 8000, 0.6, false)});
		}

		if($eighth.hasClass('inview'))
		{
			$eighth.css({'backgroundPosition': newPos(50, windowHeight, pos, 9200, 0.6, false)});
		}

		if($ninth.hasClass('inview'))
		{
			$ninth.css({'backgroundPosition': newPos(50, windowHeight, pos, 10400, 0.6, false)});
		}

		if($tenth.hasClass('inview'))
		{
			$tenth.css({'backgroundPosition': newPos(50, windowHeight, pos, 11400, 0.6, false)});
		}
	}

	// when user resizes the window
	$window.resize(function()
	{
		// recalculate the height of the window
		windowHeight = $(window).height();

		// move the background
		Move();
	});

	// when user scrolls
	$window.bind('scroll', function()
	{
		// move the background
		Move();
	});
});