var pager =false;
var favTemplate =    $.template('<option value="${id}">${name}</option>');
var msgTemplate =    $.template('<img src="images/linje2.gif" /><table class="message"><tr valign="top"><td class="favorite" rowspan=2><img src="images/favorites/${favorite_image}" alt="${favorite_name}" /></td><td class="name">${name}</td><td class="ts">${ts}</td></tr><tr><td colspan=2><div class="content">${content}</div></td></tr></table>');
var statusTemplate = $.template('<div class="status">Viser melding ${first} til ${last} av totalt ${entries} meldinger</div>');
var formTemplate =   $.template('<div id="form"><form action="cgi/post.cgi" method=post id="messageform"><fieldset><legend>Skriv din melding:</legend><label for=name>Mitt navn:</label><input type="text" name="name" id="name" size=32 /><br/><label for=favorite>Min favoritt i Ostekakeland:</label><select name=favorite onChange="showFavorite(this.value)" id="favorite"></select><br/><img id="favorite_image" src="images/spacer.gif" width=40 height=40/><br/><label for=content>Skriv din hilsen her:</label><textarea name="content" id="content" cols=32 rows=3></textarea><br/><label for=code>Skriv inn engangskode:</label><input type="text" name="code" size=12/><br/><img src="images/captcha/${md5}.png"><input type="hidden" name="md5" value="${md5}"/><input type="hidden" name="action" value="post" /><br/><label for=submit></label><input type="submit" value="Send melding" name="submit" id="submit" class="submit" /></fieldset>');
var ready = 0;
var currentPage = 1;

var Favorites = new Array;

function first() {
	list(1);	
}

function next () {
	if (pager.next_page) {
		list(pager.next_page);
	}
	else {
		return false;
	}
};

function showFavorite (id) {
	$("#favimage").attr({ src: 'images/favorites/' + Favorites[id].image, alt: Favorites[id].name });
	
}

function prev () {
	if(pager.prev_page > 0) {
		list(pager.prev_page);	
	}
	else {
		return false;
	}
};


function showResult(result) {
	if (result.success === 1) {
		first();		
		form();
	}
	else {
		alert(result.error);
	}
}

function list (page) {

var url = 'cgi/messages.cgi?p=' + page + '&ts=' + unixtime();

currentPage = page;
$.getJSON(url,
        function(data){
		 	pager = data.pager;
          	$("#messages").empty();
			$("#status").empty();
			$.each(	data.messages, function( i,message ){
				$("#messages").append( msgTemplate,message );
            });
			$("#status").append( statusTemplate , pager );
        }); 	
};
 
 function post () {
 	
 	
};

function unixtime() {
	var date = new Date;
	return parseInt(date.getTime() / 1000);
}

function loadFavorites(favorites) {
		if(ready == 1) {
			return;
		}
		else {
			$("#favorite").empty();
			$.each( favorites, function(i,favorite) {
				$("#favorite").append( favTemplate,favorite );
				Favorites[favorite.id] = favorite;
			});
			showFavorite(1);
			ready = 1;
		}	

}

function form () {
	var url = 'cgi/post.cgi?' + unixtime();
	$.getJSON(url,
		function(data) {
			loadFavorites(data.favorites);
			$("#messageform").resetForm();
			$("#captcha").attr({ src: 'images/captcha/' + data.md5 + '.png' });
			$("#md5").attr({ value: data.md5 });
			$("#messageform").ajaxForm({ success: showResult, dataType: 'json' });
		}
	);

}
 
 
function mouseover() {
 $("#next").mouseover(function() { this.src = 'images/neste2.jpg'; }).mouseout(function(){ this.src = 'images/neste1.jpg' }).click(function(){ next(); });
 $("#prev").mouseover(function() { this.src = 'images/forrige2.jpg'; }).mouseout(function(){ this.src = 'images/forrige1.jpg' }).click(function(){ prev(); });
}