var ie_grid_corrections = [
	[[0,0],[64,0],[128,0],[191,0],[255,0],[319,0],[382,0],[446,0],[509,0],[572,0],[636,0],[699,0],[762,0]],
	[[0,64],[64,64],[128,64],[191,64],[255,64],[319,64],[382,64],[446,64],[509,64],[572,64],[636,64],[699,64],[762,64]],
	[[0,128],[64,128],[128,128],[191,128],[255,128],[319,128],[382,128],[446,128],[509,128],[572,128],[636,128],[699,128],[762,128]],
	[[0,191],[64,191],[128,191],[191,191],[255,191],[319,191],[382,191],[446,191],[509,191],[572,191],[636,191],[699,191],[762,191]],
	[[0,255],[64,255],[128,255],[191,255],[255,255],[319,255],[382,255],[446,255],[509,255],[572,255],[636,255],[699,255],[762,255]],
	[[0,319],[64,319],[128,319],[191,319],[255,319],[319,319],[382,319],[446,319],[509,319],[572,319],[636,319],[699,319],[762,319]],
	[[0,382],[64,382],[128,382],[191,382],[255,382],[319,382],[382,382],[446,382],[509,382],[572,382],[636,382],[699,382],[762,382]]
];

var productsPath = 'gfx/banner/products/p';
var productsCount = 90;

var productGridX = 13;
var productGridY = 7;
var productGrid = new Array();
var productRollA = null;
var productRollB = null;
var productImages = new Array();

//document.write('<div style="visibility:hidden;">');
for(var i = 0; i < productsCount; i++) {
	//productImages[i] = productsPath+(i+1)+".png";
	//document.write('<img src="'+productImages[i]+'"/>');
	var tmp = new Image();
	tmp.src = productsPath+(i+1)+".png";
	productImages[i] = tmp;
}
//document.write('</div>');

var productGridUse = null;











function loadProductGrid() {
	
	fisherYates(productImages);
	var index = 0;
	
	for(var i = 0; i < productGridY; i++) {
		for(var j = 0; j < productGridX; j++) {
			
			if(!productImages[index]) continue;
			
			if(!productGrid[i]) {
				productGrid[i] = new Array();
			}
			
			//if(!productImages[index].src) {
			//	var tmp = new Image();
			//	tmp.src = productImages[index];
			//	productImages[index] = tmp;
			//}
			
			productGrid[i][j] = productImages[index];
			
			index++;
		}
	}
}

window.setTimeout(loadProductGrid,100);

function placeProductImg(ctx,img,x,y) {
	try {
		if(img.width == 0 || img.height == 0) return;
		if(isIE) {
			ctx.drawImage(img,ie_grid_corrections[y][x][0],ie_grid_corrections[y][x][1]);
		} else {
			ctx.drawImage(img,x*img.width,y*img.height);
		}
	} catch (e) {
		// silently fail since we are waiting for images to load
	}
}

var bannerNumber = getBannerNumber();
function getBannerNumber()
{

    bannerNumber= Math.floor(Math.random()*8);
    bannerNumber = bannerNumber+1;
     
    return bannerNumber;
}
var bannerIE8Number = getIE8BannerNumber();
function getIE8BannerNumber()
{

    bannerIE8Number= Math.floor(Math.random()*4);
    bannerIE8Number = bannerIE8Number+1;
     
    return bannerIE8Number;
}

var bgGrid = new Image();
bgGrid.src = 'gfx/banner/bggrid.png';

var girlLayer = new Image();
girlLayer.src = 'gfx/banner/banner'+bannerNumber+'.png';
 
var txtLayer = new Image();
txtLayer.src = 'gfx/banner/millionsofrewards-2.png';

var gradientLayer = null;
if(isIE) { // load because IE's support of gradients is poor at best
	gradientLayer = new Image();
	gradientLayer.src = 'gfx/banner/gradient-large.png';
}

function drawBackground() {
	
	var canvas = document.getElementById("bg");
	var ctx = canvas.getContext("2d");
	
	var w = parseInt(canvas.width);
	var h = parseInt(canvas.height);
	
	ctx.fillStyle = "rgb(12,53,99)";
	ctx.fillRect(0, 0, w, h);
	
}

function drawGrid() {
	
	var canvas = document.getElementById("grid");
	var ctx = canvas.getContext("2d");
	
	var w = parseInt(canvas.width);
	var h = parseInt(canvas.height);
	
	if(isIE) {
		// i hate ie. ie's floating point math is wrong making manual subtraction of a single pixel at odd intervals
		for(var i in ie_grid_corrections) {
			for(var j in ie_grid_corrections[i]) {
				ctx.drawImage(bgGrid,ie_grid_corrections[i][j][0]-1,ie_grid_corrections[i][j][1]);
			}
		}
	} else {
		for(var i in ie_grid_corrections) {
			for(var j in ie_grid_corrections[i]) {
				ctx.drawImage(bgGrid,j*bgGrid.width-1,i*bgGrid.height);
			}
		}
	}
}

var PROD_A = true;

function drawProduct() {
	
	var FadeUp = null;
	var FadeDown = null;
	
	if(PROD_A) {
		FadeUp = "productB";
		FadeDown = "productA";
		PROD_A = false;
	} else {
		FadeUp = "productA";
		FadeDown = "productB";
		PROD_A = true;
	}
	
	var canvas = document.getElementById(FadeUp);
	
	var ctx = canvas.getContext("2d");
	
	var w = parseInt(canvas.width);
	var h = parseInt(canvas.height);
	
	ctx.clearRect(0,0,w,h);
	
	for(var i in ie_grid_corrections) {
		for(var j in ie_grid_corrections[i]) {
			placeProductImg(ctx,productGrid[i][j],j,i);
		}
	}
	
	fadeUp(FadeUp);
	fadeDown(FadeDown);
}

function drawForground() {
	
	var canvas = document.getElementById("fg");
	var ctx = canvas.getContext("2d");
	
	var w = parseInt(canvas.width);
	var h = parseInt(canvas.height);
	
	if(isIE) { // Again, MS IE does not calculate correctly so we use an image
		ctx.drawImage(girlLayer,129,0);
		ctx.drawImage(gradientLayer,0,0);
	} else {
		ctx.drawImage(girlLayer,141,0);
		var g = ctx.createLinearGradient(0, 0, 0, h);
		g.addColorStop(0.0,'rgba(0,0,0,1.0)');
		g.addColorStop(0.3,'rgba(0,0,0,0.1)');
		g.addColorStop(0.4,'rgba(0,0,0,0.0)');
		g.addColorStop(0.6,'rgba(0,0,0,0.0)');
		g.addColorStop(0.7,'rgba(0,0,0,0.1)');
		g.addColorStop(1.0,'rgba(0,0,0,1.0)');
		ctx.fillStyle = g;
		ctx.fillRect(0, 0, w, h);
	}
	
	ctx.fillStyle = "rgb(255,255,255)";
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(w-400,0);
	ctx.lineTo(0,40);
	ctx.closePath();
	ctx.fill();
	
	ctx.beginPath();
	ctx.moveTo(0,h-10);
	ctx.lineTo(w,h-100);
	ctx.lineTo(w,h);
	ctx.lineTo(0,h);
	ctx.closePath();
	ctx.fill();
	
	if(isIE) { // Again, MS IE does not calculate correctly so we use an image
		ctx.drawImage(txtLayer,w/2-parseInt(txtLayer.width)/2,h-parseInt(txtLayer.height));
	} else {
		ctx.drawImage(txtLayer,w/2-parseInt(txtLayer.width)/2,h-parseInt(txtLayer.height)+24);
	}
	
}


function go() {
	loadProductGrid();
	drawProduct();
	window.setTimeout(go,9000);
}


br = getBrowser();

var isIE7orLess = isIE && parseInt(br[1]) < 8;


function init() {
	// adjust for IE8 since they do things differently!
	if(!isIE7orLess && isIE) {
		var st = document.createElement('img');
		st.src = 'gfx/banner/ie8-background'+bannerIE8Number+'.jpg';
		st.style.position = 'absolute';
		st.style.left = 10;
		st.style.zIndex = 1000;
		document.getElementById("fg").replaceNode(st);
	} else { 
		drawBackground();
		drawGrid();
		drawForground();
		changeOpac(0, 'productA');
		changeOpac(0, 'productB');
		loadProductGrid();
		window.setTimeout(go,500);
	}
}