/******************************************************************************
* Demo for MediaCoder Server
* Developed by Stanley Huang https://www.facebook.com/stanleyhuangyc
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
******************************************************************************/

var chart = new Array;
var gauge = new Array;
var stats;
var worker = "/0";

var chartData = [
    [0x10d, "Video Bitrate", "#808080", "Kbps", "Video Bitrate (Kbps)", 100],
    [0x10c, "Audio Bitrate", "#404040", "Kbps", "Audio Bitrate (Kbps)", 100],
    [0x104, "Encoding FPS", "#808080", "fps", "FPS", 100],
    [0x111, "CPU Usage", "#808080", "%", "Throttle (%)", 100],
];

var gaugeData = [
    [0x10d, "Completion (%)", 0, 100],
    [0x111, "Speed", 0, 20],
    [0x120, "CPU Usage (%)", 0, 100]
];

$(function () {
    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });
        for (var n = 0; n < gaugeData.length; n++) {
            gauge[n] = CreateGauge("gauge" + n, gaugeData[n][1], gaugeData[n][2], gaugeData[n][3]);

        }
    });
});

function init()
{
    // init UI
    var tab = "";
    var mydata = [];
    for (var i = 0; i < 60; i++) {
        mydata.push({x:i*1000,y:0});   
    }
    for (var n = 0; n < chartData.length; n++) {
        tab += "<label><input type='checkbox' id='chartCheck" + n + "' onclick='toggleChart(" + n + ")'/>" + chartData[n][1] + "</label> ";
        chart[n] = CreateChart("container" + n, chartData[n][1], chartData[n][2], chartData[n][3], chartData[n][4], chartData[n][5], mydata);
    }
    document.getElementById("chartTabs").innerHTML = tab;

    toggleChart(0);
    toggleChart(1);

    self.setInterval(updateStats, 500);

}

function getHHMMSS(sec)
{
    var hours   = Math.floor(sec / 3600);
    var minutes = Math.floor((sec - (hours * 3600)) / 60);
    var seconds = sec - (hours * 3600) - (minutes * 60);
    if (hours   < 10) {hours   = "0"+hours;}
    if (minutes < 10) {minutes = "0"+minutes;}
    if (seconds < 10) {seconds = "0"+seconds;}
    return hours+':'+minutes+':'+seconds;
}

function getTickCount()
{
    var d = new Date();
    return d.getTime(); 
}

function updateStats() {
    stats = loadJSON("/mc/stats/" + document.getElementById("worker").value);
    if (!stats) return;
    document.getElementById("state").innerText = stats.state;

    if (stats.state == "encoding") {
        var s = "";
        s += "<table class='grid'><tr><th>Parameter</th><th>Value</th></tr>";
        s += "<tr><td>Elapsed Time</td><td>" + getHHMMSS(stats.elapsedTime) + "</td></tr>";
        s += "<tr><td>Remaining Time</td><td>" + getHHMMSS(stats.remainTime) + "</td></tr>";
        s += "<tr><td>Throughput</td><td>" + stats.throughput + "MB</td></tr>";
        if (stats.fps) {
            s += "<tr><td>Position</td><td>" + getHHMMSS(stats.pos) + "</td></tr>";
            s += "<tr><td>FPS</td><td>" + stats.fps + "fps</td></tr>";
            s += "<tr><td>Speed</td><td>" + stats.speed + "X</td></tr>";
            s += "<tr><td>Frames</td><td>" + stats.frames + "</td></tr>";
            s += "<tr><td>Video Bitrate</td><td>" + stats.videoBitrate + "Kbps</td></tr>";
            s += "<tr><td>Audio Bitrate</td><td>" + stats.audioBitrate + "Kbps</td></tr>";
            s += "<tr><td>Video Data</td><td>" + stats.videoData + "MB</td></tr>";
            s += "<tr><td>Audio Data</td><td>" + stats.audioData + "MB</td></tr>";
        }
        s += "</table>";
        document.getElementById("grid").innerHTML = s;

        gauge[0].series[0].points[0].update(stats.percent);
        gauge[1].series[0].points[0].update(parseInt(stats.speed));

        //chart[0].series[0].addPoint([stats.pos, stats.videoBitrate], true, true);
        //chart[1].series[0].addPoint([stats.pos, stats.audioBitrate], true, true);
    } else if (stats.state == "done") {
        gauge[0].series[0].points[0].update(100);
    } else if (stats.state == "error" || stats.state == "ready") {
        gauge[0].series[0].points[0].update(0);
    }
}

var chartUpdateCount = 0;
var activeChart = [0,1];

function updateCharts()
{
    // refresh chart    
    chart[activeChart[0]].series[0].setVisible(true, true);
    chart[activeChart[1]].series[0].setVisible(true, true);
}

function toggleChart(index)
{
    if (index != activeChart[0] && index != activeChart[1]) {
        activeChart[0] = activeChart[1];
        activeChart[1] = index;
    }

    for (var n = 0; n < chartData.length; n++) {
        var enabled = n == activeChart[0] || n == activeChart[1];
        document.getElementById("container" + n).style.display = (enabled ? "block" : "none");
        document.getElementById("chartCheck" + n).checked = enabled;
    }
    chart[activeChart[0]].series[0].setVisible(true, true);
    chart[activeChart[1]].series[0].setVisible(true, true);
}
