/**
 * Created by Liza on 30.10.2015.
 */


var renderer;
var rpgMakerLoader = requireRpgMaker();
var stage = null;

function resize() {
    renderer.resize(window.innerWidth, window.innerHeight);
    if (stage) {
        stage.width = renderer.width + 2 * stage._margin;
        stage.height = renderer.height + 2 * stage._margin;
    }
}

function setupView() {
    var backCanvas = document.querySelector('#backCanvas');
    renderer = PIXI.autoDetectRenderer(backCanvas.width, backCanvas.height, {view: backCanvas, resolution: 1});
    resize();
    window.addEventListener('resize', resize)
}

function setupGame() {
    requestAnimationFrame(update);
    rpgMakerLoader.load('Map001', function(err, map) {
        if (err) return;
        stage = map;
        stage.width = renderer.width + 2 * stage._margin;
        stage.height = renderer.height + 2 * stage._margin;
    })
}

//window.requestAnimationFrame = function(cb) {
//    return setTimeout(cb, 500);
//}

var dt = 0, last = 0, animTime = 0;

function update() {
    var now = Date.now();
    var dt = Math.min(1000, now-last);
    dt/=1000;
    last = now;

    if (stage) {
        stage.update();

        var dt2 = dt;
        var w1 = stage._tileWidth * stage._mapWidth;
        var h1 = stage._tileHeight * stage._mapHeight;
        var x1 = stage.origin.x, y1 = stage.origin.y;
        var x2=0, y2=0;
        for (var i=0;i<30;i++) {
            var at2 = animTime + dt2;
            x2 = Math.max(0, w1 - renderer.width) * (Math.cos(at2*0.5) + 1)/2;
            y2 = Math.max(0, h1 - renderer.height) * (Math.sin(at2*0.4) + 1)/2;
            var d = Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1));
            if (d>5) {
                dt2 = dt2 / (d/5);
            } else break;
        }
        animTime += dt2;
        stage.origin.x = x2;
        stage.origin.y = y2;
        renderer.render(stage);
    }
    requestAnimationFrame(update);
}


window.go = function () {
    setupView();
    setupGame();
}
@@ -347,82 +347,345 @@
 ion 
-setupView() %7B%0A    var backCanvas = document.querySelector('#backCanvas');%0A
+isOptionValid(name) %7B%0A    return location.search.slice(1).split('&').contains(name);%0A%7D;%0A%0Afunction setupView() %7B%0A    var backCanvas = document.querySelector('#backCanvas');%0A%0A    if (isOptionValid('canvas')) %7B%0A        renderer = new PIXI.CanvasRenderer(backCanvas.width, backCanvas.height, %7Bview: backCanvas, resolution: 1%7D);%0A    else%0A    
     
@@ -788,24 +788,92 @@
 ution: 1%7D);%0A
+%0A    if (Utils.isOptionValid('canvas')) %7B%0A        return 'canvas';%0A%0A
     resize()

test canvas falllback