
Crafty.scene('TTSplash', function() {
     setScreenScale();
	// Crafty.background('rgb(0,0,0)');
	console.log("TTSplash SCREEN");
    var lBeginX=Crafty.viewport.width/2-320/2
    var lBeginY = Crafty.viewport.height/2-480/2

    // _worldEntity = Crafty.e('2D, DOM, Image')
    // .attr({z:1, w: 320, h: 480 })
    // .image("images/game_Logo")
    // .css("background-position", lBeginX, lBeginY);

    // _worldEntity._element.style.backgroundPosition=
    // this._element.style.backgroundPosition = this.someIncrementedValue + "px 0px";

    var bg = Crafty.e("2D, Canvas, Image").attr({w: 500, h:500}).image("images/tt_Logo.png");
    bg.x = Crafty.viewport.width/2-100; bg.y = Crafty.viewport.height/2-35;
    console.log("crafty width ",Crafty.viewport.width, Crafty.viewport.height, Crafty.viewport.x);
    // Crafty.viewport.zoom(5,Crafty,viewport.width/2,Crafty.viewport.height/2,5);

    var game_Logo = Crafty.e("2D, Canvas, Image, Mouse").image("images/game_Logo.png");
    game_Logo.x = Crafty.viewport.width/2-320/2; game_Logo.y = Crafty.viewport.height/2-480/2;
    game_Logo.visible=false;
    
    
    setTimeout(function(){
    	       
                 //when loaded
                var lTime=  setTimeout(function(){
        
                    Crafty.scene('GameMenu');
                },3000);
                 Crafty.background('rgb(0,0,0)')
                game_Logo.visible=true;
                game_Logo.bind("MouseDown", function(e) {
                    clearTimeout(lTime)
                    Crafty.scene('GameMenu')
                })
                
                // bg.destroy();
                
             
           
    	
     },3000);
});

Crafty.scene('GameSplash', function() {
    setScreenScale();
	// Crafty.background('rgb(0,0,0)');
	console.log("GAME SPLASH SCREEN");

    // Crafty.load(["images/game_Logo.png"], function() { 
        var game_Logo = Crafty.e("2D, Canvas, Image").image("images/game_Logo.png");
        game_Logo.x = Crafty.viewport.width/2-320/2; game_Logo.y = Crafty.viewport.height/2-480/2;
        
    setTimeout(function(){
        
        Crafty.scene('GameMenu');
    },3000);
    // })
    
});

Crafty.scene('GameMenu', function() {
 setScreenScale();
    Crafty.background('rgb(0,0,0)')
//         Crafty.background('rgb(0,255,255)')
    // Crafty.e("2D, Canvas, Text").attr({ w: 100, h: 20, x: Crafty.viewport.width/2-50, y: Crafty.viewport.height/2-10 })
        // .text("Loading...")
        // .css({ "text-align": "center" });

    // Crafty.load(["images/game_Logo.png", "images/menu_playBtn.png", "images/sound_on.png", "images/sound_off.png", "images/menu_help.png", "images/menu_aboutUs.png"],
        // function() {
             //when loaded
            var bg = Crafty.e("2D, Canvas, Image, Mouse").image("images/game_Logo.png");
            bg.x = Crafty.viewport.width/2-320/2; bg.y = Crafty.viewport.height/2-480/2;
    // console.log("crafty width ",Crafty.viewport.width, Crafty.viewport.height, Crafty.viewport.x);

            var hoverEffect = Crafty.e("2D, Canvas, Image, Mouse").image("images/onclick_mainmenu.png");
            hoverEffect.x = bg._x+20; hoverEffect.y = bg._y+200;    hoverEffect.alpha=0.01

            var playBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/menu_playBtn.png");
            playBtn.x = bg._x+100; playBtn.y = bg._y+200;
            
            var onBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/sound_on.png");
            onBtn.x = bg._x+100; onBtn.y = playBtn._y+50;
            onBtn.originX = onBtn._x;

            var offBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/sound_off.png");
            offBtn.x = bg._x+100; offBtn.y = playBtn._y+50;
            offBtn.originX = offBtn._x;

            var helpBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/menu_help.png");
            helpBtn.x = bg._x+100; helpBtn.y = playBtn._y+100;

            var aboutUsBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/menu_aboutUs.png");
            aboutUsBtn.x = bg._x+100; aboutUsBtn.y = playBtn._y+150;



            // offBtn.visible = false;
            // onBtn.visible = false;

            if(getAudioIsMuted()) {
                offBtn.visible = true;
                onBtn.visible = false;
                onBtn.x = -1000;
            } else {
                offBtn.visible = false;
                onBtn.visible = true;
                offBtn.x = -1000;
            }
            
            offBtn.bind("MouseDown", function(e) {
                console.log("menu off btn clicked");
                hoverEffect.alpha=0.01;
                setAudioIsMuted(false)
                onBtn.visible = true;
                offBtn.visible = false;
                offBtn.x = -1000;
                onBtn.x = onBtn.originX
                playBgMusic("BgmMenu");
            });

            onBtn.bind("MouseDown", function(e) {
                console.log("menu on btn clicked");
                hoverEffect.alpha=0.01;
                setAudioIsMuted(true)
                offBtn.visible = true;
                onBtn.visible = false;
                offBtn.x = offBtn.originX
                onBtn.x = -1000;
                Crafty.audio.stop();
                setBgMusicPlaying();
            });

            // bg.bind("MouseMove", function(e) {
            //     hoverEffect.alpha=0.01;
            // })
            
            playBtn.bind("MouseDown", function(e) { 
                console.log("play button clicked")
                // console.log("is play button unbinded ", this.unbind('Click', this.playBtn));
                // console.log("play button width and height ", play) ;
                // unloadSceneFunction();
                // hoverEffect.alpha=1.0;
                // deleteImages([bg, hoverEffect, playBtn, onBtn, offBtn, helpBtn, aboutUsBtn])
                Crafty.scene('GameMode');
            });

            // playBtn.bind("MouseDown", function(e) {
            //     hoverEffect.x= this._x; hoverEffect.y=this._y;
            //     hoverEffect.alpha=1.0
            // })

            // HelpScreen()
            helpBtn.bind("MouseDown", function(e) { 
                console.log("helpBtn button clicked")
                // hoverEffect.alpha=1.0;
                createHelpScreen([playBtn, bg, helpBtn, aboutUsBtn]);
                // createPauseScreen([playBtn, soundBtn, bg, helpBtn, recordsBtn, aboutUsBtn]);
                // Crafty.scene('GameMode');
            });

            // helpBtn.bind("MouseDown", function(e) {
            //     hoverEffect.x= this._x; hoverEffect.y=this._y;
            //     hoverEffect.alpha=1.0
            // })

            aboutUsBtn.bind("MouseDown", function(e) { 
                console.log("helpBtn button clicked")
                // deleteImages([bg, hoverEffect, playBtn, onBtn, offBtn, helpBtn, aboutUsBtn])
                    Crafty.scene('AboutUs');
                
                
            });

            
	console.log("GAME MENU SCREEN");
	// Crafty.background('rgb(0,0,0)');
    
    //play the menu audio
    playBgMusic("BgmMenu")
    
});

Crafty.scene('GameMode', function() {
    setScreenScale();
    console.log("GAME MODE SCREEN");
    Crafty.background('rgb(0,0,0)')
    // Crafty.background('rgb(0,0,0)');
    // Crafty.e("2D, Canvas, Text").attr({ w: 100, h: 20, x: Crafty.viewport.width/2-50, y: Crafty.viewport.height/2-10 })
        // .text("Loading...")
        // .css({ "text-align": "center" });

    // Crafty.load([ "images/bg.png"],
        // function() {
             //when loaded
            var bg = Crafty.e("2D, Canvas, BG1, Mouse");
            bg.x = Crafty.viewport.width/2-320/2; bg.y = Crafty.viewport.height/2-400/2;

            var hoverEffect = Crafty.e("2D, Canvas, Image, Mouse").image("images/onclick_mode.png");
            hoverEffect.x = bg._x+20; hoverEffect.y = bg._y+200;    hoverEffect.alpha=0.01
            // console.log("crafty width ",Crafty.viewport.width, Crafty.viewport.height, Crafty.viewport.x);

            var gameMode = Crafty.e("2D, Canvas, Image").image("images/mode_gameMode.png");
            gameMode.x = bg._x; gameMode.y = bg._y+40;

            var arcadeBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/mode_arcade.png");
            arcadeBtn.x = bg._x+90; arcadeBtn.y = bg._y+200;

            var challengeBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/mode_challenge.png");
            challengeBtn.x = bg._x+90; challengeBtn.y = bg._y+250;

            bg.bind("MouseMove", function(e) {
                hoverEffect.alpha=0.01;
            })
            


            arcadeBtn.bind("MouseDown", function(e) { 
                console.log("Arcade button clicked")
                this.unbind('Click', this.arcadeBtn);
                hoverEffect.alpha=0.01;
                setGameMode("Arcade");
                // deleteImages([bg, hoverEffect, gameMode, arcadeBtn, challengeBtn])
                Crafty.scene('GameLevels');
            });

            challengeBtn.bind("MouseDown", function(e) { 
                console.log("Challenge button clicked")
                // this.unbind('Click', this.arcadeBtn);
                hoverEffect.alpha=0.01;
                setGameMode("Challenge");
                // deleteImages([bg, hoverEffect, gameMode, arcadeBtn, challengeBtn])
                Crafty.scene('GameLevels');
            });

            // arcadeBtn.bind("MouseDown", function(e) {
            //     hoverEffect.x= this._x; hoverEffect.y=this._y;
            //     hoverEffect.alpha=1.0
            // })

            // challengeBtn.bind("MouseDown", function(e) {
            //     hoverEffect.x= this._x; hoverEffect.y=this._y;
            //     hoverEffect.alpha=1.0
            // })   
            
         // }
    // 
     // );

    var backBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/back_btn.png");
    backBtn.x = bg._x+221; backBtn.y = bg._y+431;

    backBtn.bind("MouseDown", function(e)  {
        Crafty.scene('GameMenu')
    })

    
    
});


Crafty.scene('GameLevels', function() {
    setScreenScale();
    console.log("GAME LEVELS SCREEN");
    Crafty.background('rgb(0,0,0)');

    // Crafty.e("2D, Canvas, Text").attr({ w: 100, h: 20, x: Crafty.viewport.width/2-50, y: Crafty.viewport.height/2-10 })
        // .text("Loading...")
        // .css({ "text-align": "center" });

    // Crafty.load(["images/bg.png", "images/lock.png"],
        // function() {
             //when loaded
             
            var bg = Crafty.e("2D, Canvas, BG1, Mouse");
            bg.x = Crafty.viewport.width/2-320/2; bg.y = Crafty.viewport.height/2-480/2;

            var hoverEffect = Crafty.e("2D, Canvas, Image, Mouse").image("images/onclick_levels.png");
            hoverEffect.x = bg._x+20; hoverEffect.y = bg._y+200;    hoverEffect.alpha=0.01
            // console.log("crafty width ",Crafty.viewport.width, Crafty.viewport.height, Crafty.viewport.x);

            bg.bind("MouseMove", function(e) {
                hoverEffect.alpha=0.01;
            })
            

            var levelTag = Crafty.e("2D, Canvas, Image").image("images/level_Tag.png");
            levelTag.x = bg._x; levelTag.y = bg._y+50;
            var bBeginX = bg._x + 10; var bBeginY = bg._y+200;
            var bLevels =  new Array();
            var bKey = getGameMode();
            var bKey1
            // alert("bkey is "+ bKey)
            for(var i=1; i<=10; i++) {
                // console.log("game mode ", getGameMode(), getStorageItem(getGameMode()+i))
                bKey1 = bKey+i
        //        console.log("bkey is ", bKey1, getStorageItem(bKey1))
                if(getStorageItem(bKey1)>0) {
                    bLevels[i-1] = Crafty.e("2D, Canvas, Image, Mouse").image("images/"+i+".png");
                    bLevels[i-1].islocked = false
                } else {
                    bLevels[i-1] = Crafty.e("2D, Canvas, Lock");
                    bLevels[i-1].islocked = true
                }
                
                bLevels[i-1].levelId = i;
                bLevels[i-1].x= bBeginX; bLevels[i-1].y= bBeginY;
                bBeginX+=80;
                if(i%4==0 && i!=1 ) { bBeginY += 70; bBeginX = bg._x+10; console.log("i value ", i)}

                bLevels[i-1].bind("MouseDown", function(e) { 
                    hoverEffect.alpha=0.01;
                if(this.islocked) return ;
                setGameLevelId(parseInt(this.levelId))
                console.log("levels button clicked", this.levelId, lLevelId);
                // deleteImages([bg, levelTag, hoverEffect])
                // deleteImages(bLevels)
                if(getGameMode()=="Arcade")
                {
                    Crafty.scene('gamePuzzles');
                }
                else {
                    resetPuzzleId();
                    generateRandomPuzzleUniqueId()

                    Crafty.scene('GamePlay')
                }
                });

                // bLevels[i-1].bind("MouseDown", function(e) {
                //      hoverEffect.x= this._x; hoverEffect.y=this._y;
                //         hoverEffect.alpha=1.0
                // })
            }
         // }
     // );
    
    var backBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/back_btn.png");
    backBtn.x = bg._x+221; backBtn.y = bg._y+415;

    backBtn.bind("MouseDown", function(e)  {
        Crafty.scene('GameMode')
    })
   
    
});

Crafty.scene('gamePuzzles', function() {
    setScreenScale();
    console.log("GAME Puzzles SCREEN");
    Crafty.background('rgb(0,0,0)');

    // Crafty.e("2D, Canvas, Text").attr({ w: 100, h: 20, x: Crafty.viewport.width/2-50, y: Crafty.viewport.height/2-10 })
        // .text("Loading...")
        // .css({ "text-align": "center" });

    // Crafty.load(["images/bg.png", "images/lock.png"],
        // function() {
             //when loaded
             console.log("loaded images ")
            var bg = Crafty.e("2D, Canvas, BG1, Mouse");
            bg.x = Crafty.viewport.width/2-320/2; bg.y = Crafty.viewport.height/2-480/2;

            var hoverEffect = Crafty.e("2D, Canvas, Image, Mouse").image("images/onclick_levels.png");
            hoverEffect.x = bg._x+20; hoverEffect.y = bg._y+200;    hoverEffect.alpha=0.01
            // console.log("crafty width ",Crafty.viewport.width, Crafty.viewport.height, Crafty.viewport.x);

            bg.bind("MouseMove", function(e) {
                hoverEffect.alpha=0.01;
            })

            var levelTag = Crafty.e("2D, Canvas, Image").image("images/puzzle_Tag.png");
            levelTag.x = bg._x; levelTag.y = bg._y+50;
            var bBeginX = bg._x + 50; var bBeginY = bg._y+220;
            var bLevels =  new Array();
            var bKey = getGameMode()+getLevelId();
            var bKey1
            for(var i=1; i<=5; i++) {
                
                console.log("bkey 1 is ", bKey, getStorageItem(bKey))
                if(getStorageItem(bKey)>=i) {
                    bLevels[i-1] = Crafty.e("2D, Canvas, Image, Mouse").image("images/"+i+".png");
                    bLevels[i-1].islocked = false;
                } else {
                    bLevels[i-1] = Crafty.e("2D, Canvas, Lock");
                    bLevels[i-1].islocked = true;
                }
                
                bLevels[i-1].puzzleId = i;
                bLevels[i-1].x= bBeginX; bLevels[i-1].y= bBeginY;
                bBeginX+=80;
                if(i%3==0) { bBeginY += 70; bBeginX = bg._x+50; console.log("i value ", i)}

                bLevels[i-1].bind("MouseDown", function(e) { 
                    hoverEffect.alpha=0.01;
                    if(this.islocked) return ;
                    setPuzzleId(parseInt(this.puzzleId));
                    console.log("levels button clicked", this.puzzleId, lPuzzleId);
                    // deleteImages(bLevels)
                    // deleteImages([bg, levelTag, hoverEffect])
                    Crafty.scene('GamePlay');
                });

                // bLevels[i-1].bind("MouseDown", function(e) {
                //      hoverEffect.x= this._x; hoverEffect.y=this._y;
                //         hoverEffect.alpha=1.0
                // })
            }
         // }
     // );
    
    var backBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/back_btn.png");
    backBtn.x = bg._x+221; backBtn.y = bg._y+415;

    backBtn.bind("MouseDown", function(e)  {
        Crafty.scene('GameLevels')
    })
    
    
});

Crafty.scene('AboutUs', function() {
    setScreenScale();
    console.log("ABOUTUS SCREEN");
    Crafty.background('rgb(0,0,0)');
    // Crafty.e("2D, Canvas, Text").attr({ w: 100, h: 20, x: Crafty.viewport.width/2-50, y: Crafty.viewport.height/2-10 })
        // .text("Loading...")
        // .css({ "text-align": "center" });
    // Crafty.load(["images/bg.png", "images/about_tag.png", "images/blue_tag1", "images/aboutUs_text.png", "images/back_btn.png"],
        // function() {
             //when loaded
             console.log("loaded images ")
            var bg = Crafty.e("2D, Canvas, Image").image("images/bg.png");
            bg.x = Crafty.viewport.width/2-320/2; bg.y = Crafty.viewport.height/2-480/2;
            var bgWidth = bg._w;
            var bgHeight = bg._h;
            if(bgWidth == 0) {bgWidth = 320; bgHeight=480;}
            console.log("bg width and height ", bgWidth, bgHeight)
            var aboutTag = Crafty.e("2D, Canvas, Image").image("images/about_tag.png");
            aboutTag.x = bg._x; aboutTag.y = bg._y+2;

            var aboutBlueTag = Crafty.e("2D, Canvas, Image").image("images/blue_tag1.png");
            aboutBlueTag.x = bg._x+17; aboutBlueTag.y = bg._y+130;

            var aboutText = Crafty.e("2D, Canvas, Image").image("images/aboutUs_text.png");
            aboutText.x = bg._x+43; aboutText.y = bg._y+142;

            var backBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/back_btn.png");
            backBtn.x = bg._x+221; backBtn.y = bg._y+418;

            backBtn.bind("MouseDown", function(e) { 
                console.log("back button aboutus clicked", lLevelId);
               this.unbind('Click', this.backBtn);
               // deleteImages([bg,aboutTag, aboutBlueTag, aboutText, backBtn]);
               Crafty.scene('GameMenu')
               
            });
         // }
     // );  
});

Crafty.scene('PuzzleWin', function() {
    setScreenScale();
    console.log("PUZZLE SCREEN");
    Crafty.background('rgb(0,0,0)');
    // Crafty.e("2D, Canvas, Text").attr({ w: 100, h: 20, x: Crafty.viewport.width/2-50, y: Crafty.viewport.height/2-10 })
        // .text("Loading...")
        // .css({ "text-align": "center" });

        Crafty.audio.stop();

    // Crafty.load([ "images/bg1.png", "images/blue_tag1.png", "images/win_puzzle.png", "images/leave_game.png", "images/next_btn.png"],
        // function() {
    
             //when loaded
            var bg = Crafty.e("2D, Canvas, BG1, Mouse");
            bg.x = Crafty.viewport.width/2-320/2; bg.y = Crafty.viewport.height/2-480/2;
            var bgWidth = bg._w;
            var bgHeight = bg._h;
            if(bgWidth == 0) {bgWidth = 320; bgHeight=480;}
    
            var bgDuplicated = Crafty.e("2D, Canvas, Image").image("images/bg.png");
            bgDuplicated.x = bg._x; bgDuplicated.y = bg._y;
    
            var bgDuplicated1 = Crafty.e("2D, Canvas, Image").image("images/bg1.png");
            bgDuplicated1.x = bg._x; bgDuplicated1.y = bg._y;


            var bg11 = Crafty.e("2D, Canvas, Image, Mouse").image("images/bg11.png");
            bg11.x = Crafty.viewport.width/2-160; bg11.y = bg._y;

            var bg22 = Crafty.e("2D, Canvas, Image, Mouse").image("images/bg22.png");
            bg22.x = Crafty.viewport.width/2-160; bg22.y = bg._y+240;

            var hoverEffect1 = Crafty.e("2D, Canvas, Image").image("images/onclick_next.png");
            hoverEffect1.x = bg._x+20; hoverEffect1.y = bg._y+200;    hoverEffect1.alpha=0.01

            var hoverEffect2 = Crafty.e("2D, Canvas, Image").image("images/onclick_tryagain.png");
            hoverEffect2.x = bg._x+20; hoverEffect2.y = bg._y+200;    hoverEffect2.alpha=0.01

            

            bg.bind("MouseMove", function(e) {
                hoverEffect1.alpha=0.01
                hoverEffect2.alpha=0.01;
            })
           

            var aboutBlueTag = Crafty.e("2D, Canvas, Image").image("images/blue_tag1.png");
            // aboutBlueTag.x = bg._x+5; aboutBlueTag.y = bg._y+70;
            aboutBlueTag.x = bg._x+18; aboutBlueTag.y = bg._y+105;
            aboutBlueTag.alpha = 0.8;

            var puzzleText = Crafty.e("2D, Canvas, Image").image("images/win_puzzle.png");
            puzzleText.x = bg.x + 30; puzzleText.y = bg._y+150;

            var leaveGameBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/leave_game.png");
            leaveGameBtn.x = bg.x+2; leaveGameBtn.y = bg._y+410;

            var nextBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/next_btn.png");
            nextBtn.x = bg.x+221; nextBtn.y = bg._y+410;

            // hideImages([bg, bg11, bg22,  hoverEffect1, hoverEffect2,aboutBlueTag, puzzleText, leaveGameBtn, nextBtn], 0.01)
// 
            // setTimeout(function() {
                // hideImages([bg, bg11, bg22,  hoverEffect1, hoverEffect2,aboutBlueTag, puzzleText, leaveGameBtn, nextBtn], 1.0)                
                leaveGameBtn.bind("MouseDown", function(e) {
                    hoverEffect2.alpha=0.01;
                    // deleteImages([bg, bg11, bg22,  hoverEffect1, hoverEffect2,aboutBlueTag, puzzleText, leaveGameBtn, nextBtn])
                   Crafty.scene('GameMenu') 
                });

                nextBtn.bind("MouseDown", function(e) { 
                    console.log("back button aboutus clicked", lLevelId);
                    hoverEffect1.alpha=0.01
                   this.unbind('Click', this.nextBtn);
                   beginTimerClock()
                   setPuzzleId1()
                   // deleteImages([bg, bg11, bg22,  hoverEffect1, hoverEffect2,aboutBlueTag, puzzleText, leaveGameBtn, nextBtn])
                   Crafty.scene('GamePlay')
                   // deleteImages([bg,aboutTag, aboutBlueTag, aboutText, backBtn]);
                });

                // nextBtn.bind("MouseDown", function(e) {
                //     hoverEffect1.alpha=1.0; hoverEffect1.x=this._x; hoverEffect1.y= this._y;
                // })

                // leaveGameBtn.bind("MouseDown", function(e) {
                //     hoverEffect2.alpha=1.0; hoverEffect2.x=this._x; hoverEffect2.y= this._y;
                // })
            // },1000)

            playSfxAudio("GameWin");
            
         // }
     // );

    
});

Crafty.scene('LevelWin', function() {
    setScreenScale();
    console.log("LEVEL SCREEN");
    Crafty.background('rgb(0,0,0)');
    Crafty.audio.stop();
    // Crafty.e("2D, Canvas, Text").attr({ w: 100, h: 20, x: Crafty.viewport.width/2-50, y: Crafty.viewport.height/2-10 })
        // .text("Loading...")
        // .css({ "text-align": "center" });

    // Crafty.load(["images/bg.png", "images/blue_tag1.png", "images/win_level.png", "images/leave_game.png", "images/next_btn.png"],
        // function() {
             //when loaded
            var bg = Crafty.e("2D, Canvas, BG1, Mouse");
            bg.x = Crafty.viewport.width/2-320/2; bg.y = Crafty.viewport.height/2-480/2;
            var bgWidth = bg._w;
            var bgHeight = bg._h;
            if(bgWidth == 0) {bgWidth = 320; bgHeight=480;}

            var bg11 = Crafty.e("2D, Canvas, Image, Mouse").image("images/bg11.png");
            bg11.x = Crafty.viewport.width/2-320/2; bg11.y = bg._y;

            var bg22 = Crafty.e("2D, Canvas, Image, Mouse").image("images/bg22.png");
            bg22.x = Crafty.viewport.width/2-320/2; bg22.y = bg._y+480/2;

            var hoverEffect1 = Crafty.e("2D, Canvas, Image").image("images/onclick_next.png");
            hoverEffect1.x = bg._x+20; hoverEffect1.y = bg._y+200;    hoverEffect1.alpha=0.01

            var hoverEffect2 = Crafty.e("2D, Canvas, Image").image("images/onclick_tryagain.png");
            hoverEffect2.x = bg._x+20; hoverEffect2.y = bg._y+200;    hoverEffect2.alpha=0.01

            bg.bind("MouseMove", function(e) {
                hoverEffect1.alpha=0.01
                hoverEffect2.alpha=0.01;
            })

            var aboutBlueTag = Crafty.e("2D, Canvas, Image").image("images/blue_tag1.png");
            // aboutBlueTag.x = bg._x+5; aboutBlueTag.y = bg._y+70;
            aboutBlueTag.x = bg._x+18; aboutBlueTag.y = bg._y+105;
            aboutBlueTag.alpha = 0.8;

            var puzzleText = Crafty.e("2D, Canvas, Image").image("images/win_level.png");
            puzzleText.x = bg.x + 30; puzzleText.y = bg._y+150;

            var leaveGameBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/leave_game.png");
            leaveGameBtn.x = bg.x+2; leaveGameBtn.y = bg._y+415;

            var nextBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/next_btn.png");
            nextBtn.x = bg.x+221; nextBtn.y = bg._y+415;

            leaveGameBtn.bind("MouseDown", function(e) {
                hoverEffect2.alpha=0.01
                // deleteImages([bg, bg11, bg22, hoverEffect1, hoverEffect2, aboutBlueTag, puzzleText, leaveGameBtn, nextBtn])
               Crafty.scene('GameMenu') 
            });

            nextBtn.bind("MouseDown", function(e) { 
                console.log("back button aboutus clicked", lLevelId);
                hoverEffect1.alpha=0.01
               this.unbind('Click', this.nextBtn);
               resetPuzzleId();
               setPuzzleId1()
               // deleteImages([bg, bg11, bg22, hoverEffect1, hoverEffect2, aboutBlueTag, puzzleText, leaveGameBtn, nextBtn])
               Crafty.scene('GamePlay')
               // deleteImages([bg,aboutTag, aboutBlueTag, aboutText, backBtn]);
            });

            //  nextBtn.bind("MouseDown", function(e) {
            //     hoverEffect1.alpha=1.0; hoverEffect1.x=this._x; hoverEffect1.y= this._y;
            // })

            // leaveGameBtn.bind("MouseDown", function(e) {
            //     hoverEffect2.alpha=1.0; hoverEffect2.x=this._x; hoverEffect2.y= this._y;
            // })

            playSfxAudio("GameWin");
            
         // }
     // );

    
});

Crafty.scene('LevelsComplete', function() {
    setScreenScale();
    console.log("LEVELS COMPLETE SCREEN");
    Crafty.background('rgb(0,0,0)');

    // Crafty.e("2D, Canvas, Text").attr({ w: 100, h: 20, x: Crafty.viewport.width/2-50, y: Crafty.viewport.height/2-10 })
        // .text("Loading...")
        // .css({ "text-align": "center" });
    Crafty.audio.stop();
    // Crafty.load([ "images/bg.png", "images/levelComplete.png", "images/leave_game.png"],
        // function() {
             //when loaded
             var bg = Crafty.e("2D, Canvas, BG1, Mouse");
            bg.x = Crafty.viewport.width/2-320/2; bg.y = Crafty.viewport.height/2-480/2;
            var bgWidth = bg._w;
            var bgHeight = bg._h;
            if(bgWidth == 0) {bgWidth = 320; bgHeight=480;}

            var bg11 = Crafty.e("2D, Canvas, Image, Mouse").image("images/bg11.png");
            bg11.x = Crafty.viewport.width/2-320/2; bg11.y = bg._y;

            var bg22 = Crafty.e("2D, Canvas, Image, Mouse").image("images/bg22.png");
            bg22.x = Crafty.viewport.width/2-320/2; bg22.y = bg._y+480/2;

            var hoverEffect = Crafty.e("2D, Canvas, Image").image("images/onclick_tryagain.png");
            hoverEffect.x = bg._x+20; hoverEffect.y = bg._y+200;    hoverEffect.alpha=0.01

            var aboutBlueTag = Crafty.e("2D, Canvas, Image").image("images/blue_tag1.png");
            // aboutBlueTag.x = bg._x+5; aboutBlueTag.y = bg._y+70;
            aboutBlueTag.x = bg._x+18; aboutBlueTag.y = bg._y+105;
            aboutBlueTag.alpha = 0.8;

            var puzzleText = Crafty.e("2D, Canvas, Image").image("images/levelComplete.png");
            puzzleText.x = bg.x + 30; puzzleText.y = bg._y+150;

            var leaveGameBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/leave_game.png");
            leaveGameBtn.x = bg.x+89; leaveGameBtn.y = bg._y+410;

            bg.bind("MouseMove", function(e) {
                hoverEffect.alpha=0.01
            })

            leaveGameBtn.bind("MouseDown", function(e) {
                hoverEffect.alpha=0.01  
                // deleteImages([bg, bg11, bg22, hoverEffect, aboutBlueTag, puzzleText, leaveGameBtn])
               Crafty.scene('GameMenu') 
            });

            // leaveGameBtn.bind("MouseDown", function(e) {
            //     hoverEffect.alpha=1.0; hoverEffect.x=this._x; hoverEffect.y= this._y;
            // })

            playSfxAudio("GameWin");
            
         // }
     // );

    
});

Crafty.scene('PuzzleLose', function() {
    setScreenScale();
    console.log("PUZZLE LOSE  SCREEN");
    Crafty.background('rgb(0,0,0)');
    Crafty.audio.stop();
    // Crafty.e("2D, Canvas, Text").attr({ w: 100, h: 20, x: Crafty.viewport.width/2-50, y: Crafty.viewport.height/2-10 })
        // .text("Loading...")
        // .css({ "text-align": "center" });

    // Crafty.load(["images/bg.png", "images/blue_tag1.png", "images/tryAgainText.png", "images/leave_game.png", "images/tryagain_btn.png"],
        // function() {
             //when loaded
            var bg = Crafty.e("2D, Canvas, BG1, Mouse");
            bg.x = Crafty.viewport.width/2-320/2; bg.y = Crafty.viewport.height/2-480/2;
            var bgWidth = bg._w;
            var bgHeight = bg._h;
            if(bgWidth == 0) {bgWidth = 320; bgHeight=480;}

             var hoverEffect = Crafty.e("2D, Canvas, Image").image("images/onclick_tryagain.png");
            hoverEffect.x = bg._x+20; hoverEffect.y = bg._y+200;    hoverEffect.alpha=0.01

            var aboutBlueTag = Crafty.e("2D, Canvas, Image").image("images/blue_tag1.png");
            // aboutBlueTag.x = bg._x+5; aboutBlueTag.y = bg._y+70;
            aboutBlueTag.x = bg._x+18; aboutBlueTag.y = bg._y+105;
            aboutBlueTag.alpha = 0.8;

            var puzzleText = Crafty.e("2D, Canvas, Image").image("images/tryAgainText.png");
            puzzleText.x = bg.x + 35; puzzleText.y = bg._y+150;

            var leaveGameBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/leave_game.png");
            leaveGameBtn.x = bg.x+2; leaveGameBtn.y = bg._y+415;

            var nextBtn = Crafty.e("2D, Canvas, Image, Mouse").image("images/tryagain_btn.png");
            nextBtn.x = bg.x+181; nextBtn.y = bg._y+415;

            bg.bind("MouseMove", function(e) {
                hoverEffect.alpha=0.01
            })


            leaveGameBtn.bind("MouseDown", function(e) {
                hoverEffect.alpha=0.01
                // deleteImages([bg, hoverEffect, aboutBlueTag, leaveGameBtn, nextBtn, puzzleText])
               Crafty.scene('GameMenu') 
            });

            nextBtn.bind("MouseDown", function(e) { 
                console.log("back button aboutus clicked", lLevelId);
               this.unbind('Click', this.nextBtn);
                hoverEffect.alpha=0.01;
                resetPuzzleId()

                // deleteImages([bg, hoverEffect, aboutBlueTag, leaveGameBtn, nextBtn, puzzleText])

               generateRandomPuzzleUniqueId()
               
               Crafty.scene('GamePlay')

               
               
               // deleteImages([bg,aboutTag, aboutBlueTag, aboutText, backBtn]);
            });

            // leaveGameBtn.bind("MouseDown", function(e) {
            //     hoverEffect.alpha=1.0; hoverEffect.x=this._x; hoverEffect.y= this._y;
            // })

            // nextBtn.bind("MouseDown", function(e) {
            //     hoverEffect.alpha=1.0; hoverEffect.x=this._x; hoverEffect.y= this._y;
            // })

            playSfxAudio("GameLose");
            
            
         // }
     // );
   
    
});



