<?xml version="1.0" encoding="utf-8"?>
<!--

   Licensed to the Apache Software Foundation (ASF) under one or more
   contributor license agreements.  See the NOTICE file distributed with
   this work for additional information regarding copyright ownership.
   The ASF licenses this file to You under the Apache License, Version 2.0
   (the "License"); you may not use this file except in compliance with
   the License.  You may obtain a copy of the License at

       http://www.apache.org/licenses/LICENSE-2.0

   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.

-->

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"    
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="800" height="600" viewBox="0 0 800 600" 
  onload="loadHandler(evt)"
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">

<script type="text/ecmascript" xlink:href="script/util.js"/>
<script type="text/ecmascript" xlink:href="script/board.js"/>
<script type="text/ecmascript" xlink:href="script/deck.js"/>
<script type="text/ecmascript" xlink:href="script/card.js"/>
<script type="text/ecmascript" xlink:href="script/pile.js"/>
<script type="text/ecmascript"><![CDATA[
    var svgns   = "http://www.w3.org/2000/svg";
    var xlinkns = "http://www.w3.org/1999/xlink";
    var cg = document.getElementById("cards");
    var moveGroup = document.getElementById("move");
    var dragGroup = document.getElementById("drag");
    var root     = document.getRootElement();
    var allowDrag = true;

    var BOARD = new Board(cg, moveGroup);
    BOARD.setNotifyMoveDone(towersMoveDone);

    var DECK_PILES = new Array();
    DECK_PILES[0] = new Pile(BOARD, 2.5,   5, 75, 105, 0, 0, 0, 0);
    DECK_PILES[1] = new Pile(BOARD, 82.5,  5, 75, 105, 0, 0, 0, 0);
    DECK_PILES[2] = new Pile(BOARD, 642.5, 5, 75, 105, 0, 0, 0, 0);
    DECK_PILES[3] = new Pile(BOARD, 722.5, 5, 75, 105, 0, 0, 0, 0);

    var HOLD_PILES = new Array();
    HOLD_PILES[0] = new Pile(BOARD, 242.5, 5, 75, 105, 0, 0, 0, 0);
    HOLD_PILES[1] = new Pile(BOARD, 322.5, 5, 75, 105, 0, 0, 0, 0);
    HOLD_PILES[2] = new Pile(BOARD, 402.5, 5, 75, 105, 0, 0, 0, 0);
    HOLD_PILES[3] = new Pile(BOARD, 482.5, 5, 75, 105, 0, 0, 0, 0);

    var piles;

  function loadHandler(evt) {
     getURL("cards/default.svg", setupCards);  
  }
  
  function setupCards(result) {
     if (!result.content) 
        return;
     var doc = parseXML(result.content, document);
     var fc;
     for (fc=doc.firstChild; fc; fc = fc.nextSibling) {
        if (fc.nodeName == "svg") break;
     }
     if (fc.nodeName != "svg") return;
     for (fc=fc.firstChild; fc; fc = fc.nextSibling) {
        if (fc.nodeName == "defs") break;
     }
     if (fc.nodeName != "defs") return;
     root.appendChild(fc);
     init();
  }

    function init() {
      var deck = new Deck(document, 1, "", 75, 105);
      deck.shuffle();
      DECK_PILES[0].suite = SUITE_DIAMOND;
      DECK_PILES[0].setDragCheck(deckDragCheck);
      DECK_PILES[0].setDropCheck(deckDropCheck);
      DECK_PILES[1].suite = SUITE_CLUB;
      DECK_PILES[1].setDragCheck(deckDragCheck);
      DECK_PILES[1].setDropCheck(deckDropCheck);
      DECK_PILES[2].suite = SUITE_HEART;
      DECK_PILES[2].setDragCheck(deckDragCheck);
      DECK_PILES[2].setDropCheck(deckDropCheck);
      DECK_PILES[3].suite = SUITE_SPADE;
      DECK_PILES[3].setDragCheck(deckDragCheck);
      DECK_PILES[3].setDropCheck(deckDropCheck);

      for (var i=0; i<4; i++) {
        HOLD_PILES[i].setDragCheck(holdDragCheck);
        HOLD_PILES[i].setDropCheck(holdDropCheck);
      }
      HOLD_PILES[0].addCard(deck.dealCard(true));
      HOLD_PILES[3].addCard(deck.dealCard(true));

      piles = new Array();
      for (var i=0; i<10; i++) {
        piles[i] = new Pile(BOARD, 2.5+80*i, 120, 75, 105, 0, 25, 0, 0);
        piles[i].setDragCheck(dragCheck);
        piles[i].setDropCheck(dropCheck);
      }

      for (var y=0; y<5; y++) {
        for (var x=0; x<10; x++) {
          piles[x].addCard(deck.dealCard(true));
        }
      }

      towersMoveDone();
    }

    function dragCheck(pile, card, index) {
      if (!allowDrag) return false;

      var sz = pile.size();
      // Not enough free hold spots for drag.
      if ((sz - index) > (freeHold()+1))
        return false; 

      var prevCard = card;
      for (var i=index+1; i<sz; i++) {
        var c = pile.checkCard(i);
        if ((!prevCard.suiteMatch(c)) ||
            (!prevCard.valueOneLower(c)))
          return false;
        prevCard = c;
      }
      return dragGroup;
    }

    function dropCheck(fromPile, toPile, cards) {
      var dragBottomCard = cards[0];
      var pileTopCard = toPile.checkTopCard();
      if (!pileTopCard) {
        if (dragBottomCard.getValue() != 13) 
          return false;
      } else if ((!pileTopCard.suiteMatch(dragBottomCard)) ||
                 (!pileTopCard.valueOneLower(dragBottomCard))) {
        return false;
      }
      for (var i=0; i<cards.length; i++) {
        toPile.addCard(cards[i]);
      }
      return new SimpleMoveInfo(cards, fromPile, cards, toPile);
    }

    function freeHold() {
      var count = 0;
      for (var i=0; i<4; i++) {
        if (HOLD_PILES[i].size() == 0) count++;
      }
      return count;
    }

    function holdDragCheck(pile, card, index) {
      if (!allowDrag) return false;
      return dragGroup;
    }

    function holdDropCheck(fromPile, toPile, cards) {
      if ((toPile.cards.length == 0) && (cards.length == 1)) {
        toPile.addCard(cards[0]);
        return new SimpleMoveInfo(cards, fromPile, cards, toPile);
      }
      return false;
    }

    function deckDragCheck(pile, card, index) {
      return false;
    }

    function deckDropCheck(fromPile, toPile, cards) {
      if (toPile.suite != cards[0].suite) {
        return false;
      }
      var top = toPile.checkTopCard();
      if (top == null) {
        if (cards[cards.length-1].getValue() != 1) 
          return false;
      } else {
        if (! top.valueOneHigher(cards[cards.length-1]))
        return false;
      }

      // Success!
      var toCards = new Array();
      for (var i=cards.length-1; i>=0; i--) {
        toCards.push(cards[i]);
        toPile.addCard(cards[i]);
      }
      return new SimpleMoveInfo(cards, fromPile, toCards, toPile);
    }

    function towersMoveDone() {
      for (var i=0; i<14; i++) {
        var pile;
        if (i<10) {
          pile = piles[i];
        } else {
          pile = HOLD_PILES[i-10];
        }
        var c = pile.checkTopCard();
        while (c != null) {
          var suite = c.getSuite();
          var suitePile = DECK_PILES[suite-1];
          var spc = suitePile.checkTopCard();
          if (spc == null) {
            if (c.getValue() != 1)
              break;
          } else if (!spc.valueOneHigher(c)) {
            break;
          }
          var mi1 = BOARD.getMoveInfo();
          var cs = new Array();
          cs.push(c);
          var mi2 = new SimpleMoveInfo(cs, pile, cs, suitePile);
          var mi = new MultiMoveInfo(mi1, mi2);
          BOARD.setMoveInfo(mi);

          suitePile.moveCardTo(c, 40);
          setTimeout("towersMoveDone()", 150);
          allowDrag = false;
          return;
        }
      }

      allowDrag = true;

      for (var i=0; i<10; i++) {
        var pile = piles[i];
        if (pile.checkTopCard() != null) {
          return;
        }
      }
      
      BOARD.won();
    }

function showMore() {
    var moreG = document.getElementById("more");
    if (!moreG) return;
    var style = moreG.style;
    if (style.getPropertyValue("display") == "inline") {
      hideMore();
      return;
    }
    style.setProperty("display", "inline", "");
    style.setProperty("pointer-events", "fill", "");
    moreG.addEventListener("click", hideMore, false);
}

function hideMore() {
    var moreG = document.getElementById("more");
    if (!moreG) return;
    moreG.removeEventListener("click", hideMore, false);
    moreG.style.setProperty("pointer-events", "none", "");
    moreG.style.setProperty("display", "none", "");
}

]]></script>

  <g id="background" style="pointer-events:none;">
    <rect x="0" y="0" width="100%" height="100%" fill="#080" pointer-events="fill"/>
    <rect rx="6" ry="6" x="7.5" y="5" width="65" height="104" 
      fill="white" stroke="black"/>
    <g transform="translate(7.5, 5)">
      <path fill="#FF0000" d="M49.662,52.177L32.643,78.178L15.625,52.177
        l17.019-26.001L49.662,52.177z"/>
      <path fill="none" stroke="#FFFFFF" stroke-width="2" 
        d="M32.643,32.567c3.657,5.587,11.083,16.932,12.836,19.61
        c-1.753,2.678-9.179,14.022-12.836,19.61
        c-3.657-5.588-11.083-16.933-12.836-19.61
        C21.56,49.499,28.986,38.154,32.643,32.567z
        M32.643,32.567c3.657,5.587,11.083,16.932,12.836,19.61
        c-1.753,2.678-9.179,14.022-12.836,19.61
        c-3.657-5.588-11.083-16.933-12.836-19.61
        C21.56,49.499,28.986,38.154,32.643,32.567z"/>
      <path fill="#FFFFFF" d="M29.194,45.139
        c0,0,1.726-2.635,3.449-5.269c1.724,2.634,6.388,9.758,8.056,12.306
        c-1.6,2.442-4.95,7.563-8.056,12.307
        c-3.105-4.744-6.456-9.864-8.056-12.307
        C26.255,49.629,29.194,45.139,29.194,45.139z"/>
      <path fill="#FFFFFF" d="M29.194,45.139c0,0,1.726-2.635,3.449-5.269
        c1.724,2.634,6.388,9.758,8.056,12.306
        c-1.6,2.442-4.95,7.563-8.056,12.307
        c-3.105-4.744-6.456-9.864-8.056-12.307
        C26.255,49.629,29.194,45.139,29.194,45.139z
        M29.194,45.139c0,0,1.726-2.635,3.449-5.269
        c1.724,2.634,6.388,9.758,8.056,12.306
        c-1.6,2.442-4.95,7.563-8.056,12.307
        c-3.105-4.744-6.456-9.864-8.056-12.307
        C26.255,49.629,29.194,45.139,29.194,45.139z"/>
      <path d="M25.587,52.177c0,0.552-0.447,1-1,1s-1-0.448-1-1
        s0.447-1,1-1S25.587,51.625,25.587,52.177z"/>
      <path d="M33.643,39.871c0,0.552-0.447,1-1,1s-1-0.448-1-1
        s0.447-1,1-1S33.643,39.318,33.643,39.871z"/>
      <path d="M41.699,52.177c0,0.552-0.447,1-1,1s-1-0.448-1-1
        s0.447-1,1-1S41.699,51.625,41.699,52.177z"/>
      <path d="M33.643,64.483c0,0.552-0.447,1-1,1s-1-0.448-1-1
        s0.447-1,1-1S33.643,63.932,33.643,64.483z"/>
      <path d="M29.106,57.552c0,0.552-0.447,1-1,1s-1-0.448-1-1
        s0.447-1,1-1S29.106,57,29.106,57.552z"/>
      <path d="M38.18,57.552c0,0.552-0.447,1-1,1s-1-0.448-1-1
        s0.447-1,1-1S38.18,57,38.18,57.552z"/>
      <path d="M38.18,46.802c0,0.552-0.447,1-1,1s-1-0.448-1-1
        s0.447-1,1-1S38.18,46.25,38.18,46.802z"/>
      <path d="M29.105,46.802c0,0.552-0.447,1-1,1s-1-0.448-1-1
        s0.447-1,1-1S29.105,46.25,29.105,46.802z"/>
      <path d="M33.643,78.178c0,0.551-0.447,1-1,1s-1-0.449-1-1
        c0-0.553,0.447-1,1-1S33.643,77.625,33.643,78.178z"/>
      <path d="M50.662,52.177c0,0.551-0.447,1-1,1s-1-0.449-1-1
        c0-0.553,0.447-1,1-1S50.662,51.624,50.662,52.177z"/>
      <path d="M33.643,26.176c0,0.551-0.447,1-1,1s-1-0.449-1-1
        c0-0.553,0.447-1,1-1S33.643,25.623,33.643,26.176z"/>
      <path d="M16.625,52.177c0,0.551-0.447,1-1,1s-1-0.449-1-1
        c0-0.553,0.447-1,1-1S16.625,51.624,16.625,52.177z"/>
    </g>
    <rect rx="6" ry="6" x="87.5" y="5" width="65" height="104" 
      fill="white" stroke="black"/>
    <g transform="translate(87.5, 5)">
      <path d="M29.224,57.547c0,7.585-3.034,14.412-8.344,14.412v1.517h24.273
        v-1.517c-6.068,0-8.345-6.827-8.345-14.412
        c2.774,3.661,7.948,4.469,11.707,1.829
        c3.856-2.709,4.787-8.032,2.078-11.888s-8.032-4.787-11.889-2.078
        c3.287-3.325,3.287-8.675,0-12c-3.313-3.351-8.717-3.382-12.068-0.068
        c-3.351,3.313-3.382,8.717-0.068,12.068
        c-3.759-2.641-8.933-1.832-11.706,1.829
        c-2.847,3.756-2.109,9.108,1.647,11.955
        c3.756,2.847,9.108,2.108,11.955-1.647"/>
      <path fill="#FFFFFF" d="M25.282,52.542c0,2.139-1.734,3.873-3.873,3.873
        s-3.873-1.734-3.873-3.873s1.734-3.873,3.873-3.873
        S25.282,50.403,25.282,52.542z"/>
      <path fill="#FFFFFF" d="M47.532,52.542c0,2.139-1.734,3.873-3.873,3.873
        s-3.873-1.734-3.873-3.873s1.734-3.873,3.873-3.873
        S47.532,50.403,47.532,52.542z"/>
      <path fill="#FFFFFF" d="M36.579,39.411c0,2.139-1.734,3.873-3.873,3.873
        s-3.873-1.734-3.873-3.873s1.734-3.873,3.873-3.873
        S36.579,37.272,36.579,39.411z"/>
    </g>    

    <rect rx="6" ry="6" x="647.5" y="5" width="65" height="104" 
      fill="white" stroke="black"/>
    <g transform="translate(647.5, 5)">
      <path fill="#FF0000" d="M13.143,42.426
        c0-6.118,3.822-11.088,8.411-11.088c6.118,0,11.089,4.971,11.089,11.088
        c0-6.118,4.971-11.088,11.089-11.088c4.588,0,8.412,4.971,8.412,11.088
        c0,8.03-16.824,17.207-19.501,30.589
        C29.966,59.633,13.143,50.456,13.143,42.426z"/>
      <path fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" 
        stroke-miterlimit="7" stroke-dasharray="0 6.139" 
        d="M32.643,30.822c-2.89-2.762-6.784-4.484-11.089-4.484
        c-7.395,0-13.411,7.217-13.411,16.088c0,5.695,4.452,10.55,9.166,15.69
        c4.35,4.741,9.278,10.116,10.431,15.88c0.468,2.337,2.52,4.02,4.903,4.02
        s4.436-1.683,4.903-4.02c1.152-5.764,6.082-11.139,10.431-15.88
        c4.714-5.14,9.167-9.995,9.167-15.69c0-8.871-6.017-16.088-13.412-16.088
        C39.427,26.338,35.533,28.06,32.643,30.822z"/>
      <path d="M32.643,53.509c-0.749-2.514-1.698-4.628-4.891-7.82
        c-2.132-2.132-3.111-4.239-3.111-6.42c0-1.104-0.896-2-2-2
        s-2,0.896-2,2c0,4.18,2.668,6.36,5.021,8.285
        c2.562,2.094,5.259,5.044,5.909,9.791
        c0.266,1.938,0.411,4.157,1.071,4.817
        c0.66-0.66,0.806-2.879,1.071-4.817
        c0.65-4.747,3.348-7.697,5.909-9.791c2.354-1.924,5.021-4.105,5.021-8.285
        c0-1.104-0.896-2-2-2s-2,0.896-2,2c0,2.182-0.979,4.289-3.111,6.42
        C34.341,48.881,33.392,50.995,32.643,53.509z"/>
      <path fill="#FFFFFF" d="M43.77,39.268
        c0,0.621-0.504,1.125-1.125,1.125s-1.125-0.504-1.125-1.125
        s0.504-1.125,1.125-1.125S43.77,38.647,43.77,39.268z"/>
      <path fill="#FFFFFF" d="M23.766,39.268
        c0,0.621-0.504,1.125-1.125,1.125s-1.125-0.504-1.125-1.125
        s0.504-1.125,1.125-1.125S23.766,38.647,23.766,39.268z"/>
    </g>
    <rect rx="6" ry="6" x="727.5" y="5" width="65" height="104" 
      fill="white" stroke="black"/>
    <g transform="translate(727.5, 5)">
      <path fill="#000" d="M49.723,52.583c1.456,1.402,2.322,3.306,2.421,5.325
        c0.213,4.374-3.159,8.093-7.532,8.306
        c-4.374,0.214-8.092-3.158-8.306-7.532
        c0,9.352,2.439,13.417,8.132,13.417v1.627H20.856v-1.627
        c5.692,0,8.132-4.065,8.132-13.417c-0.099,2.02-0.965,3.924-2.421,5.325
        c-3.154,3.037-8.173,2.941-11.21-0.213
        c-3.036-3.155-2.94-8.174,0.214-11.21
        c3.253-3.253,11.384-9.758,17.076-21.955
        C38.339,42.826,46.47,49.331,49.723,52.583z"/>
      <path fill="#FFF" d="M25.115,58.682c0,2.139-1.734,3.873-3.873,3.873
        s-3.873-1.734-3.873-3.873s1.734-3.873,3.873-3.873
        S25.115,56.543,25.115,58.682z"/>
      <path fill="#FFF" d="M48.485,58.682c0,2.139-1.734,3.873-3.873,3.873
        s-3.873-1.734-3.873-3.873s1.734-3.873,3.873-3.873
        S48.485,56.543,48.485,58.682z"/>
      <path fill="#F00" d="M21.631,52.328
        c3.035-2.934,7.202-11.569,11.016-17.667
        c3.836,6.134,8.028,14.783,11.068,17.718
        c-3.042,0.432-5.398,3.015-5.469,6.157
        c0-12.762-1.508-17.526-5.6-21.618
        c-4.092,4.092-5.039,8.856-5.039,21.632
        C27.54,55.229,24.919,52.528,21.631,52.328z"/>
    </g>

    <g transform="translate(242.5, 5)" clip-path="url(#castleClip)">
      <linearGradient id="sky" x1=".5" y1="1" x2=".5" y2="0">
        <stop  offset="0.5" style="stop-color:#8E7BFF"/>
        <stop  offset="1" style="stop-color:#810062"/>
      </linearGradient>
      <linearGradient id="castle" x1="0" y1=".5" x2="1" y2=".5">
        <stop  offset="0" style="stop-color:#898989"/>
        <stop  offset="0.3" style="stop-color:#A7A9A9"/>
        <stop  offset="1" style="stop-color:#898989"/>
      </linearGradient>
      <clipPath id="castleClip">
        <rect rx="6" ry="6" x=".5" y=".5" width="74" height="105"/>
        <rect rx="6" ry="6" x="80.5" y=".5" width="74" height="105"/>
        <rect rx="6" ry="6" x="160.5" y=".5" width="74" height="105"/>
        <rect rx="6" ry="6" x="240.5" y=".5" width="74" height="105"/>
      </clipPath>

      <rect fill="url(#sky)" x=".5" y=".5" width="315" height="105"/>
      <g fill="#FFFFA9">
        <path d="M10,39h-1v-1h1z"/>
        <path d="M18,16h-1v-1h1z"/>
        <path d="M33,25h-1v-1h1z"/>
        <path d="M46,12h-1v-1h1z"/>
        <path d="M59,31h-1v-1h1z"/>
        <path d="M92,18h-1v-1h1z"/>
        <path d="M99,29h-1v-1h1z"/>
        <path d="M127,37h-1v-1h1z"/>
        <path d="M140,10h-1v-1h1z"/>
        <path d="M182,15h-1v-1h1z"/>
        <path d="M224,20h-1v-1h1z"/>
        <path d="M230,39h-1v-1h1z"/>
        <path d="M253,46h-1v-1h1z"/>
        <path d="M254,15h-1v-1h1z"/>
        <path d="M262,32h-1v-1h1z"/>
        <path d="M274,20h-1v-1h1z"/>
        <path d="M280,43h-1v-1h1z"/>
        <path d="M291,27h-1v-1h1z"/>
        <path d="M312,39h-1v-1h1z"/>
      </g>
      <path fill="#C3C7D8" 
        d="M127.333,50.667c0,10.494-8.506,19-19,19s-19-8.506-19-19
        s8.506-19,19-19S127.333,40.173,127.333,50.667z"/>
      
      <path fill="#FFFFFF" stroke="#000000" 
        d="M257.11,68.541c-30.157-7.08-27.901-22.959-77.54-22.959
        c-27.382,0-61.187,9.457-71.545,16.265
        c-7.651-4.001-17.214-7.379-29.618-9.288
        c-25.283-3.89-54.651,0-77.907,11.627V105.5h315
        V71.163C286.928,72.842,269.354,71.415,257.11,68.541z"/>
      <path fill="none" stroke="#000000" 
        d="M0.5,64.186c23.256-11.627,52.624-15.518,77.907-11.627
        c30.232,4.651,43.604,18.023,53.488,27.907"/>
      <path fill="none" stroke="#000000" 
        d="M108.025,61.846c10.358-6.808,44.163-16.265,71.545-16.265
        c69.789,0,36.976,31.396,135.93,25.582"/>
      
      <g fill="url(#castle)" stroke="#000">
        <path d="M177.5,50h-7V27.5h7V50z"/>
        <path fill="#898989" d="M201,50h-23.5V34H201V50z"/>
        <path d="M208,50h-7V27.5h7V50z"/>
        <path fill="#9E6D5C" 
          d="M191.922,50c0,0,0-4.658,0-6s0-3.704-2.672-5.409
          c-2.672,1.705-2.672,4.066-2.672,5.409s0,6,0,6"/>
        <g stroke-width="0.5">
          <path d="M178.485,21.22v1.93h-1.409v-1.93h-2.227v1.93h-1.485v-1.93
            h-2.227v1.93h-1.559v-1.93h-2.227v1.93h1.147v4.35h11
            v-4.35h1.212v-1.93H178.485z"/>
          <path d="M208.985,21.22v1.93h-1.409v-1.93h-2.227v1.93h-1.485v-1.93
            h-2.227v1.93h-1.559v-1.93h-2.227v1.93H199v4.35h11v-4.35h1.212
            v-1.93H208.985z"/>
          <path fill="#9B9B49" 
            d="M205.836,39.056c0,0,0-2.329,0-3s0-1.852-1.336-2.705
            c-1.336,0.853-1.336,2.033-1.336,2.705s0,3,0,3H205.836z"/>
          <path fill="#9B9B49" 
            d="M175.336,39.056c0,0,0-2.329,0-3s0-1.852-1.336-2.705
            c-1.336,0.853-1.336,2.033-1.336,2.705s0,3,0,3H175.336z"/>
        </g>
      </g>
    </g>

    <g fill="none" stroke="white" stroke-width="1">
      <rect rx="6" ry="6" x="7.5" y="120" width="64"   height="104"/>
      <rect rx="6" ry="6" x="87.5" y="120" width="64"  height="104"/>
      <rect rx="6" ry="6" x="167.5" y="120" width="64" height="104"/>
      <rect rx="6" ry="6" x="247.5" y="120" width="64" height="104"/>
      <rect rx="6" ry="6" x="327.5" y="120" width="64" height="104"/>
      <rect rx="6" ry="6" x="407.5" y="120" width="64" height="104"/>
      <rect rx="6" ry="6" x="487.5" y="120" width="64" height="104"/>
      <rect rx="6" ry="6" x="567.5" y="120" width="64" height="104"/>
      <rect rx="6" ry="6" x="647.5" y="120" width="64" height="104"/>
      <rect rx="6" ry="6" x="727.5" y="120" width="64" height="104"/>
    </g>

    <text x="10" y="560" fill="white" font-size="20">z/Z <tspan x="45"
      >- Undo move</tspan></text>
    <rect fill="none" stroke="none" 
      pointer-events="fill" onclick="BOARD.undoMove()"
      x="0" y="540" width="170" height="22"/>

    <text x="10" y="580" fill="white" font-size="20">r/R <tspan x="45"
      >- Redo move</tspan></text>
    <rect fill="none" stroke="none" 
      pointer-events="fill" onclick="BOARD.redoMove()"
      x="0" y="562" width="170" height="22"/>
    <text x="790" y="580" fill="white" font-size="20" text-anchor="end"
         >? - Get Help</text>
    <rect fill="none" stroke="none" 
      pointer-events="fill" onclick="BOARD.showHelp()"
      x="675" y="560" width="125" height="25"/>
  </g>

  <g id="cards"/>

  <g id="move" style="pointer-events:none; opacity: 0.75;">
    <g id="drag" style="pointer-events:none; opacity: 0.75;"/>
  </g>

  <g id="win" style="display:none; pointer-events:none; ">
    <rect x="0" y="115" width="800" height="485" fill="#008"
      fill-opacity="0.75"/>
    <text x="50%" y="50%" text-anchor="middle"
      font-size="72" fill="white">Completed!!!</text>
  </g>
    
  <g id="help" style="display:none; pointer-events:none; ">
    <rect x="0" y="115" width="800" height="485" fill="#008"
      fill-opacity="0.85"/>
    <text x="50%" y="160" font-size="36" fill="white" text-anchor="middle"
      >Towers du Alice</text>
    <text x="50" y="190" font-size="18" fill="white"
      >This is a solitare game, as with most
    <tspan x="50" dy="1.2em">the basic rules are very simple.</tspan>

    <tspan x="50" dy="2em">The main playing field is ten colums of</tspan>
    <tspan x="50" dy="1.2em">five cards each. Above the playing field</tspan>
    <tspan x="50" dy="1.2em">to either side are four 'deck' piles, one</tspan>
    <tspan x="50" dy="1.2em">for each suite, etween these are the</tspan>
    <tspan x="50" dy="1.2em">four Towers.</tspan>

    <tspan x="50" dy="2em">To start most cards are delt into the</tspan>
    <tspan x="50" dy="1.2em">playing field. The last two cards are</tspan>
    <tspan x="50" dy="1.2em">placed in two of the Towers.</tspan>

    <tspan x="50" dy="2em">In the main playing field only a card of</tspan>
    <tspan x="50" dy="1.2em">the same suite and one lower value can</tspan>
    <tspan x="50" dy="1.2em">be placed on another card in the</tspan>
    <tspan x="50" dy="1.2em">playing field. You are only allowed to</tspan>
    <tspan x="50" dy="1.2em">'pick up' one card at a time. As a</tspan>
    <tspan x="50" dy="1.2em">convieniece the game will allow you</tspan>
    <tspan x="50" dy="1.2em">to 'pick up' runs of cards if you have</tspan>

    <tspan x="425" y="190">enough open Towers that you could</tspan>
    <tspan x="425" dy="1.2em">have moved the lower cards into first.</tspan>

    <tspan x="425" dy="2em">The Towers are your most important</tspan>
    <tspan x="425" dy="1.2em">asset in the game. Each Tower can hold</tspan>
    <tspan x="425" dy="1.2em">one card. You can put any card you want</tspan>
    <tspan x="425" dy="1.2em">at any time, you can also remove cards</tspan>
    <tspan x="425" dy="1.2em">from the towers at any time.</tspan>

    <tspan x="425" dy="2em">The game will automatically clear cards</tspan>
    <tspan x="425" dy="1.2em">to the deck when possible. Unlike</tspan>
    <tspan x="425" dy="1.2em">traditional Solitare this is never</tspan>
    <tspan x="425" dy="1.2em">a bad move.</tspan>

    <tspan x="425" dy="2em">This game includes Undo/Redo, this</tspan>
    <tspan x="425" dy="1.2em">should pose no ethical dilema as all</tspan>
    <tspan x="425" dy="1.2em">cards are visible from the start.</tspan>
    <tspan x="425" dy="2em"
    >Get comfortable with Undo,</tspan>
    <tspan x="425" dy="1.2em">you will use it often.</tspan>
  </text>

  <rect x="675" y="555" width="115" height="35" rx="3" ry="3"
      fill="#001473" stroke="white" stroke-width="2" onclick="showMore()"/>
  <text x="732.5" y="580" fill="white" font-size="20" text-anchor="middle"
      pointer-events="none" >More Info</text>
  </g>

  <g id="more" style="display:none; pointer-events:none; ">
    <rect x="0" y="115" width="800" height="485" fill="#001473" />
    <text x="50%" y="160" font-size="36" fill="white" text-anchor="middle"
      >Towers du Alice</text>
    <text x="50%" y="190" font-size="18" fill="white" text-anchor="middle"
      >Art Cabral, author of the popular Seahaven Towers<tspan font-size=".6em" baseline-shift="6">(TM)</tspan>
      <tspan x="50%" dy="1.2em">game, has assigned a proper name to the card game,</tspan>
      <tspan x="50%" dy="1.2em">naming it after its discoverer, Alice Drennen.</tspan>
      <tspan x="50%" dy="1.2em">Art Cabral's product will still be called Seahaven Towers<tspan font-size=".6em" baseline-shift="6">(TM)</tspan>,</tspan>

      <tspan x="50%" dy="1.2em">but the solitaire card game itself will be named</tspan>
      <tspan x="50%" dy="1.2em">"Towers du Alice."</tspan>
    </text>
  </g>

</svg>