some work on the javascript...still I think it's not very good, but better than before.

@@ -14,6 +14,9 @@
 		<script type="text/javascript" src="/js/jquery.ui.touch-punch.min.js"></script>
 		<script type="text/javascript" src="/js/jquery.ui.touch-punch.min.js"></script>
 		<script type="text/javascript" src="/js/serverval.js"></script>
 		<script type="text/javascript" src="/js/serverval.js"></script>
 		<script type="text/javascript" src="/js/session.js"></script>
 		<script type="text/javascript" src="/js/session.js"></script>
+		<script type="text/javascript" src="/js/user.js"></script>
+		<script type="text/javascript" src="/js/menu.js"></script>
+		<script type="text/javascript" src="/js/application.js"></script>
 		<script type="text/javascript" src="/js/init.js"></script>
 		<script type="text/javascript" src="/js/init.js"></script>
 	</head>
 	</head>
 
 

+function Application()
+{
+}
+
+Application.prototype.init = function(menu) {
+	this.session = new Session("#sessid", "#sessinfo");
+	this.user    = new User("#user", menu);
+
+	$(window).focus($.proxy(this.session.update, this.session));
+
+	$.getJSON("/version/", function(data) {
+		this.version = data.version;
+		$("#version").empty().append("version: " + this.version);
+	});
+}
+
+Application.prototype.logout = function() {
+	$.ajax({
+		dataType : "json",
+		url      : "/authenticate/",
+		type     : "DELETE",
+		success  : $.proxy(this.user.update, this.user),
+		complete : $.proxy(this.session.update, this.session)
+	});
+}
+
+Application.prototype.login = function(ev) {
+	this._sendForm("#login", "/authenticate/", ev);
+}
+
+Application.prototype.signup = function(ev) {
+	this._sendForm("#signup", "/signup/", ev);
+}
+
+
+Application.prototype._sendForm = function(id, url, ev) {
+	ev.preventDefault();
+	$.ajax({
+		dataType : "json",
+		url      : url,
+		type     : "POST",
+		data     : $(id + " form").serialize(),
+		success  : $.proxy(this._formSuccess, this, id),
+		complete : $.proxy(this.session.update, this.session)
+	});
+}
+
+Application.prototype._formSuccess = function(id) {
+	this.user.update();
+	$(id + "-container").addClass("hide");
+}
+
+// vim: set ts=4 sw=4:

 var sess = null;
 var sess = null;
 
 
 $(document).ready(function() {
 $(document).ready(function() {
-	var sval      = new ServerVal("#randval");
-	var asset_exp = /^.*\/(.*)/;
-	var asset     = '/_main.html';
+	var sval        = new ServerVal("#randval");
+	var asset_exp   = /^.*\/(.*)/;
+	var asset       = '/_main.html';
+	var application = new Application();
+	var menu        = new Menu("#menu", application);
 
 
 	var title_adds = {
 	var title_adds = {
 		'/_author.html'        : ' - Author',
 		'/_author.html'        : ' - Author',
@@ -23,95 +25,34 @@ $(document).ready(function() {
 
 
 	$("#title").load("/_title.html");
 	$("#title").load("/_title.html");
 	$("#main").load(asset);
 	$("#main").load(asset);
+	menu.init(application);
 
 
-	$("#menu").load("/_menu.html", function() {
-		$("div#menu ul li.signup").click(function(e) {
-			if ($("#signup-container").hasClass("hide")) {
-				$("#login-container").addClass("hide");
-				$("#signup-container").css("top", e.pageY + 20);
-				$("#signup-container").css("left", e.pageX - 100);
-				$("#signup-container").removeClass("hide");
-			} else {
-				$("#signup-container").addClass("hide");
-			}
-		});
-
-		$("div#menu ul li.login").click(function(e) {
-			if ($("#login-container").hasClass("hide")) {
-				$("#signup-container").addClass("hide");
-				$("#login-container").css("top", e.pageY + 20);
-				$("#login-container").css("left", e.pageX - 100);
-				$("#login-container").removeClass("hide");
-			} else {
-				$("#login-container").addClass("hide");
-			}
-		});
+	$("#statusline").load("/_statusline.html", function() {
+		application.init(menu);
 	});
 	});
 
 
-	$("#statusline").load("/_statusline.html", function (){
-		sess = new Session("#sessinfo", "#sessid", "#user");
-
-		$.getJSON(
-			"/version/",
-			function(data) {
-				$("#version").empty().append("version: " + data.version);
-			}
-		);
-
-		$.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
-		$.getJSON("/currentuser/", $.proxy(sess.loadUserJSON, sess));
-
-		$(window).focus(function() {
-			$.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
+	$("#login").load("/_login.html", function() {
+		$(function() {
+			$("#login-container").draggable();
 		});
 		});
 
 
-		$("div#menu ul li.logout").click(function() {
-			$.ajax({
-				dataType: "json",
-				url: "/authenticate/",
-				type: 'DELETE',
-				success: $.proxy(sess.loadUserJSON, sess)
-			});
-			$.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
+		$("#login-close").click(function() {
+			$("#login-container").addClass("hide");
 		});
 		});
 
 
-		$("#login").load("/_login.html", function (){
-			$(function() {
-				$("#login-container").draggable();
-			});
-
-			$("#login-close").click(function (e) {
-				$("#login-container").addClass("hide");
-			});
-
-			$("#login form").submit(function(event) {
-				event.preventDefault();
-				$.post("/authenticate/",
-					$("#login form").serialize(),
-					$.proxy(sess.loadUserJSON, sess));
-				$("#login-container").addClass("hide");
-				$.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
-			});
+		$("#login form").submit($.proxy(application.login, application));
+	});
+
+	$("#signup").load("/_signup.html", function (){
+		$(function() {
+			$("#signup-container").draggable();
 		});
 		});
 
 
-		$("#signup").load("/_signup.html", function (){
-			$(function() {
-				$("#signup-container").draggable();
-			});
-
-			$("#signup-close").click(function (e) {
-				$("#signup-container").addClass("hide");
-			});
-
-			$("#signup form").submit(function(event) {
-				event.preventDefault();
-				$.post("/signup/",
-					$("#signup form").serialize(),
-					$.proxy(sess.loadUserJSON, sess));
-				$("#signup-container").addClass("hide");
-				$.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
-			});
+		$("#signup-close").click(function (e) {
+			$("#signup-container").addClass("hide");
 		});
 		});
+
+		$("#signup form").submit($.proxy(application.signup, application));
 	});
 	});
 
 
 	$("#footer").load("/_footer.html", function (){
 	$("#footer").load("/_footer.html", function (){

+function Menu(menuSelector, application, user)
+{
+	this.application    = application;
+
+	this.signupSelector = menuSelector + " ul li.signup";
+	this.loginSelector  = menuSelector + " ul li.login";
+	this.logoutSelector = menuSelector + " ul li.logout";
+
+	this.menuElement   = $(menuSelector);
+}
+
+Menu.prototype.init = function() {
+	this.menuElement.load("/_menu.html", $.proxy(this._menuActions, this));
+}
+
+Menu.prototype.update = function() {
+	if (this.application.user.isEmpty()) {
+		$(this.signupSelector).removeClass("hide");
+		$(this.loginSelector).removeClass("hide");
+		$(this.logoutSelector).addClass("hide");
+	} else {
+		$(this.signupSelector).addClass("hide");
+		$(this.loginSelector).addClass("hide");
+		$(this.logoutSelector).removeClass("hide");
+	}
+}
+
+
+Menu.prototype._menuActions = function() {
+	$(this.signupSelector).click(function(ev) {
+		if ($("#signup-container").hasClass("hide")) {
+			$("#login-container").addClass("hide");
+			$("#signup-container").css("top", ev.pageY + 20);
+			$("#signup-container").css("left", ev.pageX - 100);
+			$("#signup-container").removeClass("hide");
+		} else {
+			$("#signup-container").addClass("hide");
+		}
+	});
+
+	$(this.loginSelector).click(function(ev) {
+		if ($("#login-container").hasClass("hide")) {
+			$("#signup-container").addClass("hide");
+			$("#login-container").css("top", ev.pageY + 20);
+			$("#login-container").css("left", ev.pageX - 100);
+			$("#login-container").removeClass("hide");
+		} else {
+			$("#login-container").addClass("hide");
+		}
+	});
+
+	$(this.logoutSelector)
+		.click($.proxy(this.application.logout, this.application));
+}
+
+// vim: set ts=4 sw=4:

-function Session(sInfo, sId, sUser)
+function Session(idSelector, infoSelector)
 {
 {
-	this.eUser    = $(sUser);
-	this.eId      = $(sId);
-	this.canvas   = $(sInfo + " canvas").get(0);
-	this.context  = this.canvas.getContext("2d");
+	this.idElement = $(idSelector);
+	this.canvas    = $(infoSelector + " canvas").get(0);
+	this.context   = this.canvas.getContext("2d");
 
 
-	this.id       = "none"
-	this.timeout  = 0;
-	this.timeleft = 0;
-	this.email     = "";
-	this.firstname = "";
-	this.surname   = "";
-	this.interval = null;
+	this._interval = null;
 
 
-	//this.draw();
+	this.update();
 }
 }
 
 
-Session.prototype.loadUserJSON = function(data)
-{
-	this.username  = data.username;
-	this.email     = data.email;
-	this.firstname = data.firstname;
-	this.surname   = data.surname;
-
-	name = "";
-	if ('' == this.username) {
-		name = "not logged in";
-		$("li.signup").removeClass("hide");
-		$("li.login").removeClass("hide");
-		$("li.logout").addClass("hide");
-	} else {
-		if ('' == this.firstname || '' == this.surname) {
-			name += this.username;
-		} else {
-			name += this.firstname + " " + this.surname;
-		}
-		$("li.signup").addClass("hide");
-		$("li.login").addClass("hide");
-		$("li.logout").removeClass("hide");
-	}
-
-	this.eUser.empty().append(name);
+Session.prototype.update = function() {
+	$.getJSON("/sessinfo/", $.proxy(this._update, this));
 }
 }
 
 
-Session.prototype.loadJSON = function(data)
-{
-	// this.stop();
-
-	this.id        = ("0" == data.id)? "none" : data.id;
-	this.timeout   = data.timeout * 10;
-	this.timeleft  = data.timeleft * 10;
+Session.prototype.clear = function() {
+	this.id       = "none";
+	this.timeout  = 0;
+	this.timeleft = 0;
 
 
-	this.eId.empty().append(this.id);
+	this._fraction  = 0.0;
+	this._leftWidth = 0.0;
 
 
-	this.draw();
-	if (0 < this.timeleft)
-		this.start();
+	this.idElement.empty().append(this.id);
+	this._stop();
 }
 }
 
 
-Session.prototype.draw = function()
+/*
+ * not real private but as a convention I use _ prefix to indicate
+ * internal use only.
+ */
+Session.prototype._update = function(data)
 {
 {
-	this.context.fillStyle = "rgb(255, 0, 0)";
-	this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+	this.id        = ("0" == data.id)? "none" : data.id;
+	this.timeout   = data.timeout;
+	this.timeleft  = data.timeleft;
 
 
-	this.context.fillStyle = "rgb(0, 255, 0)";
-	this.context.fillRect(0, 0,
-			this.canvas.width / this.timeout * this.timeleft,
-			this.canvas.height);
+	this._fraction  = this.canvas.width / this.timeout;
+	this._leftWidth = this._fraction * this.timeleft;
+
+	this.idElement.empty().append(this.id);
+
+	this._start();
 }
 }
 
 
-Session.prototype.start = function()
+Session.prototype._start = function()
 {
 {
-	if (null === this.interval) {
-		this.interval = setInterval($.proxy(this.process, this), 1000);
+	this._draw();
+	if (0 < this.timeleft && null === this._interval) {
+		this._interval = setInterval($.proxy(this._process, this), 5000);
 	}
 	}
 }
 }
 
 
-Session.prototype.process = function()
+Session.prototype._process = function()
 {
 {
 	if (0 >= this.timeleft) {
 	if (0 >= this.timeleft) {
-		this.stop();
+		this.clear();
 	}
 	}
 
 
 	else {
 	else {
-		this.timeleft -= 10;
-		this.draw();
+		this.timeleft-=5;
+		this._leftWidth -= 5*this._fraction;
+		this._draw();
 	}
 	}
 }
 }
 
 
-Session.prototype.stop = function()
-{
-	clearInterval(this.interval);
-	this.interval = null;
-	this.id       = "none";
-	this.timeout  = 0;
-	this.timeleft = 0;
-	this.username = "";
-	this.email     = "";
-	this.firstname = "";
-	this.surname   = "";
+Session.prototype._draw = function() {
+	this.context.fillStyle = "rgb(255, 0, 0)";
+	this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
 
 
-	this.eId.empty().append("");
-	this.eUser.empty().append("not logged in");
+	this.context.fillStyle = "rgb(0, 255, 0)";
+	this.context.fillRect(0, 0, this._leftWidth, this.canvas.height);
+}
 
 
-	this.draw();
+Session.prototype._stop = function()
+{
+	clearInterval(this._interval);
+	this._interval = null;
 }
 }
 
 
 // vim: set ts=4 sw=4:
 // vim: set ts=4 sw=4:

+function Session(sInfo, sId, sUser)
+{
+	this.eUser    = $(sUser);
+	this.eId      = $(sId);
+	this.canvas   = $(sInfo + " canvas").get(0);
+	this.context  = this.canvas.getContext("2d");
+
+	this.id       = "none"
+	this.timeout  = 0;
+	this.timeleft = 0;
+	this.user     = null;
+
+	//this.draw();
+}
+
+Session.prototype.isAthenticated = function(data)
+{
+}
+
+Session.prototype.authenticate = function(data)
+{
+	this.username  = data.username;
+	this.email     = data.email;
+	this.firstname = data.firstname;
+	this.surname   = data.surname;
+
+	name = "";
+	if ('' == this.username) {
+		name = "not logged in";
+		$("li.signup").removeClass("hide");
+		$("li.login").removeClass("hide");
+		$("li.logout").addClass("hide");
+	} else {
+		if ('' == this.firstname || '' == this.surname) {
+			name += this.username;
+		} else {
+			name += this.firstname + " " + this.surname;
+		}
+		$("li.signup").addClass("hide");
+		$("li.login").addClass("hide");
+		$("li.logout").removeClass("hide");
+	}
+
+	this.eUser.empty().append(name);
+}
+
+Session.prototype.loadJSON = function(data)
+{
+	// this.stop();
+
+	this.id        = ("0" == data.id)? "none" : data.id;
+	this.timeout   = data.timeout * 10;
+	this.timeleft  = data.timeleft * 10;
+
+	this.eId.empty().append(this.id);
+
+	this.draw();
+	if (0 < this.timeleft)
+		this.start();
+}
+
+Session.prototype.draw = function()
+{
+	this.context.fillStyle = "rgb(255, 0, 0)";
+	this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+
+	this.context.fillStyle = "rgb(0, 255, 0)";
+	this.context.fillRect(0, 0,
+			this.canvas.width / this.timeout * this.timeleft,
+			this.canvas.height);
+}
+
+Session.prototype.start = function()
+{
+	if (null === this.interval) {
+		this.interval = setInterval($.proxy(this.process, this), 1000);
+	}
+}
+
+Session.prototype.process = function()
+{
+	if (0 >= this.timeleft) {
+		this.stop();
+	}
+
+	else {
+		this.timeleft -= 10;
+		this.draw();
+	}
+}
+
+Session.prototype.stop = function()
+{
+	clearInterval(this.interval);
+	this.interval = null;
+	this.id       = "none";
+	this.timeout  = 0;
+	this.timeleft = 0;
+	this.username = "";
+	this.email     = "";
+	this.firstname = "";
+	this.surname   = "";
+
+	this.eId.empty().append("");
+	this.eUser.empty().append("not logged in");
+
+	this.draw();
+}
+
+// vim: set ts=4 sw=4:

+function User(userSelector, menu)
+{
+	this.userElement = $(userSelector);
+	this.menu        = menu;
+
+	this.update();
+}
+
+User.prototype.update = function() {
+	$.getJSON("/currentuser/", $.proxy(this._setData, this));
+}
+
+User.prototype.clear = function() {
+	this.username  = "";
+	this.email     = "";
+	this.firstname = "";
+	this.surname   = "";
+
+	this._displayUser();
+}
+
+User.prototype.isEmpty = function() {
+	if ("" == this.username) {
+		return true;
+	}
+
+	return false;
+}
+
+
+User.prototype._setData = function(data) {
+	this.username  = data.username;
+	this.email     = data.email;
+	this.firstname = data.firstname;
+	this.surname   = data.surname;
+
+	this._displayUser();
+	this.menu.update();
+}
+
+User.prototype._displayUser = function() {
+	if (this.isEmpty()) {
+		this.userElement.empty().append("not logged in");
+	} else {
+		if ("" == this.firstname || "" == this.surname) {
+			this.userElement.empty().append(this.username);
+		} else {
+			this.userElement.empty()
+				.append(this.firstname + " " + this.surname);
+		}
+	}
+}
+
+// vim: set ts=4 sw=4: