// voice recognition

document.getElementById("voice_input_close").addEventListener("click", function () { });

var processSpeechClick = true;

// 选择什么方式发送数据
$('.select_send_way span').click(function () {
    if ($(this)[0].className.indexOf('translatable_send_cloud') > -1) {
        window.send = "cloud";
        $('.send_cloud').css({ 'display': 'block', 'position': 'relative' });
        $('.send_module').css({ 'display': 'none', 'position': 'relative' });
    } else {
        window.send = "module";
        $('.send_cloud').css({ 'display': 'none', 'position': 'relative' });
        $('.send_module').css({ 'display': 'block', 'position': 'relative', "height": "100px" });
    }
    console.log(window.send)
    $(this).addClass('select_send_way_color')
    $(this).siblings().removeClass('select_send_way_color')
})


// 点击连接发送数据
$('.translatable_connectBtns').click(function () {
    $(this).css('display', 'none');
    $(this).siblings().css({ "float": "right", 'margin-right': '5px', 'display': 'block' })
    CCB.socket.emit('command', {
        cmd: 'open',
        option: { port: $('#ports').val(), baud: $('#serial_baud').val() }
    });
})

function sendModule(data, type) {
    if ((CCB.isOpen && CCB.userState) || type === "send") {
        CCB.socket.emit('command', {
            cmd: 'send',
            option: { msg: `SOF|${data}|`, postfix: "blc" }
        })
    }
}

// 点击关闭socket连接
$('.translatable_disconnectBtns').click(function () {
    $(this).css('display', 'none');
    $(this).siblings().css({ "float": "right", 'margin-right': '5px', 'display': 'block' })
    CCB.socket.emit('command', { cmd: 'close' });
})

// 情绪识别发送脸部分析结果

var capture_type = 'emotionResults_age'
$('#select_send_capture').change(function () {
    capture_type = $(this).val()
    console.log(capture_type)
});



var speechDemo_gumStream; //stream from getUserMedia()
var speechDemo_rec; //Recorder.js object
var speechDemo_input; //MediaStreamAudioSourceNode we'll be recording

var speechDemo_AudioContext = window.AudioContext || window.webkitAudioContext;
var speechDemo_audioContext; //audio context to help us record

function processSpeech() {
    var selectedLang = document.getElementById("speech_language_selection").options[document.getElementById("speech_language_selection").selectedIndex].value;
    // console.log($('#speech_button')[0].text);
    // if ($('#speech_button')[0].text === CCB.str_group.end_speech) {
    //     return;
    // }
    if (selectedLang == "english") {
        console.log("selected english.");
        recognizeEnglish();
    } else if (selectedLang == "cantonese") {
        console.log("selected cantonese.");
        recognizeChinese("cantonese");
    } else if (selectedLang == "mandarin") {
        console.log("selected chinese.");
        recognizeChinese("mandarin");
    }
}

function speechDemoSendCloudRequest(recognizedText) {

    var jsontoCloud = "{\"EM_data\": \"" + recognizedText + "\"}";

    if (window.send == 'module') {
        sendModule(recognizedText)
    } else {
        var eventURL = $("#AI_voice_events").val()

        $('#speechDemoCloudRequest').css("color", "orange");
        document.getElementById('speechDemoCloudRequest').innerHTML = CCB.str_group.cloud_event_syncing;
        $.ajax({
            type: "POST",
            url: eventURL,
            data: jsontoCloud,
            contentType: "application/json; charset=utf-8",
            dataType: "json"
        })
            .done(function (xhr) {
                // console.log("error");
                // console.log(xhr.status);
                if (xhr.status == 200) {
                    $('#speechDemoCloudRequest').css("color", "#2196f3");
                    document.getElementById('speechDemoCloudRequest').innerHTML = CCB.str_group.cloud_event_success;
                } else if (xhr.status !== 200) {
                    $('#speechDemoCloudRequest').css("color", "red");
                    document.getElementById('speechDemoCloudRequest').innerHTML = CCB.str_group.cloud_event_failed;
                }
            })
            .error(function (xhr) {
                // console.log("error");
                // console.log(xhr.status);
                if (xhr.status == 200) {
                    $('#speechDemoCloudRequest').css("color", "#2196f3");
                    document.getElementById('speechDemoCloudRequest').innerHTML = CCB.str_group.cloud_event_success;
                } else if (xhr.status !== 200) {
                    $('#speechDemoCloudRequest').css("color", "red");
                    document.getElementById('speechDemoCloudRequest').innerHTML = CCB.str_group.cloud_event_failed;
                }
            });
    }


}

/* start of baidu api */

//var speechBackendAPIURL = 'http://localhost:5000/api/speech';
// var speechBackendAPIURL = 'http://localhost:4003/speech';
var speechBackendAPIURL = '//ai-api.cocorobo.cn/speech';
// var speechBackendAPIURL = '//speech.ai-api.cocorobo.cn/speech';

function recognizeEnglish() {

    speechDemo_URL = window.URL || window.webkitURL;
    var constraints = { audio: true, video: false }
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        // console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
        speechDemo_audioContext = new AudioContext();
        speechDemo_audioContext.resume();
        // document.getElementById("formats").innerHTML = "Format: 1 channel pcm @ " + speechDemo_audioContext.sampleRate / 1000 + "kHz"

        speechDemo_gumStream = stream;
        speechDemo_input = speechDemo_audioContext.createMediaStreamSource(stream);
        speechDemo_rec = new Recorder(speechDemo_input, { numChannels: 1 });
        speechDemo_rec.record();

        // console.log("Recording started");

        // setTimeout(function () { $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recordingcount5); }, 50);
        // setTimeout(function () { $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recordingcount4); }, 1000);
        // setTimeout(function () { $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recordingcount3); }, 2000);
        // setTimeout(function () { $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recordingcount2); }, 3000);
        // setTimeout(function () { $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recordingcount1); }, 4000);

    }).catch(function (err) { });
    if (processSpeechClick) {
        $('#speech_button').html(CCB.str_group.end_speech)
        $('#speech_button').removeClass('blue')
        $('#speech_button').addClass('red')
        $('#speech_process_title').css("color", "red");
        $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recordingcount5);
        processSpeechClick = false;
    } else {
        $('#speech_button').html(CCB.str_group.start_speech)
        $('#speech_button').removeClass('red')
        $('#speech_button').addClass('blue')
        $('#speech_button').addClass('disabled')
        $('#speech_process_title').css("color", "#2196F3");
        // CCB.str_group.speech_recognition_chinese_recorded_recognizing
        $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recorded_recognizing);
        processSpeechClick = true;
        speechDemo_rec.stop();
        speechDemo_gumStream.getAudioTracks()[0].stop();


        speechDemo_rec.exportWAV(recogntionRequestEnglish);
    }
    // setTimeout(function () {

    // }, 5000);
}

function recogntionRequestEnglish(blob) {
    var url = speechDemo_URL.createObjectURL(blob);
    var filename = new Date().toISOString();

    var formData = new FormData();
    formData.append('file', blob, filename);
    formData.append('dev_pid', '1737');

    $.ajax({
        url: speechBackendAPIURL,
        data: formData,
        type: 'POST',
        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
        processData: false, // NEEDED, DON'T OMIT THIS
        timeout: 60000,
    })
        .done(function (response, data) {
            $('#speech_button').removeClass("disabled");
            if (response.data.err_msg == "success.") {
                // console.log(response);
                // console.log(response.data.result[0]);
                $('#speech_textarea').css("color", "rgba(0,0,0,.9)");
                document.getElementById('speech_textarea').innerHTML = response.data.result[0];

                $('#speech_process_title').css("color", "black");
                $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recognized);

                speechDemoSendCloudRequest(response.data.result[0]);
            } else if (response.data.err_msg !== "success.") {
                // console.log("bad");
                $('#speech_process_title').css("color", "red");
                $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recognize_failed);
            }
        })
        .error(function () {
            $('#speech_button').removeClass("disabled");
            $('#speech_process_title').css("color", "red");
            $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recognize_network_err);
        });
}

function recognizeChinese(accent) {

    speechDemo_URL = window.URL || window.webkitURL;


    var constraints = { audio: true, video: false }
    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
        // console.log("getUserMedia() success, stream created, initializing Recorder.js ...");
        speechDemo_audioContext = new AudioContext();
        speechDemo_audioContext.resume();

        // document.getElementById("formats").innerHTML = "Format: 1 channel pcm @ " + speechDemo_audioContext.sampleRate / 1000 + "kHz"

        speechDemo_gumStream = stream;
        speechDemo_input = speechDemo_audioContext.createMediaStreamSource(stream);
        speechDemo_rec = new Recorder(speechDemo_input, { numChannels: 1 });
        speechDemo_rec.record();


    }).catch(function (err) { });
    if (processSpeechClick) {
        $('#speech_button').html(CCB.str_group.end_speech)
        $('#speech_button').removeClass('blue')
        $('#speech_button').addClass('red')
        $('#speech_process_title').css("color", "red");
        $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recordingcount5);
        processSpeechClick = false;
    } else {
        $('#speech_button').html(CCB.str_group.start_speech)
        $('#speech_button').removeClass('red')
        $('#speech_button').addClass('blue')
        $('#speech_button').addClass('disabled')
        $('#speech_process_title').css("color", "#2196F3");
        // CCB.str_group.speech_recognition_chinese_recorded_recognizing
        $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recorded_recognizing);
        speechDemo_rec.stop();
        speechDemo_gumStream.getAudioTracks()[0].stop();
        processSpeechClick = true;
        if (accent == "mandarin") {
            speechDemo_rec.exportWAV(recogntionRequestMandarin);
        } else if (accent == "cantonese") {
            speechDemo_rec.exportWAV(recogntionRequestCantonese);
        }
    }
}


function recogntionRequestMandarin(blob) {
    var url = speechDemo_URL.createObjectURL(blob);
    var filename = new Date().toISOString();

    var formData = new FormData();
    formData.append('file', blob, filename);
    formData.append('dev_pid', '1536');

    $.ajax({
        url: speechBackendAPIURL,
        data: formData,
        type: 'POST',
        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
        processData: false, // NEEDED, DON'T OMIT THIS
        timeout: 60000,
    })
        .done(function (response, data) {
            $('#speech_button').removeClass("disabled");
            if (response.data.err_msg == "success.") {
                // console.log(response);
                // console.log(response.data.result[0]);
                $('#speech_textarea').css("color", "rgba(0,0,0,.9)");
                document.getElementById('speech_textarea').innerHTML = response.data.result[0];

                $('#speech_process_title').css("color", "black");
                $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recognized);

                speechDemoSendCloudRequest(response.data.result[0]);
            } else if (response.data.err_msg !== "success.") {
                // console.log("bad");
                $('#speech_process_title').css("color", "red");
                $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recognize_failed);
            }
        })
        .error(function () {
            $('#speech_button').removeClass("disabled");
            $('#speech_process_title').css("color", "red");
            $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recognize_network_err);
        });
}

function recogntionRequestCantonese(blob) {
    var url = speechDemo_URL.createObjectURL(blob);
    var filename = new Date().toISOString();

    var formData = new FormData();
    formData.append('file', blob, filename);
    formData.append('dev_pid', '1637');

    // console.log("recognizing");

    $.ajax({
        url: speechBackendAPIURL,
        data: formData,
        type: 'POST',
        contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
        processData: false, // NEEDED, DON'T OMIT THIS
        timeout: 60000,
    })
        .done(function (response, data) {

            $('#speech_button').removeClass("disabled");
            if (response.data.err_msg == "success.") {
                // console.log(response);
                // console.log(response.data.result[0]);
                $('#speech_textarea').css("color", "rgba(0,0,0,.9)");
                var resultToTraditionChinese = $.s2t(response.data.result[0].substring(0, response.data.result[0].length - 1));
                document.getElementById('speech_textarea').innerHTML = resultToTraditionChinese;

                $('#speech_process_title').css("color", "black");
                $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recognized);

                speechDemoSendCloudRequest(resultToTraditionChinese);
            } else if (response.data.err_msg !== "success.") {
                console.log("bad");

                $('#speech_process_title').css("color", "red");
                $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recognize_failed);
            }
        })
        .error(function () {
            $('#speech_button').removeClass("disabled");
            $('#speech_process_title').css("color", "red");
            $('#speech_process_title').html(CCB.str_group.speech_recognition_chinese_recognize_network_err);
        });
}

/* End */

// emotion recognition

Webcam.set({
    width: 320,
    height: 240,
    dest_width: 320,
    dest_height: 240,
    image_format: 'jpeg',
    jpeg_quality: 90
});

$('#update_Coevent_web').on('click', function () {
    getCoCloudEvent();
});

$('#update_Coevent_voice').on('click', function () {
    getCoCloudEvent();
});

$('#update_Coevent_web_recorg').on('click', function () {
    getCoCloudEvent();
})

function take_snapshot() {
    // take snapshot and get image data
    Webcam.snap(function (data_uri) {
        // display results in page
        document.getElementById('emotionResults').innerHTML = '<img src="' + data_uri + '"/>';
    });
}

function cameraSwitch() {
    //if checked, turn on camera of computer
    if ($('#camera_switch').prop('checked') == true) {
        document.getElementById("webCamPlaceholder").style.display = "none";
        document.getElementById("webCamPlaceholder").style.margin = "0";
        Webcam.attach('#webCamera');
        $("#emotionRequestStatus").removeClass("disabled");
        Materialize.toast(CCB.str_group.speech_recognition_cameraon, 1500, 'shareUrl');
    } else {
        document.getElementById("webCamPlaceholder").style.display = "block";
        document.getElementById("webCamPlaceholder").style.margin = "-240px 0 0 0";
        Webcam.reset();
        $("#emotionRequestStatus").addClass("disabled");
        Materialize.toast(CCB.str_group.speech_recognition_cameraoff, 1500, 'shareUrl');
    }
}

function jump(h) {
    var url = location.href; //Save down the URL without hash.
    location.href = "#" + h; //Go to the target element.
    history.replaceState(null, null, url); //Don't like hashes. Changing it back.
}

document.getElementById("emotion_recognition_close").addEventListener("click", function () {
    document.getElementById("webCamera").style.width = "0";
    document.getElementById("webCamera").style.height = "0";
    document.getElementById("webCamPlaceholder").style.display = "block";
    document.getElementById("webCamPlaceholder").style.margin = "0";
    if (document.getElementById('camera_switch').checked == true) {
        document.getElementById('camera_switch').checked = false;
        Webcam.reset();
    }
});

function processImage() {

    var mscsImageUrl;
    jump('emotionRecognitionTitle');
    // CCB.str_group.emotion_recognition_button_analyzing
    document.getElementById("emotionRequestStatus").innerHTML = CCB.str_group.emotion_recognition_button_analyzing;
    document.getElementById("emotionRequestStatus").setAttribute("class", "waves-effect waves-light btn blue translatable_face_analyze disabled")
    // webcam part
    Webcam.snap(function (data_uri) {
        // display results in page
        document.getElementById('emotionResults').innerHTML =
            '<img src="' + data_uri + '"/>';
        document.getElementById("SnapshotPlaceholder").style.display = "none";
        var imageURLbase64 = data_uri;

        Materialize.toast(CCB.str_group.emotion_recognition_image_captured, 1000, 'shareUrl');

        var ImageURL = imageURLbase64;
        var block = ImageURL.split(";");
        var contentType = block[0].split(":")[1];
        var realData = block[1].split(",")[1];
        var blob = b64toBlob(realData, contentType);
        var formData = new FormData();
        formData.append('avatar', blob);

        //params
        // var params = {
        //     "returnFaceId": "true",
        //     "returnFaceLandmarks": "false",
        //     "returnFaceAttributes": "age,gender,facialHair,glasses,emotion,hair,accessories"
        // };

        var yekReverse = "NmJhZjc4NzUzMmVmNGVlYzhiYzkzYzg4NTE4Yjg5MTY=";
        // console.log(atob(yekReverse));

        $.ajax({
            // url: "https://emotion-recognition-cocoblockly.cognitiveservices.azure.com/face/v1.0/detect?" + $.param(params),
            url: "https://ai-api.cocorobo.cn/face",
            type: "POST",
            headers: { "Ocp-Apim-Subscription-Key": atob(yekReverse) },
            contentType: 'application/json',
            // processData: false,
            data: JSON.stringify({ 'image': realData }),
            timeout: 10000, // set timeout for 10 seconds
        })
            .done(function (data) {
                var emotionState;
                /*if there is no face image, no data response
                 * response data: []
                 */
                document.getElementById("emotionRequestStatus").innerHTML = CCB.str_group.emotion_recognition_button_analyze;
                document.getElementById("emotionRequestStatus").setAttribute("class", "waves-effect waves-light btn blue translatable_face_analyze")

                setTimeout(function () { jump('emotionRequestStatus'); }, 500);
                if (data.data.error_code !== 0) {
                    // CCB.str_group.emotion_recognition_results_title
                    document.getElementById("facialanalysistitle").innerHTML = CCB.str_group.emotion_recognition_results_title;
                    document.getElementById("emotionResults_emotion").innerHTML = CCB.str_group.emotion_recognition_results_failed_guess;
                    document.getElementById("emotionResults_age").innerHTML = CCB.str_group.emotion_recognition_results_failed_guess;
                    document.getElementById("emotionResults_gender").innerHTML = CCB.str_group.emotion_recognition_results_failed_guess;
                    document.getElementById("emotionResults_glasses").innerHTML = CCB.str_group.emotion_recognition_results_failed_guess;
                    Materialize.toast(emotionState, 1000, 'shareUrl');
                    var eventURL = $("#AI_webcam_events").val();
                    return;
                } else {

                    document.getElementById("emotionResults_emotion").innerHTML = data.data.result.face_list[0].emotion.type;
                    document.getElementById("emotionResults_age").innerHTML = data.data.result.face_list[0].age;
                    document.getElementById("emotionResults_gender").innerHTML = data.data.result.face_list[0].gender.type;
                    document.getElementById("emotionResults_glasses").innerHTML = data.data.result.face_list[0].glasses.type;
                    // document.getElementById("emotionResults_appearance").innerHTML = data.data.result.face_list[0].beauty;
                    document.getElementById("emotionResults_expression").innerHTML = data.data.result.face_list[0].expression.type;
                    if (window.send == 'module') {
                        sendModule(document.getElementById(capture_type).innerHTML)
                    } else {

                        document.getElementById("facialanalysistitle").innerHTML = CCB.str_group.emotion_recognition_results_title_default;

                        $('.emotionResultsAll_single').css("color", "rgba(0,0,0,1)");

                        var jsontoCloud = "{\"emotion\": \"" + document.getElementById("emotionResults_emotion").innerHTML + "\"," +
                            " \"age\": \"" + Number(document.getElementById("emotionResults_age").innerHTML) + "\", " +
                            " \"gender\": \"" + document.getElementById("emotionResults_gender").innerHTML + "\"," +
                            " \"glasses\": \"" + document.getElementById("emotionResults_glasses").innerHTML + "\"," +
                            " \"expression\": \"" + document.getElementById("emotionResults_expression").innerHTML + "\"}";

                        // 颜值  + " \"appearance\": \"" + document.getElementById("emotionResults_appearance").innerHTML + "\","
                        // var eventURL = document.getElementById("webcam-event-url-input").value;
                        var eventURL = $("#AI_webcam_events").val();


                        $('#cloudRequestStatus').css("color", "orange");
                        document.getElementById('cloudRequestStatus').innerHTML = CCB.str_group.cloud_event_syncing;
                        $.ajax({
                            type: "POST",
                            url: eventURL,
                            data: jsontoCloud,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        })
                            .done(function () {
                                if (xhr.status == 200) {
                                    $('#cloudRequestStatus').css("color", "#2196f3");
                                    document.getElementById('cloudRequestStatus').innerHTML = CCB.str_group.cloud_event_success;
                                } else if (xhr.status !== 200) {
                                    $('#cloudRequestStatus').css("color", "red");
                                    document.getElementById('cloudRequestStatus').innerHTML = CCB.str_group.cloud_event_failed;
                                }
                            })
                            .error(function (xhr) {
                                if (xhr.status == 200) {
                                    $('#cloudRequestStatus').css("color", "#2196f3");
                                    document.getElementById('cloudRequestStatus').innerHTML = CCB.str_group.cloud_event_success;
                                } else if (xhr.status !== 200) {
                                    $('#cloudRequestStatus').css("color", "red");
                                    document.getElementById('cloudRequestStatus').innerHTML = CCB.str_group.cloud_event_failed;
                                }
                            });
                    }
                }
            })
            .error(function (xhr) {
                $("#emotionRequestStatus").removeClass("disabled");
                document.getElementById("emotionRequestStatus").innerHTML = CCB.str_group.emotion_recognition_button_analyze;
                $('#azureRequestStatusText').css("color", "red");
                document.getElementById('azureRequestStatusText').innerHTML = CCB.str_group.emotion_recognition_anaylze_status;
                setTimeout(function () {
                    document.getElementById('azureRequestStatusText').innerHTML = "";
                }, 2000);
            });
    });

};


/*
gesture recognition
*/

var gestureRecognitionAPIUrl = "//ai-api.cocorobo.cn/gesture";
var gestureRecognitionButtonClickCount = 0;

document.getElementById("gesture_recognition_close").addEventListener("click", function () {

    if (document.getElementById('camera_switch_gesture').checked == true) {
        document.getElementById('gestureAnalyzeButton').innerHTML = CCB.str_group.gesture_recognition_button_analyze;
        document.getElementById('cloudRequestStatuss').innerHTML = '';
        document.getElementById('gestureResultAreaContent').innerHTML = CCB.str_group.gesture_recognition_button_result;
        document.getElementById('camera_switch_gesture').checked = false;
        Webcam.reset();
        $("#gestureAnalyzeButton").addClass("disabled");
        document.getElementById("gesture_webCamPlaceholder").style.display = "block";
        document.getElementById("gesture_webCamPlaceholder").style.margin = "-240px 0 0 0";
        $('#webCameraGesture').removeClass("webCameraGestureCapturedStyling");
    }
});


function cameraSwitchGesture() {
    Webcam.set({
        // live preview size
        width: 320,
        height: 240,

        // device capture size
        dest_width: 320,
        dest_height: 240,

        // final cropped size
        crop_width: 280,
        crop_height: 240,

        // format and quality
        image_format: 'png',
        jpeg_quality: 90
    });
    document.getElementById('cloudRequestStatuss').innerHTML = '';
    //if checked, turn on camera of computer
    if ($('#camera_switch_gesture').prop('checked') == true) {
        document.getElementById("gesture_webCamPlaceholder").style.display = "none";
        document.getElementById("gesture_webCamPlaceholder").style.margin = "0";
        document.getElementById("gestureAnalyzeButton").innerHTML = CCB.str_group.gesture_recognition_button_analyze;
        $('#webCameraGesture').addClass("webCameraGestureStyling");
        Webcam.attach('#webCameraGesture');
        $("#gestureAnalyzeButton").removeClass("disabled");
        gestureRecognitionButtonClickCount = 0;
        Materialize.toast(CCB.str_group.speech_recognition_cameraon, 1500, 'shareUrl');
    } else {
        document.getElementById("gesture_webCamPlaceholder").style.display = "block";
        document.getElementById("gesture_webCamPlaceholder").style.margin = "-240px 0 0 0";
        document.getElementById("gestureAnalyzeButton").innerHTML = CCB.str_group.gesture_recognition_button_analyze;
        Webcam.reset();
        $("#gestureAnalyzeButton").addClass("disabled");
        $('#webCameraGesture').removeClass("webCameraGestureCapturedStyling");
        gestureRecognitionButtonClickCount = 0;
        Materialize.toast(CCB.str_group.speech_recognition_cameraoff, 1500, 'shareUrl');
    }
}

function gestureRecognize() {
    // Webcam.freeze();

    gestureRecognitionButtonClickCount += 1;

    if (gestureRecognitionButtonClickCount == 2) {
        // recognized not clicked      
        gestureRecognitionButtonClickCount = 0;
        document.getElementById('gestureAnalyzeButton').innerHTML = CCB.str_group.gesture_recognition_button_analyze;
        // Webcam.unfreeze();
        $('#webCameraGesture img')[0].parentNode.removeChild($('#webCameraGesture img')[0]);
        document.getElementById('gestureResultAreaContent').innerHTML = CCB.str_group.gesture_recognition_button_result;
        $('#webCameraGesture').removeClass("webCameraGestureStyling");
        $('#webCameraGesture').removeClass("webCameraGestureCapturedStyling");
        $('#webCameraGesture').addClass("webCameraGestureCapturedRestoreStyling");
        document.getElementById('cloudRequestStatuss').innerHTML = ''

    } else if (gestureRecognitionButtonClickCount == 1) {
        // recognize clicked
        document.getElementById('gestureAnalyzeButton').innerHTML = CCB.str_group.gesture_recognition_button_analyzing;
        $("#gestureAnalyzeButton").addClass("disabled");
        gestureRequestBaiduCloud();
        $('#webCameraGesture').removeClass("webCameraGestureStyling");
        $('#webCameraGesture').addClass("webCameraGestureCapturedStyling");
        $('#webCameraGesture').removeClass("webCameraGestureCapturedRestoreStyling");
    }
}

function gestureRequestBaiduCloud() {

    // CCB.str_group.emotion_recognition_button_analyzing
    // webcam part
    Webcam.snap(function (data_uri) {
        let divBefore = $('#webCameraGesture div')[0];
        let imgs = document.createElement('img');
        imgs.src = data_uri;
        imgs.setAttribute("style", "width:260px;height:220px;margin-left:20px;");
        // Webcam.freeze();
        // 给webCameraGesture 第一个元素之前添加一个元素
        divBefore.parentNode.insertBefore(imgs, divBefore)

        var gesture_imageURLbase64 = data_uri;
        var gesture_ImageURL = gesture_imageURLbase64;
        var gesture_block = gesture_ImageURL.split(";");
        var gesture_contentType = gesture_block[0].split(":")[1];
        var gesture_realData = gesture_block[1].split(",")[1];
        // 将base64 图片转换成 blob对象
        var gesture_blob = b64toBlob(gesture_realData, gesture_contentType);
        // 将blob对象装换成file对象
        let str = new File([gesture_blob], "filename.png", { type: "image/png" })
        if (gesture_blob.size / (1024 * 1024) > 4) {
            window.alert('上传的图片不能超过3M')
            return;
        }
        Materialize.toast(CCB.str_group.emotion_recognition_image_captured, 1000, 'shareUrl');
        var gesture_formData = new FormData();
        gesture_formData.append('image', str);
        document.getElementById('cloudRequestStatuss').innerHTML = ''
        $.ajax({
            url: gestureRecognitionAPIUrl,
            data: gesture_formData,
            type: 'POST',
            contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
            processData: false, // NEEDED, DON'T OMIT THIS
            timeout: 10000,
        })
            .done(function (response, data) {
                if (response.data.result.length > 0) {
                    document.getElementById('gestureResultAreaContent').innerHTML = `<span style="font-style:normal;font-weight:600;color:#000">${response.data.result[0].classname}</span>`;
                    document.getElementById('gestureAnalyzeButton').innerHTML = CCB.str_group.gesture_recognition_button_retake;
                    $("#gestureAnalyzeButton").removeClass("disabled");
                    if (window.send == 'module') {
                        console.log(response.data.result[0].classname)
                        sendModule(response.data.result[0].classname)
                    } else {

                        // 手势识别同步数据
                        let eventURL = document.getElementById('AI_gesture_events').value
                        $('#cloudRequestStatuss').css("color", "orange");
                        document.getElementById('cloudRequestStatuss').innerHTML = CCB.str_group.cloud_event_syncing;
                        var jsontoCloud = `{"gesture":"${response.data.result[0].classname}"}`
                        $.ajax({
                            type: "POST",
                            url: eventURL,
                            data: jsontoCloud,
                            contentType: "application/json; charset=utf-8",
                            dataType: "json"
                        })
                            .done(function () {
                                // console.log("error");
                                // console.log(xhr.status);
                                if (xhr.status == 200) {
                                    $('#cloudRequestStatuss').css("color", "#2196f3");
                                    document.getElementById('cloudRequestStatuss').innerHTML = CCB.str_group.cloud_event_success;
                                } else if (xhr.status !== 200) {
                                    $('#cloudRequestStatuss').css("color", "red");
                                    document.getElementById('cloudRequestStatuss').innerHTML = CCB.str_group.cloud_event_failed;
                                }
                            })
                            .error(function (xhr) {
                                // console.log("error");
                                // console.log(xhr.status);
                                if (xhr.status == 200) {
                                    $('#cloudRequestStatuss').css("color", "#2196f3");
                                    document.getElementById('cloudRequestStatuss').innerHTML = CCB.str_group.cloud_event_success;
                                } else if (xhr.status !== 200) {
                                    $('#cloudRequestStatuss').css("color", "red");
                                    document.getElementById('cloudRequestStatuss').innerHTML = CCB.str_group.cloud_event_failed;
                                }
                            });
                    }
                } else {
                    document.getElementById('gestureAnalyzeButton').innerHTML = CCB.str_group.gesture_recognition_button_retake;
                    $("#gestureAnalyzeButton").removeClass("disabled");
                    document.getElementById('gestureResultAreaContent').innerHTML = `<span style="font-style:normal;font-weight:600;color:red">${CCB.str_group.gesture_file_result}</span>`
                }

            });
    });
}

//get cococloud events
function captureCloudEvents(demo) {
    let api_key = USER.api_key || "";
    $.ajax({
        url: '//api.cocorobo.cn/iot/data/apikey/' + api_key + '/event/',
        xhrFields: {
            withCredentials: true
        },
        type: 'GET',
        success: function (data) {
            if (data != null) {
                let select1 = $('#AI_webcam_events');
                let select2 = $('#AI_voice_events');
                let select3 = $('#AI_gesture_events');
                let fragment = document.createDocumentFragment();
                $.each(data, function (i, obj) {
                    let option = document.createElement('option');
                    option.textContent = obj.name;
                    option.value = obj.url.replace("http", "https");
                    // console.log(option.value);
                    // console.log(option)
                    fragment.appendChild(option);
                });
                select1.empty().append(fragment).material_select();
                select2.empty().append(fragment).material_select();
                select3.empty().append(fragment).material_select();
            }
        },
        error: function (error) {
            console.log("error");
        }
    });
};


//get cococloud events
function AICloudEvents(data) {
    if (data != null) {
        let select1 = $('#AI_webcam_events');
        let select2 = $('#AI_voice_events');
        let select3 = $('#AI_gesture_events');
        let fragment1 = document.createDocumentFragment();
        let fragment2 = document.createDocumentFragment();
        let fragment3 = document.createDocumentFragment();
        $.each(data, function (i, obj) {
            let option1 = document.createElement('option');
            option1.textContent = obj.name;
            option1.value = obj.url.replace("http", "https");
            let option2 = document.createElement('option');
            option2.textContent = obj.name;
            option2.value = obj.url.replace("http", "https");
            let option3 = document.createElement('option');
            option3.textContent = obj.name;
            option3.value = obj.url.replace("http", "https");
            // console.log(option.value);
            // console.log(option)
            fragment1.appendChild(option1);
            fragment2.appendChild(option2);
            fragment3.appendChild(option3);
        });
        select1.empty().append(fragment1).material_select();
        select2.empty().append(fragment2).material_select();
        select3.empty().append(fragment3).material_select();
    }
};

// image conversion
function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, { type: contentType });
    return blob;
}


// 机器人控制
var obj = {
    top: "top",
    right: "right",
    bottom: "bottom",
    left: "left",
    triangle: "X",
    wrong: "A",
    circle: "B",
    square: "Y",
}

function sendLeft(type) {
    var sendData = "";
    if (CCB.isOpen && CCB.issend) {
        obj.top = $("#controller_top").val() || obj.top;
        obj.right = $("#controller_right").val() || obj.right;
        obj.bottom = $("#controller_bottom").val() || obj.bottom;
        obj.left = $("#controller_left").val() || obj.left;
        obj.triangle = $("#controller_triangle").val() || obj.triangle;
        obj.wrong = $("#controller_wrong").val() || obj.wrong;
        obj.circle = $("#controller_circle").val() || obj.circle;
        obj.square = $("#controller_square").val() || obj.square;
        for (const key in obj) {
            if (key === type) {
                sendData = obj[key]
            }
        }
        $('.send_data').text(sendData)
        sendModule(sendData, 'send')
    }
}

$(document).keydown(function (event) {
    var sendData = "";
    let key = event.keyCode
    if (CCB.isOpen && CCB.issend) {
        if (key == 38) {
            sendData = $("#controller_top").val() || obj.top;
        } else if (key == 40) {
            sendData = $("#controller_bottom").val() || obj.bottom;
        } else if (key == 39) {
            sendData = $("#controller_right").val() || obj.right;
        } else if (key == 37) {
            sendData = $("#controller_left").val() || obj.left;
        } else if (key == 88) {
            sendData = $("#controller_triangle").val() || obj.triangle;
        } else if (key == 66) {
            sendData = $("#controller_circle").val() || obj.circle;
        } else if (key == 89) {
            sendData = $("#controller_square").val() || obj.square;
        } else if (key == 65) {
            sendData = $("#controller_wrong").val() || obj.wrong;
        }

        if (sendData) {
            $('.send_data').text(sendData)
            sendModule(sendData, 'send')
        }
    }

});