currentChar = 0;

$(document).ready(
    function () {
	// Setup hover effect

	var books = ["gold", "ring", "blizzard", "quest", "xavier"];
	for (var i = 1; i < 26; i++) {
	    var book = books[ Math.floor((i - 1) / 5) ];
	    var smallName = "#c" + i;
	    var largeName = smallName + "-large";
	    var small = $(smallName).get(0);
	    var large = $(largeName).get(0);
	    small.idnum = i;
	    small.book = book;
	    large.idnum = i;
	    $(smallName).hover(
		function(e) {
		    if (currentChar != 0) {
			smallName = "#c" + currentChar;
			largeName = smallName + "-large";
			$(largeName).hide();
			$(smallName).show();
			currentChar = 0;
		    }
		    smallName = "#c" + this.idnum;
		    largeName = smallName + "-large";
		    textName = smallName + "-text";
		    $(smallName).hide();
		    $(largeName).show();
		    $("#inner-content").html($(textName).html());
		    $("#inner-title").html(
			'<img src="images/inner-' + this.book + '-title.png" width="175" height="25" alt="" title="">');
		    $("#inner").removeClass("gold ring quest blizzard xavier");
		    $("#inner").addClass(this.book);
		    if (needsPNGFix()) {
			bkgnd1 =
			    $("#inner-header").css("filter").replace(/gold|ring|quest|blizzard|xavier/, this.book);
			bkgnd2 =
			    $("#inner-footer").css("filter").replace(/gold|ring|quest|blizzard|xavier/, this.book);
 			$("#inner-header").css("filter", bkgnd1);
			$("#inner-footer").css("filter", bkgnd2);
		    }
		    currentChar = this.idnum;
		},
		function(e) {
		});
	    $(largeName).hover(
		function(e) {
		},
		function(e) {
		    smallName = "#c" + this.idnum;
		    largeName = smallName + "-large";
		    $(largeName).hide();
		    $(smallName).show();
		    currentChar = 0;
		});
	}

	// Setup text display

	$("#content > ul:first").append(
	    '<div id="inner" class="gold">' +
	    '<div id="inner-header"></div>' +
	    '<div id="inner-content">' +
	    '<p>Move the cursor over a character to learn more about that character.</p>' +
	    '</div>' +
	    '<div id="inner-title"></div>' +
	    '<div id="inner-footer"></div>' +
	    '</div>');

	// Display characters

	displayChar(1);
    });

function displayChar(i)
{
    $("#c" + i).show();
    if (i < 26) setTimeout("displayChar(" + (i+1) + ")", 50);
}