$.extend({
    keys: function(obj){
        var a = [];
        $.each(obj, function(k){ a.push(k) });
        return a;
    }
});

$(document).ready(function(){
	var global_key			= 'the_look_key';
	var json_file			= '/site/shes_got_the_look/nav_menu/json/urls.json';
	var show_top_divider	= false;
	var show_last_divider	= false;

	// establishing a naming convention for css classes:
	var css_base_class	= global_key.replace('key','');

	global_key = window[global_key];
	if (typeof global_key === 'undefined') {return;}

	var url_set;
	$.getJSON(json_file, function(data){
		var this_URL_component = top.location.pathname.split('/').pop();
		$.each(data, function(i, urls){
			if (urls[global_key] === this_URL_component) {
				url_set = urls;
				return false;
			}
		});
		if (typeof url_set === 'undefined') {return;}

		// quick summary: we have our URLs for this set of pages. next we add click event handlers to the menu items, and hover event handlers for appearance.
		//important note: the required convention is that the json data be ordered in the sequence that menu items will be displayed
		var url_path	= url_set["__path__"];
		delete url_set["__path__"];
		var item_count	= 1;
		var last_item	= $.keys(url_set).length;

		if ( (last_item > 0) && show_top_divider ) {
			var divider = '<div class="' + css_base_class + 'navmenu_divider"></div>';
			$(divider).appendTo( $('#' + css_base_class + 'navmenu') );
		}

		$.each(url_set, function(url_key, url_component){
			var url			= url_path + url_component;
			var menu_item	= $('<div class="' + css_base_class + 'navmenu_item" id="' + css_base_class + 'navmenu_' + url_key + '" target="' + url + '"></div>').appendTo( $('#' + css_base_class + 'navmenu') );
			var img_off		= menu_item.css('background-image');
			var img_on		= img_off.replace('.off.', '.on.');

			if (url_key === global_key) {
				menu_item.css('background-image', img_on);
			}
			else {
				menu_item.click(function(){
					top.location = $(this).attr('target');
				});
				menu_item.hover(
					function(){
						$(this).css('background-image', img_on);
					},
					function(){
						$(this).css('background-image', img_off);
					}
				);
			}

			if ( (item_count !== last_item) || show_last_divider ) {
				var divider = '<div class="' + css_base_class + 'navmenu_divider"></div>';
				$(divider).insertAfter(menu_item);
			}
			item_count++;
		});
	});

});