var faceState;
var maskState;
var towelState;
var accessoryState;
var candleState;
var rightTextState;

var faceArray = [];
var maskArray = [];
var towelArray = [];
var accessoryArray = [];
var candleArray = [];
var rightTextArray = [];

function preload() {
    for (let i = 0; i < 9; i++) {
        faceArray[i] = loadImage('assets/spaday_face' + (i + 1) + '.png');
    }
    for (let i = 0; i < 4; i++) {
        maskArray[i] = loadImage('assets/spaday_mask' + (i + 1) + '.png');
    }
    for (let i = 0; i < 4; i++) {
        towelArray[i] = loadImage('assets/spaday_towel' + (i + 1) + '.png');
    }
    for (let i = 0; i < 4; i++) {
        accessoryArray[i] = loadImage('assets/spaday_acc' + (i + 1) + '.png');
    }
    for (let i = 0; i < 2; i++) {
        candleArray[2*i] = loadImage('assets/spaday_candlesleft' + (i + 1) + '.png');
        candleArray[2*i+1] = loadImage('assets/spaday_candlesright' + (i + 1) + '.png');
    }
    leftText = loadImage('assets/spaday_textleft.png');
    for (let i = 0; i < 4; i++) {
        rightTextArray[i] = loadImage('assets/spaday_textright' + (i + 1) + '.png');
    }

}

function setup() {
    //myCanvas = createCanvas(1000, 750);
    myCanvas = createCanvas(750, 500);
    background(120,150,251);

    for (let i = 0; i < faceArray.length; i++) {
        faceArray[i].resize(width/2, 0);
    }
    for (let i = 0; i < maskArray.length; i++) {
        maskArray[i].resize(width/2, 0);
    }
    for (let i = 0; i < towelArray.length; i++) {
        towelArray[i].resize(width/2, 0);
    }
    for (let i = 0; i < accessoryArray.length; i++) {
        accessoryArray[i].resize(width/2, 0);
    }
    for (let i = 0; i < candleArray.length; i++) {
        candleArray[i].resize(width/8, 0);
    }
    leftText.resize(width/6, 0);
    for (let i = 0; i < rightTextArray.length; i++) {
        rightTextArray[i].resize(width/6, 0);
    }

    faceState = 0;
    maskState = 0;
    towelState = 0;
    accessoryState = 0;
    candleState = 0;
    rightTextState = 0;
    
    //guest properties
    guestX = width/2 - faceArray[0].width / 2;
    guestY = 0;
    
    textFont('Helvetica');
    textStyle(BOLD);
}

function buildImage() {
    background(120,150,251);
    
    image(faceArray[faceState], guestX, guestY);
    image(maskArray[maskState], guestX, guestY);
    image(towelArray[towelState], guestX, guestY);
    image(accessoryArray[accessoryState], guestX, guestY);
    image(candleArray[2*candleState], width/10, height*8/15);
    image(candleArray[2*candleState + 1], width*9/10-candleArray[2*candleState + 1].width, height*8/15);
    
    image(leftText, width/10, height/10);
    image(rightTextArray[rightTextState], width*9/10-candleArray[2*candleState + 1].width, height/10);
}

function draw() {
    buildImage();
    
    //textSize(14);
    //text("Customize this design by using the number keys 1-6 on your keyboard to change the face, mask, towel, accessories, candles, and message!", 10, 710);
    //text("Press P to save a screenshot to your computer.", 10, 734);
    
    textSize(11);
    noStroke();
    rect(5, height*18.5/20, width-10, height*0.6/10, 5)
    text("Customize this design by using the number keys 1-6 on your keyboard to change the face, mask, towel, accessories, candles, and message!", 10, height*19/20);
    text("Press P to save a screenshot to your computer.", 10, height*19.5/20,);
}

function keyPressed() {
    if (key == '1') {
        faceState = (faceState + 1) % 9;
    }
    if (key == '2') {
        maskState = (maskState + 1) % 4;
    }
    if (key == '3') {
        towelState = (towelState + 1) % 4;
    }
    if (key == '4') {
        accessoryState = (accessoryState + 1) % 4;
    }
    if (key == '5') {
        candleState = (candleState + 1) % 2;
    }
    if (key == '6') {
        rightTextState = (rightTextState + 1) % 4;
    }
    if (key == 'p') {
        buildImage();
        saveCanvas(myCanvas, "SpaDay", "png");
    }
        
}