"use strict";

b4w.register("beSomething", function(exports, require) {

var m_app     = require("app");
var m_cfg     = require("config");
var m_data    = require("data");
var m_ver     = require("version");
var m_tex     = require("textures");
var m_scn     = require("scenes");
var m_cont    = require("container");
var m_version = require("version");
var m_scrn = require("screenshooter");
var m_main    = require("main");
var m_sfx     = require("sfx");

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

var TIME_DELAY = 1000 / 24;
var WAITING_DELAY = 1000;


var _cam_waiting_handle = null;

exports.init = function() {
   m_app.init({
        canvas_container_id: "main_canvas_container",
        callback: init_cb,
        physics_enabled: false,
        background_color: [1, 1, 1, 1],
        alpha: 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();
}

    
// LOAD function: Start
function load() {
    m_data.load("beSomething.json", load_cb);
}
// LOAD function: End

    
// LOAD_CD function: Start
function load_cb(data_id, success) {

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

    
    var error_cap = m_scn.get_object_by_name("noArgument");
    m_app.enable_camera_controls();

    
    
/////SCREENSHOT: Start/////    
//Take a screenshot of the 3D scene by clicking the screenshot button
	document.getElementById("btnScreenshot").addEventListener("mouseover", btnScreenshotOver);
	function btnScreenshotOver() {
	btnScreenshot.style.borderStyle = "solid";
	}
	document.getElementById("btnScreenshot").addEventListener("mouseout", btnScreenshotOut);
	function btnScreenshotOut() {
	btnScreenshot.style.borderStyle = "none";
	}
	document.getElementById("btnScreenshot").addEventListener("click", takeScreenshot);
	function takeScreenshot() {
	m_scrn.shot("image/png",1);
	}
/////SCREENSHOT: End///// 
    
    
    
    
    
    
    
    
/////WEBCAM: Start/////    
    if (Boolean(get_user_media()))
        start_video();

// GET_USER_MEDIA function: Start   
function get_user_media() {
    if (Boolean(navigator.getUserMedia))
        return navigator.getUserMedia.bind(navigator);
    else if (Boolean(navigator.webkitGetUserMedia))
        return navigator.webkitGetUserMedia.bind(navigator);
    else if (Boolean(navigator.mozGetUserMedia))
        return navigator.mozGetUserMedia.bind(navigator);
    else if (Boolean(navigator.msGetUserMedia))
        return navigator.msGetUserMedia.bind(navigator);
    else
        return null;
}
// GET_USER_MEDIA function: End


// START_VIDEO function: Start 
function start_video() {

    if (_cam_waiting_handle)
        clearTimeout(_cam_waiting_handle);

    var user_media = get_user_media();
    var media_stream_constraint = {
        video: { width: 1280, height: 720 }
    };
    var success_cb = function(local_media_stream) {
        //var video = document.createElement("video");  -->  not compatible with control screen option
		var video = document.querySelector("#videoElement");
        video.setAttribute("autoplay", "true");
        video.src = window.URL.createObjectURL(local_media_stream);
        var error_cap = m_scn.get_object_by_name("noArgument");
        m_scn.hide_object(error_cap);

        var obj3D = m_scn.get_object_by_name("face");
        var contextObj3D = m_tex.get_canvas_ctx(obj3D, "texture_canvas");
        var update_canvas = function() {
            contextObj3D.drawImage(video, 0, 0, video.videoWidth, video.videoHeight,
                    0, 0, contextObj3D.canvas.width, contextObj3D.canvas.height);
            m_tex.update_canvas_ctx(obj3D, "texture_canvas");
            setTimeout(function() {update_canvas()}, TIME_DELAY);
        }

        video.onloadedmetadata = function(e) {
            update_canvas();
        }; 
    };
    
    var fail_cb = function() {
        var error_cap = m_scn.get_object_by_name("noArgument");
        _cam_waiting_handle = setTimeout(start_video, WAITING_DELAY);
    };

    user_media(media_stream_constraint, success_cb, fail_cb);
    
}
// START_VIDEO function: End
    
/////WEBCAM: End/////
    

    
    
    
    
    
    
/////TEXT INPUT: Start/////
    
    // TEXTINPUT function: Start
    function textInput() {
    var face_text = m_scenes.get_object_by_name("face_text");
    var ctx_imageText = m_tex.get_canvas_ctx(face_text, "skinnings_text");
    var Enter = document.getElementById("Enter");

    if (ctx_imageText) {
        var img = new Image();
        img.src = "Text.jpg";
        /* this function load the image that been find at the end of the path */
        img.onload = function() {
        ctx_imageText.drawImage(img, 0, 0, ctx_imageText.canvas.width, 
                    ctx_imageText.canvas.height);
        m_tex.update_canvas_ctx(face_text, "skinnings_text");
        }
    } 

/* link the button "Enter" to the function "writeTexte" */
Enter.addEventListener('click', writeText); 

    
/* this function load the Erase function and after the Write function*/     
function writeText(){
    Erase();
    Write();
    }


/* this function clear the texture canvas (text and image to) before it will be written on it*/ 
function Erase() {
ctx_imageText.clearRect(0, 0, ctx_imageText.canvas.width, ctx_imageText.canvas.height);
} 
    
    
/* this function display the text from the textarea and redisplay the image*/
function Write(){           
            var text = document.getElementById("myText").value;
            var img = new Image();
            img.src = "Text.jpg";
            img.onload = function() {
            ctx_imageText.drawImage(img, 0, 0, ctx_imageText.canvas.width,
                                ctx_imageText.canvas.height);
            ctx_imageText.fillStyle = "rgba(255,0,0,255)";
            ctx_imageText.font = "250px Arial";
            ctx_imageText.fillText(text, 300, 300);
            m_tex.update_canvas_ctx(face_text, "skinnings_text");
                    }
                }

     
    }
    // TEXTINPUT function: End
    
    textInput();
/////TEXT INPUT: End///// 

        
}
// LOAD_CD function: End 
    
});b4w.require("beSomething").init();   

 <!DOCTYPE html>
<html>

<head>

<title>be-something</title>

<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

<link rel="stylesheet" href="beSomething.css" type="text/css">


    
<script type="text/javascript" src="b4w.min.js"></script>
<script type="text/javascript" src="beSomething.js"></script>
    



</head>

<body>
<!-- CONTROL SCREEN: Start -->
<div id="controlScreen" style="z-index:1;" align="center">
<video autoplay="true" id="videoElement">   
</div>
<!-- CONTROL SCREEN: End -->
    

<!-- POSITION FACE: Start -->
<div id="controlScreen" style="z-index:4;" align="center"><img src="target.png" style="position:relative; height:100%; width:100%; z-index:5;">
</div>
<!-- POSITION FACE: End -->    


<!-- 3D VIEWER: Start --> 
<div id="main_canvas_container" style="z-index:0;"></div>
<!-- 3D VIEWER: End --> 
    
<!-- BUTTON SCREENSHOT: Start -->
<div style="position:absolute; left:-3px; bottom:90px; width:135px; z-index:4;">
<div id="btnScreenshot" class="Button" style="position:absolute; width:30px; height:30px; right:59px; background-color:#F00" align="center"> <img src="screenshot.png" style="position:relative; top:2px; width:24px; height:24px; z-index:3;"> </div>
<h id="text-menu" style="top:34px;">take a<br> screenshot!</h>
</div>
<!-- BUTTON SCREENSHOT: End -->

    
    
<!-- TEXT AREA: Start -->    
<div style="position:absolute; left:150px; bottom:90px; width:135px; z-index:3;">
<br>
<!-- <input type="text" id="myText" value="Some text..."> -->
<textarea spellcheck="false" id = "myText" rows="1">hello world</textarea>
<br>
<button id="Enter">enter</button>
</div>
<!-- TEXT AREA: End -->  
    
    
</body>

</html>