// Countdown page
//
exports.View =
{
    title: "Countdown",
    elements: 
    [
        { control: "stackpanel", orientation: "Horizontal", visibility: "{isLoading}", contents: [
            { control: "progressring", height: 50, width: 50, value: "{isLoading}", verticalAlignment: "Center" },
            { control: "text", value: "Loading...", color: "Red", fontsize: 24, verticalAlignment: "Center" },
        ] },
        { control: "stackpanel", orientation: "Vertical", visibility: "{!isLoading}", contents: [
            { control: "text", value: "Count: {count}", color: "Green", font: { size: 24, bold: true } },
            { control: "progressbar", value: "{count}", minimum: 0, maximum: 10, width: 300 },
            { control: "button", caption: "Start Countdown", binding: "start", visibility: "{!isCounting}" },
            { control: "button", caption: "Pause Countdown", binding: "stop", visibility: "{isCounting}" },
        ] }
    ]
}

exports.InitializeViewModel = function(context, session)
{
    var viewModel =
    {
        count: 0,
        isLoading: true,
        isCounting: false
    }
    return viewModel;
}

exports.LoadViewModel = function * (context, session, viewModel)
{
    yield Synchro.yieldAwaitable(context, function(cb){ waitInterval(4000, cb) });    
    viewModel.count = 10;
    viewModel.isLoading = false;
}

function waitInterval(intervalMillis, callback)
{
    setTimeout(function(){callback()}, intervalMillis);
}

exports.Commands = 
{
    start: function * (context, session, viewModel, params)
    {
        viewModel.isCounting = true;

        while (viewModel.isCounting && (viewModel.count > 0))
        {
            yield Synchro.yieldAwaitable(context, function(cb){ waitInterval(1000, cb) });
            if (viewModel.isCounting)
            {
                viewModel.count--;            
                yield Synchro.interimUpdateAwaitable(context);                
            }
        }

        viewModel.isCounting = false;
    },
    stop: function(context, session, viewModel, params)
    {
        viewModel.isCounting = false;
    },
}