window.onload = main;
var canvas;
var dgl_input;
var rgnlum;
var rgncon;
var rgnsat;
var img;
var ratio;
var topmargin;
var leftmargin;
var ctx;

function main() {
    console.log("JS Loaded");
    canvas = document.getElementById("canvastp1");
    dgl_input = document.getElementById('files');
    dgl_input.addEventListener('change', handleFileSelect, false);
    console.log("Event Listener added");
    ctx = canvas.getContext('2d');
    setRnglum();
    setRngcon();
    setRngsat();
}

function setRnglum() {
    rgnlum = document.getElementById('rgnlum');
    rgnlum.oninput = updateFilters;
}


function setRngcon() {
    rgncon = document.getElementById('rgncon');
    rgncon.oninput = updateFilters;
}

function setRngsat() {
    rgnsat = document.getElementById('rgnsat');
    rgnsat.oninput = updateFilters;
}

function updateFilters() {
    ctx.filter =
        'brightness(' + rgnlum.value + '%)' +
        ' contrast(' + rgncon.value + '%)' +
        ' saturate(' + rgnsat.value + '%)';
    ctx.drawImage(img, 0, 0,
        img.width, img.height,
        leftmargin, topmargin,
        img.width * ratio, img.height * ratio);
}

function handleFileSelect(e) {
    var ctx = canvas.getContext('2d');
    img = new Image;
    img.onload = function() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        var hRatio = canvas.width / img.width;
        var vRatio = canvas.height / img.height;
        ratio = Math.min(hRatio, vRatio);
        topmargin = (canvas.height - img.height * ratio) / 2;
        leftmargin = (canvas.width - img.width * ratio) / 2;
        ctx.drawImage(img, 0, 0,
            img.width, img.height,
            leftmargin, topmargin,
            img.width * ratio, img.height * ratio);
    };
    img.src = URL.createObjectURL(e.target.files[0]);
}