Javascript Manipulating svg Code

This is an example of svg manipulation code : (take from the watches application)

// use for the resize
var size_watch=1;
var size_digit=1;
var size_all=1;
var evtx=0;
// coordonnate of the selection box
var initx;
var inity;
var finalx;
var finaly;
// coordonnate for the translate
var init_move_x;
var init_move_y;

var obj_selected="none";
var mode_selected="none";


function deselect(evt)
{    
    var obj=svgdoc.getElementById("object_box");
    var root=svgdoc.getElementById("rect2244");
    
    if (obj_selected!="none")
    {
        var tmp=svgdoc.getElementById("layer1");
        var tmp1=svgdoc.getElementById("topleft");
        var tmp2=svgdoc.getElementById("topright");
        var tmp3=svgdoc.getElementById("bottomleft");
        var tmp4=svgdoc.getElementById("bottomright");
        
        if (tmp1)
        {
            tmp.removeChild(tmp1);
            tmp.removeChild(tmp2);
            tmp.removeChild(tmp3);
            tmp.removeChild(tmp4);
        }
    }
    
    root.appendChild(obj);
    obj.setAttribute("x",-1000);
    obj.setAttribute("y",-1000);

    mode_selected="none";
    obj_selected="none";
    
    // selection box
    select(evt);
}

function click_watch(evt)
{
    svgdoc.onmouseup=selectWatch;
    if (obj_selected=="all")
    {
        drag(evt);
    }
    else
    {
        if (obj_selected=="watch")
        {
            drag(evt);
        }
    }
}

function selectWatch(evt)
{
    if (obj_selected != "none")
    {
        deselect(evt);
    }
    obj_selected="watch";
    draw_object_box(evt);
    
    if (mode_selected!="resize")
    {
        mode_selected="resize";
        draw_resize_watch(evt);
    }
    else
    {
        if (mode_selected=="resize")
        {
            mode_selected="rotate";
            draw_rotate_watch(evt);
        }
    }
}

function click_digit(evt)
{
    svgdoc.onmouseup=selectDigit;  
    if (obj_selected=="all")
    {
        drag(evt);
    }
    else
    {
        if (obj_selected=="digit")
        {
            drag(evt);
        }
    }
}

function selectDigit(evt)
{
    if (obj_selected != "none")
    {
        deselect(evt);
    }
    obj_selected="digit";
    draw_object_box(evt);
    
    if (mode_selected!="resize")
    {
        mode_selected="resize";
        draw_resize_watch(evt);
    }
    else
    {
        if (mode_selected=="resize")
        {
            mode_selected="rotate";
            draw_rotate_watch(evt);
        }
    }
}

function draw_object_box(evt)
{
    if (obj_selected!="none")
    {
        var obj = svgdoc.getElementById(obj_selected);
        var box = obj.getBBox();
        var newbox = svgdoc.getElementById("object_box");
        var tmp_translate=obj.getAttribute("transform");
        //~ tmp_translate = tmp_translate.substring(0, 19);
    
        newbox.setAttribute("x",box.x);
        newbox.setAttribute("y",box.y);
        newbox.setAttribute("width",box.width);
        newbox.setAttribute("height",box.height);
        newbox.setAttribute("tranform",tmp_translate);
        obj.appendChild(newbox);
    }
}

function draw_resize_watch(evt)
{
    if (obj_selected!="none")
    {
        var obj = svgdoc.getElementById(obj_selected);
        var obj2 = svgdoc.getElementById("all");
        var box = obj.getBBox();
        var arrow = svgdoc.getElementById("arrow");
        
        //~ var tmp_trans_all = obj2.getAttribute("transform");
        //~ if (tmp_trans_all)
        //~ {
        //~ }
        //~ else
        //~ {
            //~ tmp_trans_all="";
        //~ }
        
        var obj = svgdoc.getElementById(obj_selected);
        var tmp_translate=obj.getAttribute("transform");
        //~ tmp_translate = tmp_translate.substring(0, 19);
        tmp_translate+=" translate("+box.x+","+box.y+")";
        
        var obj_topright = arrow.cloneNode(true);
        obj_topright.setAttribute("id","topright");
        obj_topright.setAttribute("transform",tmp_translate+" translate("+box.width+",7) translate(3,0) rotate(45) ");
        
        var obj_topleft = arrow.cloneNode(true);
        obj_topleft.setAttribute("id","topleft");
        obj_topleft.setAttribute("transform",tmp_translate+" translate(5,-5) rotate(-45) ");        
        
        var obj_bottomright = arrow.cloneNode(true);
        obj_bottomright.setAttribute("id","bottomright");
        obj_bottomright.setAttribute("transform",tmp_translate+" translate("+box.width+","+box.height+") translate(-5,3) rotate(135) ");
       
        var obj_bottomleft = arrow.cloneNode(true);
        obj_bottomleft.setAttribute("id","bottomleft");
        obj_bottomleft.setAttribute("transform",tmp_translate+" translate(0,"+box.height+") translate(-5,-6) rotate(-135) ");
        
        var  contents = svgdoc.getElementById("layer1");
        contents.appendChild(obj_topright);
        contents.appendChild(obj_topleft);
        contents.appendChild(obj_bottomright);
        contents.appendChild(obj_bottomleft);
    }
}

function draw_rotate_watch(evt)
{
}

function select(evt)
{
    initx=evt.clientX;
    inity=evt.clientY;
    selec=true;
    
    var selection=svgdoc.getElementById("select_box");
    selection.setAttribute("x",initx);
    selection.setAttribute("y",inity);
    selection.setAttribute("width",1);
    selection.setAttribute("height",1);
    var contents = svgdoc.getElementById("layer1");
    contents.appendChild(selection);
    
    svgdoc.onmousemove = start_select;
    svgdoc.onmouseup = stop_select;
}

function start_select(evt)
{
    if (selec)
    {
        var selection = svgdoc.getElementById("select_box");
        if (initx<evt.clientX)
        {
            var tmp1=evt.clientX-initx;
            selection.setAttribute("width", tmp1);
        }else
        {
            selection.setAttribute("x", evt.clientX);
            selection.setAttribute("width", initx-evt.clientX);
        }
        if (inity<evt.clientY)
        {
            var tmp2=evt.clientY-inity;
            selection.setAttribute("height", tmp2);
        }else
        {
            selection.setAttribute("y", evt.clientY);
            selection.setAttribute("height", inity-evt.clientY);
        }
        finalx=evt.clientX;
        finaly=evt.clientY;
    }
}

function stop_select(evt)
{
    selec=false;
    var obj_tmp=svgdoc.getElementById("select_box")
    obj_tmp.setAttribute("x",-1000);
    obj_tmp.setAttribute("y",-1000);
    
    var tmp=svgdoc.getElementById("watch");
    var tempx=tmp.getAttribute("x");
    var tempy=tmp.getAttribute("y");
    var contain_w=contain(evt, tempx, tempy);
    
    var tmp=svgdoc.getElementById("digit");
    tempx=tmp.getAttribute("x");
    tempy=tmp.getAttribute("y");
    var contain_d=contain(evt ,tempx, tempy);
    
    if (contain_w && contain_d)
    {
        obj_selected="all";
        draw_object_box(evt);
    }
    else
    {
        if (contain_w)
        {
            obj_selected="watch"
            draw_object_box(evt);
        }
        if (contain_d)
        {
            obj_selected="digit";
            draw_object_box(evt);
        }
    }
}

function contain(evt, tempx, tempy)
{
    if (initx<finalx)
    {
        if(tempx>initx && tempx<finalx)
        {  
            if(inity<finaly)
            {
                if(tempy>inity && tempy<finaly)
                {
                    return true;
                }
            }
            else
            {
                if(tempy<inity && tempy>finaly)
                {
                    return true;
                }            
            }
        }
    }
    else
    {
        if(inity<finaly)
        {
            if(tempy>inity && tempy<finaly)
            {
                return true;
            }
        }
        else
        {
            if(tempy<inity && tempy>finaly)
            {
                return true;
            }            
        }
    }
}

function resiz(evt)
{
    resize=true;
    svgdoc.onmousemove = start_resize;
    svgdoc.onmouseup = stop_resize;
}

function start_resize(evt)
{
    if (resize)
    {
        var obj1 = svgdoc.getElementById(obj_selected);
        if (obj_selected == "watch")
        {
            if (evtx<evt.clientX)
            {
                size_watch+=0.02
            }
            else
            {
                if (size_watch>0.5)
                {
                    size_watch-=0.02
                }
            }
            //~ var tmp=obj1.getAttribute("tranform");
            var tmp =" scale("+size_watch+")";
            obj1.setAttribute("transform" , tmp);
            evtx=evt.clientX;
        }
        if (obj_selected == "digit")
        {
            if (evtx<evt.clientX)
            {
                size_digit+=0.02
            }
            else
            {
                if (size_digit>0.5)
                {
                    size_digit-=0.02
                }
            }
            //~ var tmp=obj1.getAttribute("tranform");
            var tmp =" scale("+size_digit+")";
            obj1.setAttribute("transform" , tmp);
            evtx=evt.clientX;
        }
        if (obj_selected == "all")
        {
            if (evtx<evt.clientX)
            {
                size_all+=0.02
            }
            else
            {
                if (size_digit>0.5)
                {
                    size_all-=0.02
                }
            }
            var tmp ="scale("+size_all+")";
            obj1.setAttribute("transform" , tmp);
            evtx=evt.clientX;
        }
    }
}

function stop_resize()
{
    resize=false;
}

function start_drag(evt)
{
    if (move)
    {
        var obj1 = svgdoc.getElementById(obj_selected);
        
        if (obj_selected=="watch")
        {
            var resx_cadre = evt.clientX-125;
            var resy_cadre = evt.clientY-125;
        }
        else
        {
            if (obj_selected=="digit")
            {
                var resx_cadre = evt.clientX-60;
                var resy_cadre = evt.clientY-320;
            }
            else
            {
                var resx_cadre = evt.clientX-400;
                var resy_cadre = evt.clientY-400;
            }
        }
        if (obj_selected == "watch")
        {
            obj1.setAttribute("transform" , "translate("+resx_cadre+","+resy_cadre+") scale("+size_watch+")");
        }
        if (obj_selected == "digit")
        {
            obj1.setAttribute("transform" , "translate("+resx_cadre+","+resy_cadre+") scale("+size_digit+")");
        }
        if (obj_selected == "all")
        {
            obj1.setAttribute("transform" , "translate("+resx_cadre+","+resy_cadre+") scale("+size_all+")");
            //~ obj_w = svgdoc.getElementById("watch");
            //~ obj_d = svgdoc.getElementById("digit");
            //~ var tmp_w = obj_w.getAttribute("transform");
            //~ var tmp_d = obj_d.getAttribute("transform");
            //~ tmp_w += " translate("+resx_cadre+","+resy_cadre+") scale("+size_all+")";
            //~ tmp_d += " translate("+resx_cadre+","+resy_cadre+") scale("+size_all+")";
            //~ obj_w.setAttribute("transform" , "translate("+resx_cadre+","+resy_cadre+") scale("+size_all+")");
            //~ obj_d.setAttribute("transform" , "translate("+resx_cadre+","+resy_cadre+") scale("+size_all+")");
        }
    }
}

function drag(evt)
{  
    init_move_x=evt.clientX;
    init_move_x=evt.clientY;
    
    var tmp=svgdoc.getElementById("layer1");
    var tmp1=svgdoc.getElementById("topleft");
    var tmp2=svgdoc.getElementById("topright");
    var tmp3=svgdoc.getElementById("bottomleft");
    var tmp4=svgdoc.getElementById("bottomright");
    
    if(tmp1)
    {
        tmp.removeChild(tmp1);
        tmp.removeChild(tmp2);
        tmp.removeChild(tmp3);
        tmp.removeChild(tmp4);
    }
    move=true;
    svgdoc.onmousemove = start_drag;
    svgdoc.onmouseup = stop_drag;
}

function stop_drag(evt)
{
    var obj1 = svgdoc.getElementById("watch");
    var obj2 = svgdoc.getElementById("digit");
    
    var transx = init_move_x-evt.clientX;
    var transy = init_move_y-evt.clientY;
    if (obj_selected=="watch")
    {
        obj1.setAttribute("x",evt.clientX+125);
        obj1.setAttribute("y",evt.clientY+125);
    }
    else
    {
        if (obj_selected=="digit")
        {
            obj2.setAttribute("x",evt.clientX);
            obj2.setAttribute("y",evt.clientY);
        }
        else
        {
            obj1.setAttribute("x",evt.clientX);
            obj1.setAttribute("y",evt.clientY);
            obj2.setAttribute("x",evt.clientX);
            obj2.setAttribute("y",evt.clientY);
        }
    }
    
        
    //~ var tmp_all=svgdoc.getElementById("all");
    //~ var tmp_watch=svgdoc.getElementById("watch");
    //~ var tmp_digit=svgdoc.getElementById("digit");
    
    //~ var tmp_trans_all = tmp_all.getAttribute("transform");
    //~ var tmp_trans_watch = tmp_watch.getAttribute("transform");
    //~ var tmp_trans_digit = tmp_digit.getAttribute("transform");
    
    //~ tmp_trans_watch += " "+tmp_trans_all;
    //~ tmp_trans_digit += " "+tmp_trans_all;
    
    //~ tmp_watch.setAttribute("transform",tmp_trans_watch);
    //~ tmp_digit.setAttribute("transform",tmp_trans_digit);
    
    move=false;
    
    var obj_select = obj_selected;
    obj_selected=obj_select;
    draw_resize_watch(evt);
}