var slideShow = {
	image: null,
	timeout: false,
	page: null,
	baseUrl: null,
	loaded: new Array(),
	xhr: null,
	old: null,

	init: function (baseUrl) {
		var ss = slideShow;
		ss.baseUrl = baseUrl;
		ss.page = $("#page");
		ss.next();
	},

	getData: function () {
		return $.post(
			slideShow.baseUrl + "/service/categories/getHighlightImage",
			{ aspect: $(window).width() / $(window).height(), exclude: slideShow.loaded },
			slideShow.dataLoaded,
			"json"
		);
	},

	dataLoaded: function (data) {
		if (data.maps == undefined) {
			slideShow.loaded = new Array();
			slideShow.getData();
			return;
		}

		var image = new slideShowImage(data);
		slideShow.loaded.push(image.id);
		image.getMap().load();
		slideShow.old = slideShow.image;
		slideShow.image = image;
	},

	next: function () {
		var ss = slideShow;

		// load data
		if (ss.xhr == null) ss.xhr = ss.getData();

		// wait for data to load
		if (ss.xhr.readyState != 4) {
			ss.timeout = setTimeout(ss.next, 500);
			return;
		}

		// wait for image to load
		var map = ss.image.getMap();
		if (!map.loaded) {
			ss.timeout = setTimeout(ss.next, 500);
			return;
		}

		// show image
		if (ss.old == null || ss.old.id != ss.image.id) {
			ss.transition(ss.image, map);
		}
		ss.xhr = null;
		ss.timeout = setTimeout(ss.next, 8000);
	},

	transition: function (img, map) {
		var oldWP = $("div.wallpaper").addClass("old");

		var newWP = $("<div>")
			.addClass("wallpaper")
			.css("backgroundImage", "url(" + map.src + ")")
			.insertBefore(oldWP)
			.hide()
			.fadeIn(1000, function () {
				oldWP.remove()
				var titles = $("<div id='titles'>").appendTo(this);
				if (img.category != null) {
					$("<h2>")
						.append("<a href='" + img.categoryHref + "'>" + img.category + "</a>")
						.appendTo(titles)
						.hide()
						.fadeIn();
				}
				$("<h3>")
					.append("<a href='" + img.galleryHref + "'>" + img.gallery + "</a>")
					.appendTo(titles)
					.hide()
					.fadeIn();
			});
	}
}

function slideShowImage (data) {
	this.id = data.id
	this.category = data.category;
	this.categoryHref = data.categoryHref;
	this.gallery = data.gallery;
	this.galleryId = data.galleryId;
	this.galleryHref = data.galleryHref;
	this.maps = new Array();

	for(i in data.maps) {
		this.maps.push(new map(data.maps[i]));
	}

	this.getMap = function () {
		var map = this.maps[0];
		for (var i = 1; i < this.maps.length; i++) {
			var next = this.maps[i];

			var w = map.width + (next.width - map.width) / 2;
			var h = map.height + (next.height - map.height) / 2;

			if (h > $(window).height() && w > $(window).width()) {
				return map;
			} else map = next;
		}
		return map;
	}
}