/**
* Window Load Event initializes FAQ, resets INPUTs and attaches events.
*
* @return void
*/
var allowSlide = true;
var singleTime = false;
var lastTimeout;

/*
 * Ugh, so all of this could have been done better.  I apologize for whoever has to
 * read this, I simply didn't have enough time.  Sincerely, Kevin.
 * 
 */
document.observe('dom:loaded', function()
{
	// Get a list of links to glow and change for top 4 blocks
    var links = $('mainNavHeaderLinks').select('div');
    for (var i = 0; i < links.length; i++) {
        links[i].observe('mouseover', navGlow);
        links[i].observe('mouseout', navFade);
    };
    
    // Handle slidebox    
    var pages = $('slideBox').select('a');
    // Set width of slide box to the number of elements
    $('slideBox').setStyle({width: (410 * pages.length) + 'px'});
    // On mouseover, we stop the sliding
    $('mainRight').observe('mouseover', stopSlide);
    // On mouse out we continue the sliding after 3 seconds
    $('mainRight').observe('mouseout', startSlide);
    // If either of the arrows is clicked, override slide for nav
    $('slideLeft').observe('click', slideLeft);
    $('slideRight').observe('click', slideRight);
    // Start first auto slide after 3 seconds
    lastTimeout = setTimeout('slideBox(false)', 3000);    
});

function navGlow(e) {
    $('mainNavHeader').style.backgroundImage = 'url(../image/main/' + this.className + '.jpg)';
    this.addClassName('navGlow');
};

function navFade(e) {
    $('mainNavHeader').style.backgroundImage = '';
    this.removeClassName('navGlow');
};

// Goal is to perform a horizontal slide, when not touched, slides right automatically
// When hovered, it must stop.  When arrows are clicked, it must override.
function slideBox(moveLeft)
{		
	new Effect.Move('slideBox', {
		mode: 'fixed', 
		// Move based on direction pressed (default is right)
		x: (moveLeft ? 1 : -1) * 410, 
		y: 0, 
		duration: 2.0, 		
		// Only one move effect can exist in the queue at a time
		queue: {
			scope: 'slideBox',
			limit: 1},			
		// When arrows are clicked, we allow one move
		// However, if the user is moving left, we need to copy the last elemenet
		// and put it as the first
		beforeSetup: function() {
			if (moveLeft) {
				var children = $('slideBox').childElements();
				var lastChild = children[children.length - 1];
				$('slideBox').insert({top: lastChild});				
				$('slideBox').setStyle({left: '-410px'});
			};
		},		
		// If mouseover occurs during queue but before animation
		// Then cancel the queue before it can animate		
		afterSetup: function() {
			if (singleTime == false && allowSlide == false) {
				var queue = Effect.Queues.get('slideBox');
				queue.each(function(effect) { effect.cancel(); });			
			};
		},
		// If moving right, copy first node to the last one
		// This means that at any moment, the user is seeing the first node
		afterFinish: function() {	
			if (moveLeft == false) {
				var child = $('slideBox').firstDescendant();
				$('slideBox').insert(child);
				$('slideBox').setStyle({left: 0});
			}
			
			// If mouseover occurs during animation
			// This line of code will NOT be executed for next round			
			if (singleTime == false && allowSlide) {
				clearTimeout(lastTimeout);
				lastTimeout = setTimeout('slideBox(false)', 3000);					
			};
			
			// Reset arrow press
			singleTime = false;
		}
	});
};

// Stop the next slide from occurring by setting global
function stopSlide()
{
	allowSlide = false;	
};

// Start the next slide by clearing all previous timeouts and setting one
function startSlide() 
{
	allowSlide = true;
	clearTimeout(lastTimeout);
	lastTimeout = setTimeout('slideBox(false)', 3000);			
};

// The only time we slide left (true)
function slideLeft()
{	
	singleTime = true;
	slideBox(true);
};

// Manual slide right
function slideRight()
{
	singleTime = true;
	slideBox(false);
};