var $scrollsize = 460;
var $scrollwidth = 96;
var $scrollorient = "v";
var $slidersize = 380;
var $sliderspacing = -3;

var $length;
var $lastSlideValue = 0;
var $space = 0;
var $item_number = 0;
var $dur;
var $val;
var $cpos;
var $current_image_id = 0;
var $current_over_id = 0;
var $scroll_items;
var images = [];
var widths = [];
var heights = [];
var handler;
var $gallery;
var $slideshow_status;
//$(document).ready(function(){
//	makeGallery('EandJ', 'thumbnails');
//});


function onSlide($pos, $smooth)
{
	if($scrollorient == "v") $pos = $slidersize - $pos;
	$dur = Math.round(Math.abs($pos - $lastSlideValue) * 2);
	$lastSlideValue = $pos;
	$space = $length - $scrollsize;
	$pos = Math.round(($pos / $slidersize) * $space);
	$val = (0 - $pos) + 11;
	if($smooth > 0) $dur = $smooth;
	if($scrollorient == "h") $(".scroll-area").animate({'left' : + $val + "px"}, $dur);
	else $(".scroll-area").animate({'top' : + $val + "px"}, $dur);
}

function makeGallery(gallery, $thumbnails_id, $handler, $ready)
{
	var $cssfield1, $cssfield2, $cssbeginv, $cssbeginh, $cssslidertop, $csssliderleft, $fade1, $fade2, $cssanim;
	slideshow_stop();
		
	$gallery = gallery;
	handler = $handler;
	$current_image_id = 0;
	$current_over_id = 0;
	images = [];
	widths = [];
	heights = [];
	$lastSlideValue = 0;
	$space = 0;
	$item_number = 0;
	$('#' + $thumbnails_id).fadeOut('500');
	if($scrollorient == "v")
	{
		$cssanim = "top";
		$cssfield1 = "height";
		$cssfield2 = "width";
		$startval = $slidersize;
		$cssbeginv = 11;
		$cssbeginh = 0;
		$csssliderleft = ($scrollwidth) + $sliderspacing;
		$cssslidertop = ($scrollsize / 2) - ($slidersize / 2) - 16;
		$fade1 = "t";
		$fade2 = "b";
		$orien = "vertical";
	}
	else
	{
		$cssanim = "left";
		$cssfield1 = "width";
		$cssfield2 = "height";
		$startval = 0;
		$cssbeginh = 11;
		$cssbeginv = 0;
		$csssliderleft = ($scrollsize / 2) - ($slidersize / 2);
		$cssslidertop = $scrollwidth + $sliderspacing;
		$fade1 = "l";
		$fade2 = "r";
		$orien = "horizontal";
	}

	$('#' + $thumbnails_id).html('<div class="scroll-limit" id="scrolllimit"><div class="scroll-area" id="scrollarea"></div></div>'
	+ '<div class="updown"><div id="icon_up" class="ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-n"></div>'
	+ '<div id="slider" class="ui-slider-1 slider" style="margin:5px;"><div class="ui-slider-handle"></div></div>'
	+ '<div id="icon_down" class="ui-state-default ui-corner-all ui-icon ui-icon-triangle-1-s"></div></div>');

	
	$('#' + $thumbnails_id).css($cssfield1, $scrollsize + "px");
	$('#' + $thumbnails_id).css($cssfield2, eval($scrollwidth + 28) + "px");
	$('.scroll-limit').css($cssanim, "-" + $scrollsize + "px");
	$('.scroll-limit').css($cssfield1, $scrollsize + "px");
	$('.scroll-limit').css($cssfield2, $scrollwidth + "px");
	$('.slider').css($cssfield1, ($slidersize) + "px");
	$('.slider').css($cssfield2, "12px");
	if(ie7_fix == true) $('.slider').css("left", ($csssliderleft - 91) + "px");
	else  $('.slider').css("left", $csssliderleft + "px");
	$('.slider').css("top", $cssslidertop + "px");
	$('.scroll-area').css($cssfield2, $scrollwidth + "px");
	$('.scroll-area').css("left", $cssbeginh + "px");
	$('.scroll-area').css("top", $cssbeginv + "px");
	$('#scrolllimit').html($('#scrolllimit').html() + '<div class="fade_' + $fade1 + '"></div><div class="fade_' + $fade2 + '"></div>');

	$('#icon_up, #icon_down').hover(
		function() { $(this).addClass('ui-state-hover'); }, 
		function() { $(this).removeClass('ui-state-hover'); }
	);
	$('#icon_up').click(
		function() { slideshow_stop(); selectPrev(); }
	);
	$('#icon_down').click(
		function() { slideshow_stop(); selectNext(); }
	);

	$length = 1000;
	$lastSlideValue = 0;
	$space = 0;
	$item_number = 0;
	$.get("gallery/gallery.php", { "gallery": gallery },
	  function(data){
		 var thumbs = data.split('|');
		 $scroll_items = thumbs.length;
		 setupScroll(thumbs.length);
		 var $item
		 var pair;
		 for ($item in thumbs) {
			$item_number++;
		 	pair = thumbs[$item].split('*');
			if($item_number == 1) preload(gallery + '/full/' + pair[0]);
			images[$item_number] = pair[1];
			widths[$item_number] = pair[2];
			heights[$item_number] = pair[3];
			scrollAddItem(gallery + '/thumbs/' + pair[0], $item_number);
		 }
		 $('#' + $thumbnails_id).fadeIn(1000);
		 $('#' + $thumbnails_id).fadeIn(1000);
// 		 $('.thumb').ready(function(){ $(this).fadeIn(600);});
		 if($scrollorient == "v") $('.scroll-limit').animate({'top' : "0px"}, 500); else $('.scroll-limit').animate({'left' : "0px"}, 500);
		 if($ready) setTimeout($ready, 200);
	  });
	
	$("#slider").slider({
			"min": 0,
			"max": $slidersize,
			"value": $startval,
			"animate": true,
			"orientation": $orien,
			"slide": function(e, ui){ onSlide(ui.value); }
		});

}
function scrollAddItem(item, id)
{
	$('#scrollarea').html($('#scrollarea').html() + '<div class="box" id="thumb' + id + '"><a href="#" onclick="javascript:thumbClick(' + id + ')" onmouseover="javascript:thumbOver(' + id + ')" onmouseout="javascript:thumbOut(' + id + ')"><img class="thumb" onLoad="javascript:$(this).fadeIn(600);" src="gallery/' + item + '"></a><div class="c_ul"></div><div class="c_ur"></div><div class="c_ll"></div><div class="c_lr"></div></div>');
}
function setupScroll($items)
{
	var $cssfield;
	if($scrollorient == "v") $cssfield = "height"; else $cssfield = "width";
	$length = ($items) * 83 + 35;
	$('.scroll-area').css($cssfield, $length + "px");
}
function thumbClick(id, move)
{
	if(id > $scroll_items) id = 1;
	if(id < 1) id = $scroll_items;
	if($current_image_id != id)
	{
		$('#thumb' + $current_image_id).animate({"width":  "80px", "height":  "80px", "left": "0px", "opacity": 1}, 100);
		$('#thumb' + id).animate({"width":  "86px", "height":  "86px", "opacity": 0.7}, 100);
		$current_image_id = id;
		if(move == true)
		{
			var $newscrollpos = ($length + $scrollsize) / $scroll_items * id - $scrollsize / 2 - 35;
			var $newval = Math.round($slidersize - ($newscrollpos / $length) * $slidersize);
			$dur = 300;
			if($newval > $slidersize) 
			{
				$dur = 800;
				$newval = $slidersize;	
			}
			if($newval < 0)
			{
				$dur = 800;
				$newval = 0;
			}
			$('#slider').slider("value", $newval);
			onSlide($newval, $dur);
		}
		else
		{
			slideshow_stop();
		}
//		alert('preload_next=' + nextImage() +', preload_last=' + prevImage() + ', current=' + currentImage());
		preload(nextImage(), function() {preload(prevImage());});
		handler(currentImage());
	}
}
function thumbOver(id)
{
	if(id != $current_over_id && id != $current_image_id){
		$('#thumb' + $current_over_id).animate({"opacity": 1}, 200);
		$('#thumb' + id).animate({"opacity": 0.5}, 200);
		$current_over_id = id;
	}
}
function thumbOut(id)
{
	if($current_over_id > 0 && $current_image_id != id)
	{
		$('#thumb' + $current_over_id).animate({"opacity": 1}, 200);
	}
	$current_over_id = 0;
}
function selectNext()
{
	thumbClick($current_image_id + 1, true);
}
function selectPrev()
{
	thumbClick($current_image_id - 1, true);
}
function selectFirst()
{
	thumbClick(1, true);
}
function currentImage()
{
	return "gallery/" + $gallery + "/full/" + images[$current_image_id];
}
function currentImage_width()
{
	return widths[$current_image_id];
}
function currentImage_height()
{
	return heights[$current_image_id];
}
function nextImage()
{
	var $nid = $current_image_id + 1;
	if($nid > $scroll_items) $nid = 1;
	return "gallery/" + $gallery + "/full/" + images[$nid];
}
function prevImage()
{
	var $pid = $current_image_id - 1;
	if($pid < 1) $pid = $scroll_items;
	return "gallery/" + $gallery + "/full/" + images[$pid];
}
function slideshow($seconds, $begin)
{
	if($slideshow_status == "go")
	{
		selectNext();
	}
	else if($slideshow_status == "stop")
	{
		$slideshow_status = "";
		return;
	}
	else
	{
		$slideshow_status = "go";
	}
	setTimeout("slideshow(" + $seconds + ", true)", $seconds * 1000);
}
function slideshow_stop()
{
	if($slideshow_status == "go") $slideshow_status = "stop";
}