//var menuItems = ["Papers","Projects","Tech Books","Provocative","Non-tech Books","Essays","Interesting","Photos","Poetry"];
var menuItems=[
/* objects consolidating menu tile information
   interests and importance are ordered Visitor,Friend,Academic */
{text:"Papers",			interests:[0.5,0.0,1.0],importance:[0.5,0.0,1.0], url:"papers.shtml"},
{text:"Projects",		interests:[0.5,0.8,1.0],importance:[0.5,0.0,0.9], url:"projects.shtml"},
{text:"Tech Books",		interests:[0.5,0.0,1.0],importance:[0.5,0.0,0.8], url:"techbooks.shtml"},
{text:"Provocative",	interests:[0.5,0.6,0.3],importance:[0.5,0.6,0.6], url:"provoke.shtml"},
{text:"Non-tech Books",	interests:[0.5,0.4,0.2],importance:[0.5,0.9,0.1], url:"books.shtml"},
{text:"Essays",			interests:[0.5,0.7,0.4],importance:[0.5,1.0,0.7], url:"essays.shtml"},
{text:"Interesting",	interests:[0.5,0.8,0.7],importance:[0.5,0.4,0.4], url:"interesting.shtml"},
{text:"Photos",			interests:[0.5,1.0,0.0],importance:[0.5,0.8,0.0], url:"photos.shtml"},
{text:"Poetry",			interests:[0.5,0.2,0.0],importance:[0.5,0.4,0.0], url:"poetry.shtml"}
];

var objNavPanel;

window.onload = function(){
	/* Construct Tile objects, initialize, and add to container */
	objNavPanel = new NavPanel();
	$(".metro_tile").each(function(index) {
		//idlist += $(this).attr("id") + "=" + menuItems[index] + "<br>";
		var td = menuItems[index];	// tile data
		var objTile = new Tile(td.text,td.url,td.interests,td.importance);
		objTile.bind(objNavPanel,"#"+$(this).attr("id"));
		objNavPanel.addTile(objTile);
		$(this).html(td.text);
	});
	objNavPanel.setVistorType(objNavPanel.getVisitorType());	// TBD replace with cookie value later
};

/*--------------------------------
		Nav Panel Mediator Object
*/
function NavPanel() {
	/* Constructor code */
	this.tileSet = [];
	this.currentVisitorType = -1;

	/* Public Methods */
	this.getLowColor = function () {
		return $("#lowValues").css("backgroundColor");
	}
	this.getHighColor = function () {
		return $("#highValues").css("backgroundColor");
	}
	this.getSmallText = function () {
		return $("#lowValues").css("fontSize");
	}
	this.getTallText = function () {
		return $("#highValues").css("fontSize");
	}
	this.gotoPage = function (url) {
		$("#menu").fadeOut('fast');
		window.location = url;
	}
	this.setVistorType = function (visitorType) {
		if (visitorType != this.currentVisitorType) {
			for (var n in this.tileSet) {
				var tst = 3;
				var obj = this.tileSet[n];
				obj.initChanges();
				obj.changeUser(visitorType);
				/* Room later for maybe doing the resize thing after all */
				obj.commitChanges();
			}
			if (this.currentVisitorType >= 0) {
				var btnId = "#visitor" + this.currentVisitorType;
				$(btnId).removeClass("visitor_selected");
			}
			var btnId = "#visitor" + visitorType;
			$(btnId).addClass("visitor_selected");
			this.currentVisitorType = visitorType;
		}
	}
	this.changeUserType = function (newUser) {
		this.setVistorType(newUser);
		this.storeVisitorType(newUser);
	}
	this.addTile = function (obj) {
		this.tileSet.push(obj);
	}
	this.storeVisitorType = function (user) {
		var expDate = new Date();
		expDate.setDate(expDate.getDate()+60);	// 60 days
		var expires = "; expires=" + expDate.toUTCString();
		document.cookie = "visitorType" + "=" + user + expires + "; path=/";
		var dbgstr = document.cookie;
	}
	this.getVisitorType = function () {
		var LSE = "visitorType=";
		var ca = document.cookie.split(';');
		for(var i=0;i < ca.length;i++) {
			var c = ca[i];
			while (c.charAt(0)==' ') c = c.substring(1,c.length);
			if (c.indexOf(LSE) == 0) return parseInt(c.substring(LSE.length,c.length));
		}
		return 0;	//default is "visitor"
	}
	this.forgetVisitorType = function (name) {
		setCookie("visitorType","",-1);
	}
}

/*--------------------------------
		Tile Object
*/
function Tile(text,url,interestArray,importanceArray) {
	/* local features (public properties) */
	this.text = text;
	this.importance = 1.0;
	this.interest = 1.0;
	this.tileHtmlObj = null;
	this.url = url;
	this.container = null;

	/* local features (private properties) */
	var _userInterests = interestArray.slice();
	var _userImportances = importanceArray.slice();
	var _lowColor = "";
	var _highColor = "";
	var _smallText = "";
	var _tallText = "";
	
	/* Public Methods */
	this.handleClick = function () {
		this.myself.container.gotoPage(this.myself.url);
	}
	this.bind = function (container,strTileId) {
	/* Bind this object to the parent navigation container 
		and to the HTML object that represents the View object */
		this.tileHtmlObj = $(strTileId)[0];
		$(strTileId).click(this.handleClick);
		this.tileHtmlObj.myself = this;
		/* Query container for global values and retain reference */
		this.container = container;
		_lowColor = $.Color(container.getLowColor());
		_highColor = $.Color(container.getHighColor());
		_smallText = container.getSmallText();
		_tallText = container.getTallText();
	}
	this.changeUser = function(nUserType) {
		/* change importance/interest as a function of type and update visual signals */
		this.interest = _userInterests[nUserType];
		this.importance = _userImportances[nUserType];
		var newFontSize = interpolateFontSize(this.interest);
		this.addChange("fontSize",newFontSize);
		var newBackgroundColor = interpolateColor(this.importance);
		this.addChange("backgroundColor",newBackgroundColor);
	}
	this.initChanges = function () {
		this.changeQueue = {};
	}
	this.addChange = function (strProperty,value) {
		this.changeQueue[strProperty] = value;
	}
	this.commitChanges = function () {
		/* JQuery animate here */
		$(this.tileHtmlObj).animate(this.changeQueue,200);
	}
	/* Private Methods */
	var interpolateColor = function (mix) {
		/* find a linear point between _lowColor and _highColor using mix (a value between 0 and 1) */
		var test = $.Color("#FF1020");
		var R = Math.floor((1-mix)*_lowColor.red() + mix*_highColor.red());
		var G = Math.floor((1-mix)*_lowColor.green() + mix*_highColor.green());
		var B = Math.floor((1-mix)*_lowColor.blue() + mix*_highColor.blue());
		//alert('interpolateColor TBD');
		return $.Color(R,G,B,1.0).toHexString();
	}
	var interpolateFontSize = function (mix) {
		/* find a linear point between _lowColor and _highColor using mix (a value between 0 and 1) */
		var pattern = /\d+/;
		var smallSize = pattern.exec(_smallText);
		var tallSize = pattern.exec(_tallText);
		var newSize = Math.floor((1-mix)*smallSize + mix*tallSize);
		return newSize + "px";
	}
}
/*--------- Other functions --------------*/
function debugInit() {
}

/* NavPanel Toggle Function */
function toggleMenu() {
	if ($("#menu")[0].style.display == "none") {
		$("#menu").fadeIn('fast');
	} else {
		$("#menu").fadeOut('fast');
	}
} 

/* Hover Functions */
$("#menuAnchor").hover(function() {
  $(this).addClass("circle_hover");
}, function() {
  $(this).removeClass("circle_hover");
});

$(".visitor_text").hover(function() {
  $(this).addClass("visitor_text_hover");
}, function() {
  $(this).removeClass("visitor_text_hover");
});

$(".about").hover(function() {
  $(this).addClass("about_hover");
}, function() {
  $(this).removeClass("about_hover");
});

$(".metro_tile").hover(function() {
  $(this).addClass("metro_tile_hover");
  this.oldBackgroundColor = this.style.backgroundColor;
  this.style.backgroundColor="#FFFFF0";
}, function() {
  $(this).removeClass("metro_tile_hover");
  this.style.backgroundColor = this.oldBackgroundColor;
});

/* Globally Useful Functions */
var myNavigate = function(url) {
/* */
	objNavPanel.gotoPage(url);
}
/* List Item Toggle Function */
$("#litest").click( function(e) {
	var $k = $(e.target).children();
	$k.each(function() {
		if ($(this)[0].style.display == "none") {
			$(this).fadeIn('fast');
		} else {
			$(this).fadeOut('fast');
		}
	});
});