YUI({filter:"raw"}).use('graphics','dd','event-key','dd-delegate','escape', function (Y){

var myline,

mycurve;

var jsStr = '',

isNewObj,

inpObjName = Y.one('.obj-name'),

objName = inpObjName.get('value'),

pencil = Y.one('#pencil'),

pencilXYTextInput = Y.one('.pencil-xy'),

txtCode = Y.one('#txt-code'),

shiftIsDown = false,

altIsDown = false,

curveInProgress = false,

prevToMethod = 'moveTo', // this is part of a patch for the problem that multiple moveTo commands = lineTo See drag:end

prevX = pencil.getX() - Y.one('#mygraphiccontainer').getX(),

prevY = pencil.getY() - Y.one('#mygraphiccontainer').getY(),

myX,

myY,

cp1X,

cp1Y,

cp2X,

cp2Y,

dd = new Y.DD.Drag({

node: pencil

}),

ddCp = new Y.DD.Delegate({ // dd control points for curves

container: 'body', //The common container

nodes: '.control-point' //The items to make draggable

});

ddCp.on('drag:drag', function(e){

mycurve.clear();

mycurve.moveTo(prevX,prevY);

cp1X = parseInt(Y.one('.cp1').getStyle('left'), 10);

cp1Y = parseInt(Y.one('.cp1').getStyle('top'), 10);

cp2X = parseInt(Y.one('.cp2').getStyle('left'), 10);

cp2Y = parseInt(Y.one('.cp2').getStyle('top'), 10);

mycurve.curveTo(cp1X,cp1Y,cp2X,cp2Y, myX, myY);

mycurve.end();

});

dd.on('drag:mouseDown', function(e){

if(curveInProgress){

finalizeCurve();

}

});

dd.on('drag:start', function(e){

myX = pencil.getX() - Y.one('#mygraphiccontainer').getX();

myY = pencil.getY() - Y.one('#mygraphiccontainer').getY();

if((isNewObj)&&(!shiftIsDown)){

myline.moveTo(myX,myY); //fixes issue of graphics needs a moveTo to start a new object or it won't draw.

isNewObj = false;

}

});

dd.on('drag:drag', function(e){

var myX = pencil.getX() - Y.one('#mygraphiccontainer').getX(),

myY = pencil.getY() - Y.one('#mygraphiccontainer').getY();

pencilXYTextInput.setContent(myX + ',' + myY );

});

dd.on('drag:end', function(e){

var newObjStr = "",

toMethod,

methodStr;

myX = pencil.getX() - Y.one('#mygraphiccontainer').getX();

myY = pencil.getY() - Y.one('#mygraphiccontainer').getY();

if(shiftIsDown){

toMethod = 'moveTo';

if(prevToMethod === 'moveTo'){ // this is part of a patch for the problem that multiple moveTo commands = lineTo

Y.log('double moveto issue') ;

jsStr = jsStr.substring(0, jsStr.lastIndexOf('.moveTo(')) + '.end(); // lastEndMarker';

txtCode.set('value', jsStr);

}

myline.moveTo(myX, myY); //Notice we're using myLine that is defined to do the real drawing

prevToMethod = 'moveTo';

}else if(altIsDown){

mycurve.clear();

mycurve.set('stroke', {opacity:1}); // last resort. set opacity: 0

mycurve.moveTo(prevX,prevY);

cp1X = (10 + prevX + ((myX - prevX) * .33));

cp1Y = (-10 + prevY + ((myY - prevY) * .33));

cp2X = (-10 + prevX + ((myX - prevX) * .66));

cp2Y = (10 + prevY + ((myY - prevY) * .66));

mycurve.curveTo(cp1X,cp1Y,cp2X,cp2Y, myX, myY);

mycurve.end();

Y.one('.cp1').setStyles({left:cp1X, top:cp1Y});

Y.one('.cp2').setStyles({left:cp2X, top:cp2Y});

curveInProgress = true;

Y.all('.control-point').setStyle('visibility', 'visible');

prevToMethod = '';

return; // Do not write code in box. Do not update prevX prevY

}else{

myline.set("stroke", {color: "#f00"});

toMethod = 'lineTo';

myline.lineTo(myX, myY); //Notice we're using myLine that is defined to do the real drawing

prevToMethod = '';

}

if(toMethod === 'moveTo'){

// this is part of a patch for the problem that multiple moveTo commands = lineTo See drag:end

} else{

myline.end();

}

methodStr = '.' + toMethod + '(' + myX + ',' + myY + ');\n' + objName + '.end(); // lastEndMarker';

insertCode(methodStr);

prevX = myX;

prevY = myY;

});

// inserts code into text area

var insertCode = function(methodStr){

jsStr = txtCode.get('value');

jsStr = jsStr.replace(/(.end\(\); \/\/ lastEndMarker)/g, methodStr);

txtCode.set('value', jsStr);

txtCode.select();

}

var finalizeCurve = function(){

// draw myline where mycurve was

var methodStr;

myline.moveTo(prevX,prevY);

myline.curveTo(cp1X,cp1Y,cp2X,cp2Y, myX, myY);

myline.end();

// try to clear mycurve, FIXME

mycurve.clear();

mycurve.set('stroke', {opacity:0}); // set opacity 0

mycurve.end();

toMethod = 'curveTo';

Y.all('.control-point').setStyle('visibility', 'hidden');

methodStr = '.' + toMethod + '(' + cp1X + ',' + cp1Y + ',' + cp2X + ',' + cp2Y + ',' + myX + ',' + myY + ');\r\n' + objName + '.end(); // lastEndMarker';

insertCode(methodStr);

prevX = myX;

prevY = myY;

curveInProgress = false;

}

Y.on('keydown', function(e){

if(e.shiftKey){

shiftIsDown = true; // This will be a myLine.moveTo

//Y.one('.pencil-img-container').addClass('pencil-img-container-moving'); // doesn't work in IE6

Y.one('.pencil-img-container').setStyle('backgroundPosition', '-46px 0');

}else if(e.altKey){

altIsDown = true; // triggers a curve line

}

},document);

Y.on('keyup', function(e){

shiftIsDown = false; // This will be a myLine.lineTo

altIsDown = false; // Will this cause bug if multiple keys are down?

//Y.one('.pencil-img-container').removeClass('pencil-img-container-moving'); // doesn't work in IE6

Y.one('.pencil-img-container').setStyle('backgroundPosition', '0 0');

},document);

// when user changes the object name in the input box "Graphic Object Name"

Y.on('change', function(){

if(inpObjName.get('value') !== objName){

myX = pencil.getX() - Y.one('#mygraphiccontainer').getX();

myY = pencil.getY() - Y.one('#mygraphiccontainer').getY();

jsStr = jsStr.replace(/(\/\/ lastEndMarker)/g, '\r\n\r\n');

if(prevToMethod === 'moveTo'){ // this is part of a patch for the problem that multiple moveTo commands = lineTo

Y.log('double moveto issue on new obj creation') ;

jsStr = jsStr.substring(0, jsStr.lastIndexOf('.moveTo(')) + '.end();\r\n\r\n'; // remove the last moveTo because a new object is being created

}

jsStr += makeStrForNewObject();

txtCode.set('value', jsStr);

myline.end();

txtCode.select();

}

},inpObjName);

var makeStrForNewObject = function(){

objName = Y.Escape.html(inpObjName.get('value'));

var newLine = '\r\n',

newObjStr = newLine + 'var ' + objName +

' = mygraphic.addShape({' + newLine +

' type: "path",' + newLine +

' stroke: {' + newLine +

' weight: 2,' + newLine +

' color: "#00dd00"' + newLine +

' },' + newLine +

' fill: {' + newLine +

' type: "linear",' + newLine +

' stops: [' + newLine +

' {color: "#cc0000", opacity: 1, offset: 0},' + newLine +

' {color: "#00cc00", opacity: 0.3, offset: 0.8}' + newLine +

' ]' + newLine +

' }' + newLine +

'});' + newLine +

objName + '.moveTo(' + prevX + ',' + prevY + ');' + newLine +

objName + '.end(); // lastEndMarker' + newLine +

'';

return newObjStr;

}

// init code gen box

jsStr += makeStrForNewObject();

Y.one('#txt-code').set('value', jsStr);

var mygraphic = new Y.Graphic();

mygraphic.render("#mygraphiccontainer");

function loadGraphics(e)

{

// line object reused for all lines

myline = mygraphic.addShape({

type: "path",

stroke: {

weight: 1,

color: "#ff0000",

opacity: 1

}

});

myline.moveTo(200, 200);

myline.end();

// curve object reused for all curve

mycurve = mygraphic.addShape({

type: "path",

stroke: {

weight: 1,

color: "#f00",

opacity: 1 //,

//dashstyle: [3,3]

}

});

mycurve.moveTo(200, 200);

mycurve.lineTo(208, 208);

mycurve.clear();

mycurve.end();

}

loadGraphics();

});