/*
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() {

    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
            }

            return false; //cancel link action       
        });
    });

});