var sIndex;
var sCategory;

function getCategory(catTitle) {
	var cats = jQuery.grep(sIndex.categories, function(cat) {
		return cat.title == catTitle;
	});
	return cats[0];
}

function getImage(cat, imageIndex) {
	return cat.images[imageIndex];
}

function setImage(cat, imageIndex) {
	var image = getImage(cat, imageIndex);
	showImage(image);
	$("#page").text((imageIndex+1)+" / "+cat.images.length);
	$("#title").text(image.title);
	var prevImage = imageIndex-1;
	if(prevImage < 0)
		prevImage = cat.images.length-1;
	var nextImage = imageIndex+1;
	if(nextImage >= cat.images.length)
		nextImage = 0;
	$("#index").attr("href", "#"+cat.frag+"-index");
	$("#prev").attr("href", "#"+cat.frag+"-"+(prevImage+1));
	$("#next").attr("href", "#"+cat.frag+"-"+(nextImage+1));
}

function orientMain(event) {
	$(this).unbind("preloaded");
	var image = event.data;
	var width = image.width
	var height = image.height;
	if(image.isPortrait) {
		$(this).height(510);
		if(height == 510)
			$(this).width(width);
		else
			$(this).width((width*510)/height);
		$(this).css("bottom", 50);
		$(this).css("right", 50);
	} else {
		$(this).width(570)
		if(width == 570)
			$(this).height(height);
		else
			$(this).height((height*570)/width);
		$(this).css("bottom", 50);
		$(this).css("right", 50);
	}
	$(this).hide();
	$(loadingImg).hide();
	$("#mount").append(this); 
	$(this).fadeIn(100);
}

function showImage(image) {
	$(".frame").remove();
	$("#thumbs").hide();
	showPage("[None]");
	var img = image.img;
	$(img).removeClass("thumb");
	$(img).addClass("frame");

	$(img).bind("preloaded", image, orientMain);
	if(image.preloaded)
		$(img).trigger("preloaded");
	else
		$(loadingImg).show();
}

function setRadio(label) {
	$("a.radio").each(function(i){
		if($(this).text() == label) {
			this.style.color="#000000";
			$(this).hover(function() {
				this.style.color="#000000"
			}, function() {
				this.style.color="#000000"
			})
		} else {
			this.style.color="#CDCDCD";
			$(this).hover(function() {
				this.style.color="#9A9A9A"
			}, function() {
				this.style.color="#CDCDCD"
			})
		}
	});
}

function setCategory(catTitle, index) {
	var cat = getCategory(catTitle);
	if(index == -1) {
		setThumbnails(cat);
		setFooter(false);
	}
	else {
		setImage(cat, index);
		setFooter(true);
	}
	if(catTitle != sCategory) {
		sCategory = catTitle;
		setRadio(catTitle);
	}
}

var imagesRemaining;

function orientThumbnail(event) {
	$(this).unbind("preloaded");
	var image = event.data;
	var width = image.width;
	var height = image.height;
	if(image.isPortrait) {
		$(this).width(89);
		$(this).height((height*89)/width);
		$(this).css("bottom", (((height*89)/width)-89)/2);
		$(this).css("right", 0);
	} else {
		$(this).height(89);
		$(this).width((width*89)/height);
		$(this).css("bottom", 0);
		$(this).css("right", (((width*89)/height)-89)/2);
	}
	imagesRemaining -= 1;
	if(imagesRemaining == 0)
		$("#thumbs").fadeIn(100);
}

function setThumbnails(cat) {
	$(".frame").remove();
	$("#thumbs").hide();
	showPage("[None]");
	var numImages = cat.images.length;
	var numRows = Math.ceil(numImages/6);
	$("#thumbs").empty();
	$("#thumbs").height(92*numRows+3);
	imagesRemaining = numImages;
	for(var i = 0; i < numRows; ++i) {
		var row = document.createElement("div");
		$(row).addClass("thumb-row");
		$("#thumbs").append(row);
		$(row).css("top", i*92);
		var numRowImages = numImages > 6 ? 6 : numImages;
		$(row).width(92*numRowImages+3);
		for(var j = 0; j < numRowImages; ++j) {
			var cell = document.createElement("div");
			$(cell).addClass("thumb-mount");
			$(row).append(cell);
			$(cell).css("left", 92*j+3);
			var imageIndex = i*6+j;
			var a = document.createElement("a");
			$(a).addClass("thumb-link");
			$(a).attr("href", "#"+cat.frag+"-"+(imageIndex+1));
			$(a).click(function() {
		                var hash = this.href;
                		hash = hash.replace(/^.*#/, '');
		                $.history.load(hash);
                		return false;
		        });
			$(cell).append(a);
			var image = cat.images[imageIndex];
			var img = image.img;
			$(img).removeClass("frame");
			$(img).addClass("thumb");
			$(a).append(img);
			$(img).bind("preloaded", image, orientThumbnail);
			if(image.preloaded)
				$(img).trigger("preloaded");
		}
		numImages -= numRowImages;
	}
}

function setFooter(show) {
	if(show) {
		$("#footer").show();
	} else {
		$("#footer").hide();
	}
}

function setTestimonialsFooter(show) {
	if(show) {
		$("#testimonials-footer").show();
	} else {
		$("#testimonials-footer").hide();
	}
}

function setIntro() {
	$("#thumbs").hide();
	showImage(sIndex.image);
	setFooter(false);
	setRadio("[NONE]");
	sCategory = "[NONE]";
}

function showPage(frag) {
	if(frag == "#news")
		$("#news").fadeIn(100);
	else
		$("#news").hide();
	if(frag == "#testimonials-1")
		$("#testimonials-1").fadeIn(100);
	else
		$("#testimonials-1").hide();
	if(frag == "#testimonials-2")
		$("#testimonials-2").fadeIn(100);
	else
		$("#testimonials-2").hide();
	if(frag == "#testimonials-3")
		$("#testimonials-3").fadeIn(100);
	else
		$("#testimonials-3").hide();
	if(frag == "#testimonials-4")
		$("#testimonials-4").fadeIn(100);
	else
		$("#testimonials-4").hide();
	if(frag == "#testimonials-5")
		$("#testimonials-5").fadeIn(100);
	else
		$("#testimonials-5").hide();
	if(frag == "#testimonials-6")
		$("#testimonials-6").fadeIn(100);
	else
		$("#testimonials-6").hide();
	if(frag == "#contact")
		$("#contact").fadeIn(100);
	else
		$("#contact").hide();
	if(frag == "#about")
		$("#about").fadeIn(100);
	else
		$("#about").hide();

	setTestimonialsFooter(frag.match("^#testimonials-"));
}

function setPage(frag, label) {
	$(".frame").hide();
	$(loadingImg).hide();
	$("#thumbs").hide();
	showPage(frag);
	setFooter(false);
	setRadio(label);
	sCategory = "[NONE]";
}

function setAbout() {
	setPage("#about", "ABOUT");
}

function setTestimonials(index) {
	setPage("#testimonials-"+(index+1), "TESTIMONIALS");
	var prevPage = index-1;
	if(prevPage < 0)
		prevPage = 5;
	var nextPage = index+1;
	if(nextPage > 5)
		nextPage = 0;
	$("#testimonials-prev").attr("href", "#testimonials-"+(prevPage+1));
	$("#testimonials-next").attr("href", "#testimonials-"+(nextPage+1));
}

function setContact() {
	setPage("#contact", "CONTACT");
}

function pageLoad(hash) {
	if(hash == "" || hash == "intro")
		setIntro();
	else if(hash == "about")
		setAbout();
	else if(hash.match("^testimonials-")) {
		var index = -1;
		var lastDash = hash.lastIndexOf("-");
		if(lastDash != -1) {
			indexStr = hash.substr(lastDash+1);
			if(!isNaN(indexStr))
				index = indexStr-1;
		}
		setTestimonials(index);
	} else if(hash == "contact")
		setContact();
	else {
		var category = hash;
		var index = -1;
		var lastDash = hash.lastIndexOf("-");
		if(lastDash != -1) {
			indexStr = hash.substr(lastDash+1);
			if(indexStr == "index" || !isNaN(indexStr)) {
				category = hash.substr(0, lastDash);
				if(indexStr != "index")
					index = indexStr-1;
			}
		}	
		if(category == "landscapes")
			category = "LANDSCAPES";
		else if(category == "seascapes")
			category = "SEASCAPES";
		else if(category == "cityscapes")
			category = "CITYSCAPES";
		else if(category == "portraits")
			category = "PORTRAITS";
		else if(category == "pet-portraits")
			category = "PET PORTRAITS";
		else if(category == "products")
			category = "COMMERCIAL";
		else if(category == "weddings")
			category = "WEDDINGS";
		else if(category == "flora")
			category = "FLORA";
		else if(category == "fauna")
			category = "FAUNA";
		else {
			setIntro();
			return;
		}
		setCategory(category, index);
	}
}

$(document).ready(readyfn);

var loadingImg = document.createElement("img");
$(loadingImg).addClass("loading");

function preload(event) {
	var image = event.data;
	image.width = this.width;
	image.height = this.height;
	image.isPortrait = (image.height > image.width);
	image.preloaded = true;
	$(this).trigger("preloaded"); 
}

function createImage(image) {
	image.img = document.createElement("img");
}

function preloadImage(image) {
	$(image.img).bind("load", image, preload);
	image.img.src = image.link;
}

function readyfn() {
	$.getJSON("kati.index", function(data) {
		sIndex = data;
		createImage(sIndex.image);
		$.each(sIndex.categories, function() {
			createImage(this.images[0]);
		});
		$.each(sIndex.categories, function() {
			for(var i = 1, iLimit = this.images.length; i < iLimit; ++i) {
				createImage(this.images[i]);
			}
		});
		preloadImage(sIndex.image);
		
		$.history.init(pageLoad);

		$.each(sIndex.categories, function() {
			preloadImage(this.images[0]);
		});
		$.each(sIndex.categories, function() {
			for(var i = 1, iLimit = this.images.length; i < iLimit; ++i) {
				preloadImage(this.images[i]);
			}
		});
	});
	$("a[@rel='history']").click(function() {
		var hash = this.href;
		hash = hash.replace(/^.*#/, '');
		$.history.load(hash);
		return false;
	});
	$("a").bind("focus", function() {
		if(this.blur)
			this.blur();
	});

	loadingImg.src = "loading.gif";
	$("#mount").append(loadingImg);
}