
/* global Curve, Chart, Graph, THREE */

// 
// agelis dimitrios 2018 all rights reserved


"use strict";
function log(st) {
    console.log(st)
}
var evn = 0;
var frames = 0;
function click() {
    alert("click");
}
function clickdown(event) {
    alert(event.target.id);
}

function clickhelp() {
    hideelement(getelement("help"));
}
setbackcolor(getelement("body"), "black");
var gf = new GF();
var sm = gf.getmanager();
var ttcolor = "pink";
var appw = sm.width;
var apph = sm.height;
var logw = appw;
var logh = apph;
sm.adddebug(); /// here because form


sm.dwin.drawoutline = true;
sm.dwin.x = 800;
sm.setbackcolor(0, 0, 0);
sm.drawbackground = false; //true; /// dont draw background if have a 2d or 3d app


var scene0 = sm.createscene(); ///  0



scene0.userevent = function (e, type) {
    evn++;
    if (type === "MU") {
    }
//info.title=concat(e.target,evn);
}

////  app 
var appname = "       Εγκατάσταση ζεστού νερού κατοικίας "
var help = [];
help[0] = "Εγκατάσταση ζεστού νερού κατοικίας # Από την παροχή ύδρευσης της κατοικίας έρχεται κρύο νερό στο δοχείο του θερμοσίφωνα που μπορεί στην συνέχεια να θερμανθεί: # # • με συμβατική θέρμανση (μέσω ηλεκτρικής αντίστασης ή καυστήρα). Αυτή η λύση κοστίζει και επιβαρύνει το περιβάλλον # # • μέσω ηλιακού συλλέκτη  που χρησιμοποιεί την ηλιακή ενέργεια που αποτελεί φτηνή, ανανεώσιμη πηγή ενέργειας. # # Το ζεστό νερό μπορεί να καταναλωθεί στην κατοικία και αναπληρώνεται με κρύο που πρέπει εκ νέου να θερμανθεί."
help[1] = "Θέρμανση νερού με ηλιακό Θερμοσίφωνα. # Στην εγκατάσταση του ηλιακού θερμοσίφωνα ο ηλιακός συλλέκτης δεσμεύει την ηλιακή ακτινοβολία που πέφτει κάθετα σε αυτόν και θερμαίνει άμεσα ή έμμεσα (με την βοήθεια υγρού που κυκλοφορεί σε σωληνώσεις)  το νερό που θα χρησιμοποιήσουμε στο σπίτι μας. # Ο προσανατολισμός του συλλέκτη και τα κατασκευαστικά του χαρακτηριστικά (όπως το χρώμα) είναι τέτοια ώστε να έχουμε μέγιστη απορρόφηση ακτινοβολίας. # # Αν δεν επαρκεί η θέρμανση από τον ήλιο (λόγω συννεφιάς ή θέσης του ήλιου) μπορεί να χρησιμοποιηθεί συμβατική θέρμανση. # Τον συντονισμό της λειτουργίας της διάταξης τον αναλαμβάνει η συσκευή ελέγχου.";
help[2] = "Βασικές οδηγίες χειρισμού της προσομοίωσης # Στην προσομοίωση υπάρχουν ρυθμιστές κατανάλωσης ζεστού νερού και ηλιακής ακτινοβολίας. Επίσης υπάρχει ένα θερμόμετρο που δείχνει την θερμοκρασία του ζεστού νερού και διαθέτει ένα ρυθμιστή της ελάχιστης θερμοκρασίας που προσπαθεί να επιτύχει η συμβατική θέρμανση. # # Λειτουργία μόνο με συμβατική θέρμανση (απλός θερμοσίφωνας). # Μηδένισε την ηλιακή ακτινοβολία. # Μετακίνησε τον ρυθμιστή ελάχιστης θερμοκρασίας στην επιθυμητή θερμοκρασία (π.χ. στους 60 βαθμούς Κελσίου). # Παρατήρησε πως η συμβατική θέρμανση προσπαθεί να πετύχει αυτή την θερμοκρασία για μικρή και μεγάλη κατανάλωση νερού. Πότε ενεργοποιείται και πότε σταματά;";
help[3] = "Θέρμανση με ηλιακή ακτινοβολία # Αύξησε την ηλιακή ακτινοβολία και σχολίασε τις αλλαγές που παρατηρείς. # Συμφέρει η χρήση του ηλιακού συλλέκτη; # # Σκέψου! # # • Πως θερμαίνεται το νερό αν έχουμε χαμηλή ηλιακή ακτινοβολία και υψηλή κατανάλωση νερού; # • Γιατί η εσωτερική επιφάνεια του ηλιακού συλλέκτη είναι μαύρη; # • Γιατί οι ηλιακοί συλλέκτες, στο Βόρειο ημισφαίριο της γής, τοποθετούνται έτσι ώστε να βλέπουν τον Νότο;";
var gui = scene0.addform(0, "", 0, 0, appw, apph);
gui.drawbackground = false;
gui.pickable = false;
/// -------------------------resources
var imback = sm.createimage("images/1back.png");
var imrays = sm.createimage("images/1rays.png");
var imblue = sm.createimage("images/1blue.png");
var imbluem = sm.createimage("images/1bluem.png");
var imred = sm.createimage("images/1red.png");
var imredm = sm.createimage("images/1redm.png");
var imleft = sm.createimage("images/1left.png");
var imleftm = sm.createimage("images/1leftm.png");
var imright = sm.createimage("images/1right.png");
var imrightm = sm.createimage("images/1rightm.png");
var imtwo = sm.createimage("images/1two.png");
var imtwom = sm.createimage("images/1twom.png");
var imroof = sm.createimage("images/1roof.png");
var imcloud = sm.createimage("images/1cloud.png");
var imtext = sm.createimage("images/1doxeio.png");
var imth1 = sm.createimage("images/1therm.png");
var imth2 = sm.createimage("images/1therm2.png");
var im95 = sm.createimage("images/95.png");
var immin = sm.createimage("images/1min.png");
var imbox = sm.createimage("images/1box.png");
var imdr = sm.createimage("images/1dot.png");

///------------------  appplication var ---------------------
var t = 0;
///////////////////////////////-------------------

////////////////////////////////-----------------------------
var form0 = gui.addform("form0", "", 0, 0, appw, apph);
form0.backcolor = "white";

var fback = form0.addshape("back", "", (1280 - 1019) / 2, 0, 1019, 672, imback);
var froof = form0.addshape("", "", 766, 100, 247, 137, imroof);
var frays = form0.addshape("ray", "", 812, -65, 337, 280, imrays);
var fdrag1 = form0.addshape("sun", "", 900, 634, 43, 27, imdr);

fdrag1.limit(fdrag1.x, fdrag1.y, fdrag1.x + 140, fdrag1.y);
fdrag1.x += 70;
fdrag1.draggable = true;
fdrag1.cursor = "pointer";

var fdrag2 = form0.addshape("ner", "", 720, 634, 43, 27, imdr);

fdrag2.limit(fdrag2.x, fdrag2.y, fdrag2.x + 140, fdrag2.y);
fdrag2.x += 70;
fdrag2.draggable = true;
fdrag2.cursor = "pointer";
var fdrag3 = form0.addshape("ner", "", 316, 373, 62, 34, immin);

fdrag3.limit(fdrag3.x, 385.113, fdrag3.x, 487);
fdrag3.y = map(20, 99.5, 50, 487, 379);
//alert(map(20,99.5,95,487,379))
fdrag3.draggable = true;
fdrag3.cursor = "pointer";
fdrag3.userdraw = function (ctx) {
    //fdrag3.drawtext(todecimal(fdrag3.y,1),60,0)
    var cth = map(487, 379, fdrag3.y, 20, 99.5);
    targett = cth;
    styles(ctx, "red")
    fdrag3.drawtext(todecimal(cth, 1), 84, 20)
}
var fbox = form0.addshape(0, "", 837, 400 - 112, 58, 43, imbox);
var ftext = form0.addshape(0, "", 860, 322, 110, 101, imtext);

var pf2 = fback.addparticleform(258, 274, 220, 220);
pf2.visible = !false;


pf2.backout(false);

pf2.ps.x2 = 11;
pf2.ps.y2 = 11;
pf2.ps.n = 33;
pf2.ps.rate = 11;
pf2.ps.th1 = torad(105);
pf2.ps.th2 = torad(105);
pf2.ps.v1 = 100;
pf2.ps.v2 = 100;
pf2.ps.life1 = 0.60;
pf2.ps.life2 = 1.00;
pf2.ps.emx2 = 22;
pf2.ps.emy2 = 2;
pf2.ps.images = [imcloud];
pf2.ps.size1 = 7;
pf2.ps.size2 = 36;


psInit(pf2.ps);
pf2.step = function () {

    psStep(pf2.ps, 1 / 60);

}


var kat = 0;
var sun = 0;
var ratewater = -2.5;
var rateoil = 1.5;
var ratesun = 2.75;
var tsuncold = 15;
var tsunhot = 5;
var thome = 20;
var tsol = 0;
var flag = 0;
var targett = 50;
var toler=0.5;
var n1=0;//oil21

var n2=0;//solar
/////-------------------------------------------



function bodyload() {
    create();
    init();
}

function create() {

}


function init() {


}


function update() {


}

fback.userdraw = function (ctx) {
    update();
    var dt = fback.gettimedelta();
    var kat = (fdrag2.x - fdrag2.x0) / 140;
    var sun = (fdrag1.x - fdrag1.x0) / 140;
    frays.alpha = sun;
    pf2.alpha = kat * 0.2;
    styles(ctx, "red")
    fback.drawtext(todecimal(thome, 1), 203, 590, 24)
    thome += rateoil * dt * (thome < targett+toler) + kat * ratewater * dt * (thome > 20) + sun * ratesun * dt * (flag === 2) * (thome < 99.5);
    if (flag === 0 && tsol < 100)         flag = 1;
    if (flag === 1)      tsol += sun * dt * 100 / tsunhot;
    if (flag === 2)         tsol -= dt * 100 / tsuncold * (thome < 99.5);
    if (tsol > 100)   flag = 2;
    if (tsol < 0 && flag === 2)    flag = 0;
    
    if (tsol>100) tsol=100;
     if (tsol<0) tsol=0;
        if (thome>99.5) thome=99.5;
     if (thome<20) thome=20;
     
///ctx.drawImage(imres.image,sx,sy,w,h,0,0,w,h);
    var dy = thome * 135 / 99.5;
    ctx.drawImage(imth1.image, 0, 0, 14, 6, 329, 530 - dy, 14, dy);
    dy = (lerp(20, 100, tsol / 100)) * 105 / 100;
    ctx.drawImage(imth2.image, 0, 0, 11, 7, 544.5, 572 - dy, 11, dy);
    frames++;
    //var n = toint(frames % 25) * (flag === 2) * (thome < 99.5)
    
    
    ctx.save();
    ctx.translate(800, 143);
    var w = 189;
    var h = 262;
    var sc = 1;
    ctx.scale(sc, 1.25)
    subimage(ctx, imblue, n2 % 25, 25, 1, w, h, 0, 0, w, h)
    subimage(ctx, imbluem, 0, 1, 1, w, h, 0, 0, w, h)
    ctx.restore();

    //n = toint(frames % 26) * (flag === 2) * (thome < 99.5)
    ctx.save();
    ctx.translate(737, 105);
    sc = 1;
    ctx.scale(sc, 1.25)
    subimage(ctx, imred, n2 % 26, 26, 1, w, h, 0, 0, w, h);
    subimage(ctx, imredm, 0, 1, 1, w, h, 0, 0, w, h);
    ctx.restore();
       //n = toint(frames % 21) * (flag === 2) * (thome < 99.5)
    ctx.save();
    w = 143;
    h = 192;
    ctx.translate(756, 346);
    sc = 0.82;
    ctx.scale(sc, sc)
    subimage(ctx, imright, n2  % 21, 21, 1, w, h, 0, 0, w, h)
    subimage(ctx, imrightm, 0, 1, 1, w, h, 0, 0, w, h)
    ctx.restore();
 ///////////////////////////////////////////////////////////////////////   
    //n = toint(frames % 21) * (thome <= targett+toler)
    ctx.save();
    w = 144;
    h = 192;
    ctx.translate(750, 295);
    sc = 0.8;
    ctx.scale(sc, sc)
    subimage(ctx, imleft, n1 % 21 , 21, 1, w, h, 0, 0, w, h)
    subimage(ctx, imleftm, 0, 1, 1, w, h, 0, 0, w, h)
    ctx.restore();

 

    //n = toint(frames % 21) * (thome <= targett+toler)
    ctx.save();
    w = 138;
    h = 192;
    ctx.translate(696, 354);
    sc = 0.82;
    ctx.scale(sc, sc)
    subimage(ctx, imtwo, n1 % 21, 21, 1, w, h, 0, 0, w, h);
    subimage(ctx, imtwom, 0, 1, 1, w, h, 0, 0, w, h);
    ctx.restore();


n1+=1*(thome <= targett+toler); 
n2+=1*(flag === 2) * (thome < 99.5)

}

//-------------------------------------  app var






//////////////////////      etc /////////////////////

var label2 = gui.addlabel(0, appname, 0, 0, appw, 48);
label2.backcolor = rgb(250, 250, 250)

label2.textcentered = false; //
label2.addfs(8, 8, 32, 32);
var btnabout = label2.addbutton(0, "", appw - 48, 0, 48, 48, sm.getimageres("about"));
btnabout.drawbackground = false;
btnabout.drawoutline = false;
var btnhelp = label2.addbutton(0, "", appw - 100, 0, 48, 48, sm.getimageres("help"));
btnhelp.drawbackground = false;
btnhelp.drawoutline = false;
//var sceneabout = sm.adddialog(512, 360, sm.createimage("images/about.png"), 0);/// scene 1

btnabout.onclick = function () {
    window.open('index_DS_II.html');
//formabout.visible = !false;
}
btnhelp.onclick = function () {
    formhelp.visible = !formhelp.visible; //false;

}

var helpi = 0;
var helptext = '';

var formhelp = gui.addform(0, "", 1280 - 800, 96, 800, 450, im95);
formhelp.backout(false);
formhelp.texth = 20;
formhelp.textcolor="white"
formhelp.backcolor = rgb(255, 255, 204);
var fhBL=formhelp.addbutton(0,"⯇",30,formhelp.height-80,48,48);
var fhBR=formhelp.addbutton(0,"⯈",formhelp.width-30-50,formhelp.height-80,48,48);
fhBL.backout(false);
fhBR.backout(false);
fhBL.textcolor="yellow";
fhBR.textcolor="yellow";
fhBR.onclick=function(){
     
    helpi++;
    if(helpi>3) helpi=3;
}
fhBL.onclick=function(){
    helpi--;
    if(helpi<0) helpi=0;
}
formhelp.userdraw = function (ctx) {
//function wraptext(ctx, text, x, y, maxWidth, lineHeight) {
    helptext = help[helpi];
    wraptext(formhelp.ctx, helptext, formhelp.xg + 8+45, formhelp.yg + 28+45, formhelp.width - 55-90, 22);
    fhBL.visible=helpi>0;
    fhBR.visible=helpi<3;
}

formhelp.visible = false;
formhelp.center();

var bc1 = formhelp.addbutton(0, "", formhelp.width - 56, 0, 48, 48, sm.getimageres("close"));
bc1.drawoutline = false;
bc1.drawoutline = false;
bc1.onclick = function () {
    formhelp.visible = false;
}

bc1.drawbackground = false;
bc1.drawoutline = false;
create();
init();
gf.start();





