var userName = getParam("username") ? getParam("username") : getUserRamdom(),
  channel = getParam("map") ? getParam("map") : "forest",
  score = 0,
  wx = window.innerWidth,
  wy = window.innerHeight,
  wx2 = window.innerWidth / 2,
  wy2 = window.innerHeight / 2,
  stateScale = wx < 1000 ? 0.5 : 1,
  zoom = wx < 1000 ? 2 : 1,
  scaleDivisor = wx < 1000 ? 1 : 2,
  map,
  scale = 0,
  lives = 0,
  direction = "down",
  state = "stop",
  position = {
    x: 0,
    y: 0
  },
  vx = 0,
  vy = 0,
  key = 0;

window.scrollTo(0, 1);

function run(session) {
  $(document).ready(function () {

    $("#chatInput").keypress(
      e => {
        if (e.which === 13) {
          (async function () {
            const message = $(e.currentTarget).val();
            $(e.currentTarget).val("");
            session.send(userName + " chat " + message);
          }());
          return false;
        }
      });

    $(document).keydown(
      e => {
        if (e.which === 87) {
          vy = 100;
          key + 1;
        }
        if (e.which === 83) {
          vy = -100;
          key + 1;
        }
        if (e.which === 68) {
          vx = -150;
          key + 1;
        }
        if (e.which === 65) {
          vx = 150;
          key + 1;
        };
      });

    $(document).keyup(
      e => {
        if (e.which === 87) {
          vy = 0;
          key -= 1;
        }
        if (e.which === 83) {
          vy = 0;
          key -= 1;
        }
        if (e.which === 68) {
          vx = 0;
          key -= 1;
        }
        if (e.which === 65) {
          vx = 0;
          key -= 1;
        }
        key = key > 0 ? key : 0; 
      });

    // Cargamos variables
    var Container = PIXI.Container,
      autoDetectRenderer = PIXI.autoDetectRenderer,
      loader = PIXI.loader,
      resources = PIXI.loader.resources,
      Sprite = PIXI.Sprite,
      responsiveScale = 1,
      maxFrame = 7,
      af = 0,
      df = 5, // Imagenes por segundo            
      stop = true,
      msg = {},
      touch;

    scale = map.player.scale;

    // Creamos el render (Esto lo cambiare)
    var renderer = autoDetectRenderer(wx, wy);

    // Lo añadimos
    document.body.appendChild(renderer.view);

    // Creamos la stage y le añadimos los eventos del raton
    var stage = new Container();

    stage.scale.set(wx < 1000 ? 0.5 : 1);

    stage.interactive = true;
    stage.on('mousedown', clickdown)
      .on('mouseup', clickup)
      .on('mouseupoutside', clickup)
      .on('touchstart', clickdown)
      .on('touchend', clickup)
      .on('touchendoutside', clickup);

    // Eventos del raton    
    function clickdown(e) {
      af = 0;
      state = "attack";
      if (is_touch_device()) {
        touch = e.data.global;
      }
    }

    function clickup(e) {
      af = 0;
      state = "run";
    }

    // Caragmos, cetramos y añadimos el fondo.
    var landscapeTexture = PIXI.Texture.fromImage(map.background.url),
      texture = new PIXI.Texture(landscapeTexture),
      background = new PIXI.Sprite(texture);

    bx = (window.innerWidth / scaleDivisor) - (map.size.x / 2);
    by = (window.innerHeight / scaleDivisor) - (map.size.y / 2);
    background.position.x = bx;
    background.position.y = by;
    stage.addChild(background);

    // Caragmos, cetramos y añadimos el frente.
    if (map.front) {
      var landscapeTexture2 = PIXI.Texture.fromImage(map.front.url),
        texture2 = new PIXI.Texture(landscapeTexture2),
        front = new PIXI.Sprite(texture2);

      front.position.x = bx;
      front.position.y = by;
    }


    //Ptexture = new PIXI.Texture(PlandscapeTexture);

    // Caragmos y cetramos los objetos.
    map.objects.map(function (element) {
      element.landscapeTexture = PIXI.Texture.fromImage(element.url);
      element.texture = new PIXI.Texture(element.landscapeTexture);
      element.item = new PIXI.Sprite(element.texture);
      element.item.position.x = bx;
      element.item.position.y = by;
    });

    // Renderizamos la stage
    renderer.render(stage);
    renderer.view.style.position = "absolute";
    renderer.view.style.display = "block";
    renderer.autoResize = true;
    renderer.resize(window.innerWidth, window.innerHeight);
    loader.add("player", map.player.url).load(setup);

    // Creamos marcador. Primero el estilo del texto depues el objeto, lo pocicionamos y lo agregamos.
    var scoreStyle = new PIXI.TextStyle({
      fontFamily: 'komtit',
      fontSize: 36,
      fill: ['#FFF1E1', '#FFF1E1'], // gradient
      stroke: '#35130B',
      strokeThickness: 10,
      dropShadow: true,
      dropShadowColor: '#724833',
      dropShadowBlur: 4,
      dropShadowAngle: Math.PI / 2,
      dropShadowDistance: 3,
      wordWrap: false,
      wordWrapWidth: 440,
      padding: 20
    });

    var scoreText = new PIXI.Text('Score: ', scoreStyle);
    scoreText.x = 30;
    scoreText.y = 20;

    stage.addChild(scoreText);

    var heartTexture = PIXI.Texture.fromImage('/img/gui/heart.png');

    var heartTilingSprite = new PIXI.extras.TilingSprite(
      heartTexture,
      44 * lives,
      37
    );
    heartTilingSprite.x = 35;
    heartTilingSprite.y = 80;
    heartTilingSprite.scale.set(0.75);
    stage.addChild(heartTilingSprite);

    // Cargamos el juegador
    var player,
      playerTexture,
      playersName,
      playersNameStyle;

    function setup() {
      playersNameStyle = new PIXI.TextStyle({
        fontFamily: 'komtit',
        fontSize: 24,
        fill: ['#FFF1E1', '#FFF1E1'], // gradient
        stroke: '#35130B',
        strokeThickness: 5,
        dropShadow: true,
        dropShadowColor: '#724833',
        dropShadowBlur: 4,
        dropShadowAngle: Math.PI / 2,
        dropShadowDistance: 1,
        wordWrap: false,
        wordWrapWidth: 440,
        padding: 20
      });
      playersName = new PIXI.Text(userName, playersNameStyle);

      playerTexture = loader.resources["player"].texture;
      playerTexture.frame = map.player.sprite[state][direction][0];
      player = new Sprite(playerTexture);
      player.scale.set(scale);
      player.x = window.innerWidth / scaleDivisor;
      player.y = window.innerHeight / scaleDivisor;

      playersName.scale.set(scale / map.player.scale);
      playersName.x = player.x + (player.width / 2) - (playersName.width / 2);
      playersName.y = player.y - (player.height / 6);


      stage.addChild(player);
      stage.addChild(playersName);
      renderer.render(stage);
      // Comienza el loop
      gameLoop();
      refreshScore();
    }

    function gameLoop() {
      // Empieza el loop y carga las varibles
      var mouse;
      if (is_touch_device()) {
        mouse = touch ? touch : {
          x: 0,
          y: 0
        };
      } else {
        mouse = renderer.plugins.interaction.mouse.global;
      }

      // Cargamos la direcion del sprite y aplicamos los ajustes
      direction = getDirection(mouse, wx, wy);

      if (direction == "up" || direction == "down") {
        maxFrame = 8;
        df = 5;
      }
      if (direction == "left" || direction == "right") {
        maxFrame = 6;
        df = 8;
      }

      // Vemos que el personaje no tenga el raton encima (Parado)
      if (player) {
        if (mouse.y > wy2 - (player.height / 2) && mouse.y < wy2 + (player.height / 2) &&
          mouse.x > wx2 - (player.width / 2) && mouse.x < wx2 + (player.width / 2)) {
          if (state != "attack") {
            state = "stop";
          }
          stop = true;
        } else {
          if (state != "attack") {
            state = "run";
          }
          stop = false;
        }
      }

      if (key == 0) {
        if (stop == false) {
          var px = percent(mouse.x, wx) - 50,
            py = percent(mouse.y, wy) - 50;

          vx = (px < 0 ? (px < -25 ? -115 : px * 3) : (px > 25 ? 115 : px * 3)) * -1,
          vy = (py < 0 ? (py < -25 ? -115 : py * 3) : (py > 25 ? 115 : py * 3)) * -1;
        } else {          
          vx = 0,
          vy = 0;
        }
      }

      background.position.x = (bx) - position.x;
      background.position.y = (by) - position.y;

      
      if (map.front) {
        front.position.x = bx - position.x;
        front.position.y = by - position.y;
      }

      map.objects.map(function (element) {
        element.item.position.x = bx - position.x + element.x;
        element.item.position.y = by - position.y + element.y;
      });
      

      //Mandamos pocisicon al server;
      msg = userName + ` {"vx":${ vx ? vx : 0 },"vy":${ vy ? vy : 0} ,"state": "${state}", "direction":"${direction}", "width":"${player.width}", "height":"${player.height}" } `;
      session.send(msg);

      // Ajusta el fotograma
      if (af >= maxFrame) {
        af = 0;
      } else {
        af += 1 / df;
      }

      // Aplica el foto grama
      if (playerTexture) {
        playerTexture.frame = map.player.sprite[state][direction][Math.floor(af)] ? map.player.sprite[state][direction][Math.floor(af)] : map.player.sprite[state][direction][0];
      }

      // Borramos todos los obejetos de la pantalla
      stage.removeChild(player);
      stage.removeChild(playersName);
      
      map.objects.map(function (element) {
        stage.removeChild(element.item);
      });
      
      jQuery.each(map.players, function (i, element) {
        if (element.item) {
          stage.removeChild(element.item);
          stage.removeChild(element.name);
        }
      });
      
      if (map.front) {
        stage.removeChild(front);
      }

      stage.removeChild(heartTilingSprite);
      stage.removeChild(scoreText);

      // Calculamos la posicion del jugador      
      player.scale.set(scale);
      player.x = (wx / scaleDivisor) - ((player.width / scaleDivisor) / zoom);
      player.y = (wy / scaleDivisor) - ((player.height / scaleDivisor) / zoom);

      playersName.scale.set(scale / map.player.scale);
      playersName.x = player.x + (player.width / 2) - (playersName.width / 2);
      playersName.y = player.y - (player.height / 6);

      // Dibujamos los objetos
      map.objects.map(function (element, key) {
        if (position.y > element.yv && position.x > element.xv) {
          stage.addChild(element.item);
        }
      });
      
      var paintedPlayer = false;
      if (map.players) {
        Object.values(map.players).sort(comparePlayer).map(function (element) {
          if (element.position.y > position.y && !paintedPlayer) {
            stage.addChild(player);
            stage.addChild(playersName);
            paintedPlayer = true;
          }
          if (!element.deleted) {
            try {
              element.item.scale.set(element.scale);
              element.texture.frame = map.player.sprite[element.state][element.direction][Math.floor(af)] ? map.player.sprite[element.state][element.direction][Math.floor(af)] : map.player.sprite[element.state][element.direction][0];
              element.item.position.x = (wx / scaleDivisor) - position.x + (element.position.x - (element.item.width / 2));
              element.item.position.y = (wy / scaleDivisor) - position.y + (element.position.y - (element.item.height / 2));
              element.name.scale.set(element.scale / map.player.scale);
              element.name.x = element.item.position.x + (element.item.width / 2) - (element.name.width / 2);
              element.name.y = element.item.position.y - (element.item.height / 6);
              stage.addChild(element.item);
              stage.addChild(element.name);
            }
            catch(error) {
              console.error(error);              
            }
            
          } else {
            delete element.item;
            delete element.name;
          }
        });
      }

      if (!paintedPlayer) {
        stage.addChild(player);
        stage.addChild(playersName);
      }

      if (map.front) {
        stage.addChild(front);
      }

      //Actualizamos el marcador.
      scoreText.text = 'Score: ' + score + '\n';
      heartTilingSprite.width = 44 * lives;
      stage.addChild(heartTilingSprite);
      stage.addChild(scoreText);

      // Lo renderizamos y mandamos la proxima llamada del bucle.
      stage.scale.set(stateScale);
      renderer.render(stage);
      requestAnimationFrame(gameLoop);
    }

    window.onresize = function (event) {
      setTimeout(function () {
        wx = window.innerWidth;
        wy = window.innerHeight;
        wx2 = window.innerWidth / 2;
        wy2 = window.innerHeight / 2;
        bx = (window.innerWidth / scaleDivisor) - (map.size.x / 2);
        by = (window.innerHeight / scaleDivisor) - (map.size.y / 2);

        stateScale = wx < 1000 ? 0.5 : 1;
        zoom = wx < 1000 ? 2 : 1;
        scaleDivisor = wx < 1000 ? 1 : 2;

        renderer.resize(wx, wy);
        window.onresize();
      });
    }

    $("#chatInput").css({
      "font-family": 'oswald'
    });

  });
}