/* Cat Symphony created by Michelle Pei Ting Huang September 2013
* help from joncom via Reddit
*/

	function loadImage(uri) {
        var image = new Image();
        image.onload = onMediaLoaded();
        image.src = uri;
        return image;
    }


    function loadAudio(uri) {
        var audio = new Audio();
        audio.addEventListener('canplaythrough', onMediaLoaded, false);
        audio.src = uri;
        return audio;
    }

    function onMediaLoaded() {
        files_loaded++;
        if (files_loaded >= files_to_load) {
            all_media_loaded = true;
            alert("All media has been loaded.");
        }
    }



images_to_load = [
    'http://michellehuang.com/files/gimgs/Face_1.jpg',
    'http://michellehuang.com/files/gimgs/Face_2.jpg',
	'http://michellehuang.com/files/gimgs/Face_3.jpg',
    'http://michellehuang.com/files/gimgs/Face_4.jpg',
	'http://michellehuang.com/files/gimgs/Face_5.jpg',
    'http://michellehuang.com/files/gimgs/Face_6.jpg',
	'http://michellehuang.com/files/gimgs/Face_7.jpg',
    'http://michellehuang.com/files/gimgs/Face_8.jpg',
	'http://michellehuang.com/files/gimgs/Face_9.jpg',
    'http://michellehuang.com/files/gimgs/Face_10.jpg',
	'http://michellehuang.com/files/gimgs/Face_11.jpg',
    'http://michellehuang.com/files/gimgs/Face_12.jpg',
	'http://michellehuang.com/files/gimgs/Face_13.jpg',
    'http://michellehuang.com/files/gimgs/Face_14.jpg',

    ];

audio_to_load = [
    'http://michellehuang.com/files/1-%20C.mp3',
    'http://michellehuang.com/files/2-%20Cs.mp3',
    'http://michellehuang.com/files/3-%20D.mp3',
	'http://michellehuang.com/files/4-%20Ds.mp3',
    'http://michellehuang.com/files/5-%20E.mp3',
    'http://michellehuang.com/files/6-%20F.mp3',
	'http://michellehuang.com/files/7-%20Fs.mp3',
    'http://michellehuang.com/files/8-%20G.mp3',
    'http://michellehuang.com/files/9-%20Gs.mp3',
	'http://michellehuang.com/files/10-%20A.mp3',
    'http://michellehuang.com/files/11-%20Bf.mp3',
    'http://michellehuang.com/files/12-%20B.mp3',
	'http://michellehuang.com/files/13-%20C1.mp3',
    'http://michellehuang.com/files/14-%20C1s.mp3',

];

loaded_audio = [];
    loaded_images = [];
    files_to_load = audio_to_load.length + images_to_load.length;
    files_loaded = 0;
    all_media_loaded = false;


    for (var i = 0; i < images_to_load.length; i++) {

        var uri = images_to_load[i]; // This gets the image path.
        var image = loadImage(uri); // This loads the image of that path.
        loaded_images.push(image); // This pushes the image into storage for later.
    }


    for (var i = 0; i < audio_to_load.length; i++) {
        var uri = audio_to_load[i];
        var audio = loadAudio(uri);
        loaded_audio.push(audio);
    }

function keyDown(event) {
if (event.keyCode == 65) {
    var n = 0;
	var canvas = document.getElementById('image-canvas');
  	var context = canvas.getContext('2d')
    context.drawImage(loaded_images[n], 0, 0);
	loaded_audio[n].play();
}

if (event.keyCode == 87) {
    var n = 1;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 83) {
    var n = 2;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 69) {
    var n = 3;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 68) {
    var n = 4;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 70) {
    var n = 5;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 84) {
    var n = 6;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 71) {
    var n = 7;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 89) {
    var n = 8;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 72) {
    var n = 9;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 85) {
    var n = 10;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 74) {
    var n = 11;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 75) {
    var n = 12;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }

if (event.keyCode == 79) {
    var n = 13;
    var canvas = document.getElementById('image-canvas');
    var context = canvas.getContext('2d');
    context.drawImage(loaded_images[n], 0, 0);
    loaded_audio[n].play();
  }