var EHDI = EHDI || Object.create(null);

EHDI.popup = EHDI.popup || Object.create(null);

EHDI.popup.HTPPopUp = function() {
    EHDI.aka.Container.call(this);
    this.pageNumber = 1;
};

EHDI.popup.HTPPopUp.prototype = Object.create(EHDI.aka.Container.prototype);

EHDI.popup.HTPPopUp.prototype.popUpWillAppear = function() {

    this.overlay = EHDI.displays.FillRectangle(0x000000, 0, 0, EHDI.GAME.sceneManager.getStageWidth(), EHDI.GAME.sceneManager.getStageHeight(),0);

    this.overlay.anchor.set(0.5, 0.5);

    this.addChild(this.overlay);

    this.position.x = EHDI.GAME.sceneManager.getStageWidth() * 0.5;
    this.bg = new EHDI.aka.Sprite(EHDI.Assets.images["gfx_pop"]);
    this.bg.anchor.set(0.5, 0.5);

    this.addChild(this.bg);


    this.action = (EHDI.BrowserInfo.isMobileDevice) ? EHDI.GAME.JSONMgr.getLocale("LBL_ACTION_MOBILE").TEXT : EHDI.GAME.JSONMgr.getLocale("LBL_ACTION_DESKTOP").TEXT;

};

EHDI.popup.HTPPopUp.prototype.popUpDidAppear = function() {

    this.overlay.alpha = 0.5;
    this.overlay.interactive = true;
    // this.pausedTxt = new EHDI.aka.PixiText("HOW TO PLAY", {fontFamily: "Exo-Bold", fill: 0xFFFFFF, fontSize : 50});
    this.pausedTxt = new EHDI.displays.TextSprite(EHDI.GAME.JSONMgr.getLocale("LBL_HTP_HEADER"));
    this.pausedTxt.anchor.set(0.5, 0.5);
    this.pausedTxt.position.set(-this.bg.width * 0.2, -this.bg.width * 0.24);

    this.bg.addChild(this.pausedTxt);

    this.next = new EHDI.displays.Button(EHDI.Assets.images["btn_prevnext"], EHDI.Assets.images["btn_prevnext2"], null, null);

    this.bg.addChild(this.next);

    this.next.position.set(this.bg.width * 0.45, 0);
    this.next.setOnClickFunction(this.nextPage.bind(this));

    this.page = new EHDI.aka.Container();
    this.bg.addChild(this.page);

    var htpImg = new EHDI.aka.Sprite(EHDI.Assets.images["htp_pattern1"]);
    htpImg.anchor.set(0.5, 0.5);
    htpImg.position.set(0, -this.bg.height * 0.15);
    this.page.addChild(htpImg);

    // var htpTxt = new EHDI.aka.PixiText(this.action + " the animal icons to select them. " + this.action + " again to deselect the icon.", {fontFamily: "proximanova-black", fill: 0xFFFFFF, fontSize : 28, align: 'center', wordWrap : true, wordWrapWidth : htpImg.width * 0.9});
    var htpTxt = new EHDI.displays.TextSprite(EHDI.GAME.JSONMgr.getLocale("HTP_FORMAT"));
    var htpStr = EHDI.GAME.JSONMgr.getLocale("LBL_HTP1").TEXT;
    htpTxt.text = htpStr.replace("%val%", this.action);
    htpTxt.anchor.set(0.5, 0);
    htpTxt.position.set(0, this.bg.height * 0.05);

    this.page.addChild(htpTxt);


    this.previous = new EHDI.displays.Button(EHDI.Assets.images["btn_prevnext"], EHDI.Assets.images["btn_prevnext2"], null, null);

    this.bg.addChild(this.previous);
    this.previous.setOnClickFunction(this.previousPage.bind(this));



    this.previous.position.set(-this.bg.width * 0.45, 0);
    this.previous.scale.x = -1;

    this.return = new EHDI.displays.Button(EHDI.Assets.images["btn_return"], EHDI.Assets.images["btn_return2"], null, null);

    this.bg.addChild(this.return);

    this.return.position.set(0, this.bg.height * 0.35);

    this.return.setOnClickFunction(this.resumeGame);
};

EHDI.popup.HTPPopUp.prototype.popUpWillDisappear = function() {
    this.overlay.alpha = 0;
}

EHDI.popup.HTPPopUp.prototype.popUpDidDisappear = function() {
    EHDI.GAME.pauseButton.resumeGame();
}

EHDI.popup.HTPPopUp.prototype.toggleAudio = function(enable) {
    EHDI.GAME.soundManager.setMute(enable);
    var cache = EHDI.GAME.storageManager.getLocalInfo(EHDI.GAME.id);
    cache.isMuted = enable;
    EHDI.GAME.storageManager.setLocalInfo(EHDI.GAME.id, enable);
}

EHDI.popup.HTPPopUp.prototype.resumeGame = function() {
    EHDI.GAME.soundManager.playSFX("button_sfx");
    EHDI.GAME.sceneManager.popPopUp({y : new EHDI.scene.TransitionParameter(EHDI.GAME.sceneManager.getStageHeight() * 0.5, -EHDI.GAME.sceneManager.getStageHeight()), duration : 0.25});
}

EHDI.popup.HTPPopUp.prototype.exitGame = function() {
    EHDI.GAME.soundManager.playSFX("button_sfx");
    EHDI.GAME.sceneManager.pushPopUp(new EHDI.popup.ConfirmationPopup(this.goToTitleScreen.bind(this), null), {y : new EHDI.scene.TransitionParameter(EHDI.GAME.sceneManager.getStageHeight(), 0), duration : 0.25});
};

EHDI.popup.HTPPopUp.prototype.goToTitleScreen = function() {
    EHDI.GAME.pauseButton.isEndGame = true;
    EHDI.GAME.sceneManager.popPopUp();
    EHDI.GAME.sceneManager.changeScene(new EHDI.scene.TitleScene(), {alpha : new EHDI.scene.TransitionParameter(0,1), duration : 0.25});
};

EHDI.popup.HTPPopUp.prototype.nextPage = function() {
    if(this.transitionTimeline)
        this.transitionTimeline.kill();
    if(this.upcomingPage)
        this.endTransition();

    EHDI.GAME.soundManager.playSFX("button_sfx");
    this.upcomingPage = new EHDI.aka.Container();
    this.upcomingPage.alpha = 0;
    this.pageNumber++;
    if(this.pageNumber > 2)
        this.pageNumber = 1;

    var htpImg = new EHDI.aka.Sprite(EHDI.Assets.images["htp_pattern" + this.pageNumber]);
    htpImg.anchor.set(0.5, 0.5);
    htpImg.position.set(0, -this.bg.height * 0.15);
    this.upcomingPage.addChild(htpImg);

    // var myText = this.action + " the animal icons to select them. " + this.action + " again to deselect the icon.";
    var myText = EHDI.GAME.JSONMgr.getLocale("LBL_HTP1").TEXT;

    if(this.pageNumber === 2)
        // myText = "Match as many pairs as you can before time runs out!";
        myText = EHDI.GAME.JSONMgr.getLocale("LBL_HTP2").TEXT;

    myText = myText.replace("%val%", this.action);
    // var htpTxt = new EHDI.aka.PixiText(myText, {fontFamily: "proximanova-black", fill: 0xFFFFFF, fontSize : 28, align: 'center', wordWrap : true, wordWrapWidth : htpImg.width * 0.9});
    var htpTxt = new EHDI.displays.TextSprite(EHDI.GAME.JSONMgr.getLocale("HTP_FORMAT"));
    htpTxt.text = myText;
    htpTxt.anchor.set(0.5, 0);
    htpTxt.position.set(0, this.bg.height * 0.05);

    this.upcomingPage.addChild(htpTxt);

    this.transitionTimeline = new TimelineMax();
    this.transitionTimeline.to(this.upcomingPage, 0.5, {alpha : 1});
    this.transitionTimeline.to(this.page, 0.5, {alpha : 0}, 0);
    this.transitionTimeline.add(this.endTransition.bind(this));

    this.bg.addChild(this.upcomingPage);


};

EHDI.popup.HTPPopUp.prototype.previousPage = function() {
    if(this.transitionTimeline)
        this.transitionTimeline.kill();
    if(this.upcomingPage)
        this.endTransition();

    EHDI.GAME.soundManager.playSFX("button_sfx");
    this.upcomingPage = new EHDI.aka.Container();
    this.upcomingPage.alpha = 0;
    this.pageNumber--;
    if(this.pageNumber < 1)
        this.pageNumber = 2;

    var htpImg = new EHDI.aka.Sprite(EHDI.Assets.images["htp_pattern" + this.pageNumber]);
    htpImg.anchor.set(0.5, 0.5);
    htpImg.position.set(0, -this.bg.height * 0.15);
    this.upcomingPage.addChild(htpImg);

    // var myText = this.action + " the animal icons to select them. " + this.action + " again to deselect the icon.";
    var myText = EHDI.GAME.JSONMgr.getLocale("LBL_HTP1").TEXT;

    if(this.pageNumber === 2)
        // myText = "Match as many pairs as you can before time runs out!";
        myText = EHDI.GAME.JSONMgr.getLocale("LBL_HTP2").TEXT;

    myText = myText.replace("%val%", this.action);
    var htpTxt = new EHDI.displays.TextSprite(EHDI.GAME.JSONMgr.getLocale("HTP_FORMAT"));
    htpTxt.text = myText;
    htpTxt.anchor.set(0.5, 0);
    htpTxt.position.set(0, this.bg.height * 0.05);

    this.upcomingPage.addChild(htpTxt);

    this.transitionTimeline = new TimelineMax();
    this.transitionTimeline.to(this.upcomingPage, 0.5, {alpha : 1});
    this.transitionTimeline.to(this.page, 0.5, {alpha : 0}, 0);
    this.transitionTimeline.add(this.endTransition.bind(this));



    this.bg.addChild(this.upcomingPage);
};

EHDI.popup.HTPPopUp.prototype.endTransition = function() {
    this.page.destroy({children: true});
    this.page = this.upcomingPage;
    this.upcomingPage = null;
    this.page.alpa = 1;
};