/*

Twitter Widget
Mount Holyoke Office of Communications
April 2009
Dependencies: prototype.js
Expected elements in DOM: <ul id="twitter_update_list">, <div id="twitter_controls">


==========================
Process:
==========================

1. 	When the DOM of the page is loaded, mhcnews_load_twitter_scripts() is called which loads the offical Twitter JS.
	Loading Twitter JS after the DOM will prevent our content from being delayed by Twitter.
	Before the official Twitter JS is loaded, the page will display something like "Follow mtholyoke on Twitter" with a link to our twitter page.
	If the user doesn't have JavaScript enabled or the official Twitter JS fails to load, they'll only see the default HTML. 

2.	Once the Twitter JS is inserted into the DOM and loaded, it will call our function mhcnews_twitter_callback().
	This function will call two functions: the blogger.js function twitterCallback2() and the MHC function mhcnews_twitter_initialize().
	
3. 	twitterCallback2() will load the UL with id of "twitter_update_list". Each LI is a tweet.

4.	mhcnews_twitter_initialize() creates previous/next buttons, creates a 'follow' link, and hides all but one tweet.

==========================
Function Flow:
==========================

mhcnews_load_twitter_scripts() -> mhcnews_twitter_callback() -> twitterCallback2() -> mhcnews_twitter_initialize()

*/


// twitter globals
var mhcnews_twitter_index = 0;
var mhcnews_twitter_total = 0;

/**
 * Loads the required scripts from Twitter.
 * These are placed in the page after the DOM is loaded, but before all 'images' are loaded.
 */
function mhcnews_load_twitter_scripts() {
		
	// load the Twitter JS (after the rest of the page has loaded)
	var blogger_script = new Element("script", { type: "text/javascript", src: "http://twitter.com/javascripts/blogger.js" });
	var twitter_script = new Element("script", { type: "text/javascript", src: "http://twitter.com/statuses/user_timeline/mtholyoke.json?callback=mhcnews_twitter_callback&count=5" });
	var css = new Element("link", { type: "text/css", rel: "stylesheet", media: "screen", href: "http://www.mtholyoke.edu/offices/comm/css/news.css" });
	$$('head')[0].insert(blogger_script);
	$$('head')[0].insert(twitter_script);
	$$('head')[0].insert(css);
		
}

/**
 * Sets up our view of the standard twitter JS badge.
 * - Hides all but one tweet.
 * - Creates previous/next controls.
 */
function mhcnews_twitter_initialize() {

	// Return if the twitter list doesn't exist.
	if (!$('twitter_update_list')) return;
		
	// setup the controls
	var controls = $('twitter_controls');
	controls.update(''); // remove the &nbsp; that's there (so RedDot keeps the controls div)
	var a_prev = new Element('a', { id: 'twitter_prev', href: 'javascript:return false;', title: 'Previous Tweet' }).update("");
	var a_prev_off = new Element('span', { id: 'twitter_prev_off' }).update("");
	var a_next = new Element('a', { id: 'twitter_next', href: 'javascript:return false;', title: 'Next Tweet' }).update("");
	var a_next_off = new Element('span', { id: 'twitter_next_off' }).update("");
	var follow = new Element('span', { id: 'twitter_follow' });
	var follow_link = new Element('a', { href: "http://twitter.com/mtholyoke", title: 'Follow us on Twitter', target: "_blank" }).update("Follow &raquo;");
	
	// insert and show
	follow.insert(follow_link);
	controls.insert(follow);
	controls.insert(a_prev);
	controls.insert(a_prev_off);
	controls.insert(a_next);
	controls.insert(a_next_off);
	controls.show(); // the controls have a 'display: none' style so they don't show if JS isn't loaded

	// onclick events for prev/next
	$('twitter_prev').observe('click', mhcnews_twitter_prev);
	$('twitter_next').observe('click', mhcnews_twitter_next);

	// show only the latest tweet
	mhcnews_twitter_show_tweet(0);
	
}

/**
 * Gets called by the Twitter JS.
 */
function mhcnews_twitter_callback(C) {
		
	// call the function in the blogger code
	twitterCallback2(C);
	
	// call our function after we've called the Twitter code
	mhcnews_twitter_initialize();
	
}

/**
 * Shows the tweet at the given (zero-based) index and hides all others.
 */
function mhcnews_twitter_show_tweet(index) {
	
	// get all tweet items
	var tweets = $$('#twitter_update_list li');
	
	// update the global index
	mhcnews_twitter_index = index;
	
	// set the global total
	mhcnews_twitter_total = tweets.length;
	
	// hide all but the tweet with the given index
	for (var i = 0; i < tweets.length; i++) {
		if (i != index) {
			tweets[i].hide();
		} else {
			tweets[i].show();			
		}
	}
	
	mhcnews_show_prev_next(index);	
	
}

/**
 * Shows the prev/next links necessary for the current tweet.
 */
function mhcnews_show_prev_next(index) {
	
	// show/hide controls
	if (index == 0) {
		// at the most recent tweet, so don't show "next"
		$('twitter_prev').show();
		$('twitter_prev_off').hide();
		$('twitter_next').hide();
		$('twitter_next_off').show();
	} else if (index == (mhcnews_twitter_total-1)) {
		// at the oldest tweet, so don't show "previous"
		$('twitter_prev').hide();
		$('twitter_prev_off').show();
		$('twitter_next').show();
		$('twitter_next_off').hide();
	} else {
		// somewhere in the middle, so show both controls		
		$('twitter_prev').show();
		$('twitter_prev_off').hide();
		$('twitter_next').show();
		$('twitter_next_off').hide();
	}
	
}

/**
 * Switches to the next (more recent) tweet.
 */
function mhcnews_twitter_next(event) {
	
	var ix = 0;
	
	if (mhcnews_twitter_index == 0) {
		ix = mhcnews_twitter_total - 1;
	} else {
		ix = mhcnews_twitter_index - 1;
	}
	
	mhcnews_twitter_show_tweet(ix);
	
}

/**
 * Switches to the previous (less recent) tweet
 */
function mhcnews_twitter_prev(event) {
	
	var ix = 0;
	
	if (mhcnews_twitter_index == (mhcnews_twitter_total-1)) {
		ix = 0;
	} else {
		ix = mhcnews_twitter_index + 1;
	}
	
	mhcnews_twitter_show_tweet(ix);
	
}

// called when the page's DOM is loaded
document.observe('dom:loaded', mhcnews_load_twitter_scripts);