/* jQuery split a list into multiple columns
* version 2.0 (11/26/2008)
* developed by David Zhou, Matt Billings, and David Durst
* take an unordered list and split it into multiple divs.
* you can float the divs so it looks like multiple columns/lists.
* 
* usage: 
*    $(".dropdown ul").splitList(3);
*    $(".dropdown ul").splitList(3, { wrapClass: "div_class_name" });
*
* by default, wrapClass is set to ""
*/


jQuery.fn.splitList = function(cols, options){		
    
    settings = jQuery.extend({
        wrapClass: ""
    }, options);
    
	return this.each(function(){
		$lis = jQuery(this).find("> li");		
		$inc = parseInt(($lis.length/cols) + ($lis.length % cols > 0 ));
		for(var i=0; i<cols; i++)
			$lis.slice($inc*i, $inc*(i+1)).wrapAll("<div class='" + settings['wrapClass'] + "'></div>");
	});
};

// Initializing variable that will determine whether or not the user has interacted with the billboard.
var interrupted = false;

$.extend({

	// Self-calling function to change billboard slides
	switchSlide: function( oldSlide, newSlide ){
		
		// If interrupted has been set to true, don't run this
		if( interrupted == false ){
			
			// You can't chain .get() (the DOM function, not the jQuery data collection one)
			var toFadeOut = $('#billboard-slides > li').get(oldSlide);
			var toFadeIn = $('#billboard-slides > li').get(newSlide);
			
			// Fade out the current slide
			$(toFadeOut).css('z-index',10)
			$(toFadeIn).css('z-index',9)
			
			$(toFadeOut)
				.animate({
					'opacity': 0
				}, 500, function(){
					
					// Hide the current slide
					$(this).hide();

					// Show the new slide
					$(toFadeIn)
						.show()
						.css('opacity',0)
						.animate({
							'opacity': 1
						}, 500);
	
					// Update the slide navigation
					$('#billboard-nav li.active').removeClass('active');
					var newButton = $('#billboard-nav li').get(newSlide-1);
					$(newButton).addClass('active');
						
				});
			
			// In 7.5 seconds, start over again.
			if( newSlide == 6 )
				setTimeout ( "$.switchSlide( 6, 1 )", 7500 );
			else
				setTimeout ( "$.switchSlide( " + newSlide + ", " + (newSlide + 1) + " )", 7500 );

		}				

	}

});

$(document).ready( function(){

	$("#billboard-slides ul").splitList(2, {wrapClass: 'row'});

	// Update the slide navigation links to the "JS-on" version 
	$('#billboard-nav li').each( function(){
		var href = $(this).attr('id');
		$(this).children('a').attr('href',href.replace(/nav-/g, '#'));
	});
	
	// Add the > (actually unicode U0203E) after the links in the billboard slides
	$('#billboard-slides ul a')
		.addClass('raquo')
		.wrapInner('<span></span>')
		.append('&nbsp;&raquo;');

	// Init the billboard
	$('#billboard')
		.addClass('on')
		.removeClass('off');
	if($.browser.safari) $('#billboard-nav').css({'position':'absolute','top':'234px'});
	
	// Hide all slides but the first
	$('#billboard-slides > li')
		.hide()
		.css('opacity','0');
	$('#billboard-slides > li#welcome')
		.show()
		.css('opacity','1');
	
	// Begin the automatic cycling
	setTimeout ( "$.switchSlide( 0, 1 )", 7500 );

	// If user interrupts automatic cycling
	$('#billboard-nav a').click( function(event){
		
		// Don't follow the href
		event.preventDefault();
		
		// Stop the autocycling
		interrupted = true;

		var toFadeOut = $('#billboard-slides > li:visible')
		var toFadeIn = $( $(this).attr('href') )

		// Handle the layering
		toFadeOut.css('z-index',10)
		toFadeIn.css('z-index',9)

		// Hide the current slide
		toFadeOut
			.animate({
				'opacity': 0
			}, 500, function(){

				toFadeOut.hide();
				
				// Show the new slide
				toFadeIn
					.show()
					.css('opacity',0)
					.animate({
						'opacity': 1
					}, 500);

			});
					
		// Update the slide navigation
		$('#billboard-nav li.active')
			.removeClass('active');
		$(this).parent('li').addClass('active')

	});

});