/********************************************************************************
Classes used
mainTweet - the current tweet at the eye level
belowMainTweet - the tweets below the main one 
aboveMainTweet - the tweets above the main one 
averageTweet - the tweets above and below the main one that are black 
grayTweet - the tweets above the main one that are grayed out 
**********************************************************************************/

$(function() {
	var extraBrowserPadding = 0;
	var tweetPadding = 0;
	var heightOfDivsAboveMain = 0;
	
	///////// Setup some extra padding per browser ///////////
	if(!$.browser.msie){
		extraBrowserPadding = 3;
	}
	///////////////////////////////////////////////////////////
	
	function moveText(dir) {
		
		var divHeight = 0;
		tweetPadding = parseInt($('.tweet').css('margin-bottom'));
		
		if(dir == "up") {
			
			if($('.belowMainTweet').size()) { //Make sure there is something to below the main tweet first
			
				///////// The gray tweets ////////////////////////////////////
				var newGrayTweet = $('.aboveMainTweet:last');	//Store the element
				var newGrayTweetHeightDifference = $(newGrayTweet).height(); //Determine how much the class change shrinks the div height 
				$(newGrayTweet).removeClass('averageTweet').addClass('grayTweet');	//Add Gray class
				newGrayTweetHeightDifference -= $(newGrayTweet).height();	//The change in height
				
				///////// Handle our old main tweet first ///////////////////
				//////Switch the classes around before we move them so their heights are correct
				var currentElement = $('.mainTweet'); //Store the current tweet as an element for reference
				$(currentElement).addClass('averageTweet aboveMainTweet').removeClass('mainTweet');; //Add the new classes to our old main tweet
				divHeight = $(currentElement).height() + tweetPadding;
				divHeight -= newGrayTweetHeightDifference; //Take into account the change in height of the gray div
				
				///////// The new main tweet ////////////////////////////////
				var newMainTweet = $('.belowMainTweet:first');
				$(newMainTweet).removeClass('averageTweet belowMainTweet').addClass('mainTweet');
				
				//Move the text
				$('#twitterSlidingContainer').animate({"marginTop": "-="+divHeight}, "1000");
			}
		} else {
			
			if($('.aboveMainTweet').size()) { //Make sure there is something to above the main tweet first
				///////// The gray tweets ////////////////////////////////////
				var oldGrayTweet = $('.grayTweet:last');	//Store the element
				var oldGrayTweetHeightDifference = $(oldGrayTweet).height(); //Determine how much the class change shrinks the div height 
				$(oldGrayTweet).removeClass('grayTweet').addClass('averageTweet');	//Add Gray class
				oldGrayTweetHeightDifference -= $(oldGrayTweet).height();	//The change in height
				
				///////// Handle our new main tweet first ///////////////////
				var currentElement = $('.aboveMainTweet:last'); //Store the new current tweet as an element for reference
				divHeight = $(currentElement).height() + tweetPadding;
				$(currentElement).removeClass('averageTweet aboveMainTweet').addClass('mainTweet'); //Add the new classes main tweet
				divHeight += oldGrayTweetHeightDifference; //Take into account the change in height of the gray div
				
				///////// The tweet below main ////////////////////////////////
				var oldMainTweet = $('.mainTweet:last');
				$(oldMainTweet).removeClass('mainTweet').addClass('averageTweet belowMainTweet');
				
				//Move the text
				$('#twitterSlidingContainer').animate({"marginTop": "+="+divHeight}, "1000");	
			}
		}
		
		updateArrows(dir); //Update arrow classes depending on what's left

	}
	
	
	function updateArrows(dir) {
		if(dir == "up" && !$('.belowMainTweet').size()) { $('#twitterDown').addClass('offTwitterLink'); } else {$('#twitterDown').removeClass('offTwitterLink');} 
		if(dir == "down" && !$('.aboveMainTweet').size()) { $('#twitterUp').addClass('offTwitterLink'); } else {$('#twitterUp').removeClass('offTwitterLink');} 
	}
	
	////////////// Setup on click events //////////////////////////////////////////////////////////
	$('#twitterUp').livequery('click',function() {
		moveText('down');
		return false;
	});
	
	$('#twitterDown').livequery('click',function() {
		moveText('up');
		return false;
	});
	/////////////////////////////////////////////////////////////////////////////////////////////////
});