"use strict"

import b4w from "blend4web";

var m_app       = b4w.app;
var m_data      = b4w.data;
var m_scenes    = b4w.scenes;
var m_geom      = b4w.geometry;
var m_cfg       = b4w.config;
var m_obj       = b4w.objects;
var m_version   = b4w.version;

var DEBUG = (m_version.type() === "DEBUG");

var APP_ASSETS_PATH = m_cfg.get_assets_path("01-29-JOINEDKEYS");

export function init() {
    m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: true,
        autoresize: true,
        assets_dds_available: !DEBUG,
        assets_min50_available: !DEBUG,
        console_verbose: true
    });
}

function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }
    load();
}

function load() {
    m_data.load(APP_ASSETS_PATH + "morphing.json", load_cb);
}

function load_cb(data_id) {
    var main_interface_container = document.createElement("div");
    main_interface_container.className = "main_sliders_container";
    main_interface_container.setAttribute("id", "main_sliders_container");
    document.body.appendChild(main_interface_container);
    m_app.enable_camera_controls(false, false, false, null, true);
    var obj = m_scenes.get_object_by_name("JUST-HEAD-SPINE.001");
    if (obj)
        create_interface(obj);
}

function create_interface(obj) {
    if (!m_geom.check_shape_keys(obj))
        return;
    create_dual_slider(obj, "fatten", "shrink", "Weight");
    var shape_keys_names = m_geom.get_shape_keys_names(obj);
    for (var i  = 0; i < shape_keys_names.length; i++) {
        if (shape_keys_names[i] == "fatten" || shape_keys_names[i] == "shrink")
            continue;
        create_slider(obj, shape_keys_names[i], shape_keys_names[i]);
    }
}

function create_slider(obj, key_name, slider_name) {
    var slider = init_slider(slider_name);
    var value_label = document.getElementById(slider_name);
    var value = m_geom.get_shape_key_value(obj, key_name);

    slider.min = 0;
    slider.max = 1;
    slider.step = 0.02;
    slider.value = value;
    value_label.textContent = slider.value;

    function slider_changed(e) {
        m_geom.set_shape_key_value(obj, key_name, slider.value);
        m_obj.update_boundings(obj);
        value_label.textContent = slider.value;
    }

    if (is_ie11())
        slider.onchange = slider_changed;
    else
        slider.oninput = slider_changed;
}

function create_dual_slider(obj, key_name_1, key_name_2, slider_name) {

    var slider = init_slider(slider_name);
    var value_label = document.getElementById(slider_name);
    var value = m_geom.get_shape_key_value(obj, key_name_1)
            - m_geom.get_shape_key_value(obj, key_name_2)

    slider.min = -1;
    slider.max = 1;
    slider.step = 0.02;
    slider.value = value;
    value_label.textContent = Math.floor(slider.value*100)/100;

    function slider_changed(e) {
        if (slider.value < 0) {
            var key_name = key_name_2;
            var reset_name = key_name_1;
            var value = -slider.value;
        } else {
            var key_name = key_name_1;
            var reset_name = key_name_2;
            var value = slider.value;
        }
        m_geom.set_shape_key_value(obj, key_name, value);
        if (m_geom.get_shape_key_value(obj, reset_name))
            m_geom.set_shape_key_value(obj, reset_name, 0);
        value_label.textContent = slider.value;
    }

    if (is_ie11())
        slider.onchange = slider_changed;
    else
        slider.oninput = slider_changed;
}

function init_slider(name) {
    var container = document.createElement("div");
    container.className = "slider_container";

    var name_label = document.createElement("label");
    name_label.className = "text_label";
    name_label.textContent = name;

    var slider = document.createElement("input");
    slider.className = "input_slider";
    slider.setAttribute("type", "range");

    var value_label = document.createElement("label");
    value_label.className = "value_label";
    value_label.setAttribute("id", name);

    container.appendChild(name_label);
    container.appendChild(slider);
    container.appendChild(value_label);

    var main_slider_container = document.getElementById("main_sliders_container");
    main_slider_container.appendChild(container);

    return slider;
}

function is_ie11() {
    return !(window.ActiveXObject) && "ActiveXObject" in window;
}

init();

"use strict"

// register the application module
b4w.register("01PIA-PROJECT_main", function(exports, require) {

// import modules used by the app
var m_app       = require("app");
var m_cfg       = require("config");
var m_data      = require("data");
var m_preloader = require("preloader");
var m_ver       = require("version");

// detect application mode
var DEBUG = (m_ver.type() == "DEBUG");

// automatically detect assets path
var APP_ASSETS_PATH = m_cfg.get_assets_path("01PIA-PROJECT");

/**
 * export the method to initialize the app (called at the bottom of this file)
 */
exports.init = function() {
    m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        show_fps: DEBUG,
        console_verbose: DEBUG,
        autoresize: true
    });
}

/**
 * callback executed when the app is initialized 
 */
function init_cb(canvas_elem, success) {

    if (!success) {
        console.log("b4w init failure");
        return;
    }

    m_preloader.create_preloader();

    // ignore right-click on the canvas element
    canvas_elem.oncontextmenu = function(e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    };

    load();
}

/**
 * load the scene data
 */
function load() {
    m_data.load(APP_ASSETS_PATH + "01PIA-PROJECT.json", load_cb, preloader_cb);
}

/**
 * update the app's preloader
 */
function preloader_cb(percentage) {
    m_preloader.update_preloader(percentage);
}

/**
 * callback executed when the scene data is loaded
 */
function load_cb(data_id, success) {

    if (!success) {
        console.log("b4w load failure");
        return;
    }

    m_app.enable_camera_controls();

    // place your code here

}


});

// import the app module and start the app by calling the init method
b4w.require("01PIA-PROJECT_main").init();