var is_IE6 = navigator.userAgent.search(/MSIE\s[0-6]/)+1;
var is_IE = typeof ActiveXObject != "undefined";


// preload some images

var img_path = "./images/";

(btnL = new Image()).src = img_path + "buttonL.png";
(btn_M_T = new Image()).src = img_path + "button_M_T.png";
(btn_M_B = new Image()).src = img_path + "button_M_B.png";
(btnR = new Image()).src = img_path + "buttonR.png";

// menu graphics
(dd_T_border = new Image()).src = img_path + "dd_T_border.png";
(dd_R_border = new Image()).src = img_path + "dd_R_border.png";
(dd_B_border = new Image()).src = img_path + "dd_B_border.png";
(dd_L_border = new Image()).src = img_path + "dd_L_border.png";

(dd_TL_corner = new Image()).src = img_path + "dd_TL_corner.png";
(dd_TR_corner = new Image()).src = img_path + "dd_TR_corner.png";
(dd_BL_corner = new Image()).src = img_path + "dd_BL_corner.png";
(dd_BR_corner = new Image()).src = img_path + "dd_BR_corner.png";

(dd_L_inside_corner = new Image()).src = img_path + "dd_L_inside_corner.png";
(dd_R_inside_corner = new Image()).src = img_path + "dd_R_inside_corner.png";


// submenu offsets
var off_x = is_IE ? -7 : 27;
var off_y = is_IE ? -5 : 25;


var the_menu = [];
/*
associative array of submenu strings whose keys correspond 
to the ID's of the category button table hovered over
*/
var submenus = []; 
var targ_node;
var cur_sub;


function initDropDown() {
	
	parse_menu();
}











//////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////   D A T A  A C Q U I S I T I O N   //////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////



function parse_menu() {
	
	// get nav buttons section
	var menu = targ_node = document.getElementById('navBtns');
	
	// strip out whitespace
	menu = menu.innerHTML.replace(/[\s\t\n]*(<[^<>]+>)[\s\t\n]*/gi,"$1");

	// first get sections
	var patt = /<li class="parent open">(<a[^>]+>[^<>]+<\/a>){1}(<ul>(<li>(<a[^>]+>[^<>]+<\/a>){1}(<\/li>)?)+<\/ul>){1}(<\/li>)?/gi;
	var sections = menu.match(patt);
	
	for(var i=0; i<sections.length; i++) {

		
		var cat_patt = /^<li class="parent open">(<a[^>]+>[^<>]+<\/a>)(.+)/i;
		var lnk = sections[i].replace(cat_patt,"$1");
		sections[i] = sections[i].replace(cat_patt,"$2");
				
		var sub_patt = /<li>(<a[^>]+>[^<>]+<\/a>)/gi;
		var sublnks = sections[i].match(sub_patt);
		
		for(var k=0; k<sublnks.length; k++) {
			sublnks[k] = sublnks[k].replace(sub_patt,"$1");
		}

		the_menu.push({cat:lnk,subcat:sublnks});
	}


	/*
	at this point we have an array of objects with both of two properties:
	
	.cat	- the anchor tag for the main category link
	.subcat	- an array of anchor tags, each corresponding to a link in the submenu
	*/
	create_elements();
}










//////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////   E L E M E N T  C R E A T I O N   //////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////



/* creates all html element strings */
function create_elements() {

	var btns = "";
	var subs = "";
	
	for(var a=0; a<the_menu.length; a++) {
		
		btns += make_cat_btn(the_menu[a]);
		subs += make_menu(the_menu[a]);
	}
	
	targ_node.innerHTML = btns;
	targ_node.style.display = "block";
	
	document.body.innerHTML += subs;
	// push references to each submenu in submenus array and set init pos
	subs = document.getElementsByTagName("DIV");
	for(var k=0; k<subs.length; k++) {
		if(subs[k].className=="submenu") {
			var cat_id = subs[k].id.replace(/^([^_]+).+/,"$1");
			submenus[cat_id] = subs[k];
			fix_submenu_size(submenus[cat_id]); // prevents any funky auto-sizing of the submenu tables
		}
	}
	
	init_dd_action();
}




function make_cat_btn(cur_obj) {
	
	var the_category = cur_obj.cat;
	var cat_id = cur_obj.cat.replace(/^<a[^>]+>([^<\s]+).*/i,"$1").toLowerCase();

	var btn = "";
	
	if(is_IE6) {
		
		btn += '<table id="' + cat_id + '" cellspacing="0" cellpadding="0" border="0">';
		btn += '<tr>';
		btn += '<td rowspan="3" style="width:' + btnL.width + 'px; height:' + btnL.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + btnL.src + '\');"></td>';
		btn += '<td style="height:' + btn_M_T.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + btn_M_T.src + '\',sizingMethod=\'scale\');"></td>';
		btn += '<td rowspan="3" style="width:' + btnR.width + 'px; height:' + btnR.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + btnR.src + '\');"></td>';
		btn += '</tr>';
		btn += '<tr>';
		btn += '<td style="height:' + (btnL.height-(btn_M_T.height*2)) + 'px" class="cat_btn_link">' + the_category + '</td>';
		btn += '</tr>';
		btn += '<tr>';
		btn += '<td style="height:' + btn_M_B.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + btn_M_B.src + '\',sizingMethod=\'scale\');"></td>';
		btn += '</tr>';
		btn += '</table>';
	}
	else {
		
		btn += '<table id="' + cat_id + '" cellspacing="0" cellpadding="0" border="0">';
		btn += '<tr>';
		btn += '<td rowspan="3" style="width:' + btnL.width + 'px; height:' + btnL.height + 'px; background-image:url(\'' + btnL.src + '\'); background-repeat:no-repeat"></td>';
		btn += '<td style="height:' + btn_M_T.height + 'px; background-image:url(\'' + btn_M_T.src + '\'); background-repeat:repeat-x"></td>';
		btn += '<td rowspan="3" style="width:' + btnR.width + 'px; height:' + btnR.height + 'px; background-image:url(\'' + btnR.src + '\'); background-repeat:no-repeat"></td>';
		btn += '</tr>';
		btn += '<tr>';
		btn += '<td style="height:' + (btnL.height-(btn_M_T.height*2)) + 'px" class="cat_btn_link">' + the_category + '</td>';
		btn += '</tr>';
		btn += '<tr>';
		btn += '<td style="height:' + btn_M_B.height + 'px; background-image:url(\'' + btn_M_B.src + '\'); background-repeat:repeat-x"></td>';
		btn += '</tr>';
		btn += '</table>';
	}

	return btn;
}






function make_menu(cur_obj) {

	var cat_id = cur_obj.cat.replace(/^.+>([^<\s]+).*<\/a>/i,"$1").toLowerCase();
	var the_category = cur_obj.cat;
	var the_cat_nolink = cur_obj.cat.replace(/^.+>([^<]+)<\/a>/i,"$1").toUpperCase();
	var the_links = cur_obj.subcat.toString().replace(/,/g,"");
	
	var dd = "";
	
	dd += '<div class="submenu" id="' + cat_id + '_sub">';
	
	
	if(is_IE6) {
		
		dd += '<table style="position:relative; z-index:2" cellspacing="0" cellpadding="0" border="0">';
		dd += '<tr>';
		dd += '<td style="width:' + dd_TL_corner.width + 'px; height:' + dd_TL_corner.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_TL_corner.src + '\')"></td>';
		dd += '<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_T_border.src + '\', sizingMethod=\'scale\')"></td>';
		dd += '<td style="width:' + dd_TR_corner.width + 'px; height:' + dd_TR_corner.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_TR_corner.src + '\')"></td>';
		dd += '</tr>';
		dd += '<tr>';
		dd += '<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_L_border.src + '\', sizingMethod=\'scale\')"></td>';
		dd += '<td class="btn_on">' + the_category + '</td>';
		dd += '<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_R_border.src + '\', sizingMethod=\'scale\')"></td>';
		dd += '</tr>';
		dd += '<tr style="background-color:#FFFFFF">';
		dd += '<td style="width:' + dd_L_inside_corner.width + 'px; height:' + dd_L_inside_corner.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_L_inside_corner.src + '\')"></td>';
		dd += '<td></td>';
		dd += '<td style="width:' + dd_R_inside_corner.width + 'px; height:' + dd_R_inside_corner.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_R_inside_corner.src + '\')"></td>';
		dd += '</tr>';
		dd += '</table>';
	
		dd += '<table style="position:relative; top:-4px; z-index:1" id="' + cat_id + '_submenu" cellpadding="0" cellspacing="0" border="0">';
		dd += '<tr>';
		dd += '<td style="width:' + dd_TL_corner.width + 'px; height:' + dd_TL_corner.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_TL_corner.src + '\')"></td>';
		dd += '<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_T_border.src + '\', sizingMethod=\'scale\')"></td>';
		dd += '<td style="width:' + dd_TR_corner.width + 'px; height:' + dd_TR_corner.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_TR_corner.src + '\')"></td>';
		dd += '</tr>';
		dd += '<tr>';
		dd += '<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_L_border.src + '\', sizingMethod=\'scale\')"></td>';
		dd += '<td class="navLinks">' + the_links + '</td>';
		dd += '<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_R_border.src + '\', sizingMethod=\'scale\')"></td>';
		dd += '</tr>';
		dd += '<tr>';
		dd += '<td style="width:' + dd_BL_corner.width + 'px; height:' + dd_BL_corner.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_BL_corner.src + '\')"></td>';
		dd += '<td style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_B_border.src + '\', sizingMethod=\'scale\')"></td>';
		dd += '<td style="width:' + dd_BR_corner.width + 'px; height:' + dd_BR_corner.height + 'px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'' + dd_BR_corner.src + '\')"></td>';
		dd += '</tr>';
		dd += '</table>';
		
	}
	
	else {
		
		dd += '<table style="position:relative; z-index:2" cellspacing="0" cellpadding="0" border="0">';
		dd += '<tr>';
		dd += '<td style="width:' + dd_TL_corner.width + 'px; height:' + dd_TL_corner.height + 'px; background-image:url(\'' + dd_TL_corner.src + '\'); background-repeat:no-repeat"></td>';
		dd += '<td style="background-image:url(\'' + dd_T_border.src + '\'); background-repeat:repeat-x"></td>';
		dd += '<td style="width:' + dd_TR_corner.width + 'px; height:' + dd_TR_corner.height + 'px; background-image:url(\'' + dd_TR_corner.src + '\'); background-repeat:no-repeat"></td>';
		dd += '</tr>';
		dd += '<tr>';
		dd += '<td style="background-image:url(\'' + dd_L_border.src + '\'); background-repeat:repeat-y"></td>';
		dd += '<td class="btn_on">' + the_category + '</td>';
		dd += '<td style="background-image:url(\'' + dd_R_border.src + '\'); background-repeat:repeat-y"></td>';
		dd += '</tr>';
		dd += '<tr style="background-color:#FFFFFF">';
		dd += '<td style="width:' + dd_L_inside_corner.width + 'px; height:' + dd_L_inside_corner.height + 'px; background-image:url(\'' + dd_L_inside_corner.src + '\'); background-repeat:no-repeat"></td>';
		dd += '<td></td>';
		dd += '<td style="width:' + dd_R_inside_corner.width + 'px; height:' + dd_R_inside_corner.height + 'px; background-image:url(\'' + dd_R_inside_corner.src + '\'); background-repeat:no-repeat"></td>';
		dd += '</tr>';
		dd += '</table>';
	
		dd += '<table style="position:relative; top:-4px; z-index:1" id="' + cat_id + '_submenu" cellpadding="0" cellspacing="0" border="0">';
		dd += '<tr>';
		dd += '<td style="width:' + dd_TL_corner.width + 'px; height:' + dd_TL_corner.height + 'px; background-image:url(\'' + dd_TL_corner.src + '\'); background-repeat:no-repeat"></td>';
		dd += '<td style="background-image:url(\'' + dd_T_border.src + '\'); background-repeat:repeat-x"></td>';
		dd += '<td style="width:' + dd_TR_corner.width + 'px; height:' + dd_TR_corner.height + 'px; background-image:url(\'' + dd_TR_corner.src + '\'); background-repeat:no-repeat"></td>';
		dd += '</tr>';
		dd += '<tr>';
		dd += '<td style="background-image:url(\'' + dd_L_border.src + '\'); background-repeat:repeat-y"></td>';
		dd += '<td class="navLinks">' + the_links + '</td>';
		dd += '<td style="background-image:url(\'' + dd_R_border.src + '\'); background-repeat:repeat-y"></td>';
		dd += '</tr>';
		dd += '<tr>';
		dd += '<td style="width:' + dd_BL_corner.width + 'px; height:' + dd_BL_corner.height + 'px; background-image:url(\'' + dd_BL_corner.src + '\'); background-repeat:no-repeat"></td>';
		dd += '<td style="background-image:url(\'' + dd_B_border.src + '\'); background-repeat:repeat-x"></td>';
		dd += '<td style="width:' + dd_BR_corner.width + 'px; height:' + dd_BR_corner.height + 'px; background-image:url(\'' + dd_BR_corner.src + '\'); background-repeat:no-repeat"></td>';
		dd += '</tr>';
		dd += '</table>';
		
	}
	
	dd += '</div>';

	return dd;
}











//////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////   D Y N A M I C  P O S I T I O N S  &  S I Z E S   //////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////


/*
Fixes the width of the submenu portion of the submenu to 
prevent the browser from narrowing it and destroying its 
visual integrity.
*/
function fix_submenu_size(sm) {
	
	var ts = sm.getElementsByTagName('TABLE');
	var t1 = ts[0];
	var t2 = ts[1];
	
	/* 
	The plus 10 is so to accomodate the overhang on the 
	left and a little extra space on the right so it's 
	not flush.
	*/
	t2.style.width = (t2.offsetWidth > (t1.offsetWidth+10) ? t2.offsetWidth : (t1.offsetWidth+10)) + "px";
}


/*
Dynamically offsets the submenu portion of the submenu to 
make it more accessible when the browser window is small.
*/
function submenu_offset(the_sm, pos_x, pos_y) {
	
	var ts = the_sm.getElementsByTagName('TABLE');
	var t1 = ts[0];
	var t2 = ts[1];
	
	t2.style.left = "0px";
}


/*
Sets the global position of the submenu taking into 
consideration browser's x,y scroll values.
*/
function set_pos(the_evt,the_cat) {
	
	var offset_x;
	var offset_y;
	var page_x;
	var page_y;
	
	// get offset
	if(is_IE) {
		offset_x = the_evt.offsetX;
		offset_y = the_evt.offsetY;
		page_x = the_evt.screenX - window.screenLeft;
		page_y = the_evt.screenY - window.screenTop;
	}
	else {
		offset_x = the_evt.layerX;
		offset_y = the_evt.layerY;
		page_x = the_evt.pageX;
		page_y = the_evt.pageY;
	}

	var pos_y = (page_y - offset_y) + (is_IE ? document.documentElement.scrollTop : 0) + off_y;
	var pos_x = (page_x - offset_x) + (is_IE ? document.documentElement.scrollLeft : 0) + off_x;
	
	var the_sm = document.getElementById(the_cat + "_sub");
	the_sm.style.top = pos_y + "px";
	the_sm.style.left = pos_x + "px";
	
	submenu_offset(the_sm, pos_x, pos_y);
}










//////////////////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////
////////   E V E N T  H A N D L I N G   //////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////


function init_dd_action() {

	// fire events from anchor tags
	for(var i=0; i<the_menu.length; i++) {
		var cur_ID = the_menu[i].cat.replace(/^.+>([^<\s]+).*<\/a>/i,"$1").toLowerCase();
		(document.getElementById(cur_ID).getElementsByTagName("A")[0]).onmouseover = dd_onmouseover;
	}
	
	document.onmousemove = dd_onmouseout;
}



function dd_onmouseover(evt) {
	
	evt = evt ? evt : window.event;
	var targ = evt.srcElement ? evt.srcElement : evt.target;
	
	if((evt.type == "mouseover") && (targ.nodeName=="A")) {
		
		if(cur_sub) {
			// ol' switcharoo
			cur_sub.style.visibility = "hidden";
			var last_btn_id = cur_sub.id.replace(/([^_]+).+/,"$1");
			document.getElementById(last_btn_id).style.visibility = "visible";
		}

		// hide button; show submenu == ol' switcharoo
		sub_id = this.parentNode.parentNode.parentNode.parentNode.id;
		document.getElementById(sub_id).style.visibility = "hidden";
		cur_sub = document.getElementById(sub_id + "_sub");
		set_pos(evt,sub_id);
		cur_sub.style.visibility = "visible";
	}
}





function dd_onmouseout(evt) {

	if(!cur_sub) return;
	
	evt = evt ? evt : window.event;
	var targ = evt.srcElement ? evt.srcElement : evt.target;
	
	// get references to two constituent tables
	var ts = cur_sub.getElementsByTagName("TABLE");
	var t1 = ts[0];
	var t2 = ts[1];
	
	var t1_w = t1.offsetWidth;
	var t2_w = t2.offsetWidth;
	var t1_h = t1.offsetHeight;
	var t2_h = t2.offsetHeight;
	var t1_x = parseInt(cur_sub.style.left.replace(/(\d+).+/,"$1"));
	var t2_x = t1_x + parseInt(t2.style.left.replace(/([^_]+).+/,"$1"));
	var t1_y = parseInt(cur_sub.style.top.replace(/(\d+).+/,"$1"));
	var t2_y = t1_y + t1_h;
	
	var mouse_x = evt.clientX + (is_IE ? document.documentElement.scrollLeft : scrollX);
	var mouse_y = evt.clientY + (is_IE ? document.documentElement.scrollTop : scrollY);
	
	// If mouse is not within bounding area of the submenu, kill it.
	var to_kill = function() {
		if(!((mouse_y > t1_y) && (mouse_y < (t1_y + t1_h + t2_h)))) return true;
		if((mouse_y < (t1_y + t1_h)) && ((mouse_x < t1_x) || (mouse_x > (t1_x + t1_w)))) return true;
		if(mouse_x < t2_x) return true;
		if(mouse_x > (t2_x + t2_w)) return true;
		return false;
	}();

	if(to_kill) {
		// ol' switcharoo
		cur_sub.style.visibility = "hidden";
		var old_btn_id = cur_sub.id.replace(/([^_]+).+/,"$1");
		document.getElementById(old_btn_id).style.visibility = "visible";
		cur_sub = null;
	}
}