//global variables
    //var elementColor="#c3c3c3";
    var lineColor="#0000ff";
    var k = 1/5; //px top mm ratio
    var q = 0; //px start position on x
    var p = 0; //px start position on y
    var canvasId = "myCanvas";
    var jg = new jsGraphics(document.getElementById(canvasId));
    jg.setPrintable(true);
    var varLegend = "legend";
    var shapeArray=new Array();
    var shapeArrayInst = new Array();
    var strEdges = "";
    var inverseRotationAngle = 1;
    var shIdx = ""; //used when displaying multiple shapes

//specific role functions

    
    function doRotateCW(shape)
    {
        var rot = document.getElementById("txt" + shIdx + "Rot");
        var angleVal = parseInt(rot.value);
        var tetha=90; //rotation degree constant

        angleVal=angleVal + inverseRotationAngle*tetha;

        if(Math.abs(angleVal)>=360)
        {
            angleVal=0;  
        }

        rot.value=angleVal;
        drawShape(shape); 
    }
    
    function doRotateCCW(shape)
    {
        var rot = document.getElementById("txt" + shIdx + "Rot");
        var angleVal = parseInt(rot.value);
        var tetha=90; //rotation degree constant

        angleVal=angleVal - inverseRotationAngle*tetha;
        
        
        
        if(Math.abs(angleVal)>=360)
        {
            angleVal=0;  
        }

        rot.value=angleVal;
        drawShape(shape); 
    }
    
    function flipH(shape)
    {
        var rot = document.getElementById("txt" + shIdx + "Rot");
        var angleVal = parseInt(rot.value);
        inverseRotationAngle=inverseRotationAngle*(-1)
        setFlip("h");
        drawShape(shape); 
    }
    
    function flipV(shape)
    {
        var rot = document.getElementById("txt" + shIdx + "Rot");
        var angleVal = parseInt(rot.value);
        inverseRotationAngle=inverseRotationAngle*(-1)
        setFlip("v");
        drawShape(shape);    
    }
    
    function redraw(shape)
    {
        drawShape(shape);
    }
    
    function drawLayoutInst(shape)//no edges included
    {
        var rot = document.getElementById("txt" + shIdx + "Rot").value;
        var newShape=new createShape("#c3c3c3",rot,shape);
        var E= new Array();
        var ax=0;
        var ay=0;
        
        E=newShape.ElemC;
        
        flipFactorX=newShape.flipfactx;
        flipFactorY=newShape.flipfacty;
        
        var color="#000000";
        jg.setColor(color);
        
        switch(shape)
        {
            //modify E coordinates to accomodate the butt joins/mitre joins
            case "LINE": 
                newShape.drawEdgeAOnly();
                newShape.drawEdgeBOnly();
                newShape.drawEdgeCOnly();
                newShape.drawEdgeDOnly();
               
                ax =Math.min(E[0][0][0],E[0][0][3]) + Math.abs(E[0][0][3]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[0][1][0],E[0][1][3]) + Math.abs(E[0][1][3]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[0]), ax, ay);

                ax = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[1]), ax, ay);                
                
                jg.paint();
            break;
            
            case "L":
                
                newShape.drawEdgeAOnly();
                newShape.drawEdgeBOnly();
                newShape.drawEdgeCOnly();
                newShape.drawEdgeDOnly();
                newShape.drawEdgeEOnly();
                newShape.drawEdgeFOnly();
                jg.setStroke(1);

                if (shapeArrayInst[1] != document.getElementById("txt" + shIdx + "1").value)
                {
                    E[0][0][1]=E[0][0][1] - (E[1][0][1]-E[1][0][0])//Math.abs(E[1][0][1]-E[1][0][0])*cos(rot)*flipFactorX;
                    E[0][1][1]=E[0][1][1] - (E[1][1][1]-E[1][1][0])//Math.abs(E[1][1][1]-E[1][1][0])*sin(rot)*flipFactorY;
                    E[0][0][2]=E[0][0][2] - (E[1][0][1]-E[1][0][0])//Math.abs(E[1][0][1]-E[1][0][0])*cos(rot)*flipFactorX;
                    E[0][1][2]=E[0][1][2] - (E[1][1][1]-E[1][1][0])//Math.abs(E[1][1][1]-E[1][1][0])*sin(rot)*flipFactorY;

                    E[1][0][0]=E[1][0][0] - (E[0][0][2]-E[0][0][1]);
                    E[1][1][0]=E[1][1][0] - (E[0][1][2]-E[0][1][1]);
                    E[1][0][1]=E[1][0][1] - (E[0][0][2]-E[0][0][1]);
                    E[1][1][1]=E[1][1][1] - (E[0][1][2]-E[0][1][1]);
                }      
        
                jg.drawPolygon(E[0][0], E[0][1]);
                jg.drawPolygon(E[1][0], E[1][1]);

                //element1    
                ax =Math.min(E[0][0][0],E[0][0][3]) + Math.abs(E[0][0][3]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[0][1][0],E[0][1][3]) + Math.abs(E[0][1][3]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[0]), ax, ay);

                ax = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[1]), ax, ay);
    
                //element2
                ax = Math.min(E[1][0][1],E[1][0][2]) + Math.abs(E[1][0][1]-E[1][0][2])/2-5+flipFactorX*10*cos(rot);
                ay = Math.min(E[1][1][1],E[1][1][2]) + Math.abs(E[1][1][1]-E[1][1][2])/2-5+flipFactorY*10*sin(rot); 
                jg.drawString(textToLayout("L="+shapeArrayInst[3]), ax, ay);

                ax = Math.min(E[1][0][2],E[1][0][3]) + Math.abs(E[1][0][2]-E[1][0][3])/2-flipFactorX*10*sin(rot);
                ay = Math.min(E[1][1][2],E[1][1][3]) + Math.abs(E[1][1][2]-E[1][1][3])/2-5+flipFactorY*10*cos(rot); 
                jg.drawString(textToLayout("W="+shapeArrayInst[2]), ax, ay);
                
                jg.paint();
            break;
            
            case "U":
                
                newShape.drawEdgeAOnly();
                newShape.drawEdgeBOnly();
                newShape.drawEdgeCOnly();
                newShape.drawEdgeEOnly();
                newShape.drawEdgeFOnly();
                newShape.drawEdgeGOnly();
                newShape.drawEdgeHOnly();
                newShape.drawEdgeIOnly();
                jg.setStroke(1);

                if (shapeArrayInst[1] == document.getElementById("txt" + shIdx + "0").value)
                {
                    E[0][0][2]=E[0][0][2] + (E[2][0][3]-E[2][0][0]);
                    E[0][1][2]=E[0][1][2] + (E[2][1][3]-E[2][1][0]);              
                    E[0][0][3]=E[0][0][3] + (E[2][0][3]-E[2][0][0]);
                    E[0][1][3]=E[0][1][3] + (E[2][1][3]-E[2][1][0]);

                    E[2][0][0]=E[2][0][0] - (E[0][0][3]-E[0][0][2]);
                    E[2][1][0]=E[2][1][0] - (E[0][1][3]-E[0][1][2]);
                    E[2][0][3]=E[2][0][3] - (E[0][0][3]-E[0][0][2]);
                    E[2][1][3]=E[2][1][3] - (E[0][1][3]-E[0][1][2]);
                }

                if (shapeArrayInst[5] == document.getElementById("txt" + shIdx + "4").value)
                {
                    E[1][0][3]=E[1][0][3] + (E[2][0][2]-E[2][0][1]);
                    E[1][1][3]=E[1][1][3] + (E[2][1][2]-E[2][1][1]);              
                    E[1][0][2]=E[1][0][2] + (E[2][0][2]-E[2][0][1]);
                    E[1][1][2]=E[1][1][2] + (E[2][1][2]-E[2][1][1]);

                    E[2][0][1]=E[2][0][1] - (E[1][0][2]-E[1][0][3]);
                    E[2][1][1]=E[2][1][1] - (E[1][1][2]-E[1][1][3]);
                    E[2][0][2]=E[2][0][2] - (E[1][0][2]-E[1][0][3]);
                    E[2][1][2]=E[2][1][2] - (E[1][1][2]-E[1][1][3]);
                } 
                
                jg.drawPolygon(E[0][0], E[0][1]);
                jg.drawPolygon(E[1][0], E[1][1]);
                jg.drawPolygon(E[2][0], E[2][1]);
                
                //element1    
                ax =Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][1]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][1]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[0]), ax, ay);
                
                ax = Math.min(E[0][0][0],E[0][0][3]) + Math.abs(E[0][0][0]-E[0][0][3])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[0][1][0],E[0][1][3]) + Math.abs(E[0][1][0]-E[0][1][3])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[1]), ax, ay);
                
                //element2    
                ax =Math.min(E[2][0][0],E[2][0][3]) + Math.abs(E[2][0][3]-E[2][0][0])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[2][1][0],E[2][1][3]) + Math.abs(E[2][1][3]-E[2][1][0])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[2]), ax, ay);
                
                ax = Math.min(E[2][0][3],E[2][0][2]) + Math.abs(E[2][0][3]-E[2][0][2])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[2][1][3],E[2][1][2]) + Math.abs(E[2][1][3]-E[2][1][2])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[3]), ax, ay);
                
                //element3    
                ax =Math.min(E[1][0][0],E[1][0][1]) + Math.abs(E[1][0][1]-E[1][0][0])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[1][1][0],E[1][1][1]) + Math.abs(E[1][1][1]-E[1][1][0])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[4]), ax, ay);
                
                ax = Math.min(E[1][0][0],E[1][0][3]) + Math.abs(E[1][0][0]-E[1][0][3])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[1][1][0],E[1][1][3]) + Math.abs(E[1][1][0]-E[1][1][3])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[5]), ax, ay);
                
                jg.paint();
            break;
            
            case "G":case "C":
                newShape.drawEdgeAOnly();
                newShape.drawEdgeBOnly();
                newShape.drawEdgeCOnly();
                newShape.drawEdgeEOnly();
                //newShape.drawEdgeFOnly();
                //newShape.drawEdgeGOnly();
                newShape.drawEdgeHOnly();

                //if txt8 disabled  and G case
                if (document.getElementById("txt" + shIdx + "8") == null) {
                    newShape.drawEdgeK2Only();
                    newShape.drawEdgeL2Only();
                }
                else {
                    newShape.drawEdgeIOnly();
                    newShape.drawEdgeJOnly();
                    newShape.drawEdgeKOnly();
                    newShape.drawEdgeLOnly();
                }

                newShape.drawEdgeMOnly();
                newShape.drawEdgeNOnly();
                newShape.drawEdgeOOnly();
                jg.setStroke(1);


                if (shapeArrayInst[1] != document.getElementById("txt" + shIdx + "1").value) {
                    E[0][0][0] = E[0][0][0] - (E[1][0][0] - E[1][0][1]);
                    E[0][1][0] = E[0][1][0] - (E[1][1][0] - E[1][1][1]);
                    E[0][0][3] = E[0][0][3] - (E[1][0][0] - E[1][0][1]);
                    E[0][1][3] = E[0][1][3] - (E[1][1][0] - E[1][1][1]);
                }
                else {
                    E[1][0][0] = E[1][0][0] - (E[0][0][1] - E[0][0][2]);
                    E[1][1][0] = E[1][1][0] - (E[0][1][1] - E[0][1][2]);
                    E[1][0][1] = E[1][0][1] - (E[0][0][1] - E[0][0][2]);
                    E[1][1][1] = E[1][1][1] - (E[0][1][1] - E[0][1][2]);
                }

                if (shapeArrayInst[5] == document.getElementById("txt" + shIdx + "4").value) {
                    E[1][0][2] = E[1][0][2] - (E[2][0][3] - E[2][0][0]);
                    E[1][1][2] = E[1][1][2] - (E[2][1][3] - E[2][1][0]);
                    E[1][0][3] = E[1][0][3] - (E[2][0][3] - E[2][0][0]);
                    E[1][1][3] = E[1][1][3] - (E[2][1][3] - E[2][1][0]);

                    E[2][0][0] = E[2][0][0] - (E[1][0][2] - E[1][0][3]);
                    E[2][1][0] = E[2][1][0] - (E[1][1][2] - E[1][1][3]);
                    E[2][0][3] = E[2][0][3] - (E[1][0][2] - E[1][0][3]);
                    E[2][1][3] = E[2][1][3] - (E[1][1][2] - E[1][1][3]);

                    E[3][0][2] = E[3][0][2] - (E[2][0][2] - E[2][0][1]);
                    E[3][1][2] = E[3][1][2] - (E[2][1][2] - E[2][1][1]);
                    E[3][0][3] = E[3][0][3] - (E[2][0][2] - E[2][0][1]);
                    E[3][1][3] = E[3][1][3] - (E[2][1][2] - E[2][1][1]);
                }

                if (shapeArrayInst[9] > 0 && shapeArrayInst[9] != document.getElementById("txt" + shIdx + "8").value) {
                    E[4][0][1] = E[4][0][1] - (E[3][0][1] - E[3][0][0]);
                    E[4][1][1] = E[4][1][1] - (E[3][1][1] - E[3][1][0]);
                    E[4][0][2] = E[4][0][2] - (E[3][0][1] - E[3][0][0]);
                    E[4][1][2] = E[4][1][2] - (E[3][1][1] - E[3][1][0]);
                }
                else {
                    E[3][0][0] = E[3][0][0] - (E[4][0][0] - E[4][0][3]);
                    E[3][1][0] = E[3][1][0] - (E[4][1][0] - E[4][1][3]);
                    E[3][0][1] = E[3][0][1] - (E[4][0][0] - E[4][0][3]);
                    E[3][1][1] = E[3][1][1] - (E[4][1][0] - E[4][1][3]);
                }

                if (shapeArrayInst[3] != document.getElementById("txt" + shIdx + "2").value && shapeArrayInst[5] != document.getElementById("txt" + shIdx + "4").value && shapeArrayInst[3] != parseFloat(document.getElementById("txt" + shIdx + "2").value) - parseFloat(document.getElementById("txt" + shIdx + "0").value)) {
                    E[2][0][0] = E[2][0][0] - (E[1][0][2] - E[1][0][3]);
                    E[2][1][0] = E[2][1][0] - (E[1][1][2] - E[1][1][3]);
                    E[2][0][3] = E[2][0][3] - (E[1][0][2] - E[1][0][3]);
                    E[2][1][3] = E[2][1][3] - (E[1][1][2] - E[1][1][3]);

                    E[1][0][2] = E[1][0][2] - (E[2][0][3] - E[2][0][0]);
                    E[1][1][2] = E[1][1][2] - (E[2][1][3] - E[2][1][0]);
                    E[1][0][3] = E[1][0][3] - (E[2][0][3] - E[2][0][0]);
                    E[1][1][3] = E[1][1][3] - (E[2][1][3] - E[2][1][0]);
                }

                if (shapeArrayInst[5] != document.getElementById("txt" + shIdx + "4").value && shapeArrayInst[7] == parseFloat(document.getElementById("txt" + shIdx + "7").value) - parseFloat(document.getElementById("txt" + shIdx + "5").value)) {
                    E[3][0][2] = E[3][0][2] - (E[2][0][2] - E[2][0][1]);
                    E[3][1][2] = E[3][1][2] - (E[2][1][2] - E[2][1][1]);
                    E[3][0][3] = E[3][0][3] - (E[2][0][2] - E[2][0][1]);
                    E[3][1][3] = E[3][1][3] - (E[2][1][2] - E[2][1][1]);
                }

                if (document.getElementById("txt" + shIdx + "9") != null) {
                    if (shapeArrayInst[7] == parseFloat(document.getElementById("txt" + shIdx + "7").value) - parseFloat(document.getElementById("txt" + shIdx + "9").value)) {
                        E[2][0][1] = E[2][0][1] - (E[3][0][2] - E[3][0][3]);
                        E[2][1][1] = E[2][1][1] - (E[3][1][2] - E[3][1][3]);
                        E[2][0][2] = E[2][0][2] - (E[3][0][2] - E[3][0][3]);
                        E[2][1][2] = E[2][1][2] - (E[3][1][2] - E[3][1][3]);
                    }
                }
                else {
                    if (shapeArrayInst[7] == parseFloat(document.getElementById("txt" + shIdx + "7").value) - parseFloat(document.getElementById("txt" + shIdx + "5").value)) {
                        E[3][0][2] = E[3][0][2] - (E[2][0][2] - E[2][0][1]);
                        E[3][1][2] = E[3][1][2] - (E[2][1][2] - E[2][1][1]);
                        E[3][0][3] = E[3][0][3] - (E[2][0][2] - E[2][0][1]);
                        E[3][1][3] = E[3][1][3] - (E[2][1][2] - E[2][1][1]);
                    }
                }

                if (shapeArrayInst[7] == parseFloat(document.getElementById("txt" + shIdx + "7").value)) {
                    E[2][0][1] = E[2][0][1] - (E[3][0][2] - E[3][0][3]);
                    E[2][1][1] = E[2][1][1] - (E[3][1][2] - E[3][1][3]);
                    E[2][0][2] = E[2][0][2] - (E[3][0][2] - E[3][0][3]);
                    E[2][1][2] = E[2][1][2] - (E[3][1][2] - E[3][1][3]);
                }

                if (document.getElementById("txt" + shIdx + "8") == null) {
                    E[3][0][0] = E[4][0][1] - (E[3][0][2] - E[3][0][3]);
                    E[3][1][0] = E[4][1][1] - (E[3][1][2] - E[3][1][3]);
                    E[3][0][1] = E[4][0][1];
                    E[3][1][1] = E[4][1][1];
                }

                if (shapeArrayInst[1] != document.getElementById("txt" + shIdx + "1").value && shapeArrayInst[3] != document.getElementById("txt" + shIdx + "2").value && shapeArrayInst[5] != document.getElementById("txt" + shIdx + "4").value)
                {
                    E[1][0][2] = E[1][0][2] - (E[2][0][3] - E[2][0][0]);
                    E[1][1][2] = E[1][1][2] - (E[2][1][3] - E[2][1][0]);
                    E[1][0][3] = E[1][0][3] - (E[2][0][3] - E[2][0][0]);
                    E[1][1][3] = E[1][1][3] - (E[2][1][3] - E[2][1][0]);

                    E[2][0][0] = E[2][0][0] - (E[1][0][2] - E[1][0][3]);
                    E[2][1][0] = E[2][1][0] - (E[1][1][2] - E[1][1][3]);
                    E[2][0][3] = E[2][0][3] - (E[1][0][2] - E[1][0][3]);
                    E[2][1][3] = E[2][1][3] - (E[1][1][2] - E[1][1][3]);
                }

                jg.drawPolygon(E[0][0], E[0][1]);
                jg.drawPolygon(E[1][0], E[1][1]);
                jg.drawPolygon(E[2][0], E[2][1]);
                jg.drawPolygon(E[3][0], E[3][1]);

                if (document.getElementById("txt" + shIdx + "8") != null) {
                    jg.drawPolygon(E[4][0], E[4][1]);
                }

                //element1    
                ax = Math.min(E[0][0][1], E[0][0][2]) + Math.abs(E[0][0][1] - E[0][0][2]) / 2 - flipFactorX * 10 * cos(rot);
                ay = Math.min(E[0][1][1], E[0][1][2]) + Math.abs(E[0][1][1] - E[0][1][2]) / 2 - 5 - flipFactorY * 10 * sin(rot);
                jg.drawString(textToLayout("W=" + shapeArrayInst[0]), ax, ay);

                ax = Math.min(E[0][0][0], E[0][0][1]) + Math.abs(E[0][0][0] - E[0][0][1]) / 2 + flipFactorX * 10 * sin(rot);
                ay = Math.min(E[0][1][0], E[0][1][1]) + Math.abs(E[0][1][0] - E[0][1][1]) / 2 - 5 - flipFactorY * 10 * cos(rot);
                jg.drawString(textToLayout("L=" + shapeArrayInst[1]), ax, ay);

                //element2    
                ax = Math.min(E[1][0][3], E[1][0][2]) + Math.abs(E[1][0][3] - E[1][0][2]) / 2 - flipFactorX * 10 * cos(rot);
                ay = Math.min(E[1][1][3], E[1][1][2]) + Math.abs(E[1][1][3] - E[1][1][2]) / 2 - 5 - flipFactorY * 10 * sin(rot);
                jg.drawString(textToLayout("W=" + shapeArrayInst[2]), ax, ay);

                ax = Math.min(E[1][0][0], E[1][0][3]) + Math.abs(E[1][0][0] - E[1][0][3]) / 2 + flipFactorX * 10 * sin(rot);
                ay = Math.min(E[1][1][0], E[1][1][3]) + Math.abs(E[1][1][0] - E[1][1][3]) / 2 - 5 - flipFactorY * 10 * cos(rot);
                jg.drawString(textToLayout("L=" + shapeArrayInst[3]), ax, ay);

                //element3   
                ax = Math.min(E[2][0][1], E[2][0][2]) + Math.abs(E[2][0][1] - E[2][0][2]) / 2 - flipFactorX * 10 * cos(rot);
                ay = Math.min(E[2][1][1], E[2][1][2]) + Math.abs(E[2][1][1] - E[2][1][2]) / 2 - 5 - flipFactorY * 10 * sin(rot);
                jg.drawString(textToLayout("W=" + shapeArrayInst[4]), ax, ay);

                ax = Math.min(E[2][0][2], E[2][0][3]) + Math.abs(E[2][0][2] - E[2][0][3]) / 2 + flipFactorX * 10 * sin(rot);
                ay = Math.min(E[2][1][2], E[2][1][3]) + Math.abs(E[2][1][2] - E[2][1][3]) / 2 - 5 - flipFactorY * 10 * cos(rot);
                jg.drawString(textToLayout("L=" + shapeArrayInst[5]), ax, ay);

                //element4  
                ax = Math.min(E[3][0][1], E[3][0][0]) + Math.abs(E[3][0][1] - E[3][0][0]) / 2 - flipFactorX * 10 * cos(rot);
                ay = Math.min(E[3][1][1], E[3][1][0]) + Math.abs(E[3][1][1] - E[3][1][0]) / 2 - 5 - flipFactorY * 10 * sin(rot);
                jg.drawString(textToLayout("W=" + shapeArrayInst[6]), ax, ay);

                ax = Math.min(E[3][0][2], E[3][0][1]) + Math.abs(E[3][0][2] - E[3][0][1]) / 2 + flipFactorX * 10 * sin(rot);
                ay = Math.min(E[3][1][2], E[3][1][1]) + Math.abs(E[3][1][2] - E[3][1][1]) / 2 - 5 - flipFactorY * 10 * cos(rot);
                jg.drawString(textToLayout("L=" + shapeArrayInst[7]), ax, ay);

                //element5   
                if (shapeArrayInst[8] > 0) {
                    ax = Math.min(E[4][0][3], E[4][0][0]) + Math.abs(E[4][0][3] - E[4][0][0]) / 2 - flipFactorX * 10 * cos(rot);
                    ay = Math.min(E[4][1][3], E[4][1][0]) + Math.abs(E[4][1][3] - E[4][1][0]) / 2 - 5 - flipFactorY * 10 * sin(rot);
                    jg.drawString(textToLayout("W=" + shapeArrayInst[8]), ax, ay);

                    ax = Math.min(E[4][0][0], E[4][0][1]) + Math.abs(E[4][0][0] - E[4][0][1]) / 2 + flipFactorX * 10 * sin(rot);
                    ay = Math.min(E[4][1][0], E[4][1][1]) + Math.abs(E[4][1][0] - E[4][1][1]) / 2 - 5 - flipFactorY * 10 * cos(rot);
                    jg.drawString(textToLayout("L=" + shapeArrayInst[9]), ax, ay);
                }

                jg.paint();
                break;
            
            case "T": 
                newShape.drawEdgeAOnly();
                newShape.drawEdgeBOnly();
                newShape.drawEdgeCOnly();
                newShape.drawEdgeDOnly();
                newShape.drawEdgeEOnly();
                newShape.drawEdgeFOnly();
                newShape.drawEdgeGOnly();
                newShape.drawEdgeHOnly();
                jg.setStroke(1);
                
                jg.drawPolygon(E[0][0], E[0][1]);
                jg.drawPolygon(E[1][0], E[1][1]);
                
                //element1
                ax =Math.min(E[0][0][0],E[0][0][3]) + Math.abs(E[0][0][3]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[0][1][0],E[0][1][3]) + Math.abs(E[0][1][3]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[0]), ax, ay);

                ax = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[1]), ax, ay); 
                
                //element2
                ax =Math.min(E[1][0][2],E[1][0][3]) + Math.abs(E[1][0][3]-E[1][0][2])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[1][1][2],E[1][1][3]) + Math.abs(E[1][1][3]-E[1][1][2])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[2]), ax, ay);

                ax = Math.min(E[1][0][2],E[1][0][1]) + Math.abs(E[1][0][2]-E[1][0][1])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[1][1][2],E[1][1][1]) + Math.abs(E[1][1][2]-E[1][1][1])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[3]), ax, ay);                
                
                jg.paint();
            break;
            
            case "A": 
                newShape.drawEdgeAOnly();
                newShape.drawEdgeBOnly();
                newShape.drawEdgeCOnly();
                newShape.drawEdgeEOnly();
                newShape.drawEdgeFOnly();
                newShape.drawEdgeG();
                jg.setColor("#000000");
                newShape.drawEdgeHOnly();
                newShape.drawEdgeIOnly();
                newShape.drawEdgeJOnly();
                jg.setStroke(1);
                
                
                jg.drawPolygon(E[0][0], E[0][1]);
                jg.drawPolygon(E[1][0], E[1][1]);
                jg.drawPolygon(E[2][0], E[2][1]);

                //element1
                ax =Math.min(E[0][0][0],E[0][0][3]) + Math.abs(E[0][0][3]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[0][1][0],E[0][1][3]) + Math.abs(E[0][1][3]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[0]), ax, ay);

                ax = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[1]), ax, ay); 
                
                //element2
                ax =Math.min(E[1][0][2],E[1][0][1]) + Math.abs(E[1][0][1]-E[1][0][2])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[1][1][2],E[1][1][1]) + Math.abs(E[1][1][1]-E[1][1][2])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[2]), ax, ay);

                ax = Math.min(E[1][0][0],E[1][0][1]) + Math.abs(E[1][0][0]-E[1][0][1])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[1][1][0],E[1][1][1]) + Math.abs(E[1][1][0]-E[1][1][1])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[3]), ax, ay); 
                
                //element3
                ax =Math.min(E[2][0][2],E[2][0][1]) + Math.abs(E[2][0][2]-E[2][0][1])/2-flipFactorX*10*cos(rot);
                ay =Math.min(E[2][1][2],E[2][1][1]) + Math.abs(E[2][1][2]-E[2][1][1])/2-5-flipFactorY*10*sin(rot);
                jg.drawString(textToLayout("W="+shapeArrayInst[4]), ax, ay);

                ax = Math.min(E[2][0][0],E[2][0][1]) + Math.abs(E[2][0][0]-E[2][0][1])/2+flipFactorX*10*sin(rot);
                ay = Math.min(E[2][1][0],E[2][1][1]) + Math.abs(E[2][1][0]-E[2][1][1])/2-5-flipFactorY*10*cos(rot);
                jg.drawString(textToLayout("L="+shapeArrayInst[5]), ax, ay);               
                
                jg.paint();
            break;
            default:
                alert("An unexpected error occurred. Some of the details might be wrongly displayed. A browser restart might solve the problem. If the problem persist contact Hafele.");
            break;
        }
    }
//-----------------

//trigonometry functions
    function deg_rad(degVal) 
    {
        var pi = Math.PI;
        var rez = degVal*(pi/180);
        return rez;
    }
    
    function cos(angle) 
    {
        var cosVal=0;

        //cos(-t)=cos(t)
        angle=Math.abs(angle);
        
        if(angle==0 || angle==360)
        {
           cosVal=1
        }
        else if(angle==90 || angle==270)
        {
           cosVal=0
        }
        else if(angle==180)
        {
           cosVal=-1
        }
        else
        {
            cosVal=Math.cos(deg_rad(angle));
        }
        
        return cosVal;
    }
    
    function sin(angle) {
        var sinVal=1;
        var negative=false;
        
        if(angle<0)
        {
            negative=true;
        }
        //sin(-t)=-sin(t);
        angle=Math.abs(angle);
        
        if(angle==0 || angle==180 || angle==360)
        {
           sinVal=0
        }
        else if(angle==90)
        {
           sinVal=1
        }
        else if(angle==270)
        {
           sinVal=-1
        }
        else
        {
            sinVal=Math.sin(deg_rad(angle));
        }
        
        if(negative)
        {
            sinVal=(-1)*sinVal;
        }
        return sinVal;
    }
//-------------------------

//drawing functions   
    function declareShape(shape)
    {
        this.noOfElements=0;
        var returnFlag=true;
        var upperLim=7500;
        var lowerLim = 100;
        shapeArray = new Array();
        
        switch(shape)
        {
            case "L":
                //no of rectangle elements builing the final shape
                this.noOfElements = 2;

                //get edge values
                if (isOneEmptyValue(4)) {
                    shapeArray[0] = 300; //a
                    shapeArray[1] = 1200; //b
                    shapeArray[2] = 800; //c
                    shapeArray[3] = 300; //d
                }
                else {
                    for (i = 0; i < 4; i++) {
                        shapeArray[i] = document.getElementById("txt" + shIdx + i).value;
                    }
                }

                //convert edge values to integer
                for (i = 0; i < shapeArray.length; i++) {
                    shapeArray[i] = parseFloat(shapeArray[i]);
                    if (shapeArray[i] == 0 || isNaN(shapeArray[i])) {
                        document.getElementById("txt" + shIdx + i).value = "";
                        returnFlag = false;
                        this.isShapeOk = returnFlag;
                        return;
                    }
                    if (shapeArray[i] < lowerLim) {
                        alert("Edge size cannot be less than " + lowerLim + " mm.");
                        document.getElementById("txt" + shIdx + i).value = "";
                        returnFlag = false;
                        this.isShapeOk = returnFlag;
                        return;
                    }
                    if (shapeArray[i] > upperLim) {
                        alert("Edge size cannot be greater than " + upperLim + " mm.");
                        document.getElementById("txt" + shIdx + i).value = "";
                        returnFlag = false;
                        this.isShapeOk = returnFlag;
                        return;
                    }
                }
                
                //particular constrains
                if (shapeArray[0] >= shapeArray[2]) {
                    alert("Edge A must be less then edge C.");
                    document.getElementById("txt" + shIdx + "2").value = "";
                    returnFlag = false;
                    this.isShapeOk = returnFlag;
                    return;
                }

                if (shapeArray[3] >= shapeArray[1]) {
                    alert("Edge D must be less then edge B.");
                    document.getElementById("txt" + shIdx + "1").value = "";
                    returnFlag = false;
                    this.isShapeOk = returnFlag;
                    return;
                }
                break;
            
            case "U":
                //no of rectangle elements builing the final shape
                this.noOfElements=3;
                
                //get edge values
                if(isOneEmptyValue(6))
                {
                    shapeArray[0]=1200; //a
                    shapeArray[1]=500; //b
                    shapeArray[2]=500; //c
                    shapeArray[3]=500; //d
                    shapeArray[4]=1200; //e
                    shapeArray[5]=2000; //f
                }
                else
                {
                    for (i=0; i<6; i++)
                    {
                        shapeArray[i] = document.getElementById("txt" + shIdx + i).value;
                    }
                }
                
                //convert edge values to integer
                for(i=0;i<shapeArray.length;i++)
                {
                     shapeArray[i]=parseFloat(shapeArray[i]);
                     if(shapeArray[i]==0 || isNaN(shapeArray[i]))
                     {
                         document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]<lowerLim)
                     {
                            alert("Edge size cannot be less than " + lowerLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]>upperLim)
                     {
                            alert("Edge size cannot be greater than " + upperLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                }
                
                //particular constrains
                if(shapeArray[1]+shapeArray[2]+300>=shapeArray[5])
                {
                    alert("Edge B and C are too close to each other. You must enlarge edge F.");
                    document.getElementById("txt" + shIdx + "5").value = "";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                }   
                
                var tempEdgeMM=Math.min(shapeArray[0],shapeArray[4])-50;
                if(shapeArray[3]>tempEdgeMM)
                {   
                    alert("A or E is too small.");
                    document.getElementById("txt" + shIdx + "0").value = "";
                    document.getElementById("txt" + shIdx + "4").value = "";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                } 
            break;
            
            case "LINE":
                //no of rectangle elements builing the final shape
                this.noOfElements=1;
                
                //get edge values
                if(isOneEmptyValue(2))
                {
                    shapeArray[0]=300; //a
                    shapeArray[1]=1200; //b
                }
                else
                {
                    for (i=0; i<2; i++)
                    {
                        shapeArray[i] = document.getElementById("txt" + shIdx + i).value;
                    }
                }
                
                //convert edge values to integer
                for(i=0;i<shapeArray.length;i++)
                {
                     shapeArray[i]=parseFloat(shapeArray[i]);
                     if(shapeArray[i]==0 || isNaN(shapeArray[i]))
                     {
                         document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]<lowerLim)
                     {
                            alert("Edge size cannot be less than " + lowerLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]>upperLim)
                     {
                            alert("Edge size cannot be greater than " + upperLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                }
             break;
             
             case "G":
                //no of rectangle elements builing the final shape
                this.noOfElements=5;

                //reset shape array
                if(shapeArray.length>0)
                {
                    for(i=shapeArray.length-1;i>=0;i--)
                    {
                       shapeArray.splice(i,1); 
                    }
                }
                
                //get edge values
                if(isOneEmptyValue(10))
                {
                    shapeArray[0]=350; //a
                    shapeArray[1]=1300; //b
                    shapeArray[2]=1600; //c
                    shapeArray[3]=400; //d
                    shapeArray[4]=2300; //e
                    shapeArray[5]=300; //f
                    shapeArray[6]=300; //g
                    shapeArray[7]=900; //h
                    
                    //element 5 is optional
                    if (document.getElementById("txt" + shIdx + "8").disabled == false)
                    {
                        shapeArray[8]=700; //i
                        shapeArray[9]=300; //j
                    }
                }
                else
                {
                    for (i=0; i<10; i++)
                    {
                        if (document.getElementById("txt" + shIdx + i))
                        {
                            if (document.getElementById("txt" + shIdx + i).disabled == false)
                            {
                                shapeArray[i] = document.getElementById("txt" + shIdx + i).value;
                            }
                        }
                    }
                }

                //convert edge values to integer
                for(i=0;i<shapeArray.length;i++)
                {
                     shapeArray[i]=parseFloat(shapeArray[i]);
                     if(shapeArray[i]==0 || isNaN(shapeArray[i]))
                     {
                         document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]<lowerLim)
                     {
                            alert("Edge size cannot be less than " + lowerLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]>upperLim)
                     {
                            alert("Edge size cannot be greater than " + upperLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                }

                //particular constrains   
                    var tempEdge1=0;
                    var tempEdge2=0;
                    if(shapeArray[8])
                    {
                        tempEdge1=shapeArray[8];
                    } 
                    if(shapeArray[9])
                    {
                        tempEdge2=shapeArray[9];
                    } 
                if (shapeArray[2]<shapeArray[7] || shapeArray[2]<=shapeArray[0] || shapeArray[2]<=shapeArray[3])
                {
                    alert("Edge C is too short.");
                    document.getElementById("txt" + shIdx + "2").value = "";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                }
                
                if (shapeArray[7]<=shapeArray[5] || shapeArray[7]<=tempEdge2)
                {
                    alert("Edge H is too short.");
                    document.getElementById("txt" + shIdx + "7").value = "";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                }
                
                if (shapeArray[1]<=shapeArray[3])
                {
                    alert("Edge B is too short.");
                    document.getElementById("txt" + shIdx + "1").value = "";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                }
                
                if (tempEdge1>shapeArray[4]-shapeArray[3]-200)
                {
                    alert("Edge I is too large.");
                    document.getElementById("txt" + shIdx + "8").value = "";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                }
                
                if (tempEdge1>0 && tempEdge1<=shapeArray[6]+10)
                {
                    alert("Edge I is too short.");
                    document.getElementById("txt" + shIdx + "8").value = "";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                }
                
                if (shapeArray[7]-shapeArray[5]-tempEdge2<200)
                {
                    alert("Edge H is too short.");
                    document.getElementById("txt" + shIdx + "7").value = "";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                }
                
                if (shapeArray[2]-shapeArray[0]-shapeArray[7]<200)
                {
                    if (shapeArray[4]-shapeArray[1]-tempEdge1<200)
                    {
                        alert("Edge B or I is too large.");
                        document.getElementById("txt" + shIdx + "1").value = "";
                        document.getElementById("txt" + shIdx + "8").value = "";
                        returnFlag=false;
                        this.isShapeOk=returnFlag;
                        return;
                    }
                }
             break;

         case "C":
             //no of rectangle elements builing the final shape
             this.noOfElements = 5;

             //reset shape array
             if (shapeArray.length > 0) {
                 for (i = shapeArray.length - 1; i >= 0; i--) {
                     shapeArray.splice(i, 1);
                 }
             }

             //get edge values
             if (isOneEmptyValue(10)) {
                 //change default rotation angle to 90 degrees
                 shapeArray[0] = 300; //a
                 shapeArray[1] = 600; //b
                 shapeArray[2] = 1600; //c
                 shapeArray[3] = 300; //d
                 shapeArray[4] = 1800; //e
                 shapeArray[5] = 300; //f
                 shapeArray[6] = 300; //g
                 shapeArray[7] = 1600; //h
                 shapeArray[8] = 600; //i
                 shapeArray[9] = 300; //j
             }
             else {
                 for (i = 0; i < 10; i++) {
                     if (document.getElementById("txt" + shIdx + i)) {
                         if (document.getElementById("txt" + shIdx + i).disabled == false) {
                             shapeArray[i] = document.getElementById("txt" + shIdx + i).value;
                         }
                     }
                 }
             }

             //convert edge values to integer
             for (i = 0; i < shapeArray.length; i++) {
                 shapeArray[i] = parseFloat(shapeArray[i]);
                 if (shapeArray[i] == 0 || isNaN(shapeArray[i])) {
                     document.getElementById("txt" + shIdx + i).value = "";
                     returnFlag = false;
                     this.isShapeOk = returnFlag;
                     return;
                 }
                 if (shapeArray[i] < lowerLim) {
                     alert("Edge size cannot be less than " + lowerLim + " mm.");
                     document.getElementById("txt" + shIdx + i).value = "";
                     returnFlag = false;
                     this.isShapeOk = returnFlag;
                     return;
                 }
                 if (shapeArray[i] > upperLim) {
                     alert("Edge size cannot be greater than " + upperLim + " mm.");
                     document.getElementById("txt" + shIdx + i).value = "";
                     returnFlag = false;
                     this.isShapeOk = returnFlag;
                     return;
                 }
             }

             //particular constrains
             if (shapeArray[2] < (shapeArray[5] + shapeArray[0] + 100) || shapeArray[2] <= shapeArray[3]) {
                 alert("Edge C is too short.");
                 document.getElementById("txt" + shIdx + "2").value = "";
                 returnFlag = false;
                 this.isShapeOk = returnFlag;
                 return;
             }

             if (shapeArray[1] <= shapeArray[3]) {
                 alert("Edge B is too short.");
                 document.getElementById("txt" + shIdx + "1").value = "";
                 returnFlag = false;
                 this.isShapeOk = returnFlag;
                 return;
             }

             if (shapeArray[1] >= shapeArray[4] - shapeArray[6]-100) {
                 alert("Edge B is too large.");
                 document.getElementById("txt" + shIdx + "1").value = "";
                 returnFlag = false;
                 this.isShapeOk = returnFlag;
                 return;
             }

             if (shapeArray[8] > shapeArray[4] - shapeArray[3] - 200) {
                 alert("Edge I is too large.");
                 document.getElementById("txt" + shIdx + "8").value = "";
                 returnFlag = false;
                 this.isShapeOk = returnFlag;
                 return;
             }

             if (shapeArray[7] - shapeArray[5] - shapeArray[9] < 200) {
                 alert("Edge H is too short.");
                 document.getElementById("txt" + shIdx + "7").value = "";
                 returnFlag = false;
                 this.isShapeOk = returnFlag;
                 return;
             }

             if (shapeArray[2] >= shapeArray[7] - 400 && shapeArray[2] <= shapeArray[7] + 400) {
                 if (shapeArray[4] - shapeArray[1] - shapeArray[8] < 200) {
                     alert("Edge B or I is too large.");
                     document.getElementById("txt" + shIdx + "1").value = "";
                     document.getElementById("txt" + shIdx + "8").value = "";
                     returnFlag = false;
                     this.isShapeOk = returnFlag;
                     return;
                 }
             }

             if (shapeArray[6] > shapeArray[8]) {
                 alert("Edge G must be less than edge I.");
                 document.getElementById("txt" + shIdx + "8").value = "";
                 returnFlag = false;
                 this.isShapeOk = returnFlag;
                 return;
             }
             break;
            
            case "T":
                //no of rectangle elements builing the final shape
                this.noOfElements=2;
                
                //get edge values
                if(isOneEmptyValue(5))
                {
                    shapeArray[0]=300; //a
                    shapeArray[1]=1200; //b
                    shapeArray[2]=450; //c
                    shapeArray[3]=800; //d
                    shapeArray[4]=300; //e
                }
                else
                {
                    for (i=0; i<5; i++)
                    {
                        shapeArray[i] = document.getElementById("txt" + shIdx + i).value;
                    }
                }
                
                //convert edge values to integer
                for(i=0;i<shapeArray.length;i++)
                {
                     shapeArray[i]=parseFloat(shapeArray[i]);
                     if(shapeArray[i]==0 || isNaN(shapeArray[i]))
                     {
                         document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]<lowerLim && i!=2)
                     {
                            alert("Edge size cannot be less than " + lowerLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]>upperLim)
                     {
                            alert("Edge size cannot be greater than " + upperLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                }
                
                //particular constrains
                if(shapeArray[2]+shapeArray[4]>=shapeArray[1])
                {
                    alert("Edge B is too short.");
                    document.getElementById("txt" + shIdx + "1").value = "";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                }

                if(shapeArray[2]<1)//particular case for T shape
                {
                    alert("Minimum length for edge C is 1 mm.");
                    document.getElementById("txt" + shIdx + "2").value = "";
                    returnFlag=false; 
                    this.isShapeOk=returnFlag;
                    return;
                }
                
            break;
            
            case "A":
                //no of rectangle elements builing the final shape
                this.noOfElements=4; //1 element is just a point
                
                //get edge values
                if(isOneEmptyValue(7))
                {
                    shapeArray[0]=605; //a
                    shapeArray[1]=1200; //b
                    shapeArray[2]=1200; //c
                    shapeArray[3]=605; //d
                    shapeArray[4]=1200; //e
                    shapeArray[5]=605; //f
                    shapeArray[6]=48; //g
                }
                else
                {
                    for (i=0; i<7; i++)
                    {
                        shapeArray[i] = document.getElementById("txt" + shIdx + i).value;
                    }
                }

                //convert edge values to floating point number
                for(i=0;i<shapeArray.length;i++)
                {
                     shapeArray[i]=parseFloat(shapeArray[i]);
                     if(shapeArray[i]==0 || isNaN(shapeArray[i]))
                     {
                         document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]<lowerLim && i!=6)
                     {
                            alert("Edge size cannot be less than " + lowerLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                     if(shapeArray[i]>upperLim)
                     {
                            alert("Edge size cannot be greater than " + upperLim + " mm.");
                            document.getElementById("txt" + shIdx + i).value = "";
                            returnFlag=false;
                            this.isShapeOk=returnFlag;
                            return;
                     }
                }

                //particular constrains

                if(shapeArray[6]>89 || shapeArray[6]<1)
                {
                    alert("The angle value must be between 1 and 89 degree.");
                    document.getElementById("txt" + shIdx + "6").value = "45";
                    returnFlag=false;
                    this.isShapeOk=returnFlag;
                    return;
                }

            break;
            
            default:
            alert("Shape not defined! Please select an existing shape.");
            returnFlag=false;
        }
      
        this.isShapeOk=returnFlag;
    }  
    
    function getCoordinates(shape)
    {   
        switch(shape)
        {
            case "L":
                var x11=q;
                var x12=q + shapeArray[1];
                var x13=x12;
                var x14=x11;
                
                var y11=p;
                var y12=y11;
                var y13=p + shapeArray[0];
                var y14=y13;
                
                var x21=q + (shapeArray[1]-shapeArray[3]);
                var x22=x12;
                var x23=x22;
                var x24=x21;
                
                var y21=y14;
                var y22=y21;
                var y23=p + shapeArray[2];
                var y24=y23;

                var coordinatesX1 = new Array(x11,x12,x13,x14);
                var coordinatesY1 = new Array(y11,y12,y13,y14);
                var coordinatesX2 = new Array(x21,x22,x23,x24);
                var coordinatesY2 = new Array(y21,y22,y23,y24);

                //create an array with all the elements in the format E1(X1,Y1) and E2(X2,Y2)
                var coordinates = new Array(coordinatesX1,coordinatesY1,coordinatesX2,coordinatesY2);
           break;
           
           case "U":
                var initialDepth=shapeArray[0]-shapeArray[4];
                var y11=0;
                var y12=0;
                var y21=0;
                var y22=0;
                
                var x11=q;
                var x12=q + shapeArray[1];
                var x13=x12;
                var x14=x11;

                if (initialDepth>=0)
                {
                    y11=p;
                    y12=y11;
                    y21=initialDepth+y11;
                    y22=y21;
                }
                else
                {
                    y21=p;
                    y22=y21;
                    y11=y21+(-1)*initialDepth;
                    y12=y11;
                }
                
                var y13=p + y12 + Math.abs(shapeArray[0]-shapeArray[3]);
                var y14=y13;
                
                var x21=q + shapeArray[5]-shapeArray[2];
                var x22=q + shapeArray[5];
                var x23=x22;
                var x24=x21;
                
                var y23=y13;
                var y24=y23;
                
                var x31=x11;
                var x32=x22;
                var x33=x32;
                var x34=x31;
                
                var y31=y14;
                var y32=y31;
                var y33=y14 + shapeArray[3];
                var y34=y33;
                
                var coordinatesX1 = new Array(x11,x12,x13,x14);
                var coordinatesY1 = new Array(y11,y12,y13,y14);
                var coordinatesX2 = new Array(x21,x22,x23,x24);
                var coordinatesY2 = new Array(y21,y22,y23,y24);
                var coordinatesX3 = new Array(x31,x32,x33,x34);
                var coordinatesY3 = new Array(y31,y32,y33,y34);
                var coordinates = new Array(coordinatesX1,coordinatesY1,coordinatesX2,coordinatesY2,coordinatesX3,coordinatesY3);
           break; 
           
           case "LINE":
                var x11=q;
                var x12=q + shapeArray[1];
                var x13=x12;
                var x14=x11;
                
                var y11=p;
                var y12=y11;
                var y13=p + shapeArray[0];
                var y14=y13;
                
                var coordinatesX1 = new Array(x11,x12,x13,x14);
                var coordinatesY1 = new Array(y11,y12,y13,y14);

                //create an array with all the elements in the format E1(X1,Y1) and E2(X2,Y2)
                var coordinates = new Array(coordinatesX1,coordinatesY1);
           break;
           
           case "G": case "C":
                var x11=q;
                var x12=q + shapeArray[1];
                var x13=x12;
                var x14=x11;
                
                var y11=p;
                var y12=y11;
                var y13=p + shapeArray[0];
                var y14=y13;
                //---------
                
                var x21=q;
                var x22=q+shapeArray[3]
                var x23=x22;
                var x24=x21;
                
                var y21=p;
                var y22=y21;
                var y23=p+shapeArray[2];
                var y24=y23;
                //----------
                
                var x31=x23;
                var x32=q+shapeArray[4];
                var x33=x32;
                var x34=x31;
                
                var y31=y24-shapeArray[5];
                var y32=y31;
                var y33=y24;
                var y34=y33;
                //----------
                
                var x41=x32-shapeArray[6];
                var x42=x32;
                var x43=x42;
                var x44=x41;
                
                var y41=y33-shapeArray[7];
                var y42=y41;
                var y43=y33;
                var y44=y43;
                //----------
                
                var x51=x42-shapeArray[8];
                var x52=x42;
                var x53=x52;
                var x54=x51;
                
                var y51=y42;
                var y52=y51;
                var y53=y42+shapeArray[9];
                var y54=y53;
                //----------
                
                var coordinatesX1 = new Array(x11,x12,x13,x14);
                var coordinatesY1 = new Array(y11,y12,y13,y14);
                var coordinatesX2 = new Array(x21,x22,x23,x24);
                var coordinatesY2 = new Array(y21,y22,y23,y24);
                var coordinatesX3 = new Array(x31,x32,x33,x34);
                var coordinatesY3 = new Array(y31,y32,y33,y34);
                var coordinatesX4 = new Array(x41,x42,x43,x44);
                var coordinatesY4 = new Array(y41,y42,y43,y44);
                var coordinatesX5 = new Array(x51,x52,x53,x54);
                var coordinatesY5 = new Array(y51,y52,y53,y54);
                
                //create an array with all the elements in the format E1(X1,Y1) and E2(X2,Y2) etc
                var coordinates = new Array(coordinatesX1,coordinatesY1,coordinatesX2,coordinatesY2,coordinatesX3,coordinatesY3,coordinatesX4,coordinatesY4,coordinatesX5,coordinatesY5);
           break;
           
           case "T":
                var x11=q;
                var x12=q + shapeArray[1];
                var x13=x12;
                var x14=x11;
                
                var y11=p;
                var y12=y11;
                var y13=p + shapeArray[0];
                var y14=y13;
                
                var x21=q + (shapeArray[1]-shapeArray[2]-shapeArray[4]);
                var x22=x21 + shapeArray[4];
                var x23=x22;
                var x24=x21;
                
                var y21=y14;
                var y22=y21;
                var y23=y14 + shapeArray[3];
                var y24=y23;
                var coordinatesX1 = new Array(x11,x12,x13,x14);
                var coordinatesY1 = new Array(y11,y12,y13,y14);
                var coordinatesX2 = new Array(x21,x22,x23,x24);
                var coordinatesY2 = new Array(y21,y22,y23,y24);

                //create an array with all the elements in the format E1(X1,Y1) and E2(X2,Y2)
                var coordinates = new Array(coordinatesX1,coordinatesY1,coordinatesX2,coordinatesY2);
           break;
           
           case "A":
                var x11=q;
                var x12=q + shapeArray[1];
                var x13=q + shapeArray[1];
                var x14=x11;
                
                var y11=p;
                var y12=y11;
                var y13=p + shapeArray[0];
                var y14=y13;

                var x21=x12;
                var x22=x12+shapeArray[2]*cos(shapeArray[6]/k);  
                var x23=x22-shapeArray[3]*sin(shapeArray[6]/k);             
                var x24=x12 - shapeArray[3]*cos(90-shapeArray[6]/k);
                
                var y21=y12;
                var y22=p+shapeArray[2]*sin(shapeArray[6]/k);
                var y23=y22+shapeArray[3]*cos(shapeArray[6]/k);
                var y24=shapeArray[3]*sin(90-shapeArray[6]/k);
                
                var x31=x22;
                var x32=x31;
                var x33=x22-shapeArray[5];
                var x34=x33;
                
                var y31=y22;
                var y32=y22+shapeArray[4];
                var y33=y32;
                var y34=y22;
                
                //just a point; set all the other 3 points as zero
                var x41=x22;
                var x42=0;
                var x43=0;
                var x44=0;
                
                var y41=y21;
                var y42=0;
                var y43=0;
                var y44=0;
                
                var coordinatesX1 = new Array(x11,x12,x13,x14);
                var coordinatesY1 = new Array(y11,y12,y13,y14);
                var coordinatesX2 = new Array(x21,x22,x23,x24);
                var coordinatesY2 = new Array(y21,y22,y23,y24);
                var coordinatesX3 = new Array(x31,x32,x33,x34);
                var coordinatesY3 = new Array(y31,y32,y33,y34);
                var coordinatesX4 = new Array(x41,x42,x43,x44);
                var coordinatesY4 = new Array(y41,y42,y43,y44);
                
                //create an array with all the elements in the format E1(X1,Y1) and E2(X2,Y2)
                var coordinates = new Array(coordinatesX1,coordinatesY1,coordinatesX2,coordinatesY2,coordinatesX3,coordinatesY3,coordinatesX4,coordinatesY4);
           break;
            
        }
        return coordinates;
    }
    
    function shrinkCanvas(shapeType)
    {
        var maxEdge = maxOfArray(shapeArray);
        if(shapeType!="T" && shapeType != "A")
        {
            document.getElementById(canvasId).style.height= (maxEdge+20) + 'px';
        }
    }
    
    function setScaleFactor(shapeType)
    {   
        //check the max dimension and change px to mm ratio and add margins
        var maxEdge = maxOfArray(shapeArray);
        if(shapeType!="A" && shapeType!="T")
        {
            if(maxEdge<=2200)
            {
                k=1/5;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=50mm";
            }
            
            if(maxEdge>2200)
            {
                k=1/10;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=100mm";
            }
            
            if(maxEdge>4400)
            {
                k=1/12;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=120mm";
            }
            
            if (maxEdge>5300)
            {
                k=1/15;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=150mm";
            }
            
            if (maxEdge>6600)
            {
                k=1/17;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=170mm";
            }
        }  
        else if(shapeType=="T")
        {
            if(maxEdge<=1900)
            {
                k=1/5;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=50mm";
            }
            
            if(maxEdge>1900)
            {
                k=1/10;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=100mm";
            }
            
            if(maxEdge>4400)
            {
                k=1/12;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=120mm";
            }
            
            if (maxEdge>5400)
            {
                k=1/16.2;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=162mm";
            }
        }      
        else
        {
            if(maxEdge<=1100)
            {
                k=1/5;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=50mm";
            }
            
            if(maxEdge>1100)
            {
                k=1/10;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=100mm";
            }
            
            if(maxEdge>2200)
            {
                k=1/12;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=120mm";
            }
            
            if (maxEdge>2600)
            {
                k=1/15;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=130mm";
            }
            
            if (maxEdge>3300)
            {
                k=1/18;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=180mm";
            }
            
            if (maxEdge>4000)
            {
                k=1/30;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=300mm";
            }
            
            if (maxEdge>6700)
            {
                k=1/33;
                document.getElementById(varLegend).innerHTML="Legend: <img src='./images/grid.gif' alt='SQ'/> 1sq=330mm";
            }
        }

        //coordinates convertion to factor k
        for(i=0;i<shapeArray.length;i++)
        {
            shapeArray[i]=shapeArray[i]*k;
        }
    }
    
    function translation(myArrayX,myArrayY, transValX, transValY)
    {
        var Tx = new Array();
        var Ty = new Array();
        for (i=0;i<myArrayX.length;i++)
        {
           Tx[i]=myArrayX[i] + transValX; 
           Ty[i]=myArrayY[i] + transValY;
        }
        //return a matrix containing 2 matrixes
        //Tx=x1, x2, x3, x4
        //Ty=y1, y2, y3, y4
        return new Array(Tx,Ty);
    }
    
    function rotation(myArrayX,myArrayY,rot)
    {
        var Rx = new Array();
        var Ry = new Array();
        for (i=0;i<myArrayX.length;i++)
        {
            Rx[i]=myArrayX[i]*cos(rot)-myArrayY[i]*sin(rot);
            Ry[i]=myArrayY[i]*cos(rot)+myArrayX[i]*sin(rot);
        }
        return new Array(Rx,Ry)
    }
    
    function drawShape(shape)
    {
        var rot = document.getElementById("txt" + shIdx + "Rot").value;
        var newShape=new createShape("#c3c3c3",rot,shape);
        
        //additional option to display edges to set visibility option
        //this controll must exist on the running page and value must be set to 1
        var onlyEdgeLayout="";
        if(document.getElementById("onlyEdgeLayout")!=null)
        {
            onlyEdgeLayout = document.getElementById("onlyEdgeLayout").value;
        }
        //this switch will draw all edges and mid lines; 
        //the html control need to be present on the page and set to 1 together with onlyEdgeLayout set to 1 to 
        //display all edges
        var allEdges="";
        if(document.getElementById("allEdges")!=null)
        {
            allEdges = document.getElementById("allEdges").value;
        }
        //----------------------------------------------------------------
        
        if(newShape.shapeError)
        {
            return;
        }
        
        //display edges
        switch(shape)
        {
            case "L":
                newShape.drawEdgeA();
                newShape.drawEdgeB();
                newShape.drawEdgeC();
                newShape.drawEdgeD();
                
                if(onlyEdgeLayout==1)
                {
                    newShape.drawEdgeE();
                    newShape.drawEdgeF();
                }
            break;
            
            case "U":
                newShape.drawEdgeA();
                newShape.drawEdgeB();
                newShape.drawEdgeC();
                newShape.drawEdgeE();
                newShape.drawEdgeF();
                
                if(onlyEdgeLayout==1)
                {
                    newShape.drawEdgeG();
                    newShape.drawEdgeH();
                    newShape.drawEdgeI();
                }
                else
                {
                    newShape.drawEdgeD();
                }
                
                if(allEdges==1)
                {
                    newShape.drawEdgeD();
                }
                
            break;
            
            case "LINE":
                newShape.drawEdgeA();
                newShape.drawEdgeB();
                
                if(onlyEdgeLayout==1)
                {
                   newShape.drawEdgeC();
                   newShape.drawEdgeD(); 
                }
                
            break;
            
            case "G":
                newShape.drawEdgeA();
                newShape.drawEdgeB();
                newShape.drawEdgeC();
                newShape.drawEdgeE();
                newShape.drawEdgeH();
                
                //ignore element 5 if the option is selected
                if (document.getElementById("txt" + shIdx + "8") != null)
                {
                    if (document.getElementById("txt" + shIdx + "8").disabled == false)
                    {
                        newShape.drawEdgeI();
                        newShape.drawEdgeJ();
                    } 
                }      
                
                if(onlyEdgeLayout==1)
                {
                    //if txt8 disabled
                    if (document.getElementById("txt" + shIdx + "8") == null)
                    {   
                       
                        newShape.drawEdgeK2();
                        newShape.drawEdgeL2(); 
                    }
                    else
                    {
                        newShape.drawEdgeK();
                        newShape.drawEdgeL();
                    }
                    
                    newShape.drawEdgeM();
                    newShape.drawEdgeN();
                    newShape.drawEdgeO();
                }
                else
                {
                    newShape.drawEdgeD();
                    newShape.drawEdgeF();
                    newShape.drawEdgeG();
                }
                
                if(allEdges==1)
                {
                    newShape.drawEdgeD();
                    newShape.drawEdgeF();
                    newShape.drawEdgeG(); 
                }
            break;
            
            case "C":
                newShape.drawEdgeA();
                newShape.drawEdgeB();
                newShape.drawEdgeC();
                newShape.drawEdgeE();
                newShape.drawEdgeH();
                newShape.drawEdgeI();
                newShape.drawEdgeJ(); 
                
                if(onlyEdgeLayout==1)
                {
                    newShape.drawEdgeK();
                    newShape.drawEdgeL();
                    newShape.drawEdgeM();
                    newShape.drawEdgeN();
                    newShape.drawEdgeO();
                } 
                else
                {
                    newShape.drawEdgeD();
                    newShape.drawEdgeF();
                    newShape.drawEdgeG();
                }
                
                if(allEdges==1)
                {
                    newShape.drawEdgeD();
                    newShape.drawEdgeF();
                    newShape.drawEdgeG(); 
                }
            break;
            
            case "T":
                newShape.drawEdgeA();
                newShape.drawEdgeB();
                newShape.drawEdgeC();
                newShape.drawEdgeD();
                newShape.drawEdgeE();
                
                if(onlyEdgeLayout==1)
                {
                    newShape.drawEdgeF();
                    newShape.drawEdgeG();
                    newShape.drawEdgeH();
                }
                
            break;
            
            case "A":
                newShape.drawEdgeA();
                newShape.drawEdgeB();
                newShape.drawEdgeC();
                newShape.drawEdgeE();
                newShape.drawEdgeF();

                if(onlyEdgeLayout==1)
                {
                    newShape.drawEdgeH();
                    newShape.drawEdgeI();
                    newShape.drawEdgeJ();
                }
                else
                {
                    newShape.drawEdgeD();
                    newShape.drawEdgeG();
                }
                
                if(allEdges==1)
                {
                    newShape.drawEdgeD();
                    newShape.drawEdgeG(); 
                }
            break;
        }
    }
    
    function elementCreator(rot, shapeType)
    { 
        //set up shape data

        var myShape = new declareShape(shapeType);
        this.elementError=false;
        if(!myShape.isShapeOk)
        {
            this.elementError=true;
            return;
        }
        
        setScaleFactor(shapeType);
        var coordinatesArray=getCoordinates(shapeType);

        //defalut rotation: 0
        if (rot==null)
        {
            rot=0;
        }

        //each element coordinates
        var elements=myShape.noOfElements;
        this.noOfElements=elements;
        
        var x=new Array(); //coordinates array
        var y=new Array();
        var j=0;
        for (i=0; i<elements; i++)
        {
            //read x coordinates
            x[i]=coordinatesArray[j];
            j=j+1;
            //read y coordinates
            y[i]=coordinatesArray[j];
            j=j+1;
        }
            
        //var x1=coordinatesArray[0];
        //var y1=coordinatesArray[1];
        //var x2=coordinatesArray[2];
        //var y2=coordinatesArray[3];

        var maxEdge=maxOfArray(shapeArray)/2;
        if(shapeType=="A")
        {
            maxEdge=maxOfArray(shapeArray);    
        }
        
        var tranX = maxEdge;//maxEdge - maxEdge*sin(rot)//+maxEdge*cos(rot);
        var tranY = maxEdge;
        
        //translate elements
        var T=new Array()
        for (u=0; u<elements; u++)
        {           
            T[u]=translation(x[u],y[u], -tranX, -tranY);
            //var T2=translation(x2,y2, -tranX, -tranY);
        }

        //rotate elements
        var R=new Array()
        for (u=0; u<elements; u++)
        {
            R[u]=rotation(T[u][0],T[u][1],rot);
            //var R2=rotation(T2[0],T2[1],rot);
        }

        //translate elements back
        for (u=0; u<elements; u++)
        {
            T[u]=translation(R[u][0],R[u][1], tranX, tranY);
        }
        //T1=translation(R1[0],R1[1], tranX, tranY);
        //T2=translation(R2[0],R2[1], tranX, tranY);
        
        //export coodinates
        this.CoordE = T;
    }
    
    function createShape(elementColor, rot, shapeType)
    {
        var myElement=new elementCreator(rot,shapeType)
        
        this.shapeError=false;
        if(myElement.elementError)
        {
            this.shapeError=true;
            return;
        }
        
        //flip elements
        var flipFactorX=1;
        var flipFactorY=1;
        
        //element coordinates array
        //E has the following structure: E[a][b][c] where a = number of elements; b=0 for x coordinate and 1 for y coordinate; 
        //c=corner 0,1,2,3 starting counting from top left corner of the element
        //elements are counted from left to right (and top to bottom);
        var E=new Array()
        var elements=myElement.noOfElements;
        for (u=0; u<elements; u++)
        {
            E[u]=myElement.CoordE[u];
        }
        
        //calculate max in x coordinates and max in y coordinates for flip
        var maxX=0;
        var maxY=0;
        var maxTempX=new Array();
        var maxTempY=new Array();
        
        for (u=0; u<elements; u++)
        {
            maxTempX[u]=maxOfArray(E[u][0]);
            maxTempY[u]=maxOfArray(E[u][1]);
        }
        maxX=maxOfArray(maxTempX);
        maxY=maxOfArray(maxTempY);
        
        //flip
        for (u=0; u<elements; u++)
        {
            if(isFlip("h"))
            {

                E[u][0][0]=Math.abs(maxX-E[u][0][0]);
                E[u][0][1]=Math.abs(maxX-E[u][0][1]);
                E[u][0][2]=Math.abs(maxX-E[u][0][2]);
                E[u][0][3]=Math.abs(maxX-E[u][0][3]);
               
                flipFactorX=-1;
            }
            
            if(isFlip("v"))
            {

                E[u][1][0]=Math.abs(maxY-E[u][1][0]);
                E[u][1][1]=Math.abs(maxY-E[u][1][1]);
                E[u][1][2]=Math.abs(maxY-E[u][1][2]);
                E[u][1][3]=Math.abs(maxY-E[u][1][3]);
                
                flipFactorY=-1;
            }
        }    
            
        //draw shape
        //clear previous drawings
        jg.clear();
            
        var cnv = document.getElementById(canvasId);
        jg = new jsGraphics(cnv);
        jg.setColor(elementColor);
        //E[0][0] is Array(X11,X12,X13,X14)
        //E[0][1] is Array(Y11,Y12,Y13,Y14)
        //E[1][0] is Array(X21,X22,X23,X24)
        //E[1][1] is Array(Y21,Y22,Y23,Y24)
        
        for (u=0; u<elements; u++)
        {
            jg.fillPolygon(E[u][0], E[u][1]);
        }      
        jg.paint();
        
        this.ElemC=E;
        this.flipfactx=flipFactorX;
        this.flipfacty=flipFactorY;
            
        var color="";
        var letter="";
            
       //L shape properties    
        if(shapeType=="L")
        {     
            //draw edge A
            this.drawEdgeA=function ()
            {
                color=letterAndColor(0,"color");
                letter=letterAndColor(0,"letter");
                jg.setColor(color);
                var ax =Math.min(E[0][0][0],E[0][0][3]) + Math.abs(E[0][0][3]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                var ay =Math.min(E[0][1][0],E[0][1][3]) + Math.abs(E[0][1][3]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][3],E[0][1][3]); //equivalent to: X11,Y11,X14,Y14
                jg.drawString(letter, ax, ay);
                jg.paint();
            }           
            this.drawEdgeAOnly=function ()
            {
                visibleEdge(0);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][3],E[0][1][3]);
                jg.paint();
            }

            //draw edge B
            this.drawEdgeB=function ()
            {
                color=letterAndColor(1,"color");
                letter=letterAndColor(1,"letter");
                jg.setColor(color);
                var bx = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);//Math.min(X11,X12) + Math.abs(X11-X12)/2;
                var by = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);//Math.min(Y11,Y12) + Math.abs(Y11-Y12)/2; 
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.drawString(letter, bx, by);
                jg.paint();
            }                
            this.drawEdgeBOnly=function ()
            {
                visibleEdge(1);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.paint();
            }    
            
            //draw edge C
            this.drawEdgeC=function ()
            {
                color=letterAndColor(2,"color");
                letter=letterAndColor(2,"letter");
                jg.setColor(color);
                var cx = Math.min(E[0][0][1],E[1][0][2]) + Math.abs(E[0][0][1]-E[1][0][2])/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(E[0][1][1],E[1][1][2]) + Math.abs(E[0][1][1]-E[1][1][2])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[0][0][1],E[0][1][1],E[1][0][2],E[1][1][2]);
                jg.drawString(letter, cx, cy);
                jg.paint();
            }       
            this.drawEdgeCOnly=function ()
            {
                visibleEdge(2);
                jg.drawLine(E[0][0][1],E[0][1][1],E[1][0][2],E[1][1][2]);
                jg.paint();
            }   
             
            //draw edge D
            this.drawEdgeD=function ()
            {
                color=letterAndColor(3,"color");
                letter=letterAndColor(3,"letter");
                jg.setColor(color);
                var dx = Math.min(E[1][0][2],E[1][0][3]) + Math.abs(E[1][0][2]-E[1][0][3])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[1][1][2],E[1][1][3]) + Math.abs(E[1][1][2]-E[1][1][3])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[1][0][3],E[1][1][3],E[1][0][2],E[1][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeDOnly=function ()
            {
                visibleEdge(3);
                jg.drawLine(E[1][0][3],E[1][1][3],E[1][0][2],E[1][1][2]);
                jg.paint();
            }
            
            //non required edges (only for visibility purposes)
            //draw edge E
            this.drawEdgeE=function ()
            {
                color=letterAndColor(4,"color");
                letter=letterAndColor(4,"letter");
                jg.setColor(color);
                var dx = Math.min(E[1][0][3],E[1][0][0]) + Math.abs(E[1][0][3]-E[1][0][0])/2-flipFactorX*10*cos(rot);
                var dy = Math.min(E[1][1][3],E[1][1][0]) + Math.abs(E[1][1][3]-E[1][1][0])/2-5-flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[1][0][3],E[1][1][3],E[1][0][0],E[1][1][0]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeEOnly=function ()
            {
                visibleEdge(4);
                jg.drawLine(E[1][0][3],E[1][1][3],E[1][0][0],E[1][1][0]);
                jg.paint();
            }
            
            //draw edge F
            this.drawEdgeF=function ()
            {
                color=letterAndColor(5,"color");
                letter=letterAndColor(5,"letter");
                jg.setColor(color);
                var dx = Math.min(E[0][0][3],E[1][0][0]) + Math.abs(E[0][0][3]-E[1][0][0])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[0][1][3],E[1][1][0]) + Math.abs(E[0][1][3]-E[1][1][0])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[0][0][3],E[0][1][3],E[1][0][0],E[1][1][0]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            
            this.drawEdgeFOnly=function ()
            {
                visibleEdge(5);
                jg.drawLine(E[0][0][3],E[0][1][3],E[1][0][0],E[1][1][0]);
                jg.paint();
            }
        }  
        
        //U Shape
        else if(shapeType=="U")
        {     
            //draw edge A
            this.drawEdgeA=function ()
            {
                color=letterAndColor(0,"color");
                letter=letterAndColor(0,"letter");
                jg.setColor(color);
                var ax =Math.min(E[0][0][0],E[2][0][3]) + Math.abs(E[2][0][3]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                var ay =Math.min(E[0][1][0],E[2][1][3]) + Math.abs(E[2][1][3]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[2][0][3],E[2][1][3]); //equivalent to: X11,Y11,X34,Y34
                jg.drawString(letter, ax, ay);
                jg.paint();
            }
            this.drawEdgeAOnly=function ()
            {
                visibleEdge(0);
                jg.drawLine(E[0][0][0],E[0][1][0],E[2][0][3],E[2][1][3]);
                jg.paint();
            }

            //draw edge B
            this.drawEdgeB=function ()
            {
                color=letterAndColor(1,"color");
                letter=letterAndColor(1,"letter");
                jg.setColor(color);
                var bx = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);//Math.min(X11,X12) + Math.abs(X11-X12)/2;
                var by = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);//Math.min(Y11,Y12) + Math.abs(Y11-Y12)/2; 
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.drawString(letter, bx, by);
                jg.paint();
            }    
            this.drawEdgeBOnly=function ()
            {
                visibleEdge(1);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.paint();
            }
            
            //draw edge C
            this.drawEdgeC=function ()
            {
                color=letterAndColor(2,"color");
                letter=letterAndColor(2,"letter");
                jg.setColor(color);
                var cx = Math.min(E[1][0][0],E[1][0][1]) + Math.abs(E[1][0][0]-E[1][0][1])/2+flipFactorX*10*sin(rot);
                var cy = Math.min(E[1][1][0],E[1][1][1]) + Math.abs(E[1][1][0]-E[1][1][1])/2-5-flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][1],E[1][1][1]);
                jg.drawString(letter, cx, cy);
                jg.paint();
            }  
            this.drawEdgeCOnly=function ()
            {
                visibleEdge(2);
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][1],E[1][1][1]);
                jg.paint();
            } 
             
            //draw edge D
            this.drawEdgeD=function ()
            {
                color=letterAndColor(3,"color");
                letter=letterAndColor(3,"letter");
                jg.setColor(color);
                
                //var dx01=Math.abs(E[2][0][1]-E[2][0][0]);
                //var dy01=Math.abs(E[2][1][1]-E[2][1][0]);

                var x01 = Math.min(E[2][0][1],E[2][0][0]) + Math.abs(E[2][0][1]-E[2][0][0])/2 -10*cos(rot);
                var y01 = Math.min(E[2][1][1],E[2][1][0]) + Math.abs(E[2][1][1]-E[2][1][0])/2 -10*sin(rot); 
                var x02 = Math.min(E[2][0][2],E[2][0][3]) + Math.abs(E[2][0][2]-E[2][0][3])/2 -10*cos(rot);
                var y02 = Math.min(E[2][1][2],E[2][1][3]) + Math.abs(E[2][1][2]-E[2][1][3])/2 -10*sin(rot);
                
                var dx = Math.min(x01,x02) + Math.abs(x01-x02)/2+flipFactorX*12*cos(rot);
                var dy = Math.min(y01,y02) + Math.abs(y01-y02)/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(x01,y01,x02,y02);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeDOnly=function ()
            {   
                var x01 = Math.min(E[2][0][1],E[2][0][0]) + Math.abs(E[2][0][1]-E[2][0][0])/2 -10*cos(rot);
                var y01 = Math.min(E[2][1][1],E[2][1][0]) + Math.abs(E[2][1][1]-E[2][1][0])/2 -10*sin(rot); 
                var x02 = Math.min(E[2][0][2],E[2][0][3]) + Math.abs(E[2][0][2]-E[2][0][3])/2 -10*cos(rot);
                var y02 = Math.min(E[2][1][2],E[2][1][3]) + Math.abs(E[2][1][2]-E[2][1][3])/2 -10*sin(rot);
                visibleEdge(3);
                jg.drawLine(x01,y01,x02,y02);
                jg.paint();
            }
            
            //draw edge E
            this.drawEdgeE=function ()
            {
                color=letterAndColor(4,"color");
                letter=letterAndColor(4,"letter");
                jg.setColor(color);
                var dx = Math.min(E[1][0][1],E[2][0][2]) + Math.abs(E[1][0][1]-E[2][0][2])/2-5+flipFactorX*10*cos(rot);
                var dy = Math.min(E[1][1][1],E[2][1][2]) + Math.abs(E[1][1][1]-E[2][1][2])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[1][0][1],E[1][1][1],E[2][0][2],E[2][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeEOnly=function ()
            {
                visibleEdge(4);
                jg.drawLine(E[1][0][1],E[1][1][1],E[2][0][2],E[2][1][2]);
                jg.paint();
            } 
            
            //draw edge F
            this.drawEdgeF=function ()
            {
                color=letterAndColor(5,"color");
                letter=letterAndColor(5,"letter");
                jg.setColor(color);
                var dx = Math.min(E[2][0][2],E[2][0][3]) + Math.abs(E[2][0][2]-E[2][0][3])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[2][1][2],E[2][1][3]) + Math.abs(E[2][1][2]-E[2][1][3])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[2][0][3],E[2][1][3],E[2][0][2],E[2][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeFOnly=function ()
            {
                visibleEdge(5);
                jg.drawLine(E[2][0][3],E[2][1][3],E[2][0][2],E[2][1][2]);
                jg.paint();
            } 
            
            //non required edges (only for visibility purposes)
            //draw edge G
            this.drawEdgeG=function ()
            {
                color=letterAndColor(6,"color");
                letter=letterAndColor(6,"letter");
                jg.setColor(color);
                var dx = Math.min(E[0][0][1],E[0][0][2]) + Math.abs(E[0][0][1]-E[0][0][2])/2-5+flipFactorX*10*cos(rot);
                var dy = Math.min(E[0][1][1],E[0][1][2]) + Math.abs(E[0][1][1]-E[0][1][2])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[0][0][1],E[0][1][1],E[0][0][2],E[0][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeGOnly=function ()
            {
                visibleEdge(6);
                jg.drawLine(E[0][0][1],E[0][1][1],E[0][0][2],E[0][1][2]);
                jg.paint();
            } 
            
            //draw edge H
            this.drawEdgeH=function ()
            {
                color=letterAndColor(7,"color");
                letter=letterAndColor(7,"letter");
                jg.setColor(color);
                var dx = Math.min(E[0][0][2],E[1][0][3]) + Math.abs(E[0][0][2]-E[1][0][3])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[0][1][2],E[1][1][3]) + Math.abs(E[0][1][2]-E[1][1][3])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[0][0][2],E[0][1][2],E[1][0][3],E[1][1][3]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeHOnly=function ()
            {
                visibleEdge(7);
                jg.drawLine(E[0][0][2],E[0][1][2],E[1][0][3],E[1][1][3]);
                jg.paint();
            }
            
            //draw edge I
            this.drawEdgeI=function ()
            {
                color=letterAndColor(8,"color");
                letter=letterAndColor(8,"letter");
                jg.setColor(color);
                var dx = Math.min(E[1][0][0],E[1][0][3]) + Math.abs(E[1][0][0]-E[1][0][3])/2-5+flipFactorX*10*cos(rot);
                var dy = Math.min(E[1][1][0],E[1][1][3]) + Math.abs(E[1][1][0]-E[1][1][3])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][3],E[1][1][3]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeIOnly=function ()
            {
                visibleEdge(8);
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][3],E[1][1][3]);
                jg.paint();
            }
        } 
        
        //Line shape properties    
        else if(shapeType=="LINE")
        {     
            //draw edge A
            this.drawEdgeA=function ()
            {
                //visibleEdge(0);
                color=letterAndColor(0,"color");
                letter=letterAndColor(0,"letter");
                jg.setColor(color);
                //letter=setLetterDiv(0,letter);visibleEdge(0);
                var ax =Math.min(E[0][0][0],E[0][0][3]) + Math.abs(E[0][0][3]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                var ay =Math.min(E[0][1][0],E[0][1][3]) + Math.abs(E[0][1][3]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][3],E[0][1][3]); //equivalent to: X11,Y11,X14,Y14
                jg.drawString(letter, ax, ay);
                jg.paint();
                jg.setStroke(1);
            }
            this.drawEdgeAOnly=function ()
            {
                visibleEdge(0);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][3],E[0][1][3]);
                jg.paint();
            }

            //draw edge B 
            this.drawEdgeB=function ()
            {
                color=letterAndColor(1,"color");
                letter=letterAndColor(1,"letter");
                jg.setColor(color);
                var bx = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);//Math.min(X11,X12) + Math.abs(X11-X12)/2;
                var by = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);//Math.min(Y11,Y12) + Math.abs(Y11-Y12)/2; 
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.drawString(letter, bx, by);
                jg.paint();
            } 
            this.drawEdgeBOnly=function ()
            {
                visibleEdge(1);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.paint();
            }
            
            //non required edges (only for visibility purposes)
            //draw edge C
            this.drawEdgeC=function ()
            {
                color=letterAndColor(2,"color");
                letter=letterAndColor(2,"letter");
                jg.setColor(color);
                var bx = Math.min(E[0][0][3],E[0][0][2]) + Math.abs(E[0][0][3]-E[0][0][2])/2+flipFactorX*10*sin(rot);//Math.min(X11,X12) + Math.abs(X11-X12)/2;
                var by = Math.min(E[0][1][3],E[0][1][2]) + Math.abs(E[0][1][3]-E[0][1][2])/2-5-flipFactorY*10*cos(rot);//Math.min(Y11,Y12) + Math.abs(Y11-Y12)/2; 
                
                jg.drawLine(E[0][0][3],E[0][1][3],E[0][0][2],E[0][1][2]);
                jg.drawString(letter, bx, by);
                jg.paint();
            }
            this.drawEdgeCOnly=function ()
            {
                visibleEdge(2);
                jg.drawLine(E[0][0][3],E[0][1][3],E[0][0][2],E[0][1][2]);
                jg.paint();
            }
            
            //draw edge D
            this.drawEdgeD=function ()
            {
                color=letterAndColor(3,"color");
                letter=letterAndColor(3,"letter");
                jg.setColor(color);
                var ax =Math.min(E[0][0][1],E[0][0][2]) + Math.abs(E[0][0][1]-E[0][0][2])/2-flipFactorX*10*cos(rot);
                var ay =Math.min(E[0][1][1],E[0][1][2]) + Math.abs(E[0][1][1]-E[0][1][2])/2-5-flipFactorY*10*sin(rot);
                
                jg.drawLine(E[0][0][1],E[0][1][1],E[0][0][2],E[0][1][2]); //equivalent to: X11,Y11,X14,Y14
                jg.drawString(letter, ax, ay);
                jg.paint();
            } 
            this.drawEdgeDOnly=function ()
            {
                visibleEdge(3);
                jg.drawLine(E[0][0][1],E[0][1][1],E[0][0][2],E[0][1][2]);
                jg.paint();
            }    
        }   
        
        //G/C shape properties
        else if(shapeType=="G" || shapeType=="C")
        {
            //draw edge A
            this.drawEdgeA=function ()
            {
                color=letterAndColor(0,"color");
                letter=letterAndColor(0,"letter");
                jg.setColor(color);
                var cx = Math.min(E[0][0][1],E[0][0][2]) + Math.abs(E[0][0][1]-E[0][0][2])/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(E[0][1][1],E[0][1][2]) + Math.abs(E[0][1][1]-E[0][1][2])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[0][0][1],E[0][1][1],E[0][0][2],E[0][1][2]);
                jg.drawString(letter, cx, cy);
                jg.paint();
            }  
            this.drawEdgeAOnly=function ()
            {
                visibleEdge(0);
                jg.drawLine(E[0][0][1],E[0][1][1],E[0][0][2],E[0][1][2]);
                jg.paint();
            }   
            
            //draw edge B
            this.drawEdgeB=function ()
            {
                color=letterAndColor(1,"color");
                letter=letterAndColor(1,"letter");
                jg.setColor(color);
                var bx = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);//Math.min(X11,X12) + Math.abs(X11-X12)/2;
                var by = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);//Math.min(Y11,Y12) + Math.abs(Y11-Y12)/2; 
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.drawString(letter, bx, by);
                jg.paint();
            }  
            this.drawEdgeBOnly=function ()
            {
                visibleEdge(1);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.paint();
            }   
            
            //draw edge C
            this.drawEdgeC=function ()
            {
                color=letterAndColor(2,"color");
                letter=letterAndColor(2,"letter");
                jg.setColor(color);
                var ax =Math.min(E[1][0][0],E[1][0][3]) + Math.abs(E[1][0][0]-E[1][0][3])/2-flipFactorX*10*cos(rot);
                var ay =Math.min(E[1][1][0],E[1][1][3]) + Math.abs(E[1][1][3]-E[1][1][0])/2-5-flipFactorY*10*sin(rot);
                
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][3],E[1][1][3]); //equivalent to: X11,Y11,X34,Y34
                jg.drawString(letter, ax, ay);
                jg.paint();
            }
            this.drawEdgeCOnly=function ()
            {
                visibleEdge(2);
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][3],E[1][1][3]);
                jg.paint();
            } 
            
            //draw edge D
            this.drawEdgeD=function ()
            {
                color=letterAndColor(3,"color");
                letter=letterAndColor(3,"letter");
                jg.setColor(color);
                
                var x01 = Math.min(E[1][0][0],E[1][0][3]) + Math.abs(E[1][0][0]-E[1][0][3])/2+30*sin(rot); 
                var y01 = Math.min(E[1][1][0],E[1][1][3]) + Math.abs(E[1][1][0]-E[1][1][3])/2+30*cos(rot); 
                var x02 = Math.min(E[1][0][1],E[1][0][2]) + Math.abs(E[1][0][1]-E[1][0][2])/2+30*sin(rot);
                var y02 = Math.min(E[1][1][1],E[1][1][2]) + Math.abs(E[1][1][1]-E[1][1][2])/2+30*cos(rot);
                
                var dx = Math.min(x01,x02) + Math.abs(x01-x02)/2-flipFactorX*10*sin(rot);
                var dy = Math.min(y01,y02) + Math.abs(y01-y02)/2-5+flipFactorY*10*cos(rot);            
                
                jg.drawLine(x01,y01,x02,y02);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeDOnly=function ()
            {
                visibleEdge(3);
                var x01 = Math.min(E[1][0][0],E[1][0][3]) + Math.abs(E[1][0][0]-E[1][0][3])/2+30*sin(rot); 
                var y01 = Math.min(E[1][1][0],E[1][1][3]) + Math.abs(E[1][1][0]-E[1][1][3])/2+30*cos(rot); 
                var x02 = Math.min(E[1][0][1],E[1][0][2]) + Math.abs(E[1][0][1]-E[1][0][2])/2+30*sin(rot);
                var y02 = Math.min(E[1][1][1],E[1][1][2]) + Math.abs(E[1][1][1]-E[1][1][2])/2+30*cos(rot);
                jg.drawLine(x01,y01,x02,y02);
                jg.paint();
            }
            
            //draw edge E
            this.drawEdgeE=function ()
            {
                color=letterAndColor(4,"color");
                letter=letterAndColor(4,"letter");
                jg.setColor(color);
                var dx = Math.min(E[1][0][3],E[2][0][2]) + Math.abs(E[1][0][3]-E[2][0][2])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[1][1][3],E[2][1][2]) + Math.abs(E[1][1][3]-E[2][1][2])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[1][0][3],E[1][1][3],E[2][0][2],E[2][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeEOnly=function ()
            {
                visibleEdge(4);
                jg.drawLine(E[1][0][3],E[1][1][3],E[2][0][2],E[2][1][2]);
                jg.paint();
            } 
            
            //draw edge F
            this.drawEdgeF=function ()
            {
                color=letterAndColor(5,"color");
                letter=letterAndColor(5,"letter");
                jg.setColor(color);
                
                var x01 = Math.min(E[2][0][1],E[2][0][0]) + Math.abs(E[2][0][1]-E[2][0][0])/2 -20*cos(rot);
                var y01 = Math.min(E[2][1][1],E[2][1][0]) + Math.abs(E[2][1][1]-E[2][1][0])/2 -20*sin(rot); 
                var x02 = Math.min(E[2][0][2],E[2][0][3]) + Math.abs(E[2][0][2]-E[2][0][3])/2 -20*cos(rot);
                var y02 = Math.min(E[2][1][2],E[2][1][3]) + Math.abs(E[2][1][2]-E[2][1][3])/2 -20*sin(rot);
                
                var dx = Math.min(x01,x02) + Math.abs(x01-x02)/2+flipFactorX*12*cos(rot);
                var dy = Math.min(y01,y02) + Math.abs(y01-y02)/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(x01,y01,x02,y02);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeFOnly=function ()
            {
                visibleEdge(5);
                var x01 = Math.min(E[2][0][1],E[2][0][0]) + Math.abs(E[2][0][1]-E[2][0][0])/2 -20*cos(rot);
                var y01 = Math.min(E[2][1][1],E[2][1][0]) + Math.abs(E[2][1][1]-E[2][1][0])/2 -20*sin(rot); 
                var x02 = Math.min(E[2][0][2],E[2][0][3]) + Math.abs(E[2][0][2]-E[2][0][3])/2 -20*cos(rot);
                var y02 = Math.min(E[2][1][2],E[2][1][3]) + Math.abs(E[2][1][2]-E[2][1][3])/2 -20*sin(rot);
                jg.drawLine(x01,y01,x02,y02);
                jg.paint();
            } 
            
            //draw edge G
            this.drawEdgeG=function ()
            {
                color=letterAndColor(6,"color");
                letter=letterAndColor(6,"letter");
                jg.setColor(color);
                
                var x01 = Math.min(E[3][0][0],E[3][0][3]) + Math.abs(E[3][0][0]-E[3][0][3])/2//+30*sin(rot); 
                var y01 = Math.min(E[3][1][0],E[3][1][3]) + Math.abs(E[3][1][0]-E[3][1][3])/2//+30*cos(rot);
                var x02 = Math.min(E[3][0][1],E[3][0][2]) + Math.abs(E[3][0][1]-E[3][0][2])/2//+30*sin(rot);
                var y02 = Math.min(E[3][1][1],E[3][1][2]) + Math.abs(E[3][1][1]-E[3][1][2])/2//+30*cos(rot);
                
                var dx = Math.min(x01,x02) + Math.abs(x01-x02)/2-flipFactorX*10*sin(rot);
                var dy = Math.min(y01,y02) + Math.abs(y01-y02)/2-5+flipFactorY*10*cos(rot);            
                
                jg.drawLine(x01,y01,x02,y02);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeGOnly=function ()
            {
                visibleEdge(6);
                var x01 = Math.min(E[3][0][0],E[3][0][3]) + Math.abs(E[3][0][0]-E[3][0][3])/2
                var y01 = Math.min(E[3][1][0],E[3][1][3]) + Math.abs(E[3][1][0]-E[3][1][3])/2
                var x02 = Math.min(E[3][0][1],E[3][0][2]) + Math.abs(E[3][0][1]-E[3][0][2])/2
                var y02 = Math.min(E[3][1][1],E[3][1][2]) + Math.abs(E[3][1][1]-E[3][1][2])/2
                jg.drawLine(x01,y01,x02,y02);
                jg.paint();
            } 
            
            //draw edge H
            this.drawEdgeH=function ()
            {
                color=letterAndColor(7,"color");
                letter=letterAndColor(7,"letter");
                jg.setColor(color);
                var cx = Math.min(E[2][0][2],E[3][0][1]) + Math.abs(E[2][0][2]-E[3][0][1])/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(E[2][1][2],E[3][1][1]) + Math.abs(E[2][1][2]-E[3][1][1])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[2][0][2],E[3][1][2],E[3][0][1],E[3][1][1]);
                jg.drawString(letter, cx, cy);
                jg.paint();
            } 
            this.drawEdgeHOnly=function ()
            {
                visibleEdge(7);
                jg.drawLine(E[2][0][2],E[3][1][2],E[3][0][1],E[3][1][1]);
                jg.paint();
            }
            
            //draw edge I
            this.drawEdgeI=function ()
            {
                color=letterAndColor(8,"color");
                letter=letterAndColor(8,"letter");
                jg.setColor(color);
                var bx = Math.min(E[4][0][0],E[4][0][1]) + Math.abs(E[4][0][0]-E[4][0][1])/2+flipFactorX*10*sin(rot);//Math.min(X11,X12) + Math.abs(X11-X12)/2;
                var by = Math.min(E[4][1][0],E[4][1][1]) + Math.abs(E[4][1][0]-E[4][1][1])/2-5-flipFactorY*10*cos(rot);//Math.min(Y11,Y12) + Math.abs(Y11-Y12)/2; 
                
                jg.drawLine(E[4][0][0],E[4][1][0],E[4][0][1],E[4][1][1]);
                jg.drawString(letter, bx, by);
                jg.paint();
            }  
            this.drawEdgeIOnly=function ()
            {
                visibleEdge(8);
                jg.drawLine(E[4][0][0],E[4][1][0],E[4][0][1],E[4][1][1]);
                jg.paint();
            }  
            
            //draw edge J
            this.drawEdgeJ=function ()
            {
                color=letterAndColor(9,"color");
                letter=letterAndColor(9,"letter");
                jg.setColor(color);
                var ax =Math.min(E[4][0][0],E[4][0][3]) + Math.abs(E[4][0][0]-E[4][0][3])/2-flipFactorX*10*cos(rot);
                var ay =Math.min(E[4][1][0],E[4][1][3]) + Math.abs(E[4][1][3]-E[4][1][0])/2-5-flipFactorY*10*sin(rot);
                
                jg.drawLine(E[4][0][0],E[4][1][0],E[4][0][3],E[4][1][3]); //equivalent to: X11,Y11,X34,Y34
                jg.drawString(letter, ax, ay);
                jg.paint();
            }  
            this.drawEdgeJOnly=function ()
            {
                visibleEdge(9);
                jg.drawLine(E[4][0][0],E[4][1][0],E[4][0][3],E[4][1][3]);
                jg.paint();
            } 
            
            //non required edges (only for visibility purposes)
            //draw edge K
            this.drawEdgeK=function ()
            {
                color=letterAndColor(10,"color");
                letter=letterAndColor(10,"letter");
                jg.setColor(color);
                
                var Ex=E[4][0][2]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey=E[4][1][2]-flipFactorY*shapeArray[6]*sin(rot);
                var bx = Math.min(E[4][0][3],Ex) + Math.abs(E[4][0][3]-Ex)/2+flipFactorX*10*sin(rot);//Math.min(X11,X12) + Math.abs(X11-X12)/2;
                var by = Math.min(E[4][1][3],Ey) + Math.abs(E[4][1][3]-Ey)/2-5-flipFactorY*10*cos(rot);//Math.min(Y11,Y12) + Math.abs(Y11-Y12)/2; 
                
                jg.drawLine(E[4][0][3],E[4][1][3],Ex,Ey);
                jg.drawString(letter, bx, by);
                jg.paint();
            } 
            this.drawEdgeKOnly=function ()
            {
                visibleEdge(10);
                var Ex=E[4][0][2]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey=E[4][1][2]-flipFactorY*shapeArray[6]*sin(rot);
                jg.drawLine(E[4][0][3],E[4][1][3],Ex,Ey);
                jg.paint();
            } 
            
            //draw edge K2
            this.drawEdgeK2=function ()
            {
                color=letterAndColor(10,"color");
                letter=letterAndColor(10,"letter");
                jg.setColor(color);
                var dx = Math.min(E[3][0][0],E[3][0][1]) + Math.abs(E[3][0][0]-E[3][0][1])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[3][1][0],E[3][1][1]) + Math.abs(E[3][1][0]-E[3][1][1])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[3][0][0],E[3][1][0],E[3][0][1],E[3][1][1]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            } 
            this.drawEdgeK2Only=function ()
            {
                visibleEdge(10);
                jg.drawLine(E[3][0][0],E[3][1][0],E[3][0][1],E[3][1][1]);
                jg.paint();
            } 
            
            //draw edge L
            this.drawEdgeL=function ()
            {
                color=letterAndColor(11,"color");
                letter=letterAndColor(11,"letter");
                jg.setColor(color);
                
                var Ex1=E[4][0][2]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey1=E[4][1][2]-flipFactorY*shapeArray[6]*sin(rot);
                var Ex2=E[2][0][1]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey2=E[2][1][1]-flipFactorY*shapeArray[6]*sin(rot);
                
                var cx = Math.min(Ex1,Ex2) + Math.abs(Ex1-Ex2)/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(Ey1,Ey2) + Math.abs(Ey1-Ey2)/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(Ex1,Ey1,Ex2,Ey2);
                jg.drawString(letter, cx, cy);
                jg.paint();
            } 
            this.drawEdgeLOnly=function ()
            {
                visibleEdge(11);
                var Ex1=E[4][0][2]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey1=E[4][1][2]-flipFactorY*shapeArray[6]*sin(rot);
                var Ex2=E[2][0][1]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey2=E[2][1][1]-flipFactorY*shapeArray[6]*sin(rot);
                jg.drawLine(Ex1,Ey1,Ex2,Ey2);
                jg.paint();
            } 
            
            //draw edge L2
            this.drawEdgeL2=function ()
            {
                color=letterAndColor(11,"color");
                letter=letterAndColor(11,"letter");
                jg.setColor(color);
                
                var Ex=E[2][0][1]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey=E[2][1][1]-flipFactorY*shapeArray[6]*sin(rot);
                
                var cx = Math.min(E[3][0][0],Ex) + Math.abs(E[3][0][0]-Ex)/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(E[3][1][0],Ey) + Math.abs(E[3][1][0]-Ey)/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[3][0][0],E[3][1][0],Ex,Ey);
                jg.drawString(letter, cx, cy);
                jg.paint();
            }  
            this.drawEdgeL2Only=function ()
            {
                visibleEdge(11);
                var Ex=E[2][0][1]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey=E[2][1][1]-flipFactorY*shapeArray[6]*sin(rot);
                jg.drawLine(E[3][0][0],E[3][1][0],Ex,Ey);
                jg.paint();
            } 
            
            //draw edge M
            this.drawEdgeM=function ()
            {
                color=letterAndColor(12,"color");
                letter=letterAndColor(12,"letter");
                jg.setColor(color);
                
                var Ex1=E[2][0][1]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey1=E[2][1][1]-flipFactorY*shapeArray[6]*sin(rot);
                
                var dx = Math.min(Ex1,E[2][0][0]) + Math.abs(Ex1-E[2][0][0])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(Ey1,E[2][1][0]) + Math.abs(Ey1-E[2][1][0])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(Ex1,Ey1,E[2][0][0],E[2][1][0]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeMOnly=function ()
            {
                visibleEdge(12);
                var Ex1=E[2][0][1]-flipFactorX*shapeArray[6]*cos(rot);
                var Ey1=E[2][1][1]-flipFactorY*shapeArray[6]*sin(rot);
                jg.drawLine(Ex1,Ey1,E[2][0][0],E[2][1][0]);
                jg.paint();
            } 
            
            //draw edge N
            this.drawEdgeN=function ()
            {
                color=letterAndColor(13,"color");
                letter=letterAndColor(13,"letter");
                jg.setColor(color);
                
                var Ex=E[0][0][0]-flipFactorX*shapeArray[0]*sin(rot) + flipFactorX*shapeArray[3]*cos(rot);
                var Ey=E[0][1][3]+flipFactorY*shapeArray[3]*sin(rot);

                var cx = Math.min(E[2][0][0],Ex) + Math.abs(E[2][0][0]-Ex)/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(E[2][1][0],Ey) + Math.abs(E[2][1][0]-Ey)/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[2][0][0],E[2][1][0],Ex,Ey);
                jg.drawString(letter, cx, cy);
                jg.paint();
            }  
            this.drawEdgeNOnly=function ()
            {
                visibleEdge(13);
                var Ex=E[0][0][0]-flipFactorX*shapeArray[0]*sin(rot) + flipFactorX*shapeArray[3]*cos(rot);
                var Ey=E[0][1][3]+flipFactorY*shapeArray[3]*sin(rot);
                jg.drawLine(E[2][0][0],E[2][1][0],Ex,Ey);
                jg.paint();
            } 
            
            //draw edge O
            this.drawEdgeO=function ()
            {
                color=letterAndColor(14,"color");
                letter=letterAndColor(14,"letter");
                jg.setColor(color);
                
                var Ex=E[0][0][0]-flipFactorX*shapeArray[0]*sin(rot) + flipFactorX*shapeArray[3]*cos(rot);
                var Ey=E[0][1][3]+flipFactorY*shapeArray[3]*sin(rot);
                
                var dx = Math.min(Ex,E[0][0][2]) + Math.abs(Ex-E[0][0][2])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(Ey,E[0][1][2]) + Math.abs(Ey-E[0][1][2])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(Ex,Ey,E[0][0][2],E[0][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeOOnly=function ()
            {
                visibleEdge(14);
                var Ex=E[0][0][0]-flipFactorX*shapeArray[0]*sin(rot) + flipFactorX*shapeArray[3]*cos(rot);
                var Ey=E[0][1][3]+flipFactorY*shapeArray[3]*sin(rot);
                jg.drawLine(Ex,Ey,E[0][0][2],E[0][1][2]);
                jg.paint();
            } 
        } 
        
        //T shape properties    
        else if(shapeType=="T")
        {     
            //draw edge A
            this.drawEdgeA=function ()
            {
                color=letterAndColor(0,"color");
                letter=letterAndColor(0,"letter");
                jg.setColor(color);
                var ax =Math.min(E[0][0][0],E[0][0][3]) + Math.abs(E[0][0][3]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                var ay =Math.min(E[0][1][0],E[0][1][3]) + Math.abs(E[0][1][3]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][3],E[0][1][3]); //equivalent to: X11,Y11,X14,Y14
                jg.drawString(letter, ax, ay);
                jg.paint();
            }
            this.drawEdgeAOnly=function ()
            {
                visibleEdge(0);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][3],E[0][1][3]);
                jg.paint();
            } 

            //draw edge B
            this.drawEdgeB=function ()
            {
                color=letterAndColor(1,"color");
                letter=letterAndColor(1,"letter");
                jg.setColor(color);
                var bx = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);//Math.min(X11,X12) + Math.abs(X11-X12)/2;
                var by = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);//Math.min(Y11,Y12) + Math.abs(Y11-Y12)/2; 
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.drawString(letter, bx, by);
                jg.paint();
            }   
            this.drawEdgeBOnly=function ()
            {
                visibleEdge(1);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.paint();
            } 
            
            //draw edge C
            this.drawEdgeC=function ()
            {
                color=letterAndColor(2,"color");
                letter=letterAndColor(2,"letter");
                jg.setColor(color);
                var dx = Math.min(E[0][0][2],E[1][0][1]) + Math.abs(E[0][0][2]-E[1][0][1])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[0][1][2],E[1][1][1]) + Math.abs(E[0][1][2]-E[1][1][1])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[1][0][1],E[1][1][1],E[0][0][2],E[0][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeCOnly=function ()
            {
                visibleEdge(2);
                jg.drawLine(E[1][0][1],E[1][1][1],E[0][0][2],E[0][1][2]);
                jg.paint();
            } 
            
            //draw edge D
            this.drawEdgeD=function ()
            {
                color=letterAndColor(3,"color");
                letter=letterAndColor(3,"letter");
                jg.setColor(color);
                var cx = Math.min(E[1][0][1],E[1][0][2]) + Math.abs(E[1][0][1]-E[1][0][2])/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(E[1][1][1],E[1][1][2]) + Math.abs(E[1][1][1]-E[1][1][2])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[1][0][1],E[1][1][1],E[1][0][2],E[1][1][2]);
                jg.drawString(letter, cx, cy);
                jg.paint();
            }  
            this.drawEdgeDOnly=function ()
            {
                visibleEdge(3);
                jg.drawLine(E[1][0][1],E[1][1][1],E[1][0][2],E[1][1][2]);
                jg.paint();
            }  
             
            //draw edge E
            this.drawEdgeE=function ()
            {
                color=letterAndColor(4,"color");
                letter=letterAndColor(4,"letter");
                jg.setColor(color);
                var dx = Math.min(E[1][0][2],E[1][0][3]) + Math.abs(E[1][0][2]-E[1][0][3])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[1][1][2],E[1][1][3]) + Math.abs(E[1][1][2]-E[1][1][3])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[1][0][3],E[1][1][3],E[1][0][2],E[1][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeEOnly=function ()
            {
                visibleEdge(4);
                jg.drawLine(E[1][0][3],E[1][1][3],E[1][0][2],E[1][1][2]);
                jg.paint();
            }  
            
            //non required edges (only for visibility purposes)
            //draw edge F
            this.drawEdgeF=function ()
            {
                color=letterAndColor(5,"color");
                letter=letterAndColor(5,"letter");
                jg.setColor(color);
                var dx = Math.min(E[0][0][3],E[1][0][0]) + Math.abs(E[0][0][3]-E[1][0][0])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[0][1][3],E[1][1][0]) + Math.abs(E[0][1][3]-E[1][1][0])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[0][0][3],E[0][1][3],E[1][0][0],E[1][1][0]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeFOnly=function ()
            {
                visibleEdge(5);
                jg.drawLine(E[0][0][3],E[0][1][3],E[1][0][0],E[1][1][0]);
                jg.paint();
            }  
            
            //draw edge G
            this.drawEdgeG=function ()
            {
                color=letterAndColor(6,"color");
                letter=letterAndColor(6,"letter");
                jg.setColor(color);
                var cx = Math.min(E[0][0][1],E[0][0][2]) + Math.abs(E[0][0][1]-E[0][0][2])/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(E[0][1][1],E[0][1][2]) + Math.abs(E[0][1][1]-E[0][1][2])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[0][0][1],E[0][1][1],E[0][0][2],E[0][1][2]);
                jg.drawString(letter, cx, cy);
                jg.paint();
            }   
            this.drawEdgeGOnly=function ()
            {
                visibleEdge(6);
                jg.drawLine(E[0][0][1],E[0][1][1],E[0][0][2],E[0][1][2]);
                jg.paint();
            } 
            
            //draw edge H
            this.drawEdgeH=function ()
            {
                color=letterAndColor(7,"color");
                letter=letterAndColor(7,"letter");
                jg.setColor(color);
                var dx = Math.min(E[1][0][0],E[1][0][3]) + Math.abs(E[1][0][0]-E[1][0][3])/2-flipFactorX*10*cos(rot);
                var dy = Math.min(E[1][1][0],E[1][1][3]) + Math.abs(E[1][1][0]-E[1][1][3])/2-5-flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][3],E[1][1][3]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeHOnly=function ()
            {
                visibleEdge(7);
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][3],E[1][1][3]);
                jg.paint();
            } 
        } 
        
        //Angular shape properties    
        if(shapeType=="A")
        {     
            //draw edge A
            this.drawEdgeA=function ()
            {
                color=letterAndColor(0,"color");
                letter=letterAndColor(0,"letter");
                jg.setColor(color);
                var ax =Math.min(E[0][0][0],E[0][0][3]) + Math.abs(E[0][0][3]-E[0][0][0])/2-flipFactorX*10*cos(rot);
                var ay =Math.min(E[0][1][0],E[0][1][3]) + Math.abs(E[0][1][3]-E[0][1][0])/2-5-flipFactorY*10*sin(rot);
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][3],E[0][1][3]); //equivalent to: X11,Y11,X14,Y14
                jg.drawString(letter, ax, ay);
                jg.paint();
            }
            this.drawEdgeAOnly=function ()
            {
                visibleEdge(0);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][3],E[0][1][3]);
                jg.paint();
            } 

            //draw edge B
            this.drawEdgeB=function ()
            {
                color=letterAndColor(1,"color");
                letter=letterAndColor(1,"letter");
                jg.setColor(color);
                var bx = Math.min(E[0][0][0],E[0][0][1]) + Math.abs(E[0][0][0]-E[0][0][1])/2+flipFactorX*10*sin(rot);//Math.min(X11,X12) + Math.abs(X11-X12)/2;
                var by = Math.min(E[0][1][0],E[0][1][1]) + Math.abs(E[0][1][0]-E[0][1][1])/2-5-flipFactorY*10*cos(rot);//Math.min(Y11,Y12) + Math.abs(Y11-Y12)/2; 
                
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.drawString(letter, bx, by);
                jg.paint();
            }  
            this.drawEdgeBOnly=function ()
            {
                visibleEdge(1);
                jg.drawLine(E[0][0][0],E[0][1][0],E[0][0][1],E[0][1][1]);
                jg.paint();
            }   
            
            //draw edge C
            this.drawEdgeC=function ()
            {
                color=letterAndColor(2,"color");
                letter=letterAndColor(2,"letter");
                jg.setColor(color);
                var cx = Math.min(E[1][0][0],E[1][0][1]) + Math.abs(E[1][0][0]-E[1][0][1])/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(E[1][1][0],E[1][1][1]) + Math.abs(E[1][1][0]-E[1][1][1])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][1],E[1][1][1]);
                jg.drawString(letter, cx, cy);
                jg.paint();
            } 
            this.drawEdgeCOnly=function ()
            {
                visibleEdge(2);
                jg.drawLine(E[1][0][0],E[1][1][0],E[1][0][1],E[1][1][1]);
                jg.paint();
            }  
            
            //draw edge D
            this.drawEdgeD=function ()
            {
                color=letterAndColor(3,"color");
                letter=letterAndColor(3,"letter");
                jg.setColor(color);
                
                //var cx = Math.min(E[1][0][1],E[1][0][2]) + Math.abs(E[1][0][1]-E[1][0][2])/2-5+flipFactorX*10*cos(rot);
                //var cy = Math.min(E[1][1][1],E[1][1][2]) + Math.abs(E[1][1][1]-E[1][1][2])/2-5+flipFactorY*10*sin(rot); 
                //jg.drawString(letter, cx, cy);
                //jg.drawLine(E[1][0][1],E[1][1][1],E[1][0][2],E[1][1][2]);
                
                var x01 = Math.min(E[1][0][0],E[1][0][1]) + Math.abs(E[1][0][0]-E[1][0][1])/2; 
                var y01 = Math.min(E[1][1][0],E[1][1][1]) + Math.abs(E[1][1][0]-E[1][1][1])/2; 
                var x02 = Math.min(E[1][0][2],E[1][0][3]) + Math.abs(E[1][0][2]-E[1][0][3])/2;
                var y02 = Math.min(E[1][1][2],E[1][1][3]) + Math.abs(E[1][1][2]-E[1][1][3])/2;
                
                var dx = Math.min(x01,x02) + Math.abs(x01-x02)/2-flipFactorX*10*sin(rot);
                var dy = Math.min(y01,y02) + Math.abs(y01-y02)/2-5+flipFactorY*10*cos(rot);            
                
                jg.drawLine(x01,y01,x02,y02);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }  
            this.drawEdgeDOnly=function ()
            {
                visibleEdge(3);
                var x01 = Math.min(E[1][0][0],E[1][0][1]) + Math.abs(E[1][0][0]-E[1][0][1])/2; 
                var y01 = Math.min(E[1][1][0],E[1][1][1]) + Math.abs(E[1][1][0]-E[1][1][1])/2; 
                var x02 = Math.min(E[1][0][2],E[1][0][3]) + Math.abs(E[1][0][2]-E[1][0][3])/2;
                var y02 = Math.min(E[1][1][2],E[1][1][3]) + Math.abs(E[1][1][2]-E[1][1][3])/2;
                jg.drawLine(x01,y01,x02,y02);
                jg.paint();
            }  
            
            //draw edge E
            this.drawEdgeE=function ()
            {
                color=letterAndColor(4,"color");
                letter=letterAndColor(4,"letter");
                jg.setColor(color);
                var cx = Math.min(E[1][0][1],E[2][0][1]) + Math.abs(E[1][0][1]-E[2][0][1])/2-5+flipFactorX*10*cos(rot);
                var cy = Math.min(E[1][1][1],E[2][1][1]) + Math.abs(E[1][1][1]-E[2][1][1])/2-5+flipFactorY*10*sin(rot); 
                
                jg.drawLine(E[1][0][1],E[1][1][1],E[2][0][1],E[2][1][1]);
                jg.drawString(letter, cx, cy);
                jg.paint();
            }   
            this.drawEdgeEOnly=function ()
            {
                visibleEdge(4);
                jg.drawLine(E[1][0][1],E[1][1][1],E[2][0][1],E[2][1][1]);
                jg.paint();
            }
             
            //draw edge F
            this.drawEdgeF=function ()
            {
                color=letterAndColor(5,"color");
                letter=letterAndColor(5,"letter");
                jg.setColor(color);
                var dx = Math.min(E[2][0][1],E[2][0][2]) + Math.abs(E[2][0][1]-E[2][0][2])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[2][1][1],E[2][1][2]) + Math.abs(E[2][1][1]-E[2][1][2])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[2][0][1],E[2][1][1],E[2][0][2],E[2][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeFOnly=function ()
            {
                visibleEdge(5);
                jg.drawLine(E[2][0][1],E[2][1][1],E[2][0][2],E[2][1][2]);
                jg.paint();
            }
            
            //draw edge G (THE ANGLE!)
            this.drawEdgeG=function ()
            {
                color=letterAndColor(6,"color");
                letter=letterAndColor(6,"letter");
                jg.setColor(color);
                jg.setStroke(Stroke.DOTTED); 
                //var dx = Math.min(E[0][0][1],E[3][0][0]) + Math.abs(E[0][0][1]-E[3][0][0])/2-5+flipFactorX*10*sin(rot);
                //var dy = Math.min(E[0][1][1],E[3][1][0]) + Math.abs(E[0][1][1]-E[3][1][0])/2-5+flipFactorY*10*cos(rot); 
                var dx=E[0][0][1]-5+flipFactorX*10*sin(rot);
                var dy=E[0][1][1]-5+flipFactorY*10*cos(rot);;
                
                //jg.drawString("<div style='width:30px; height:30px;' onmouseover='alert(&quot;G=The angle between the wall and the element.&quot;)'>&nbsp;</div>", dx, dy);
                jg.drawLine(E[0][0][1],E[0][1][1],E[3][0][0],E[3][1][0]);
                
                //draw arc1
                var ang1=0;
                
                if(isFlip("v") && !isFlip("h"))
                {
                    ang1 = 360 + parseFloat(rot);
                } 
                
                if(isFlip("h") && !isFlip("v"))
                {
                    ang1 = 540 + parseFloat(rot);    
                }
                
                if(isFlip("v") && isFlip("h"))
                {
                   ang1 =495-parseFloat(rot);  
                }
                
                if(!isFlip("v") && !isFlip("h"))
                {
                    ang1=360-shapeArray[6]/k;
                    ang1 = ang1 -rot;  
                }
                
                var ang2=ang1+shapeArray[6]/k;
                jg.fillArc(E[0][0][1]-25, E[0][1][1]-25, 50, 50, ang1, ang2);
                jg.drawString(letter, dx, dy);  
                jg.paint();
            }
            
            //non required edges (only for visibility purposes)
            //draw edge H
            this.drawEdgeH=function ()
            {
                color=letterAndColor(7,"color");
                letter=letterAndColor(7,"letter");
                //jg.setStroke(1); 
                jg.setColor(color);
                var ax =Math.min(E[2][0][2],E[2][0][3]) + Math.abs(E[2][0][2]-E[2][0][3])/2-flipFactorX*10*cos(rot);
                var ay =Math.min(E[2][1][2],E[2][1][3]) + Math.abs(E[2][1][2]-E[2][1][3])/2-5-flipFactorY*10*sin(rot);
                
                jg.drawLine(E[2][0][2],E[2][1][2],E[2][0][3],E[2][1][3]); //equivalent to: X11,Y11,X14,Y14
                jg.drawString(letter, ax, ay);
                jg.paint();
            }
            this.drawEdgeHOnly=function ()
            {
                visibleEdge(7);
                jg.drawLine(E[2][0][2],E[2][1][2],E[2][0][3],E[2][1][3]);
                jg.paint();
            }
            
            //draw edge I
            this.drawEdgeI=function ()
            {
                color=letterAndColor(8,"color");
                letter=letterAndColor(8,"letter");
                jg.setColor(color);
                var dx = Math.min(E[0][0][3],E[0][0][2]) + Math.abs(E[0][0][3]-E[0][0][2])/2-flipFactorX*10*sin(rot);
                var dy = Math.min(E[0][1][3],E[0][1][2]) + Math.abs(E[0][1][3]-E[0][1][2])/2-5+flipFactorY*10*cos(rot); 
                
                jg.drawLine(E[0][0][3],E[0][1][3],E[0][0][2],E[0][1][2]);
                jg.drawString(letter, dx, dy);
                jg.paint();
            }
            this.drawEdgeIOnly=function ()
            {
                visibleEdge(8);
                jg.drawLine(E[0][0][3],E[0][1][3],E[0][0][2],E[0][1][2]);
                jg.paint();
            }
            
            //draw edge J
            this.drawEdgeJ=function ()
            {
                color=letterAndColor(9,"color");
                letter=letterAndColor(9,"letter");
                jg.setColor(color);
                var cx = Math.min(E[1][0][3],E[1][0][2]) + Math.abs(E[1][0][3]-E[1][0][2])/2-5+flipFactorX*15*sin(rot);
                var cy = Math.min(E[1][1][3],E[1][1][2]) + Math.abs(E[1][1][3]-E[1][1][2])/2-5+flipFactorY*15*cos(rot); 
                
                jg.drawLine(E[1][0][3],E[1][1][3],E[1][0][2],E[1][1][2]);
                jg.drawString("<div style='font-weight:bold'>" + letter + "</div>", cx, cy);
                jg.paint();
            } 
            this.drawEdgeJOnly=function ()
            {
                visibleEdge(9);
                jg.drawLine(E[1][0][3],E[1][1][3],E[1][0][2],E[1][1][2]);
                jg.paint();
            } 
        } 
    }  
    
    function setFlip(varFlip)
    {
        var elem;
        if(varFlip=="h")
        {
            elem = document.getElementById("txt" + shIdx + "FlipH");
        }
        
        if(varFlip=="v")
        {
            elem = document.getElementById("txt" + shIdx + "FlipV");
        }
        
        if(elem.value==varFlip)
        {
            elem.value=""; // reverse flip
        }
        else
        {
            elem.value=varFlip;//varFlip should be h, v, or empty
        }
    }
    
    function isFlip(varFlip)
    {
        var elem;
        if(varFlip=="h")
        {
            elem = document.getElementById("txt" + shIdx + "FlipH");
        }
        
        if(varFlip=="v")
        {
            elem = document.getElementById("txt" + shIdx + "FlipV");
        }
        
        if(elem.value=="h" || elem.value=="v")
        {
            return true;
        }
        
        else
        {
            return false;
        }
    }
// end of drawing functions   

//other functions

//function to return max of an array or second max
function maxOfArray(myArray)
{
    var j=0;
    for(i=0;i<myArray.length;i++)
    {
        if(myArray[i]>myArray[j])
        {
            j=i;
        }
    }
    return myArray[j];
}

//check the entered value to be a number
function checkNo(nr)
{
    var idElem=document.getElementById(nr);
    if (idElem.value!="")
    {
	    k=idElem.value*1;
    	
	    if (isNaN(k))
		{
		    alert("You have entered: " + idElem.value + " This is not a number!");
		    idElem.value="";
		    idElem.focus();
		    return false;
		}
		
		if(k<0)
	    {
	        alert("Please enter a number greater than 0!");
	        idElem.focus();
	        idElem.value="";
	        return false;
	    }    
    }
}

//check for at least empty value in a list of controls
function isOneEmptyValue(noOfControls)
{
        var isEmpty=false;
        for (i=0; i<noOfControls; i++)
        {
            if (document.getElementById("txt" + shIdx + i))
             {
                 if (document.getElementById("txt" + shIdx + i).disabled == false && document.getElementById("txt" + shIdx + i).value == "")
                 {
                     isEmpty=true;       
                 }
             }
        }
        return isEmpty;
}

//function to draw a thick border corresponding to a visible edge
function visibleEdge(edgeIndex)
{
    //enableVizSet hidden control must exist on page and set to 1
    var myConstrain=document.getElementById("enableVizSet");
    var myConstrainReadOnly=document.getElementById("enableVizView");
    var myEdge = document.getElementById("vizbl" + shIdx + edgeIndex);
    jg.setStroke(1);
    if(myConstrain!=null || myConstrainReadOnly!=null)
    {
        if(myEdge!=null)
        {
            if(myEdge.value=="1")
            {
                jg.setStroke(2);
            }
            else
            {
                jg.setStroke(1);
            }           
        }
    }
}

//function to set the visibility property and redraw the shape
function setVisibleEdge(edgeIndex)
{
    var myEdge = document.getElementById("vizbl" + shIdx + edgeIndex);
    if(myEdge!=null)
    {
        if(myEdge.value=="1")
        {
            myEdge.value="0";
        }
        else
        {
            myEdge.value="1";
        }           
    }
    drawShape(document.getElementById("hidShape").value);
}

//function to add a div and an onClick property to the Edge letter
function setLetterDiv(edgeIndex,letr)
{
    //enableVizSet hidden control must exist on page and set to 1
    var myConstrain=document.getElementById("enableVizSet");
    var retVal=letr;
    if(myConstrain!=null)
    {
        if(myConstrain.value=="1")
        {
            retVal="<div onclick='setVisibleEdge(" + edgeIndex + ")' style='cursor:hand;'>" + letr + "</div>";
        }
    }
    return retVal;
}

//associate a color to a letter (or edge name)
function letterAndColor(position, returnVal)
{
        var retDiv="";
        var letterText="";
        var enableShowDim=document.getElementById("enableShowDim");//switch to display dimmension on the drawing
        var letters = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O");
        var colors = new Array("#0000FF", "#FF0000", "#009900", "#FF00CC", "#336699", "#CC6666", "#00CC33", "#33CCFF", "#9966CC", "#99CC99", "#66FF33", "#FF0080", "#000033", "#9933FF", "#99CCFF");
        if (returnVal == "letter")
        {
            visibleEdge(position);
            letterText=letters[position];
            if(enableShowDim!=null)
            {
                if(enableShowDim.value=="1")
                {
                    origLength=shapeArray[position]*1/k;
                    if (document.getElementById("txt" + shIdx + position) != null)
                    {
                        origLength = document.getElementById("txt" + shIdx + position).value;
                    }
                    if(!isNaN(origLength) && origLength!="" && origLength!="0")
                    {
                        letterText=letters[position] + "=" + origLength;
                        letterText=textToLayout(letterText);
                    }
                }
            }            
            retDiv=setLetterDiv(position,letterText);
            return retDiv;
        }
        else
        {
            return colors[position];
        }
}

//function to create a string with the dragclass defined
function textToLayout(varText)
{
    var myText="<div class='dragclass' style='background-color:#ffffff; border:1px solid #000000;padding:2px;'>" + varText + "</div>";
    return myText;
}

//function to get mouse coordinates
    
//    var IE = document.all?true:false;// Detect if the browser is IE or not.

//    // If !IE -- then set up for mouse capture
//    if (!IE) document.captureEvents(Event.MOUSEMOVE)

//    // Set-up to use getMouseXY function onMouseMove
//    document.onmousemove = getMouseXY;

//    var tempX = 0
//    var tempY = 0
//    
//    function getMouseXY(e)
//    {

//      if (IE) { // grab the x-y pos.s if browser is IE
//        tempX =  event.clientX + document.body.scrollLeft
//        tempY = event.clientY + document.body.scrollTop
//      } else {  // grab the x-y pos.s if browser is not IE
//        tempX = e.pageX
//        tempY = e.pageY
//      }  
//      // catch possible negative values in NS4
//      if (tempX < 0){tempX = 0}
//      if (tempY < 0){tempY = 0}  

//      document.forms[0].ctoHob.value = tempX
//      document.forms[0].ctoSinkUB.value = tempY
//    }
//--------------------------------------------------

//disable enable control
function disableEnable(varElementId)
{
    var el=document.getElementById(varElementId);
    if(el.disabled==true)
    {
        el.disabled=false;
        el.style.backgroundColor="";
    }
    else
    {
        el.disabled=true;
        el.style.backgroundColor="#c3c3c3";
    }   
}

//trim string
function trim(inputString) {
   // Removes leading and trailing spaces from the passed string. Also removes
   // consecutive spaces and replaces it with one space. If something besides
   // a string is passed in (null, custom object, etc.) then return the input.
   if (typeof inputString != "string") { return inputString; }
   var retValue = inputString;
   var ch = retValue.substring(0, 1);
   while (ch == " ") { // Check for spaces at the beginning of the string
      retValue = retValue.substring(1, retValue.length);
      ch = retValue.substring(0, 1);
   }
   ch = retValue.substring(retValue.length-1, retValue.length);
   while (ch == " ") { // Check for spaces at the end of the string
      retValue = retValue.substring(0, retValue.length-1);
      ch = retValue.substring(retValue.length-1, retValue.length);
   }
   while (retValue.indexOf("  ") != -1) { // Note that there are two spaces in the string - look for multiple spaces within the string
      retValue = retValue.substring(0, retValue.indexOf("  ")) + retValue.substring(retValue.indexOf("  ")+1, retValue.length); // Again, there are two spaces in each of the strings
   }
   return retValue; // Return the trimmed string back to the user
}

//function to delete an element in an array

function delItem(varElementId,varPosition)
{
    var el=document.getElementById(varElementId);
    var str="";
    if(el.value!="")
    {
        var myArray=el.value.split("|");
        for(i=0;i<myArray.length;i++)
        {
            if(trim(myArray[i])!="" && i==varPosition)
            {
                var myConfirm=confirm("Are you sure you want to remove " + myArray[i].split(";")[0] + "?");
                if(myConfirm)
                {
                    myArray.splice(i,1);
                }
            }
        }
        for(i=0;i<myArray.length;i++)
        {
           if(trim(myArray[i]!=""))
           {
                str=str+myArray[i]+"|";
           }
        }
        el.value=str;
    }
}

//transfer value from one control to another
function transferValue(fromElementId, toElementId)
{
    var el=document.getElementById(fromElementId);
    var toEl=document.getElementById(toElementId);
    
    if(el.value=="Other")
    {
        toEl.value="";
        toEl.style.visibility="visible";
        alert("Please note, when selecting a non standard width, we will base the price on the next available fixed profile width. For example: if you enter 615mm, we will give you the price for the 640mm element. In order to obtain an optimum price we suggest you select a standard element width.\n\nIf , however, you select a size greater than 900mm in width, we will then forward your top plan to Hafele (N.Z.) Limited to obtain a price. If you want to obtain a price immediately, please enter a value less than 900mm or select one of the predefined element widths from the list.");
        toEl.focus();
    }
    else
    {
        toEl.style.visibility="hidden";
        toEl.value=el.value;
    }
}

//function to check empty value
function checkEnteredValue(myElementId)
{
    var el=document.getElementById(myElementId);
    
    if(trim(el.value)=="")
    {
        alert("Please enter a value for edge dimension.");
        setTimeout("document.getElementById('" + myElementId + "').focus()",1); //use this due to Firefox set focus issue
        //el.focus();
    }
}

//function to enable submit button if Terms And Conditions are accepted
function enDisSubmitOrder(caseBtn)
{
    var elCk=document.getElementById("ckAcceptTerms");
    var elSub=document.getElementById("btnSubmitOrder");
    var elCk2=document.getElementById("ckAcceptTerms2");
    var elSub2=document.getElementById("btnSubmitOrder2");
    
    if (caseBtn=="")
    {
        if(elCk.checked==true)
        {
            elSub.disabled=false;
            elSub2.disabled=false;
            elCk2.checked=true; 
        }
        else
        {
            elSub.disabled=true;
            elSub2.disabled=true;
            elCk2.checked=false;
        }
    }
    else if (caseBtn=="2")
    {
        if(elCk2.checked==true)
        {
            elSub.disabled=false;
            elSub2.disabled=false;
            elCk.checked=true; 
        }
        else
        {
            elSub.disabled=true;
            elSub2.disabled=true;
            elCk.checked=false;
        }
    }
}

//function to add a value;action pair to hidden fields and submit the form
function addAction(myAction,myValue, myShape, myColor)
{
    var el=document.getElementById("hidAction");
    var ela=document.getElementById("hidValueAct");
    var elColor=document.getElementById("hidColor");
    var elShape=document.getElementById("hidShape");
    
    if(myAction=="delete")
    {
        var myConf=confirm("Do you want to delete this shape?");
        if(!myConf)
        {
            return;
        }
    }
    else
    {
        elShape.value=myShape;
        elColor.value=myColor;
    }
    
    if(el!=null)
    {
        el.value=myAction;
    }
    if(ela!=null)
    {
        ela.value=myValue;
    }
    document.forms[0].submit();
}

//edit job name and KM range
function editJobDetails()
{
    var jobDiv=document.getElementById("divEditJob");
    var radBtn=document.forms[0].radOption;
    var btnConfirm=document.getElementById("btnConfirm");
     
    if(radBtn[2].checked)
    {
        jobDiv.style.visibility="visible";
        btnConfirm.disabled=true;
    }
    else
    {
        jobDiv.style.visibility="hidden";
        btnConfirm.disabled=false;
    }
}