<?xml version="1.0" encoding="UTF-8" ?> 
<Module>
  <ModulePrefs
    title="ApeJet Clicker Game"
    directory_title="Games"
    title_url="http://www.apejet.org/sites/games/clicker.html"
    description="A simple puzzle game."
    author="Aaron McBride"
    author_affiliation="ApeJet"
    author_location="CA, USA"
    screenshot=""
    thumbnail=""
    width="210"
    height="250"
    scaling="false"
    scrolling="true"
    author_link="http://www.apejet.org/aaron/"
     /> 
  <Content type="html">
     <![CDATA[ 

<style type="text/css">
#gameboard
{
    width:185px;
    height:185px;
    margin: auto;
    border: 1px solid;
}
#level
{
    width:185px;
    padding: 5px;
    margin: auto;
    text-align:center;
}
#tools
{
    width:190px;
    padding: 5px;
    margin: auto;
    text-align:center;
}
.box
{
    width: 25px;
    height: 25px;
    border: 1px;
    margin: 5px;
    float: left;
    background-color: #000;
    border: thin #fff solid;
}.boxW
{
    width: 25px;
    height: 25px;
    margin: 5px;
    float: left;
    background-color: #fff;
    border: thin #000 solid;
}
</style>
<script type="text/javascript">
var curLevel = 1;
var randLevels = false;

function $(id)
{
    return document.getElementById(id);
}
function c(el)
{
    //on click
    t(el.id);

    if(check_win())
    {
        curLevel++;
        flashBoard(6)
        showLevel();
    }
}
function t(id)
{
    //toggle
    var list = [];
    list.push("" + id);
    var sp = id.split("_");
    var x = parseInt(sp[0]);
    var y = parseInt(sp[1]);
    list.push((x-1) + "_" + (y));
    list.push((x+1) + "_" + (y));
    list.push((x) + "_" + (y-1));
    list.push((x) + "_" + (y+1));
    for(var i in list)
    {
        if($(list[i]))
        {
            if($(list[i]).className == "box")
                $(list[i]).className = "boxW"
            else
                $(list[i]).className = "box";
        }
    }
}
function check_win()
{
    for(var i = 0; i < 5; i++)
    {
        for(var j = 0; j < 5; j++)
        {
            if($(i + "_" + j).className == "box")
                return false;
        }
    }
    return true;
}
function showLevel()
{
    //clear all
    for(var i = 0; i < 5; i++)
        for(var j = 0; j < 5; j++)
            $(i+"_"+j).className = "boxW";
    var levels = [
        ["2_2"],
        ["0_2","4_2"],
        ["0_0","4_4"],
        ["2_1","2_3"],
        ["1_1","3_3"],
        ["0_0","1_1"],
        ["1_2","2_2","3_2"],
        ["0_0","0_4","2_2"],
        ["0_1","1_1","3_3","4_3"],
        ["0_0","1_1","2_2","3_3","4_4","0_4","1_3","3_1","4_0"],
        ["0_0","1_0","2_0","3_0","4_0","0_4","1_4","2_4","3_4","4_4"],
        ["0_1","0_2","0_3","1_0","2_0","3_0","1_4","2_4","3_4","4_1","4_2","4_3"],
        ["0_0","0_2","0_4","2_0","2_2","2_4","4_0","4_2","4_4"],
        ["0_2","2_2","4_2","1_1","1_3","3_1","3_3"],
        ["0_0","1_0","1_1","2_2","3_3","3_4","4_4"],
        ["1_1","1_2","1_3","2_1","2_3","3_1","3_2","3_3"],
        ["1_1","2_1","3_2","3_3","4_3","4_4"],
        ["2_2","1_2","2_1","2_3","3_2"],
        ["0_2","1_0","1_4","3_0","3_4","4_2"],
        ["0_0","0_2","0_4","2_0","2_1","2_2","2_3","2_4"],
        ["0_1","2_1","2_4","4_4"],
        ["1_1","2_2","4_3"],
        ["3_3","3_4","3_2","4_4"],
        ["0_0","0_1","1_1","1_2","2_2","3_2","3_3","4_3","4_4"],
        ["1_0","2_0","3_0","1_3","2_3","3_3"],
        ["2_2","3_0","3_4","4_1","4_3"],
        ["0_0","0_1","1_0","1_3","3_1","3_4","4_3","4_4"],
        ["1_0","1_4","2_1","2_2","2_3","4_1","4_2","4_3"],
        ["0_1","0_2","0_4","2_2","4_0","4_2","4_3"],
        ["1_1","2_1","3_1","4_1","3_3"],
        ["0_0","0_2","0_4","2_2","4_0"],
        ["2_2","2_3","3_1","3_2"],
        ["0_4","2_1","3_1","4_1"],
        ["0_4","1_2","2_1","3_3","4_0"]
        ];
    
    if(levels.length > this.curLevel - 1)
    {
        for(var i in levels[this.curLevel - 1])
            t(levels[this.curLevel - 1][i]);
    }
    else
    {
        if(randLevels)
        {
            for(var i = 0; i < 3; i++)//at least 3
                t(Math.floor(Math.random()*5)+"_"+Math.floor(Math.random()*5));
            while(Math.random() > 0.2)//some more random 
                t(Math.floor(Math.random()*5)+"_"+Math.floor(Math.random()*5));
        }
        else
        {
            $("level").innerHTML = "<b>You win!</b> <a href=\"#\" onclick=\"startBonus();return false;\">Start Bonus Levels</a>";
            fadeLevel(200);
            return;
        }
    }
    
    $("level").innerHTML = "Level: " + curLevel;
    fadeLevel(100);
}
function startBonus()
{
    randLevels = true;
    showLevel();
}
function fadeLevel(f)
{
    f--;
    $("level").style.backgroundColor = "rgb(" + (255-f) + ",255," + (255-f) + ")";
    if(f != 0)
        setTimeout("fadeLevel(" + f + ")", 1);
}
function flashBoard(countDown)
{
    if(countDown % 2 == 0)
        $("gameboard").style.backgroundColor = "rgb(255,255,255)";
    else
        $("gameboard").style.backgroundColor = "rgb(128,128,128)";
    if(countDown != 0)
        setTimeout("flashBoard("+ (countDown-1) + ")", 50);
}
function showHelp()
{
    alert("The Goal: Clear all of the black squares.\n\nThe Rule: Clicking on a square will toggle its color, and the color of the four squares above, below, left, and right of it.");
}

</script>

<div id="level"></div>
<div id="gameboard">
<div id="0_0" class="box" onclick="c(this)"></div>
<div id="0_1" class="box" onclick="c(this)"></div>
<div id="0_2" class="box" onclick="c(this)"></div>
<div id="0_3" class="box" onclick="c(this)"></div>
<div id="0_4" class="box" onclick="c(this)"></div>

<div id="1_0" class="box" onclick="c(this)" style="clear:left"></div>
<div id="1_1" class="box" onclick="c(this)"></div>
<div id="1_2" class="box" onclick="c(this)"></div>
<div id="1_3" class="box" onclick="c(this)"></div>
<div id="1_4" class="box" onclick="c(this)"></div>
<div id="2_0" class="box" onclick="c(this)" style="clear:left"></div>
<div id="2_1" class="box" onclick="c(this)"></div>
<div id="2_2" class="box" onclick="c(this)"></div>
<div id="2_3" class="box" onclick="c(this)"></div>
<div id="2_4" class="box" onclick="c(this)"></div>
<div id="3_0" class="box" onclick="c(this)" style="clear:left"></div>
<div id="3_1" class="box" onclick="c(this)"></div>
<div id="3_2" class="box" onclick="c(this)"></div>
<div id="3_3" class="box" onclick="c(this)"></div>
<div id="3_4" class="box" onclick="c(this)"></div>
<div id="4_0" class="box" onclick="c(this)" style="clear:left"></div>
<div id="4_1" class="box" onclick="c(this)"></div>

<div id="4_2" class="box" onclick="c(this)"></div>
<div id="4_3" class="box" onclick="c(this)"></div>
<div id="4_4" class="box" onclick="c(this)"></div>
</div>
<script type="text/javascript">showLevel();</script>
<div id="tools">
[<a href="#" onclick="showHelp();return false;">help</a>] &nbsp;
[<a href="#" onclick="showLevel();return false;">restart level</a>]<br />
</div>

     ]]>
  </Content> 
</Module>

