var main_image;
var main_image_loaded = false;
var mask1;
var mask1_loaded = false;
var mask1_opacity = 0.5;
var mask2;
var mask2_loaded = false;
var mask2_opacity = 0.3;

function initAnimation() {
    canvas = document.getElementById('logoCanvas');
    ctx = canvas.getContext('2d');
    
    main_image = new Image();
    main_image.src = "img/logo.jpg";
    main_image.onload = function() {
        main_image_loaded = true;
        }
        
    mask1 = new Image();
    mask1.src = "img/mask1.png";
    mask1.onload = function() {
        mask1_loaded = true;
    }
    
    mask2 = new Image();
    mask2.src = "img/mask2.png";
    mask2.onload = function() {
        mask2_loaded = true;
    }
    
    setInterval(draw, 100);
}

function draw() {
    ctx.clearRect(0,0,canvas.width, canvas.height);
    
    if (!main_image_loaded || !mask1_loaded || !mask2_loaded) {
        ctx.fillStyle = 'black';
        ctx.fillRect(0,0,canvas.width, canvas.height);
        return;
    }
    ctx.globalAlpha = 1;
    ctx.drawImage(main_image, 0, 0, canvas.width, canvas.height);
    
    ctx.save();
    mask1_opacity += 0.1*(Math.random()-0.5);
    if (mask1_opacity>0.9) mask1_opacity=0.11;
    else if (mask1_opacity<0.1) mask1_opacity=0.89;
    ctx.globalAlpha = mask1_opacity;
    ctx.drawImage(mask1, 0, 0, canvas.width, canvas.height);
    
    if (Math.random()>0.95) mask2_opacity=0.4;
    else mask2_opacity=0.1;
    ctx.globalAlpha = mask2_opacity;
    ctx.drawImage(mask2, 0, 0, canvas.width, canvas.height);    
    ctx.restore;
}