/*
jQuery Content Toggle v0.6
by Justin Youens (1/20/2009)
justin@moosylvania.com or justin@youens.com
    
DESCRIPTION: Easy way to toggle content regions in page. Automatically shows the first div after the nav.

INSTRUCTIONS: Include the jQuery js file followed by this script on your page. Use the sample code below. 
              Feel free to change "item1", "item2", etc to whatever you want. You can have multiple toggle_content
              panels on a single page, just make sure you don't have any div's with the same "id" obviously.
              Nested panels work also.

SAMPLE USAGE: 
-----------------------------------------------
<div class="toggle_content">
<div class="nav">
<a href="#item1">Item 1</a> - <a href="#item2">Item 2</a> <!-- etc... -->
</div>
<div class="default">Please select one...</div> <!-- This is optional, otherwise the first div will be selected -->
<div id="item1">Content 1</div>
<div id="item2">Content 2</div>
<!-- etc... -->
</div>
-----------------------------------------------

Also, you may want to style the nav w/ CSS, especially the "selected" link state, which is automatically applied.
-----------------------------------------------
.toggle_content .nav a
{ 
color: #ccc;
text-decoration: underline;
}

.toggle_content .nav a.selected
{ 
text-decoration: none;
color: #ff0000;
}
-----------------------------------------------
*/

//modify as needed
jQuery(document).ready(function () {
/*
    //hide directions to locations
    $('#Maplewood').hide();
    $('#Frontenac').hide();

    //click functions for each location
    $('.nav a').click(function () {
        var location = $(this).attr('href');
        if (location === '#Maplewood') { $('#Frontenac').hide(); }
        if (location === '#Frontenac') { $('#Maplewood').hide(); }
        $(location).toggle('slow', function () {});
    })
*/
    
    jQuery("div.toggle_content").each(function () {
    //set default states of divs/nav
    jQuery("> div:visible:not(.nav)", this).hide();
    var firstDiv = jQuery("> .nav ~ div:first", this).show();
    if (!firstDiv.hasClass("default"))
    jQuery("> .nav a:first", this).addClass("selected");

    //add click handler for nav links
    jQuery("> .nav a", this).click(function () {

    var parentTogglePanel = jQuery(this).parents('.toggle_content:first');

    if (jQuery(this).hasClass("selected")) //if already on this item, ignore
    return false;



    var selectedDiv = jQuery("> div:visible:not(.nav)", parentTogglePanel);
    var targetDiv = jQuery(jQuery(this).attr("href"));

    jQuery("> .nav a", parentTogglePanel).removeClass("selected"); //remove "selected" class from all nav links
    jQuery(this).addClass("selected"); //add "selected" class to clicked link

    if (selectedDiv.attr("id") != undefined) {
    selectedDiv.animate({ height: "toggle", opacity: "toggle" }, 300, function () {
    targetDiv.animate({ height: "toggle", opacity: "toggle" }, 350);
    });
    } else {
    targetDiv.animate({ height: "toggle", opacity: "toggle" }, 350); //failsafe in case no visible div was found
    }
    $('#map_canvas').css('display', 'visible');
    return false; //cancel link action  
            
    });
           
    });

});