/* Adaptive Navigation script abstracted from "Adaptive Web Design" by Aaron Gustafson */
$(function(){
	var
	$window = $(window),
	$old_nav = $('.masthead nav > *'),
	$links = $old_nav.find('a'),
	showing = 'old',
	trigger = 710,
	$new_nav, $option,
	timer = null;
	
	if ($old_nav.length && $links.length) {
		$new_nav = $('<select></select>');
		$option = $('<option>Browse&hellip;</option>')
		.appendTo($new_nav);
		$links
		.each(function() {
			var $a = $(this);
			$option.clone()
			.attr('value', $a.attr('href'))
			.text($a.text())
			.appendTo($new_nav);
        });
		$new_nav = $new_nav
		.wrap('<div id="mobile-nav"/>')
		.parent()
        .delegate('select', 'change', function() {
			var $this = $(this);
			window.location = $this.val();
		});
	}
	
	function toggleDisplay() {
		var width = $window.width();
		if (showing == 'old' && width <= trigger) {
			$old_nav.replaceWith($new_nav);
            showing = 'new';
		} else if (showing == 'new' && width > trigger) {
			$new_nav.replaceWith($old_nav);
            showing = 'old';
        }
    }

	toggleDisplay();
	
	$window.resize(function() {
		if (timer) { clearTimeout(timer); }
		timer = setTimeout(toggleDisplay, 100);
    });

});