<?xml version="1.0" encoding="UTF-8"?>

<!-- Copyright 2009 Google Inc. -->
<!-- All Rights Reserved -->

<Module>
  <ModulePrefs title="Chat Rochambeau">
    <Require feature="rpc"/>
    <Require feature="google.sharedstate"/>
  </ModulePrefs>

  <Content type="html">
    <![CDATA[
      <!-- ===================================================== -->
      <!-- STYLESHEETS                                           -->
      <!-- ===================================================== -->
      <style type="text/css">
        .hide { display: none; }
        .show { display: block; }
        h4 { margin: 0; }
        ul { margin: 0; padding: 0; list-style: none; }
      </style>


      <!-- ===================================================== -->
      <!-- HTML                                                  -->
      <!-- ===================================================== -->

      <!-- Panel that allows the user to select their gesture. -->      
      <div id="select" class="hide">
        <h4>Select your gesture:</h4>
        <ul>
          <li><a href="javascript:void(0)" onclick="game.choose('rock');">Rock</a></li>
          <li><a href="javascript:void(0)" onclick="game.choose('paper');">Paper</a></li>
          <li><a href="javascript:void(0)" onclick="game.choose('scissors');">Scissors</a></li>
        </ul>
      </div>

      <!-- Panel asking the user to wait for the opponent to make a selection. -->
      <div id="wait" class="hide">
        <h4>Please wait for your opponent to choose.</h4>
      </div>

      <!-- Panel that displays results to the user. -->
      <div id="results" class="hide">
        <h4>Game over:</h4>
        <div>You chose: <span id="myChoice"></span></div>
        <div>They chose: <span id="opponentChoice"></span></div>
        <div>Result: <span id="outcome"></span></div>
        <div><a href="javascript:void(0)" onclick="game.playAgain();">Play again</a></div>
      </div>


      <!-- ===================================================== -->
      <!-- SCRIPTS                                               -->
      <!-- ===================================================== -->    
      <script>
        var game = function() {
          // Various pieces of state
          var idMe = undefined;
          var idOpponent = undefined;
          var state = {};

          // Fast access to elements in the UI
          var elemSelect = document.getElementById('select');
          var elemWait = document.getElementById('wait');
          var elemResults = document.getElementById('results');

          // Make an element on the page visible.
          function show(elem) {
            elem.setAttribute('class', 'show');
            elem.setAttribute('className', 'show');
          }

          // Make an element on the page invisible.
          function hide(elem) {
            elem.setAttribute('class', 'hide');
            elem.setAttribute('className', 'hide');
          }

          // Set the textual content of an element in a safe way
          function setText(elem, text) {
            if ('textContent' in elem) {
              elem.textContent = text;
            } else {
              elem.innerText = text;
            }
          }

          // Called by gadgets.sharedstate when the application is loaded.
          gadgets.sharedstate.initialize(function(myId, otherIds) {
            idMe = myId;
            idOpponent = otherIds[0];
          });

          // Called by gadgets.sharedstate when the state is updated.
          gadgets.sharedstate.setStateChangeHandler(function(newState) {
            state = newState || {};

            var choiceMe = state ? state[idMe] : undefined;
            var choiceOpponent = state ? state[idOpponent] : undefined;

            if (!choiceMe && !choiceOpponent) {
              // Game just started
              hide(elemWait);
              hide(elemResults);
              show(elemSelect);
            } else if (choiceMe && !choiceOpponent) {
              // I've chosen and am just waiting for my opponent to choose
              hide(elemSelect);
              hide(elemResults);
              show(elemWait);
            } else if (choiceMe && choiceOpponent) {
              // Everyone has chosen, setup the results page and show it
              var win = (choiceMe == 'rock' && choiceOpponent == 'scissors') ||
                        (choiceMe == 'scissors' && choiceOpponent == 'paper') ||
                        (choiceMe == 'paper' && choiceOpponent == 'rock');
              var tie = (choiceMe == choiceOpponent);

              // Setup the results page.
              var outcome;
              if (tie) {
                outcome = 'tie';
              } else if (win) {
                outcome = 'you win!';
              } else {
                outcome = 'you lose!';
              }
              setText(document.getElementById('outcome'), outcome);
              setText(document.getElementById('myChoice'), choiceMe);
              setText(document.getElementById('opponentChoice'), choiceOpponent);

              // Show the results page
              hide(elemSelect);
              hide(elemWait);
              show(elemResults);
            }
          });

          return {
            choose: function(gesture) {
              state[idMe] = gesture;
              gadgets.sharedstate.updateState(state);
            },

            playAgain: function() {
              state = {};
              gadgets.sharedstate.updateState(state);
            }
          };
        }();
      </script>
    ]]>
  </Content>
</Module>
