//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);
		
		
		
		
	
}