function pad(num, count) {
	var numZeropad = num + '';
	while(numZeropad.length < count) {
		numZeropad = "0" + numZeropad;
	}
	return numZeropad;
}

function activateThumb(nr) {
	newThumb = $('#th'+nr);
	activeThumb = $('#th'+active);
	
	$(activeThumb).removeClass('active');
	$(activeThumb).children('img')
		.width(images[active].thumb.width)
		.height(images[active].thumb.height)
		.css('marginLeft',0)
		.css('marginTop',0)
		.attr('src', images[active].thumb.url);

	$(newThumb).addClass('active');
	$(newThumb).children('img')
		.width(images[nr].active.width)
		.height(images[nr].active.height)
		.css('marginLeft',(extra/2 + 3) * -1)
		.css('marginTop',(extra/2 + 3) * -1)
		.css('zIndex',ct++)
		.attr('src', images[nr].active.url);
}

function scrollThumbs(dist, time) {

	// wrapper width smaller than thumbs area -> no scroll
	if(ww <= tw) return;
	
	// new pos
	var np = $('#holder').position().left + dist;
	
	// value of np is always negative

	// new pos above zero = white space left
	if(np > 0) np = 0;

	// new pos above wrapper width = white space right
	if(np < ((ww - tw) * -1)) np = (ww - tw) * -1;
	
	$('#holder').animate({ 'left': np }, time);

}


function scrollFwd() { scrollThumbs(dist * -1, time); }
function scrollBack() { scrollThumbs(dist, time); }


function showImage(nr) {

	if(!clips) $('#img_link').html('');
	else $('#content').html('');

	var hp = $('#holder').position().left;
	var tp = $('#th'+nr).position().left;
	
	var maxleft = (-1 * hp) + tw - 40;
	var minleft = (-1 * hp) + 40;
	
	/* 
	alawys centered - doesn't work with the scrolling to an end
	var np = -1 * (tp - hp - tw/2);
	scrollThumbs(np, 100);
	*/
	
	if(tp >= maxleft) scrollThumbs((-1 * ($('#th'+nr).width() + 20)), 100);
	else if(tp < minleft) scrollThumbs(($('#th'+nr).width()), 100);
	
	// if(tp > maxleft) 
	// alert(tp + '/' + maxleft);
	
	activateThumb(nr);
	active = nr;
	$('#img_no').html(pad((nr+1),2));
	if(!clips) {
		var code = '<img src="'+images[nr].main.url+'"  id="theImage" alt="Image '+nr+'">';
		$('#img_link').html(code);
	} else {
		// what to do when there are clips
		code = '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="'+ images[nr].main.width +'" height="'+(images[nr].main.height + 16)+'" >\
<param name="src" value="' + images[nr].main.url + '">\
<param name="autoplay" value="true">\
<param name="type" value="video/quicktime" width="'+ images[nr].main.width +'" height="'+(images[nr].main.height + 16)+'">\
<embed src="' + images[nr].main.url + '" height="'+(images[nr].main.height + 16)+'" width="'+ images[nr].main.width +'" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/">\
</object>';
		$('#content').html(code);
	}
}

// for scrolling
dist = 540; time = 300;

// for thumbs
extra = 26;
ct = 10;
ww = 0;
tw = 0;



$(document).ready(function(){
	
	// we are in a book
	if($('#thumbs').length > 0) {

		initialise(); // load data
		
		/* scrolling thumbs */
		ww = $('#wrap').width();
		tw = $('#thumbs').width();
		
		dist = tw - 100;
		
		// no scrolling when less thumbs than width
		if(ww < tw) { $('a.th_nav').hide(); }
		
		$('#th_next').click(function() { scrollThumbs(dist * -1, time); return false; }); 
		$('#th_prev').click(function() { scrollThumbs(dist, time); return false; });
		

		/* click on thumb */
		$('#thumbs a img').click(function() {
			showImage(parseInt($(this).attr('id').substr(3)));
			return false;
		});
		
		// image navigation
		
		if(active) showImage(active); // none active -> show first
		else showImage(0);
		
		// links
		$('#img_next').click(function(){ if((active+1) < images.length) showImage(active+1); });
		$('#img_prev').click(function(){ if((active-1) >= 0) showImage(active-1); });
		
		// image click
		
		$('#img_link').click(function(e){ 
			var x = e.pageX - $(this).offset().left;
			if(x < 200 && (active-1) >= 0) showImage(active-1);
			else if(x >= 200 && (active+1) < images.length) showImage(active+1);
		});
		
		
		$(document).keydown(function(e){
			if(e.which == 37 && (active-1) >= 0) { // left
				showImage(active-1);
			} else if (e.which == 39 && (active+1) < images.length) { // right
				showImage(active+1);
			}
		});	
		
	}
	
});