$(window).load(function(){
	
	// We are listening to the window.load event, so we can be sure
	// that the images in the slideshow are loaded properly.


	// Testing whether the current browser supports the canvas element:
	var supportCanvas = 'getContext' in document.createElement('canvas');
//Turn off canvas
supportCanvas = false;

	var canvasElement;
	var canvasContext;

	// The canvas manipulations of the images are CPU intensive,
	// this is why we are using setTimeout to make them asynchronous
	// and improve the responsiveness of the page.

	var box1slides = $('#grid #box1 img');
	var box2slides = $('#grid #box2 img');
	var box3slides = $('#grid #box3 img');
	var box4slides = $('#grid #box4 img');
	var box5slides = $('#grid #box5 img');
	var box6slides = $('#grid #box6 img');
	var box7slides = $('#grid #box7 img');
	var box8slides = $('#grid #box8 img');

	var box1links = $('#grid #box1 a');
	var box2links = $('#grid #box2 a');
	var box3links = $('#grid #box3 a');
	var box4links = $('#grid #box4 a');
	var box5links = $('#grid #box5 a');
	var box6links = $('#grid #box6 a');
	var box7links = $('#grid #box7 a');
	var box8links = $('#grid #box8 a');

	var cycleTime = 23800;

	var box1vitals = { id: "box1", top: 0, left: 0, current: 0, swap: 0, links: box1links, slides: box1slides };
	var box2vitals = { id: "box2", top: 0, left: 393, current: 0, swap: 22950, links: box2links, slides: box2slides };
	var box3vitals = { id: "box3", top: 0, left: 524, current: 0, swap: 13600, links: box3links, slides: box3slides };
	var box4vitals = { id: "box4", top: 131, left: 0, current: 0, swap: 16100, links: box4links, slides: box4slides };
	var box5vitals = { id: "box5", top: 131, left: 262, current: 0, swap: 8500, links: box5links, slides: box5slides };
	var box6vitals = { id: "box6", top: 131, left: 393, current: 0, swap: 19550, links: box6links, slides: box6slides };
	var box7vitals = { id: "box7", top: 131, left: 786, current: 0, swap: 29750, links: box7links, slides: box7slides };
	var box8vitals = { id: "box8", top: 263, left: 0, z_index: 100, current: 0, swap: 25500, links: box8links, slides: box8slides, width: 399 };

	if (supportCanvas) {
		// Create canvas element
		canvasElement = document.createElement('canvas');
		canvasElement.setAttribute("width", 910); 
		canvasElement.setAttribute("height", 385); 
		canvasContext = canvasElement.getContext("2d");
		canvasContext.globalAlpha = 0.90;
		init();
	} else {
		canvasElement = document.createElement('div');
		canvasElement.setAttribute("width", 910);
		canvasElement.setAttribute("height", 385);
		initNoCanvas();
	}

	function init() {
		$('#grid').append(canvasElement);
		var mapElement = document.createElement('map');
		$('#grid').append(mapElement);
		$(mapElement).attr('name', 'canvasMap');
		$('#gridmap').attr('usemap', '#canvasMap');
		drawMap(box1slides, box1vitals);
		drawMap(box2slides, box2vitals);
		drawMap(box3slides, box3vitals);
		drawMap(box4slides, box4vitals);
		drawMap(box5slides, box5vitals);
		drawMap(box6slides, box6vitals);
		drawMap(box7slides, box7vitals);
		drawMap(box8slides, box8vitals);
		canvasContext.drawImage(box1slides[box1vitals.current], box1vitals.left, box1vitals.top, box1slides[0].naturalWidth, box1slides[0].naturalHeight);
		canvasContext.drawImage(box2slides[box2vitals.current], box2vitals.left, box2vitals.top, box2slides[0].naturalWidth, box2slides[0].naturalHeight);
		canvasContext.drawImage(box3slides[box3vitals.current], box3vitals.left, box3vitals.top, box3slides[0].naturalWidth, box3slides[0].naturalHeight);
		canvasContext.drawImage(box4slides[box4vitals.current], box4vitals.left, box4vitals.top, box4slides[0].naturalWidth, box4slides[0].naturalHeight);
		canvasContext.drawImage(box5slides[box5vitals.current], box5vitals.left, box5vitals.top, box5slides[0].naturalWidth, box5slides[0].naturalHeight);
		canvasContext.drawImage(box6slides[box6vitals.current], box6vitals.left, box6vitals.top, box6slides[0].naturalWidth, box6slides[0].naturalHeight);
		canvasContext.drawImage(box7slides[box7vitals.current], box7vitals.left, box7vitals.top, box7slides[0].naturalWidth, box7slides[0].naturalHeight);
		canvasContext.drawImage(box8slides[box8vitals.current], box8vitals.left, box8vitals.top, box8slides[0].naturalWidth, box8slides[0].naturalHeight);
		setTimeout(function() { swapImages(box1slides, box1vitals); }, box1vitals.swap);
		setTimeout(function() { swapImages(box2slides, box2vitals); }, box2vitals.swap);
		setTimeout(function() { swapImages(box3slides, box3vitals); }, box3vitals.swap);
		setTimeout(function() { swapImages(box4slides, box4vitals); }, box4vitals.swap);
		setTimeout(function() { swapImages(box5slides, box5vitals); }, box5vitals.swap);
		setTimeout(function() { swapImages(box6slides, box6vitals); }, box6vitals.swap);
		setTimeout(function() { swapImages(box7slides, box7vitals); }, box7vitals.swap);
		setTimeout(function() { swapImages(box8slides, box8vitals); }, box8vitals.swap);
	}

	function initNoCanvas() {
		$('#gridmap').remove();
		$('#grid').append(canvasElement);
		drawGrid(box1slides, box1vitals);
		drawGrid(box2slides, box2vitals);
		drawGrid(box3slides, box3vitals);
		drawGrid(box4slides, box4vitals);
		drawGrid(box5slides, box5vitals);
		drawGrid(box6slides, box6vitals);
		drawGrid(box7slides, box7vitals);
		drawGrid(box8slides, box8vitals);
		setTimeout(function() { swapImagesNoCanvas(box1slides, box1vitals); }, box1vitals.swap);
		setTimeout(function() { swapImagesNoCanvas(box2slides, box2vitals); }, box2vitals.swap);
		setTimeout(function() { swapImagesNoCanvas(box3slides, box3vitals); }, box3vitals.swap);
		setTimeout(function() { swapImagesNoCanvas(box4slides, box4vitals); }, box4vitals.swap);
		setTimeout(function() { swapImagesNoCanvas(box5slides, box5vitals); }, box5vitals.swap);
		setTimeout(function() { swapImagesNoCanvas(box6slides, box6vitals); }, box6vitals.swap);
		setTimeout(function() { swapImagesNoCanvas(box7slides, box7vitals); }, box7vitals.swap);
		setTimeout(function() { swapImagesNoCanvas(box8slides, box8vitals); }, box8vitals.swap);
	}

	function drawGrid(imgList, boxVitals) {
		$(canvasElement).append(imgList[boxVitals.current]);
		$(imgList[boxVitals.current]).css({ position: "absolute", top: boxVitals.top, left: boxVitals.left, border: 0, "opacity": 0.0 });
		$(imgList[boxVitals.current]).animate({ opacity: 1.0}, 500);
		if (boxVitals.z_index) {
			$(imgList[boxVitals.current]).css({ 'z-index': boxVitals.z_index });
		}
		$(imgList[boxVitals.current]).wrap(boxVitals.links[boxVitals.current]);
		$(imgList[boxVitals.current]).bind('mouseover', function() { mouseInNoCanvas(imgList, boxVitals) } );
		$(imgList[boxVitals.current]).bind('mouseout', function() { mouseOutNoCanvas(imgList, boxVitals) } );
	}

	function drawMap(imgList, boxVitals) {
		/* 
		canvasContext.save();
		canvasContext.beginPath();
		canvasContext.strokeStyle = "#000000";
		canvasContext.rect(boxVitals.left, boxVitals.top, imgList[boxVitals.current].width, imgList[boxVitals.current].height);
		canvasContext.stroke();
		canvasContext.restore();
		*/
		// Add the clickable map
		$("#"+boxVitals.id+"area").remove();
		var areaElement = document.createElement('area');
		areaElement.setAttribute('shape', 'rect');
		areaElement.setAttribute('coords', boxVitals.left+","+boxVitals.top+","+(boxVitals.left + boxVitals.slides[boxVitals.current].naturalWidth)+","+(boxVitals.top + boxVitals.slides[boxVitals.current].naturalHeight));
		$("#grid map").append(areaElement);
		$(areaElement).attr({
			id: boxVitals.id+"area",
			href: boxVitals.links[boxVitals.current].href
			});
		$(areaElement).bind('mouseover', function() { mouseIn(imgList, boxVitals) } );
		$(areaElement).bind('mouseout', function() { mouseOut(imgList, boxVitals) } );
		return;
	}

	function mouseInNoCanvas(imgList, boxVitals) {
		$(imgList[boxVitals.current]).css({"opacity": 0.90});
	}

	function mouseOutNoCanvas(imgList, boxVitals) {
		$(imgList[boxVitals.current]).css({"opacity": 1.0});
	}

	function mouseIn(imgList, boxVitals) {
		var clearWidth = imgList[boxVitals.current].naturalWidth;
		if (boxVitals.width > 0) {
			clearWidth = boxVitals.width;
		}
		canvasContext.clearRect(boxVitals.left, boxVitals.top, clearWidth, boxVitals.slides[boxVitals.current].naturalHeight);
		canvasContext.globalAlpha = 1.0;
		canvasContext.drawImage(imgList[boxVitals.current], boxVitals.left, boxVitals.top, imgList[boxVitals.current].naturalWidth, imgList[boxVitals.current].naturalHeight);
		canvasContext.globalAlpha = 1.0;
	}

	function mouseOut(imgList, boxVitals) {
		var clearWidth = imgList[boxVitals.current].naturalWidth;
		if (boxVitals.width > 0) {
			clearWidth = boxVitals.width;
		}
		// canvasContext.globalAlpha = 1.0;
		// canvasContext.clearRect(boxVitals.left, boxVitals.top, clearWidth, boxVitals.slides[boxVitals.current].naturalHeight);
		// canvasContext.drawImage(imgList[boxVitals.current], boxVitals.left, boxVitals.top, imgList[boxVitals.current].naturalWidth, imgList[boxVitals.current].naturalHeight);
		 setTimeout(function() { fadeImage(imgList, boxVitals, 1.0, 0.9); }, 50);
	}

	function fadeImage(imgList, boxVitals, startOpacity, stopOpacity) {
		var currentOpacity = startOpacity - 0.01;
		canvasContext.globalAlpha = currentOpacity;
		var clearWidth = imgList[boxVitals.current].naturalWidth;
		canvasContext.clearRect(boxVitals.left, boxVitals.top, clearWidth, boxVitals.slides[boxVitals.current].naturalHeight);
		canvasContext.drawImage(imgList[boxVitals.current], boxVitals.left, boxVitals.top, imgList[boxVitals.current].naturalWidth, imgList[boxVitals.current].naturalHeight);
		if (currentOpacity < stopOpacity) {
			return;
		}
		return setTimeout(function() { fadeImage(imgList, boxVitals, currentOpacity, stopOpacity); }, 50);
	}

	function incrementCurrent(imgList, boxVitals) {
		var maxIndex = imgList.length - 1;
		var nextIndex = boxVitals.current + 1;
		if (nextIndex > maxIndex) {
			nextIndex = 0;
		}
		boxVitals.current = nextIndex;
		return nextIndex;
	}

	function swapImagesNoCanvas(imgList, boxVitals) {
		if (boxVitals.swap == 0) {
			return;
		}
		$(imgList[boxVitals.current]).animate({ opacity: 0.0}, 500);
		var trashcanImage = $(imgList[boxVitals.current]);
		incrementCurrent(imgList, boxVitals);
		$(canvasElement).append(imgList[boxVitals.current]);
		drawGrid(imgList, boxVitals);
		$(imgList[boxVitals.current]).fadeIn(500, function() {  $(trashcanImage).unwrap(); $(trashcanImage).remove();});
		setTimeout(function() { swapImagesNoCanvas(imgList, boxVitals); }, cycleTime);
	}

	function swapImages(imgList, boxVitals) {
		if (boxVitals.swap == 0) {
			return;
		}
		var clearWidth = imgList[boxVitals.current].naturalWidth;
		if (boxVitals.width > 0) {
			clearWidth = boxVitals.width;
		}
		// TODO: Call function to fade out rectangle
		canvasContext.clearRect(boxVitals.left, boxVitals.top, clearWidth, boxVitals.slides[boxVitals.current].naturalHeight);
		// TODO: Call function to fade in rectangle
		canvasContext.drawImage(imgList[incrementCurrent(imgList, boxVitals)], boxVitals.left, boxVitals.top, imgList[boxVitals.current].naturalWidth, imgList[boxVitals.current].naturalHeight);
		drawMap(imgList, boxVitals);
		return setTimeout(function() { swapImages(imgList, boxVitals); }, cycleTime);
	}

	function swapFade(imgList, boxVitals) {
		canvasContext.drawImage(imgList[incrementCurrent(imgList, boxVitals)], boxVitals.left, boxVitals.top, imgList[boxVitals.current].width, imgList[boxVitals.current].height);
		var imageData = canvasContext.getImageData(boxVitals.left, boxVitals.top, imgList[boxVitals.current].width, imgList[boxVitals.current].height);
			inputData = imageData.data;
			output = canvasContext.createImageData(imgList[boxVitals.current].width, imgList[boxVitals.current].height);
			outputData = output.data;
		var aniStop = true;
		for (var i = 0, z=inputData.length; i < z; i++) {
			// inputData[i] = 255 - inputData[i];
			// inputData[++i] = 255 - inputData[i];
			// inputData[++i] = 255 - inputData[i];
			if (inputData[i] > 230) { inputData[i] = 255; } else {
 inputData[i] += 20; aniStop = false; }
			if (inputData[++i] > 230) { inputData[i] = 255; } else { inputData[i] += 20; aniStop = false; }
			if (inputData[++i] > 230) { inputData[i] = 255; } else {
 inputData[i] += 20; aniStop = false; }
			++i;
		}
		canvasContext.putImageData(imageData, boxVitals.left, boxVitals.top);
		if (!aniStop) {
			setTimeout(function() { imageFade(imgList, boxVitals); }, 100);
		}
		
	}

});