/******************************************************************************
* www.carpestudentem.org, box script
*
* @author Simon Busard
* @date   18/02/2010
*
******************************************************************************/

// Size parameters
boxHeight = '250px'; // Max height of boxes

// Timer parameters
delay = 5000; // Delay between box content changes
fastDelay = 1000; // Delay of box content change when mouse hover out it

// Parameters concerned by the html design
// To add a set of boxes, surround them with a <div id="boxId"></div>
// and add to the boxGroups array the id of the div preceded by a # (#boxId)
boxGroups = new Array("#contentBox", "#communityBox");
timers = new Array(boxGroups.length);
// timersOn[i] defines if timers[i] must be restarted when cleared of triggered
timersOn = new Array(boxGroups.length);
for(var i = 0;i < boxGroups.length;i++) {
	timersOn[i] = true;
}

// This block is executed when the page is loaded
$(function() {

	// Fading boxes
	for(var i = 0;i < boxGroups.length;i++) {
		container = boxGroups[i];
		// Starting each box
		start(container, "div.box", "h1", i);
	}
	
});

// start
//
// change display of all BOX in CONTAINER, hide all of them except the first one,
// add two links to their h3 children, one to call prev, one to call next and
// add a hover event, clearing timers[timerIndex] on hover on, restarting
// timers[timerIndex] (if needed) on hover out.
//
// container, the selector of the overall container, containing all boxes
// box, the selector for each box of the container.
// title, the title of each box used to add the links to go to previous and next boxes.
// timerIndex, the index of the timer concerned by this container.
function start(container, box, title, timerIndex) {

	// Add a hover event.  When hover on, the corresponding timer is cleared,
	// when hover out, if the timer must be restarted (timersOn[timerIndex = true),
	// it is restarted.
	$(container + " > " + box).hover(function(event) {
		clearTimeout(timers[timerIndex]);
	},
	function(event) {
		if(timersOn[timerIndex]) {
			timers[timerIndex] = setTimeout("next('" + container + "', '" + box + "', " + timerIndex + ")", fastDelay);
		}
	});	

	// Change style of boxes to change their height and overflow.
	$(container + " > " + box + " > div.box_body").css('height',boxHeight);
	$(container + " > " + box + " > div.box_body").css('overflow', 'auto');
	$(container + " > " + box + " > div.box_body").css('padding', '0 3px');

	// Add links to titles to allow prev and next navigation.
	$(container + " > " + box + " > div.box_top > " + title).prepend("<a href=''><< </a>");
	$(container + " > " + box + " > div.box_top > " + title).append("<a href=''> >></a>");
	
	// Add events on click on first and second links of titles to prevent
	// default behavior and activate prev and next navigation.
	$(container + " > " + box).each( function() {
		
		$(this).children("div.box_top").children(title).first().children("a").first().click(function(event) {
			event.preventDefault();
			// Clear the corresponding timer when link clicked
			timersOn[timerIndex] = false;
			prev(container, box, timerIndex);
		});
		$(this).children("div.box_top").children(title).first().children("a").first().next().click(function(event) {
			event.preventDefault();
			// Clear the corresponding timer when link clicked
			timersOn[timerIndex] = false;
			next(container, box, timerIndex);
		});
	});
	
	// Change display of boxes to display only the first one
	$(container + " > " + box).css('display','none');
	$(container + " > " + box).first().css('display', 'block');

	// Start timer
	if(timersOn[timerIndex]) {
		timers[timerIndex] = setTimeout("next('" + container + "', '" + box + "', " + timerIndex + ")", delay);
	}
}

// change
//
// Generic function to be able to go to prev and next boxes.  Get first diplayed
// BOX in CONTAINER which has 'display' as 'block', hide it by fade out and
// get another BOX, depending of the sign of ROT, display it by fade in.  Then
// Restart timers[timerIndex] if needed.
//
// container, the selector of the overall container, containing all boxes
// box, the selector for each box of the container.
// rot, define the rotation.  If < 0, rotation is done backward, if > 0, rotation
//		is done forward.
// timerIndex, the index of the timer concerned by this container.
function change(container, box, rot, timerIndex) {

	changed = false;
	// Get displayed box, fade it out and fade in its next/prev neighbour
	$(container + " > " + box).each(function() {
		if( $(this).css('display') == 'block' && !changed) {
			// Get neighbour, depending on rot and position in the list
			if(rot > 0) {
				if($(this).is(":last-child")) {
					var next = $(container + " > " + box).first();
				}
				else {
					var next = $(this).next();
				}
			} else if(rot < 0) {
				if($(this).is(":first-child")) {
					var next = $(container + " > " + box).last();
				}
				else {
					var next = $(this).prev();
				}
			}
			// Fade it out
			$(this).fadeOut("slow", function() {
				next.css('position', 'static');
			});
			next.css('position', 'absolute');
			next.css('z-index', '25');
			next.css('top', ($(this).position()).top + 'px');
			next.fadeIn("slow");
			changed = true;
		}
	});

	// Restart timer if needed
	if(timersOn[timerIndex]) {
		if(rot > 0) {
			timers[timerIndex] = setTimeout("next('" + container + "', '" + box + "', " + timerIndex + ")", delay);
		}
		else {
			timers[timerIndex] = setTimeout("prev('" + container + "', '" + box + "', " + timerIndex + ")", delay);
		}
	}
	else {
		clearTimeout(timers[timerIndex]);
	}
}

// prev
//
// Hide displayed BOX in CONTAINER and display its previous neighbour.
//
// container, the selector of the overall container, containing all boxes
// box, the selector for each box of the container.
// timerIndex, the index of the timer concerned by this container.
function prev(container, box, timerIndex) {
	return change(container, box, -1, timerIndex);
}

// next
//
// Hide displayed BOX in CONTAINER and display its next neighbour.
//
// container, the selector of the overall container, containing all boxes
// box, the selector for each box of the container.
// timerIndex, the index of the timer concerned by this container.
function next(container, box, timerIndex) {
	return change(container, box, 1, timerIndex);
}