// JavaScript Document
$(document).ready(function() {
	renderControls(current);
	changeImage(current);
});

$('#aNext').live('click', function() {
	current++;
	renderControls(current);
	changeImage(current);
});

$('#aPrev').live('click', function() {
	current--;
	renderControls(current);
	changeImage(current);
});

function renderControls(page)
{
	var html = '';
	html += '<div align="center">';
	html += '<table cellspacing="0">';
	html += '<tr><td style="width: 75px; text-align:left;">';
	if(page > 1)
		html += '<a id="aPrev">&lt;&lt; Previous</a>';
	html += '</td>';
	html += '<td style="width: 125px; text-align: center;">Page ' + current + ' of ' + pages + '</td>';
	html += '<td style="width: 75px; text-align: right;">';
	if(page < pages)
		html += ' <a id="aNext">Next &gt;&gt;</a>';
	html += '</td>';
	html += '</tr></table>';
	html += '</div>';
		
	$('div#controls').html(html);
}

function changeImage(current)
{
	var src = dir + current + '.jpg';
	var img = new Image();
	
	$('#imgContainer').css({paddingTop: '375px'}).html('Loading Image...');
	
	$(img).load(function() {
		$('#imgContainer').hide(0, function() {
			$('#imgContainer').html(img).css({paddingTop: '0'});
			$('#imgContainer').fadeIn(500);
		});
	}).attr('src', src);
}