// If our screen is smaller than 640px in width (that's CSS pixels), we scale the
// internal resolution of the canvas by 2. This gives us a larger viewport and
// also essentially enables retina resolution on the iPhone and other devices
// with small screens.
var scale = (window.innerWidth < 640) ? 2 : 0.5;


// We want to run the game in "fullscreen", so let's use the window's size
// directly as the canvas' style size.
var canvas = document.getElementById('canvas');
canvas.style.width = window.innerWidth + 'px';
canvas.style.height = window.innerHeight + 'px';


// Listen to the window's 'resize' event and set the canvas' size each time
// it changes.
window.addEventListener('resize', function(){
    console.log("resize event fired");

    // If the game hasn't started yet, there's nothing to do here
    if( !ig.system ) { return; }

    // Resize the canvas style and tell Impact to resize the canvas itself;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';

    console.log("canvas.style.width: " + canvas.style.width);
    console.log("canvas.style.height: " + canvas.style.height);

    ig.system.resize( window.innerWidth * scale, window.innerHeight * scale );

    // Also repositon the touch buttons, if we have any
    if( window.myTouchButtons ) {
        window.myTouchButtons.align();
    }
}, false);


// Finally, start the game into MyGame and use the ImpactSplashLoader plugin
// as our loading screen
var width = window.innerWidth * scale,
    height = window.innerHeight * scale;

ig.main( '#canvas', Titlescreen, 60, width, height, 1, ig.ImpactSplashLoader );