// Rock Paper Scissors Game
// Copyright by ShondasAnimalCrackups 2008
// rock-paper-scissors javascript code copyright ShondasAnimalCrackups 2008
// License: Creative Commons with Attribution, Noncommercial and ShareAlike clauses active

var pics;
var pchoice=0;
var pcharnum=0;
var cchoice=0;
var ccharnum=0;
var pwins=0;
var pdraws=0;
var plosses=0;
var inprogress=0;
var maxchars=4;

// Initialize the major variables
function main(){
pchoice=0;
pcharnum=0;
cchoice=0;
ccharnum=0;
pwins=0;
pdraws=0;
plosses=0;
pics=new Array(4) // slot 0 is unused for simplicity sake
pics[1]=new Array(4)  // rock
pics[2]=new Array(4)  // paper
pics[3]=new Array(4)  // scissors

// Set up the Rock chars
pics[1][0]="rockmouse.gif";
pics[1][1]="rocksquirrel.gif";
pics[1][2]="rockgorilla.gif";
pics[1][3]="rockowl.gif";

// Now the Paper chars
pics[2][0]="paperkoala.gif";
pics[2][1]="paperraccoon.gif";
pics[2][2]="paperdog.gif";
pics[2][3]="papercat.gif";

// Now the Scissors chars
pics[3][0]="scissorspanda.png";
pics[3][1]="scissorspenguin.png";
pics[3][2]="scissorsbear.gif";
pics[3][3]="scissorslion.gif";

// Initialize initial player and computer char choices
pchoice=0;
pcharnum=0;
cchoice=0;
ccharnum=0;
FinishSetup();
//setTimeout("FinishSetup()",100);
}

function FinishSetup(){
create_board();
//reset form values
divob=document.getElementById('winmsg');
divob.reset();
}

// CLICKING start_game button is RESETTING ALL VARIABLES AND RELOADING PAGE!?
function start_game(){
   if(inprogress != 0){return;}

   // Disable the start game button
   wdivob=document.getElementById('play');
   wdivob.style.visibility='hidden';

   // make chars invis
   divob=document.getElementById('pchar');
   divob.style.visibility='hidden';
   divob.style.height=100;
   divob.style.width=100;
   divob=document.getElementById('cchar');
   divob.style.visibility='hidden';
   divob.style.height=100;
   divob.style.width=100;
   
   // make pen visible
   divob=document.getElementById('ppen');
   divob.style.visibility='visible';
}


// This function is called when the player clicks their choice of character
// pc is the type of char (paper, rock or scissor)
// pn is the charnum for that type of char
function make_choice( pc, pn ){
   pchoice=pc;
   pcharnum=pn;

   if(inprogress!=0){ return; } // already playing
   inprogress=1;
   // Hide the pen first
   divob=document.getElementById('ppen');
   divob.style.visibility='hidden';

   // Set the players tile to the correct char 
   divob=document.getElementById('pchar');
   divob.src=pics[pchoice][pcharnum];
   divob.style.top=400;
   divob.style.left=calc_x(10);
   divob.style.visibility='visible';
   // Computer makes its choice of char type (rock,paper,scissor)
   cchoice=1+Math.floor((Math.random()*3));

   // Now computer picks a char num
   ccharnum=Math.floor( Math.random()*maxchars);

   // Check to make sure computer did not pick the same char
   if( (pchoice==cchoice) && (pcharnum==ccharnum) ){ 
      // repick computer char to show
      ccharnum++;
//      if (ccharnum > 2) ccharnum=0;
      if (ccharnum > (maxchars-1) ) ccharnum=0;
   }
   //Once we display the char we pause for 1 second 
   setTimeout("phase2()",1000);
} // END OF PLAYER CHOICE FUNCTION


function phase2(){
   // Show the computer's char as a pulsating cloud (full of movement)
   //cchosen TOP and LEFT are reset to start values
   divob=document.getElementById('cchar');
   divob.src='cloud.gif';
   divob.style.top=400;
   divob.style.left=calc_x(90);  // flush against right edge of grid 
   divob.style.visibility='visible';
   setTimeout("phase3()",1000);
}

function phase3(){
   // Move both player and computer closer to middle of screen

   divob=document.getElementById('pchar');
   divob.style.left=calc_x(10);

   divob=document.getElementById('cchar');
   divob.style.left=calc_x(90);

   // pause for 1 second
   setTimeout("phase4()",1500);
}


function phase4(){
   // Increase size of both chars and move closer to middle of screen

   divob=document.getElementById('pchar');
   divob.style.top=300;
   divob.style.left=calc_x(25);
   divob.style.height=200;
   divob.style.width=200;

   divob=document.getElementById('cchar');
   divob.style.top=300;
   divob.style.left=calc_x(75);  
   divob.style.height=200;
   divob.style.width=200;

   setTimeout("phase5()",1500);
}

function calc_x( pct ){
   return Math.floor( ((pct * document.width * 0.9) / 100) - 100 );
}

function phase5(){
   // Move both chars to center of screen
   centerval=Math.floor((document.width)/2);

   divob=document.getElementById('pchar');
   divob.style.left=calc_x(50) - 200;

   divob=document.getElementById('cchar');
   divob.style.left=calc_x(50)+200;
   // Show computer char
   divob.src=pics[cchoice][ccharnum];

   setTimeout("phase6()",1500);
}

function phase6(){
   show_winner();
}


function show_winner(){
   // winner set to winner, 0=tie; 1=player; 2=computer
   var msgtxt;
   switch(pchoice){
      case 1: // player chose rock
        switch(cchoice){
          case 1: // computer chose rock, tie; winner=0
             winner=0; break;
          case 2: // computer chose paper; player wins; winner=2 // computer
             winner=2; break;
          case 3: // computer chose scissors; player wins; winner=1;
             winner=1; break;
        }
        break;
      case 2: // player chose paper 
        switch(cchoice){
          case 1: // computer chose rock
             winner=1; break;
          case 2: // computer chose paper
             winner=0; break;
          case 3: // computer chose scissors
             winner=2; break;
        }
        break;
      case 3: // player chose scissors
        switch(cchoice){
          case 1: // computer chose rock
             winner=2; break;
          case 2: // computer chose paper
             winner=1; break;
          case 3: // computer chose scissors
             winner=0; break;
        }
        break;
   }

   // If a winner then show them as ultimate char
   if( winner==1 ){
      // player wins
      wdivob=document.getElementById('pchar');
      ldivob=document.getElementById('cchar');
      msgtxt="You Win";
      pwins++;
   }else if (winner==2) {
      // computer wins
      wdivob=document.getElementById('cchar');
      ldivob=document.getElementById('pchar');
      msgtxt="You Lost";
      plosses++;
   }else{
      // no winner
      wdivob=document.getElementById('pchar');
      ldivob=document.getElementById('cchar');
      wdivob.src='cloud.gif'; // make it the clashing cloud
      msgtxt="We Tied";
      pdraws++;
   }

   // Make the winner object 300px
   wdivob.style.refresh;
   wdivob.style.left=calc_x(50)-150;
   wdivob.style.top=200;
   wdivob.style.height=300;
   wdivob.style.width=300;

   // Hide the loser object
   ldivob.style.visibility='hidden';

   // update scores
   wdivob=document.getElementById('wins');
   wdivob.value=pwins;
   wdivob=document.getElementById('draws');
   wdivob.value=pdraws;
   wdivob=document.getElementById('losses');
   wdivob.value=plosses;

   // Print winner message here
   alert( msgtxt);

   // reenable the Play Again button
   wdivob=document.getElementById('play');
   wdivob.style.visibility='visible';

   inprogress=0;  // can play again
}


function create_board(){
// Force boardchar to be a containing block by using absolute positioning
document.writeln("<DIV name='boardchar' style='position:absolute;float:left;left:160;top:0;z-index:1;'>");
// Create the tiles for the player and computer images which will 'battle'
   document.writeln("<img id='pchar' src='cloud.gif' height='100' width='100' style='left:160;top:300;z-index:5;visibility:hidden;z-index:3;position:absolute;'>");  

   document.writeln("<img id='cchar' src='cloud.gif' height='100' width='100' style='left:100;top:300;z-index:8;visibility:hidden;position:absolute;'> ");  
document.writeln("</DIV>"); // End of playing board

// Force board to be a containing block by using absolute positioning
document.writeln("<DIV name='board' style='position:static;top:300;left:160;'>");
document.writeln("<TABLE id='ppen'>");
for( x=1; x <=3; x++){
   document.writeln("<TR align='center' valign='center'>");

   // Now cycle through each choice for each type of char
//   for( y=0; y <= 2; y++){
   for( y=0; y <= (maxchars - 1); y++){  
      document.writeln("<TD align='center' valign='center'>");
      document.writeln(eval("<a href='javascript:make_choice("+x+","+y+");'><img src='"+pics[x][y]+"' width='100' height='100'></img></a>"));
      document.writeln("</TD>");
   }
   document.writeln("</TR>");
}
document.writeln("</TABLE>");
document.writeln("</DIV>");


   // Winning message tile
   document.writeln("<center>");
   document.writeln("<DIV style='position:static;left:40%;top:500'");
   document.writeln("<FORM id='winmsg'>");
   document.writeln("<label for='wins'>Wins:</label><input text id='wins' size=4 value='0' readonly></text>; ");
   document.writeln("<label for='draws'>Draws:</label><input text id='draws' size=4 value='0' readonly></text>; ");
   document.writeln("<label for='losses'>Losses:</label><input text id='losses' size=4 value='0' readonly> </text>; ");
   document.writeln("<BR>");
   document.writeln("<a href='javascript:start_game();'><IMG id='play' src='play.png'></a>");
   document.writeln("</FORM>");
   document.writeln("</DIV>");
   document.writeln("</center>");
}