// Initialize Canvas
canvas = document.getElementById("canvas");
var stage = new createjs.Stage("canvas");
//
var newPiesiValue = 0;
var oldPiesiValue = 0;

// Create Canvas elements
//Initialize Base Container Elements
var base_container = new createjs.Container();
var base_rect = new createjs.Shape();
var base_circle = new createjs.Shape();
var inner_circle = new createjs.Shape();

//Initialize Lines Container Elements
var lines_container = new createjs.Container();
var length_line = new createjs.Shape();
var length_line_arrow = new createjs.Shape();
var length_lineDashed = new createjs.Shape();
var angleCurve = new createjs.Shape();

//Dashed Elements
var axisTop_dashed_rect = new createjs.Shape();
var dashed_rect = new createjs.Shape();
var helpDashed_rect = new createjs.Shape();

//Initialize texts on Canvas

var mek_piesi = new createjs.Text("Πίεση Αερίων\nΘαλάμου Καύσης\n\np = F / A", "bold 20px Arial", "#990000");
mek_piesi.textAlign = "center";
mek_piesi.x = 430;
mek_piesi.y = 10;
//
var mek_angle = new createjs.Text("φ", "bold 20px Arial", "purple");
mek_angle.textAlign = "center";
mek_angle.x = 290;
mek_angle.y = 400;
//
var mek_results = new createjs.Text("Μοχλοβραχίονας \n\n d = 0,00000 m \n----------------\nΡοπή\n\n M = 0,00 N &sdot; m", "bold 18px Arial", "#333");
mek_results.textAlign = "center";
mek_results.x = 450;
mek_results.y = 10;
//AXIS TOP
axisTop_dashed_rect.graphics.setStrokeStyle(1).beginStroke("blue").drawRect(145, 60, 140, 1);

//help xLine for keeping the angle.
helpDashed_rect.graphics.setStrokeDash([10, 11.9]).setStrokeStyle(1).beginStroke("#990000").drawRect(100, 160, 300, 1);

//MEK Container
var mek_container = new createjs.Container();

/*-- Show Elements On Canvas --*/
//Final Container
mek_container.shadow = new createjs.Shadow("#333", 2, 5, 10);
mek_container.x = 245;
mek_container.y = 80;
//
mek_container.scaleX = mek_container.scaleY = 0.8;

//Thalamos Kausis
var thalamosKausis = new createjs.Shape();
thalamosKausis.graphics.setStrokeStyle(3).beginStroke("#000099").beginFill("rgba(0, 0, 0, 0.0").drawRect(228, -30, 90, 206); //228,-30,90,206
var thalamosKausisLine = new createjs.Shape();
thalamosKausisLine.graphics.setStrokeStyle(3).beginStroke("#cccccc").beginFill("rgba(0, 0, 0, 0.0").drawRect(231, 175, 84, 2);

//F
// F text
var mek_forceF = new createjs.Text("F", "bold 20px Arial", "#eca137");
mek_forceF.textAlign = "center";
mek_forceF.x = 0;
mek_forceF.y = 0;
//
var forceF_txtContainer = new createjs.Container();
forceF_txtContainer.addChild(mek_forceF);
//
forceF_txtContainer.x = 60;
forceF_txtContainer.y = 15;
var F = new createjs.Shape();
F.graphics.beginFill("#eca137").drawRoundRect(0, 0, 8, 130, 2, 2, 2, 2);
F.graphics.beginFill("#eca137").drawPolyStar(4, 130, 20, 3, 0, 90);
F.x = 36;
F.y = 0;
//Scale F line and F arrow shapes
F.scaleX = F.scaleY = 0.6;

//Fg
var Fg = new createjs.Shape();
Fg.graphics.beginFill("#990000").drawRoundRect(0, 8, 8, 120, 2, 2, 2, 2);
Fg.graphics.beginFill("#990000").drawPolyStar(4, 120, 20, 3, 0, 90);
Fg.x = 36;
Fg.y = 0;
//Scale Fg line and Fg arrow shapes
Fg.scaleX = Fg.scaleY = 0.6;

// FG texts
var mek_force = new createjs.Text("F", "bold 20px Arial", "#990000");
mek_force.textAlign = "center";
mek_force.x = 0;
mek_force.y = 0;
var mek_force_subTxt = new createjs.Text("G", "bold 13px Arial", "#990000");
mek_force_subTxt.x = mek_force.x + 5;
mek_force_subTxt.y = mek_force.y + 10;
//
var fg_txtContainer = new createjs.Container();
fg_txtContainer.addChild(mek_force_subTxt, mek_force);
//
fg_txtContainer.x = 288;
fg_txtContainer.y = 72;
//D
var D_txt = new createjs.Text("D", "bold 24px Arial", "#000099");
D_txt.textAlign = "center";
D_txt.x = 2;
D_txt.y = 0;

//D blue Arrow right
var D_R = new createjs.Shape();
D_R.graphics.beginFill("#000099").drawRect(-45, 8, 30, 4);
D_R.graphics.beginFill("#000099").drawPolyStar(-45, 10, 10, 3, 0, 180);
//D blue Arrow left
var D_L = new createjs.Shape();
D_L.graphics.beginFill("#000099").drawRect(18, 8, 30, 4);
D_L.graphics.beginFill("#000099").drawPolyStar(45, 10, 10, 3, 0, 360);
//

var D_container = new createjs.Container();
D_container.addChild(D_R, D_L, D_txt);
D_container.x = 34;
D_container.y = -130;

//N
var N = new createjs.Shape();
N.graphics.beginFill("#333333").drawRoundRect(0, 0, 40, 8, 2, 2, 2, 2);
N.graphics.beginFill("#333333").drawPolyStar(50, 4, 20, 3, 0, 360);
N.x = 41;
N.y = 0;
N.rotation = 180;

//Scale N line and N arrow shapes
N.scaleX = N.scaleY = 0.6;
//N text
N_txt = new createjs.Text("N", "bold 20px Arial", "#333333");
N_txt.x = 240;
N_txt.y = 80;

//Add Childs to Containers
base_container.addChild(base_rect, base_circle, inner_circle);
lines_container.addChild(length_line, length_line_arrow, length_lineDashed);
length_line.alpha = 0.2;
//FgContainer
var F_container = new createjs.Container();
F_container.addChild(F, forceF_txtContainer);
F_container.x = 235;
F_container.y = 120;

//Fg Container
var Fg_N_container = new createjs.Container();
Fg_N_container.addChild(Fg);
Fg_N_container.x = 235;
Fg_N_container.y = 35;
//N Container
var N_container = new createjs.Container();
N_container.addChild(N);
N_container.x = 235;
N_container.y = 120;

//Images

//trigonoDinamewn
var trigonoDinamewn = new createjs.Bitmap("images/trigonoDinamewn.png");
trigonoDinamewn.shadow = new createjs.Shadow("#333", 2, 5, 10);
trigonoDinamewn.x = 380;
trigonoDinamewn.y = 350;
trigonoDinamewn.scaleX = trigonoDinamewn.scaleY = 0.89;

//Ypomnima
var ipomnima = new createjs.Bitmap("images/shapeHelp.png");
ipomnima.shadow = new createjs.Shadow("#333", 2, 5, 10);
ipomnima.x = 380;
ipomnima.y = 70;
ipomnima.scaleX = ipomnima.scaleY = 0.7;
//piesi
var pShape = new createjs.Bitmap("images/p-shape.png");
pShape.x = -22;
pShape.y = -60;
pShape.scaleX = pShape.scaleY = 1;
pShape.alpha = 0.5;
//Add Container to Main Stage Container
mek_container.addChild(dashed_rect, base_container, lines_container, angleCurve, pShape, D_container);
//All Shapes Container
var canvasShapesContainer = new createjs.Container();
canvasShapesContainer.y = 150;
//add final shape to stage
canvasShapesContainer.addChild(thalamosKausis, thalamosKausisLine, mek_container, Fg_N_container, N_container, N_txt, F_container, fg_txtContainer);
stage.addChild(canvasShapesContainer);

function addShapesOnStage() {
    stage.addChild(ipomnima);
}

function removeShapesOnStage() {
    stage.removeChild(ipomnima);
}

function addForceOnStage() {
    stage.addChild(trigonoDinamewn);
}

function removeForceOnStage() {
    stage.removeChild(trigonoDinamewn);
}

//Align Separate Containers inside the mek_container
//Base Container
base_container.x = 0;
//Lines Container
lines_container.x = 0;

//Stage update
stage.update();

/* -- Draw Base Container -- */
//Childs of Base Container
base_rect.graphics.setStrokeStyle(4).beginStroke("#000").beginFill("rgba(130, 162, 160, 0.7").drawRect(-15, -15, 100, 135);
//
base_circle.graphics.setStrokeStyle(4).beginStroke("#333").beginFill("#f3f3f3").drawCircle(35, 50, 15);
inner_circle.graphics.beginFill("#333").drawCircle(35, 50, 8);

/* -- Draw Lines Container -- */
//Length Line Init-lineLength(lineHeight, lineRotation)
lineLength(260, 0);
////arrowLength(35, 180, 90);

/* -- Dashed Main Line -- */
dashed_rect.graphics.setStrokeDash([10, 19.4]).setStrokeStyle(1).beginStroke("#000").drawRect(35, -15, 1, 415);


/* -- Function Shapes  -- */
//Function Forces Opacity
function forcesOpacity(piesiValue) {
    newPiesiValue = piesiValue;
    console.log("Nea Piesi = " + newPiesiValue);
    console.log("Palia Piesi = " + oldPiesiValue);
    if (newPiesiValue == 0) {
        elementsOpacity(piesiValue);
        //
        oldPiesiValue = newPiesiValue;
    } else if (oldPiesiValue < newPiesiValue) {

        elementsOpacity(newPiesiValue);
        oldPiesiValue = newPiesiValue;

        //Assign oldPiesiValue
        oldPiesiValue = newPiesiValue;
    } else if (oldPiesiValue > newPiesiValue) {
        elementsOpacity(newPiesiValue);
    }
}
//Forces Elements Opacity
function elementsOpacity(range) {
    if (range == 0) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 0;
    } else if (range > 0 && range <= 10) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 0.35;
    } else if (range > 10 && range <= 20) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 0.45;
    } else if (range > 20 && range <= 30) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 0.55;
    } else if (range > 30 && range <= 40) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 0.65;
    } else if (range > 40 && range <= 50) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 0.75;
    } else if (range > 50 && range <= 60) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 0.8;
    } else if (range > 70 && range <= 80) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 0.85;
    } else if (range > 80 && range <= 90) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 0.9;
    } else if (range > 90 && range <= 100) {
        Fg.alpha = fg_txtContainer.alpha = N_txt.alpha = N_container.alpha =
            F_container.alpha = 1;
    }
}
//Function for Length Line
function lineLength(lineHeight, lineRotation) {
    length_line.graphics.clear();
    length_line.graphics.beginFill("#663300").drawRoundRect(0, 0, 8, lineHeight, 2, 2, 2, 2);
    length_line.x = 31;
    length_line.y = 50;
    length_line.rotation = lineRotation;
}
//Function Rotating the F Arrow
function rotateF(x, y, height, rotation, txtX) {
    F.graphics.clear();
    F.graphics.beginFill("#eca137").drawRoundRect(0, 0, 8, 130, 2, 2, 2, 2);
    F.graphics.beginFill("#eca137").drawPolyStar(4, 130, 20, 3, 0, 90);
    F.rotation = rotation;
    forceF_txtContainer.x = txtX;
}

//Function for Angle Curve Dashed
function angleCurvehDashed(l1, l2, l3, l4) {
    angleCurve.graphics.clear();
    angleCurve.graphics.setStrokeDash([10, 11.9]).setStrokeStyle(3).beginStroke("purple").moveTo(35, 250).quadraticCurveTo(l1, l2, l3, l4);
}

/*-- Move Shapes Functions --*/
function getD(val) {
    thalamosKausis.graphics.clear();
    thalamosKausisLine.graphics.clear();
    D_R.graphics.clear();
    D_L.graphics.clear();
    N.graphics.clear();
    base_rect.graphics.clear();
    if (val == 0.035) {
        //N
        N.graphics.beginFill("#333333").drawRoundRect(0, 0, 40, 8, 2, 2, 2, 2);
        N.graphics.beginFill("#333333").drawPolyStar(50, 4, 20, 3, 0, 360);
        //Base Rect
        base_rect.graphics.setStrokeStyle(4).beginStroke("#000").beginFill("rgba(130, 162, 160, 0.7").drawRect(-15, -15, 100, 135);
        //Thalamos
        thalamosKausis.graphics.setStrokeStyle(3).beginStroke("#000099").beginFill("rgba(0, 0, 0, 0.0").drawRect(228, -30, 90, 206);
        //
        thalamosKausisLine.graphics.setStrokeStyle(3).beginStroke("#cccccc").beginFill("rgba(0, 0, 0, 0.0").drawRect(231, 175, 84, 2);
        //Arrow Right
        D_R.graphics.beginFill("#000099").drawRect(-38, 8, 24, 4);
        D_R.graphics.beginFill("#000099").drawPolyStar(-38, 10, 10, 3, 0, 180);
        //Arrow Left  
        D_L.graphics.beginFill("#000099").drawRect(16, 8, 30, 4);
        D_L.graphics.beginFill("#000099").drawPolyStar(42, 10, 10, 3, 0, 360);
        //
        pShape.x = -22;
        pShape.y = -60;
        pShape.scaleX = pShape.scaleY = 1;
    } else if (val == 0.075) {
        //N
        N.graphics.beginFill("#333333").drawRoundRect(0, 0, 50, 8, 2, 2, 2, 2);
        N.graphics.beginFill("#333333").drawPolyStar(60, 4, 20, 3, 0, 360);
        //Base Rect
        base_rect.graphics.setStrokeStyle(4).beginStroke("#000").beginFill("rgba(130, 162, 160, 0.7").drawRect(-22, -15, 115, 135);
        //Thalamos
        thalamosKausis.graphics.setStrokeStyle(3).beginStroke("#000099").beginFill("rgba(0, 0, 0, 0.0").drawRect(221, -30, 105, 206);
        //
        thalamosKausisLine.graphics.setStrokeStyle(3).beginStroke("#cccccc").beginFill("rgba(0, 0, 0, 0.0").drawRect(224, 175, 99, 2);
        //Arrow Right
        D_R.graphics.beginFill("#000099").drawRect(-46, 8, 24, 4);
        D_R.graphics.beginFill("#000099").drawPolyStar(-46, 10, 10, 3, 0, 180);
        //Arrow Left  
        D_L.graphics.beginFill("#000099").drawRect(24, 8, 30, 4);
        D_L.graphics.beginFill("#000099").drawPolyStar(48, 10, 10, 3, 0, 360);
        //
        pShape.x = -32;
        pShape.y = -66;
        pShape.scaleX = pShape.scaleY = 1.2;
    } else if (val == 0.1) {
        //N
        N.graphics.beginFill("#333333").drawRoundRect(0, 0, 56, 8, 2, 2, 2, 2);
        N.graphics.beginFill("#333333").drawPolyStar(66, 4, 20, 3, 0, 360);
        //Base Rect
        base_rect.graphics.setStrokeStyle(4).beginStroke("#000").beginFill("rgba(130, 162, 160, 0.7").drawRect(-26, -15, 125, 135);
        //Thalamos
        //Thalamos
        thalamosKausis.graphics.setStrokeStyle(3).beginStroke("#000099").beginFill("rgba(0, 0, 0, 0.0").drawRect(217, -30, 115, 206);
        //
        thalamosKausisLine.graphics.setStrokeStyle(3).beginStroke("#cccccc").beginFill("rgba(0, 0, 0, 0.0").drawRect(220, 175, 109, 2);
        //Arrow Right
        D_R.graphics.beginFill("#000099").drawRect(-50, 8, 24, 4);
        D_R.graphics.beginFill("#000099").drawPolyStar(-50, 10, 10, 3, 0, 180);
        //Arrow Left   
        D_L.graphics.beginFill("#000099").drawRect(30, 8, 30, 4);
        D_L.graphics.beginFill("#000099").drawPolyStar(52, 10, 10, 3, 0, 360);
        //
        pShape.x = -37;
        pShape.y = -70;
        pShape.scaleX = pShape.scaleY = 1.3;
    }
}
//Connection Circle
function moveShapes(angle, length_l) {
    if (angle >= 5 && length_l >= 0.1) {
        stage.addChild(mek_angle);
    }

    /* Move Lenght Line (Brown LIne) */
    if (length_l >= 0.1 && length_l <= 1) {
        //dashedMainLine(10, 19.4, 35, -15, 1, 415);
        //lineLength(lineHeight, lineRotation)
        lineLength(260, 0);
        /*----Angle 5----*/
        if (angle == 5) {
            mek_angle.x = 285;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -10);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -10, 60);

            //Angle Curve
            angleCurvehDashed(90, 250, 70, 250);
        }
        /*----Angle 6----*/
        else if (angle == 6) {
            mek_angle.x = 285;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -14);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -14, 62);

            //Angle Curve
            angleCurvehDashed(90, 250, 70, 248);
        }
        /*----Angle 7----*/
        else if (angle == 7) {
            mek_angle.x = 285;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -16);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -16, 64);

            //Angle Curve
            angleCurvehDashed(90, 250, 90, 240);
        }
        /*----Angle 8----*/
        else if (angle == 8) {
            mek_angle.x = 290;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -20);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -20, 66);

            //Angle Curve
            angleCurvehDashed(90, 250, 100, 235);
        }
        /*----Angle 9----*/
        else if (angle == 9) {
            mek_angle.x = 300;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -22);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -22, 66);

            //Angle Curve
            angleCurvehDashed(90, 250, 105, 235);
        }
        /*----Angle 10----*/
        else if (angle == 10) {
            mek_angle.x = 300;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -23);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -23, 66);

            //Angle Curve
            angleCurvehDashed(90, 250, 108, 235);
        }
        /*----Angle 11----*/
        else if (angle == 11) {
            mek_angle.x = 300;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -24);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -24, 66);

            //Angle Curve
            angleCurvehDashed(90, 250, 108, 235);
        }
        /*----Angle 12----*/
        else if (angle == 12) {
            mek_angle.x = 300;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -25);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -25, 66);

            //Angle Curve
            angleCurvehDashed(90, 250, 110, 235);
        }
        /*----Angle 13----*/
        else if (angle == 13) {
            mek_angle.x = 300;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -26);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -26, 66);

            //Angle Curve
            angleCurvehDashed(90, 250, 115, 235);
        }
        /*----Angle 14----*/
        else if (angle == 14) {
            mek_angle.x = 300;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -27);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -27, 66);

            //Angle Curve
            angleCurvehDashed(90, 250, 125, 235);
        }
        /*----Angle 15----*/
        else if (angle == 15) {
            mek_angle.x = 300;
            //lineLength(lineHeight, lineRotation)
            lineLength(260, -28);

            //rotateF(x, y, height, rotation, txtX)
            rotateF(0, 0, 130, -28, 66);

            //Angle Curve
            angleCurvehDashed(90, 250, 130, 235);
        }
    }

    stage.update();
    // Stage update
}