//
// init
// ASSUMES "edit/buildLayers.js" is included.
//

var pathSegs = [];

var moveToInstance = null;
var bezierInstance = null;

var cpView = new controlPointView();

var options =
	{
		invertGridTracker:'no',
	};

var editor = null;

function on_mouseMessage(event, el, followOn)
{
	// potential here to dump x,y and use and xy pair instead...
	// lots more rules than this... if el has a border you'll need to take that in to account via el.clientX
	var x = event.clientX - el.offsetLeft;
	var y = event.clientY - el.offsetTop;

	followOn(el,x,y);
}

function on_mouseDown(el,x,y)
{
	// if we didn't click on anything add a new control point instead?
	// keep a stack of these control points innit.
	cpView.down(x,y);
	
//	if (cpView.controlPointHeld != null)
//	{
//		// kinda want a self-referential point.
//		cpView.add(x,y,
//	}
}

function on_mouseUp(el,x,y)
{
	cpView.up(x,y);
}

function on_mouseOver(el,x,y)
{
	// missing functionality - highlighting 'nearest' and 'selected' points
	// note - there may be _many_ selected points.
	cpView.move(x,y);

	cpView.draw(editor.getCpCtx());

	drawCanvasLayer(el);

	drawGrid(el._layers.getGridCtx(),x,y);
}

function drawCanvasLayer(el)
{
	// fuck'in L...
	var ctxCp 	= el._layers.getCpCtx();
	var ctxCanvas 	= el._layers.getCanvasCtx();

	ctxCanvas.clearRect(0,0,400,300);

	ctxCp.clearRect(0,0,400,300);
	cpView.draw(ctxCp);

	ctxCanvas.beginPath();

	var ps = pathSegs;
	for (p in ps)
	{
		ps[p].toApply(ctxCanvas);
	}

	ctxCanvas.stroke();
}

function writeBackControlPoint(x,y,obj)
{
	//
	// isn't JS brilliant.
	// when the canvas elements for bezierCurveTo are redrawn these points have moved
	// even the controlLine stuff works (for now)
	//
	obj.x = x;
	obj.y = y;
}

// this is a load of chog
// I'll need to get back all controlPoints _after_ this controlpoint
// has been set as they can affect each other in 'odd' ways (see rect)
function writeBackPathSegControlPoint(x,y,obj)
{
	obj.model.setControlPoint(obj,x,y);
}

function init()
{
	// if I want width/height around and about the place I'll need
	// to use the editor clientWidth and clientHeight members.
	var eEditor = document.getElementById('editor')

	editor = new layeredEditor(eEditor);
	
	// eh? construct function here?
	eEditor.onmousemove = function(e) { on_mouseMessage(e, eEditor, on_mouseOver); }
	eEditor.onmousedown = function(e) { on_mouseMessage(e, eEditor, on_mouseDown); }
	eEditor.onmouseup = function(e) { on_mouseMessage(e, eEditor, on_mouseUp); }

	pathSegs.push(new _moveTo(200,200));
	pathSegs.push(new _lineTo(300,200));
	pathSegs.push(new _bezierCurveTo(60, 160, 270, 200, 360, 60));

	var ps = pathSegs;
	for (p in ps)
	{
		var cps = ps[p].toControlPoints();
		for (cp in cps) {
			cpView.add(
				cps[cp].x,
				cps[cp].y,
				cps[cp],
				writeBackPathSegControlPoint);
		}
	}

	// there need to be a _much_ better way of doing this
	// the only trouble I can see are control lines that share
	// their points between pathSegs - like control line 1 from
	// a bezier - one line end is at cp1x,cp1y the other is the
	// cursor position left by the previous pathSeg object.
	//
	cpView.addCL(cpView.controlPoints[1], cpView.controlPoints[2]);
	cpView.addCL(cpView.controlPoints[3], cpView.controlPoints[4]);

	drawCanvasLayer(eEditor);
	
	drawGrid(editor.getGridCtx(),200,150);
}