//Define and create the panels
var PANELS = 6;
var hiddenPanels = new Array(PANELS);
var infoPanels = new Array(PANELS);
var panelAjaxLocations = new Array(PANELS);

//Define the targets for each drop down panel
panelAjaxLocations[0] = 'info_panels/aro_info.html';
panelAjaxLocations[1] = 'info_panels/sweetnlow.html';
panelAjaxLocations[2] = 'events/calendar.html';
panelAjaxLocations[3] = 'info_panels/housing_finder.html';
panelAjaxLocations[4] = 'info_panels/shepherd_teams.html';
panelAjaxLocations[5] = 'info_panels/haiti.html';

//Fill panels
for(var i = 1; i <= PANELS; i++)
{
	var tempName = '#panel' + i;
	var temp = i - 1;
	hiddenPanels[temp] = new Panel(tempName + 'Div', panelAjaxLocations[temp], tempName + 'Target');
	infoPanels[temp] = new Panel(tempName + 'Info');
}

//Hides all panels except the one specified.  This one has its visibility switched
function toggleHiddenPanels(panelNumber)
{
	for(var i = 0; i < PANELS; i++)
	{
		var panel = hiddenPanels[i];
		if(i == panelNumber)
		{
			panel.switchDisplay();
		}
		else
		{
			panel.hide();
		}
	}
}

//Toggles the visibility of the given info panel
function toggleInfoPanels(panelNumber)
{
	infoPanels[panelNumber].switchDisplay('fast');
}

//Called when the document is ready to be modified
jQuery(document).ready(function($)
{
	//Callbacks for when a user hovers over the panels	
	jQuery('#panel1').hover(function() {toggleInfoPanels(0);}, function() {toggleInfoPanels(0);});
	jQuery('#panel2').hover(function() {toggleInfoPanels(1);}, function() {toggleInfoPanels(1);});
	jQuery('#panel3').hover(function() {toggleInfoPanels(2);}, function() {toggleInfoPanels(2);});
	jQuery('#panel4').hover(function() {toggleInfoPanels(3);}, function() {toggleInfoPanels(3);});
	jQuery('#panel5').hover(function() {toggleInfoPanels(4);}, function() {toggleInfoPanels(4);});
	jQuery('#panel6').hover(function() {toggleInfoPanels(5);}, function() {toggleInfoPanels(5);});
	
	
	//Callbacks for when a user clicks the close buttons
	jQuery('#panel1').click(function() {toggleHiddenPanels(0);});
	jQuery('#panel2').click(function() {toggleHiddenPanels(1);});
	jQuery('#panel3').click(function() {toggleHiddenPanels(2);});
	jQuery('#panel4').click(function() {toggleHiddenPanels(3);});
	jQuery('#panel5').click(function() {toggleHiddenPanels(4);});
	jQuery('#panel6').click(function() {toggleHiddenPanels(5);});
	jQuery('#panel7').click(function() {toggleHiddenPanels(6);});
	
	//Callbacks for when a user clicks the close buttons
	jQuery('#panel1A').click(function() {hiddenPanels[0].hide();});
	jQuery('#panel2A').click(function() {hiddenPanels[1].hide();});
	jQuery('#panel3A').click(function() {hiddenPanels[2].hide();});
	jQuery('#panel4A').click(function() {hiddenPanels[3].hide();});
	jQuery('#panel5A').click(function() {hiddenPanels[4].hide();});
	jQuery('#panel6A').click(function() {hiddenPanels[5].hide();});
	jQuery('#panel7A').click(function() {hiddenPanels[6].hide();});
	
	for(var i = 0; i < PANELS; i++)
	{
		var panel = hiddenPanels[i];
		
		//Load the content from the Ajax request
		panel.ajax($);
		
		//Set panels to their actual heights because Javascript is on
		panel.setVisible();
		
		//Close the panel before the user sees anything
		panel.hide(0);
		
		panel = infoPanels[i];
		
		//Set panels to their actual heights because Javascript is on
		panel.setVisible();
		
		//Close the panel before the user sees anything
		panel.hide(0);
	}
});