/* -------------------------------------------------------------------

	Boondoggle - Hans Dreesen
	sp.a
	
	This script handles the showing, hiding and navigation between
	the Op Het Net boxes on the homepage.
	
	See comment lines for explanation.
	
	IMPORTANT: first, the content is fetched through AJAX. Only
	after that's finished, the panel switching starts.
	
	IMPORTANT: the navigation buttons (next and previous) are
	assigned classes that contain the next and previous panels'
	ID's. So always make sure these are correctly named and styled
	in the CSS (homepage.css) as well.

------------------------------------------------------------------- */



// when the document and all of its elements are loaded...
$(window).load(function(){


	// AJAX CALL
	// call the page where the On The Net blocks reside
	$.get("contentblok_onthenet_cached.asp?division=" + iCurrentDivisionID, function(data){
		// dump the data returned by the AJAX call in the div OnTheWebAjaxContact
		$("#OnTheWebAjaxContent").html(data);
		// after the whole AJAX call is done, fire up the panel switching function
		$("#OnTheWebAjaxContent").ajaxComplete(panelSwitcher);
	});


	// PANEL SWITCH FUNCTION
	function panelSwitcher(){
	
		// INITIALISATION
		// activate the first panel
		$(".opHetNet:first").addClass("active");
		// add a class to all panels (extra styles in case JavaScript is enabled) and hide them, except the active one
		$(".opHetNet").addClass("opHetNetFancy").not(".active").hide();
	
		// NAVIGATION
		// add the navigation (if there's more than one panel)
		/*
		if($(".opHetNet").length > 1) {
			$(".opHetNetFancy h1").after("<p class='navigation'>\n</p>\n");
			$(".opHetNetFancy p.navigation").append("\t<a href='#' class='next'>next</a>\n");
			$(".opHetNetFancy p.navigation").append("\t<a href='#' class='previous'>previous</a>\n");
		};
		
		// function to transform the first character of a given string to uppercase
		function upperCaseFirstChar(text){
			resultText = text.substring(0, 1).toUpperCase() + text.substring(1);
			return resultText;
		}
	
		// customise the next button for each panel
		$(".opHetNetFancy a.next").each(function(){
			// find the next panel in line
			var nextPanel = $(this).parent(".navigation").parent(".opHetNetFancy").next(".opHetNetFancy");
			// if it exists
			if(nextPanel.length > 0) {
				// build a class containing the next panel's id
				var nextLinkClass = "next" + upperCaseFirstChar(nextPanel.attr("id"));
			} else {
				// you're at the last panel, so build a class containing the first panel's id
				var nextLinkClass = "next" + upperCaseFirstChar($(".opHetNetFancy:first").attr("id"));
			};
			// assign that class to this link
			$(this).addClass(nextLinkClass);
		});
	
		// customise the previous button for each panel
		$(".opHetNet a.previous").each(function(){
			// find the previous panel in line
			var prevPanel = $(this).parent(".navigation").parent(".opHetNetFancy").prev(".opHetNetFancy");
			// if it exists
			if(prevPanel.length > 0) {
				// build a class containing the previous panel's id
				var prevLinkClass = "prev" + upperCaseFirstChar(prevPanel.attr("id"));
			} else {
				// you're at the first panel, so build a class containing the last panel's id
				var prevLinkClass = "prev" + upperCaseFirstChar($(".opHetNetFancy:last").attr("id"));
			};
			// assign that class to this link
			$(this).addClass(prevLinkClass);
		});
		*/
	
		// PANEL SHOWING AND HIDING
		// set the interval (in milliseconds)
		var intervalTime = 10000;
	
		// launch the automatic panel switching (if there's more than one panel)
		if($(".opHetNet").length > 1) {
			intervalID = setInterval(autoNext, intervalTime);
		};
	
		// show next panel
		function showNextPanel(currentPanel){
			// hide and deactivate current panel
			currentPanel.hide().removeClass("active");
			// if there's a next panel in line
			if(currentPanel.next(".opHetNet").length > 0) {
				// show and activate it
				currentPanel.next(".opHetNet").fadeIn(400).addClass("active");
			} else {
				// your at the last panel, so show and activate the first one
				$(".opHetNet:first").fadeIn(400).addClass("active");
			}
		}
	
		// show previous panel
		function showPrevPanel(currentPanel){
			// hide and deactivate current panel
			currentPanel.hide().removeClass("active");
			// if there's a previous panel in line
			if(currentPanel.prev(".opHetNet").length > 0) {
				// show and activate it
				currentPanel.prev(".opHetNet").fadeIn(400).addClass("active");
			} else {
				// your at the first panel, so show and activate the last one
				$(".opHetNet:last").fadeIn(400).addClass("active");
			}
		}
		
		// extra function that calls the function to show the next panel
		// (needed for setInterval, because it won't take functions with parameters)
		function autoNext() {
			showNextPanel($(".active"));
		}
	
		/*
		// click behaviour of the next buttons
		$(".opHetNetFancy a.next").click(function(){
			// delete the current interval
			clearInterval(intervalID);
			// show the next panel
			showNextPanel($(this).parent(".navigation").parent(".opHetNet"));
			// create a new interval
			intervalID = window.setInterval(autoNext, intervalTime);
		});
	
		// click behaviour of the previous buttons
		$(".opHetNet a.previous").click(function(){
			// delete the current interval
			clearInterval(intervalID);
			// show the previous panel
			showPrevPanel($(this).parent(".navigation").parent(".opHetNet"));
			// create a new interval
			intervalID = window.setInterval(autoNext, intervalTime);
		});
		*/
	};

});