var num_images = 104;
var photo_dir = '/viewer/photos/';
var thumbs_dir = '/viewer/thumbnails/';
var pd = '#img_viewer';
var current_img = 22;
var loading_img;
var playing = true; 
var change_int;
var seconds_to_change = 3;


$(document).ready(function() {

	// Insert divs
	$(pd).append('<div id="img_loader"><img src="/viewer/images/ajax-loader.gif" /></div><div id="img_fullsize"></div><div id="img_thumbbar"></div><div id="img_ctrlbar"></div><span id="img_pause"></span><span id="img_play" class="over"></span>');
	
	
	// Load up some thumbnails!!
	for(i=1;i<105;i++)
	{
		var th = new Image;
		th.src = thumbs_dir+i+'.jpg';
		$(th).attr('id', 'th_'+i);
		$('#img_thumbbar').append(th);
	}
	
	// Add click events to thumbs
	$('#img_thumbbar img').click(function() {
		// Pause playback
		$('#img_play').css('background-position', 'top left');
		$('#img_pause').css('background-position', 'bottom left');
		playing = false; 
		clearInterval(change_int);
		
		var id = $(this).attr('id').replace('th_', '');
		current_img = id;

		loadImg();
	});
	
	// Add click event to play btn
	$('#img_play').mouseover(function() {
		$(this).css('background-position', 'bottom left');
	}).mouseout (function() {
		if (!playing)
		{
			$(this).css('background-position', 'top left');
		}
	}).click (function() {
		if (!playing)
		{
			$(this).css('background-position', 'bottom left');
			$('#img_pause').css('background-position', 'top left');
			playing = true;
			change_int = setInterval('nextImg()', seconds_to_change * 1000);
		}
	});
	
	
	$('#img_pause').mouseover(function() {
		$(this).css('background-position', 'bottom left');
	}).mouseout(function() {
		if (playing)
		{
			$(this).css('background-position', 'top left');
		}
	}).click (function() {
		if (playing)
		{
			$('#img_play').css('background-position', 'top left');
			$(this).css('background-position', 'bottom left');
			playing = false;
			clearInterval(change_int);
		}
	});
	
	$('#img_play').css('background-position', 'bottom left');
	
	// Load 1st image
	loadImg();
	
});

nextImg = function()
{
	current_img++;
	if (current_img > num_images) {
		current_img = 1;
	}
	
	clearInterval(change_int);
	loadImg();
	//change_int = setInterval('nextImg()', seconds_to_change * 1000);
}

loadImg = function()
{
	$('#img_loader').fadeIn('fast');
	loading_img = new Image;
	loading_img.src = photo_dir+current_img+'.jpg';
	$(loading_img).bind('load', displayImg);
}

// Displays image when loaded
displayImg = function()
{
	$('#img_loader').fadeOut('fast');
	var img = $('#img_fullsize img');
	if (img.length > 0)
	{
		$('#img_fullsize img').fadeOut('fast', function() {
			$(loading_img).attr('style', 'display:none');
			$('#img_fullsize').empty().append(loading_img);
			$('#img_fullsize img').fadeIn('fast');
		});
		
		if (playing)
		{
			change_int = setInterval('nextImg()', seconds_to_change * 1000);
		}
	}
	else
	{
		$(loading_img).attr('style', 'display:none');
		$('#img_fullsize').empty().append(loading_img);
		$('#img_fullsize img').fadeIn('fast');
		
		change_int = setInterval('nextImg()', seconds_to_change * 1000);
	}
}