/**
 * TODO add tootips to thumbnails with brief info. TODO Add counts to thumbnails
 * (i.e. "6-12 of 87") TODO Add category and sub-category selection. TODO See
 * gallery.php for other todos.
 */

var tableWidth = 6; // this sets the size of the preview table
var catArray = [];  // array of paintings in selected category
var catMap = [];    // array mapping indices of catArray to indices of paintings array
var imgCount;		// number of currently loading images used to add masks while loading

/* On page load, perform following */
$(function() {
	createArray();
	loadTop(catArray.length - 1);
	loadBottom(catArray.length - 1);
});

/**
 * Create array of paintings in selected category.
 */
function createArray() {
	if (!browse || browse == "all") {
		catArray = paintings;
	} else {
		for (i = 0; i < paintings.length; i++) {
			if (paintings[i][4] == browse) {
				catArray.push(paintings[i]);
				//catMap.push(i);
			}
		}
	}
}



/**
 * Load the top section containing thumbnails.
 * 
 * @param {Number}
 *            num The index of the first painting to be displayed in the row.
 */
function loadTop(num) {
	var topHTML = "<table align='center' border='0'><tr>"

	if (num <= catArray.length - tableWidth) { // add left nav arrow after
		// first row
		topHTML += "<td valign='middle'><a href='javascript:loadTop("
				+ (num + tableWidth)
				+ ")'><img border='0' src='/images/navLeft.jpg'></a></td>";
	}

	if (num < tableWidth) { // print (last) row without right arrow
		for (var i = 0; i <= num; i++) {
			topHTML += "<td valign='middle'><a href='javascript:loadBottom("
					+ (num - i) + ")' title='"+ catArray[num-i][0]+"'><img border='0' src='/paintings/tn/tn"
					+ catArray[num - i][1] + ".jpg'></a></td>";
		}
	}

	else {
		for (var i = 0; i < tableWidth; i++) { // print row and right arrow
			topHTML += "<td valign='middle'><a href='javascript:loadBottom("
					+ (num - i) + ")' title='"+ catArray[num-i][0]+"'><img border='0' src='/paintings/tn/tn"
					+ catArray[num - i][1] + ".jpg'></a></td>";
		}
		topHTML += "<td valign='middle'><a href='javascript:loadTop("
				+ (num - tableWidth)
				+ ")'><img border='0' src='/images/navRight.jpg'></a></td>";
	}

	topHTML += "</tr></table>";

	// TODO mask(hide) topHTML and show waiting message
	$("#galTop")
		.attr({id:'galTop1'})
		.after("<div id='galTop'></div>");
	
	// mask old thumbnails
	mask('#galTop1');	
	
	$("#galTop").hide().html(topHTML);
	imgCount = $('#galTop img').length;
	if (imgCount && !$.browser.opera) {
		$('#galTop img').load(function() {
			imgCount--;
			if (imgCount<1) {
				unmask('#galTop1');
				$('#galTop1').remove();
				$('#galTop').fadeIn(1000);
			}
		}); 
	} else {
		unmask('#galTop1');
		$('#galTop1').remove();
		$('#galTop').fadeIn(1000);
	} 
	// TODO when all images are loaded, unmask topHTML
}



/**
 * Load bottom section of page which includes information about a specific
 * painting.
 * 
 * @param {Number}
 *            num The index of the painting to load.
 */
function loadBottom(num) {
	$("#galBottom #painting").attr('src', "/paintings/" + catArray[num][1] + ".jpg");
	$("#galBottom #title").html(catArray[num][0]);
	$("#galBottom #size").html(catArray[num][2]);
	$("#galBottom #medium").html(catArray[num][3]);
	$("#galBottom #purchase").attr('href', "purchase.shtml?" + catArray[num][1]);
	if (num == catArray.length - 1) {
		$("#prev").attr('href', "javascript:loadBottom(" + (0) + ")");
	} else {
		$("#prev").attr('href', "javascript:loadBottom(" + (num + 1) + ")");
	}

	if (num == 0) {
		$("#next").attr('href', "javascript:loadBottom(catArray.length - 1)");
	} else {
		$("#next").attr('href', "javascript:loadBottom(" + (num - 1) + ")");
	}
}


/**
 * Mask element with selector 'id'.
 * 
 * @param {Object} id DOM element to be masked.
 * @param {Number} speed Speed in milliseconds to fade in mask.
 * @param {Number} opacity Opacity of mask from 0 to 1.
 */
function mask(id, speed, opacity){
	if(!speed) speed = 1;
	if(!opacity) opacity = 0.25;
	
	var maskid = $(id).attr('id') + 'mask';
	var msgid = $(id).attr('id') + 'msg';
	$(id).fadeTo(speed, opacity).after("<div id='"+maskid+"'></div>");
	$('#'+maskid).after("<div id='"+msgid+"'>Loading...</div>");
	
	// Position loading msg
	$('#'+maskid).css({
		position: 'absolute',
		zIndex: 500,
		left: $(id).offset().left,
		top: $(id).offset().top,
		width: $(id).width(),
		height: $(id).height()
	});
	$('#'+msgid).css({
		position: 'absolute',
		zIndex: 501,
		left: $(id).offset().left + $(id).width()/2 - 150,
		top: $(id).offset().top + $(id).height()/2 - 5,
		width: 300,
		height: 100
	});
}


/**
 * Unmask element with selector 'id'
 * 
 * @param {Object} id DOM element to be unmasked.
 * @param {Number} speed Speed in milliseconds to fade out mask.
 */
function unmask(id, speed){
	if(!speed) speed = 1;
	$(id).fadeIn(speed);
	$('#' + $(id).attr('id')+'mask').remove();
	$('#' + $(id).attr('id')+'msg').remove();
}