$(document).ready( function() {
	var paper = Raphael("container", 640, 480);
	var palette = paper.rect(0,0,640,60);
	
	palette.attr({fill:"#eee"});
	var stage = paper.rect(0, 60, 640, 420);
	stage.attr({"stroke-width": "0", "fill": "#b38439"});
	
	var mic = paper.image("microphone2.png", 5, 5, 15, 47);
	//var amp = paper.image("amp.png", 45, 5, 53, 45);
	//var keys = paper.image("keyboard.png", 95, 5, 137, 45);
	
	var selected = null;
	var current = null;
	
	var _clone = function(prototype)
	{
		var theItem = paper.image(
			prototype.attr("href"),
			prototype.attr("x"),
			prototype.attr("y"),
			prototype.attr("width"),
			prototype.attr("height")
		);
		theItem.attr({"angle": 0, "gx": 0, "gy": 0});
		
		current = theItem;
		selected = theItem;
		
		theItem[0].onmousedown = function(e)
		{
			theItem.attr({
				"clickx": e.pageX - parseInt($("#container").css("margin-left"), 10) - theItem.attr("x"),
				"clicky": e.pageY - parseInt($("#container").css("margin-top"), 10) - theItem.attr("y")
			});
			current = theItem;
			selected = theItem;
		}
		
		theItem[0].onmousemove = function(e)
		{
			if(current == theItem) {
				theItem.attr({
					"x": e.pageX - parseInt($("#container").css("margin-left"), 10) - theItem.attr("clickx"),
					"y": e.pageY - parseInt($("#container").css("margin-top"), 10) - theItem.attr("clicky")
				});
			}
		}
		
		theItem[0].onmouseup = function(e)
		{
			current = null;
		}
		
		return theItem;
	}
	
	mic[0].onmousedown = function(e) {
		theMic = _clone(mic);
		theMic[0].onmousedown(e);
	}
	
	
	var current = null;
	stage[0].onmouseup = function(e) {
		current = null;
	};
});