function Panic() {	
	var dragging = null;
	var offset = null;
	
	var img = null;
	var secretData = null;
	var decoderData = null;
	
	this.drag = function(event) {
		dragging = document.getElementById("decoder");
		offset = event.pageY - $(dragging).offset().top;
		document.onmousemove = mouseMove;
		document.onmouseup = mouseUp;
	}
	
	function mouseMove(event) {
		var element = document.getElementById("secret");
		var mouseY = event.pageY - $(element).offset().top - offset;
		mouseY = Math.min(Math.max(mouseY, 4), 350);
		dragging.style.top = mouseY + "px";
		decodeImage(mouseY);
	}
	
	function mouseUp(event) {
		document.onmousemove = null;
		document.onmouseup = null;
		dragging = null;
	}
	
	function imageLoaded(event) {
		secretData = loadData("secret", 4, event.target);
		decoderData = loadData("decoder", 0, null);
		decodeImage(350);
	}
	
	function loadData(id, pad, image) {
		var element = document.getElementById(id);
		var context = element.getContext("2d");
		var width = parseInt(element.getAttribute("width"));
		var height = parseInt(element.getAttribute("height"));
		if(image != null) { context.drawImage(image, 0, 0); }
		return context.getImageData(pad, pad, width-pad*2, height-pad*2);
	}
	
	function decodeImage(y) {
		var element = document.getElementById("decoder");
		var context = element.getContext("2d");
		var width = parseInt(element.getAttribute("width"));
		var height = parseInt(element.getAttribute("height"));
		
		// 4 ints per pixel
		var i = y * width * 4;
		var o = 0;
		for (y = 0; y < height; y++) {
			for (x = 0; x < width; x++) {
				r = secretData.data[i++];
				g = secretData.data[i++];
				b = secretData.data[i++];
				a = secretData.data[i++];
				gb = 255-r;
				decoderData.data[o++] = gb;
				decoderData.data[o++] = gb;
				decoderData.data[o++] = gb;
				decoderData.data[o++] = 255;
			}
		}
		context.putImageData(decoderData, 0, 0);
	}
	
	function loadImage() {
		img = new Image();
		img.onload = imageLoaded;
		img.src = "http://digitalanalog.com/images/panic_promo.png?r=" + Math.random();
	}
	
	this.panic = function() {
		$("#logo").remove();
		$("#imageContainer img").hide();
		$("#imageContainer").append('<canvas id="secret" width="950" height="410" style="position: absolute;"></canvas>');
		$("#imageContainer").append('<canvas id="decoder" width="942" height="56" style="position: absolute; top: 350px; left: 4px; cursor: crosshair;" onMouseDown="panic.drag(event)"></canvas>');
		loadImage();
		return false;
	}
}

var panic = new Panic();