<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Connect Four">
    <Require feature="rpc" /> 
  </ModulePrefs>
  <Content type="html">
    <![CDATA[ 
<div id="content_div" style="height: 50px;"></div>
  <script type="text/javascript"
      src="http://wave-api.appspot.com/public/wave.js"></script>
    <script type="text/javascript">
    
    var waitForState = false;
    
    function stateUpdated() {
        waitForState = false;
        if(!wave.getState().get('nextPlayer'))
        {
            clearBoard();
        }
        updateVs();
        updateBoard();
    }
    
    function particpantsUpdated()
    {
        updateVs();
    }
    
    function updateVs()
    {
        var parts = wave.getParticipants();
        
        document.getElementById('player1').innerHTML = parts[0].getDisplayName();
        document.getElementById('player2').innerHTML = parts[1].getDisplayName();
        
        /*
        for(var i=0;i<parts.length();i++)
        {
            alert(i+': '+parts[i].getDisplayName())
        }*/
    }
    
    function clearBoard()
    {
        var o = {};
        
        for(var x=0;x<7;x++)
        {
            for(var y=0;y<6;y++)
            {
                o['board-'+x+'-'+y] = null;
            }
        }
        
        o.nextPlayer = 'red';
        
        wave.getState().submitDelta(o);
    }
    
    function updateBoard()
    {
        for(var x=0;x<7;x++)
        {
            for(var y=0;y<6;y++)
            {
                switch(wave.getState().get('board-'+x+'-'+y))
                {
                    case '1':
                        document.getElementById('cell-'+x+'-'+y).src = 'http://www.sdunster.com/wave/red.png';
                        break;
                    case '2':
                        document.getElementById('cell-'+x+'-'+y).src = 'http://www.sdunster.com/wave/blue.png';
                        break;
                    default:
                        document.getElementById('cell-'+x+'-'+y).src = 'http://www.sdunster.com/wave/blank.png';
                        break;
                }
            }
        }
        document.getElementById('nextPlayer').src = 'http://www.sdunster.com/wave/'+wave.getState().get('nextPlayer')+'.png';
        
        //drawWin();
    }
    
    function drawWin()
    {
        if(checkForWin())
        {
            alert('joy!');
        }
    }
    
    function checkForWin()
    {
        var last;
        var count;
        
        // vertical
        for(var y;y<6;y++)
        {
            last = 0;
            for(var x;x<7;x++)
            {
                if(getCell(x,y) == 0)
                {
                    y++;
                    x=0;
                    if(y<7)
                    {
                        continue;
                    }
                }
                if(last == getCell(x,y))
                {
                    count++;
                }
                else
                {
                    last = getCell(x,y);
                    count = 1;
                }
                if(count == 4)
                {
                    return true;
                }
            }
        }
        
        // horizontal
        for(var x;x<7;x++)
        {
            last = 0;
            for(var y;y<7;y++)
            {
                if(getCell(x,y) == null)
                {
                    last = 0;
                    continue;
                }
                if(last == getCell(x,y))
                {
                    count++;
                }
                else
                {
                    last = getCell(x,y);
                    count = 1;
                }
                if(count == 4)
                {
                    return true;
                }
            }
        }
    }
    
    function main()
    {
        if (wave && wave.isInWaveContainer())
        {
            wave.setStateCallback(stateUpdated);
            wave.setParticipantCallback(particpantsUpdated);
        }
    }
    gadgets.util.registerOnLoadHandler(main);
    
    function cellClick(cell)
    {
        if(!playerCanGo())
        {
            return;
        }
        
        if(waitForState)
        {
            return;
        }
        
        var bits = cell.id.split('-');

        if(bits[0] == 'cell')
        {
            dropInColumn(bits[1]);
        }
    }
    
    function dropInColumn(x)
    {
        var o = {};
        var y = 0;
        
        /*if(!playerCanGo())
        {
            return;
        }*/
        
        while(getCell(x,y) != null && y<6)
        {
            y++;
        }
        
        if(y>=6)
        {
            return;
        }
        
        if(wave.getState().get('nextPlayer') == 'red')
        {
            //document.getElementById('cell-'+x+'-'+y).src = 'http://www.sdunster.com/wave/red.png';
        }
        else
        {
            //document.getElementById('cell-'+x+'-'+y).src = 'http://www.sdunster.com/wave/blue.png';
        }
        
        setCell(x,y);
    }
    
    function playerCanGo()
    {        
        var parts = wave.getParticipants();

        if(wave.getState().get('nextPlayer') == 'red')
        {
            if(parts[0].getDisplayName() == wave.getViewer().getDisplayName())
            {
                return true;
            }
        }
        else
        {
            if(parts[1].getDisplayName() == wave.getViewer().getDisplayName())
            {
                return true;
            }
        }
    }
    
    function getCell(x,y)
    {
        return wave.getState().get('board-'+x+'-'+y);
    }
    
    function setCell(x,y)
    {
        if(wave.getState().get('board-'+x+'-'+y) == null)
        {
            
            var o = {};
            if(wave.getState().get('nextPlayer') == 'red')
            {
                o['board-'+x+'-'+y] = 1;
                o.nextPlayer = 'blue';
            }
            else
            {
                o['board-'+x+'-'+y] = 2;
                o.nextPlayer = 'red';
            }
            wave.getState().submitDelta(o);
            waitForState = true;
        }
    }

    </script>
    
    <div style="width:280px;display:block;border:1px solid black;text-align:center">
    <p><span id="player1"></span> vs. <span id="player2"></span></p>
    <p>Next player: <img id="nextPlayer" src="http://www.sdunster.com/wave/red.png" width="25" height="25" /></p>
    <table style="margin-left:auto;margin-right:auto;">
    <tr>
    <td><img id="cell-0-5" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-1-5" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-2-5" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-3-5" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-4-5" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-5-5" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-6-5" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    </tr>
    <tr>
    <td><img id="cell-0-4" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-1-4" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-2-4" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-3-4" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-4-4" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-5-4" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-6-4" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    </tr>
    <tr>
    <td><img id="cell-0-3" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-1-3" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-2-3" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-3-3" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-4-3" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-5-3" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-6-3" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    </tr>
    <tr>
    <td><img id="cell-0-2" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-1-2" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-2-2" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-3-2" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-4-2" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-5-2" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-6-2" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    </tr>
    <tr>
    <td><img id="cell-0-1" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-1-1" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-2-1" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-3-1" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-4-1" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-5-1" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-6-1" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    </tr>
    <tr>
    <td><img id="cell-0-0" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-1-0" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-2-0" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-3-0" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-4-0" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-5-0" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    <td><img id="cell-6-0" onmouseup="cellClick(this)" width="30" height="30" src="http://www.sdunster.com/wave/blank.png"></td>
    </tr>
    </table>
    <small><a href="javascript:clearBoard()" style="color:black;text-decoration:none;">Connect 4 by Sam Dunster</a></small>
    </div>
  ]]> 
  </Content>
</Module>
