var thumbs 			= []; // AJAX fills it with all the previews
var current 		= {}; // contains info about currently selected photo
var current_count 	= 0;
var current_effect;		  // before or after
var zoom			= 1; // current zoom level : 1 - normal; 2 - zoom x2; 3 - zoom x3
var item			= {};
var scroll_shift	= 0; // increment is two, how much thumbs to skip from the start for filling in the thumbs

function init_thumbs(){
	new Ajax.Request('/gallery/index.cgi',
	{
		method:			'get',
		onSuccess: function(transport){
			var response = transport.responseText || '';
			eval('thumbs = ' + response);
			fillInThumbs(thumbs);
			show_photo(0);
		},
		onFailure: function(transport){ alert("Something went wrong:\n" + transport.responseText) }
	});	
}

function the_photo(src){
	$('gallery').innerHTML = '<img src="' + src + '" border="0" height="271" width="382" id="preview_img">';
}

function show_photo(count) {			
	item = thumbs[count];
	current_count 	= count;
	current_effect	= 'before';
	current 		= item;
	zoom 			= 1;

	reset_sh_border();

	the_photo('/gallery/' + item.before_normal);
	
	$('sh_before').style.borderLeft = '8px solid #363';
	$('sh_before').style.paddingLeft = '4px';
	
	$('sh_normal').style.borderLeft = '8px solid #696';
	$('sh_normal').style.paddingLeft = '4px';
	
	$('sh_after').style.borderLeft = '0';
	$('sh_after').style.paddingLeft = '0';
}

function fillInThumbs(){
	
	// reset it
	$('thumbs_go_here').innerHTML = '';
	
	thumbs.each(function(item, count){
		if((count >= scroll_shift) &&
			(count <= (scroll_shift + 5))
		){
			$('thumbs_go_here').innerHTML = $('thumbs_go_here').innerHTML + 
			'<div>\
				<a class="the-thumb" href="javascript:show_photo(' + count + '); ">\
					<img src="/gallery/' + item.thumb + '" border="0" width="86">\
				</a>\
			</div>\
			';
		}
	});
}

function show_before(){
	// Should stay at same zoom level
	current_effect	= 'before';

	switch(zoom){
		case 1:
			the_photo('/gallery/' + item.before_normal);
		break;
		case 2:
			the_photo('/gallery/' + item.before_zoom2);
		break;
		case 3:
			the_photo('/gallery/' + item.before_zoom3);
		break;
	}
	
	$('sh_before').style.borderLeft = '8px solid #363';
	$('sh_before').style.paddingLeft = '4px';
	
	$('sh_after').style.border = '0';
	$('sh_after').style.paddingLeft = '0';
}

function show_after(){
	current_effect	= 'after';
	
	switch(zoom){
		case 1:
			the_photo('/gallery/' + item.after_normal);
		break;
		case 2:
			the_photo('/gallery/' + item.after_zoom2);
		break;
		case 3:
			the_photo('/gallery/' + item.after_zoom3);
		break;
	}
	
	$('sh_after').style.borderLeft = '8px solid #363';
	$('sh_after').style.paddingLeft = '4px';
	
	$('sh_before').style.border = '0';
	$('sh_before').style.paddingLeft = '0';
}

function show_normal(){
	zoom	= 1;
	if(current_effect == 'before'){
		the_photo('/gallery/' + item.before_normal);
	} else {
		the_photo('/gallery/' + item.after_normal);
	}
	
	reset_sh_border();
	
	$('sh_normal').style.borderLeft = '8px solid #696';
	$('sh_normal').style.paddingLeft = '4px';
}

function show_zoom2(){
	zoom	= 2;
	
	if(current_effect == 'before'){
		the_photo('/gallery/' + item.before_zoom2);
	} else {
		the_photo('/gallery/' + item.after_zoom2);
	}	
	
	reset_sh_border();
	
	$('sh_zoom2').style.borderLeft = '8px solid #696';
	$('sh_zoom2').style.paddingLeft = '4px';
}

function show_zoom3(){
	zoom	= 3;
		
	if(current_effect == 'before'){
		the_photo('/gallery/' + item.before_zoom3);
	} else {
		the_photo('/gallery/' + item.after_zoom3);
	}
	
	reset_sh_border();
	
	$('sh_zoom3').style.borderLeft = '8px solid #696';
	$('sh_zoom3').style.paddingLeft = '4px';
}

function reset_sh_border(){
	['sh_normal', 'sh_zoom2', 'sh_zoom3'].each(function(item){
		$(item).style.border = '0';
		$(item).style.paddingLeft = '0';
	});
}

function scroll_up(){
	if (scroll_shift >= 2) {
		scroll_shift -= 2;
		fillInThumbs();
	}
}

function scroll_down(){
	if ((scroll_shift + 8) <= thumbs.size() ) {
		scroll_shift += 2;
		fillInThumbs();
	}
}