var intervalId = 0;
var intervalTime = 3000;
var scrollDuration = 800;
var images = [];
var imageIndex = 0;
var imageWidth;
var pageX = -1;
var pxSpan = 50;

var det = {
	active: 0,
	interval: 0,
	index: 0,
	rotatePeriod: 4000,
	fadePeriod: 800
};
	
$(window).load(function () {
	files = jxo("ls.php", { path: "catalogue" });
	scrollinf("#viewport") ;
	$("#footer li.click").click(showTopic);
	if (BrowserDetect.OS == "Windows") {
		$("#slogan, #footer")
			.css("font-family", "Papyrus, PapyrusWindows")
			.css("font-size", "12pt");
	}
	if (BrowserDetect.browser == "Explorer") {
		$("#credits").css("font-family", "Arial");
		$("#credits").css("top", "280px");
		$("#credits").css("left", "20px");
	}
});

function scrollinf(div) {
	var mask = $("<div />").addClass("mask");
	mask.append($("<img id='nav-left' src='arrow-left.gif' />"));
	var mc = $("<div />").addClass("mask-container left");
	mc.append(mask);
	$(div).append(mc);

	mask = $("<div />").addClass("mask");
	mask.append($("<img id='nav-right' src='arrow-right.gif' />"));
	mc = $("<div />").addClass("mask-container right");
	mc.append(mask);

	mask = $("<img id='mask' src='mask.loading.jpg' />");
	var control = $("<div id='control' />").append(mask);
	control.append($("<p>loading...</p>"));
	mc.append(control);
	$(div).append(mc);

	$(".mask img").hover(function() {
		opacitySet($(this), 1);
		}, function() {
		opacitySet($(this), 0.25);
		}
	);

	$("#nav-left").click(function() {
		clearInterval(intervalId);
		scroll(-1);
	});
	$("#nav-right").click(function() {
		clearInterval(intervalId);
		scroll(+1);
	});

	var strip = $("<div />").attr("id", "strip");
	strip.css("opacity", 0);

	imageWidth = 750; // $(this).width();
	for (i in files["strip"]) {
		var img = $("<img />");
		img.attr("src", files["strip"][i]);
		img.attr("id", i);
		images[i] = img;
		}

	images[2].ready(function() {
		for (var i = 0; i < 3; i++)
			strip.append(images[i]);
		$(div).append(strip);

		var margin = ($("#viewport").width() - imageWidth) / 2;
		$("#strip").css("left", margin - imageWidth);

		$("#strip").fadeTo(3000, 1, function() {
				$("#control p").html("");
				$("#mask").load(function() {
					$("#overlay").click(toggleDetail);
					$("#mask").click(toggleDetail);
					intervalId = setInterval("scroll()", intervalTime);
				});
				$("#mask").attr("src", "mask.png");
		});
	});

	$("#overlay").mousemove(function (event) {
		if (det.active) return;
		clearInterval(intervalId);
		if (pageX == -1) pageX = event.pageX;
		var diff = event.pageX - pageX;
		if (Math.abs(diff) > pxSpan) {
			scroll(diff < 0 ? -1 : 1);
			pageX = event.pageX;
			}
	});
}

function mod(i, n) {
	return (i + n) % n;
}

function scroll(lr) {
	if (!lr) lr = 1;

	var i = imageIndex;
	imageIndex = mod(i + lr, images.length);

	if (lr > 0) {
		var r = mod(i + 3, images.length);
		$("#strip").append(images[r].width("auto"));
		i = $("#strip img:last").index() - 3;
		$("#strip img:eq(" + i + ")").animate(
			{ width: 0 }, scrollDuration, function() {
			$(this).remove();
			}
		);
	}

	function rm_closure(elem) {
		return function() {
			// ">rm: {0}".status(elem.attr("id"));
			elem.remove();
			}
	}
	if (lr < 0) {
		i = mod(i - 1, images.length);
		$("#strip").prepend(images[i].width(0));
		var last = $("#strip img:eq(3)");
		$("#strip img:first").animate(
			{ width: imageWidth }, scrollDuration,
			rm_closure(last)
		);
	}
}

var rotateDetail = function() {
	var i = mod(imageIndex + 1, images.length);
    var n = files["det"][i].length;
    var img = $("#detail img");
    img.animate({ opacity: 0 }, {
		duration: 'slow',
		complete: function() {
        	det.index = mod(det.index + 1, n);
        	img.attr("src", files["det"][i][det.index]);
		}
    });
};

function opacitySet(o, val) {
	o.css("opacity", val);
	o.css("-moz-opacity", val);
	o.css("-khtml-opacity", val);
	o.css("filter", "alpha(opacity=" + (val * 100) + ")");
}

function toggleDetail() {
	if (det.active == 1) {
        clearInterval(det.interval);
        $("#overlay").animate({ opacity: 0 }, { duration: 1000 });
		$("#overlay").css("zIndex", "0");
		det.active = 0;
		return;
	}

	det.active = 1;
	var i = mod(imageIndex + 1, images.length);
	var s = "<div id='detail'><div id='imgs' />" + files["desc"][i] + "</div>";
    $("#overlay").html(s);
	if (BrowserDetect.OS == "Windows") {
		$("#detail p")
			.css("font-family", "Papyrus, PapyrusWindows")
			.css("font-size", "11pt")
			.css("width", "265px")
			.css("line-height", "140%")
			.css("top", "3.5em");
	}
	if (BrowserDetect.browser == "Explorer") {
		$("#detail p").css("font-size", "12pt");
	}

	var imgs = $("#detail #imgs");
	for (var j = 0; j < files["det"][i].length; j++)
		imgs.append($('<img src="' + files["det"][i][j] + '" />'));
	imgs.cycle({
		fx: 'fade',
		pause: 1,
		delay: 2500,
		speed: 2500,
		continuous: 1
	});
	$("#overlay").css("zIndex", "2");
    $("#overlay").animate({ opacity: 1 }, { duration: 1000 });
    }

function _toggleDetail() {
	if (det.active == 1) {
        clearInterval(det.interval);
        $("#overlay").animate({ opacity: 0 }, { duration: 1000 });
		det.active = 0;
		return;
	}

	det.active = 1;
	var i = mod(imageIndex + 1, images.length);
	var s = "<div id='detail'><img />" + files["desc"][i] + "</div>";
    $("#overlay").html(s);
	var img = $("#detail img");
	img.attr("src", files["det"][i][det.index = 0]);
	img.load(function() {
		img.animate(
			{ opacity: 1 },
			{ duration: 'slow' }
		);
	});
    $("#overlay").animate({ opacity: 1 }, { duration: 1000 });
    det.interval = setInterval(rotateDetail, det.rotatePeriod);
    }

function showTopic() {
	det.active = 1;
	var fn = $(this).text().replace(/[ ']/g, "").toLowerCase();
	if (fn == "thecollection") {
		$("#overlay").animate({ opacity: 0 }, { duration: 'slow' });
		$("#overlay").css("zIndex", "0");
		det.active = 0;
	}
	else {
		$("#overlay").load(fn + ".html", function() {
			if (BrowserDetect.OS == "Windows") {
				$("#about p, #contact p")
					.css("font-family", "Papyrus, PapyrusWindows")
					.css("font-size", "12pt");
			}
			var b = BrowserDetect.browser;
			if (b == "Explorer") {
				$("#about img").css("position", "absolute");
			}
			if (b == "Firefox") {
				$("#about img").css("position", "absolute");
				$("#about img").css("left", "0px");
			}
		});
		$("#overlay").css("zIndex", "2");
		$("#overlay").animate({ opacity: 1 }, { duration: 'slow' });
	}
}

function jxo(url, args) {
	var ret = {};
    var opts = {
        url: url, data: args,
		async: false,
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        success: function(data) { ret = data },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert("Error retrieving data.  " + errorThrown);
        }
    };
    $.ajax(opts);
	return ret;
}

String.prototype.format = function() {
	var ret = String(this);
	if (typeof arguments[0] == "object")
		arguments = arguments[0];
	var j = 0;
	for (i in arguments) {
		if (this == arguments[i]) continue;
		ret = ret.replace("{" + j++ + "}", arguments[i]);
		}
	return ret;
	}

String.prototype.status = function() {
	var s = this.format(arguments);
	if (s.substr(0, 1) == "<")
		$("#status").prepend(s.substr(1) + "<br/>");
	else if (s.substr(0, 1) == ">")
		$("#status").append("<br/>" + s.substr(1));
	else
		$("#status").html(s);
	}