%img.thumbnail{:src => 'https://assets.codepen.io/217233/bgThumb.PNG'}

-# ==============================================================================================================================
-# Game setup.
-# ==============================================================================================================================

- @introText = ["Your head is spinning and your temples throb.", "You awaken in a dimly lit storage cupboard, with no memory of where or who you are.", "A siren echoes through the hallways and the air is thick with the smell of blood..." ]
- rows            = 4
- segments        = 16
- startingRow     = 4
- startingSegment = 11

-# ==============================================================================================================================
-# "Post processing"
-# ==============================================================================================================================

.postProcess
.grain
.grain
.grain

-# ==============================================================================================================================
-# Game loading screen.
-# This is a fake loader, no js. 
-# It's essentially just to try and let the assets load in in the background.
-# ==============================================================================================================================
                    

.loader
    .loader_inner
        %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/caretakerLogo.png'}
        .loader_inner__cogs
            %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/Gear-1s-201px.gif'}
            %h2 Loading checkboxs...

-# ==============================================================================================================================
-# Game introductory text.
-# ==============================================================================================================================


.intro
    .intro_inner
        - @introText.each_with_index do | text, index |
            - if(index == 0)
                %input.introInput{:id => "introText-#{index + 1}", :type => 'radio', :checked => 'checked', :name => 'intro'}
            - else 
                %input.introInput{:id => "introText-#{index + 1}", :type => 'radio', :name => 'intro'}
            .text
                %p 
                    #{text}
                    %label{:for => "introText-#{index + 2}"}
        %input.introInput{:id => "introText-#{@introText.length() + 1}", :type => 'radio', :name => 'intro'}
        .overlay
                    
-# ==============================================================================================================================
-# Game wrapper.
-# ============================================================================================================================== 

.game
    
    %input#overlayObject-1{:type => 'checkbox', 'data-debug' => "Storage note"}
    %input#overlayObject-2{:type => 'checkbox', 'data-debug' => "Maintenance note"}
    %input#overlayObject-3{:type => 'checkbox', 'data-debug' => "Wardens note"}
    %input#overlayObject-4{:type => 'checkbox', 'data-debug' => "Photo"}
    %input#overlayObject-5{:type => 'checkbox', 'data-debug' => "Canteen Notice"}
    %input#overlayObject-6{:type => 'checkbox', 'data-debug' => "Access photo"}
    %input#overlayObject-7{:type => 'checkbox', 'data-debug' => "Radio"}
    %input#overlayObject-8{:type => 'checkbox', 'data-debug' => "Reception Note"}
    %input#overlayObject-9{:type => 'checkbox', 'data-debug' => "Infirmary note"}
    %input#overlayObject-10{:type => 'checkbox', 'data-debug' => "Scans"}
    %input#overlayObject-11{:type => 'checkbox', 'data-debug' => "Fusebox"}

    %input#overlayObject-12{:type => 'checkbox', 'data-debug' => "PC"}
    %input#overlayObject-13{:type => 'checkbox', 'data-debug' => "Security note"}

    %input#overlayObject-14{:type => 'checkbox', 'data-debug' => "Newspaper"}


    -#  Key objects. These objects can be interacted with, but will only return a set response. Such as 'Nothing here'. Each object in our game must have an associated input with unique ID, and a corresponding label inside the segment it belongs to.
    %input#keyObject-1{:type => 'checkbox', 'data-debug' => "Warden office door"}
    %input#keyObject-2{:type => 'checkbox', 'data-debug' => "Warden office key"}

    %input#keyObject-3{:type => 'checkbox', 'data-debug' => "East wing door"}
    %input#keyObject-4{:type => 'checkbox', 'data-debug' => "Wardens key"}
    
    %input#keyObject-5{:type => 'checkbox', 'data-debug' => "Reception door"}
    %input#keyObject-6{:type => 'checkbox', 'data-debug' => "Coin"}
    
    %input#keyObject-7{:type => 'checkbox', 'data-debug' => "Visitation door"}
    %input#keyObject-8{:type => 'checkbox', 'data-debug' => "Visitation Key"}

    %input#keyObject-9{:type => 'checkbox', 'data-debug' => "Door to cells"}
    %input#keyObject-10{:type => 'checkbox', 'data-debug' => "Door control"}
    %input#keyObject-11{:type => 'checkbox', 'data-debug' => "Battery"}

    %input#keyObject-12{:type => 'checkbox', 'data-debug' => "Door to security"}
    %input#keyObject-13{:type => 'checkbox', 'data-debug' => "Hand"}
    %input#keyObject-14{:type => 'checkbox', 'data-debug' => "Hacksaw"}

    %input#keyObject-15{:type => 'checkbox', 'data-debug' => "Cells door"}

    %input#keyObject-16{:type => 'checkbox', 'data-debug' => "Cells door"}
    %input#keyObject-17{:type => 'checkbox', 'data-debug' => "Cells door"}
    %input#keyObject-18{:type => 'checkbox', 'data-debug' => "Cells door"}
    %input#keyObject-19{:type => 'checkbox', 'data-debug' => "Cells door"}
    %input#keyObject-20{:type => 'checkbox', 'data-debug' => "Cells door"}
    %input#keyObject-21{:type => 'checkbox', 'data-debug' => "Cells door"}

    %input#keyObject-22{:type => 'checkbox', 'data-debug' => "D Block door"}
    %input#keyObject-23{:type => 'checkbox', 'data-debug' => "PC Unlocked"}

    -# None key objects. These objects can be interacted with, but will only return a set response. Such as 'Nothing here'. Each object in our game must have an associated input with unique ID, and a corresponding label inside the segment it belongs to.
    
    %input#noneKeyObject-1{:type => 'checkbox', 'data-debug' => "Storage emergency light"}
    %input#noneKeyObject-2{:type => 'checkbox', 'data-debug' => "Storage toolbox"}
    %input#noneKeyObject-3{:type => 'checkbox', 'data-debug' => "Storage ladder"}
    %input#noneKeyObject-4{:type => 'checkbox', 'data-debug' => "Blood"}
    %input#noneKeyObject-5{:type => 'checkbox', 'data-debug' => "Fire exit"}
    %input#noneKeyObject-6{:type => 'checkbox', 'data-debug' => "Clock"}
    %input#noneKeyObject-7{:type => 'checkbox', 'data-debug' => "Whiteboard"}
    %input#noneKeyObject-8{:type => 'checkbox', 'data-debug' => "Mop and bucket"}
    %input#noneKeyObject-9{:type => 'checkbox', 'data-debug' => "Cooler"}
    %input#noneKeyObject-10{:type => 'checkbox', 'data-debug' => "Filing cabinet"}
    %input#noneKeyObject-11{:type => 'checkbox', 'data-debug' => "Books"}
    %input#noneKeyObject-12{:type => 'checkbox', 'data-debug' => "Monster"}
    %input#noneKeyObject-13{:type => 'checkbox', 'data-debug' => "Mr Clay"}
    
    %input#noneKeyObject-14{:type => 'checkbox', 'data-debug' => "Codepen poster"}
    %input#noneKeyObject-15{:type => 'checkbox', 'data-debug' => "Adam poster"}
    %input#noneKeyObject-16{:type => 'checkbox', 'data-debug' => "Tool rack"}
    
    %input#noneKeyObject-17{:type => 'checkbox', 'data-debug' => "Vending machine"}
    %input#noneKeyObject-18{:type => 'checkbox', 'data-debug' => "Broken lamp"}
    %input#noneKeyObject-19{:type => 'checkbox', 'data-debug' => "Sofa"}

    %input#noneKeyObject-20{:type => 'checkbox', 'data-debug' => "Calendar"}
    %input#noneKeyObject-21{:type => 'checkbox', 'data-debug' => "Box"}

    %input#noneKeyObject-22{:type => 'checkbox', 'data-debug' => "Cup"}
    %input#noneKeyObject-23{:type => 'checkbox', 'data-debug' => "Magazines"}
    %input#noneKeyObject-24{:type => 'checkbox', 'data-debug' => "Liars"}

    %input#noneKeyObject-25{:type => 'checkbox', 'data-debug' => "Kitchen front door"}

    %input#noneKeyObject-26{:type => 'checkbox', 'data-debug' => "Bin"}
    %input#noneKeyObject-27{:type => 'checkbox', 'data-debug' => "Bench"}
    %input#noneKeyObject-28{:type => 'checkbox', 'data-debug' => "Feed me"}
    %input#noneKeyObject-29{:type => 'checkbox', 'data-debug' => "Food"}
    %input#noneKeyObject-30{:type => 'checkbox', 'data-debug' => "Barrier"}
    %input#noneKeyObject-31{:type => 'checkbox', 'data-debug' => "Barrier door"}
    %input#noneKeyObject-32{:type => 'checkbox', 'data-debug' => "Staff vending"}
    %input#noneKeyObject-33{:type => 'checkbox', 'data-debug' => "Directors image"}

    %input#noneKeyObject-34{:type => 'checkbox', 'data-debug' => "Checkpoint body"}
    %input#noneKeyObject-35{:type => 'checkbox', 'data-debug' => "Death"}
    %input#noneKeyObject-36{:type => 'checkbox', 'data-debug' => "Computer"}
    %input#noneKeyObject-37{:type => 'checkbox', 'data-debug' => "Checkpoint filing cabinet"}

    %input#noneKeyObject-38{:type => 'checkbox', 'data-debug' => "Kitchen front door"}

    %input#noneKeyObject-39{:type => 'checkbox', 'data-debug' => "Mop"}
    %input#noneKeyObject-40{:type => 'checkbox', 'data-debug' => "Drip"}
    %input#noneKeyObject-41{:type => 'checkbox', 'data-debug' => "Collage"}
    %input#noneKeyObject-42{:type => 'checkbox', 'data-debug' => "Crashcart"}
    %input#noneKeyObject-43{:type => 'checkbox', 'data-debug' => "Revenge"}
    %input#noneKeyObject-44{:type => 'checkbox', 'data-debug' => "Sam"}

    %input#noneKeyObject-45{:type => 'checkbox', 'data-debug' => "Cell door"}
    %input#noneKeyObject-46{:type => 'checkbox', 'data-debug' => "Cell name"}
    %input#noneKeyObject-47{:type => 'checkbox', 'data-debug' => "Cell name"}
    %input#noneKeyObject-48{:type => 'checkbox', 'data-debug' => "Cell door"}
    %input#noneKeyObject-49{:type => 'checkbox', 'data-debug' => "Cell name"}
    %input#noneKeyObject-50{:type => 'checkbox', 'data-debug' => "Freedom"}

    %input#noneKeyObject-51{:type => 'checkbox', 'data-debug' => "Staris"}
    %input#noneKeyObject-52{:type => 'checkbox', 'data-debug' => "Landscape"}
    %input#noneKeyObject-53{:type => 'checkbox', 'data-debug' => "Coffee table"}
    %input#noneKeyObject-54{:type => 'checkbox', 'data-debug' => "Magazines"}
    %input#noneKeyObject-55{:type => 'checkbox', 'data-debug' => "Blood"}
    %input#noneKeyObject-56{:type => 'checkbox', 'data-debug' => "Filing cabinet"}

    %input#noneKeyObject-57{:type => 'checkbox', 'data-debug' => "Filing cabinet"}
    %input#noneKeyObject-58{:type => 'checkbox', 'data-debug' => "Coyier"}

    %input#noneKeyObject-59{:type => 'checkbox', 'data-debug' => "Lockers"}
    %input#noneKeyObject-60{:type => 'checkbox', 'data-debug' => "Shaw"}
    %input#noneKeyObject-61{:type => 'checkbox', 'data-debug' => "Evans"}

    %input#noneKeyObject-62{:type => 'checkbox', 'data-debug' => "Body"}
    %input#noneKeyObject-63{:type => 'checkbox', 'data-debug' => "Exit"}

    -# Movement checkboxes. As we can only traverse downards in the DOM, these must be above the actual viewport.
    -(1..rows).each do | row | 
        -(1..segments).each do | segment |
            -# The starting point of the character needs to be initially checked, so we do this based on the game setup if the starting row and segment match.
            - if(row == startingRow && segment == startingSegment)
                %input{:type => 'radio', :id => "segment-#{segment + ((row - 1) * segments)}-forwards", :name => 'trigger'}
                %input{:type => 'radio', :id => "segment-#{segment + ((row - 1) * segments)}-back", :name => 'trigger', :checked => 'checked'}
            - else
                %input{:type => 'radio', :id => "segment-#{segment + ((row - 1) * segments)}-forwards", :name => 'trigger'}
                %input{:type => 'radio', :id => "segment-#{segment + ((row - 1) * segments)}-back", :name => 'trigger'}

    -# Game segments.
    .game_viewport
        -# Game tilemap.
        %img.tilemap{:draggable => 'false', :src => 'https://assets.codepen.io/217233/caretakerMap4.png'}
        
        -# Game segments | Create a div including controls for each segment in our game.
        -(1..rows).each do | row |
            -(1..segments).each do | segment |
                .game_viewport__segment
                    -# Individual segments and object placement
                    
                    -# ===============================================================
                    -# Storage room
                    -# ===============================================================

                    -if (row == 4 && segment == 11)
                        -# Emergency light
                        %label.object.look{:for => 'noneKeyObject-1'}
                            %img.wallLight{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_light.png'}
                        .response.response-1
                            The lights down here don't seem to be working. Good job I have this field torch.
                            %label.closeResponse{:for => 'noneKeyObject-1'}

                        -# Toolbox
                        %label.object.look{:for => 'noneKeyObject-2'}
                            %img.toolbox{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_toolbox.png'}
                        .response.response-2
                            There's a heavy metal toolbox here. Nothing in it I need right now.
                            %label.closeResponse{:for => 'noneKeyObject-2'}
                        
                        -# Ladder
                        %label.object.look{:for => 'noneKeyObject-3'}
                            %img.ladder{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_ladder.png'}
                        .response.response-3
                            A workmans ladder. I see no use for this right now.
                            %label.closeResponse{:for => 'noneKeyObject-3'}
                                
                    -# ===============================================================
                    -# Storage room entrance
                    -# ===============================================================
                    
                    -if (row == 4 && segment == 10)
                        -# Blood
                        %label.object.look{:for => 'noneKeyObject-4'}
                            %img.blood{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_blood.png'}
                        .response.response-4
                            Whos blood is this? Is this mine?
                            %label.closeResponse{:for => 'noneKeyObject-4'}
                            
                        -# Note
                        %label.object.look{:for => 'overlayObject-1'}
                            %img.caretakerNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_caretakerNoteObject.png'}
                            
                        -# Fire exit
                        %label.object.open{:for => 'noneKeyObject-5'}
                            %img.fireEscape{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fireEscape.png'}
                        .response.response-5
                            Locked tight. Looks like some kind of security lockdown has been initiated.
                            %label.closeResponse{:for => 'noneKeyObject-5'}
                                
                    -# ===============================================================
                    -# Maintenance level 1 with whiteboard
                    -# ===============================================================

                    -if (row == 4 && segment == 9)
                        -# Clock
                        %label.object.look{:for => 'noneKeyObject-6'}
                            %img.clock{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_clock.png'}
                        .response.response-6
                            The clock stopped working at 10.10pm.
                            %label.closeResponse{:for => 'noneKeyObject-6'}
                                
                        -# Whiteboard
                        %label.object.look{:for => 'noneKeyObject-7'}
                            %img.whiteboard{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_whiteboard.png'}
                        .response.response-7
                            Theres some notes here from a maintenance team, it's a list of things that need fixing.
                            %label.closeResponse{:for => 'noneKeyObject-7'}
                                
                        -# Mop and bucket
                        %label.object.look{:for => 'noneKeyObject-8'}
                            %img.mop{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_mop.png'}
                        .response.response-8
                            Has someone tried to mop up blood with this?
                            %label.closeResponse{:for => 'noneKeyObject-8'}
                            
                    -# ===============================================================
                    -# Maintenance level stairs
                    -# ===============================================================

                    -if (row == 4 && segment == 8)
                        -# Cooler
                        %label.object.search{:for => 'noneKeyObject-9'}
                            %img.cooler{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cooler.png'}
                        .response.response-9
                            There's nothing in here I need right now. Maybe some painkillers wouldn't go amiss.
                            %label.closeResponse{:for => 'noneKeyObject-9'}
                            
                    -# ===============================================================
                    -# East wing cork board
                    -# ===============================================================
                    
                    -if (row == 3 && segment == 8)
                        -# Note
                        %label.object.look{:for => 'overlayObject-3'}
                            %img.wardensNotice{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_wardensNotice.png'}

                    -# ===============================================================
                    -# Outside wardens office
                    -# ===============================================================
                    
                    -if (row == 3 && segment == 9)
                        -# Wardens office door
                        %label.object.keyObject.open{:for => 'keyObject-1'}
                            %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.fail
                            There's a sign on the door that says Dr Mason. It's locked though. I'll need a key to get in.
                            %label.closeResponse{:for => 'keyObject-1'}
                        .response.success
                            Alright, that unlocked the door. Let's see if this Dr Mason is home.
                    
                    -# ===============================================================
                    -# Wardens office entrance
                    -# ===============================================================
                    
                    -if (row == 3 && segment == 10)
                        %label.object.search{:for => 'noneKeyObject-10'}
                            %img.filingCabinet{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_filingCabinet.png'}
                        .response.response-10
                            The drawers are littered with patient reports and test results. Is this some kind of hospital?
                            %label.closeResponse{:for => 'noneKeyObject-10'}
                            
                        %label.object.look{:for => 'noneKeyObject-11'}
                            %img.books{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_books.png'}
                        .response.response-11
                            Assorted books on psychological practices. Looks like they have been read a few times.
                            %label.closeResponse{:for => 'noneKeyObject-11'}
                            
                    -# ===============================================================
                    -# Wardens office
                    -# ===============================================================
                    
                    -if (row == 3 && segment == 11)
                        -# Monster graffiti
                        %label.object.look{:for => 'noneKeyObject-12'}
                            %img.monster{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_monster.png'}
                        .response.response-12
                            Monster? What does this mean?
                            %label.closeResponse{:for => 'noneKeyObject-12'}
                            
                        -# Mr Clay's body
                        %label.object.look{:for => 'noneKeyObject-13'}
                            %img.mrClay{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_mrClay.png'}
                        .response.response-13
                            Jesus. What happened to this guy! This is not good I have to get out of here.
                            %label.closeResponse{:for => 'noneKeyObject-13'}
                            
                        -# Wardens key card
                        %label.object.destroy.take{:for => 'keyObject-4'}
                            %img.eastWingKeyCard{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_eastWingKeycard.png'}
                            .glint
                        .response
                            I'm sorry Dr, but I'm going to need to borrow this keycard.
                            
                    -# ===============================================================
                    -# Maintenance office
                    -# ===============================================================
                    
                    -if (row == 4 && segment == 6)
                        -# Codepen poster
                        %label.object.look{:for => 'noneKeyObject-14'}
                            %img.codepenPoster{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_codepen.png'}
                        .response.response-14
                            There's a poster here with an odd symbol on it, I wonder what it means?
                            %label.closeResponse{:for => 'noneKeyObject-14'}

                        -# adam poster
                        %label.object.look{:for => 'noneKeyObject-15'}
                            %img.adamPoster{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_adam.png'}
                        .response.response-15
                            A portrait of a man. Perhaps one of the maintenance guys is a fan of his.
                            %label.closeResponse{:for => 'noneKeyObject-15'}

                        -# Wardens office key
                        %label.object.destroy.take{:for => 'keyObject-2'}
                            %img.wardensOfficeKey{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_wardensOfficeKey.png'}
                        .response
                            There's a key here. There's a key chain on it. It says "Mr Mason's office spare". 

                    -# ===============================================================
                    -# Maintenance office Back
                    -# ===============================================================
                    -if (row == 4 && segment == 5)
                        -# Tool rack
                        %label.object.look{:for => 'noneKeyObject-16'}
                            %img.toolRack{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_toolRack.png'}
                        .response.response-16
                            A plethora of tools. Wrenches, spanners and hammers. Nothing I need right now.
                            %label.closeResponse{:for => 'noneKeyObject-16'}

                        -# Note
                        %label.object.look{:for => 'overlayObject-2'}
                            %img.maintenanceNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_maintenanceNote.png'}

                    -# ===============================================================
                    -# East wing vending
                    -# ===============================================================
                    -if (row == 3 && segment == 6)

                        -# Vending machine
                        %label.object.look{:for => 'noneKeyObject-17'}
                            %img.vendingMachine{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_vendingMachine.png'}
                        .response.response-17
                            A vending machine, shame it's not working, I could certainly eat right now.
                            %label.closeResponse{:for => 'noneKeyObject-17'}

                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-18'}
                            
                        .response.response-18
                            
                            %label.closeResponse{:for => 'noneKeyObject-18'}

                        %label.object.destroy.take{:for => 'keyObject-6'}
                            %img.vendingSlot{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_coinSlot.png'}
                        .response
                            There's a staff badge here in the change slot. This will come in useful.

                    -# ===============================================================
                    -# East wing door
                    -# ===============================================================

                    -if (row == 3 && segment == 5)

                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-19'}
                            %img.sofa{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_sofa.png'}
                        .response.response-19
                            No time to rest. I need to find a way out of here.
                            %label.closeResponse{:for => 'noneKeyObject-19'}

                        -# East wing door
                        %label.object.keyObject.open{:for => 'keyObject-3'}
                            %img.doorTwo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.fail
                            I need a keycard to get through this door. I wonder if there is one around somewhere.
                            %label.closeResponse{:for => 'keyObject-3'}
                        .response.success
                            OK, that's unlocked. I need to find a way out of here so I can get some help.

                    -# ===============================================================
                    -# East wing vending
                    -# ===============================================================

                    -if (row == 3 && segment == 3)

                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-20'}
                            %img.calendar{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_calendar.png'}
                        .response.response-20
                            A colorful wall calendar. Todays date has been circled in red pen.
                            %label.closeResponse{:for => 'noneKeyObject-20'}

                        -# Broken lamp
                        %label.object.search{:for => 'noneKeyObject-21'}
                            %img.box{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_box.png'}
                        .response.response-21
                            An empty box. It was probably used to restock this vending machine.
                            %label.closeResponse{:for => 'noneKeyObject-21'}

                    -# ===============================================================
                    -# East wing Liars
                    -# ===============================================================

                    -if (row == 3 && segment == 2)

                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-22'}
                            %img.mug{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_mug.png'}
                        .response.response-22
                            A mug of black coffee. Strange, the mug is still warm to the touch.
                            %label.closeResponse{:for => 'noneKeyObject-22'}

                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-23'}
                            %img.magazine{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_magazines.png'}
                        .response.response-23
                            A stack of various healthcare magazines.
                            %label.closeResponse{:for => 'noneKeyObject-23'}

                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-24'}
                            %img.liars{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_liars.png'}
                        .response.response-24
                            The Mason Institute...so that's where I am. The name seems familiar.
                            %label.closeResponse{:for => 'noneKeyObject-24'}
                        
                        -# Note
                        %label.object.look{:for => 'overlayObject-4'}
                            %img.photo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_photo.png'}

                    -# ===============================================================
                    -# Kitchen front door
                    -# ===============================================================

                    -if (row == 2 && segment == 4)
                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-25'}
                            %img.doorTwo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.response-25
                            It's locked from the other side. There's no way in this way.
                            %label.closeResponse{:for => 'noneKeyObject-25'}

                    -# ===============================================================
                    -# Canteen entrance
                    -# ===============================================================

                    -if (row == 2 && segment == 5)
                        -# Broken lamp
                        %label.object.search{:for => 'noneKeyObject-26'}
                            %img.bin{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_bin.png'}
                        .response.response-26
                            Full of food wrappers and empty soda cans. Nothing I can use here.
                            %label.closeResponse{:for => 'noneKeyObject-26'}

                    -# ===============================================================
                    -# Canteen entrance 2
                    -# ===============================================================

                    -if (row == 2 && segment == 6)
                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-27'}
                            %img.bench{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_bench.png'}
                        .response.response-27
                            A small wooden bench I'm guessing for the staff. The food is half eaten and still on the plate.
                            %label.closeResponse{:for => 'noneKeyObject-27'}

                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-28'}
                            %img.feedMe{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_feedMe.png'}
                        .response.response-28
                            Who could have written this?
                            %label.closeResponse{:for => 'noneKeyObject-28'}

                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-29'}
                            %img.food{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_food.png'}
                        .response.response-29
                            I don't want to guess at what this is...
                            %label.closeResponse{:for => 'noneKeyObject-29'}
                        
                        -# Note
                        %label.object.look{:for => 'overlayObject-5'}
                            %img.canteenNotice{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_canteenNote.png'}


                    -# ===============================================================
                    -# Canteen entrance barrier
                    -# ===============================================================

                    -if (row == 2 && segment == 7)
                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-30'}
                            %img.barrier{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_barrier.png'}
                        .response.response-30
                            Someone has made a make-shift barrier here using benches and a vending machine. What were they trying to keep out?
                            %label.closeResponse{:for => 'noneKeyObject-30'}
                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-31'}
                            %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.response-31
                            There's just no way I can move all of this stuff on my own. I'll have to find another way around.
                            %label.closeResponse{:for => 'noneKeyObject-31'}

                    -# ===============================================================
                    -# Access 2
                    -# ===============================================================
                    -if (row == 2 && segment == 1)
                        -# Note
                        %label.object.look{:for => 'overlayObject-6'}
                            %img.accessPhoto{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_accessPhoto.png'}
                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-38'}
                            %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.response-38
                            The handles broken off. There must be something important behind this door...
                            %label.closeResponse{:for => 'noneKeyObject-38'}
                    -# ===============================================================
                    -# Staff room
                    -# ===============================================================
                    -if (row == 1 && segment == 6)
                        -# Note
                        %label.object.look{:for => 'overlayObject-7'}
                            %img.radio{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_radio_1.png'}
                        -# Broken lamp
                        %label.object.look{:for => 'noneKeyObject-32'}
                            %img.staffVending{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_vendingMachine.png'}
                        .response.response-32
                            Another vending machine full of snacks I can't get to. If I get desperate enough, I'll smash the glass.
                            %label.closeResponse{:for => 'noneKeyObject-32'}
                    -# ===============================================================
                    -# Staff room 2
                    -# ===============================================================
                    -if (row == 1 && segment == 7)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-33'}
                            %img.directors{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_directors.png'}
                        .response.response-33
                            Portraits of the board. Dr. H Desroches, Dr M Mosley and Dr D Khourshid.
                            %label.closeResponse{:for => 'noneKeyObject-33'}  

                    -# ===============================================================
                    -# Access 2
                    -# ===============================================================
                    -if (row == 1 && segment == 5)
                        -# Note
                        %label.object.look{:for => 'overlayObject-8'}
                            %img.receptionNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_maintenanceNote.png'}
                        %label.object.keyObject.open{:for => 'keyObject-7'}
                            %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.fail
                            I need the staff room key to get in here. In must be around somewhere.
                            %label.closeResponse{:for => 'keyObject-7'}
                        .response.success
                            I've opened the door using the staff key.

                    -# ===============================================================
                    -# Staff room
                    -# ===============================================================
                    -if (row == 1 && segment == 1)
                        %label.object.keyObject.open{:for => 'keyObject-5'}
                            %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.fail
                            I need a staff badge to get through here. Maybe there's one around somewhere.
                            %label.closeResponse{:for => 'keyObject-5'}
                        .response.success
                            I used the badge I found to open the door.

                    -# ===============================================================
                    -# Holding cell
                    -# ===============================================================
                    -if (row == 2 && segment == 8)
                        %label.object.look{:for => 'noneKeyObject-34'}
                            %img.checkpointBody{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_body.png'}
                        .response.response-34
                            Poor guy has been eviscerated. So much blood. His name tag says 'J Dickinson'.
                            %label.closeResponse{:for => 'noneKeyObject-34'}
                        -# Wardens office door
                        %label.object.keyObject.take{:for => 'keyObject-10'}
                            %img.panel{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_panel.png'}
                        .response.fail
                            There's a control panel here that opens the checkpoint doors. Looks like it's been sabotaged. A new battery would fix it.
                            %label.closeResponse{:for => 'keyObject-10'}
                        .response.success
                            Perfect, the control panel is powered and the door should now be unlocked.
                        -# Broken lamp

                    -# ===============================================================
                    -# Holding cell
                    -# ===============================================================
                    -if (row == 2 && segment == 9)
                        %label.object.look{:for => 'noneKeyObject-35'}
                            %img.death{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_death.png'}
                        .response.response-35
                            This doesn't bode well. I need to stay alert, there could be someone still in here with me.
                            %label.closeResponse{:for => 'noneKeyObject-35'}
                        %label.object.look{:for => 'noneKeyObject-36'}
                            %img.computer{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_monitor.png'}
                        .response.response-36
                            This was probably used to check patients in and out. It's not working right now.
                            %label.closeResponse{:for => 'noneKeyObject-36'}
                        %label.object.look{:for => 'noneKeyObject-37'}
                            %img.checkpointCabinet{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_filingCabinet.png'}
                        .response.response-37
                            A filing cabinet full of patient mugshots and bios.
                            %label.closeResponse{:for => 'noneKeyObject-37'}
                        -# Wardens office door
                        %label.object.keyObject.open{:for => 'keyObject-9'}
                            %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.fail
                            The door is locked tight. I need to activate a control panel somewhere.
                            %label.closeResponse{:for => 'keyObject-9'}
                        .response.success
                            The door is now open. I can go through.
                    
                    -# ===============================================================
                    -# Security Door
                    -# ===============================================================
                    -if (row == 2 && segment == 14)
                        %label.object.keyObject.open{:for => 'keyObject-12'}
                            %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.fail
                            There's a palm print scanner on this door.
                            %label.closeResponse{:for => 'keyObject-12'}
                        .response.success
                            The door is now open. I can go through.

                    -# ===============================================================
                    -# Infirmary 1
                    -# ===============================================================
                    -if (row == 3 && segment == 14)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-39'}
                            %img.mopTwo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_mopTwo.png'}
                        .response.response-39
                            There's a bucket here full of flesh and blood.
                            %label.closeResponse{:for => 'noneKeyObject-39'}  
                        -# Wardens key card
                        %label.object.destroy.search{:for => 'keyObject-14'}
                            %img.hacksaw{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_medicalCabinet.png'}
                        .response
                            There's a surgical saw in here, I don't like what I may have to do with it.

                    -# ===============================================================
                    -# Infirmary 2
                    -# ===============================================================
                    -if (row == 3 && segment == 15)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-40'}
                            %img.drip{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_drip.png'}
                        .response.response-40
                            A drip filled with a clear fluid. This looks like it's been used recently.
                            %label.closeResponse{:for => 'noneKeyObject-40'}  
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-41'}
                            %img.collage{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_collage.png'}
                        .response.response-41
                            A collage of various medical photographs.
                            %label.closeResponse{:for => 'noneKeyObject-41'}  
                        -# Note
                        %label.object.look{:for => 'overlayObject-9'}
                            %img.infirmaryNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_infirmaryNote.png'}


                    -# ===============================================================
                    -# Infirmary 3
                    -# ===============================================================
                    -if (row == 3 && segment == 16)
                        -# Note
                        %label.object.look{:for => 'overlayObject-10'}
                            %img.scans{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_scans.png'}
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-42'}
                            %img.crash{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_crashCart.png'}
                        .response.response-42
                            A medical crash cart. This isn't powered so I can't use it.
                            %label.closeResponse{:for => 'noneKeyObject-42'}  
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-43'}
                            %img.revenge{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_revenge_1.png'}
                        .response.response-43
                            Revenge. Poor guy.
                            %label.closeResponse{:for => 'noneKeyObject-43'}  
                        -# Note
                        %label.object.look.persist{:for => 'noneKeyObject-44'}
                            %img.sam{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_sam.png'}
                        .response.response-44
                            It's the bloodied remains of a security guard. His name tag says 'Sam Watts'
                            %label.closeResponse{:for => 'noneKeyObject-44'}  
                        %label.object.keyObject.take{:for => 'keyObject-13'}
                            %img.hand{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_hand.png'}
                        .response.fail
                            I don't like where this is going, but I would need something to do it with.
                            %label.closeResponse{:for => 'keyObject-13'}
                        .response.success
                            Oh God, Ok I've done it. I'm so sorry Sam.
                    -# ===============================================================
                    -# Cells fuse
                    -# ===============================================================
                    -if (row == 2 && segment == 12)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-48'}
                            %img.cellDoor{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellDoorOpen.png'}
                        .response.response-48
                            This cell door has been opened and there's a foul smell coming from inside.
                            %label.closeResponse{:for => 'noneKeyObject-48'} 
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-49'}
                            %img.cellName{:draggable => 'false', :draggable => 'false', :draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellName.png'}
                        .response.response-49
                            Patient #18. The rest of the name plaque has been scratched off.
                            %label.closeResponse{:for => 'noneKeyObject-49'} 
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-50'}
                            %img.freedom{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_freedom.png'}
                        .response.response-50
                            Freedom. At least we have some things in common.
                            %label.closeResponse{:for => 'noneKeyObject-50'} 
                        -# Note
                        %label.object.look{:for => 'overlayObject-11'}
                            %img.fuseBox{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseBox.png'}
                    
                    -# ===============================================================
                    -# Cells door
                    -# ===============================================================
                    -if (row == 2 && segment == 13)
                        -# Wardens office door
                        %label.object.keyObject.open{:for => 'keyObject-15'}
                            %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.fail
                            The door is locked. I need to divert the cells backup power to it. There must be a fusebox around here somewhere.
                            %label.closeResponse{:for => 'keyObject-15'}
                        .response.success
                            The door is now powered, I can go through.
                        
                    -# ===============================================================
                    -# Cells entrance
                    -# ===============================================================
                    -if (row == 2 && segment == 10)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-45'}
                            %img.cellDoor{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellDoor.png'}
                        .response.response-45
                            These look like patient cells of some kind, It's locked and I can't hear anyone inside.
                            %label.closeResponse{:for => 'noneKeyObject-45'}  
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-46'}
                            %img.cellName{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellName.png'}
                        .response.response-46
                            Patient #4. K. Van Sant.
                            %label.closeResponse{:for => 'noneKeyObject-46'} 
                    -# ===============================================================
                    -# Cells entrance
                    -# ===============================================================
                    -if (row == 2 && segment == 11)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-47'}
                            %img.cellName{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_cellName.png'}
                        .response.response-47
                            Patient #12. G. Park.
                            %label.closeResponse{:for => 'noneKeyObject-47'} 
                    
                    -# ===============================================================
                    -# Reception 2
                    -# ===============================================================
                    -if (row == 1 && segment == 3)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-51'}
                            %img.stairs{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_stairs.png'}
                        .response.response-51
                            Looks like this leads to more offices but the stairwell is blocked.
                            %label.closeResponse{:for => 'noneKeyObject-51'}  
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-52'}
                            %img.landscape{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_landscape.png'}
                        .response.response-52
                            Even this serene landscape painting looks ominous.
                            %label.closeResponse{:for => 'noneKeyObject-52'}  
                    -if (row == 1 && segment == 4)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-53'}
                            %img.coffeeTable{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_coffeeTable.png'}
                        .response.response-53
                            A small coffee table littered with half empty mugs and glasses.
                            %label.closeResponse{:for => 'noneKeyObject-53'}  
                    -# ===============================================================
                    -# Reception 3
                    -# ===============================================================
                    -if (row == 1 && segment == 5)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-54'}
                            %img.receptionMagazines{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_magazines.png'}
                        .response.response-54
                            A stack of Mason Institute materials. Letterhead, brochures and the like.
                            %label.closeResponse{:for => 'noneKeyObject-54'}  
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-55'}
                            %img.receptionBlood{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_receptionBlood.png'}
                        .response.response-55
                            I don't want to imagine what happened here.
                            %label.closeResponse{:for => 'noneKeyObject-55'}  
                    
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-56'}
                            %img.filingCabinetReception{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_filingCabinet.png'}
                        .response.response-56
                            Filled with patient visitation logs and receptionist notes.
                            %label.closeResponse{:for => 'noneKeyObject-56'}  

                    -# ===============================================================
                    -# pc
                    -# ===============================================================
                    -if (row == 2 && segment == 15)
                        -# Note
                        %label.object.look{:for => 'overlayObject-13'}
                            %img.securityNote{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_infirmaryNote.png'}
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-57'}
                            %img.securityFilingCabinet{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_filingCabinet.png'}
                        .response.response-57
                            Notes about patient 18's psycological profile. Particularly about his split personality disorder.
                            %label.closeResponse{:for => 'noneKeyObject-57'}  
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-58'}
                            %img.coyier{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_coyier_1.png'}
                        .response.response-58
                            Head of security. C Coyier.
                            %label.closeResponse{:for => 'noneKeyObject-58'}  
                    -# ===============================================================
                    -# pc
                    -# ===============================================================
                    -if (row == 2 && segment == 16)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-59'}
                            %img.lockers{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_lockers.png'}
                        .response.response-59
                            A set of security lockers. I can't open any of them.
                            %label.closeResponse{:for => 'noneKeyObject-59'}  
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-60'}
                            %img.shaw{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_shaw.png'}
                        .response.response-60
                            Security chief. S Shaw.
                            %label.closeResponse{:for => 'noneKeyObject-60'}  
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-61'}
                            %img.evans{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_evans.png'}
                        .response.response-61
                            Riot specialist. C Evans.
                            %label.closeResponse{:for => 'noneKeyObject-61'}  
                        %label.object.look{:for => 'overlayObject-12'}
                            %img.crtObject{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_computer.png'}
                        -# Wardens key card
                        %label.object.destroy.take{:for => 'keyObject-23'}
                        .response
                            That's it! I've done it, the doors should now be unlocked. There's an emergency escape just above me!
                    -# ===============================================================
                    -# pc
                    -# ===============================================================
                    -if (row == 1 && segment == 13)
                        %label.object.keyObject.open{:for => 'keyObject-22'}
                            %img.door{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_door.png'}
                        .response.fail
                            This is the exit. I need to deactivate lockdown first.
                            %label.closeResponse{:for => 'keyObject-22'}
                        .response.success
                            Yes it's open! Almost there. I can taste the freedom.
                    -# ===============================================================
                    -# pc
                    -# ===============================================================
                    -if (row == 1 && segment == 15)
                        -# Note
                        %label.object.look{:for => 'noneKeyObject-62'}
                            %img.corpse{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_corpse.png'}
                        .response.response-62
                            Wait. What? There's the body of a caretaker here. It looks as though he was changing the lights...does that mean...
                            %label.closeResponse{:for => 'noneKeyObject-62'}  

                    -# ===============================================================
                    -# pc
                    -# ===============================================================
                    -if (row == 1 && segment == 16)
                        -# Note
                        -# Note
                        %label.object.look{:for => 'overlayObject-14'}
                            %img.exit{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fireEscape.png'}
                    .controls
                        -# Control labels.
                        %label.back{:for => "segment-#{segment + ((row - 1) * segments) - 1}-back"}
                            %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
                        %label.forward{:for => "segment-#{segment + ((row - 1) * segments) + 1}-forwards"}
                            %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveRight.png'}
                        %label.up{:for => "segment-#{segment + ((row - 1) * segments) - segments}-forwards"}
                            %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveUp.png'}
                        %label.down{:for => "segment-#{segment + ((row - 1) * segments) + segments}-forwards"}
                            %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveDown.png'}
                    .segmentNumbers
                        #{(row - 1) * 16 + segment}
            
    -# Main character.     
    .player
        .player_sprite
     
    -# Level shroud to hide upper and lower levels
    .lightMap
    

    -# Overlay objects
    .overlayObjects
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_noteFull1.png'}
                %label{:for => 'overlayObject-1'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/updatedNote.png'}
                %label.show{:for => 'overlayObject-2'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_noteFull3_1.png'}
                %label.show{:for => 'overlayObject-3'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_staffPhoto.png'}
                %label.show{:for => 'overlayObject-4'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_canteenNoteFull.png'}
                %label.show{:for => 'overlayObject-5'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_accessPhotoFull.png'}
                %label.show{:for => 'overlayObject-6'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
                %label.object.sneakyKey.take{:for => 'keyObject-8'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_sneakyKey.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_radioBack.png'}
                %input{:type => 'range', :min => '1', :max => '2', :value => '0', :step => '0.01'}
                %label.battery{:for => 'keyObject-11'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_battery.png'}
                %label.show{:for => 'overlayObject-7'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_receptionNoteFull_1.png'}
                %label.show{:for => 'overlayObject-8'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_infirmaryNoteFull.png'}
                %label.show{:for => 'overlayObject-9'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_scansFull.png'}
                %label.show{:for => 'overlayObject-10'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseBoxOverlay_3.png', :style => 'width: 710px;'}
                %label.show{:for => 'overlayObject-11'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
                %label{:for => 'keyObject-16'}
                    %img.switchFuse.switchOne{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'}
                %label{:for => 'keyObject-17'}
                    %img.switchFuse.switchTwo{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'}
                %label{:for => 'keyObject-18'}
                    %img.switchFuse.switchThree{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'}
                %label{:for => 'keyObject-19'}
                    %img.switchFuse.switchFour{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'}
                %label{:for => 'keyObject-20'}
                    %img.switchFuse.switchFive{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'}
                %label{:for => 'keyObject-21'}
                    %img.switchFuse.switchSix{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_fuseSwitch.png'}
        .overlayObject
            .content
                %img.crt{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_crt.png'}
                %label.show{:for => 'overlayObject-12'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
                %input#pc1{:type => 'checkbox'}
                %img.crtPanel{:src => 'https://assets.codepen.io/217233/ct_crtPanel.png'}
                %input{:type => 'number', :min => '2844', :max => '2844', :value => '0000', :title => "Legs"}
                %label{:for => 'pc1'}
                    %img.loginButton{:src => 'https://assets.codepen.io/217233/ct_crtLogin.png'}
                %label.deactivate{:for => 'keyObject-23'}
                    %img{:src => 'https://assets.codepen.io/217233/ct_crtDeactivate.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_securityNoteFull.png'}
                %label.show{:for => 'overlayObject-13'}
                    %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_moveLeft.png'}
        .overlayObject
            .content
                %img{:draggable => 'false', :src => 'https://assets.codepen.io/217233/ct_newspaper.png', :style => 'width: 1210px;'}
                %p.end 
                    Thanks for playing, patient 18. Be sure to like and 
                    %a{:href => 'https://www.codepen.io/jcoulterdesign', :target => '_blank'}
                        follow me on Codepen

/* ========================================================================================================================
The CSS for this is so massive I exceed Codepens 1mb limit. So I have had to load externally 
https://rawcdn.githack.com/jcoulterdesign/theCaretaker/a17b3dea4b8d4c39b36e28b8b0c19dde10d02605/caretakerFinal.css 

The pre processed version of this (sass) can be found on this pen. https://codepen.io/jcoulterdesign/pen/8a9b1fe7ee7d6b59a60eb8f814029fe3
It will not load however.
======================================================================================================================== */

body {
    background: black;
}

@keyframes thumbnail {
    0% {opacity: 1}
    100% {opacity: 0}
}

.thumbnail {
    animation: thumbnail 1s 10s forwards;
    position: absolute;
    z-index: -1;
    width: 100%;
    left: 0;
    top: 50%;
    pointer-events: none;
    opacity: 1;
    transform: translateY(-50%);
}

// No.