/*
EarthLink Portal Navigation v1.0
Author: Chris Gerikh
Notes: 
Man this is programming, not developmnent! Keep that in mind when you view my script/I'm not a programmer :)
Nothing like the manual logic of if/nested if/bool flags to kill your brain.

Works (& tested) in IE[6,7,8,9], FF[5,6b], Chrome/Android, Safari[both PC & Mac], iOS[iPhone/iPad]
*/

$(document).ready(function() {

	/* *** Vars *** */
	var catToggle = catFocus = subFocus = false;
	var lastCat = lastSub = "";

	/* *** Dropdown UI *** */
	var bgImgPath = "/billing/templates/mylink/_gfx/ui/nav/";
	var bgImgs = ["tl.png","tr.png","ml.png","mr.png","bl.png","br.png","isub-tl.png","isub-tr.png","isub-ml.png","isub-mr.png","isub-bl.png","isub-br.png","mnav-bull-on.gif","mnav-bull-off.gif","mnav-l-on.gif","mnav-r-on.gif","mnav-bg-on.gif","inav-l-on.gif","inav-r-on.gif","inav-bg-on.gif","inav-l-hover.gif","inav-r-hover.gif","inav-bg-hover.gif","mnav-r-hover.gif","mnav-l-hover.gif"];
	$.each(bgImgs,function(e) {
		$(new Image()).load(function() {
			//alert($(this).attr('src') + 'loaded');
		}).attr('src',bgImgPath+this);
	});

	$('.nav-cat').append('<div class="nav-cat-bull"></div><span class="nav-cat-r"></span>').prepend('<span class="nav-cat-l"></span>');
	$(".sub-nav").wrap('<div class="meganav"><div class="bd"><div class="c"><div class="s"></div></div></div></div>');
	$('div.meganav').prepend('<div class="hd"><div class="c"></div></div>').append('<div class="ft"><div class="c"></div></div>');

	$('.ico-cat').append('<div class="nav-cat-bull"></div><span class="inav-cat-r"></span>').prepend('<span class="inav-cat-l"></span>');
	$(".ico-sub").wrap('<div class="imega"><div class="bd"><div class="c"><div class="s"></div></div></div></div>');
	$('div.imega').prepend('<div class="hd"><div class="c"></div></div>').append('<div class="ft"><div class="c"></div></div>');

	$(".sub-nav, .ico-sub").addClass('clearfix');
	
	/* *** Dynamic Width *** */
	$(".sub-nav-outer").each(function() {setSubSize(this);}); // 9/2/2011 Eby, Nicholas

	function setSubSize(subId) {
		switch($(subId).find('.sub-nav div').size()) {
			case 1:
				$(subId).addClass("sub-one-col");
				$(subId).find(".sub-nav div:first-child").css("padding","0px");
				break;
			case 2:
				$(subId).addClass("sub-two-cols");
				$(subId).find(".s").addClass("sub-two-border");
				//$(subId).find(".sub-nav div:first-child").addClass("sub-col-bar");
				//$(subId).find(".sub-nav div:nth-child(2)").addClass("sub-col-barless");
				$(subId).find(".sub-nav div:first-child").css("padding","0 14px 0 0");
				$(subId).find(".sub-nav strong:nth-child(2)").css("padding","8px 0 0 0");
				break;
			case 3:
				$(subId).addClass("sub-three-cols");
				$(subId).find(".s").addClass("sub-three-border");
				//$(subId).find(".sub-nav div:nth-child(1), .sub-nav div:nth-child(2)").addClass("sub-col-bar");
				//$(subId).find(".sub-nav div:last-child").addClass("sub-col-barless");
				$(subId).find(".sub-nav div:first-child").css("padding","0 14px 0 0");
				$(subId).find(".sub-nav strong:nth-child(2)").css("padding","8px 0 0 0");				
				break;
		}
		//alert($(subId).find('.sub-nav div').size());		
	}
	

	/* *** MegaNav (& Icon Nav) Engine *** */
	$('div[id|="sub"]').mouseover(function() { subFocus = true; });
	$('div[id|="sub"]').mouseout(function() { subFocus = false; });
	
	//$('div[id|="cat"]').mouseover(function() { catFocus = true; });
	//$('div[id|="cat"]').mouseout(function() { catFocus = false; });
	$('.ico-cat').mouseover(function() { catFocus = true; });
	$('.ico-cat').mouseout(function() { catFocus = false; });
	
	$(".nav-cat").hover(
		function () {
			catToggle = false;
			toggleNav(false,lastCat,lastSub);
			
			$(this).addClass("cat-active");
			if($.browser.msie) {
				$("#sub-"+this.id.substr(4)).show();
			} else {
				$("#sub-"+this.id.substr(4)).fadeIn('fast');
			}
		},
		function () {
			$(this).removeClass("cat-active");
			$("#sub-"+this.id.substr(4)).hide();
		}
	);
	
	
	//$(this).find('.nav-cat,.ico-cat').click(function() {
	$(this).find('.ico-cat').click(function() {
		var sid;
		sid = "#sub-"+this.id.substr(4);
	
		// Don't ask me about the logic here. I was ready to blow my brains out.
		if(!catToggle) {
			catToggle = true;
			toggleNav(true,this,sid);
		} else {
			if(lastCat != "#"+this.id) {
				toggleNav(true,this,sid);
				toggleNav(false,lastCat,lastSub);
			} else {
				if(!subFocus) {
					catToggle = false;
					toggleNav(false,lastCat,lastSub);
				}
			}
		}

		lastCat = "#"+this.id;
		lastSub = sid;
	});

	$('body').click(function() {
		if(!catFocus) {
			catToggle = false;
			toggleNav(false,lastCat,lastSub);
		}
	});

	function toggleNav(toggleOn, catId, subId) {
		var show = toggleOn;
		if(show) {
			$(catId).addClass("cat-active");
		} else {
			$(catId).removeClass("cat-active");
		}
		if($.browser.msie) {

			if(show) {
				$(subId).show();
			} else {
				$(subId).hide();
			}
		} else {
			if(show) {
				$(subId).fadeIn('fast');
			} else {
				$(subId).hide();
			}
		}

	} // end toggleNav()
	
	/* handle html5 tags */
	$(this).find('nav').addClass("sitenav");

});