// getPageScroll() by quirksmode.com - adapted to only return yScroll
function getPageScroll() {
    var yScroll;
    if (self.pageYOffset) {
      yScroll = self.pageYOffset;
    } else if (document.documentElement && document.documentElement.scrollTop) {
      yScroll = document.documentElement.scrollTop;
    } else if (document.body) {// all other Explorers
      yScroll = document.body.scrollTop;
    }
    return yScroll
}

// Adapted from getPageSize() by quirksmode.com
function getPageHeight() {
    var windowHeight
    if (self.innerHeight) { // all except Explorer
      windowHeight = self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
      windowHeight = document.documentElement.clientHeight;
    } else if (document.body) { // other Explorers
      windowHeight = document.body.clientHeight;
    }
    return windowHeight
}



// ElectricJelly position loader by Jodi Warren :)

//define all the elements that you'll be playing with. Apparently this makes it faster than jQuery finding them every time you need to use them.

var ej_containers = $('.container');
var ej_containerImages = ej_containers.contents().find('img');
var ej_element_1 = $('#part_one');
var ej_element_2 = $('#part_two_1');
var ej_element_3 = $('#part_two_2');
var ej_element_4 = $('#part_two_3');
var ej_element_5 = $('#part_two_4');
var ej_element_6 = $('#part_three');
var ej_element_7 = $('#part_four');
var ej_element_8 = $('#part_five');
var footer_element = $('#footer');


var docHeight = $(document).height();


function fadeContainers()
{
	//make all the containers background colour white and text-colour #aaa over the space of 50 milliseconds
	ej_containers.stop().animate({backgroundColor: "white", color: "#aaa"}, 50);
	ej_element_8.stop().animate({backgroundColor: "#333333", color: "#aaa"}, 50);
	//If an image doesn't have the class of active, make it 50% opacity over 50ms
	ej_containerImages.not('.active').stop().animate({opacity: ".5"}, 50);
	//strip all images of the class "active"
	ej_containerImages.removeClass('active');
	$('#tweetshape').stop().animate({opacity: 1}, 300)
	$('ul#latest_tweets').stop().animate({color: "#aaa"}, 300);
	
}


$(window).scroll(function() {

	
	//define it
	var triggerPoint
	var docHeight = $(document).height();
	
	//work out the various variables. Simple maths to find the named points throughout the viewport. 
	//Actually, that's worth noting. 
	//NOTE: These are all viewport positions.
	var pageBottom = getPageScroll() + getPageHeight();	
	var quarterPoint = getPageScroll()+((pageBottom-getPageScroll())/4);
	var halfwayPoint = getPageScroll()+((pageBottom-getPageScroll())/2);
	var threeQuarterPoint = pageBottom-((pageBottom-getPageScroll())/4);
	triggerPoint = quarterPoint+(getPageHeight()/10);
	
//	console.log(docHeight, pageBottom)
	
//step through the elements in reverse vertical order. If we're at the bottom, light it up.
	if (pageBottom == docHeight || pageBottom > (docHeight-10)){
		
		fadeContainers()
		ej_element_8.stop().animate({backgroundColor: "#333333", color: "white"}, 300);
		footer_element.stop().animate({backgroundColor: "#", color: "white"}, 300);
		ej_element_8.contents().find('img').addClass('active').stop().animate({opacity: "1"}, 300);
		
		
	}
	
	else if (triggerPoint > ej_element_8.offset().top){
		
		fadeContainers()
		ej_element_8.stop().animate({backgroundColor: "#333333", color: "white"}, 300);
		ej_element_8.contents().find('img').addClass('active').stop().animate({opacity: "1"}, 300);
		
		
	}
	
	else if (triggerPoint > ej_element_7.offset().top){
		
		fadeContainers()
		ej_element_7.stop().animate({backgroundColor: "#159bd2"}, 300);
		$('ul#latest_tweets').stop().animate({color: "#444"}, 300);
		ej_element_7.contents().find('img').addClass('active').stop().animate({opacity: "1"}, 300);
		$('#tweetshape').stop().animate({opacity: 0}, 50)
		
	}

	
	else if (triggerPoint > ej_element_6.offset().top){
		
		fadeContainers()
//		ej_element_6.stop().animate({backgroundColor: "#a11471", color: "white"}, 300); //
		ej_element_6.stop().animate({backgroundColor: "#FFA531", color: "white"}, 300);
		ej_element_6.contents().find('img').addClass('active').stop().animate({opacity: "1"}, 300);
		
		
	}
	
	else if (triggerPoint > ej_element_5.offset().top){
		
		fadeContainers()
//		ej_element_5.stop().animate({backgroundColor: "#a45eb1", color: "white"}, 300); //
		ej_element_5.stop().animate({backgroundColor: "#93C418", color: "white"}, 300);
		ej_element_5.contents().find('img').addClass('active').stop().animate({opacity: "1"}, 300);
		
		
	}

	else if (triggerPoint > ej_element_4.offset().top){
		
		fadeContainers()
//		ej_element_4.stop().animate({backgroundColor: "#769779", color: "white"}, 300); //
//		ej_element_4.stop().animate({backgroundColor: "#2870A4", color: "white"}, 300); //
		ej_element_4.stop().animate({backgroundColor: "#A11471", color: "white"}, 300);
		ej_element_4.contents().find('img').addClass('active').stop().animate({opacity: "1"}, 300);
		
		  
		
	}

	else if (triggerPoint > ej_element_3.offset().top){
		
		fadeContainers()
//		ej_element_3.stop().animate({backgroundColor: "#ffa631", color: "white"}, 300); //
//		ej_element_3.stop().animate({backgroundColor: "#59a61f", color: "white"}, 300); //
//		ej_element_3.stop().animate({backgroundColor: "#9f0106", color: "white"}, 300); //
		ej_element_3.stop().animate({backgroundColor: "#A506FF", color: "white"}, 300);
		  ej_element_3.contents().find('img').addClass('active').stop().animate({opacity: "1"}, 300);
		
		
	}

	else if (triggerPoint > ej_element_2.offset().top){
		
		fadeContainers()
//		ej_element_2.stop().animate({backgroundColor: "#adb84c", color: "white"}, 300); //
//		ej_element_2.stop().animate({backgroundColor: "#2870A4", color: "white"}, 300); //
//		ej_element_2.stop().animate({backgroundColor: "#ffa631", color: "white"}, 300); //
		ej_element_2.stop().animate({backgroundColor: "#E005CC", color: "white"}, 300);
		  ej_element_2.contents().find('img').addClass('active').stop().animate({opacity: "1"}, 300);
		
	}

	// once we get above the trigger point for the top div, make it rain. You can find the point by putting getPageScroll() into the console.

	if (getPageScroll() < 250){
		
		fadeContainers()
		ej_element_1.stop().animate({backgroundColor: "#333333", color: "white"}, 300);
		  ej_element_1.contents().find('img').addClass('active').stop().animate({opacity: "1"}, 300);
		
	};


});