//version 1.3
function ShowSubmenu(index, horizontal_offset, sub_menu_border_width, show_underline, underline_height, underline_color, sub_menu_padding)
{
	
	//Calculate left position of submenu based upon main menu item position and offset
	var sub_menu_item_position_left = jQuery('#main_menu_item_' + index).position().left;
	sub_menu_item_position_left = sub_menu_item_position_left + horizontal_offset;
	
	//Calculate top position based upon position and size of main menu
	var sub_menu_item_position_top = jQuery('#main_menu_item_' + index).position().top;
	sub_menu_item_position_top = sub_menu_item_position_top + jQuery('#main_menu_container').height();

	//Calculate width of submenu
	var sub_menu_width = eval(jQuery('#sub_menu_' + index).width());
	sub_menu_width += eval(jQuery('#sub_menu_' + index).css('padding-left').replace('px',''));
	sub_menu_width += eval(jQuery('#sub_menu_' + index).css('padding-right').replace('px',''));
	sub_menu_width += sub_menu_border_width * 2;
	
	//Calculate furthest right positions of submenu and main menu to prevent submenu reaching outside of menu range
	var main_menu_furthest_right_position = jQuery('#main_menu_container').width() + jQuery('#main_menu_container').position().left;
	var sub_menu_furthest_right_position = sub_menu_item_position_left + sub_menu_width;
	if(sub_menu_furthest_right_position > main_menu_furthest_right_position)
	{
		jQuery('#sub_menu_' + index).css('left', main_menu_furthest_right_position - sub_menu_width + 'px');
		//jQuery('#sub_menu_shadow_' + index).css('left', main_menu_furthest_right_position - sub_menu_width + 'px'); //SHADOW
	}
	else
	{
		jQuery('#sub_menu_' + index).css('left', sub_menu_item_position_left + 'px');
		//jQuery('#sub_menu_shadow_' + index).css('left', sub_menu_item_position_left + 'px'); //SHADOW
	}
	
	
	//position and show submenu
	jQuery('#sub_menu_' + index).css('top', sub_menu_item_position_top + 'px');
	jQuery('#sub_menu_' + index).show();
	
	//SHADOW - (removed in 1.3 - too much overhead with very little result)
	//jQuery('#sub_menu_shadow_' + index).width(sub_menu_width + 'px');
	//jQuery('#sub_menu_shadow_' + index).height( jQuery('#sub_menu_' + index).height() + (eval(sub_menu_padding)*2) - eval(sub_menu_border_width)  + 'px');
	//jQuery('#sub_menu_shadow_' + index).css('top', sub_menu_item_position_top + 'px');
	//jQuery('#sub_menu_shadow_' + index).show();
	
	
	//Handle the main menu underline
	if(show_underline==true)
	{
		var underline_top_position = sub_menu_item_position_top - underline_height;
		var underline_left_position =  jQuery('#main_menu_item_text_' + index).position().left + eval(jQuery('#main_menu_item_text_' + index).css('padding-left').replace('px',''));
		var main_menu_item_text_width = jQuery('#main_menu_item_text_' + index).width();
		var html = "<table style='position:absolute; top:" + underline_top_position + "px; left:" + underline_left_position + "px; background-color:#" + underline_color + "; height:" + underline_height + "px; width:" + main_menu_item_text_width + "px; cursor:pointer; '><tr><td></td></tr></table>";

		
		jQuery('#main_menu_underline_container_' + index).html(html);
		jQuery('#main_menu_underline_container_' + index).show();
	}
}

function HideSubmenu()
{
	jQuery('div.sub_menu_container').hide();	
	jQuery('div.main_menu_item_underline').hide();	
	jQuery('div.main_menu_underline_container').hide();
	//jQuery('div.sub_menu_shadow').hide(); //SHADOW
}


function HandleMenuMouseover(element, color, show_underline)
{
	jQuery(element).css('color', '#' + color.replace('#',''));
	
	if(show_underline==true)
	{
		jQuery(element).css('text-decoration', 'underline');
	}
}

function HandleMenuMouseout(cssclass, color)
{

	jQuery('div.' + cssclass).css('color', '#' + color.replace('#',''));
	jQuery('div.' + cssclass).css('text-decoration', 'none');
	jQuery('div.sub_menu_item_icon').hide();
}

function DisplaySubmenuIcon(element)
{
	jQuery(element).show();
}

function GetKeys(obj)
{
	var keys = new Array();
	var count = 0;
	for(var prop in obj)
	{
		keys[count] = prop;
		count++;
	}
	return(keys);
}

$.fn.dropdownmenubar = function(options) 
{  
	/////////////////////////////////////////////////
	// PARAMETERS
	/////////////////////////////////////////////////
	//Set defaults
	var defaults = {  
		main_menu_item_height:"25", 
		sub_menu_item_height:"25",	
		main_menu_item_font_family:"'Calibri','Arial'", 
		sub_menu_item_font_family:"'Calibri','Arial'",  
		main_menu_item_font_size:"16", 
		sub_menu_item_font_size:"11",  
		main_menu_item_font_weight:"bold", 
		sub_menu_item_font_weight:"normal", 
		main_menu_item_color:"387D3C",
		sub_menu_item_color:"387D3C",
		main_menu_item_indent:"10", 
		sub_menu_item_indent:"10", 
		toggle:true,
		main_menu_background:"NONE", 
		sub_menu_background:"F7F7F7", 
		main_menu_effect_underline:true, 
		main_menu_effect_underline_color: "FDF8E6",
		main_menu_effect_underline_height: "3",
		sub_menu_border: true, 
		sub_menu_border_color: "FDF8E6", 
		sub_menu_border_style: "solid", 
		sub_menu_border_width: "1", 
		sub_menu_item_mouseover_underline: true,
		sub_menu_item_mouseover_color: "000000",
		main_menu_item_mouseover_underline: false, 
		main_menu_item_mouseover_color: "000000",
		sub_menu_padding: "5", 
		sub_menu_column_width: "200",  //Rather than setting the submenu width, set column wide for later support of multiple columns
		main_menu_item_horizontal_padding: "10",  //The amount of padding added to both the left and right of each main menu item
		main_menu_force_casing: "NORMAL", //UPPER | LOWER | NORMAL 
		sub_menu_force_casing: "NORMAL", //UPPER | LOWER | NORMAL  
		sub_menu_horizontal_offset: "0", 
		main_menu_width: "auto", // auto | 999 | 999px | 999%;  Default: auto
		main_menu_alignment: "center",  //left | right | center
		sub_menu_opacity: "100%",
		sub_menu_rounded_corners: "none" // bottom | all | none
	}; 
	
	//If any of the above option were not set apply default values
	var options = jQuery.extend(defaults, options);  	
	
	//Remove any string appendages from the settings if they exist
	options.main_menu_item_height = options.main_menu_item_height.replace('px','');
	options.sub_menu_item_height = options.sub_menu_item_height.replace('px','');
	options.main_menu_item_font_size = options.main_menu_item_font_size.replace('px','');
	options.sub_menu_item_font_size = options.sub_menu_item_font_size.replace('px','');
	options.main_menu_item_indent = options.main_menu_item_indent.replace('px','');
	options.sub_menu_item_indent = options.sub_menu_item_indent.replace('px','');
	options.main_menu_background = options.main_menu_background.replace('#','');
	options.sub_menu_background = options.sub_menu_background.replace('#','');
	options.sub_menu_border_color = options.sub_menu_border_color.replace('#','');
	options.sub_menu_item_mouseover_color = options.sub_menu_item_mouseover_color.replace('#','');
	options.main_menu_item_mouseover_color = options.main_menu_item_mouseover_color.replace('#','');	
	options.main_menu_item_color = options.main_menu_item_color.replace('#','');
	options.sub_menu_item_color = options.sub_menu_item_color.replace('#','');
	options.sub_menu_padding = options.sub_menu_padding.replace('px','');
	options.sub_menu_border_width = options.sub_menu_border_width.replace('px','');
	options.sub_menu_horizontal_offset = options.sub_menu_horizontal_offset.replace('px','');
	options.main_menu_effect_underline_color = options.main_menu_effect_underline_color.replace('#','');
	options.main_menu_effect_underline_height = options.main_menu_effect_underline_height.replace('px','');
	options.main_menu_width = options.main_menu_width.replace('px','');
	options.sub_menu_opacity = options.sub_menu_opacity.replace('%','');
	
	//Convert all values to uppercase (exluding items) before any if statements occur
	var keys = GetKeys(options);
	$(keys).each(function(i) { 
	
		if(typeof options[keys[i]] == 'string')
		{
			options[keys[i]] = options[keys[i]].toUpperCase();
		}
	});
	
	//Set defaults for string based cases
	var sub_menu_border_width = 0;
	if(options.sub_menu_border == false)
	{
		options.sub_menu_border_width=0;
	}
	
	if(options.main_menu_background == 'NONE')
	{
		//Set no color leaving it transparent
	}
	
	if(options.sub_menu_rounded_corners != 'NONE' && options.sub_menu_rounded_corners != 'BOTTOM' && options.sub_menu_rounded_corners != 'ALL' )
	{
		options.sub_menu_rounded_corners = 'NONE';
	}


	//Calculate the opacity based upon percent
	options.sub_menu_opacity = options.sub_menu_opacity * .01;
	

	

	/////////////////////////////////////////////////
	// MENU CREATION
	/////////////////////////////////////////////////
	//Flag to prevent spacing above first menu header
	return this.each(function() { 
	
		//Grab the object making the call
		menu_object = $(this);  
						
		//Create html to place within table or div
		var html = "";
		if(menu_object.is("TABLE"))
		{
			menu_object.css('border-collapse','collapse'); //Strip extra padding for tabl
			
			//If menu width is set to a specific percent then set that width
			if(options.main_menu_width!='auto')						
			{
				menu_object.css('width', options.main_menu_width);
			}

			html += "<tr>";
			html += "	<td align='" + options.main_menu_alignment + "' style='border-collapse:collapse; background-color:#" + options.main_menu_background + "' id='" + menu_object.attr('id') + "_inner' ></td>";
			html += "</tr>";
		}
		else
		{
			html += "	<div id='" + menu_object.attr('id') + "_inner' ></div>";
		}
		
		
		//Insert menu into [tablename/divname]_inner
		//After this point, you have an empty container to create the menu whether user chose a table or a div
		jQuery(menu_object).html(html);
		
	
		//Dynamically calculate the vertical center point of the text in the submenu. This is performed here to avoid 
		//uneccessary calculations within the following loops.

		var vertical_position_text = eval(options.sub_menu_item_height)/2 - eval(options.sub_menu_item_font_size)/2;
		var vertical_position_icon = eval(options.sub_menu_item_height)/2 - 8; //8 represents half the icon height
		
		//Grab menu items, iterate and create menu buttons
		html = "";
		html += "<table id='main_menu_container' class='main_menu_container' style='border-collapse:collapse;'   onmouseout=\"HideSubmenu(); HandleMenuMouseout('main_menu_item', '" + options.main_menu_item_color + "'); \" ";
		html += "	<tr>";


		//Insert main menu items		
		var menu_headers = options.items;
		var count = 0;
		var is_first_main_menu_item = true;
		$(menu_headers).each(function(i) { 
	
			//If specified, force the case the item before inserting into menu
			var menu_text =  menu_headers[i].header;
			if(options.main_menu_force_casing != "NORMAL")
			{
				if(options.main_menu_force_casing == "LOWER")
				{
					menu_text = menu_text.toLowerCase();
				}
				else
				{
					menu_text = menu_text.toUpperCase();
				}
			}

			//Create menu item container		
			html += "		<td id='main_menu_item_" + count + "' class=''   onmouseout=\"HandleMenuMouseout('main_menu_item', '" + options.main_menu_item_color + "');\"   ";
			html += " style=\"border-collapse:collapse; height:" + options.main_menu_item_height + "px;\"  ";
						
			html += " onmouseover=\"";
			
			//Only show submenu if sub menu items exist
			if(jQuery(menu_headers[i].items).length > 0)
			{
				html += " ShowSubmenu(" + count + ", " + options.sub_menu_horizontal_offset + ", " + options.sub_menu_border_width + ", " + options.main_menu_effect_underline + ", " + options.main_menu_effect_underline_height + ", '" + options.main_menu_effect_underline_color + "', " + options.sub_menu_padding + "); ";
			}
			
			//Handle the main menu items visual effect for mouseover (except display of submenu)
			html += " HandleMenuMouseover(jQuery('#main_menu_item_text_" + count + "'), '#" + options.main_menu_item_mouseover_color + "', " + options.main_menu_item_mouseover_underline + "); \" >";
			
			//Create a hidden container to hold the underline effect for this main menu item
			html += "			<div id='main_menu_underline_container_" + count + "' class='main_menu_underline_container' style='display:none; position:absolute; left:0px; top:0px;'></div>";
		
			//Insert the main menu item into the container - implement onclick if it exists (if nothing is entered in JSON this won't fail)
			html += "			<div  id='main_menu_item_text_" + count + "' style='' class='main_menu_item' onclick=\"" + menu_headers[i].onclick + "\"  >";
			html += 				menu_text;
			html += "			</div>";
			
			
			//Shadow
			//html += "<div class='sub_menu_shadow' id='sub_menu_shadow_" + count + "' style='background-color:#CCCCCC; display:none; position:absolute;'></div>";
			
			//Create and insert the submenu
			html += "			<div id='sub_menu_" + count + "' class='sub_menu_container' style='display:none; position:absolute; width:" + options.sub_menu_column_width + "px;  border:" + options.sub_menu_border_width + "px " + options.sub_menu_border_style + " #" + options.sub_menu_border_color + ";'    >"

			

				
			// Insert content into submenu
			var sub_count = 0;
			$(menu_headers[i].items).each(function(n) { 
			
				//If specified, force the case the item before inserting into submenu
				var sub_menu_text =  menu_headers[i].items[n].name;
				if(options.sub_menu_force_casing != "NORMAL")
				{
					if(options.main_menu_force_casing == "LOWER")
					{
						sub_menu_text = sub_menu_text.toLowerCase();
					}
					else
					{
						sub_menu_text = sub_menu_text.toUpperCase();
					}
				}
					
				//add submenu item - show rollover effects such as standard underlines for main and sub menus
				html += "		<div id='sub_menu_item_" + sub_count +"'  class='sub_menu_item' style=\"position:relative; height:" + options.sub_menu_item_height + "px;\" onclick=\"" + menu_headers[i].items[n].onclick + "\" ";
				html += " 			onmouseover=\"DisplaySubmenuIcon(jQuery('#sub_menu_item_icon_" + count + "_" + sub_count + "')); HandleMenuMouseover(jQuery('#sub_menu_item_text_" + count + "_" + sub_count + "'), '#" + options.sub_menu_item_mouseover_color + "', " + options.sub_menu_item_mouseover_underline + ");\"";
				html += " 			onmouseout=\"HandleMenuMouseout('sub_menu_item_text', '#" + options.sub_menu_item_color + "');\">";
			
				//Add submenu ocon
				html += "			<div id='sub_menu_item_icon_" + count + "_" + sub_count + "' class='sub_menu_item_icon ui-icon ui-icon-triangle-1-e' style='display:none; position:absolute; left:0px; top:" + vertical_position_icon + "px;'></div>";
				
				//Display text for item
				html += "			<div id='sub_menu_item_text_" + count + "_" + sub_count + "' class='sub_menu_item_text' style='position:absolute; top:" + vertical_position_text + "px; left:16px;'>" + sub_menu_text + "</div>";
				
				html +=	"		</div>";
				sub_count++;
			});
			
			html +=	"			</div>";
			html += "		</td>";
			count++;	
		});
		 
		html += "	</tr>";
		html += "</table>";
	
		//Add all menu html
		jQuery('#' + menu_object.attr('id') + '_inner').html(html);
		
	
		
		////////////////////////////////////////////////////////////
		// CSS
		////////////////////////////////////////////////////////////
		
		//MENU BEHAVIOR
		jQuery('div.main_menu_item').css('cursor','pointer');
		jQuery('div.sub_menu_item').css('cursor','pointer');
		
		//TEXT STYLE
		jQuery('div.main_menu_item').css('font-family',options.main_menu_item_font_family);
		jQuery('div.sub_menu_item').css('font-family',options.sub_menu_item_font_family);
		jQuery('div.main_menu_item').css('font-size',options.main_menu_item_font_size + 'px');
		jQuery('div.sub_menu_item').css('font-size',options.sub_menu_item_font_size + 'px');		
		jQuery('div.main_menu_item').css('font-weight',options.main_menu_item_font_weight);
		jQuery('div.sub_menu_item').css('font-weight',options.sub_menu_item_font_weight);		
		jQuery('div.main_menu_item').css('color','#' + options.main_menu_item_color);
		jQuery('div.sub_menu_item').css('color','#' + options.sub_menu_item_color);
		
		//MENU AND SUBMENU ITEEM PADDING
		jQuery('div.main_menu_item').css('padding-left',(eval(options.main_menu_item_indent) + eval(options.main_menu_item_horizontal_padding)) + 'px');
		jQuery('div.main_menu_item').css('padding-right', options.main_menu_item_horizontal_padding + 'px');
		jQuery('div.sub_menu_item').css('padding-left',options.sub_menu_item_indent + 'px');		
		
		//SUBMENU PADDING
		jQuery('div.sub_menu_item').css('margin-left',options.sub_menu_padding + 'px');
		jQuery('div.sub_menu_item').css('margin-right',options.sub_menu_padding + 'px');
		jQuery('div.sub_menu_container').css('padding-top',options.sub_menu_padding - options.main_menu_effect_underline_height + 'px');
		jQuery('div.sub_menu_container').css('padding-bottom',options.sub_menu_padding + 'px');
		
		//BACKGROUND COLORS
		if(options.main_menu_background != 'NONE')
		{
			jQuery('table.main_menu_container').css('background-color', '#' + options.main_menu_background);
		}
		if(options.sub_menu_background != 'NONE')
		{
			jQuery('div.sub_menu_container').css('background-color', '#' + options.sub_menu_background);
		}
		
		//SUBMENU OPACITY
		jQuery('div.sub_menu_container').css({ opacity: options.sub_menu_opacity });	
		//jQuery('div.sub_menu_shadow').css({ opacity: 1 });	//SHADOW

		if(options.sub_menu_rounded_corners == 'ALL')
		{
			jQuery('div.sub_menu_container').addClass('ui-corner-all');
		}
		else if(options.sub_menu_rounded_corners == 'BOTTOM')
		{
			jQuery('div.sub_menu_container').addClass('ui-corner-bottom');
		}
		
		

			
	});  
};