//
//  overlaysExample.js
//  examples
//
//  Created by Brad Hefta-Gaub on 2/14/14.
//  Copyright 2014 High Fidelity, Inc.
//
//  This is an example script that demonstrates use of the Overlays class
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
//


// The "Swatches" example of this script will create 9 different image overlays, that use the color feature to
// display different colors as color swatches. The overlays can be clicked on, to change the "selectedSwatch" variable
// and update the image used for the overlay so that it appears to have a selected indicator.
// These are our colors...
var swatchColors = new Array();
swatchColors[0] = { red: 255, green: 0, blue: 0};
swatchColors[1] = { red: 0, green: 255, blue: 0};
swatchColors[2] = { red: 0, green: 0, blue: 255};
swatchColors[3] = { red: 255, green: 255, blue: 0};
swatchColors[4] = { red: 255, green: 0, blue: 255};
swatchColors[5] = { red: 0, green: 255, blue: 255};
swatchColors[6] = { red: 128, green: 128, blue: 128};
swatchColors[7] = { red: 128, green: 0, blue: 0};
swatchColors[8] = { red: 0, green: 240, blue: 240};

// The location of the placement of these overlays
var swatchesX = 100;
var swatchesY = 200;

// These will be our "overlay IDs"
var swatches = new Array();
var numberOfSwatches = 9;
var selectedSwatch = 0;

// create the overlays, position them in a row, set their colors, and for the selected one, use a different source image
// location so that it displays the "selected" marker
for (s = 0; s < numberOfSwatches; s++) {
    var imageFromX = 12 + (s * 27);
    var imageFromY = 0;
    if (s == selectedSwatch) {
        imageFromY = 55;
    }

    swatches[s] = Overlays.addOverlay("image", {
                    x: 100 + (30 * s),
                    y: 200,
                    width: 31,
                    height: 54,
                    subImage: { x: imageFromX, y: imageFromY, width: 30, height: 54 },
                    imageURL: "http://highfidelity-public.s3-us-west-1.amazonaws.com/images/testing-swatches.svg",
                    color: swatchColors[s],
                    alpha: 1
                });
}

// This will create a text overlay that when you click on it, the text will change
var text = Overlays.addOverlay("text", {
                    x: 200,
                    y: 100,
                    width: 150,
                    height: 50,
                    color: { red: 0, green: 0, blue: 0},
                    textColor: { red: 255, green: 0, blue: 0},
                    topMargin: 4,
                    leftMargin: 4,
                    text: "Here is some text.\nAnd a second line."
                });

// This will create an image overlay, which starts out as invisible
var toolA = Overlays.addOverlay("image", {
                    x: 100,
                    y: 100,
                    width: 62,
                    height: 40,
                    subImage: { x: 0, y: 0, width: 62, height: 40 },
                    imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/hifi-interface-tools.svg",
                    color: { red: 255, green: 255, blue: 255},
                    visible: false
                });

// This will create a couple of image overlays that make a "slider", we will demonstrate how to trap mouse messages to
// move the slider
var slider = Overlays.addOverlay("image", {
                    // alternate form of expressing bounds
                    bounds: { x: 100, y: 300, width: 158, height: 35},
                    imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/slider.png",
                    color: { red: 255, green: 255, blue: 255},
                    alpha: 1
                });

// This is the thumb of our slider
var minThumbX = 130;
var maxThumbX = minThumbX + 65;
var thumbX = (minThumbX + maxThumbX) / 2;
var thumb = Overlays.addOverlay("image", {
                    x: thumbX,
                    y: 309,
                    width: 18,
                    height: 17,
                    imageURL: "https://s3-us-west-1.amazonaws.com/highfidelity-public/images/thumb.png",
                    color: { red: 255, green: 255, blue: 255},
                    alpha: 1
                });


// We will also demonstrate some 3D overlays. We will create a couple of cubes, spheres, and lines
// our 3D cube that moves around...
var cubePosition = { x: 2, y: 0, z: 2 };
var cubeSize = 5;
var cubeMove = 0.1;
var minCubeX = 1;
var maxCubeX = 20;

var cube = Overlays.addOverlay("cube", {
                    position: cubePosition,
                    size: cubeSize,
                    color: { red: 255, green: 0, blue: 0},
                    alpha: 1,
                    solid: false
                });

var solidCubePosition = { x: 0, y: 5, z: 0 };
var solidCubeSize = 2;
var minSolidCubeX = 0;
var maxSolidCubeX = 10;
var solidCubeMove = 0.05;
var solidCube = Overlays.addOverlay("cube", {
                    position: solidCubePosition,
                    size: solidCubeSize,
                    color: { red: 0, green: 255, blue: 0},
                    alpha: 1,
                    solid: true
                });

var spherePosition = { x: 5, y: 5, z: 5 };
var sphereSize = 1;
var minSphereSize = 0.5;
var maxSphereSize = 10;
var sphereSizeChange = 0.05;

var sphere = Overlays.addOverlay("sphere", {
                    position: spherePosition,
                    size: sphereSize,
                    color: { red: 0, green: 0, blue: 255},
                    alpha: 1,
                    solid: false
                });

var line3d = Overlays.addOverlay("line3d", {
                    position: { x: 0, y: 0, z:0 },
                    end: { x: 10, y: 10, z:10 },
                    color: { red: 0, green: 255, blue: 255},
                    alpha: 1,
                    lineWidth: 5
                });

// this will display the content of your clipboard at the origin of the domain
var clipboardPreview = Overlays.addOverlay("clipboard", {
                                           position: { x: 0, y: 0, z: 0},
                                           size: 1 / 32,
                                           visible: true
                                           });


// When our script shuts down, we should clean up all of our overlays
function scriptEnding() {
    Overlays.deleteOverlay(toolA);
    for (s = 0; s < numberOfSwatches; s++) {
        Overlays.deleteOverlay(swatches[s]);
    }
    Overlays.deleteOverlay(thumb);
    Overlays.deleteOverlay(slider);
    Overlays.deleteOverlay(text);
    Overlays.deleteOverlay(cube);
    Overlays.deleteOverlay(solidCube);
    Overlays.deleteOverlay(sphere);
    Overlays.deleteOverlay(line3d);
    Overlays.deleteOverlay(clipboardPreview);
}
Script.scriptEnding.connect(scriptEnding);


var toolAVisible = false;
var count = 0;

// Our update() function is called at approximately 60fps, and we will use it to animate our various overlays
function update(deltaTime) {
    count++;
    
    // every second or so, toggle the visibility our our blinking tool
    if (count % 60 == 0) {
        if (toolAVisible) {
            toolAVisible = false;
        } else {
            toolAVisible = true;
        }
        Overlays.editOverlay(toolA, { visible: toolAVisible } );
    }
    
    // move our 3D cube
    cubePosition.x += cubeMove;
    cubePosition.z += cubeMove;
    if (cubePosition.x > maxCubeX || cubePosition.x < minCubeX) {
        cubeMove = cubeMove * -1;
    }
    Overlays.editOverlay(cube, { position: cubePosition } );

    // move our solid 3D cube
    solidCubePosition.x += solidCubeMove;
    solidCubePosition.z += solidCubeMove;
    if (solidCubePosition.x > maxSolidCubeX || solidCubePosition.x < minSolidCubeX) {
        solidCubeMove = solidCubeMove * -1;
    }
    Overlays.editOverlay(solidCube, { position: solidCubePosition } );

    // adjust our 3D sphere
    sphereSize += sphereSizeChange;
    if (sphereSize > maxSphereSize || sphereSize < minSphereSize) {
        sphereSizeChange = sphereSizeChange * -1;
    }
    Overlays.editOverlay(sphere, { size: sphereSize, solid: (sphereSizeChange < 0) } );


    // update our 3D line to go from origin to our avatar's position
    Overlays.editOverlay(line3d, { end: MyAvatar.position } );
}
Script.update.connect(update);


// The slider is handled in the mouse event callbacks.
var movingSlider = false;
var thumbClickOffsetX = 0;
function mouseMoveEvent(event) {
    if (movingSlider) {
        newThumbX = event.x - thumbClickOffsetX;
        if (newThumbX < minThumbX) {
            newThumbX = minThumbX;
        }
        if (newThumbX > maxThumbX) {
            newThumbX = maxThumbX;
        }
        Overlays.editOverlay(thumb, { x: newThumbX } );
    }
}

// we also handle click detection in our mousePressEvent()
function mousePressEvent(event) {
    var clickedText = false;
    var clickedOverlay = Overlays.getOverlayAtPoint({x: event.x, y: event.y});
    
    // If the user clicked on the thumb, handle the slider logic
    if (clickedOverlay == thumb) {
        movingSlider = true;
        thumbClickOffsetX = event.x - thumbX;
        
    } else if (clickedOverlay == text) { // if the user clicked on the text, update text with where you clicked
    
        Overlays.editOverlay(text, { text: "you clicked here:\n   " + event.x + "," + event.y } );
        clickedText = true;
        
    } else { // if the user clicked on one of the color swatches, update the selectedSwatch
    
        for (s = 0; s < numberOfSwatches; s++) {
            if (clickedOverlay == swatches[s]) {
                Overlays.editOverlay(swatches[selectedSwatch], { subImage: { y: 0 } } );
                Overlays.editOverlay(swatches[s], { subImage: { y: 55 } } );
                selectedSwatch = s;
            }
        }
    }
    if (!clickedText) { // if you didn't click on the text, then update the text accordningly
        Overlays.editOverlay(text, { text: "you didn't click here" } );
    }
}

function mouseReleaseEvent(event) {
    if (movingSlider) {
        movingSlider = false;
    }
}

Controller.mouseMoveEvent.connect(mouseMoveEvent);
Controller.mousePressEvent.connect(mousePressEvent);
Controller.mouseReleaseEvent.connect(mouseReleaseEvent);