/*
	# Copyright 2009, Hoop Associates Ltd
	# Hoop Associates   www.thisishoop.com   mail@hoopassociates.co.uk
*/
var 
buildNav = function(elem){
	var span, li;
	$("#" + elem + " ul li").each(
	function(){
		if ($("ul:first", this).length) {
			var 
				ch = $("ul:first", this).css("display") != 'none' ? '–' : '+', 
				li = this;
			$("a:first", li).prepend('<span class="exp">' + ch + '&nbsp;</span>');
			$('span:first', this).click(function(){
				span = this;
				$("ul:first", li).animate({
					height: 'toggle'
				}, 200, function(){
					$(span).html(($(this).css("display") == "none") ? "+&nbsp;" : "&ndash;&nbsp;");
				});
				return false;
			});
		}
	});
},
fixBugs = function(){
	// FF2/Mac Opacity Bug
	($.browser.mozilla && parseFloat($.browser.version) < 1.9 && navigator.appVersion.indexOf('Mac') !== -1) && $('body').css('-moz-opacity',.999);
	if ($.browser.msie) {
		// IE6 background css flickering bug
		try{document.execCommand('BackgroundImageCache', false, true);} 
		catch(e){};
		// IE6 transaprent PNG background fix
		if (/MSIE ((5\.5)|6)/i.test(navigator.userAgent) && navigator.platform == "Win32"){
			$(".iecsspng").each(function(){
				var bgIMG = $(this).css('background-image');
				if (bgIMG.indexOf(".png")!=-1){
					var iebg = bgIMG.split('url("')[1].split('")')[0];
					$(this).css('background-image', 'none');
					$(this).get(0).runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + iebg + "',sizingMethod='scale')";
				}
			});
		}
	}
};
String.prototype.text = function(){
	var str = this;
	try {
		str = decodeURIComponent(str);
        } catch(e) {}
	str = (str != null && str != undefined && str.length) ? $.trim(str.replace(/<\S[^><]*>/g, '')) : '';
	return str;
}
String.prototype.safeEscape = function(){
        return encodeURIComponent($.trim(this)).replace(/%20/g, "+").toString();
}


$(function(){
	fixBugs();
	buildNav("nav");

	var options = [];
	var option = {};
	option.title = 'Option 1';
	option.blurb = '<p>Default copy</p>';
	option.option_lists = [];
	var option_list = {};
	option_list.title = 'Title 1';
	option_list.options = [];
	option_list.options.push({title: 'Title 1', url: '/'});
	option_list.options.push({title: 'Title 2', url: '/'});
	option.option_lists.push(jQuery.extend({}, option_list));
	option_list = {};
	option_list.title = 'Title 2';
	option_list.options = [];
	option_list.options.push({title: 'Title 1', url: '/'});
	option_list.options.push({title: 'Title 2', url: '/'});
	option.option_lists.push(jQuery.extend({}, option_list));
	options.push(jQuery.extend({}, option));
	
	option.title = 'Option 2';
	option.blurb = '<p>Default copy</p>';
	option.option_lists = [];
	option_list = {};
	option_list.title = 'Title 1';
	option_list.options = [];
	option_list.options.push({title: 'Title 1', url: '/'});
	option_list.options.push({title: 'Title 2', url: '/'});
	option.option_lists.push(jQuery.extend({}, option_list));
	option_list = {};
	option_list.title = 'Title 2';
	option_list.options = [];
	option_list.options.push({title: 'Title 1', url: '/'});
	option_list.options.push({title: 'Title 2', url: '/'});
	option.option_lists.push(jQuery.extend({}, option_list));
	
	var $nw = $('#nav-widget');
	$nw = $('<div class="brown-nw">').appendTo(
				 $('<div class="brown-ne">')
								.appendTo($nw)
				);
	$nw.navigation_picker({
		'options'	: options
	})   
});

(function( $ ){
	$.fn.navigation_picker = function( options ) {
		
		var config = {
			'options'	: [],
			'title'		: 'Navigation widget',
			'instructions'	: 'Choose an option:'
		}
		
		if ( options ) {
			$.extend( config, options );
		}
		
		var $nw = this;
		
		var $options = $nw
						.append($('<h2>').text( config.title ))
						.append($('<p>').text( config.instructions ))
						.append('<ul>')
						.children('ul')
						.attr('role', 'tablist');

		for (var i in config.options) {
			var option = config.options[i];
			var idRoot = 'tab';
			var j = 0;
			while (document.getElementById(idRoot+j)) {
				j++;
			}
			option.id = idRoot+j;
			var $button = $("<button type=\"button\">")
				.text( option.title )
				.attr('role', 'tab')
				.attr('aria-selected', 'false')
				.attr('id', option.id)
				.click(function(e){
					var $this = $(this);
					var aria_selected = ($this.attr('aria-selected') == 'true') ? 'false' : 'true';
					var aria_hidden = $this.attr('aria-selected');
					e.stopPropagation();
					$this
						.attr('aria-selected', aria_selected)
						.siblings('div[role=tabpanel]')
						.toggle(250)
						.attr('aria-hidden', aria_hidden)
						.parent()
						.toggleClass('selected');
					$this
						.parent()
						.siblings()
						.each(function(){
							$(this)
								.removeClass('selected')
								.children('button[role="tab"]')
								.attr('aria-selected', 'false')
								.siblings('div[role=tabpanel]')
								.hide(250)
								.attr('aria-hidden', 'true');
						});
				});
			
			var $panel = $("<div>")
				.attr('role', 'tabpanel')
				.attr('aria-hidden', 'true')
				.attr('aria-labelledby', option.id)
				.append('<p>' + option.blurb + '</p>')
				.hide();
				
			for ( var l in option.option_lists) {
				var option_list = option.option_lists[l];	
				var $suboptions = $('<select>')
									.append('<option value="">' + option_list.title + '</option>');
									
				var subopts = option_list.options;
				for (var o in subopts) {
					$('<option>')
						.attr('value', subopts[o].url)
						.text(subopts[o].title)
						.appendTo($suboptions);
				}
				var $go = $('<button class="go" type="button">')
							.text('Go')
							.click(function(){
								var url = $(this)
											.siblings('select')
											.val();
								if (url != '') window.location = url;
							});
				$suboptions = $('<p>')
								.append($suboptions)
								.append($go);
				$panel.append($suboptions);
			}



			$('<li>')
				.appendTo($options)
				.append($button)
				.append($panel);
			
			$('html').click(function(e){
				$('#nav-widget button[aria-selected=true]').triggerHandler('click');
			});
			
			$nw.click(function(e){
				e.stopPropagation();
			});
				

			if (option.url == window.location.pathname) {
				$button.trigger('click');
			}

		}
			
		return this;
	}
})( jQuery );