$( document ).ready(function() {
    ////// Here, we initialize the pixi application
    const pixiRoot = new PIXI.Application({
      
        autoResize: true,
  resolution: devicePixelRatio ,
        backgroundColor: 0xf2ab6c,
       // resizeTo : 1990,
    });

    // add the renderer view element to the DOM
    document.body.appendChild(pixiRoot.view);
    
    ////// Here, we create our traviso instance and add on top of pixi
    $('#modal_close').click(function(){
        $('#exampleModal').modal('hide');
      //  $('#modal_avatar').modal('hide');
    });
    $('#modal_close_').click(function(){
       // $('#exampleModal').modal('hide');
        $('#modal_avatar').modal('hide');
    });
   // $('#modal_avatar').modal('show');
    //$(".loyaliti").hide();
    $('#modal_avatar').modal('show', {backdrop: 'static', keyboard: false});
		
       // $('#modal_avatar').modal('show');

      
    // engine-instance configuration object
    $("#boyu").click(function(){
      
        $('#modal_avatar').modal('hide');
var z = $('#boyu').attr('datas');
ruiiii(z);
//alert(z);



    });
    $("#girl").click(function(){
      
      $('#modal_avatar').modal('hide');
var z = "girl";
ruiiii(z);
//alert(z);



  });
    
        /*
        if(pilihan=='PLAY')
        {
            var char_utama = "./assets/newcar.json";
        }

       **/
      function ruiiii(datase)
      {
      // var char_utama = "./assets/newcar.json";
       if(datase=='boy')
       {

        var char_utama = "/sites/default/files/asset/fullhtml/js/newcar.json";
       }else{
        var char_utama = "/sites/default/files/asset/fullhtml/js/girl_json.json";
       }
    var instanceConfig =
    {
        mapDataPath : "/sites/default/files/asset/fullhtml/js/mapData.json", // the path to the json file that defines map data, required
       // assetsToLoad : ["./assets/assets_map.json", "./assets/assets_characters.json", "./assets/groundImage.jpg"], // array of paths to the assets that are desired to be loaded by traviso, no need to use if assets are already loaded to PIXI cache, default null
        assetsToLoad : ["/sites/default/files/asset/fullhtml/js/new_obj.json", char_utama,"/sites/default/files/asset/fullhtml/img/gallery/telkomsel/btn_zoomIn.png", "/sites/default/files/asset/fullhtml/img/gallery/telkomsel/btn_zoomOut.png", "/sites/default/files/asset/fullhtml/img/gallery/telkomsel/btn_centralizeToObject.png", "/sites/default/files/asset/fullhtml/img/gallery/telkomsel/btn_focusToObject.png","/sites/default/files/asset/fullhtml/img/gallery/telkomsel/groundImage.png"],
        
        initialZoomLevel : -1,
        pathFindingClosest : true,
        followCharacter : true,
        highlightPath : false,
        
        checkPathOnEachTile : false,
        
        engineInstanceReadyCallback : onEngineInstanceReady, // callback function that will be called once everything is loaded and engine instance is ready, default null
        tileSelectCallback : onTileSelect, // callback function that will be called when a tile is selected (call params will be the row and column indexes of the tile selected), default null
        objectSelectCallback : onObjectSelect, // callback function that will be called when a tile with an interactive map-object on it is selected (call param will be the object selected), default null
        objectReachedDestinationCallback : onObjectReachedDestination, // callback function that will be called when any moving object reaches its destination (call param will be the moving object itself), default null
        otherObjectsOnTheNextTileCallback : onOtherObjectsOnTheNextTile // callback function that will be called when any moving object is in move and there are other objects on the next tile (call params will be the moving object and an array of objects on the next tile), default null
    };

    var engine = TRAVISO.getEngineInstance(instanceConfig, { logEnabled: true });
    function onEngineInstanceReady()
    {
        pixiRoot.stage.addChild(engine);
        var btnZoomIn = new PIXI.Sprite(PIXI.Texture.from("/sites/default/files/asset/fullhtml/img/gallery/telkomsel/btn_zoomIn.png"));
        pixiRoot.stage.addChild(btnZoomIn);
        
        var btnZoomOut = new PIXI.Sprite(PIXI.Texture.from("/sites/default/files/asset/fullhtml/img/gallery/telkomsel/btn_zoomOut.png"));
        pixiRoot.stage.addChild(btnZoomOut);
        
      /*  var btnCentralize = new PIXI.Sprite(PIXI.Texture.from("./assets/btn_centralize.png"));
        pixiRoot.stage.addChild(btnCentralize);
        
        var btnCentralizeToObject = new PIXI.Sprite(PIXI.Texture.from("./assets/btn_centralizeToObject.png"));
        pixiRoot.stage.addChild(btnCentralizeToObject);
        
        var btnFocusMapToObject = new PIXI.Sprite(PIXI.Texture.from("./assets/btn_focusToObject.png"));
        pixiRoot.stage.addChild(btnFocusMapToObject);*/
        
        // set positions
        btnZoomIn.position.x = 8;
        btnZoomOut.position.x = btnZoomIn.position.x + btnZoomIn.width + 8;
        //btnCentralize.position.x = btnZoomOut.position.x + btnZoomOut.width + 8;
        //btnCentralizeToObject.position.x = btnCentralize.position.x + btnCentralize.width + 8;
      //  btnFocusMapToObject.position.x = btnCentralizeToObject.position.x + btnCentralizeToObject.width + 8;
        
        btnZoomIn.interactive = btnZoomIn.buttonMode = true;
        btnZoomOut.interactive = btnZoomOut.buttonMode = true;
       // btnCentralize.interactive = btnCentralize.buttonMode = true;
        //btnCentralizeToObject.interactive = btnCentralizeToObject.buttonMode = true;
       // btnFocusMapToObject.interactive = btnFocusMapToObject.buttonMode = true;
        
        // add click callbacks
        btnZoomIn.click = btnZoomIn.tap = function(data)
        {
            engine.zoomIn();
        };
        
        btnZoomOut.click = btnZoomOut.tap = function(data)
        {
            engine.zoomOut();
        };
        
      /*  btnCentralize.click = btnCentralize.tap = function(data)
        {
            engine.centralizeToCurrentExternalCenter();
        };
        
        btnCentralizeToObject.click = btnCentralizeToObject.tap = function(data)
        {
            engine.centralizeToObject(engine.getCurrentControllable());
        };
        
        btnFocusMapToObject.click = btnFocusMapToObject.tap = function(data)
        {
            engine.focusMapToObject(engine.getCurrentControllable());
        };*/
    }
    
    // this method will be called every time a tile is selected in the engine
    function onTileSelect(rowIndex, columnIndex)
    {
          //  alert(rowIndex +'dara' + columnIndex);
          $("#location").val(rowIndex+ " "+columnIndex);
    }
    
    // this method will be called when a tile with an interactive map-object on it is selected
    function onObjectSelect(obj)
    {
        engine.moveCurrentControllableToLocation(obj.mapPos);
      
    }
    
    // this method will be called when any moving object reaches its destination
    function onObjectReachedDestination(obj)
    {
        var objectsOnDestination = engine.getObjectsAtLocation(obj.mapPos);
        for (var i=0; i < objectsOnDestination.length; i++)
        {
            // check if there is a flag on the destination tile
            if(objectsOnDestination[i].type === '1')
            {

               // obj.changeVisual("flip", false, true, flipAnimFinished);
               $('#exampleModal').modal('show');
               $('#continna').empty();
               $('#continna').load("/PoinFestival2021/donasi");
                break;
            }
            if(objectsOnDestination[i].type === '10')
            {
               // obj.changeVisual("flip", false, true, flipAnimFinished);
               $('#exampleModal').modal('show');
               $('#continna').empty();
               $('#continna').load("/PoinFestival2021/luckydraw");
                break;
            }
            if(objectsOnDestination[i].type === '11')
            {
               // obj.changeVisual("flip", false, true, flipAnimFinished);
               $('#exampleModal').modal('show');
               $('#continna').empty();
               $('#continna').load("/PoinFestival2021/belanja");
                break;
            }
            if(objectsOnDestination[i].type === '12')
            {
               // obj.changeVisual("flip", false, true, flipAnimFinished);
               $('#exampleModal').modal('show');
               $('#continna').empty();
               $('#continna').load("/PoinFestival2021/talkshow");
                break;
            }
            if(objectsOnDestination[i].type === '13')
            {
               // obj.changeVisual("flip", false, true, flipAnimFinished);
               $('#exampleModal').modal('show');
               $('#continna').empty();
               $('#continna').load("/PoinFestival2021/concert");
                break;
            }
            if(objectsOnDestination[i].type === '14')
            {
               // obj.changeVisual("flip", false, true, flipAnimFinished);
               $('#exampleModal').modal('show');
               $('#continna').empty();
               $('#continna').load("/PoinFestival2021/quiz");
                break;
            }
            if(objectsOnDestination[i].type === '15')
            {
               // obj.changeVisual("flip", false, true, flipAnimFinished);
               window.location.replace('/telkomselpointfest/');

                break;
            }
            if(objectsOnDestination[i].type === '16')
            {
                $('#exampleModal').modal('show');
               $('#continna').empty();
               $('#continna').load("/PoinFestival2021/kejutanpoin");
                break;
            }
        }
    }
    
    // this method will be called when the custom flip anim finished
    function flipAnimFinished (obj)
    {
        // change the visual of the object so that it will face its last direction
        obj.changeVisualToDirection(obj.currentDirection, false);
    }
    
    // this method will be called when any moving object is in move and there are other objects on the next tile
    function onOtherObjectsOnTheNextTile(movingObject, objectsOnNewTile)
    {
        var boxAnim;
        for (var i=0; i < objectsOnNewTile.length; i++)
        {
            // check if there are boxes on the next tile
          
        }
    }
    
   // });
   
   
    // this method will be called when the engine is ready
   
    // creates 6 boxes and spreads them up through a simple tween animation
    function createAndStartBoxAnim()
    {
        // create six separate boxes to spread
        var boxAnim = new PIXI.Container();
        var t = PIXI.Texture.from("box.png");
        var box;
        var boxes = [];
        for (var i=0; i < 6; i++)
        {
            box = new PIXI.AnimatedSprite([t]);
            box.anchor.x = box.anchor.y = 0.5;
            boxAnim.addChild(box);
            boxes[boxes.length] = box;
        }
        
        // play a simple spread anim for the boxes
        var boxTargets = [[-75, -125], [-50, -100], [-25, -75], [25, -75], [50, -100], [75, -125]];
        for (var i=0; i < boxes.length; i++)
        {
            TweenLite.to( boxes[i].position, 0.5, { x: boxTargets[i][0], y: boxTargets[i][1], ease:"Back.easeOut" } );
            TweenLite.to( boxes[i], 0.7, { alpha: 0 } );
        }
        
        return boxAnim;
    }
}
    window.addEventListener('resize', resize);

// Resize function window
function resize() {
	// Resize the renderer
//	pixiRoot.renderer.resize(window.innerWidth, window.innerHeight);
const parent = pixiRoot.view.parentNode;
   
   // Resize the renderer
   pixiRoot.renderer.resize(parent.clientWidth, parent.clientHeight);
  // You can use the 'screen' property as the renderer visible
  // area, this is more useful than view.width/height because
  // it handles resolution
  //rect.position.set(app.screen.width, app.screen.height);
}

resize();
});