/* Insérer ici les fonctions spécifiques à cette activité. Elles peuvent marcher
avec les fonctions et variables déjà définies dans 'activity_functions.js' du
dossier 'res'.*/


function init_var() {
}

/*var draw = SVG().addTo('#animationArea').size(640, 480)
var rect = draw.rect(600, 400).attr({ fill: '#f06' })
*/
var canvas = SVG().addTo('#animationArea').size(660, 510)

var fuel_gradient = canvas.gradient('linear', function(add) {
  add.stop(0, '#ff2e27')
  add.stop(1, '#ffde00')
})
var power_gradient = canvas.gradient('linear', function(add) {
  add.stop(0, '#3c8001')
  add.stop(1, '#93f45e')
})
var sky_gradient = canvas.gradient('linear', function(add) {
  add.stop(0, '#4cdaff')
  add.stop(1, '#001b91')
}).from(0, 1).to(0, 0)

var sky_rect = canvas.rect(400, 350).fill(sky_gradient).stroke({ width: 3, color: '#333' }).attr({x: 5, y: 5})
var path = canvas.path("M40,353 C40,70 300,48 403,41").fill('none').stroke({width:5, color: '#ff0000'})
var rocket = canvas.image('img/lander.png').size(75, 75)
var length = path.length()

var fuel_rect = canvas.rect(490, 50).attr({x: 160, y: 450, fill: fuel_gradient})
var fuel_box = canvas.rect(490, 50).fill('none').stroke({ width: 3, color: '#333' }).attr({x: 160, y: 450})
var fuel_text = canvas.text("Carburant de l'étage :").attr({x: 0, y: 460})

var power_rect = canvas.rect(490, 50).attr({x: 160, y: 395, fill: power_gradient})
var power_box = canvas.rect(490, 50).fill('none').stroke({ width: 3, color: '#333' }).attr({x: 160, y: 395})
var power_text = canvas.text("Puissance moteurs :").attr({x: 0, y: 405})

var r1_img = canvas.image('img/r1.png').attr({x: 550, y : 0})

changeFuel(0.50, 1000)
changePower(0.6, 1000)

rocket.animate(3000).during(function(pos, morph, eased){
    var p = path.pointAt(pos * length);
    rocket.center(p.x, p.y);
})

function changeFuel(ratio, duration) {
  fuel_rect.animate(duration, 0, 'now').width(fuel_rect.width()*ratio);
}

function changePower(ratio, duration) {
  power_rect.animate(duration, 0, 'now').width(fuel_rect.width()*ratio);
}
