var config = {
    percent: 0,
    skipPreloaderAnimation: false,
    animation: 0,
    wave: 0.2,
    shake: 0.2,
    screenEffect: 0.4,
    shoot: function() {
        TweenMax.fromTo(config, 0.5, {animation: 0}, {animation: 1});
        // resources.shot.currentTime = 0.1;
        // resources.shot.play();
    },
    hoverAnimation: 0
};

var windowWidth;
var windowHeight;

var stats;
var resources;
var preloader;
var preloadPercent;

var renderer;
var stage;

var sprite;
var uniforms;
var spriteScale;

var gui;

var isPreloaded = false;
var isControlVisible = false;

function init() {
    // resources.heartbeat.loop = true;
    // resources.heartbeat.play();

    gui = new dat.GUI();
    gui.add(config, 'animation', 0, 1).listen();
    gui.add(config, 'screenEffect', 0, 1).listen();
    gui.add(config, 'wave', 0, 1).listen();
    gui.add(config, 'shake', 0, 1).listen();
    gui.add(config, 'shoot');

    renderer = new PIXI.WebGLRenderer(1, 1, {
        // autoResize: true
    });
    stage = stage = new PIXI.Container();
    document.body.appendChild(renderer.view);

    sprite = new PIXI.Sprite(new PIXI.Texture(new PIXI.BaseTexture(resources.base)));
    sprite.anchor.set(0.5, 0.5);

    var overlayTexture = new PIXI.Texture(new PIXI.BaseTexture(resources.overlay));

    sprite.shader = new PIXI.AbstractFilter(null, document.getElementById('shader-fs').textContent, uniforms = {
        uOverlay: { type: 'sampler2D', value: overlayTexture },
        uTime: { type: '1f', value: 0 },
        uWave: { type: '1f', value: 0 },
        uShake: { type: '1f', value: 0 },
        uAnimation: { type: '1f', value: 0 },
        uScreenEffect: { type: '1f', value: 0 }
    });

    stage.addChild(sprite);

    window.onresize = onResize;
    onResize();

    loop();

}

function _onOver(evt) {
    TweenMax.to(config, 0.5, {hoverAnimation: 1});
}

function _onOut(evt) {
    TweenMax.to(config, 0.5, {hoverAnimation: 0});
}

function _onClick(evt) {
    config.shoot();
}

function onResize() {
    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;
    renderer.resize(windowWidth, windowHeight);

    spriteScale = Math.max( windowWidth / 1920, windowHeight / 1080);
    sprite.scale.set(spriteScale, spriteScale);

    render();
}

function loop() {
    requestAnimationFrame(loop);
    render();
}

function render() {
    uniforms.uAnimation.value = config.animation;
    uniforms.uScreenEffect.value = config.screenEffect + config.hoverAnimation * 0.3;
    var time = uniforms.uTime.value += 0.001;
    var shake = uniforms.uShake.value = config.shake;
    uniforms.uWave.value = config.wave;


    var spriteOffsetX = sprite.position.x = windowWidth / 2 + 0;
    var spriteOffsetY = sprite.position.y = windowHeight / 2 + 0;

    var shootRatio = Math.sin(Math.pow(config.animation, 0.5) * Math.PI);

    var offsetX = spriteScale * 320 + spriteOffsetX * 1.5 + shootRatio * Math.random() * 150 * shake;
    var offsetY = spriteScale * -180 + spriteOffsetY * 1.5 - shootRatio * Math.random() * 150 * shake;

    renderer.render(stage);
}

function preload() {

    preloader = document.querySelector('.preloader');
    preloadPercent = document.querySelector('.preloader-percent');

    speakUtils.preload([
        {id: 'base', url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/6043/gun_shoot_effect_base.jpg', type: 'image', crossOrigin: true},
        {id: 'overlay', url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/6043/gun_shoot_effect_overlay.jpg', type: 'image', crossOrigin: true},
        // {id: 'base', url: 'images/gun_base.jpg', type: 'image'},
        // {id: 'overlay', url: 'images/gun_overlay.jpg', type: 'image'},
        // {id: 'heartbeat', url: 'audio/heartbeat.mp3', type: 'audio'},
        // {id: 'shot', url: 'audio/shot.mp3', type: 'audio'}
    ], function(percent, items) {
        resources = resources || items.contents;
        TweenMax.to(config, config.skipPreloaderAnimation ? 0 : 1, {percent: percent, onUpdate: onPreloading, ease: 'easeInOutCubic'});
    });
}

function onPreloading() {
    var percent = config.percent;
    preloadPercent.innerHTML = ~~(percent * 100) + '%';
    if(percent == 1 && !isPreloaded) {
        isPreloaded = true;
        init();
        TweenMax.to(preloadPercent, config.skipPreloaderAnimation ? 0 : 1, {autoAlpha: 0, scale: 0, ease: 'easeInBack'});
        TweenMax.to(preloader, config.skipPreloaderAnimation ? 0 : 1, {delay: config.skipPreloaderAnimation ? 0 : 0.8, autoAlpha: 0});
        TweenMax.to(config, config.skipPreloaderAnimation ? 0 : 1.3, {delay: config.skipPreloaderAnimation ? 0 : 0.8, zoom: 0, ease: 'easeOutSine'});
    }
}

preload();