Code viewer for World: Design Your Own Room Escap...
// THE TWEAKERS BOX CONTAINS ITEMS THAN CAN BE CHANGED BY USERS WITH NO PROGRAMMING KNOWLEDGE
// IF YOU HAVE NO PROGRAMMING KNOWLEDGE DO NOT CHANGE ANYTHING OUTSIDE THE TWEAKERS BOX

// ===================================================================================================================
// === Start of tweaker's box ======================================================================================== 
// ===================================================================================================================

// THE ORDER IN WHICH THE ROOMS WILL BE PLAYED, THESE CAN BE RE-ORDERED IN ANY WAY YOU LIKE
// MAKE SURE EVERY NUMBER 1-5 IS THERE AT LEAST ONCE
var roomOrder = [1, 2, 3, 4, 5];

// IN ORDER TO CHANGE THE TEXTURES IN THE ROOMS, ONLY CHANGE THE FILEPATH INSIDE THE '' HIGHLITED IN YELLOW
function preload()
{
    // ROOM 1 (KEYPAD ROOM) - TEXTURES FOR WALLS, FLOOR AND CEILING
    floor               = loadImage('uploads/jacksos6/floor.jpg');
    wallpaper           = loadImage('uploads/jacksos6/wallpaper.png');
    ceiling             = loadImage('uploads/jacksos6/ceiling.jpg');
    swingJazz           = loadSound('uploads/oconnj88/swingJazz.wav');
    
    // ROOM 2 (LAPTOP ROOM) - TEXTURES FOR WALLS, FLOOR, CEILING AND MUSIC
    carpetFloor         = loadImage('uploads/oconnj88/darkFloor.jpg');
    woodWall            = loadImage('uploads/oconnj88/woodWall.jpg');
    darkCeiling         = loadImage('uploads/oconnj88/darkCeiling.jpg');
    creepyMusic         = loadSound('uploads/oconnj88/creepyMusic.wav');

    // ROOM 3 (9 WINDOW ROOM) - TEXTURES FOR WALLS, FLOOR AND CEILING
    woodFloor           = loadImage('uploads/oconnj88/woodTexture.jpg');
    flowerWall          = loadImage('uploads/oconnj88/flowerWall2.jpg');
    whiteCeiling        = loadImage('uploads/oconnj88/whiteTexture.jpg');
    
    // ROOM 4 (PIANO ROOM) - TEXTURES FOR WALLS, FLOOR AND CEILING
    scratchedFloor      = loadImage('uploads/oconnj88/scratchedFloor.jpg');
    paintSplat          = loadImage('uploads/oconnj88/paintSplat.jpg');
    blackCrackedCeiling = loadImage('uploads/oconnj88/darkCrackedCeiling.jpg');
    
    // ROOM 5 (CLOCK ROOM) - TEXTURES FOR WALLS, FLOOR, CEILING AND MUSIC
    goldWoodWall        = loadImage('uploads/oconnj88/goldWoodWall.jpg');
    steelFloor          = loadImage('uploads/oconnj88/steelFloor.jpg');
    woodCeiling         = loadImage('uploads/oconnj88/woodCeiling.jpg');
    tick                = loadSound('uploads/oconnj88/tick.wav');


// ===================================================================================================================
// === End of tweaker's box ==========================================================================================
// ===================================================================================================================

// You will need to be a JavaScript programmer to change things below the tweaker's box.

    

    // ROOM 1 IMAGES 
    window_             = loadImage('/uploads/jacksos6/window.png');
    landscape           = loadImage('/uploads/jacksos6/landscape.jpg');
    door                = loadImage('/uploads/jacksos6/door.png');
    rug                 = loadImage('/uploads/oconnj88/rug.png');
    painting            = loadImage('uploads/oconnj88/painting.png');
    brown               = loadImage('/uploads/oconnj88/brown.jpg');
    lightOn             = loadImage('uploads/oconnj88/lightOn.png');
    lightOff            = loadImage('uploads/oconnj88/LightOff.png');
    keypad              = loadImage('uploads/oconnj88/keypad.png');
    
    // ROOM 1 OBJECTS 
    table               = loadModel('uploads/jacksos6/table.obj');
    couch               = loadModel('/uploads/oconnj88/HSM0012.obj');
    
    // ROOM 1 SOUNDS
    
    lightSound          = loadSound('uploads/oconnj88/switch-1.wav');
    KeySound            = loadSound('uploads/oconnj88/beep.wav');
    
/////////////////////////////////////////////////////////////////////////////////    
    
    // ROOM 2 IMAGES
    door2               = loadImage('uploads/oconnj88/door2.png');
    tableTexture        = loadImage('uploads/oconnj88/tableTexture.jpg');
    knife               = loadImage('uploads/oconnj88/bloodyKnife.png');
    laptop              = loadImage('uploads/oconnj88/laptop.png');
    laptopScreen        = loadImage('uploads/oconnj88/laptopScreen.jpg');
    laptopSide          = loadImage('uploads/oconnj88/laptopSide.png');
    laptopScreenZoomed  = loadImage('uploads/oconnj88/laptopScreenZoomed.png');
    chairTexture        = loadImage('uploads/oconnj88/chairTexture.png');
    backLaptop          = loadImage('uploads/oconnj88/backLaptop.png');
    lightFitting        = loadImage('uploads/oconnj88/lightFitting.png');
    metalFrame          = loadImage('uploads/oconnj88/frameMetal2.png');
    murder              = loadImage('uploads/oconnj88/murderTextWall.png');
    scary               = loadImage('uploads/oconnj88/scary.jpg');
    bloodSplat          = loadImage('uploads/oconnj88/bloodSplat.png');
    bloodHand           = loadImage('uploads/oconnj88/bloodHand.png');
    
    // ROOM 2 OBJECTS
    chair               = loadModel('uploads/oconnj88/Chairs.obj');
    table2              = loadModel('uploads/oconnj88/roomTable.obj');
    
    // ROOM 2 SOUNDS
    paintingFalling     = loadSound('uploads/oconnj88/paintingFalling.wav');
    
/////////////////////////////////////////////////////////////////////////////////
    
    // ROOM 3 IMAGES
    nineWindow          = loadImage('uploads/oconnj88/nineWindow.png');
    blackDoor           = loadImage('uploads/oconnj88/blackDoor.png');
    blueBackground      = loadImage('uploads/oconnj88/blueBackground.png');
    wallLight           = loadImage('uploads/oconnj88/wallLight.png');
    room3Clue           = loadImage('uploads/oconnj88/room3Clue.png');
    
    
    
    // ROOM 3 CLICKABLE WINDOWS
    words[4]            = loadImage('uploads/oconnj88/In.png');
    words[7]            = loadImage('uploads/oconnj88/order.png');
    words[2]            = loadImage('uploads/oconnj88/to.png');
    words[1]            = loadImage('uploads/oconnj88/move.png');
    words[5]            = loadImage('uploads/oconnj88/on.png');
    words[8]            = loadImage('uploads/oconnj88/guess.png');
    words[3]            = loadImage('uploads/oconnj88/the.png');
    words[6]            = loadImage('uploads/oconnj88/correct.png');
    words[0]            = loadImage('uploads/oconnj88/sentence.png');
    
    // ROOM 3 OBJECTS
    
    bed                 = loadModel('uploads/oconnj88/Steel_bed_frame.obj');
    
/////////////////////////////////////////////////////////////////////////////////
    
    // ROOM 4 IMAGES
    woodDoor            = loadImage('uploads/oconnj88/woodDoor.png');
    piano               = loadImage('uploads/oconnj88/pianoBlack.png');
    pianoKeys           = loadImage('uploads/oconnj88/pianoKeys.png');
    pianoKeysSolution   = loadImage('uploads/oconnj88/pianoKeysSolution.jpg');
    whiteLeather        = loadImage('uploads/oconnj88/whiteLeather.png');
    
    // ROOM 4 OBJECTS
    pianoStool          = loadModel('uploads/oconnj88/pianoBench.obj');
    
    // ROOM 4 SOUNDS
    pianoA              = loadSound('uploads/oconnj88/pianoA.wav');
    pianoB              = loadSound('uploads/oconnj88/pianoB.wav');
    pianoC              = loadSound('uploads/oconnj88/pianoC.wav');
    pianoD              = loadSound('uploads/oconnj88/pianoD.wav');
    pianoE              = loadSound('uploads/oconnj88/pianoE.wav');
    pianoEb             = loadSound('uploads/oconnj88/pianoEb.wav');
    pianoG              = loadSound('uploads/oconnj88/pianoG.wav');
    
/////////////////////////////////////////////////////////////////////////////////
    
    // ROOM 5 IMAGES
    blueDoor            = loadImage('uploads/oconnj88/blueDoor.png');
    clock               = loadImage('uploads/oconnj88/clocks.png');
    clockHand           = loadImage('uploads/oconnj88/clockHand.png');
    twelve              = loadImage('uploads/oconnj88/12.png');
    three               = loadImage('uploads/oconnj88/3.png');
    
    // ROOM 5 OBJECTS
    
    
    // ROOM 5 SOUNDS
    
/////////////////////////////////////////////////////////////////////////////////    
    
    // UNLOCK DOOR SOUND FOR ALL ROOMS
    doorUnlocking       = loadSound('uploads/oconnj88/doorUnlocking.wav');
    
}

////////////////////////////////////////////////////////// VARIABLES ////////////////////////////////////////////////////////

////////////////////////////// GLOBAL VARIABLES /////////////////////////////////

var overTriangleL       = false;
var overTriangleR       = false;
var deg                 = 0;
var roomCounter         = 0;
var doorUnlocked        = false;
var openDoor            = false;
var doorSound           = 0;
var overObject          = false;
var allData;
var saveData = [roomOrder, deg, roomCounter, light, paintClicked, topLeft, topMiddle, topRight, middleLeft, middle, middleRight, bottomLeft, bottomMiddle, bottomRight, hand1, hand2, hand3];
var sounds              = 0;

////////////////////////////// ROOM 1 VARIABLES /////////////////////////////////

var light               = true;
var overLight           = false;
var keyView             = false;
var overBack            = false;
var code                = "";

/////////////////////////// VARIABLE KEYPAD NUMBERS /////////////////////////////

var keyOne              = false;
var keyTwo              = false;
var keyThree            = false;
var keyFour             = false;
var keyFive             = false;
var keySix              = false;
var keySeven            = false;
var keyEight            = false;
var keyNine             = false;
var keyZero             = false;

///////////////////////////// ROOM 2 VARIABLES //////////////////////////////////

var count               = 0;
var overPainting        = false;
var paintClicked        = false;

///////////////////////////// ROOM 3 VARIABLES //////////////////////////////////

words = [];
var topLeft             = 0;
var topMiddle           = 0;
var topRight            = 0;
var middleLeft          = 0;
var middle              = 0;
var middleRight         = 0;
var bottomLeft          = 0;
var bottomMiddle        = 0;
var bottomRight         = 0;

//////////////////////////// ROOM 4 VARIABLES ///////////////////////////////////

var pianoClickOrder     = "";

//////////////////////////// ROOM 5 VARIABLES ///////////////////////////////////

var hand1               = 0;
var hand2               = 0;
var hand3               = 0;

var overClock1          = false;
var overClock2          = false;
var overClock3          = false;

///////////////////////// RANDOM STARTING ROOM //////////////////////////////////

var startRoom = Math.floor((Math.random() * 5) + 1);

var room = 0;

while (roomOrder[0] != startRoom)
{
    room = roomOrder[0];
    roomOrder.shift();
    roomOrder.push(room);
}



/////////////////////////////// CREATE ROOM /////////////////////////////////////

// SETUP FOR THE WORLD FUNCTION

function setup()       
{
    // MAKE THE GAME 3D AND THE FULL WIDTH AND HEIGHT OF THE SCREEN
    
    createCanvas(ABWorld.fullwidth(), ABWorld.fullheight(), WEBGL);
    
    // MAKE GRAPHICS FOR ROOM ONE (GREEN NUMBERS ON THE WALL)
    graphics = createGraphics(100, 100);
    six = createGraphics(100, 100);
    six.fill(57, 255, 20);
    six.textAlign(CENTER);
    six.textSize(65);
    six.text('6', 50, 50);
    
    nine = createGraphics(100, 100);
    nine.fill(57, 255, 20);
    nine.textAlign(CENTER);
    nine.textSize(25);
    nine.text('9', 50, 50);
    
    two = createGraphics(100, 100);
    two.fill(57, 255, 20);
    two.textAlign(CENTER);
    two.textSize(40);
    two.text('2', 50, 50);
    
    one = createGraphics(100, 100);
    one.fill(57, 255, 20);
    one.textAlign(CENTER);
    one.textSize(65);
    one.text('1', 50, 50);
    
    back = createGraphics(150, 150);
    back.fill(255);
    back.textAlign(CENTER);
    back.textSize(50);
    back.text('BACK', 75, 60);

    // ONLY DISPLAY THE TEXT INPUT BOX WHEN ZOOMED ON LAPTOP (ROOM 2)
    if (roomOrder[roomCounter] == 2 && deg == 360)
    {
        let input = "<p>Enter Password : <input id='password' type='text' value=''></p>";
        $("#user_span6").html(input);
    }
    
}

//////////////////////////////// DRAW ROOMS /////////////////////////////////////

//DRAW FUNCTION FOR EVERY ROOM
function draw()             
{
    background(100);
    var rad = radians(deg);
    
    if (sounds === 0)
    {
        playMusic();
        sounds += 1;
    }
    
/////////////////////////////////////////////////////////////////////////////////      
//                                ROOM 1                                       //
/////////////////////////////////////////////////////////////////////////////////
    
    if (roomOrder[roomCounter] == 1)
    {
        // CHANGING THE LIGHT WHEN THE LIGHT SWITCH IS PRESSED
        if (light === false)
        {
            ambientLight(50);
        }
        else
        {
            ambientLight(255);
        }
        
        // OPENING VIEW OF ROOM 
        if (rad === 0)
        {
            $("#user_span3").html("");
            $("#user_span5").html("");
            code = "";
            
            // FLOOR 
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(floor);
            plane(width, height);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(wallpaper);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(wallpaper);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL
            push();
            texture(wallpaper);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(ceiling);
            plane(width, height);
            pop();
            
            // RUG
            push();
            translate(0, 270, 50);
            rotateX(HALF_PI);
            texture(rug);
            plane(width / 2, height / 2);
            pop();
            
            // LANDSCAPE
            push();
            translate(200, 0);
            texture(landscape);
            plane(150, 150);
            pop();
            
            // WINDOW
            push();
            translate(200, 0);
            texture(window_);
            plane(155, 155);
            pop();
            
            // DOOR
            push();
            translate(-220, 38, 5);
            texture(door);
            plane(140, 280);
            pop();
            
            // COUCH
            push();
            strokeWeight(1);
            texture(brown);
            translate(0, 150, 150);
            rotateZ(PI);
            rotateX(PI * 1.5);
            model(couch);
            pop();
            
            // TABLE
            push();
            strokeWeight(1);
            translate(400, 200, 200);
            rotateZ(PI);
            model(table);
            pop();
            
            // PAINTING
            push();
            translate(-370, 0, 100);
            rotateY(HALF_PI);
            texture(painting);
            plane(100, 120);
            pop();
            
            // KEYPAD
            push();
            translate(-100, 0, 100);
            texture(keypad);
            plane(38, 50);
            pop();
            
            // ZOOMING IN ON KEYPAD
            push();
            if (mouseX > width * 0.42 && mouseX < width * 0.444 && mouseY < height / 2 + 40 && mouseY > height / 2 - 40)
            {
                overObject = true;
            }
            else
            {
                overObject = false;
            }
            pop();
            
            // LIGHT SWITCH
            push();
            translate(-320, 0, 10);
            texture(lightOn);
            plane(30, 40);
            pop();
            
            // TURNING ON AND OFF THE LIGHT WITH CLICK 
            push();
            if (mouseX > width * 0.296 && mouseX < width * 0.316 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overLight = true;
            }
            else
            {
                overLight = false;
            }
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////
            
            // LEFT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
            
            // CLICKING ON THE DOOR TO ADVANCE TO THE NEXT ROOM 
            if (mouseX > width * 0.32 && mouseX < width * 0.411 && mouseY < height / 2 + 200 && mouseY > height / 2 - 200 && doorUnlocked === true)
            {
                openDoor = true;
            }
            
        }
        
        // LEFT VIEW OF ROOM 
        if (rad == 3 * PI / 2)
        {
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(floor);
            plane(height, width);
            pop();
            
            // LEFT WALL
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(wallpaper);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(wallpaper);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(wallpaper);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(ceiling);
            plane(width, height);
            pop();
            
            // RUG
            push();
            translate(0, 270, 50);
            rotateX(HALF_PI);
            rotateZ(PI / 2);
            texture(rug);
            plane(width / 2, height / 2);
            pop();
            
            // PAINTING 
            push();
            translate(170, 0);
            texture(painting);
            plane(100, 120);
            pop();
            
            // DOOR
            push();
            translate(368, 40, 115);
            rotateY(HALF_PI);
            texture(door);
            plane(140, 280);
            pop();
            
            // LANDSCAPE
            push();
            translate(450, 0, 450);
            rotateY(HALF_PI);
            texture(landscape);
            plane(150, 150);
            pop();
            
            // WINDOW
            push();
            translate(439, 0, 451);
            rotateY(HALF_PI);
            texture(window_);
            plane(155, 155);
            pop();
            
            // COUCH
            push();
            strokeWeight(1);
            texture(brown);
            translate(340, 200, 285);
            rotateX(PI / 2);
            rotateZ(3 * PI / 2);
            model(couch);
            pop();
            
            // KEYPAD
            push();
            translate(440, 0, 100);
            rotateY(HALF_PI);
            texture(keypad);
            plane(38, 50);
            pop();
            
            // LIGHTSWITCH
            push();
            translate(373, 0, 9);
            rotateY(30);
            texture(lightOn);
            plane(30, 40);
            pop();
            
            if (light === false)
            {
                // NUMBERS ON THE WALL WHEN THE LIGHT IS OFF
                push();
                translate(-500, 0, 200);
                texture(six);
                plane(200, 200);
                pop();
                
                push();
                translate(-420, -100);
                texture(two);
                plane(100, 100);
                pop();
                
                push();
                translate(-400, 130, 201);
                texture(one);
                plane(120, 120);
                pop();
            }

////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////            

            // LEFT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // RIGHT VIEW OF ROOM
        if (rad == PI / 2)
        {
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(floor);
            plane(height, width);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(wallpaper);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(wallpaper);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(wallpaper);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(ceiling);
            plane(width, height);
            pop();
            
            // RUG
            push();
            translate(0, 270, 50);
            rotateX(HALF_PI);
            rotateZ(3 * PI / 2);
            texture(rug);
            plane(width / 2, height / 2);
            pop();
            
            // LANDSCAPE
            push();
            translate(-350, 0, 140);
            rotateY(HALF_PI);
            texture(landscape);
            plane(150, 150);
            pop();
            
            // WINDOW
            push();
            translate(-349, 0, 141);
            rotateY(HALF_PI);
            texture(window_);
            plane(155, 155);
            pop();
            
            // DOOR
            push();
            translate(-530, 60, 350);
            rotateY(HALF_PI);
            texture(door);
            plane(140, 400);
            pop();
            
            // COUCH
            push();
            strokeWeight(1);
            texture(brown);
            translate(-330, 190, 300);
            rotateX(PI / 2);
            rotateZ(PI / 2);
            model(couch);
            pop();
            
            // TABLE
            push();
            strokeWeight(1);
            translate(0, 120, 150);
            rotateZ(PI);
            rotateY(PI / 2);
            model(table);
            pop();
            
            // KEYPAD
            push();
            translate(-550, 0, 227);
            rotateY(HALF_PI);
            texture(keypad);
            plane(48, 60);
            pop();
            
            if (light === false)
            {
                // NUMBERS ON THE WALL WHEN THE LIGHT IS OFF
                push();
                translate(480, 0, 200);
                texture(six);
                plane(200, 200);
                pop();
                
                push();
                translate(400, -50, 31);
                texture(nine);
                plane(100, 100);
                pop();
                
                push();
                translate(560, 180, 160);
                texture(one);
                plane(120, 120);
                pop();
            }
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // BEHIND VIEW OF ROOM 
        if (rad == PI)
        {
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(floor);
            plane(width, height);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(wallpaper);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(wallpaper);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(wallpaper);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(ceiling);
            plane(width, height);
            pop();
            
            if (light === false)
            {
                // NUMBERS ON THE WALL WHEN THE LIGHT IS OFF 
                push();
                texture(six);
                plane(220, 220);
                
                translate(-200, -50);
                texture(nine);
                plane(100, 100);
                
                translate(500, -30);
                texture(two);
                plane(100, 100);
                
                translate(-200, 200);
                texture(one);
                plane(120, 120);
                
                pop();
            }
            
            // RUG
            push();
            translate(0, 270, 50);
            rotateX(HALF_PI);
            texture(rug);
            plane(width / 2, height / 2);
            pop();
            
            // PAINTING
            push();
            translate(420, 0, 420);
            rotateY(HALF_PI);
            texture(painting);
            plane(100, 120);
            pop();
            
            // TEXTURE OF THE TABLE
            push();
            texture(brown);
            pop();
            
            // TABLE 
            push();
            translate(-320, 150, 170);
            rotateZ(PI);
            model(table);
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // ZOOMED VIEW OF THE KEYPAD
        if (deg == 360)
        {
            // WALL BEHIND KEYPAD 
            push();
            texture(wallpaper);
            plane(width, height);
            pop();
            
            // KEYPAD
            push();
            texture(keypad);
            plane(width / 2.3, height / 1.3);
            pop();
            
            //BACK BUTTON
            push();
            translate(0, height / 2);
            noStroke();
            fill(0);
            plane(width, 100);
            pop();
            
            // TEXT SAYING BACK ON THE BUTTON 
            push();
            translate(0, height / 2);
            texture(back);
            plane(100, 100);
            pop();
            
            //WHEN THE CODE ENTERED IS LESS THAN 3 DISPLAY ENTER PASSWORD 
            if (code.length <= 3)
            {
                push();
                $("#user_span3").html("<p> <font color='black'>Enter a 4 Digit Code</font>");
                pop();
            }
            
            //WHEN THE CODE ENTERED IS EQUAL TO 4 AND IS THE CORRECT CODE, DISPLAY DOOR UNLOCKED AND UNLOCK THE DOOR 
            if (code.length == 4)
            {
                if (code == '6129')
                {
                    push();
                    $("#user_span3").html("<p> <font color='green'>Door Unlocked!</font>");
                    doorUnlocked = true;
                    if (doorSound === 0)
                    {
                        doorUnlocking.play();
                        doorSound += 1;
                    }
                    pop();
                }
                
                // WHEN THE CODE IS ENTERED INCORRECTLY DISPLAY, INCORRECT CODE
                else
                {
                    push();
                    $("#user_span3").html("<p> <font color='red'>Incorrect code!</font>");
                    setTimeout(timer, 1000);
                    pop();
                }
                
            }
            
            // KEYPAD INPUTS FOR EACH NUMBER 0 - 9 (CLICK COORDINATES)
            push();
            if (mouseX > width * 0.362 && mouseX < width * 0.448 && mouseY < height / 2 - 150 && mouseY > height / 2 - 280)
            {
                keyOne = true;
            }
            else
            {
                keyOne = false;
            }
            pop();
            
            push();
            if (mouseX > width * 0.458 && mouseX < width * 0.543 && mouseY < height / 2 - 150 && mouseY > height / 2 - 280)
            {
                keyTwo = true;
            }
            else
            {
                keyTwo = false;
            }
            pop();
            
            push();
            if (mouseX > width * 0.554 && mouseX < width * 0.639 && mouseY < height / 2 - 150 && mouseY > height / 2 - 280)
            {
                keyThree = true;
            }
            else
            {
                keyThree = false;
            }
            pop();
            
            push();
            if (mouseX > width * 0.362 && mouseX < width * 0.448 && mouseY < height / 2 - 10 && mouseY > height / 2 - 133)
            {
                keyFour = true;
            }
            else
            {
                keyFour = false;
            }
            pop();
            
            push();
            if (mouseX > width * 0.458 && mouseX < width * 0.543 && mouseY < height / 2 - 10 && mouseY > height / 2 - 133)
            {
                keyFive = true;
            }
            else
            {
                keyFive = false;
            }
            pop();
            
            push();
            if (mouseX > width * 0.554 && mouseX < width * 0.639 && mouseY < height / 2 - 10 && mouseY > height / 2 - 133)
            {
                keySix = true;
            }
            else
            {
                keySix = false;
            }
            pop();
            
            push();
            if (mouseX > width * 0.362 && mouseX < width * 0.448 && mouseY < height / 2 + 135 && mouseY > height / 2 + 10)
            {
                keySeven = true;
            }
            else
            {
                keySeven = false;
            }
            pop();
            
            push();
            if (mouseX > width * 0.458 && mouseX < width * 0.543 && mouseY < height / 2 + 135 && mouseY > height / 2 + 10)
            {
                keyEight = true;
            }
            else
            {
                keyEight = false;
            }
            pop();
            
            push();
            if (mouseX > width * 0.554 && mouseX < width * 0.639 && mouseY < height / 2 + 135 && mouseY > height / 2 + 10)
            {
                keyNine = true;
            }
            else
            {
                keyNine = false;
            }
            pop();
            
            push();
            if (mouseX > width * 0.458 && mouseX < width * 0.543 && mouseY < height / 2 + 275 && mouseY > height / 2 + 150)
            {
                keyZero = true;
            }
            else
            {
                keyZero = false;
            }
            pop();
            
            
            //Back navigation
            push();
            if (mouseY < height / 2 + 500 && mouseY > height / 2 + 420)
            {
                overBack = true;
            }
            else
            {
                overBack = false;
            }
            pop();
            
        }
    }
    
/////////////////////////////////////////////////////////////////////////////////      
//                                ROOM 2                                       //
/////////////////////////////////////////////////////////////////////////////////

    if (roomOrder[roomCounter] == 2)
    {
        // RESET THE LIGHT
        ambientLight(255, 225, 225);
        
        // STOP SOUND PLAYING AFTER YOU CLICK THE PAINTING
        if (paintClicked === true)
        {
            overPainting = false;
        }
        
        // OPENING VIEW
        if (rad === 0)
        {
            $("#user_span5").html("");
            $("#user_span6").html('');
            
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(carpetFloor);
            plane(width, height);
            pop();
            
            // LEFT WALL
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(woodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(woodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(woodWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(darkCeiling);
            plane(width, height);
            pop();
            
            // DOOR
            push();
            translate(-220, 38, 5);
            texture(door2);
            plane(140, 280);
            pop();
            
            // TABLE
            push();
            translate(0, 300, 200);
            rotateX(HALF_PI);
            texture(tableTexture);
            model(table2);
            pop();
            
            // KNIFE
            push();
            translate(-100, 100, 320);
            rotateX(HALF_PI);
            texture(knife);
            plane(100, 100);
            pop();
            
            // LAPTOP
            push();
            translate(30, 50, 340);
            texture(laptop);
            plane(150, 100);
            pop();
            
            // LAPTOP SCREEN 
            push();
            fill(0);
            translate(30, 38, 341);
            texture(laptopScreen);
            plane(119, 69);
            pop();
            
            // CHAIR 1
            push();
            translate(0,300,330);
            rotateZ(PI);
            texture(chairTexture);
            model(chair);
            pop();
            
            // CHAIR 2
            push();
            translate(230,270,240);
            rotateZ(PI);
            rotateY(PI * 3 / 2);
            texture(chairTexture);
            model(chair);
            pop();
            
            // CHAIR 3
            push();
            translate(-230,270,240);
            rotateZ(PI);
            rotateY(HALF_PI);
            texture(chairTexture);
            model(chair);
            pop();
            
            // LIGHT FITTING
            push();
            texture(lightFitting);
            translate(0,-200,100);
            plane(200, 200);
            pop();
            
            // CHECK IF THE PAINTING HAS BEEN CLICKED
            if (paintClicked === false)
            {
                // METAL FRAME
                push();
                translate(300, -40, 300);
                rotateY(HALF_PI);
                texture(metalFrame);
                plane(100, 100);
                pop();
                
                // SCARY PAINTING
                push();
                translate(299, -40, 301);
                rotateY(PI * 3 / 2);
                texture(scary);
                plane(88, 88);
                pop();
            }
            
            // WHEN THE PAINTING IS CLICKED THE PAINTING FALLS OFF THE WALL
            else
            {
                // METAL FRAME
                push();
                translate(300, 110, 300);
                rotateY(HALF_PI);
                texture(metalFrame);
                plane(100, 100);
                pop();
                
                // SCARY PICTURE
                push();
                translate(299, 110, 301);
                rotateY(PI * 3 / 2);
                texture(scary);
                plane(88, 88);
                pop();
                
                // MURDER TEXT ON THE WALL 
                push();
                translate(299, -40, 301);
                rotateY(PI * 3 / 2);
                texture(murder);
                plane(88, 88);
                pop();
            }
            
            
            // BLOODY HANDPRINT ON THE WALL
            push();
            translate(260, -30, 10);
            texture(bloodHand);
            plane(50, 50);
            pop();
            
            // BLOODY SPATTER ON THE WALLS
            push();
            translate(-400, -70, 10);
            texture(bloodSplat);
            plane(60, 60);
            pop();
            
            // BLOODY SPATTER ON THE WALLS
            push();
            translate(-180, 0, 5);
            rotateY(PI);
            texture(bloodSplat);
            plane(80, 80);
            pop();
            
            
            
            // ZOOMING IN ON THE LAPTOP WHEN CLICKED 
            push();
            if (mouseX > width * 0.468 && mouseX < width * 0.592 && mouseY < height / 2 + 125 && mouseY > height / 2)
            {
                overObject = true;
            }
            else
            {
                overObject = false;
            }
            pop(); 

////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////            

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                strokeWeight(2);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
            
            // CLICKING ON THE DOOR TO ADVANCE WHEN UNLOCKED
            if (mouseX > width * 0.32 && mouseX < width * 0.411 && mouseY < height / 2 + 200 && mouseY > height / 2 - 200 && doorUnlocked === true)
            {
                openDoor = true;
            }
        }
        
        // LEFT VIEW OF ROOM 
        if (rad == 3 * PI / 2)
        {
            $("#user_span5").html("");
            $("#user_span6").html('');
            
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(carpetFloor);
            plane(height, width);
            pop();
            
            // LEFT WALL
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(woodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(woodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(woodWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(darkCeiling);
            plane(width, height);
            pop();
            
            // DOOR 
            push();
            translate(368, 45, 115);
            rotateY(PI * 3 / 2);
            texture(door2);
            plane(140, 280);
            pop();
            
            // TABLE
            push();
            translate(0, 300, 100);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(tableTexture);
            model(table2);
            pop();
            
            // KNIFE
            push();
            translate(0, 100, 220);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(knife);
            plane(100, 100);
            pop();
            
            // LAPTOP SIDE VIEW
            push();
            translate(0, 70, 300);
            texture(laptopSide);
            plane(140, 90);
            pop();
            
            // CHAIR 1
            push();
            translate(0,300,330);
            rotateZ(PI);
            texture(chairTexture);
            model(chair);
            pop();
            
            // CHAIR 2
            push();
            translate(180,270,240);
            rotateZ(PI);
            rotateY(PI * 3 / 2);
            texture(chairTexture);
            model(chair);
            pop();
            
            // CHAIR 3
            push();
            translate(-180,270,240);
            rotateZ(PI);
            rotateY(HALF_PI);
            texture(chairTexture);
            model(chair);
            pop();
            
            // LIGHT FITTING
            push();
            texture(lightFitting);
            translate(0,-200,100);
            plane(200, 200);
            pop();
            
            // BLOODY HAND PRINT ON THE WALL
            push();
            translate(460, -30, 265);
            rotateY(PI * 3 / 2);
            texture(bloodHand);
            plane(60, 60);
            pop();
            
            // BLOOD SPLATTERS ON THE WALL 
            push();
            translate(300, -70, 10);
            texture(bloodSplat);
            plane(60, 60);
            pop();
            
            // BLOOD SPLATTERS ON THE WALL
            push();
            translate(350, 10, 200);
            rotateY(PI);
            texture(bloodSplat);
            plane(70, 70);
            pop();
            
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // RIGHT VIEW OF THE ROOM 
        if (rad == PI / 2)
        {
            $("#user_span5").html("");
            $("#user_span6").html('');
            
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(carpetFloor);
            plane(height, width);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(woodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(woodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL
            push();
            texture(woodWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(darkCeiling);
            plane(width, height);
            pop();
            
            // DOOR
            push();
            translate(-520, 65, 350);
            rotateY(HALF_PI);
            texture(door2);
            plane(140, 400);
            pop();
            
            // TABLE
            push();
            translate(0, 300, 100);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(tableTexture);
            model(table2);
            pop();
            
            // KNIFE
            push();
            translate(0, 110, 290);
            rotateX(HALF_PI);
            rotateZ(PI * 3 / 2);
            texture(knife);
            plane(100, 100);
            pop();
            
            // LAPTOP SIDE VIEW
            push();
            translate(0, 60, 300);
            rotateY(PI);
            texture(laptopSide);
            plane(140, 90);
            pop();
            
            // CHAIR 1
            push();
            translate(0,300,330);
            rotateZ(PI);
            texture(chairTexture);
            model(chair);
            pop();
            
            // CHAIR 2
            push();
            translate(180,270,240);
            rotateZ(PI);
            rotateY(PI * 3 / 2);
            texture(chairTexture);
            model(chair);
            pop();
            
            // CHAIR 3
            push();
            translate(-180,270,240);
            rotateZ(PI);
            rotateY(HALF_PI);
            texture(chairTexture);
            model(chair);
            pop();
            
            // LIGHT FITTING
            push();
            texture(lightFitting);
            translate(0,-200,100);
            plane(200, 200);
            pop();
            
            // CHECK IF THE PAINTING HAS BEEN CLICKED 
            if (paintClicked === false)
            {
                // METAL FRAME
                push();
                translate(-180, -40, 50);
                texture(metalFrame);
                plane(110, 110);
                pop();
                
                // SCARY PAINTING
                push();
                translate(-181, -40, 51);
                texture(scary);
                plane(95, 95);
                pop();
            }
            
            // WHEN PAINTING IS CLICKED IT FALLS OFF THE WALL
            else
            {
                // METAL FRAME
                push();
                translate(-180, 130, 50);
                texture(metalFrame);
                plane(110, 110);
                pop();
                
                // SCARY PAINTING
                push();
                translate(-181, 130, 51);
                texture(scary);
                plane(95, 95);
                pop();
                
                // MURDER TEXT ON THE WALL 
                push();
                translate(-181, -40, 51);
                texture(murder);
                plane(95, 95);
                pop();
            }
            
            // BLOODY HAND PRINT ON THE WALL
            push();
            translate(-430, -30, 10);
            rotateY(HALF_PI);
            texture(bloodHand);
            plane(60, 60);
            pop();
            
            // COORDINATES FOR CLICKING THE PAINTING 
            push();
            if (mouseX > width * 0.35 && mouseX < width * 0.422 && mouseY > height / 2 - 110 && mouseY < height / 2 + 15)
            {
                overPainting = true;
            }
            else
            {
                overPainting = false;
            }
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // BEHIND VIEW OF ROOM 
        if (rad == PI)
        {
            $("#user_span6").html('');
            
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(carpetFloor);
            plane(width, height);
            pop();
            
            // LEFT WALL
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(woodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(woodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL
            push();
            texture(woodWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(darkCeiling);
            plane(width, height);
            pop();
            
            // TABLE
            push();
            translate(0, 300, 200);
            rotateX(HALF_PI);
            texture(tableTexture);
            model(table2);
            pop();
            
            // THE BACK OF THE LAPTOP
            push();
            translate(-50, 60, 260);
            texture(backLaptop);
            plane(170, 120);
            pop();
            
            // KNIFE
            push();
            translate(100, 100, 320);
            rotateX(HALF_PI);
            rotateZ(PI);
            texture(knife);
            plane(100, 100);
            pop();
            
            // CHAIR 1
            push();
            translate(0,300,330);
            rotateZ(PI);
            texture(chairTexture);
            model(chair);
            pop();
            
            // CHAIR 2
            push();
            translate(230,270,240);
            rotateZ(PI);
            rotateY(PI * 3 / 2);
            texture(chairTexture);
            model(chair);
            pop();
            
            // CHAIR 3
            push();
            translate(-230,270,240);
            rotateZ(PI);
            rotateY(HALF_PI);
            texture(chairTexture);
            model(chair);
            pop();
            
            // LIGHT FITTING
            push();
            texture(lightFitting); 
            translate(0,-200,100);
            plane(200, 200);
            pop();
            
            // CHECK IF THE PAINTING HAS BEEN CKICKED
            if (paintClicked === false)
            {
                // Metal frame
                push();
                translate(-420, -40, 270);
                rotateY(HALF_PI);
                texture(metalFrame);
                plane(110, 110);
                pop();
                
                // scary
                push();
                translate(-419, -40, 271);
                rotateY(HALF_PI);
                texture(scary);
                plane(94, 88);
                pop();
            }
            
            // WHEN THE PAINTING IS CLICKED, IT FALLS OFF THE WALL 
            else
            {
                // METAL FRAME
                push();
                translate(-420, 170, 270);
                rotateY(HALF_PI);
                texture(metalFrame);
                plane(110, 110);
                pop();
                
                // SCARY PAINTING 
                push();
                translate(-419, 170, 271);
                rotateY(HALF_PI);
                texture(scary);
                plane(94, 88);
                pop();
                
                // MURDER TEXT ON WALL 
                push();
                translate(-419, -40, 271);
                rotateY(HALF_PI);
                texture(murder);
                plane(94, 88);
                pop();
            }
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // ZOOMED IN VIEW OF LAPTOP SCREEN
        if (deg == 360)
        {
            
            // DISPLAY A PASSWORD BOX ONLY WHEN ZOOMED IN ON THE LAPTOP
            if (count === 0)
            {
                setup();
                count += 1;
            }
            
            // WALL FOR ZOOMED IN LAPTOP VIEW
            push();
            texture(woodWall); 
            plane(width, height);
            pop();
            
            // BACK BUTTON 
            push();
            translate(0, height / 2);
            noStroke();
            fill(0);
            plane(width, 100);
            pop();
            
            // TEXT SAYING BACK 
            push();
            translate(0, height / 2);
            texture(back);
            plane(100, 100);
            pop();
            
            //ZOOMED LAPTOP SCREEN
            push();
            translate(0, 44, 0);
            texture(laptopScreenZoomed);
            plane(1100, 750);
            pop();
            
            //ZOOMED UI FOR LAPTOP
            push();
            translate(0,22, 0);
            texture(laptopScreen);
            plane(1075, 640);
            pop();
            
            // WHEN THE CORRECT PASSWORD IS ENTERED, UNLOCK THE DOOR AND DISPLAY DOOR UNLOCKED
            if (document.getElementById("password").value == 'murder')
            {
                $("#user_span5").html("<p> <font color='green'>Password Correct, Door Unlocked</font>");
                doorUnlocked = true;
                if (doorSound === 0)
                {
                    doorUnlocking.play();
                    doorSound += 1;
                }
            }
            //WHEN THE INCORRECT PASSWORD IS ENTERED, DISPLAY INCORRECT PASSWORD 
            else if (document.getElementById("password").value.length >= 6)
            {
                push();
                $("#user_span5").html("<p> <font color='red'>Password Incorrect</font>");
                pop();
            }
            else
            {
                push();
                $("#user_span5").html("<p> <font color='red'></font>");
                pop();
            }
            
            // BACK NAVIGATION FOR THE LAPTOP SCREEN ZOOMED VIEW 
            push();
            if (mouseY < height / 2 + 500 && mouseY > height / 2 + 420)
            {
                overBack = true;
            }
            else
            {
                overBack = false;
            }
            pop();
        }
    }
    
/////////////////////////////////////////////////////////////////////////////////      
//                                ROOM 3                                       //
/////////////////////////////////////////////////////////////////////////////////   
    
    if (roomOrder[roomCounter] == 3)
    {
        // RESET THE LIGHT 
        ambientLight(255);
        
        // OPENING VIEW OF ROOM 
        if (rad === 0)
        {
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(woodFloor);
            plane(width, height);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(flowerWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(flowerWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(flowerWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(whiteCeiling);
            plane(width, height);
            pop();
            
            // DOOR
            push();
            translate(-220, 38, 5);
            texture(blackDoor);
            plane(170, 297);
            pop();
            
            // BLUE BACKGROUND FOR THE WINDOW
            push();
            translate(50,0);
            texture(blueBackground);
            plane(270, 280);
            pop();
            
            // WINDOW
            push();
            translate(50,0);
            texture(nineWindow);
            plane(300, 300);
            pop();
            
            // WALL LIGHT LEFT 
            push();
            translate(-540, -100, 40);
            rotateY(PI - 5);
            texture(wallLight);
            plane(190, 160);
            pop();
            
            // WALL LIGHT RIGHT
            push();
            translate(540, -100, 40);
            rotateY(PI + 5);
            texture(wallLight);
            plane(190, 160);
            pop();
            
            // CLUE FOR SENTENCE
            push();
            translate(-305, 0, 246);
            rotateY(HALF_PI);
            texture(room3Clue);
            plane(180, 170);
            pop();
            
            //METALFRAME
            push();
            translate(-305, 0, 248);
            rotateY(HALF_PI);
            texture(metalFrame);
            plane(200, 200);
            pop();
            
            // CLICK ON WINDOW TO ZOOM IN COORDINATES
            push();
            if (mouseX > width * 0.445 && mouseX < width * 0.615 && mouseY < height / 2 + 150 && mouseY > height / 2 - 155)
            {
                overObject = true;
            }
            else
            {
                overObject = false;
            }
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            //RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
            
            // CLICK COORDINATES FOR THE DOOR WHEN OPENED TO ADVANCE TO THE NEXT ROOM 
            if (mouseX > width * 0.32 && mouseX < width * 0.411 && mouseY < height / 2 + 200 && mouseY > height / 2 - 200 && doorUnlocked === true)
            {
                openDoor = true;
            }
        }
        
        // LEFT VIEW OF ROOM 
        if (rad == 3 * PI / 2)
        {
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(woodFloor);
            plane(height, width);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(flowerWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(flowerWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(flowerWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(whiteCeiling);
            plane(width, height);
            pop();
            
            // DOOR 
            push();
            translate(368, 45, 115);
            rotateY(PI * 3 / 2);
            texture(blackDoor);
            plane(160, 297);
            pop();
            
            // BLUE BACKGROUND FOR THE WINDOW 
            push();
            translate(500, 0, 150);
            rotateY(PI * 3 / 2);
            texture(blueBackground);
            plane(270, 280);
            pop();
            
            // WINDOW
            push();
            translate(499, 0, 150);
            rotateY(PI * 3 / 2);
            texture(nineWindow);
            plane(300, 300);
            pop();
            
            // WALL LIGHT
            push();
            translate(5, -80, 40);
            texture(wallLight);
            plane(150, 120);
            pop();
            
            // BED FRAME
            push();
            translate(-150, 120, 430);
            rotateX(PI);
            rotateY(260);
            texture(brown);
            noStroke();
            model(bed);
            pop();
            
            // CLUE FOR SENTENCE
            push();
            translate(170, 0, 100);
            texture(room3Clue);
            plane(180, 170);
            pop();
            
            //METALFRAME
            push();
            translate(170, 0, 101);
            texture(metalFrame);
            plane(200, 200);
            pop();
            
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // RIGHT VIEW OF ROOM  
        if (rad == PI / 2)
        {
            //FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(woodFloor);
            plane(height, width);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(flowerWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(flowerWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(flowerWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(whiteCeiling);
            plane(width, height);
            pop();
            
            // DOOR
            push();
            translate(-520, 65, 350);
            rotateY(HALF_PI);
            texture(blackDoor);
            plane(160, 410);
            pop();
            
            // BLUE BACKGROUND FOR THE WINDOW
            push();
            translate(-480, 0, 150);
            rotateY(HALF_PI);
            texture(blueBackground);
            plane(270, 280);
            pop();
            
            // WINDOW
            push();
            translate(-479, 0, 150);
            rotateY(HALF_PI);
            texture(nineWindow);
            plane(300, 300);
            pop();
            
            // WALL LIGHT
            push();
            translate(5, -80, 40);
            texture(wallLight);
            plane(150, 120);
            pop();
            
            // BED FRAME
            push();
            translate(150, 120, 400);
            rotateX(PI);
            rotateY(10);
            texture(brown);
            noStroke();
            model(bed);
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // BEHIND VIEW OF ROOM 
        if (rad == PI)
        {
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(woodFloor);
            plane(width, height);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(flowerWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(flowerWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(flowerWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(whiteCeiling);
            plane(width, height);
            pop();
            
            // WALL LIGHT
            push();
            translate(-540, -100, 40);
            rotateY(PI - 5);
            texture(wallLight);
            plane(190, 160);
            pop();
            
            // WALL LIGHT
            push();
            translate(540, -100, 40);
            rotateY(PI + 5);
            texture(wallLight);
            plane(190, 160);
            pop();
            
            // BED FRAME
            push();
            translate(0, 90, 400);
            rotateX(PI);
            rotateY(20);
            texture(brown);
            noStroke();
            model(bed);
            pop();
            
            // CLUE FOR SENTENCE
            push();
            translate(462, 0, 286);
            rotateY(PI * 3 / 2);
            texture(room3Clue);
            plane(180, 170);
            pop();
            
            //METALFRAME
            push();
            translate(462, 0, 288);
            rotateY(PI * 3 / 2);
            texture(metalFrame);
            plane(200, 200);
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // ZOOMED VIEW OF THE WINDOW
        if (deg == 360)
        {
            // WALL BEHIND WINDOW 
            push();
            texture(flowerWall); 
            plane(width, height);
            pop();
            
            // WINDOW
            push();
            translate(0,-25,5);
            texture(nineWindow);
            plane(950, 880);
            pop();
            
            // BACK BUTTON 
            push();
            translate(0, height / 2);
            noStroke();
            fill(0);
            plane(width, 100);
            pop();
            
            // TEXT SAYING BACK ON BACK BUTTON 
            push();
            translate(0, height / 2);
            texture(back);
            plane(100, 100);
            pop();
            
            // WHEN ALL THE WINDOWS ARE IN THE CORRECT ORDER, UNLOCK THE DOOR AND DISPLAY DOOR UNLOCKED
            if (topLeft == 4 && topMiddle == 7 && topRight == 2 && middleLeft == 1 && middle == 5 && middleRight == 8 && bottomLeft == 3 && bottomMiddle == 6 && bottomRight === 0)
            {
                $("#user_span5").html("<p> <font color='green'>Correct Sentence, Door Unlocked</font>");
                doorUnlocked = true;
                if (doorSound === 0)
                {
                    doorUnlocking.play();
                    doorSound += 1;
                }
                
            }
            
            // TOP LEFT WINDOW
            push();
            translate(-237, -262, 5);
            texture(words[topLeft]);
            plane(213, 208);
            pop();
            
            // TOP MIDDLE WINDOW
            push();
            translate(-2, -262, 5);
            texture(words[topMiddle]);
            plane(217, 208);
            pop();
            
            // TOP RIGHT WINDOW
            push();
            translate(233, -262, 5);
            texture(words[topRight]);
            plane(213, 208);
            pop();
            
           // MIDDLE LEFT WINDOW
            push();
            translate(-237, -37, 5);
            texture(words[middleLeft]);
            plane(213, 210);
            pop();
            
            // MIDDLE WINDOW
            push();
            translate(-2, -37, 5);
            texture(words[middle]);
            plane(217, 210);
            pop();
            
            // MIDDLE RIGHT WINDOW
            push();
            translate(233, -37, 5);
            texture(words[middleRight]);
            plane(213, 210);
            pop();
            
            // BOTTOM LEFT WINDOW
            push();
            translate(-237, 187, 5);
            texture(words[bottomLeft]);
            plane(213, 210);
            pop();
            
            // BOTTOM MIDDLE WINDOW
            push();
            translate(-2, 187, 5);
            texture(words[bottomMiddle]);
            plane(217, 210);
            pop();
            
            // BOTTOM RIGHT WINDOW
            push();
            translate(233, 187, 5);
            texture(words[bottomRight]);
            plane(213, 210);
            pop();
            
           // CHAGING THE WORD ON THE WINDOWS WHEN THEY ARE CLICKED
            
            //TOP LEFT WINDOW COORDINATES
            push();
            if (mouseX > width * 0.293 && mouseX < width * 0.4225 && mouseY < height / 2 - 156 && mouseY > height / 2 - 370)
            {
                keyOne = true;
            }
            else
            {
                keyOne = false;
            }
            pop();
            
            //TOP MIDDLE WINDOW COORDINATES
            push();
            if (mouseX > width * 0.433 && mouseX < width * 0.564 && mouseY < height / 2 - 156 && mouseY > height / 2 - 370)
            {
                keyTwo = true;
            }
            else
            {
                keyTwo = false;
            }
            pop();
            
            //TOP RIGHT WINDOW COORDINATES
            push();
            if (mouseX > width * 0.575 && mouseX < width * 0.703 && mouseY < height / 2 - 156 && mouseY > height / 2 - 370)
            {
                keyThree = true;
            }
            else
            {
                keyThree = false;
            }
            pop();
            
            //MIDDLE LEFT WINDOW COORDINATES
            push();
            if (mouseX > width * 0.293 && mouseX < width * 0.4225 && mouseY < height / 2 + 70 && mouseY > height / 2 - 144) 
            {
                keyFour = true;
            }
            else
            {
                keyFour = false;
            }
            pop();
            
            //MIDDLE WINDOW COORDINATES
            push();
            if (mouseX > width * 0.433 && mouseX < width * 0.564 && mouseY < height / 2 + 70 && mouseY > height / 2 - 144)
            {
                keyFive = true;
            }
            else
            {
                keyFive = false;
            }
            pop();
            
            //MIDDLE RIGHT WINDOW COORDINATES
            push();
            if (mouseX > width * 0.575 && mouseX < width * 0.703 && mouseY < height / 2 + 70 && mouseY > height / 2 - 144)
            {
                keySix = true;
            }
            else
            {
                keySix = false;
            }
            pop();
            
            //BOTTOM LEFT WINDOW COORDINATES
            push();
            if (mouseX > width * 0.293 && mouseX < width * 0.4225 && mouseY < height / 2 + 294 && mouseY > height / 2 + 82)
            {
                keySeven = true;
            }
            else
            {
                keySeven = false;
            }
            pop();
            
            //BOTTOM MIDDLE WINDOW COORDINATES
            push();
            if (mouseX > width * 0.433 && mouseX < width * 0.564 && mouseY < height / 2 + 294 && mouseY > height / 2 + 82)
            {
                keyEight = true;
            }
            else
            {
                keyEight = false;
            }
            pop();
            
            //BOTTOM RIGHT WINDOW COORDINATES
            push();
            if (mouseX > width * 0.575 && mouseX < width * 0.703 && mouseY < height / 2 + 294 && mouseY > height / 2 + 82)
            {
                keyNine = true;
            }
            else
            {
                keyNine = false;
            }
            pop();
            
            // BACK NAVIGATION FOR BACKING AWAY FROM WINDOW
            push();
            if (mouseY < height / 2 + 500 && mouseY > height / 2 + 420)
            {
                overBack = true;
            }
            else
            {
                overBack = false;
            }
            pop();
        }
    }
    
/////////////////////////////////////////////////////////////////////////////////      
//                                ROOM 4                                       //
/////////////////////////////////////////////////////////////////////////////////
    
    if (roomOrder[roomCounter] == 4)
    {
        // RESET THE LIGHT 
        ambientLight(200);
        
        // OPENING VIEW OF ROOM 
        if (rad === 0)
        {
            $("#user_span3").html("");
            $("#user_span5").html("");
            
            // RESET PIANO KEYS CLICKED
            pianoClickOrder = '';
            
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(scratchedFloor);
            plane(width, height);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(paintSplat);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(paintSplat);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(paintSplat);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(blackCrackedCeiling);
            plane(width, height);
            pop();
            
            // DOOR
            push();
            translate(-220, 38, 5);
            texture(woodDoor);
            plane(180, 300);
            pop();
            
            // PAINO
            push();
            translate(70, 70, 50);
            texture(piano);
            plane(350, 280);
            pop();
            
            // PIANO STOOL 
            push();
            translate(50, 70, 420);
            rotateY(HALF_PI);
            rotateX(PI);
            texture(whiteLeather);
            model(pianoStool);
            pop();
            
            // PAINTING
            push();
            translate(-370, 0, 100);
            rotateY(HALF_PI);
            texture(painting);
            plane(100, 120);
            pop();
            
            // METAL FRAME
            push();
            translate(300, -40, 300);
            rotateY(HALF_PI);
            texture(metalFrame);
            plane(100, 100);
            pop();
            
            // SCARY PAINTING
            push();
            translate(299, -40, 301);
            rotateY(PI * 3 / 2);
            texture(scary);
            plane(88, 88);
            pop();
            
            // CLICK COORDINATES FOR ZOOMING IN ON THE PIANO
            push();
            if (mouseX > width * 0.43 && mouseX < width * 0.655 && mouseY < height / 2 + 200 && mouseY > height / 2 - 76)
            {
                overObject = true;
            }
            else
            {
                overObject = false;
            }
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
            
            // CLICK COORDINATES FOR UNLOCKED DOOR
            if (mouseX > width * 0.32 && mouseX < width * 0.411 && mouseY < height / 2 + 200 && mouseY > height / 2 - 200 && doorUnlocked === true)
            {
                openDoor = true;
            }
        }
        
        // LEFT VIEW OF ROOM
        if (rad == 3 * PI / 2)
        {
            // RESET PIANO KEYS CLICKED
            pianoClickOrder = '';
            
            // FLOOR 
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(scratchedFloor);
            plane(height, width);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(paintSplat);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(paintSplat);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(paintSplat);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(blackCrackedCeiling);
            plane(width, height);
            pop();
            
            // DOOR
            push();
            translate(368, 40, 115);
            rotateY(PI * 3 / 2);
            texture(woodDoor);
            plane(200, 310);
            pop();
            
            // PIANO 
            push();
            translate(475, 140, 200);
            rotateY(PI * 3 / 2);
            texture(piano);
            plane(350, 280);
            pop();
            
            // PIANO STOOL
            push();
            translate(290 , 150, 420);
            rotateX(PI);
            texture(whiteLeather);
            model(pianoStool);
            pop();
            
            // PIANO KEYS SOLUTION
            push();
            translate(-450, 0, 200);
            rotateY(-30);
            texture(pianoKeysSolution);
            plane(350, 200);
            pop();
            
            // PAINTING 
            push();
            translate(170, 0);
            texture(painting);
            plane(100, 120);
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // RIGHT VIEW OF ROOM 
        if (rad == PI / 2)
        {
            // RESET PIANO KEYS CLICKED
            pianoClickOrder = '';
            
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(scratchedFloor);
            plane(height, width);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(paintSplat);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(paintSplat);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(paintSplat);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(blackCrackedCeiling);
            plane(width, height);
            pop();
            
            // DOOR 
            push();
            translate(-530, 60, 350);
            rotateY(HALF_PI);
            texture(woodDoor);
            plane(260, 430);
            pop();
            
            // PIANO
            push();
            translate(-390, 110, 180);
            rotateY(HALF_PI);
            texture(piano);
            plane(350, 280);
            pop();
            
            // PIANO STOOL
            push();
            translate(-240 , 130, 400);
            rotateX(PI);
            texture(whiteLeather);
            model(pianoStool);
            pop();
            
            // PIANO KEYS SOLUTION
            push();
            translate(450, 0, 200);
            rotateY(30);
            texture(pianoKeysSolution);
            plane(350, 200);
            pop();
            
            // METAL FRAME
            push();
            translate(-180, -40, 50);
            texture(metalFrame);
            plane(110, 110);
            pop();
            
            // SCARY PAINTING
            push();
            translate(-181, -40, 51);
            texture(scary);
            plane(95, 95);
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // BEHIND VIEW OF ROOM 
        if (rad == PI)
        {
            // RESET PIANO KEYS CLICKED
            pianoClickOrder = '';
            
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(scratchedFloor);
            plane(width, height);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(paintSplat);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(paintSplat);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(paintSplat);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(blackCrackedCeiling);
            plane(width, height);
            pop();
            
            // PIANO KEYS SOLUTION
            push();
            texture(pianoKeysSolution);
            plane(350, 200);
            pop();
            
            // PAINTING
            push();
            translate(420, 0, 420);
            rotateY(HALF_PI);
            texture(painting);
            plane(100, 120);
            pop();
            
            // Metal frame
            push();
            translate(-420, -40, 270);
            rotateY(HALF_PI);
            texture(metalFrame);
            plane(110, 110);
            pop();
            
            // scary
            push();
            translate(-419, -40, 271);
            rotateY(HALF_PI);
            texture(scary);
            plane(94, 88);
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // ZOOMED IN VIEW OF PIANO KEYS 
        if (deg == 360)
        {
            // BACKGROUND FOR PIANO KEYS 
            push();
            texture(scratchedFloor);
            plane(width, height);
            pop();
            
            // BLACK SURROUND FOR PIANO KEYS
            push();
            translate(0, -120);
            noStroke();
            fill(0);
            plane(width, height);
            pop();
            
            // PIANO KEYS
            push();
            texture(pianoKeys);
            plane(width / 1.5, height / 1.3);
            pop();
            
            // BACK NAVIGATION BAR 
            push();
            translate(0, height / 2);
            noStroke();
            fill(0);
            plane(width, 100);
            pop();
            
            // TEXT SAYING BACK ON THE BAR
            push();
            translate(0, height / 2);
            texture(back);
            plane(100, 100);
            pop();
            
            // ASK THE USER TO PLAY A SEQUENCE OF KEYS  
            if (pianoClickOrder.length <= 8)
            {
                $("#user_span5").html("<p> <font color='black'>Play The Correct Sequence Of 9 Notes</font>");
            }
            
            // CHECK IF THE CORRECT SEQUENCE WAS PLAYED, IF SO UNLOCK THE DOOR
            if (pianoClickOrder.length == 9)
            {
                if (pianoClickOrder == '123456789')
                {
                    $("#user_span5").html("<p> <font color='green'>Correct Sequence, Door Unlocked</font>");
                    doorUnlocked = true;
                    if (doorSound === 0)
                    {
                        doorUnlocking.play();
                        doorSound += 1;
                    }
                }
                
                // WRONG SEQUENCE PLAYED, DISPLAY INCORRECT SEQUENCE
                else
                {
                    $("#user_span5").html("<p> <font color='red'>Incorrect Sequence</font>");
                    setTimeout(timer, 1000);
                }
            }
            
            
            // ONE PIANO NOTE
            push();
            if (mouseX > width * 0.197 && mouseX < width * 0.23 && mouseY < height / 2 + 285 && mouseY > height / 2 + 70)
            {
                keyOne = true;
            }
            else
            {
                keyOne = false;
            }
            pop();
            
            // TWO PIANO NOTE
            push();
            if (mouseX > width * 0.39 && mouseX < width * 0.421 && mouseY < height / 2 + 285 && mouseY > height / 2 + 70)
            {
                keyTwo = true;
            }
            else
            {
                keyTwo = false;
            }
            pop();
            
            // THIRD PIANO NOTE
            push();
            if (mouseX > width * 0.58 && mouseX < width * 0.612 && mouseY < height / 2 + 285 && mouseY > height / 2 + 70)
            {
                keyThree = true;
            }
            else
            {
                keyThree = false;
            }
            pop();
            
            // FOUR PIANO NOTE
            push();
            if (mouseX > width * 0.294 && mouseX < width * 0.325 && mouseY < height / 2 + 285 && mouseY > height / 2 + 70)
            {
                keyFour = true;
            }
            else
            {
                keyFour = false;
            }
            pop();
            
            // FIFTH PIANO NOTE
            push();
            if (mouseX > width * 0.452 && mouseX < width * 0.484 && mouseY < height / 2 + 285 && mouseY > height / 2 + 70)
            {
                keyFive = true;
            }
            else
            {
                keyFive = false;
            }
            pop();
            
            // SIXTH PIANO NOTE
            push();
            if (mouseX > width * 0.738 && mouseX < width * 0.77 && mouseY < height / 2 + 285 && mouseY > height / 2 + 70)
            {
                keySix = true;
            }
            else
            {
                keySix = false;
            }
            pop();
            
            // SEVEN PIANO NOTE
            push();
            if (mouseX > width * 0.263 && mouseX < width * 0.293 && mouseY < height / 2 + 285 && mouseY > height / 2 + 70)
            {
                keySeven = true;
            }
            else
            {
                keySeven = false;
            }
            pop();
            
            // EIGHT PIANO NOTE
            push();
            if (mouseX > width * 0.675 && mouseX < width * 0.708 && mouseY < height / 2 + 285 && mouseY > height / 2 + 70)
            {
                keyEight = true;
            }
            else
            {
                keyEight = false;
            }
            pop();
            
            // NINTH PIANO NOTE
            push();
            if (mouseX > width * 0.515 && mouseX < width * 0.548 && mouseY < height / 2 + 285 && mouseY > height / 2 + 70)
            {
                keyNine = true;
            }
            else
            {
                keyNine = false;
            }
            pop();
            
            // BACK NAVIGATION TO BACK AWAY FROM PIANO
            push();
            if (mouseY < height / 2 + 500 && mouseY > height / 2 + 420)
            {
                overBack = true;
            }
            else
            {
                overBack = false;
            }
            pop();
            
        }
    }
    
/////////////////////////////////////////////////////////////////////////////////      
//                                ROOM 5                                       //
/////////////////////////////////////////////////////////////////////////////////
    if (roomOrder[roomCounter] == 5)
    {
        ambientLight(220);
        
        // OPENING VIEW OF ROOM 
        if (rad === 0)
        {
            $("#user_span3").html("");
            $("#user_span5").html("");
            
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(steelFloor);
            plane(width, height);
            pop();
            
            // LEFT WALL
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(goldWoodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(goldWoodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(goldWoodWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(woodCeiling);
            plane(width, height);
            pop();
            
            // DOOR
            push();
            translate(-210, 29, 5);
            texture(blueDoor);
            plane(180, 310);
            pop();
            
            // 12
            push();
            translate(450, 0, 200);
            rotateY(PI * 3 / 2);
            texture(twelve);
            plane(100, 100);
            pop();
            
            // 3
            push();
            translate(-450, 0, 200);
            rotateY(PI / 2);
            texture(three);
            plane(100, 100);
            pop();
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
            
            // COORDINATES FOR THE DOOR WHEN ITS UNLOCKED TO ADVANCE TO THE NEXT ROOM 
            if (mouseX > width * 0.32 && mouseX < width * 0.411 && mouseY < height / 2 + 200 && mouseY > height / 2 - 200 && doorUnlocked === true)
            {
                openDoor = true;
            }
        }
        
        // LEFT VIEW OF ROOM 
        if (rad == 3 * PI / 2)
        {
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(steelFloor);
            plane(height, width);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(goldWoodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(goldWoodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(goldWoodWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(woodCeiling);
            plane(width, height);
            pop();
            
            // DOOR 
            push();
            translate(375, 37, 115);
            rotateY(PI * 3 / 2);
            texture(blueDoor);
            plane(200, 310);
            pop();
            
            // 3
            push();
            translate(0, 0, 200);
            texture(three);
            plane(100, 100);
            pop();
            
            // CLOCK 1 
            push();
            translate(-500, 0, 300);
            rotateY(PI / 2);
            texture(clock);
            plane(200,120);
            pop();
            
            // RESET CLOCK HAND TO ORIGINAL POSITION AFTER 4 TURNS 
            if (hand1 > 3)
            {
                hand1 = 0;
            }
            
            // CLOCK HAND 1 POINTING DOWN 
            if (hand1 === 0)
            {
                push();
                translate(-500, 0, 300);
                rotateY(PI / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 90 DEG CLOCKWISE
            else if (hand1 == 1)
            {
                push();
                translate(-500, 0, 300);
                rotateY(PI / 2);
                rotateZ(HALF_PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 90 DEG CLOCKWISE
            else if (hand1 == 2)
            {
                push();
                translate(-500, 0, 300);
                rotateY(PI / 2);
                rotateZ(PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 90 DEG CLOCKWISE
            else
            {
                push();
                translate(-500, 0, 300);
                rotateY(PI / 2);
                rotateZ(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // CLOCK 2 
            push();
            translate(-450, 0, 200);
            rotateY(PI / 2);
            texture(clock);
            plane(200,120);
            pop();
            
            // RESET CLOCK HAND TO ORIGINAL POSITIN AFTER 4 TURNS 
            if (hand2 > 3)
            {
                hand2 = 0;
            }
            
            // CLOCK HAND 2 PINTING DOWN 
            if (hand2 === 0)
            {
                push();
                translate(-450, 0, 200);
                rotateY(PI / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 2 90 DEG CLOCKWISE
            else if (hand2 == 1)
            {
                push();
                translate(-449, 0, 200);
                rotateY(PI / 2);
                rotateZ(HALF_PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 2 90 DEG CLOCKWISE
            else if (hand2 == 2)
            {
                push();
                translate(-450, 0, 200);
                rotateY(PI / 2);
                rotateZ(PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 2 90 DEG CLOCKWISE
            else
            {
                push();
                translate(-449, 0, 200);
                rotateY(PI / 2);
                rotateZ(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // CLOCK 3
            push();
            translate(-370, 0, 120);
            rotateY(PI / 2);
            texture(clock);
            plane(200,120);
            pop();
            
            
            // RESET THE CLOCK HAND AFTER 4 TURNS 
            if (hand3 > 3)
            {
                hand3 = 0;
            }
            
            //
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            if (hand3 === 0)
            {
                push();
                translate(-370, 0, 120);
                rotateY(PI / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            else if (hand3 == 1)
            {
                push();
                translate(-370, 0, 120);
                rotateY(PI / 2);
                rotateZ(HALF_PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            else if (hand3 == 2)
            {
                push();
                translate(-370, 0, 120);
                rotateY(PI / 2);
                rotateZ(PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            else
            {
                push();
                translate(-370, 0, 120);
                rotateY(PI / 2);
                rotateZ(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // RIGHT VIEW OF ROOM 
        if (rad == PI / 2)
        {
            // FLOOR 
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            rotateZ(HALF_PI);
            texture(steelFloor);
            plane(height, width);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(goldWoodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(goldWoodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(goldWoodWall);
            plane(722, 355);
            pop();
            
            // CEILING 
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(woodCeiling);
            plane(width, height);
            pop();
            
            // DOOR
            push();
            translate(-530, 57, 350);
            rotateY(HALF_PI);
            texture(blueDoor);
            plane(260, 430);
            pop();
            
            // 12
            push();
            translate(0, 0, 200);
            texture(twelve);
            plane(100, 100);
            pop();
            
            // CLOCK 1 
            push();
            translate(380, 0, 100);
            rotateY(PI * 3 / 2);
            texture(clock);
            plane(200,120);
            pop();
            
            // RESET CLOCK HAND TO ORIGINAL POSITION AFTER 4 TURNS 
            if (hand1 > 3)
            {
                hand1 = 0;
            }
            
            // CLOCK HAND 1 POINTING DOWN 
            if (hand1 === 0)
            {
                push();
                translate(380, 0, 100);
                rotateY(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 90 DEG CLOCKWISE
            else if (hand1 == 1)
            {
                push();
                translate(380, 0, 100);
                rotateY(PI * 3 / 2);
                rotateZ(HALF_PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 90 DEG CLOCKWISE
            else if (hand1 == 2)
            {
                push();
                translate(380, 0, 100);
                rotateY(PI * 3 / 2);
                rotateZ(PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 90 DEG CLOCKWISE
            else
            {
                push();
                translate(380, 0, 100);
                rotateY(PI * 3 / 2);
                rotateZ(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // CLOCK 2 
            push();
            translate(450, 0, 200);
            rotateY(PI * 3 / 2);
            texture(clock);
            plane(200,120);
            pop();
            
            // RESET CLOCK HAND TO ORIGINAL POSITIN AFTER 4 TURNS 
            if (hand2 > 3)
            {
                hand2 = 0;
            }
            
            // CLOCK HAND 2 PINTING DOWN 
            if (hand2 === 0)
            {
                push();
                translate(450, 0, 200);
                rotateY(PI / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 2 90 DEG CLOCKWISE
            else if (hand2 == 1)
            {
                push();
                translate(449, 0, 200);
                rotateY(PI * 3 / 2);
                rotateZ(HALF_PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 2 90 DEG CLOCKWISE
            else if (hand2 == 2)
            {
                push();
                translate(450, 0, 200);
                rotateY(PI / 2);
                rotateZ(PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 2 90 DEG CLOCKWISE
            else
            {
                push();
                translate(449, 0, 200);
                rotateY(PI * 3 / 2);
                rotateZ(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // CLOCK 3
            push();
            translate(500, 0, 300);
            rotateY(PI * 3 / 2);
            texture(clock);
            plane(200,120);
            pop();
            
            
            // RESET THE CLOCK HAND AFTER 4 TURNS 
            if (hand3 > 3)
            {
                hand3 = 0;
            }
            
            //
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            if (hand3 === 0)
            {
                push();
                translate(500, 0, 300);
                rotateY(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            else if (hand3 == 1)
            {
                push();
                translate(500, 0, 300);
                rotateY(PI * 3 / 2);
                rotateZ(HALF_PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            else if (hand3 == 2)
            {
                push();
                translate(500, 0, 300);
                rotateY(PI * 3 / 2);
                rotateZ(PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            else
            {
                push();
                translate(500, 0, 300);
                rotateY(PI * 3 / 2);
                rotateZ(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////

            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
        
        // BEHIND VIEW OF ROOM 
        if (rad == PI)
        {
            // FLOOR
            push();
            translate(0, 280);
            rotateX(HALF_PI);
            texture(steelFloor);
            plane(width, height);
            pop();
            
            // LEFT WALL 
            push();
            translate(-570, 0);
            rotateY(HALF_PI);
            normalMaterial();
            texture(goldWoodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // RIGHT WALL 
            push();
            translate(570, 0);
            rotateY(HALF_PI);
            texture(goldWoodWall);
            plane(width * 0.75, height * 0.75);
            pop();
            
            // BACK WALL 
            push();
            texture(goldWoodWall);
            plane(722, 355);
            pop();
            
            // CEILING
            push();
            translate(0, -280);
            rotateX(HALF_PI);
            texture(woodCeiling);
            plane(width, height);
            pop();
            
            // 12
            push();
            translate(-450, 0, 200);
            rotateY(PI / 2);
            texture(twelve);
            plane(100, 100);
            pop();
            
            // 3
            push();
            translate(450, 0, 200);
            rotateY(PI * 3 / 2);
            texture(three);
            plane(100, 100);
            pop();
            
            // CLICK COORDINATES FOR THE LEFT CLOCK
            push();
            if (mouseX > width * 0.345 && mouseX < width * 0.41 && mouseY < height / 2 + 50 && mouseY > height / 2 - 50)
            {
                overClock1 = true;
            }
            else
            {
                overClock1 = false;
            }
            pop();
            
            // CLOCK 1 
            push();
            translate(-200, 0);
            texture(clock);
            plane(200,120);
            pop();
            
            // RESET CLOCK HAND TO ORIGINAL POSITION AFTER 4 TURNS 
            if (hand1 > 3)
            {
                hand1 = 0;
            }
            
            // CLOCK HAND 1 POINTING DOWN 
            if (hand1 === 0)
            {
                push();
                translate(-200, 0);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 90 DEG CLOCKWISE
            else if (hand1 == 1)
            {
                push();
                translate(-200, 0);
                rotateZ(HALF_PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 90 DEG CLOCKWISE
            else if (hand1 == 2)
            {
                push();
                translate(-200, 0);
                rotateZ(PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 90 DEG CLOCKWISE
            else
            {
                push();
                translate(-200, 0);
                rotateZ(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // CLICK COORDINATES FOR THE MIDDLE CLOCK  
            push();
            if (mouseX > width * 0.472 && mouseX < width * 0.53 && mouseY < height / 2 + 50 && mouseY > height / 2 - 50)
            {
                overClock2 = true;
            }
            else
            {
                overClock2 = false;
            }
            pop();
            
            // CLOCK 2 
            push();
            translate(0, 0);
            texture(clock);
            plane(200,120);
            pop();
            
            // RESET CLOCK HAND TO ORIGINAL POSITIN AFTER 4 TURNS 
            if (hand2 > 3)
            {
                hand2 = 0;
            }
            
            // CLOCK HAND 2 PINTING DOWN 
            if (hand2 === 0)
            {
                push();
                translate(0, 0);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 2 90 DEG CLOCKWISE
            else if (hand2 == 1)
            {
                push();
                translate(0, 0);
                rotateZ(HALF_PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 2 90 DEG CLOCKWISE
            else if (hand2 == 2)
            {
                push();
                translate(0, 0);
                rotateZ(PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 2 90 DEG CLOCKWISE
            else
            {
                push();
                translate(0, 0);
                rotateZ(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // CLICK COORDINATES FOR THE RIGHT CLOCK 
            push();
            if (mouseX > width * 0.585 && mouseX < width * 0.655 && mouseY < height / 2 + 50 && mouseY > height / 2 - 50)
            {
                overClock3 = true;
            }
            else
            {
                overClock3 = false;
            }
            pop();
            
            // CLOCK 3
            push();
            translate(200, 0);
            texture(clock);
            plane(200,120);
            pop();
            
            
            // RESET THE CLOCK HAND AFTER 4 TURNS 
            if (hand3 > 3)
            {
                hand3 = 0;
            }
            
            //
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            if (hand3 === 0)
            {
                push();
                translate(200, 0);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            else if (hand3 == 1)
            {
                push();
                translate(200, 0);
                rotateZ(HALF_PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            else if (hand3 == 2)
            {
                push();
                translate(200, 0);
                rotateZ(PI);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // ROTATE THE CLOCK HAND 3 90 DEG CLOCKWISE
            else
            {
                push();
                translate(200, 0);
                rotateZ(PI * 3 / 2);
                texture(clockHand);
                plane(180,100);
                pop();
            }
            
            // CHECK IF ALL THE CLOCK HANDS ARE IN THE CORRECT ORIENTATION, IF SO, UNLOCK THE DOOR AND DISPLAY DOOR UNLOCKED
            if (hand1 == 2 && hand2 === 1 && hand3 == 3)
            {
                $("#user_span5").html("<p> <font color='green'>Correct Sequence, Door Unlocked</font>");
                doorUnlocked = true;
                if (doorSound === 0)
                {
                    doorUnlocking.play();
                    doorSound += 1;
                }
            }
            
////////////////////////// LEFT AND RIGHT NAVIAGATION ///////////////////////////
            
            // LEFT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.064 && mouseX < width * 0.08 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleL = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleL = false;
            }
            triangle(-width * 0.275, 0, -width * 0.265, -10, -width * 0.265, 10);
            pop();
            
            // RIGHT NAVIGATION 
            push();
            translate(0, 0, 300);
            if (mouseX > width * 0.92 && mouseX < width * 0.936 && mouseY < height / 2 + 20 && mouseY > height / 2 - 20)
            {
                overTriangleR = true;
                fill(255, 165, 0);
            }
            else
            {
                fill(255);
                overTriangleR = false;
            }
            triangle(width * 0.275, 0, width * 0.265, -10, width * 0.265, 10);
            pop();
        }
    }
    
/////////////////////////////////////////////////////////////////////////////////      
//                             GAME OVER                                       //
/////////////////////////////////////////////////////////////////////////////////    
    if (roomCounter >= roomOrder.length)
    {
        $("#user_span5").html("<p> <font color='green'>Congratulations, You Have Escaped</font>");
    }
    
}



////////////////////////////// FUNCTIONS ///////////////////////////////////////

function mousePressed()
{
    //MOVING LEFT
    if (overTriangleL === true)
    {
        deg += 270;
        if (deg >= 360)
        {
            deg -= 360;
        }
        count = 0;
        
    }
    //MOVING RIGHT
    if (overTriangleR === true)
    {
        deg += 90;
        if (deg >= 360)
        {
            deg -= 360;
        }
        count = 0;
    }
    
    // LIGHT SWITCH ON AND OFF
    if (overLight === true && deg === 0)
    {
        light = !light;
        lightSound.play();
    }
    
    // ZOOMING ON OBJECTS
    if (overObject === true && deg === 0)
    {
        deg = 360;
    }
    
    // BACK AWAY FROM OBJECTS
    if (overBack === true)
    {
        deg = 0;
        overBack = false;
        if (doorUnlocked === false)
        {
            code = "";
        }
        count = 0;
    }
    
    // NUMBER ONE ON KEYPAD
    if (keyOne === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '1';
        }
        
        // CHANGE TOP LEFT WINDOW ROOM 3
        else if (roomOrder[roomCounter] == 3)
        {
            topLeft += 1;
            if (topLeft >= 9)
            {
                topLeft = 0;
            }
        }
        
        // PLAY PIANO SOUND ROOM 4
        else if (roomOrder[roomCounter] == 4)
        {
            pianoE.play();
            pianoClickOrder += '1';
        }
    }
    
    // NUMBER 2 ON KEYPAD ROOM 1
    if (keyTwo === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '2';
        }
        
        // CHANGE TOP MIDDLE WINDOW ROOM 3
        else if (roomOrder[roomCounter] == 3)
        {
            topMiddle += 1;
            if (topMiddle >= 9)
            {
                topMiddle = 0;
            }
        }
        
        // PLAY PIANO SOUND ROOM 4
        else if (roomOrder[roomCounter] == 4)
        {
            pianoEb.play();
            pianoClickOrder += '2';
        }
    }
    
    // NUMBER 3 ON KEYPAD ROOM 1
    if (keyThree === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '3';
        }
        
        // CHANGE TOP RIGHT WINDOW ROOM 3
        else if (roomOrder[roomCounter] == 3)
        {
            topRight += 1;
            if (topRight >= 9)
            {
                topRight = 0;
            }
        }
        
        // PLAY PIANO SOUND ROOM 4
        else if (roomOrder[roomCounter] == 4)
        {
            pianoE.play();
            pianoClickOrder += '3';
        }

    }
    
    // NUMBER 4 ON KEYPAD ROOM 1
    if (keyFour === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '4';
        }
        
        // CHANGE MIDDLE LEFT WINDOW ROOM 3
        else if (roomOrder[roomCounter] == 3)
        {
            middleLeft += 1;
            if (middleLeft >= 9)
            {
                middleLeft = 0;
            }
        }
        
        // PLAY PIANO SOUND ROOM 4
        else if (roomOrder[roomCounter] == 4)
        {
            pianoEb.play();
            pianoClickOrder += '4';
        }
    }
    
    // NUMBER 5 ON KEYPAD ROOM 1
    if (keyFive === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '5';
        }
        
        // CHANGE MIDDLE WINDOW ROOM 3
        else if (roomOrder[roomCounter] == 3)
        {
            middle += 1;
            if (middle >= 9)
            {
                middle = 0;
            }
        }
        
        // PLAY PIANO SOUND ROOM 4
        else if (roomOrder[roomCounter] == 4)
        {
            pianoE.play();
            pianoClickOrder += '5';
        }
    }
    
    // NUMBER 6 ON KEYPAD ROOM 1
    if (keySix === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '6';
        }
        
        // CHANGE MIDDLE RIGHT WINDOW ROOM 3
        else if (roomOrder[roomCounter] == 3)
        {
            middleRight += 1;
            if (middleRight >= 9)
            {
                middleRight = 0;
            }
        }
        
        // PLAY PIANO SOUND ROOM 4
        else if (roomOrder[roomCounter] == 4)
        {
            pianoB.play();
            pianoClickOrder += '6';
        }
    }
    
    // NUMBER 7 ON KEYPAD ROOM 1
    if (keySeven === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '7';
        }
        
        // CHANGE BOTTOM LEFT WINDOW ROOM 3
        else if (roomOrder[roomCounter] == 3)
        {
            bottomLeft += 1;
            if (bottomLeft >= 9)
            {
                bottomLeft = 0;
            }
        }
        
        // PLAY PIANO SOUND ROOM 4
        else if (roomOrder[roomCounter] == 4)
        {
            pianoD.play();
            pianoClickOrder += '7';
        }
    }
    
    // NUMBER 8 ON KEYPAD ROOM 1
    if (keyEight === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '8';
        }
        
        // CHANGE BOTTOM MIDDLE WINDOW ROOM 3
        else if (roomOrder[roomCounter] == 3)
        {
            bottomMiddle += 1;
            if (bottomMiddle >= 9)
            {
                bottomMiddle = 0;
            }
        }
        
        // PLAY PIANO SOUND ROOM 4
        else if (roomOrder[roomCounter] == 4)
        {
            pianoC.play();
            pianoClickOrder += '8';
        }
    }
    
    // NUMBER 9 ON KEYPAD ROOM 1
    if (keyNine === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '9';
        }
        
        // CHANGE BOTTOM RIGHT WINDOW ROOM 3
        else if (roomOrder[roomCounter] == 3)
        {
            bottomRight += 1;
            if (bottomRight >= 9)
            {
                bottomRight = 0;
            }
        }
        
        // PLAY PIANO SOUND ROOM 4
        else if (roomOrder[roomCounter] == 4)
        {
            pianoA.play();
            pianoClickOrder += '9';
        }
    }
    
    // NUMBER 0 ON KEYPAD ROOM 1
    if (keyZero === true)
    {
        if (roomOrder[roomCounter] == 1)
        {
            KeySound.play();
            code += '0';
        }
    }
    
    // OPENING THE DOORS
    if (openDoor === true)
    {
        roomCounter += 1;
        doorUnlocked = false;
        deg = 0;
        openDoor = false;
        ambientLight(220);
        doorSound = 0;
        // RESET SOUND TO PLAY ONCE IN EACH ROOM
        sounds = 0;
    }
    
    // MAKE PAINTING FALL OFF WALL ROOM 2
    if (overPainting === true)
    {
        paintClicked = true;
        paintingFalling.play();
    }
    
    // CHANGE CLOCK HAND ROOM 5
    if (overClock1 === true)
    {
        hand1 += 1;
    }
    
    // CHANGE CLOCK HAND ROOM 5
    if (overClock2 === true)
    {
        hand2 += 1;
    }
    
    // CHANGE CLOCK HAND ROOM 5
    if (overClock3 === true)
    {
        hand3 += 1;
    }
}

function keyPressed()
{
    //MOVING LEFT
    if (keyCode === LEFT_ARROW)
    {
        deg += 270;
        if (deg >= 360)
        {
            deg -= 360;
        }
        count = 0;
    }
    //MOVING RIGHT
    else if (keyCode === RIGHT_ARROW)
    {
        deg += 90;
        if (deg >= 360)
        {
            deg -= 360;
        }
        count = 0;
    }
    
    // BACKING AWAY FROM ZOOM AND RESET CODE
    if (keyCode === DOWN_ARROW && deg == 360)
    {
        deg = 0;
        overBack = false;
        keyOne = false;
        keyTwo = false;
        keyThree = false;
        keyFour = false;
        keyFive = false;
        keySix = false;
        keySeven = false;
        keyEight = false;
        keyNine = false;
        keyZero = false;
        count = 0;
    }
}

// TIMEOUT FOR RESETTING PUZZLES
function timer()
{
    code = "";
    pianoClickOrder = "";
}

//FUNCTION TO PLAY MUSIC IN CERTAIN ROOMS
function playMusic()
{
    if (roomOrder[roomCounter] == 1)
    {
        swingJazz.play();
        creepyMusic.stop();
        tick.stop();
    }
    
    if (roomOrder[roomCounter] == 2)
    {
        creepyMusic.play();
        swingJazz.stop();
        tick.stop();
    }
    
    if (roomOrder[roomCounter] == 3)
    {
        swingJazz.stop();
        creepyMusic.stop();
        tick.stop();
    }
    
    if (roomOrder[roomCounter] == 4)
    {
        swingJazz.stop();
        creepyMusic.stop();
        tick.stop();
    }
    
    if (roomOrder[roomCounter] == 5)
    {
        swingJazz.stop();
        creepyMusic.stop();
        tick.play();
    }
}


//////////////////////////// SAVE AND RESTORE ///////////////////////////////////

// CHECK IF THE USER IS RUNNING ON DESKTOP
if (AB.onDesktop())
{
    if (AB.runloggedin)
    {
        // Definitely can save, not sure if can restore:
        $("#user_span1").html ( " <button onclick='AB.saveData();' class='normbutton mybutton' >Save</button> " );
                
        // Check if any data exists, if so make restore button:
        makeRestoreButton();
    }
}

// EXECUTES AT RUNTIME
function World() 
{ 
    this.newRun = function()
    {
        AB.getAllData();
        
    };
        
    // VARIABLES TO BE SAVED FOR EACH USER
    this.saveData = function() 
    {
        saveData = [roomOrder, deg, roomCounter, light, paintClicked, topLeft, topMiddle, topRight, middleLeft, middle, middleRight, bottomLeft, bottomMiddle, bottomRight, hand1, hand2, hand3];
        makeRestoreButton();
        return (saveData);                    
    };
         
         
    // RESTORE DATA FROM SERVER RELATIVE TO THE USER  
    this.restoreData = function (saved)     // Process the object that was recovered from server
    {
        roomOrder = saved[0];
        deg = saved[1];
        roomCounter = saved[2];
        light = saved[3];
        paintClicked = saved[4];
        topLeft = saved[5]; 
        topMiddle = saved[6]; 
        topRight = saved[7]; 
        middleLeft = saved[8]; 
        middle = saved[9]; 
        middleRight = saved[10]; 
        bottomLeft = saved[11];
        bottomMiddle = saved[12]; 
        bottomRight = saved[13];
        hand1 = saved[14];
        hand2 = saved[15];
        hand3 = saved[16];
    };
    
    // CREATE NEW SPLASH SCREEN
    this.getAllData = function (a)          // process array returned from server  
    {
        AB.newSplash(); 
        
        // sort the array to get a sorted "human scoreboard"
        // the sort will be World specific 
        a.sort (mysort); 
        
        // build splash contents from the array   
        var html = makeSplash(a);
        
        // // replace splash contents 
        $("#splash-inner").html(html);
                
        $("#splashbutton").click (removeSplash);
        
        allData = a;         // global var - save it for later
    };
 
}

// MAKE RESTORE BUTTON
function makeRestoreButton()
{
    $("#user_span2").html ( " <button onclick='AB.restoreData();' class='normbutton mybutton' >Load</button> " );
}


//////////////////////////// SPLASH SCREEN //////////////////////////////////////


// MAKES NEW SPLASH SCREEN
function makeSplash (a)
{
    var html = "<div style='max-width:600px; text-align:left;'>" +
        "<h1>  Room Escape   <img width=50 src='/uploads/oconnj88/splashScreenImage.jpg'> </h1>  ";
 
        
        if ( AB.onDesktop() )
        {
            html = html + " <p> <b>Instructions:</b>  Navigate your way through the rooms by solving the puzzles </p> ";
            
            if (AB.runloggedin)
            {
                html = html + "<p> <b> Logged in: </b> " +  
                            // " <a href='https://ancientbrain.com/user.php?userid="+ AB.myuserid + "'>" + shortstring( AB.myusername ) + "</a>.  " +
                            " You are running  " +
                            " <a href='https://ancientbrain.com/how.runs.php#runloggedin'>\"logged in\"</a>. " +
                            "  You can save your work to the server. </p>";
            }
                    
            else
            {
                html = html + "<p style='background-color:#ffffcc;'> <b> Not logged in: </b> " +
                            " You are not running " +
                            " <a href='https://ancientbrain.com/how.runs.php#runloggedin'>\"logged in\"</a>. " +
                            " You cannot save your work to the server.   To run logged in, log in and run this from the World page. </p> "; 
            }
                    
        }
        
        else
        {
            html = html + " <p> <b> Warning:</b> This World only works fully on desktop. </p> ";
        }
            

        
    //  
        
    if ( a.length === 0 )  
    {
        html = html + "<p> <b> Start: </b> Start Room Escape   <button  style='vertical-align:text-bottom'  id=splashbutton class=normbutton >Start</button> </p>" +
                    "  <p> No user has saved any creations yet. </p>" ;
    }
    else 
    {
        html = html +  "<p> <b> Start: </b> Start   from scratch:   <button  style='vertical-align:text-bottom'  id=splashbutton class=normbutton >Start</button>    " +
                " Or load   creation of   previous user: </p>" +
                "<div class=horizontalscroll >" +
                "<table class=mytable style='background: rgba(238, 255, 255, 1.0);'     >" +
                "<TR> <TD class=headertd> User </td> <TD class=headertd> Rooms Completed </td><td class=headertd> Load creation </td></TR>";

        for ( var i = 0; i < a.length; i++ ) 
        {
          html = html + "<tr><td> <a href='https://ancientbrain.com/user.php?userid="+ a[i][0] + "'>" + shortstring( a[i][1] ) + "</a></td>" +
                    "<td>" + a[i][2][2] + "</td>" +
                    "<td> <button onclick='loadCreation(" + i + ");'  class=normbutton >Load</button> </td></tr>";
                    // "Load" button i will call function to load object i (we have saved a list of all objects in memory)
        }
    
        html = html + "</table></div>";
    }
        
    return ( html + "</div>" );
}

// REMOVE SPLASH SCREEN
function removeSplash()        
{               
    // touch/click on splash screen marks audio as good for JS to call without further human interaction  

        AB.removeSplash();                      // remove splash screen 
        splashClicked = true;
        drawReady = true;                  // start run loop
        draw();
}

// SHORTEN ANY LONG USERNAMES
function shortstring (str)
{
    return ( str.substring (0, 30) );        // first n characters of string 
}

// SORT USER DATA BY THE AMOUNT OF ROOMS THAT HAVE BEEN COMPLETED
function mysort (a,b) 
{
    var alen = a[2][2];
    var blen = b[2][2];
    if ( alen == blen ) return 0;
    if ( alen >  blen ) return -1;
    if ( alen <  blen ) return 1;
}

// LOAD ANOTHER USERS DATA
this.loadCreation = function (i)
{
    removeSplash();                 // now audio is ready 
    loadFromSplash(allData[i][2]);
};

// ASSIGN OTHER USERS DATA TO CURRENT USER
function loadFromSplash(userVariables)
{
    roomOrder = userVariables[0];
    deg = userVariables[1];
    roomCounter = userVariables[2];
    light = userVariables[3];
    paintClicked = userVariables[4];
    topLeft = userVariables[5]; 
    topMiddle = userVariables[6]; 
    topRight = userVariables[7]; 
    middleLeft = userVariables[8]; 
    middle = userVariables[9]; 
    middleRight = userVariables[10]; 
    bottomLeft = userVariables[11];
    bottomMiddle = userVariables[12]; 
    bottomRight = userVariables[13];
    hand1 = userVariables[14];
    hand2 = userVariables[15];
    hand3 = userVariables[16];
    playMusic();
}