var lastLoadedInto = "front";
var lastLoadedSrc;
var otInt;
var currentImage = 1;
var numImages = 0;
var mouseX;
var mouseY;
var loading = 0;
var imgWidth = 64;
function initGallery(){
	$("#back").fadeTo(0,0);
	$("#front").fadeTo(0,0);

	numImages = $(".thumb").length;
	
	$(".thumb img").click(thumbClick);
	$("#prev").fadeTo(0,0);
	$("#next").fadeTo(0,0);
	$("#prev").mouseover(overPrev);
	$("#prev").mouseleave(outPrev);
	$("#next").mouseover(overNext);
	$("#next").mouseleave(outNext);
	$("#prev").click(clickPrev);
	$("#next").click(clickNext);
	if(numImages > 12){
		$(document).mousemove(function(e){
			mouseX = e.pageX;
			mouseY = e.pageY;			
		});
		otInt = setInterval(overThumbs,10);
	}
}
function getActiveImage(){
	if(lastLoadedInto == "back"){
		lastLoadedInto = "front";
		return $("#front");
	}else{
		lastLoadedInto = "back";
		return $("#back");
	}
}
function recordMouse(e){
	mouseX = e.pageX;
	mouseY = e.pageY;
}
function overThumbs(e) {
	var offset = $("#thumbnails").offset(),
		w = $("#thumbnails").width(),
		h = $("#thumbnails").height(),
		x = mouseX - offset.left,
		y = mouseY - offset.top,
		xpos = $("#thumbcontainer").css('left'),
		xpos = Number(xpos.replace("px",""));
		
	if (y > 0 && y < h) {
		if(x > 0 && x < 130) {
			xpos += 5;
		} else if (x > w - 130 && x < w) {
			xpos -= 5;
		}

		var thumbs = $('#thumbcontainer').find('div'),
			first = thumbs.filter(":first"),
			last = thumbs.filter(":last"),
			offleft = first.offset().left - offset.left,
			offright = (last.offset().left - offset.left)+imgWidth;
		if (offleft > 0) { 
			first.before(last.detach()); // clone the last thumb to the before the first thumb
			xpos -= imgWidth + 4; // move the box over one image + gap width.. this _should_ look seamless
		} else if (offright < w) { 
			last.after(first.detach());	// vice versa
			xpos += imgWidth - 4;
		}

		$("#thumbcontainer").css('left', xpos+"px");
	}
}
/*
function overThumbs(e){
	var offset = $("#thumbnails").offset();
	var x = mouseX - offset.left;
	var y = mouseY - offset.top;
	var xpos = $("#thumbcontainer").css('left');
	xpos = Number(xpos.replace("px",""));
	if(y > 0 && y < 62){
		if(x > 0 && x < 130){
			xpos += 5;
			if(xpos > 0){
				xpos = 0;
			}
			$("#thumbcontainer").css('left', xpos+"px");
		}else if(x > 788-130 && x < 788){
			xpos -= 5;
			if(xpos < 724-(numImages*66-4)){
				xpos = 724-(numImages*66-4);
			}
			$("#thumbcontainer").css('left', xpos+"px");
		}
	}
}*/

function overPrev(){
	if(currentImage != 1){
		$("#prev").fadeTo(300,1);
	}
}
function outPrev(){
	$("#prev").fadeTo(300,0);
}
function clickPrev(){
	if(currentImage != 1){
		$("#thumb"+(currentImage-1)).click();
	}
}
function overNext(){
	if(currentImage != numImages){
		$("#next").fadeTo(300,1);
	}
}
function outNext(){
	$("#next").fadeTo(300,0);
}
function clickNext(){
	if(currentImage != numImages){
		$("#thumb"+(currentImage+1)).click();
	}
}
function thumbClick(){
	if (loading) return;
	var num = $(this).attr('num');
	var url = $(this).attr('main');
	currentImage = Number(num);
	loadImage(url);
}
function loadImage(URL){
	loading = 1;
	lastLoadedSrc = URL;
	var activeImage = getActiveImage();
	$('<img />').attr('src', URL).load(function(e) {
		loading = 0;
		activeImage.empty();
		activeImage.append(this);
		if(lastLoadedInto == "back"){
			$("#back").fadeTo(300,1);
			$("#front").fadeTo(300,0);
		}else{
			$("#back").fadeTo(300,0);
			$("#front").fadeTo(300,1);
		}
	});
/*
	activeImage.load(URL, function(){
		activeImage.html('<img src="'+URL+'" />');
		if(lastLoadedInto == "back"){
			$("#back").fadeTo(300,1);
			$("#front").fadeTo(300,0);
		}else{
			$("#back").fadeTo(300,0);
			$("#front").fadeTo(300,1);
		}
	});
*/
}

$(function() {
	initGallery();
});