/**
 * 
 */

//Παράμετροι γραφήματος
var graphBorder=15;
var graphLeft;
var graphTop;
var graphHeight=0;
var graphWidth=0;
var graphGridStep=0;
var pixelsPerGridStep=25;
var graphHovering=false;
var graphPanning=false;
var graphPanX=-1;
var graphPanY=-1;
var dyGraphRange=0;
var graphPaperColor=230;

//Παράμετροι κύματος
var waveOriginalT=2;
var waveOriginalLamda=2;
var waveA=2;
var waveT=waveOriginalT;
var waveLamda=waveOriginalLamda;
var yMin=-2.5*waveA;
var yMax=-yMin;

//Παράμετροι απεικόνισης
var noOfWavesVisible=1;

var gridSizeCorrection=5;

var xFinal=noOfWavesVisible*waveOriginalLamda;
var xInit=0;
var xAlpha=0;
var xBeta=0;
var yAlpha=0;
var yBeta=0;
var noOfPointsPerLamda=40;
var noOfPointsPerPeriod=240;
var dt=0;
var transitionStage=true;
var reflectedWaveAmplitudeMultiplier=1;
var xOrigin=0;
var yOrigin=0;
var columnWidth=2;
var offsetPercentage=0.5;
var finalRed=250;
var finalGreen=250;
var finalBlue=210;


function nextFrame(){
    if(!changingSimulationParameters){
        if(transitionEffect){
            nextTransitionStep();
        }
        updateTheta();
        drawScene();
    }

}

function initialisePage(){
    $("#unitTitle").html(unitTitle[currentPage]);
    cnvWidth=canvas.width;
    cnvHeight=canvas.height;
    Xc=cnvWidth/2;
    Yc=cnvHeight/2;
    
    initialising=true;
    initialTheta=-dTheta;
    noOfTransitionSteps=2*document.getElementById("noOfCircles").max;
    cPicker=document.getElementById("colorPicker");
    initialiseScene();
    updateWaveAmplitude();
    initialiseExperiment();
    initialising=false;
    nextFrame();
}

function mouseMoveDraw(shiftKeyPressed,ctrlKeyPressed,altKeyPressed){

}

function mouseDownDraw(){

}

function mouseUpDraw(){

}

function drawScene(){
    if(!initialising){
        clearCanvas();
        renderGraph();
    }
}

function renderGraph(){
    xOrigin=0;
    yOrigin=0;
    
    graphWidth=(canvasWidth-2*graphBorder);
    graphGridStep=graphWidth/(4*noOfWavesVisible);//Υποδιαίρεση ανά λ/4
    graphHeight=parseInt((canvasHeight-2*graphBorder)/pixelsPerGridStep)*pixelsPerGridStep;
    graphLeft=graphBorder;
    graphTop=graphBorder;
    
    defineGraphParameters();
    defineNoOfCircles();
    //ΣΧΕΔΙΑΣΗ ΧΙΛΙΟΣΤΟΜΕΤΡΙΚΟΥ ΧΑΡΤΙΟΥ
    if($("#boxGraph").is(":checked")){
        cntx.fillStyle="rgb("+graphPaperColor+","+graphPaperColor+","+graphPaperColor+")";
        cntx.fillRect(graphLeft,graphTop,graphWidth,graphHeight);
    }
    else{
        cntx.fillStyle="rgb(250,250,210)"; //χρώμα φόντου καμβά
        cntx.fillRect(graphLeft,graphTop,graphWidth,graphHeight);
    }

    //ΣΧΕΔΙΑΣΗ ΚΥΚΛΩΝ
    drawCircles();
    //ΣΧΕΔΙΑΣΗ ΠΕΡΙΓΡΑΜΜΑΤΟΣ
    if($("#boxGraph").is(":checked")){
        cntx.strokeStyle="rgb(0,0,0)";
        cntx.beginPath();
        cntx.rect(graphLeft,graphTop,graphWidth,graphHeight);
        cntx.stroke();
    }

    //ΣΧΕΔΙΑΣΗ ΑΞΟΝΩΝ
    cntx.strokeStyle="rgb(0,0,235)";
    cntx.lineWidth=2;
    cntx.beginPath();
    //1. ΑΞΟΝΑΣ X
    cntx.moveTo(xAlpha*xOrigin+xBeta,graphTop);
    cntx.lineTo(xAlpha*xOrigin+xBeta,graphTop+graphHeight);
    //2. ΑΞΟΝΑΣ Y
    cntx.moveTo(graphLeft,yAlpha*yOrigin+yBeta);
    cntx.lineTo(graphLeft+graphWidth,yAlpha*yOrigin+yBeta);
    cntx.stroke();
    cntx.lineWidth=1;
    cntx.strokeStyle="rgb(0,0,150)";

    //ΣΧΕΔΙΑΣΗ ΠΛΕΓΜΑΤΟΣ
    if($("#showGraphGrid").is(":checked")){
        //ΥΠΟΔΙΑΙΡΕΣΕΙΣ ΑΞΟΝΑ Χ
        cntx.setLineDash([1,2]);
        
        var i=xAlpha*xOrigin+xBeta;//1ο και 4ο τεταρτημόρια ορατά
        while(i<=graphLeft+graphWidth){
            cntx.beginPath();
            cntx.moveTo(i,graphTop);
            cntx.lineTo(i,graphTop+graphHeight);
            cntx.stroke();
            i+=graphGridStep/gridSizeCorrection;
            /* Στην αρχική έκδοση του λογισμικού, απεικονίζονταν 5 μήκη κύματος (noOfWavesVisible=5)
             * Αυτό όμως δεν επέτρεπε την ανάδειξη της κυματικής κίνησης μέσω αύξησης του πλήθους Ν των μορίων αφού η διαφορά φάσης
             * προέκυπτε noOfWavesVisible*2π/Ν = 5*2π/Ν και όχι 2π/Ν.
             * Άρα το noOfWavesVisible μειώθηκε σε 1.
             * Επειδή το graphGridStep ορίζεται βάσει του noOfWavesVisible, διιρειται δια gridSizeCorrection=5 για να επανέλθει το πλέγμα σε άποδεκτό μέγεθος.  
             */
        }
        var i=xAlpha*xOrigin+xBeta;//2ο και 3ο τεταρτημόρια ορατά
        while(i>graphLeft){
            cntx.beginPath();
            cntx.moveTo(i,graphTop);
            cntx.lineTo(i,graphTop+graphHeight);
            cntx.stroke();
            i-=graphGridStep/gridSizeCorrection;
        }

        //ΥΠΟΔΙΑΙΡΕΣΕΙΣ ΑΞΟΝΑ Y
        var j=yAlpha*yOrigin+yBeta;//3ο και 4ο τεταρτημόρια ορατά
        while(j<graphTop+graphHeight){
            cntx.beginPath();
            cntx.moveTo(graphLeft,j);
            cntx.lineTo(graphLeft+graphWidth,j);
            cntx.stroke();
            j+=graphGridStep/gridSizeCorrection;
        }
        j=yAlpha*yOrigin+yBeta;//1ο και 2ο τεταρτημόρια ορατά
        while(j>graphTop){
            cntx.beginPath();
            cntx.moveTo(graphLeft,j);
            cntx.lineTo(graphLeft+graphWidth,j);
            cntx.stroke();
            j-=graphGridStep/gridSizeCorrection;
        }

        cntx.setLineDash([]);
    }
    
    //ΣΧΕΔΙΑΣΗ ΚΥΜΑΤΙΚΗΣ ΓΡΑΜΜΗΣ
    if($("#drawConnectingLine").is(":checked")){
        drawConnectingLine();
    }
    
    //Διαγραφή τμημάτων γραφικής παράστασης που βρίσκονται εκτός ορίων
    cntx.fillStyle="rgb(250,250,210)"; //χρώμα φόντου καμβά
    cntx.fillRect(0,0,canvasWidth,graphTop-1);//Πάνω
    cntx.fillRect(0,0,graphLeft-1,canvasHeight);//Αριστερά
    cntx.fillRect(0,graphTop+graphHeight+1,canvasWidth,canvasHeight-(graphTop+graphHeight+1));//Κάτω
    cntx.fillRect(graphLeft+graphWidth+1,0,canvasWidth-(graphLeft+graphWidth+1),canvasHeight);//Δεξιά

    var labelSelector=$("#axisLabelSelector").val();
    if(labelSelector!="blank"){
        //ΚΛΙΜΑΚΑ ΕΠΙ ΤΟΥ ΑΞΟΝΑ Χ
        var scaleStep=waveLamda;
        var originalDenominator=1;
        var counter=0;
        if(waveLamda>4){
            scaleStep=waveLamda/4;
            originalDenominator=4;
        }
        else if(waveLamda>2){
            scaleStep=waveLamda/2;
            originalDenominator=2;
        }

        var currentX=xOrigin;
        var infoToShow="0";
        var xScr=xAlpha*currentX+xBeta;
        //Θετικός ημιάξονας
        while(xScr<=graphLeft+graphWidth){
            writeOnCanvas(xScr,yBeta+10,infoToShow,graphFontSize,graphFont,"center","rgb(0,0,0)","rgb(0,0,0)","",true,0);
            currentX+=scaleStep;
            counter++;
            var numerator=counter;
            var denominator=originalDenominator;
            if(denominator % numerator==0){
                denominator/=numerator;
                numerator=1;
            }
            if(labelSelector=="showSymbols"){
                infoToShow="";
                if(numerator!=1 && numerator % denominator!=0 || denominator==1 && numerator!=1){
                    infoToShow=numerator.toString();
                }
                else if(numerator % denominator==0 && numerator / denominator!=1){
                    infoToShow=(numerator/denominator).toString();
                }
                infoToShow+="λ";
                if(numerator % denominator!=0 && denominator!=1){
                    infoToShow+="/"+denominator;
                }
            }
            else{
                infoToShow=currentX;
            }
            xScr=xAlpha*currentX+xBeta;
        }
        //Αρνητικός ημιάξονας
        currentX=xOrigin;
        xScr=xAlpha*currentX+xBeta;
        counter=0;
        infoToShow="0";
        while(xScr>=graphLeft){
            writeOnCanvas(xScr,yBeta+10,infoToShow,graphFontSize,graphFont,"center","rgb(0,0,0)","rgb(0,0,0)","",true,0);
            currentX-=scaleStep;
            counter++;
            var numerator=counter;
            var denominator=originalDenominator;
            if(denominator % numerator==0){
                denominator/=numerator;
                numerator=1;
            }
            if(labelSelector=="showSymbols"){
                infoToShow="-";
                if(numerator!=1 && numerator % denominator!=0 || denominator==1 && numerator!=1){
                    infoToShow+=numerator.toString();
                }
                infoToShow+="λ";
                if(numerator % denominator!=0 && denominator!=1){
                    infoToShow+="/"+denominator;
                }
            }
            else{
                infoToShow=currentX;
            }
            xScr=xAlpha*currentX+xBeta;
        }
        
        //ΚΛΙΜΑΚΑ ΕΠΙ ΤΟΥ ΑΞΟΝΑ Y
        if(labelSelector=="showSymbols"){
            infoToShow="A";
        }
        else{
            infoToShow=waveA;
        }
        var yScr=yAlpha*waveA+yBeta;
        writeOnCanvas(xBeta-2,yScr,infoToShow,graphFontSize,graphFont,"right","rgb(0,0,0)","rgb(0,0,0)","",true,0);
        yScr=-yAlpha*waveA+yBeta;
        writeOnCanvas(xBeta-2,yScr,"-"+infoToShow,graphFontSize,graphFont,"right","rgb(0,0,0)","rgb(0,0,0)","",true,0);
        if(labelSelector=="showSymbols"){
            infoToShow="2A";
        }
        else{
            infoToShow=2*waveA;
        }
        yScr=2*yAlpha*waveA+yBeta;
        writeOnCanvas(xBeta-2,yScr,infoToShow,graphFontSize,graphFont,"right","rgb(0,0,0)","rgb(0,0,0)","",true,0);
        yScr=-2*yAlpha*waveA+yBeta;
        writeOnCanvas(xBeta-2,yScr,"-"+infoToShow,graphFontSize,graphFont,"right","rgb(0,0,0)","rgb(0,0,0)","",true,0);
    }
}

function defineGraphParameters(){
    xAlpha=(canvasWidth-2*graphBorder)/(xFinal-xInit);
    xBeta=graphBorder-xAlpha*xInit;
    yAlpha=graphHeight/(yMin-yMax);
    yBeta=graphBorder-yAlpha*yMax;
}

function updateWaveAmplitude(){
    var newValue=parseFloat($("#waveA").val());
    if(isNaN(newValue) || newValue<parseInt($("#waveA").attr("min")) || newValue>parseInt($("#waveA").attr("max"))){
        $("#waveA").val(waveA);
    }
    else{
        waveA=parseFloat($("#waveA").val());
        drawScene();
    }
}
function updateNoOfCircles(){
    var newValue=parseFloat($("#noOfCircles").val());
    if(isNaN(newValue) || newValue<parseInt($("#noOfCircles").attr("min")) || newValue>parseInt($("#noOfCircles").attr("max"))){
        $("#noOfCircles").val(noOfCircles);
    }
    else{
        noOfCircles=parseFloat($("#noOfCircles").val());
        drawScene();
    }
}

function setTime(fraction){
    if(fraction==8){
        initialTheta+=360/8-dTheta;
    }
    else{
        initialTheta=fraction*360/8-dTheta;
    }
    nextFrame();
}

//---------------------------------------------------------------

var changingSimulationParameters=false;

//κύκλοι
var noOfCircles=1;
var initialTheta=0;
var dTheta=5;
var particleRadius=3;

//σχεδίαση
var circleVisible=true;
var diameterVisible=false;
var radiusVisible=false;
var particleVisible=true;
var projectionVisible=true;
var projectionLineVisible=false;
var connectingLineVisible=false;
var traceVisible=false;
var Xcenter=[];
var Ycenter=[];
var Xpart=[];
var Ypart=[];
var Xosc=[];
var Yosc=[];
var Theta=[];

//χρώματα
var cPicker;

var circRed=0;
var circGreen=0;
var circBlue=0;

var diamRed=0;
var diamGreen=0;
var diamBlue=0;

var radRed=0;
var radGreen=0;
var radBlue=0;

var particleRed=0;
var particleGreen=0;
var particleBlue=0;

var projectionRed=0;
var projectionGreen=0;
var projectionBlue=0;

var projectionLineRed=0;
var projectionLineGreen=0;
var projectionLineBlue=0;

var connectionLineRed=0;
var connectionLineGreen=0;//255;
var connectionLineBlue=0;

//εφφέ μετάβασης
var transitionEffect=false;
var noOfTransitionSteps=1;
var currentTransitionStep;

var dCircRed=0;
var dCircGreen=0;
var dCircBlue=0;

var dDiamRed=0;
var dDiamGreen=0;
var dDiamBlue=0;

var dRadRed=0;
var dRadGreen=0;
var dRadBlue=0;

var dParticleRed=0;
var dParticleGreen=0;
var dParticleBlue=0;

var dProjectionRed=0;
var dProjectionGreen=0;
var dProjectionBlue=0;

var dProjectionLineRed=0;
var dProjectionLineGreen=0;
var dProjectionLineBlue=0;

var dConnectionLineRed=0;
var dConnectionLineGreen=0;
var dConnectionLineBlue=0;

function initialiseExperiment(){
    initialiseColors();
    setButtonsColors();
}

function setButtonsColors(){
    var colorButton;
    colorButton=document.getElementById("btnCircleColor");
    colorButton.style.backgroundColor="rgb("+circRed+","+circGreen+","+circBlue+")";
    colorButton=document.getElementById("btnDiameterColor");
    colorButton.style.backgroundColor="rgb("+diamRed+","+diamGreen+","+diamBlue+")";
    colorButton=document.getElementById("btnRadiusColor");
    colorButton.style.backgroundColor="rgb("+radRed+","+radGreen+","+radBlue+")";
    colorButton=document.getElementById("btnParticleColor");
    colorButton.style.backgroundColor="rgb("+particleRed+","+particleGreen+","+particleBlue+")";
    colorButton=document.getElementById("btnProjectionColor");
    colorButton.style.backgroundColor="rgb("+projectionRed+","+projectionGreen+","+projectionBlue+")";
    colorButton=document.getElementById("btnProjectionLineColor");
    colorButton.style.backgroundColor="rgb("+projectionLineRed+","+projectionLineGreen+","+projectionLineBlue+")";
    colorButton=document.getElementById("btnConnectionLineColor");
    colorButton.style.backgroundColor="rgb("+connectionLineRed+","+connectionLineGreen+","+connectionLineBlue+")";
}

function defineNoOfCircles(){
    changingSimulationParameters=true;
    var i;
    document.getElementById("noOfCirclesVal").value=document.getElementById("noOfCircles").value;
    noOfCircles=parseInt(document.getElementById("noOfCircles").value);
    if(noOfCircles==1){
        document.getElementById("trDrawConnectingLine").style.visibility="hidden";
    }
    else{
        document.getElementById("trDrawConnectingLine").style.visibility="visible";     
    }
    for(i=Xcenter.length-1;i>-1;i--){
        Xcenter.splice(i,1);
        Ycenter.splice(i,1);
        Xpart.splice(i,1);
        Ypart.splice(i,1);
        Xosc.splice(i,1);
        Yosc.splice(i,1);
        Theta.splice(i,1);
    }
    for(i=0;i<noOfCircles;i++){
        if(noOfCircles==1){
            Xcenter.push(graphLeft+graphWidth/(noOfCircles+1));
        }
        else{
            var centerStep=graphWidth/(noOfCircles-1);
            var j=0;
            while(j*centerStep<=graphWidth){
                Xcenter.push(graphLeft+j*centerStep);
                j++;
            }
        }
        Ycenter.push(yAlpha*yOrigin+yBeta);
        Xpart.push(0);
        Ypart.push(0);
        Xosc.push(0);
        Yosc.push(0);
        Theta.push(0);
    }
    changeTheta();
    experimentInitialised=true;
    changingSimulationParameters=false;
}

function updateTheta(){
    initialTheta=initialTheta+dTheta;
    if(initialTheta>360) initialTheta=initialTheta % 360;
    changeTheta();
}
function changeTheta(){
    var i;
    for(i=0;i<noOfCircles;i++){
        if(noOfCircles==1){
            Theta[i]=initialTheta;
        }
        else{
            var thetaStep=noOfWavesVisible*360/(noOfCircles-1);
            
console.log(thetaStep);
            var newValue=(i*thetaStep);// % 360;
            Theta[i]=initialTheta-newValue;
        }
    }
}

function drawCircles(){
    var Phi,i;
    for(i=0;i<noOfCircles;i++){
        Phi=(360-Theta[i])*Math.PI/180;
        Xpart[i]=Xcenter[i]+waveA*Math.cos(Phi);
        Ypart[i]=Ycenter[i]+waveA*Math.sin(Phi);
        Xosc[i]=Xcenter[i];
        Yosc[i]=Ycenter[i]+waveA*Math.sin(Phi);
        //writeOnCanvas(Xcenter[i],Ycenter[i]-2*waveA,Theta[i].toFixed(0)+"º",graphFontSize,graphFont,"center","rgb(0,0,0)","rgb(0,0,0)","",true,0);
        if($("#drawCircle").is(":checked")){
            cntx.strokeStyle="rgb("+circRed+","+circGreen+","+circBlue+")";
            cntx.beginPath();
            cntx.arc(Xcenter[i],Ycenter[i],waveA,0,2*Math.PI);
            cntx.stroke();
        }
        if($("#drawDiameter").is(":checked")){
            cntx.strokeStyle="rgb("+diamRed+","+diamGreen+","+diamBlue+")";
            cntx.beginPath();
            cntx.moveTo(Xcenter[i],Ycenter[i]-waveA);
            cntx.lineTo(Xcenter[i],Ycenter[i]+waveA);
            cntx.stroke();
        }
        if($("#drawRadius").is(":checked")){
            cntx.strokeStyle="rgb("+radRed+","+radGreen+","+radBlue+")";
            cntx.beginPath();
            cntx.moveTo(Xcenter[i],Ycenter[i]);
            cntx.lineTo(Xpart[i],Ypart[i]);
            cntx.stroke();
        }
        if($("#drawProjectionLine").is(":checked")){
            cntx.lineWidth=3;
            cntx.strokeStyle="rgb("+projectionLineRed+","+projectionLineGreen+","+projectionLineBlue+")";
            cntx.setLineDash([1,2]);
            cntx.beginPath();
            cntx.moveTo(Xpart[i],Ypart[i]);
            cntx.lineTo(Xosc[i],Yosc[i]);
            cntx.stroke();
            cntx.setLineDash([]);
            cntx.lineWidth=1;
        }
        if($("#drawParticle").is(":checked")){
            if(traceVisible){
                cntx.lineWidth=2;
                cntx.strokeStyle="rgb("+particleRed+","+particleGreen+","+particleBlue+")";
                cntx.beginPath();
                cntx.arc(Xcenter[i],Ycenter[i],waveA,-Theta[i]*Math.PI/180,0);
                cntx.stroke();
                cntx.lineWidth=1;
            }
            cntx.fillStyle="rgb("+particleRed+","+particleGreen+","+particleBlue+")";
            cntx.beginPath();
            cntx.arc(Xpart[i],Ypart[i],particleRadius,0,2*Math.PI);
            cntx.fill();
        }
        if($("#drawProjection").is(":checked")){
            if(traceVisible){
                cntx.lineWidth=2;
                cntx.strokeStyle="rgb("+projectionRed+","+projectionGreen+","+projectionBlue+")";
                cntx.beginPath();
                cntx.moveTo(Xcenter[i],Ycenter[i]);
                cntx.lineTo(Xosc[i],Yosc[i]);
                cntx.stroke();
                cntx.lineWidth=1;
            }
            cntx.fillStyle="rgb("+projectionRed+","+projectionGreen+","+projectionBlue+")";
            cntx.beginPath();
            cntx.arc(Xosc[i],Yosc[i],particleRadius,0,2*Math.PI);
            cntx.fill();
        }
    }
}

function drawConnectingLine(){
    var i;
    cntx.strokeStyle="rgb("+connectionLineRed+","+connectionLineGreen+","+connectionLineBlue+")";
    cntx.beginPath();
    cntx.moveTo(Xosc[0],Yosc[0]);
    for(i=1;i<noOfCircles;i++){
        cntx.lineTo(Xosc[i],Yosc[i]);
    }
    cntx.stroke();
}

function toggleDrawCircle(){
    circleVisible=document.getElementById("drawCircle").checked;
    drawScene();
}

function toggleDrawDiameter(){
    diameterVisible=document.getElementById("drawDiameter").checked;
    drawScene();
}

function toggleDrawRadius(){
    radiusVisible=document.getElementById("drawRadius").checked;
    drawScene();
}

function toggleDrawParticle(){
    particleVisible=document.getElementById("drawParticle").checked;
    drawScene();
}

function toggleDrawProjection(){
    projectionVisible=document.getElementById("drawProjection").checked;
    drawScene();
}

function toggleDrawTrace(){
    traceVisible=document.getElementById("drawTrace").checked;
    drawScene();
}

function toggleDrawProjectionLine(){
    projectionLineVisible=document.getElementById("drawProjectionLine").checked;
    drawScene();
}

function toggleDrawConnectingLine(){
    connectingLineVisible=document.getElementById("drawConnectingLine").checked;
    drawScene();
}

function defineCircleColor(){
    cPicker.color.objectType=1;
    cPicker.color.fromRGB(circRed/255,circGreen/255,circBlue/255);
    cPicker.color.showPicker();
}

function defineDiameterColor(){
    cPicker.color.objectType=2;
    cPicker.color.fromRGB(diamRed/255,diamGreen/255,diamBlue/255);
    cPicker.color.showPicker();
}

function defineRadiusColor(){
    cPicker.color.objectType=3;
    cPicker.color.fromRGB(radRed/255,radGreen/255,radBlue/255);
    cPicker.color.showPicker();
}

function defineParticleColor(){
    cPicker.color.objectType=4;
    cPicker.color.fromRGB(particleRed/255,particleGreen/255,particleBlue/255);
    cPicker.color.showPicker();
}

function defineProjectionColor(){
    cPicker.color.objectType=5;
    cPicker.color.fromRGB(projectionRed/255,projectionGreen/255,projectionBlue/255);
    cPicker.color.showPicker();
}

function defineProjectionLineColor(){
    cPicker.color.objectType=6;
    cPicker.color.fromRGB(projectionLineRed/255,projectionLineGreen/255,projectionLineBlue/255);
    cPicker.color.showPicker();
}

function defineConnectionLineColor(){
    cPicker.color.objectType=7;
    cPicker.color.fromRGB(connectionLineRed/255,connectionLineGreen/255,connectionLineBlue/255);
    cPicker.color.showPicker();
}

function transition(){
    $("#boxGraph").attr("disabled",true);
    //χρώμα φόντου καμβά
    finalRed=250;
    finalGreen=250;
    finalBlue=210;

    if($("#boxGraph").is(":checked")){ //χρώμα φόντου γραφήματος
        finalRed=graphPaperColor;
        finalGreen=graphPaperColor;
        finalBlue=graphPaperColor;
    }
    document.getElementById("btnInitColors").style.visibility="hidden";
    initialiseColors();
    document.getElementById("waveA").value=50;
    updateWaveAmplitude();
    
    document.getElementById("noOfCircles").value=1;
    defineNoOfCircles();
    
    enableAllVisualisations();
    
    dCircRed=Math.max((finalRed-circRed)/noOfTransitionSteps,Math.sign(finalRed-circRed));
    dCircGreen=Math.max((finalGreen-circGreen)/noOfTransitionSteps,Math.sign(finalGreen-circGreen));
    dCircBlue=Math.max((finalBlue-circBlue)/noOfTransitionSteps,Math.sign(finalBlue-circBlue));
    
    dDiamRed=Math.max((finalRed-diamRed)/noOfTransitionSteps,Math.sign(finalRed-diamRed));
    dDiamGreen=Math.max((finalGreen-diamGreen)/noOfTransitionSteps,Math.sign(finalGreen-diamGreen));
    dDiamBlue=Math.max((finalBlue-diamBlue)/noOfTransitionSteps,Math.sign(finalBlue-diamBlue));
    
    dRadRed=Math.max((finalRed-radRed)/noOfTransitionSteps,Math.sign(finalRed-radRed));
    dRadGreen=Math.max((finalGreen-radGreen)/noOfTransitionSteps,Math.sign(finalGreen-radGreen));
    dRadBlue=Math.max((finalBlue-radBlue)/noOfTransitionSteps,Math.sign(finalBlue-radBlue));
    
    dParticleRed=Math.max((finalRed-particleRed)/noOfTransitionSteps,Math.sign(finalRed-particleRed));
    dParticleGreen=Math.max((finalGreen-particleGreen)/noOfTransitionSteps,Math.sign(finalGreen-particleGreen));
    dParticleBlue=Math.max((finalBlue-particleBlue)/noOfTransitionSteps,Math.sign(finalBlue-particleBlue));
    
    dProjectionRed=Math.max((finalRed-projectionRed)/noOfTransitionSteps,Math.sign(finalRed-projectionRed));
    dProjectionGreen=Math.max((finalGreen-projectionGreen)/noOfTransitionSteps,Math.sign(finalGreen-projectionGreen));
    dProjectionBlue=Math.max((finalBlue-projectionBlue)/noOfTransitionSteps,Math.sign(finalBlue-projectionBlue));

    dProjectionLineRed=Math.max((finalRed-projectionLineRed)/noOfTransitionSteps,Math.sign(finalRed-projectionLineRed));
    dProjectionLineGreen=Math.max((finalGreen-projectionLineGreen)/noOfTransitionSteps,Math.sign(finalGreen-projectionLineGreen));
    dProjectionLineBlue=Math.max((finalBlue-projectionLineBlue)/noOfTransitionSteps,Math.sign(finalBlue-projectionLineBlue));

    connectionLineRed=finalRed;
    connectionLineGreen=finalGreen;
    connectionLineBlue=finalBlue;
    dConnectionLineRed=Math.min(-connectionLineRed/noOfTransitionSteps,-1);
    dConnectionLineGreen=Math.min(255-connectionLineGreen/noOfTransitionSteps,1);
    dConnectionLineBlue=Math.max((-connectionLineBlue)/noOfTransitionSteps,-1);
    
    currentTransitionStep=0;
    transitionEffect=true;
    if(intervalID<0) startSimulation();
}

function nextTransitionStep(){
    currentTransitionStep++;
    if(currentTransitionStep>2*noOfTransitionSteps) {
        document.getElementById("btnInitColors").style.visibility="visible";
        finaliseColors();
        transitionEffect=false;
        $("#boxGraph").removeAttr("disabled");
    }
    else{
        if(currentTransitionStep<=document.getElementById("noOfCircles").max    ){
            document.getElementById("noOfCircles").value=currentTransitionStep;
            defineNoOfCircles();
        }

        circRed=setTransitionColor(circRed,dCircRed,finalRed);
        circGreen=setTransitionColor(circGreen,dCircGreen,finalGreen);
        circBlue=setTransitionColor(circBlue,dCircBlue,finalBlue);

        diamRed=setTransitionColor(diamRed,dDiamRed,finalRed);
        diamGreen=setTransitionColor(diamGreen,dDiamGreen,finalGreen);
        diamBlue=setTransitionColor(diamBlue,dDiamBlue,finalBlue);

        radRed=setTransitionColor(radRed,dRadRed,finalRed);
        radGreen=setTransitionColor(radGreen,dRadGreen,finalGreen);
        radBlue=setTransitionColor(radBlue,dRadBlue,finalBlue);

        particleRed=setTransitionColor(particleRed,dParticleRed,finalRed);
        particleGreen=setTransitionColor(particleGreen,dParticleGreen,finalGreen);
        particleBlue=setTransitionColor(particleBlue,dParticleBlue,finalBlue);

        projectionRed=setTransitionColor(projectionRed,dProjectionRed,finalRed);
        projectionGreen=setTransitionColor(projectionGreen,dProjectionGreen,finalGreen);
        projectionBlue=setTransitionColor(projectionBlue,dProjectionBlue,finalBlue);

        projectionLineRed=setTransitionColor(projectionLineRed,dProjectionLineRed,finalRed);
        projectionLineGreen=setTransitionColor(projectionLineGreen,dProjectionLineGreen,finalGreen);
        projectionLineBlue=setTransitionColor(projectionLineBlue,dProjectionLineBlue,finalBlue);

        connectionLineRed=setTransitionColor(connectionLineRed,dConnectionLineRed,0);
        connectionLineGreen=setTransitionColor(connectionLineGreen,dConnectionLineGreen,255);
        connectionLineBlue=setTransitionColor(connectionLineBlue,dConnectionLineBlue,0);
    }
    setButtonsColors();
}

function setTransitionColor(col,dCol,finalColor){
    if (dCol>=0){
        return parseInt(Math.min(col+dCol,finalColor)); //255
    }
    else {
        return parseInt(Math.max(col+dCol,finalColor));//0
    }
}

function initialiseColors(){
    circRed=140;
    circGreen=140;
    circBlue=140;

    diamRed=120;
    diamGreen=120;
    diamBlue=120;

    radRed=160;
    radGreen=160;
    radBlue=160;

    particleRed=255;
    particleGreen=0;
    particleBlue=0;

    projectionRed=0;
    projectionGreen=160;
    projectionBlue=0;

    projectionLineRed=255;
    projectionLineGreen=0;
    projectionLineBlue=255;

    connectionLineRed=0;
    connectionLineGreen=255;
    connectionLineBlue=0;
    setButtonsColors();
    
    drawScene();
}

function finaliseColors(){
    //χρώμα φόντου καμβά
    circRed=finalRed;
    circGreen=finalGreen;
    circBlue=finalBlue;

    diamRed=finalRed;
    diamGreen=finalGreen;
    diamBlue=finalBlue;

    radRed=finalRed;
    radGreen=finalGreen;
    radBlue=finalBlue;

    particleRed=finalRed;
    particleGreen=finalGreen;
    particleBlue=finalBlue;

    projectionRed=finalRed;
    projectionGreen=finalGreen;
    projectionBlue=finalBlue;

    projectionLineRed=finalRed;
    projectionLineGreen=finalGreen;
    projectionLineBlue=finalBlue;

    connectionLineRed=0;
    connectionLineGreen=255;
    connectionLineBlue=0; 
}

function enableAllVisualisations(){
    document.getElementById("drawCircle").checked=true;
    document.getElementById("drawDiameter").checked=true;
    document.getElementById("drawRadius").checked=true;
    document.getElementById("drawParticle").checked=true;
    document.getElementById("drawProjection").checked=true;
    document.getElementById("drawProjectionLine").checked=true;
    document.getElementById("drawConnectingLine").checked=true;

    circleVisible=document.getElementById("drawCircle").checked;
    diameterVisible=document.getElementById("drawDiameter").checked;
    radiusVisible=document.getElementById("drawRadius").checked;
    particleVisible=document.getElementById("drawParticle").checked;
    projectionVisible=document.getElementById("drawProjection").checked;
    projectionLineVisible=document.getElementById("drawProjectionLine").checked;
    connectingLineVisible=document.getElementById("drawConnectingLine").checked;
}