/**
 * SWITCHER 1.1 - maciej jasiobedzki
 *
 * plug'n'play switching script for spotlights, feeds, paginators, the works
 * since targets are specified with anchors, this is completely degradable and navigation works just fine when javascript isn't supported
 *
 * CHANGELOG
 * 1.1 -- fancy switching: add an extra class .util_fancy_switcher to the .util_switcher element to enable fade effects;
 *        add the class .util_switchable_inside to something inside a .util_switchable to enable slide effects
 * 1.0 -- initial version
 *
 * this script expects a certain structure -- one generic enough, however, to be easily applied in many situations
 *
 * <div class="util_switcher">
 *    <ul class="util_switchboard">
 *       <li class="util_switch util_active">
 *          <a href="#target_1">target 1</a>
 *       </li><!-- .util_switch -->
 *       <li class="util_switch">
 *          <a href="#target_2">target 2</a>
 *       </li><!-- .util_switch -->
 *    </ul><!-- .util_switchboard -->
 *    <div id="target_1" class="util_switchable">
 *       <h2 class="util_switchable_label">Target 1</h2>
 *       ...
 *    </div><!-- target_1 -->
 *    <div id="target_2" class="util_switchable">
 *       <h2 class="util_switchable_label">Target 2</h2>
 *    </div><!-- target_2 -->
 * </div><!-- .util_switcher -->
 *
 * note that the structure is fairly flexible:
 * - a switchboard can occur anywhere in a switcher (it can occur after the switchables or even between them)
 * - there can be extra nested elements and the system will still work fine, e.g.:
 *    <div class="util_switcher">
 *       <div id="extra">
 *          <div id="bonus">
 *             <div id="target_1" class="util_switchable">...</div>
 *          </div><!-- bonus -->
 *       </div><!-- extra -->
 *       <div id="more">
 *          <ul class="util_switchboard">
 *             <li class="util_active util_switch">
 *                <a href="#target_1">target 1</a>
 *             </li>
 *          </ul><!-- .util_switchboard -->
 *       </div><!-- more -->
 *    </div><!-- .util_switcher -->
 * - you don't need to use unordered lists! ordered lists, or any structure of elements at all will work fine
 *   (as long as the switcher classes have correct parent/child relationships), e.g.
 *    <ol>
 *       <li class="util_switcher">
 *          <div class="util_switchboard">
 *             <p class="util_switch">
 *                <a href="#target_1">target 1</a>
 *             </p><!-- .util_switch -->
 *          </div><!-- .util_switchboard -->
 *          <dl class="util_switchable">
 *             <dt>Target 1</dt><dd>...</dd>
 *          </dl><!-- .util_switchable -->
 *       </li><!-- .util_switcher -->
 *    </ol>
 *
 * if you're using switcher with a tab menu, for example, you'll want to make use of switchable_labels
 * because browsers without JS will have all switchables display consecutively, you'll probably want to include headings
 * to hep the user differentiate between each switchable. just give the heading the class util_switchable_label.
 * however, if the user's browser supports JS you'll probably not want to show those headings because the active
 * tab in your tab menu will help visually convey the name of the section. if you want the headings to always display in
 * the switchable regardless of JS status, just don't apply the util_switchable_label class.
 *    <div id="target_1" class="util_switchable">
 *       <h2 class="util_switchable_label">Target 1</h2>
 *    </div><!-- target_1 -->
 *    <div id="target_2" class="util_switchable">
 *       <h2>Target 2</h2>
 *    </div><!-- target_2 -->
 *  in the above example, the heading "Target 1" will be hidden, while "Target 2" will not. in practice you'll probably want all
 *  switchables in a particular switcher either to have switchable_labels or not (as opposed to some having them and some note).
 *
 * in other AWESOMENESS, switchers are nestable! you can put a whole switcher inside a switchable, or you can make a switchable
 * a switcher at the same time -- just make sure your class heirarchy is correct. word.
 *
 */
$(document).ready(function()
{
	// hide switchables on load
	// this means that folks without JS will still see all the feeds -- navigation between is handled using anchor links in the tab menu
	$('.util_switchable').hide();

	// hide switchable labels on load
	// we don't hide them using css because folks without JS will need to see the labels in order to differentiate between the switchables that'll show up consecutively
	$('.util_switchable_label').hide();

	// show the first one!
	$('.util_switcher').each(function() { $(this).find('.util_switchable').first().show() });

	// switch tool -- switches show their corresponding switchables and are marked active
	$('.util_switcher .util_switchboard .util_switch a').click(function()
	{
		// hide all switchables in this switcher
		// but make sure we don't hide any switchables inside nested switchers!
		var relatedSwitchable = $(this).parents('.util_switcher').first().find('.util_switchable').first();
		// hide the closest child switchable in the heirarchy
		$(relatedSwitchable).hide();
		// and hide that child's sibling switchables
		$('#'+$(relatedSwitchable).attr("id")+' ~ .util_switchable').hide();

		// show the right one
		$($(this).attr('href')).show();

		// remove all active classes
		$(this).parents('.util_switchboard').first().find('.util_switch').removeClass('util_active');

		// mark this list item as active
		$(this).parents('.util_switch').first().addClass('util_active');

		return false;
	});

	// unbind simple switch so we can use fancy switch instead (where applicable)
	$('.util_fancy_switcher .util_switchboard .util_switch a').unbind('click');

	// fancy switch tool -- just like the previous switch tool except "cooler"
	$('.util_fancy_switcher .util_switchboard .util_switch a').click(function()
	{
		// hide all switchables in this switcher
		// but make sure we don't hide any switchables inside nested switchers!
		var relatedSwitchable = $(this).parents('.util_switcher').first().find('.util_switchable').first();

		var targ = $(this).attr('href');

		$('#'+$(relatedSwitchable).attr("id")+', '+'#'+$(relatedSwitchable).attr("id")+' ~ .util_switchable').each(function()
		{
			if ($(this).css('display') == 'block')
			{
				$(this).fadeOut(600, function()
				{
					$(targ).show();
					var inner_targ = $(targ).find('.util_switchable_inside').first();
					$(inner_targ).hide();
					$(inner_targ).slideDown();
				});
			}
		});

		// remove all active classes
		$(this).parents('.util_switchboard').first().find('.util_switch').removeClass('util_active');

		// mark this list item as active
		$(this).parents('.util_switch').first().addClass('util_active');

		return false;
	});
});