var canvas = false;
var slider1 = false;
var slider2 = false;
var slider3 = false;
var slider4 = false;
var slider5 = false;
var color = "#36c";
var margin = 5;

function draw() {
	var w = slider1.value;
	var ratio = slider2.value;
	var padding = slider3.value;
	var width = slider4.value;
	var rotation = slider5.value;
	
	$("val_1").innerHTML = w + "px";
	$("val_2").innerHTML = ratio + "%";
	$("val_3").innerHTML = padding + "%";
	$("val_4").innerHTML = width + "%";
	$("val_5").innerHTML = rotation + "°";

	if (canvas) { OAT.Dom.unlink(canvas); }
	canvas = OAT.SVG.canvas(w+2*margin,w+2*margin);
	canvas.setAttribute("xmlns:xlink","http://www.w3.org/1999/xlink");
	$("content").appendChild(canvas);

	var defs = OAT.SVG.element("defs");
	OAT.Dom.append([canvas,defs]);
	
	/* gradient */
	var g = OAT.SVG.element("radialGradient",{id:"grad",cx:"50%",cy:"50%",r:"50%"});
	var s1 = OAT.SVG.element("stop",{"stop-color":"orange",offset:"0%"});
	var s2 = OAT.SVG.element("stop",{"stop-color":"yellow",offset:"100%"});
	
	OAT.Dom.append([g,s1,s2],[defs,g]);
	
	/* count */
	var cx = w/2;
	var cy = w/2;
	var r = (w / 2 * ratio / 100) - (w / 2 * padding / 200); 
	var length = (w / 2 * (1- ratio / 100)) - (w / 2 * padding / 200); 
	var swidth = width/200 * w;
	

	/* shaft #1 */
	var s1 = OAT.SVG.element("rect",{x:0,y:0,width:swidth,height:length,id:"s1",fill:"yellow",stroke:"black","stroke-width":"1px"});

	/* shaft #2 */
	var x = swidth/2;
	var s2 = OAT.SVG.element("polygon",{points:"0,0 "+x+","+x+" "+swidth+",0 "+swidth+","+length+" 0,"+length,id:"s2",fill:"yellow",stroke:"black","stroke-width":"1px"});
	OAT.Dom.append([defs,s1,s2]);
	
	var bg = OAT.SVG.element("rect",{x:0,y:0,width:"100%",height:"100%",fill:color});
	var group = OAT.SVG.element("g",{transform:"translate(5 5) rotate("+rotation+" "+cx+" "+cy+")"});
	/* center */
	var center = OAT.SVG.element("circle",{cx:cx,cy:cy,r:r,fill:"url(#grad)",stroke:"black","stroke-width":"1px"});
	group.appendChild(center);
	

	/* instances */
	var u1 = OAT.SVG.element("use",{transform:"translate("+(cx-swidth/2)+",0)"});
	u1.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#s2");

	var g2 = OAT.SVG.element("g",{transform:"translate("+(cx+swidth/2)+","+(w)+")"});
	var u2 = OAT.SVG.element("use",{transform:"rotate(180)"});
	u2.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#s2");

	var g3 = OAT.SVG.element("g",{transform:"translate("+w+","+(cx-swidth/2)+")"});
	var u3 = OAT.SVG.element("use",{transform:"rotate(90)"});
	u3.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#s2");

	var g4 = OAT.SVG.element("g",{transform:"translate(0,"+(cx+swidth/2)+")"});
	var u4 = OAT.SVG.element("use",{transform:"rotate(270)"});
	u4.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#s2");

	OAT.Dom.append([group,u1,g2,g3,g4],[g2,u2],[g3,u3],[g4,u4]);

	var x = cx + (1/Math.sqrt(2)) * (w/2 - swidth/2);
	var y = cx - (1/Math.sqrt(2)) * (w/2 + swidth/2);
	var g1 = OAT.SVG.element("g",{transform:"translate("+x+","+y+")"});
	var u1 = OAT.SVG.element("use",{transform:"rotate(45)"});
	u1.setAttributeNS("http://www.w3.org/1999/xlink","href","#s1");

	var x = cx - (1/Math.sqrt(2)) * (w/2 - length + swidth/2);
	var y = cx + (1/Math.sqrt(2)) * (w/2 - length - swidth/2);
	var g2 = OAT.SVG.element("g",{transform:"translate("+x+","+y+")"});
	var u2 = OAT.SVG.element("use",{transform:"rotate(45)"});
	u2.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#s1");

	var x = cx - (1/Math.sqrt(2)) * (w/2 - length - swidth/2);
	var y = cx - (1/Math.sqrt(2)) * (w/2 - length + swidth/2);
	var g3 = OAT.SVG.element("g",{transform:"translate("+x+","+y+")"});
	var u3 = OAT.SVG.element("use",{transform:"rotate(135)"});
	u3.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#s1");

	var x = cx + (1/Math.sqrt(2)) * (w/2 + swidth/2);
	var y = cx + (1/Math.sqrt(2)) * (w/2 - swidth/2);
	var g4 = OAT.SVG.element("g",{transform:"translate("+x+","+y+")"});
	var u4 = OAT.SVG.element("use",{transform:"rotate(135)"});
	u4.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","#s1");

	OAT.Dom.append([group,g1,g2,g3,g4],[g1,u1],[g2,u2],[g3,u3],[g4,u4]);
	
	OAT.Dom.append([canvas,bg,group]);

	var str = OAT.Xml.serializeXmlDoc(canvas);
	$("result_ta").value = str.replace(/>/g,">\n");
}

function init() {
	slider1 = new OAT.Slider("slider_1",{minValue:11,maxValue:1001,initValue:201});
	slider1.init();

	slider2 = new OAT.Slider("slider_2",{initValue:45});
	slider2.init();

	slider3 = new OAT.Slider("slider_3",{initValue:10,maxValue:50});
	slider3.init();

	slider4 = new OAT.Slider("slider_4",{initValue:25});
	slider4.init();

	slider5 = new OAT.Slider("slider_5",{minValue:-180,maxValue:180,initValue:0});
	slider5.init();

	slider1.onchange = draw;
	slider2.onchange = draw;
	slider3.onchange = draw;
	slider4.onchange = draw;
	slider5.onchange = draw;

	var c = new OAT.Color();
	var pickRef = function(event) {
		var pos = OAT.Event.position(event);
		c.pick(pos[0],pos[1],function(col) {
			color = col;
			draw();
		});
	};
	OAT.Event.attach("color_select","click",pickRef);
	draw();
}