//factoid dimensions and alpha
var factoid_w = 423;
var factoid_h = 348;
var factoid_a = 0;

//social chat dimensions and alpha
var socialchat_w = 275;
var socialchat_h = 400;
var socialchatwin_a = 100;

//footer details
var footer_w = 0;
var footer_h = 0;
var footer_a = 0;

//header details

var header_w = 0;
var header_h = 0;
var header_exp_h = 0;
var img_index = 0;

function drawImageOnCanvas(context, src, x, y) {



    img_index++;

    var theImg = ['img'+img_index];

    console.log(theImg);

    theImg = new Image();
    theImg.style.zIndex = img_index;
    theImg.src = src;

    theImg.onload = function()
    {
        context.drawImage(theImg, x, y);
    }
}


function init() {


    var a = document.getElementById('stage');

    //select the canvas and get it's drawing context
    var a_cont = a.getContext('2d');


    drawStage(a, a_cont);
    drawFactoid(a, a_cont);


}



function drawStage(canvas, context) {
    drawImageOnCanvas(context, 'images/bg/main_bg.jpg', 0, 0);
}



function drawFactoid(canvas, context) {

        //apply shadowing
        context.shadowOffsetX = 0;
        context.shadowOffsetY = 3;
        context.shadowBlur = 3;

        var the_grad = context.createLinearGradient(0,0,0,0);

        the_grad.addColorStop(0, "#76a833");
        the_grad.addColorStop(1, "#8dc63f");


        //drawImageOnCanvas(context, 'images/card/box_bg.png', 384, 75);
        drawImageOnCanvas(context, 'images/card/bg_shadow.png', 384, 75);

        //draw a rect on screen- x,y,w,h
        context.fillRect(384, 75, factoid_w, factoid_h);





}