$(function() {		
		   
	var movingDistance	    = 524;

	var fTotalPanels			= $(".fScrollContainer").children().size();
	var vTotalPanels			= $(".vScrollContainer").children().size();
	var gTotalPanels			= $(".gScrollContainer").children().size();
	var eTotalPanels			= $(".eScrollContainer").children().size();

	var $fPanels				= $('#fSlider .fScrollContainer > div');
	var $vPanels				= $('#vSlider .vScrollContainer > div');
	var $gPanels				= $('#gSlider .gScrollContainer > div');
	var $ePanels				= $('#eSlider .eScrollContainer > div');

	var $fContainer			= $('#fSlider .fScrollContainer');
	var $vContainer			= $('#vSlider .vScrollContainer');
	var $gContainer			= $('#gSlider .gScrollContainer');
	var $eContainer			= $('#eSlider .eScrollContainer');

	$fPanels.css({'float' : 'left','position' : 'relative'});
	$vPanels.css({'float' : 'left','position' : 'relative'});
	$gPanels.css({'float' : 'left','position' : 'relative'});
	$ePanels.css({'float' : 'left','position' : 'relative'});

	$("#fSlider").data("currentlyMoving", false);
	$("#vSlider").data("currentlyMoving", false);
	$("#gSlider").data("currentlyMoving", false);
	$("#eSlider").data("currentlyMoving", false);

	$fContainer
		.css('width', ($fPanels[0].offsetWidth * $fPanels.length) + 100 )
		.css('left', "0px");

	$vContainer
		.css('width', ($vPanels[0].offsetWidth * $vPanels.length) + 100 )
		.css('left', "0px");
		
	$gContainer
		.css('width', ($gPanels[0].offsetWidth * $gPanels.length) + 100 )
		.css('left', "0px");
		
	$eContainer
		.css('width', ($ePanels[0].offsetWidth * $ePanels.length) + 100 )
		.css('left', "0px");
	
	var fScroll = $('#fSlider .scroll').css('overflow', 'hidden');
	var vScroll = $('#vSlider .scroll').css('overflow', 'hidden');
	var gScroll = $('#gSlider .scroll').css('overflow', 'hidden');
	var eScroll = $('#eSlider .scroll').css('overflow', 'hidden');

	// Displays Featured Carousel on load 
	$("#about").css({ 'display': 'inline-block' });
	$("#fWrapper").css({ 'display': 'none' });
	$("#vWrapper").css({ 'display': 'none' });
	$("#gWrapper").css({ 'display': 'none' });
	$("#eWrapper").css({ 'display': 'none' });
	$fContainer.css({ 'display' : 'none' });
	$vContainer.css({ 'display' : 'none' });
	$gContainer.css({ 'display' : 'none' });
	$eContainer.css({ 'display' : 'none' });
	$(".fLeft").css({ 'display' : 'none' });
	$(".fRight").css({ 'display': 'none' });
	$(".gLeft").css({ 'display' : 'none' });
	$(".gRight").css({ 'display': 'none' });
	$(".vLeft").css({ 'display' : 'none' });
	$(".vRight").css({ 'display': 'none' });
	$(".eLeft").css({ 'display' : 'none' });
	$(".eRight").css({ 'display': 'none' });
	
	// Set up "Current" panel and next and prev
	var fCurPanel = 1;
	var vCurPanel = 1;
	var gCurPanel = 1;
	var eCurPanel = 1;
	
	//direction true = right, false = left
	function change(direction, totalPanels, scrollContainer, prefix, slider, cat) {
	   	
		// map current panel number to panel number of specific carousel
		switch (cat)
		{
			case 'f':
				curPanel = fCurPanel; 
				break;
				
			case 'v': 
				curPanel = vCurPanel;
				break;
				
			case 'g': 
				curPanel = gCurPanel;
				break;
				
			case 'e': 
				curPanel = eCurPanel;
				break;
		}

		//if not at the first or last panel
		//if((!direction && (curPanel <= 1))) { return false; }	
		
        //if not currently moving
        if (($(slider).data("currentlyMoving") == false)) {

			$(slider).data("currentlyMoving", true);
			
			var leftValue    = $(scrollContainer).css("left");
			
			//if at the last panel
			if (curPanel == totalPanels) {
				curPanel = 1;
				var movement	 = direction ? parseFloat(leftValue, 10) + ((totalPanels-1)*movingDistance) : parseFloat(leftValue, 10) + movingDistance;
				if(!direction)
					curPanel = totalPanels - 1;
			//if at the first panel
			} else if((!direction && (curPanel <= 1))) {
				var movement	 = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) - (movingDistance*(totalPanels-1));
				if(!direction)
					curPanel = totalPanels;
				else 
					curPanel++;
			}
			//not first or last panel
			else {
				var next         = direction ? curPanel + 1 : curPanel - 1;
				var movement	 = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance;
				curPanel = next;
			}

			$(scrollContainer)
				.stop()
				.animate({
					"left": movement
				}, function() {
					$(slider).data("currentlyMoving", false);
				});

			// reverse mapping - maps panel number of specific carousel to current panel number
			switch (cat)
			{
				case 'f': 
					fCurPanel = curPanel; 
					break;
					
				case 'v': 
					vCurPanel = curPanel;
					break;
					
				case 'g': 
					gCurPanel = curPanel;
					break;
					
				case 'e': 
					eCurPanel = curPanel;
					break;					
			}

		}
	}
	
////////////////////////////// Event Handlers //////////////////////////////
	
	//when the left/right arrows are clicked
	$(".fRight").click(function(){ change(true, fTotalPanels, ".fScrollContainer", '#fPanel_', '#fSlider', 'f'); });	
	$(".fLeft").click(function(){ change(false, fTotalPanels, ".fScrollContainer", '#fPanel_', '#fSlider', 'f'); });
	$(".vRight").click(function(){ change(true, vTotalPanels, ".vScrollContainer", '#vPanel_', '#vSlider', 'v'); });	
	$(".vLeft").click(function(){ change(false, vTotalPanels, ".vScrollContainer", '#vPanel_', '#vSlider', 'v'); });
	$(".gRight").click(function(){ change(true, gTotalPanels, ".gScrollContainer", '#gPanel_', '#gSlider', 'g'); });	
	$(".gLeft").click(function(){ change(false, gTotalPanels, ".gScrollContainer", '#gPanel_', '#gSlider', 'g'); });
	$(".eRight").click(function(){ change(true, eTotalPanels, ".eScrollContainer", '#ePanel_', '#eSlider', 'e'); });	
	$(".eLeft").click(function(){ change(false, eTotalPanels, ".eScrollContainer", '#ePanel_', '#eSlider', 'e'); });
	
	$("#featured-box").mouseover(
		function(){
			$("#about").css({ 'display' : 'none' });
			$fContainer.css({ 'display' : 'inline-block'});
			$vContainer.css({ 'display' : 'none' });
			$gContainer.css({ 'display' : 'none' });
			$eContainer.css({ 'display' : 'none' });
			$(".fLeft").css({ 'display' : 'inline-block' });
			$(".fRight").css({ 'display': 'inline-block' });
			$(".vLeft").css({ 'display' : 'none' });
			$(".vRight").css({ 'display': 'none' });
			$(".gLeft").css({ 'display' : 'none' });
			$(".gRight").css({ 'display': 'none' });
			$(".eLeft").css({ 'display' : 'none' });
			$(".eRight").css({ 'display': 'none' });
			$("#fWrapper").css({ 'display': 'inline-block' });
			$("#vWrapper").css({ 'display': 'none' });
			$("#gWrapper").css({ 'display': 'none' });
			$("#eWrapper").css({ 'display': 'none' });
		});
	
	$("#visionaries-box").mouseover(
		function(){
			$("#about").css({ 'display' : 'none' });			
			$fContainer.css({ 'display' : 'none' });
			$vContainer.css({ 'display' : 'inline-block' });
			$gContainer.css({ 'display' : 'none'});
			$eContainer.css({ 'display' : 'none' });
			$(".fLeft").css({ 'display' : 'none' });
			$(".fRight").css({ 'display': 'none' });
			$(".vLeft").css({ 'display' : 'inline-block' });
			$(".vRight").css({ 'display': 'inline-block' });
			$(".gLeft").css({ 'display' : 'none' });
			$(".gRight").css({ 'display': 'none' });
			$(".eLeft").css({ 'display' : 'none' });
			$(".eRight").css({ 'display': 'none' });
			$("#fWrapper").css({ 'display': 'none' });
			$("#vWrapper").css({ 'display': 'inline-block' });
			$("#gWrapper").css({ 'display': 'none' });
			$("#eWrapper").css({ 'display': 'none' });
		});

	$("#giveaways-box").mouseover(
		function(){
			$("#about").css({ 'display' : 'none' });
			$fContainer.css({ 'display' : 'none' });
			$vContainer.css({ 'display' : 'none' });
			$gContainer.css({ 'display' : 'inline-block'});
			$eContainer.css({ 'display' : 'none' });
			$(".fLeft").css({ 'display' : 'none' });
			$(".fRight").css({ 'display': 'none' });
			$(".vLeft").css({ 'display' : 'none' });
			$(".vRight").css({ 'display': 'none' });
			$(".gLeft").css({ 'display' : 'inline-block' });
			$(".gRight").css({ 'display': 'inline-block' });
			$(".eLeft").css({ 'display' : 'none' });
			$(".eRight").css({ 'display': 'none' });
			$("#fWrapper").css({ 'display': 'none' });
			$("#vWrapper").css({ 'display': 'none' });
			$("#gWrapper").css({ 'display': 'inline-block' });
			$("#eWrapper").css({ 'display': 'none' });
		});
	
	$("#events-box").mouseover(
		function(){
			$("#about").css({ 'display' : 'none' });
			$fContainer.css({ 'display' : 'none' });
			$vContainer.css({ 'display' : 'none' });
			$gContainer.css({ 'display' : 'none'});
			$eContainer.css({ 'display' : 'inline-block' });
			$(".fLeft").css({ 'display' : 'none' });
			$(".fRight").css({ 'display': 'none' });
			$(".vLeft").css({ 'display' : 'none' });
			$(".vRight").css({ 'display': 'none' });
			$(".gLeft").css({ 'display' : 'none' });
			$(".gRight").css({ 'display': 'none' });
			$(".eLeft").css({ 'display' : 'inline-block' });
			$(".eRight").css({ 'display': 'inline-block' });
			$("#fWrapper").css({ 'display': 'none' });
			$("#vWrapper").css({ 'display': 'none' });
			$("#gWrapper").css({ 'display': 'none' });
			$("#eWrapper").css({ 'display': 'inline-block' });
		});
	
	$("#about-box").mouseover(
		function(){
			$("#about").css({ 'display' : 'inline-block' });
			$fContainer.css({ 'display' : 'none' });
			$vContainer.css({ 'display' : 'none' });
			$gContainer.css({ 'display' : 'none'});
			$eContainer.css({ 'display' : 'none' });
			$(".fLeft").css({ 'display' : 'none' });
			$(".fRight").css({ 'display': 'none' });
			$(".vLeft").css({ 'display' : 'none' });
			$(".vRight").css({ 'display': 'none' });
			$(".gLeft").css({ 'display' : 'none' });
			$(".gRight").css({ 'display': 'none' });
			$(".eLeft").css({ 'display' : 'none' });
			$(".eRight").css({ 'display': 'none' });
			$("#fWrapper").css({ 'display': 'none' });
			$("#vWrapper").css({ 'display': 'none' });
			$("#gWrapper").css({ 'display': 'none' });
			$("#eWrapper").css({ 'display': 'none' });
		});
	
	// Delays visibility to counter lag effect
	$("#carousel").css({ 'visibility': 'visible' });
});