[Gemma]

Try this,

In your v3ARCADE_PLAY template find:

<!-- main -->
            <div class="blockrow">{vb:raw flashcode}</div>
            <vb:if condition="$game['instructions']">
                <div class="blockrow">{vb:raw game.instructions}</div>
            </vb:if>
            <!-- /main -->
        </td>

        <td valign="top" style="width: 200px; padding-left: 10px;">
            <!-- right area -->

Replace it with:

<!-- main -->
<vb:if condition="THIS_SCRIPT == 'arcade'">
<script type="text/javascript">
        $(document).ready(function(){
    $("#shadow").css("height", $(document).height()).hide();
    $(".lightSwitcher").click(function(){
        $("#shadow").toggle();
        if ($("#shadow").is(":hidden"))
            $(this).html("Turn off the lights").removeClass("turnedOff");
        else
            $(this).html("Turn on the lights").addClass("turnedOff");
    });
}); 
    </script>
</vb:if>
<link rel="stylesheet" href="css/lights.css"/>
<div id="acontainer">
          <div id="header">   
            <div id="command"><a class="lightSwitcher" href="javascript:void(0)">Turn off the lights</a></div>
        </div>
        <div id="movie">
            <div class="blockrow">{vb:raw flashcode}</div>
                        
            <!-- /main -->

<table width="700" border="0">
 <vb:if condition="$game['description']">
  <tr>
   <th scope="row"><span><b>Description:</b> {vb:raw game.description}<br/><br/></span></th>
    </tr>
    </vb:if>
<vb:if condition="$game['instructions']">
  <tr>
    <th scope="col"><span><b>Instructions:</b> {vb:raw game.instructions}</span></th>
    </tr>
    </vb:if>  
</table>
</td>
        <td valign="top" style="width: 200px; padding-left: 10px;">
            <!-- right area -->

Find:

{vb:raw footer}

Below add:

</div>
    </div>
    <div id="shadow"></div>

Upload the images and the css file, no need to upload the js file or do the headinclude template edit.