$(function(){
	
	
	var tn_html =  '<div><a href=""><img src="" /></a></div>'
		tn_html += '<div><a href=""><img src="" /></a></div>'
		tn_html += '<span class="up"><a href="#" id="up"><img src="/images/thumb-prev.png" /></a></span>'
		tn_html += '<div class="on"><a href=""><img src="" /></a></div>'
		tn_html += '<span class="down"><a href="#" id="down"><img src="/images/thumb-next.png" /></a></span>'
		tn_html += '<div><a href=""><img src="" /></a></div>'
		tn_html += '<div><a href=""><img src="" /></a></div>';
	$('#tn').html(tn_html);
	
	//create arrays of the thumbnail and images
	var thumbs = [];
	var images = [];
	var margin = [];
	var tn_max_height = 82;
	var margin_top = 0;
	
	$('#thumbnails div').each(function(i){
		thumbs[i] = $(this).find('a').attr('href');
		images[i] = $(this).find('img').attr('src');
		var tn_height = parseInt($(this).find('img').attr('height'));
		if ( tn_height < tn_max_height ) {
			margin_top = Math.round(( ( tn_max_height - tn_height ) / 2));
		}
		else {
			margin_top = 0;
		}
		margin[i] = margin_top;
	});
	
	
	$('#up').click(function(){
		shiftDown();
		loadThumbs();
		return false;
	});
	function shiftUp() {
		thumbs.push(thumbs.shift());
		images.push(images.shift());
		margin.push(margin.shift());
	}
	
	$('#down').click(function(){
		shiftUp();
		loadThumbs();
		return false;
	});
	
	
	function shiftDown() {
		thumbs.splice(0,0,thumbs.pop());
		images.splice(0,0,images.pop());
		margin.splice(0,0,margin.pop());
	}
	
	$('#tn div').click(function(){
		var idx = parseInt($(this).index());
		
		switch(idx) {
			case 0:
				shiftDown();
				shiftDown();
				loadThumbs();
				break;
			case 1:
				shiftDown();
				loadThumbs();
				break;
			
			case 5:
				shiftUp();
				loadThumbs();
				break;
			case 6:
				shiftUp();
				shiftUp();
				loadThumbs();
				break;
		}
		
		return false;
	});
	
	function loadThumbs() {
		for( i = 0; i < 5; i++ ) {
			$('#tn div').eq(i).find('a').attr('href',thumbs[i]);
			$('#tn div').eq(i).find('img').attr('src',images[i]);
			$("#tn div").eq(i).find('img').css('margin-top',margin[i]+'px');
		}
		$('#image img').attr('src',thumbs[2]);
		return false;
	}
	
	loadThumbs();
	
	
	var img_area_height = parseInt($('#image').height());
	function set_big_image_margin() {
		$('#image img').load(function(){
			var big_img_height = $('#image img').height();
			
			if ( big_img_height < img_area_height ) {
				var margin_top = ( img_area_height - big_img_height ) / 2;
				$('#image img').css('margin-top',margin_top+'px');
			}
			
		});	
	}
	set_big_image_margin();
	
});