$(function() {
	function update() {
		var $a = $("#rectA")[0].style;
		var $b = $("#rectB")[0].style;
		var a = {
			x1: parseInt($a.left) - 2,
			y1: parseInt($a.top) - 2,
			x2: parseInt($a.left) + parseInt($a.width) + 2,
			y2: parseInt($a.top) + parseInt($a.height) + 2
		};
		var b = {
			x1: parseInt($b.left) - 2,
			y1: parseInt($b.top) - 2,
			x2: parseInt($b.left) + parseInt($b.width) + 2,
			y2: parseInt($b.top) + parseInt($b.height) + 2
		};

		var comp0 = a.x1 < b.x2;
		var comp1 = a.x2 > b.x1;
		var comp2 = a.y1 < b.y2;
		var comp3 = a.y2 > b.y1;
		var intersect = comp0 && comp1 && comp2 && comp3;

		$("#comp0").removeClass("" + !comp0).addClass("" + comp0).text(comp0);
		$("#comp1").removeClass("" + !comp1).addClass("" + comp1).text(comp1);
		$("#comp2").removeClass("" + !comp2).addClass("" + comp2).text(comp2);
		$("#comp3").removeClass("" + !comp3).addClass("" + comp3).text(comp3);
		$("#answer").removeClass("" + !intersect).addClass("" + intersect).text(intersect);

		/** /function acolor(b) { return b ? "c00" : "transparent"; };
		function bcolor(b) { return b ? "#00c" : "transparent"; };

		$("#rectA").css({
			borderTopColor: acolor(comp2),
			borderRightColor: acolor(comp1),
			borderBottomColor: acolor(comp3),
			borderLeftColor: acolor(comp0)
		});

		$("#rectB").css({
			borderTopColor: bcolor(comp3),
			borderRightColor: bcolor(comp0),
			borderBottomColor: bcolor(comp2),
			borderLeftColor: bcolor(comp1)
		});/**/
	}

	update();

	var area_offset = $("#intersection_area").offset();

	$('#intersection_area .rect').bind('drag', function(event) {
		$(this).css({
			top: event.offsetY - area_offset.top,
			left: event.offsetX - area_offset.left
		});
		update();
	});
});