$(document).ready(
	function() {
		var paper = Raphael("container", 640, 480);
		var square = paper.rect(320, 240, 20, 20);
		square.attr({
			"fill":"#b34300",
			"id":"square",
			"currentx":parseInt($("#container").css("margin-left"), 10) - square.attr("x"),
			"currenty":parseInt($("#container").css("margin-top"), 10) - square.attr("y")
		});
		
		function startDrag(e) {
			deltax = e.pageX - square.attr("currentx");
			deltay = e.pageY - square.attr("currenty");
			x = parseInt(square.attr("x")) + deltax;
			y = parseInt(square.attr("y")) + deltay;
			square.attr({
				"x":x,
				"y":y,
				"currentx":e.pageX,
				"currenty":e.pageY
			});
			$("#output").html("x:" + x + ", y:" + y);
		}
		
		function stopDrag(e) {
			$("#container").unbind("mousemove", startDrag);
			$("#container").unbind("mouseup", stopDrag);
		};
		
		$("#square").mousedown(function(e) {
			$("#square").attr({
				"currentx":e.pageX,"currenty":e.pageY
			});
			
			$("#container").bind("mousemove", startDrag);
			$("#container").bind("mouseup", stopDrag);
			
		});
		
		$("#rotate").click(function(e) {
			if(this.clicked == "undefined" || this.clicked == 0) {
				this.clicked = 1;
				square.rotate(45);
				$("#rotate").html("Rotate");
			} else {
				this.clicked = 0;
				square.rotate(-45);
				$("#rotate").html("Unrotate");
			}
			
		});
	}
)