/*
   copyright (c) 2009, keith drakard
   this program is distributed under the terms of the creative commons
   license at http://creativecommons.org/licenses/by-nc-sa/2.0/
*/

  // static global variables
  var maxheight= 6;

  // dynamic globals
  var selected= -1; var player= 1; var running= 1;
  var height= maxheight+1; var gone= 0;

  function go(x) {
    // this "trap" function exists to stop people clicking
    // quickly on another column while a disc is already
    // falling and screwing the game up... :)

    if (running && !gone) { fall(x); }
  }

  function fall(x) {
    // drop the current player's disc down column x
    // until it reaches the bottom or another disc

    if (gravity(x, height)) {
      // the space below is either off the board or another disc
      if (gone) {
        // then check for 4-in-a-row from this position
        if (check(x, height)) {
          eval('tmp= document.connect.score'+player+'.value'); tmp= tmp*1;
          eval('document.connect.score'+player+'.value= tmp+1');
          alert("Congratulations, player "+player); running= 0;
          // it would be nice to highlight the winning line(s) -
          // you'll need to use CSS or some more graphics and
          // fiddle with the line-checking functions below...

        } else {
          height= maxheight+1; swap_player(); gone= 0;
        }
      }

    } else {
      // nothing encountered
      if (height<= maxheight) document.images["x"+x+"y"+height].src= disc[0].src;
      height--; gone= 1;
      document.images["x"+x+"y"+height].src= disc[player].src;
      setTimeout('fall('+x+')', 100);
    }
  }

  function check(x, y) {
    // this isn't the most elegant solution, but it beats checking _every_ square...

    four= 0;
    for (sq= -3; sq<= 3; sq++) { four= chk(x+ sq, y, four); }      // check left && right
    if (four> 3) return(1);

    four= 0;
    for (sq= -3; sq<= 0; sq++) { four= chk(x, y+ sq, four); }      // check down
    if (four> 3) return(1);

    four= 0;
    for (sq= -3; sq<= 3; sq++) { four= chk(x+ sq, y+ sq, four); }  // check left-down && right-up
    if (four> 3) return(1);

    four= 0;
    for (sq= -3; sq<= 3; sq++) { four= chk(x+ sq, y- sq, four); }  // check left-up && right-down
    if (four> 3) return(1);

    return(0);
  }

  function gravity(x, y) {
    y--; if (y< 1 || (document.images["x"+x+"y"+y].src!= disc[0].src)) return(1);
      else return(0);
  }

  function chk(x, y, f) {
    if (x>0 && x<8 && y>0 && y<maxheight+1) {
      // square within board limits, so see if it matches the player
      if (document.images["x"+x+"y"+y].src== disc[player].src) return(f+1);
        else { if (f>= 4) return(f); else return(0); }

    } else return(f);
  }


  function select(x) {
    if (running) {
      if (x== -1) {
        if (selected!= -1) document.images["drop"+selected].src= drop[0].src;
        selected= -1;
      } else {
        if (selected!= -1) document.images["drop"+selected].src= drop[0].src;
        selected= x; document.images["drop"+selected].src= drop[1].src;
      }
    }
  }

  function preload() {
    if (document.images) {
      drop= new makeArray(2);
        drop[0].src= "/wp-content/scripts/images/connect/dropper.gif";
        drop[1].src= "/wp-content/scripts/images/connect/dropper2.gif";
      disc= new makeArray(3);
        disc[0].src= "/wp-content/scripts/images/connect/disc0.gif";
        disc[1].src= "/wp-content/scripts/images/connect/disc1.gif";
        disc[2].src= "/wp-content/scripts/images/connect/disc2.gif";
      sel= new makeArray(2);
        sel[0].src= "/wp-content/scripts/images/common/blank.gif";
        sel[1].src= "/wp-content/scripts/images/common/notblank.gif";

    } else {
      alert("Sorry, this game needs to run on a browser\nwhich supports the image object.");
    }    
  }

  function newgame() {
    // this just blanks the tiles:
    //
    // for (x=1; x<=7; x++) {
    //  for (y=maxheight; y>0; y--) {
    //    document.images["x"+x+"y"+y].src= disc[0].src;
    //  }
    // }

    // but this makes them "drop" out the bottom:
    //
    fall_end(6);

    if (selected!= -1) document.images["drop"+selected].src= drop[0].src;
    height= maxheight+1; swap_player(); gone= 0; running= 1;
  }

  function fall_end(loop) {
    for (y=1; y<=loop; y++) {
      for (x=1; x<=7; x++) {
        if (y== maxheight) {
          document.images["x"+x+"y"+y].src= disc[0].src;
        } else {
          document.images["x"+x+"y"+y].src= document.images["x"+x+"y"+(y+1)].src;
        }
      }
    }
    loop--; if (loop) setTimeout('fall_end('+loop+')', 50);
  }

  function swap_player() {
    // just a "decorative" function really...

    document.images["pa"+player].src= sel[0].src;
    document.images["pb"+player].src= sel[0].src;
    player= (3- player);
    document.images["pa"+player].src= sel[1].src;
    document.images["pb"+player].src= sel[1].src;
  }


  // The following functions were written by Martin Webb at http://www.irt.org/
  function makeArray(n) {
    this.length= n; for (i=0; i<n; i++) { this[i] = new Image(); }
    return this;
  }


function initialise() {  
   // I'll use CSS one day and stop all this table malarky... :)
   var output= '';

   output+= '<table cellpadding=8 cellspacing=0 border=0><tr>';

   // create the board
   output+= '<td><table cellpadding=0 cellspacing=0 border=0 bgcolor="#0193ff">';
   output+= '<tr>';
   for (var x=1; x<=7; x++) {
     output+= '<td><a href="javascript:go('+x+');" onMouseOver="select('+x+');" onMouseOut="select(-1);" onFocus="blur();">';
     output+= '<img src="/wp-content/scripts/images/connect/dropper.gif" name="drop'+x+'" width=50 height=40 alt="" border=0></a></td>';
   }
   output+= '</tr><tr>';
   for (var x=1; x<=7; x++) {
     output+= '<td align=center bgcolor="#0193ff"><big><b>'+x+'</b></big><br>&nbsp;</td>';
   }
   output+= '</tr>';
   for (var y=maxheight; y>0; y--) {
     output+= '<tr>';
     for (var x=1; x<=7; x++) {
       output+= '<td><a href="javascript:go('+x+');" onMouseOver="select('+x+');" onMouseOut="select(-1);" onFocus="blur();">';
       output+= '<img src="/wp-content/scripts/images/connect/disc0.gif" name="x'+x+'y'+y+'" width=50 height=50 alt="" border=0></a></td>';
     }
     output+= '</tr>';
   }
   output+= '<tr><td colspan=7 bgcolor="#0193ff">&nbsp;</td></tr>';
   output+= '</table></td>';


   // create the form for feedback to user (whose go, new game, score)
   output+= '<td valign=top><br><br><br><form name="connect" style="margin-left:2em"><table cellpadding=2 cellspacing=0 border=0 bgcolor="#0193ff">';
   output+= '<tr bgcolor="#0193ff"><td align=center>Player 1</td><td align=center>Player 2</td></tr>';
   output+= '<tr bgcolor="#0193ff"><td align=center><img src="/wp-content/scripts/images/common/notblank.gif" name="pa1" width=50 height=5 alt="" border=0><br>';
   output+= '<img src="/wp-content/scripts/images/connect/disc1.gif" width=50 height=50 alt=" Player 1 " border=0><br>';
   output+= '<img src="/wp-content/scripts/images/common/notblank.gif" name="pb1" width=50 height=5 alt="" border=0></td>';
   output+= '<td align=center><img src="/wp-content/scripts/images/common/blank.gif" name="pa2" width=50 height=5 alt="" border=0><br>';
   output+= '<img src="/wp-content/scripts/images/connect/disc2.gif" width=50 height=50 alt=" Player 2 " border=0><br>';
   output+= '<img src="/wp-content/scripts/images/common/blank.gif" name="pb2" width=50 height=5 alt="" border=0></td></tr>';
   output+= '<tr bgcolor="#0193ff"><td align=center><input type="text" name="score1" size="3" value=0 onFocus="blur();"></td>';
   output+= '<td align=center><input type="text" name="score2" size="3" value=0 onFocus="blur();"></td></tr>';
   output+= '<tr bgcolor="#0193ff"><td colspan=2 align=center><br><input type="button" value=" New Game " onClick="newgame();">';
   output+= '<br>&nbsp;</td></tr>';
   output+= '</table></form></td>';

   output+= '</tr></table>';

   document.write(output);
   preload();

}