$(document).ready(function() {
	
	var Slider = function() {
		//Init track, handle and angle display
		this.group = canvas.set();
		this.track = canvas.rect(390, 30, 190, 6).attr({"stroke-width":"2","stroke":"#777","fill":"#888","id":"track"});
		this.group.push(this.track);
		this.mid = 480;
		//Move handle to object's current angle
		this.handle = canvas.rect(this.mid,26,10,14);
		this.handle.attr({"stroke-width":"2","stroke":"#666","fill":"#bbb","id":"handle"});
		this.group.push(this.handle);
		this.min = parseInt(this.track.attr("x"));
		this.max = parseInt(this.track.attr("x")) + parseInt(this.track.attr("width")) - parseInt(this.handle.attr("width"));
		this.angle = canvas.text(600,32,"0°").attr({"id":"angle"});
		this.group.push(this.angle);
		this.item_id = canvas.text(390,12,"").attr({"id":"item_id"});
		this.group.push(this.item_id);
		$("#handle").bind("mousedown", this, function(e) {
			e.data.handle.attr("nx",e.pageX);
			$("#palette,#track,#handle").bind("mousemove", e.data, e.data.rotate);
			$("#palette,#track,#handle").bind("mouseup", e.data, function(e) {
				$("#palette,#track,#handle").unbind("mousemove", e.data.rotate);
			});
		});
		//When object is unselected, hide the slider
		this.hide = function() {
			this.selected = null;
			this.group.hide();
		}
		//When object is selected, show the slider
		this.show = function(item) {
			this.selected = item;
			this.handle.attr("x",this.mid + parseInt(this.selected.item.attr("angle"))/2);
			$("#angle").text(this.selected.item.attr("angle")+"°");
			$("#item_id").text("Item: "+this.selected.item.attr("id"));
			this.group.show();
		}
		//Move slider
		this.rotate = function(e) {
			var x = parseInt(e.data.handle.attr("x")) + e.pageX - e.data.handle.attr("nx");
			x = (x < e.data.min) ? e.data.min : x;
			x = (x > e.data.max) ? e.data.max : x;
			e.data.handle.attr({"x":x,"nx":e.pageX});
			var angle = (x - e.data.mid)*2;
			e.data.selected.rotate(angle);
			e.data.selected.item.attr("angle", angle);
			$("#angle").text(angle+'°');
		}
		//initial state: hidden
		this.hide();
	}
	//Tool object for creating items
	var Tool = function(name,img,s_img) {
		this.img = img;
		this.img.attr({"id":name,"ssrc":s_img});
		
		this.clone = function(e) {
			objCount++;
			nsrc = e.data.img.node.getAttributeNS(e.data.img.svg.xlink, "href");
		/*	obj = new Item(
				nsrc,
				parseInt(e.data.img.attr("x")) + 2,
				parseInt(e.data.img.attr("y")) + 2,
				e.data.img.attr("width"),
				e.data.img.attr("height")
			);*/
			obj = new Item(
				nsrc,
				canvas.image(
					nsrc, parseInt(e.data.img.attr("x")) + 2,
					parseInt(e.data.img.attr("y")) + 2,
					e.data.img.attr("width"),
					e.data.img.attr("height")
				)
			);
			obj.item.attr({"angle":0,"id":name + objCount,"nx":e.pageX,"ny":e.pageY,"nsrc":nsrc,"ssrc":e.data.img.attr("ssrc")});
			return obj;
		}
		
		$("#" + name).bind("mousedown", this, function(e) {
			e.data = e.data.clone(e);
			e.data.initMove(e);
		});
	}
	//Item class - a wrapper around items
	var Item = function(href, /*x, y, width, height*/item) {
		//this.item = canvas.image(href, x, y, width, height);
		this.item = item;
		
		//Prepare for movement over the palette
		this.initMove = function(e) {
			$("#palette").bind("mousemove", e.data, e.data.move);
			$("#palette,#"+e.data.item.attr("id")).one("mouseup", e.data, deleteObject);
			//When item is moved over the stage, initialize stage events
			$("#stage").one("mouseover", e.data, e.data.moveOverStage);
		}
		//Init stage handling
		this.moveOverStage = function(e) {
			$("#palette").unbind("mousemove", e.data.move);
			$("#palette,#"+e.data.item.attr("id")).unbind("mouseup", deleteObject);
			$("#stage,#"+e.data.item.attr("id")).unbind("mouseover", e.data.moveOverStage);
			items[e.data.item.attr("id")] = e.data;
			$("#stage").bind("mousedown", e.data, function(e) {
				e.data.deselect(e);
				canvas.slider.hide();
			});
			$('#'+e.data.item.attr("id")).bind("mousedown", e.data, e.data.startMove);
			$("#stage,#"+e.data.item.attr("id")).bind("mouseup", e.data, e.data.stopMove);
			//Delete keys on selected item
			$("html").bind("keypress", function(keyEvent) {
				if((keyEvent.keyCode == 46 || keyEvent.keyCode == 8) && canvas.slider.selected !== null) {
					deleteObject({"data":canvas.slider.selected});
					canvas.slider.hide();
				}
			});
			e.data.startMove(e);
		}
		//Start movement over the stage after selection
		this.startMove = function(e) {
			if(canvas.slider.selected != null) {
				canvas.slider.selected.deselect({"data":canvas.slider.selected});
			}
			e.data.select(e);
			$("#stage").bind("mousemove", e.data, e.data.move);
			canvas.slider.show(e.data);
		}
		//Move the item
		this.move = function(e) {
			e.data.rotate(0 - e.data.item.attr("angle"));
			var x = parseInt(e.pageX)- parseInt($('#'+e.data.item.attr("id")).attr("nx"));
			var y = parseInt(e.pageY) - parseInt($('#'+e.data.item.attr("id")).attr("ny"));
			$('#'+e.data.item.attr("id")).attr({"nx":e.pageX,"ny":e.pageY});
			e.data.item.translate(x,y);
			e.data.rotate(parseInt(e.data.item.attr("angle")));
		}
		//Stop moving the item
		this.stopMove = function(e) {
			$("#stage").unbind("mousemove", e.data.move);
		}
		//Swap image when selected
		this.select = function(e) {
			e.data.item.attr("src",e.data.item.attr("ssrc"));
		}
		//Swap image when deselected
		this.deselect = function(e) {
			e.data.item.attr("src",e.data.item.attr("nsrc"));
		}
		//Rotate the item
		this.rotate = function(deg) {
			return this.item.rotate(deg, true);	//absolute values only
		}
		//Remove the item
		this.remove = function(e) {
			return this.item.remove();
		}
	}
	//Helper function to assist int removing an item and its class wrapper
	deleteObject = function(e) {
		$("#stage").unbind("mouseover",e.data.moveOverStage);
		$("#palette,#stage").unbind("mousemove", e.data.move);
		e.data.remove();
		delete items[e.data.item.attr("id")];
	}
	
	$("#save").bind("click", function(e) {
		var data = [];
		for(i in items) {
			data.push({
				"id":i,
				"x":items[i].item.attr("x"),
				"y":items[i].item.attr("y"),
				"nsrc":items[i].item.attr("nsrc"),
				"ssrc":items[i].item.attr("ssrc"),
				"angle":items[i].item.attr("angle")
			});
		}
		
		JSONstring.compactOutput=true;
		$("#data").val(JSONstring.make(data));
	});
	
	canvas = Raphael("canvas",640,480);
	palette = canvas.rect(0,0,640,60).attr({fill:"#eee","id":"palette"});
	stage = canvas.rect(0,60,640,420).attr({"stroke-width":"0","fill":"#b38439","id":"stage"});
	canvas.slider  = new Slider();
	
	items = [];
	objCount = 0;
	
	tools = [];
	tools["mic"] = new Tool("mic",canvas.image("images/mic.png", 5, 5, 15, 47),"images/mic_s.png");
	tools["amp"] = new Tool("amp",canvas.image("images/amp.png", 25, 5, 50, 48),"images/amp_s.png");
})