onDrawLineButtonClick = function()
{
document.getElementById("ColorSelecter").style.visibility="visible"
flg=false
stopFlg=true;
imgorRect="rect";
//MoveableSerface.destroy()
//xStart = 0;
//yStart = 0;
surface.connect("onmousemove", onMouseMove);
surface.connect("onmousedown", onMouseDown);
surface.connect("onmouseup", onMouseUp);
//_down_connect = dojo.connect(surface, "onmousedown", onMouseDown);
//_move_connect = dojo.connect(surface, "onmousemove", onMouseMove);
//_up_connect = dojo.connect(surface, "onmouseup", onMouseUp);
}

onDrawimageButtonClick = function()
{
document.getElementById("ColorSelecter").style.visibility="hidden"
//MoveableSerface.destroy()
surface.connect("onmousemove", onMouseMove);
surface.connect("onmousedown", onMouseDown);
surface.connect("onmouseup", onMouseUp);
imgorRect="img"
imgflg=true
}

onMouseDown = function(event)
{
 
xStart = event.pageX - (leftbarWidth + translateX);//g.matrix.dx;
yStart = event.pageY - (topbarwidth + translateY);//g.matrix.dy;
if (imgorRect=="img")
{
if (imgflg==true)
{
 
img =g.createImage({x: 0, y: 0,width: 25, height: 25, src: "images/" + pinnumber + ".gif"});
new dojox.gfx.Moveable(img);
img.getEventSource().id=num
img.setTransform({ dx: xStart, dy: yStart });
imgflg=false
pinnumber =pinnumber  +1;
}

//img =g.createRect({x: xStart, y: yStart, width: 5 , height: 5 }).setStroke({ color:[255, 0, 0], width:2 });
}
else if (imgorRect=="rect")
{
if (flg==false)
{
//line =g.createRect({x: xStart, y: yStart, width: 5 , height: 5 }).setStroke({ color:[squareBgColor], width:2 });
line =g.createImage({x: xStart, y: yStart,width: 25, height: 25, src: "sp.gif"}).setStroke({ color:[squareBgColor], width:2 });;
//line.setAttribute("border", "10");
//line.setAttribute("stroke", "red");
line.getNode().firstChild.className="square";
line.getNode().firstChild.style.borderColor=squareBgColor;
}
flg=true
}   
//line = g.createLine({x1: xStart, y1: yStart, x2: xStart,   y2: yStart})
//.setStroke({color: "red"})
}

onMouseMove = function(event) {
MoveableSerface= new dojox.gfx.Moveable(g);
MoveableSerface.destroy()
xEnd = event.pageX - (leftbarWidth + translateX);
yEnd = event.pageY - (topbarwidth + translateY);
if (flg==true)
{

if(stopFlg==true)
{
 
g.remove(line)
rectwidth=(xStart-xEnd);

if (rectwidth<0)
rectwidth=-(rectwidth)

rectHeight=(yStart-yEnd);

if (rectHeight<0)
rectHeight=-(rectHeight)

if (rectwidth==0)
rectwidth=1

if (rectHeight==0)
rectHeight=1           
//debugger
//squareBgColor=dojo.gfx.color.hsv2rgb(squareBgColor)

//line =g.createRect({x: xStart, y: yStart, width:rectwidth , height: (rectHeight)}).setStroke({ color:(squareBgColor), width:2 });

line =g.createImage({x: xStart, y: yStart,width:rectwidth , height: rectHeight, src: "sp.gif"}).setStroke({ color:(squareBgColor), width:2 });
line.getEventSource().id=num

//line.setAttribute("border", "10");

//line.setAttribute("stroke", "red");
//setAttribute("className","square")
line.getNode().firstChild.className="square"
line.getNode().firstChild.style.borderColor=squareBgColor;

//line.connect("onmouseover",line,hiliteOver);
//line.connect("onmouseout",line,hiliteOut);//

new dojox.gfx.Moveable(line);
//m2 =new dojox.gfx.Moveable(num);
//var mv=new dojox.gfx.Movable(line);
//m2 = new dojo.dnd.Moveable(num, {delay: 10});
num++
//obj = new dojox.dnd.Moveable("test" + xStart);
//line = g.createLine({x1: xStart, y1: yStart, x2: xEnd, y2: yEnd})
//.setStroke({color: "red"});
//line.setShape({x: xStart, y:yStart}, {x: xEnd, y: yEnd});
}
}
 
}

onMouseUp = function(evt) {
//MoveableSerface= new dojox.gfx.Moveable(g);
stopFlg=false
surface.disconnect("onmousemove", onMouseMove);
surface.disconnect("onmousedown", onMouseDown);
surface.disconnect("onmouseup", onMouseUp);

   

}

//onMouseDown = function(event)
//{
//
//xStart = event.pageX - (leftbarWidth + translateX);//g.matrix.dx;
//yStart = event.pageY - (topbarwidth + translateY);//g.matrix.dy;
//img.setTransform({ dx: xStart, dy: yStart });
//}
//onMouseMove = function(event)
//{
//MoveableSerface= new dojox.gfx.Moveable(g);
//MoveableSerface.destroy()
//xEnd = event.pageX - (leftbarWidth + translateX);
//yEnd = event.pageY - (topbarwidth + translateY);
//}