// Parallax implementation by chromakode, davean, and Ghiblian.
// Heavily inspired by the awesome Github 404 pages.

img_base = "";

function parallaxComic(comic_json) {
	layers = []
	$.each(comic_json.parallax_layers, function(i, layer) {
		if('c' in layer) { // It is an auto-generated layer
			switch(layer.c) {
				case "frames":
					layers.push({ src: layer.src, z: -60, o: 0.4 })
					layers.push({ src: layer.src, z: 40, o: 0.4 })
					break;
				case "corners":
					for (var z = -50; z < 60; z += 10) {
					layers.push({ src: layer.src, z: z,	o: 0.4 })
					}
					break;
				case "text":
					layers.push({ src: layer.src, z: 0 })
					break;
				case "drawings":
					layers.push({ src: layer.src, z: -20 })
					break;
				default: //Good question, scream loudy and die? We're probably just out of date, time to be retired for a newer model.
					alert("Script is out of date: Unknown layer category type!");
			}
		} else {
			layers.push({ src: layer.src, z: layer.z, o: layer.o })
		}
	});

	return new Parallax($('#logo'), layers, comic_json.alt_text)
}

function page3d() {
	$('body, .menuCont li').each(function() {
		$(this).data('z', 0)
		$(this).data('width', $(this).width())
		$(this).data('height', $(this).height())
	})

	return {
		update: function(rx, ry) {
			$('body, .menuCont li').each(function() {
				var p = parallaxTransform(rx, 0, 0, 0, $(this).data('z'), $(this).data('width'), $(this).data('height'))
				$(this).css({
					'-webkit-transform': 'scale('+p.width/$(this).data('width')+', '+p.height/$(this).data('height')+')',
					'-moz-transform': 'scale('+p.width/$(this).data('width')+', '+p.height/$(this).data('height')+')'
				})
			})
		}
	}
}

function omgitsin3d(comic_json) {
	if (window.location.hash == '#flat') {
		$('#logo').html($('noscript').text())
		return
	}

	var comic = parallaxComic(comic_json)
	function rotate(e) {
		var width = $(this).width(),
			height = $(this).height(),
			touch = e.originalEvent.touches && e.originalEvent.touches[0],
			x = (width / 2 - (e.pageX || touch && touch.pageX))/width/2,
			y = (height / 2 - (e.pageY || touch && touch.pageY))/height/2
		comic.update(x, y)
	}
	$(document)
		.mousemove(rotate)
		.bind('touchmove', rotate)
		.bind('gesturechange', rotate)
}

function parallaxTransform(rx, ry, x, y, z, w, h) {
	var cx = -.5,
		cy = -.5 * h/w,
		result = {}
	result.width = (w + cx * z) * Math.cos(rx)
	result.height = (h + cy * z) * Math.cos(ry)
	result.left = x + (w-result.width)/2 - Math.sin(rx) * z * cx
	result.top = y + (h-result.height)/2 - Math.sin(ry) * z * cy
	return result
}

function Parallax(target, layers, altText) {
	this.target = target
	this.layers = layers
	this.altText = altText;
	this.dim = { width: 0, height: 0 }
	this.create()
}
Parallax.prototype = {
	create: function() {
		this.layers.sort(function(a, b) { return b.z - a.z })
		$.each(this.layers, $.proxy(function(i, layer) {
			layer.el = $('<img>')
				.load($.proxy(function() {
					this.dim.width = Math.max(this.dim.width, layer.width = layer.el.width())
					this.dim.height = Math.max(this.dim.height, layer.height = layer.el.height())
					this.target.css(this.dim)
					this.update(0, 0)
				}, this))
				.attr('src', img_base + layer.src)
				.css({
					position: 'absolute',
					top: 0,
					left: 0,
					opacity: layer.o || 1
				})
				.appendTo(this.target)
		}, this))
		this.layers[this.layers.length - 1].el.attr('title', this.altText);
	},
	update: function(rx, ry) {
		$.each(this.layers, function(i, layer) {
			layer.el.css(parallaxTransform(rx, ry, layer.x || 0, layer.y || 0, layer.z, layer.width, layer.height))
		})
	}
}