var jq = window.jQuery;
var guiValuePairs = [
    ['size', 'px'],
    ['minversion', ''],
    ['quiet', ' modules'],
    ['radius', '%'],
    ['msize', '%'],
    ['mposx', '%'],
    ['mposy', '%']
];

function updateGui() {
    jq.each(guiValuePairs, function (idx, pair) {
        var $label = jq('label[for="' + pair[0] + '"]');
        $label.text($label.text().replace(/:.*/, ': ' + jq('#' + pair[0]).val() + pair[1]));
    });
}

function updateQrCode() {
    var options = {
        // render: "canvas",
        // ecLevel: "H",
        // minVersion: parseInt(8, 10),

        // fill: "#000",
        // background: "#fff",
        // // fill: jq('#img-buffer')[0],

        // text: jq('#txtStudentQRCode').text(),
        // size: parseInt(100, 10),
        // radius: parseInt(50, 10) * 0.01,
        // quiet: parseInt(1, 10),

        // mode: parseInt(2, 10),

        // mSize: parseInt(9, 10) * 0.01,
        // mPosX: parseInt(50, 10) * 0.01,
        // mPosY: parseInt(50, 10) * 0.01,

        // label: "Golden Dragon",
        // fontname: "Ubuntu",
        // fontcolor: "#f4a81c"
        render: jq('#render').val(),
        ecLevel: jq('#eclevel').val(),
        minVersion: parseInt(jq('#minversion').val(), 10),

        fill: jq('#fill').val(),
        background: jq('#background').val(),	

        text: jq('#text').val(),
        size: parseInt(jq('#size').val(), 10),
        radius: parseInt(jq('#radius').val(), 10) * 0.01,
        quiet: parseInt(jq('#quiet').val(), 10),

        mode: parseInt(jq('#mode').val(), 10),

        mSize: parseInt(jq('#msize').val(), 10) * 0.01,
        mPosX: parseInt(jq('#mposx').val(), 10) * 0.01,
        mPosY: parseInt(jq('#mposy').val(), 10) * 0.01,

        label: jq('#label').val(),
        fontname: jq('#font').val(),
        fontcolor: jq('#fontcolor').val()	
    };

    jq('.container').empty().qrcode(options);
}

function update() {
    updateGui();
    updateQrCode(); 
}