// JavaScript Document
// mainNav.js

var smallFontSize = "13px";			// font size of "at rest" mainNav titles
var titleTopOffset = "29px";		// titles' top absolute position
var logoBottomOffset = "16px";		// logos' bottom absolute position
var logoLeftOffset = "40px";		// normal logos' left absolute position
var firstLogoLeftOffset = "30px";	// first logo's left absolute position
var fontSizeDelta = "5px";			// amount by which title font size increases on rollover
var titlePositionDelta = "17px"; 	// amount the title shifts up when rolled over
var logoPositionDelta = "10px";	 	// amount the logo shifts left and up to stay centered and compensate for size increase 
var logoStartSize = "47px";
var logoOverSize = "66px";
var animateSpeed = 140;
var easingType = "swing";

$(document).ready( function() {
			$anchors = $("#mainNav a");
			$anchors.each( function() {
						var $logo = $(this).children("img");
						var $parent = $(this).parent();
						$(this).remove();
						$parent.append($logo);
		});
});

/*var logoPaths = new Array();
logoPaths[0] = "images/logo_home.png";
logoPaths[1] = "images/logo_northgate.png";
logoPaths[2] = "images/logo_community.png";
logoPaths[3] = "images/logo_team.png";
logoPaths[4] = "images/logo_green.png";
logoPaths[5] = "images/logo_own.png";
logoPaths[6] = "images/logo_rent.png";
logoPaths[7] = "images/logo_retail.png";
logoPaths[8] = "images/logo_contact.png";

var overPaths = new Array();
overPaths[0] = "images/logo_home_over.png";
overPaths[1] = "images/logo_northgate_over.png";
overPaths[2] = "images/logo_community_over.png";
overPaths[3] = "images/logo_team_over.png";
overPaths[4] = "images/logo_green_over.png";
overPaths[5] = "images/logo_own_over.png";
overPaths[6] = "images/logo_rent_over.png";
overPaths[7] = "images/logo_retail_over.png";
overPaths[8] = "images/logo_contact_over.png";

// workaround because IE does not bicubic sample resized pngs:
var selectedPaths = new Array();
selectedPaths[0] = "images/logo_home_over_small.png";
selectedPaths[1] = "images/logo_northgate_over_small.png";
selectedPaths[2] = "images/logo_community_over_small.png";
selectedPaths[3] = "images/logo_team_over_small.png";
selectedPaths[4] = "images/logo_green_over_small.png";
selectedPaths[5] = "images/logo_own_over_small.png";
selectedPaths[6] = "images/logo_rent_over_small.png";
selectedPaths[7] = "images/logo_retail_over_small.png";
selectedPaths[8] = "images/logo_contact_over_small.png";
*/
var links = new Array();
links[0] = "index.html";
links[1] = "northgate.html";
links[2] = "community.html";
links[3] = "team.html";
links[4] = "green.html";
//links[5] = "own.html";
links[5] = "rent.html";
links[6] = "shop.html";
links[7] = "contact.html";

var d = document;

if( d.images ) { 
   if( !d.imgArray ) { d.imgArray = new Array(); }
   var j = d.imgArray.length; 
  
   for(var i=0; i<overPaths.length; i++) {
		 d.imgArray[j] = new Image(); 
		 d.imgArray[j++].src = overPaths[i];
		 d.imgArray[j] = new Image(); 
		 d.imgArray[j++].src = selectedPaths[i];
   }
}


$(document).ready( function() {
			$("#mainNav li img").hover( logoMouseOver, logoMouseOut ).click( logoClicked );
});

function logoClicked() {
	resetLogos();
	$logos = $("#mainNav li img");
	var curIdx = $logos.index(this);
	$(this).attr("src", selectedPaths[curIdx]);
	$(this).parent().parent().addClass("selected");
	window.location = links[curIdx];
}

/* DEBUG FOR TEST PAGE: */
/*function logoClicked() {
	resetLogos();
	$logos = $("#mainNav li img");
	$(this).attr("src", selectedPaths[$logos.index(this)]);
	$(this).parent().parent().addClass("selected");
}
*/
function logoMouseOver() {
		if( !$(this).parent().parent().hasClass("selected") ) {
				  $(this).css({ cursor: "pointer" });
				//$(this).attr("src", addOverToPath($(this).attr("src")));
				var curIdx = $("#mainNav li").index($(this).parent().parent());
				$(this).attr("src", overPaths[curIdx]).css({ width: logoStartSize, height: logoStartSize });
			   $(this).animate({ left: "-="+logoPositionDelta,
								  bottom: "-="+logoPositionDelta,
								   width: logoOverSize, 
								   height: logoOverSize }, animateSpeed, easingType);
				
				if(animateMainNavTitles) {
					  var $titleContainer = $(this).parent().children(".titleContainer");
					  $titleContainer.children("h1").animate({ fontSize: "+="+fontSizeDelta }, animateSpeed, easingType);
					  $titleContainer.animate({ top: "-="+titlePositionDelta }, animateSpeed, easingType);
				}
		}
}

function logoMouseOut() {
		if( !$(this).parent().parent().hasClass("selected") ) {
				$(this).css({ cursor: "default" });
				$(this).animate({ 
								left: "+="+logoPositionDelta,
								bottom: "+="+logoPositionDelta,
								 width: logoStartSize, 
								 height: logoStartSize
								 }, animateSpeed, easingType, function() {
										//$(this).attr("src", removeOverFromPath($(this).attr("src")));
										var curIdx = $("#mainNav li").index($(this).parent().parent());
										$(this).attr("src", logoPaths[curIdx]);
				 });
				if(animateMainNavTitles) {
					  var $titleContainer = $(this).parent().children(".titleContainer");
					  $titleContainer.children("h1").animate({ fontSize: smallFontSize }, animateSpeed, easingType);
					  $titleContainer.animate({ top: titleTopOffset }, animateSpeed, easingType);
				}
		}
}

function resetLogos() {
	$logos = $("#mainNav li img");
	$logos.each( function( curIdx ) {
			
			$(this).attr("src", logoPaths[curIdx]);
			
			$parentItem = $(this).parent().parent();
			$parentItem.removeClass("selected");
			
			if( !$parentItem.hasClass("first") ) {
				$(this).css({ bottom: logoBottomOffset, 
							left: logoLeftOffset,
							height: logoStartSize,
							width: logoStartSize });
			}
			else {
				$(this).css({ bottom: logoBottomOffset, 
							left: firstLogoLeftOffset,
							height: logoStartSize,
							width: logoStartSize });	
			}
			if(animateMainNavTitles) {
					  var $titleContainer = $(this).parent().children(".titleContainer");
					  $titleContainer.children("h1").animate({ fontSize: smallFontSize  }, animateSpeed, easingType);
					  $titleContainer.animate({ top: titleTopOffset }, animateSpeed, easingType);
			}
	});
	
}

// too slow for quick rollovers:
function addOverToPath(pathStr) {
	var withoutSuffix = pathStr.substring(0, (pathStr.length - 4));
	var suffix = pathStr.substring((pathStr.length - 4));
	return withoutSuffix + "_over" + suffix;
}
function removeOverFromPath(pathStr) {
	var withoutSuffix = pathStr.substring(0, (pathStr.length - 4));
	var suffix = pathStr.substring((pathStr.length - 4));
	return withoutSuffix.substring(0, (withoutSuffix.length-5)) + suffix;
}