<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg id="BooleanSearchDemo"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="720"
   height="280">
  <title>Boolean Searching Demo</title>
  <desc>Interactive Venn diagrams to illustrate various Boolean searches</desc>
  <metadata id="metadata">
    <rdf:RDF>
      <cc:Work rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>Boolean Searching</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>

<script type="text/ecmascript">
<![CDATA[
  function highlightOR ( evt, showHighlight ) {
    var rootCircle = document.getElementById( "rootCircle" );
    var beerCircle = document.getElementById( "beerCircle" );
    var orText = document.getElementById( "ORtext" );
    if ( showHighlight ) {
      rootCircle.setAttribute( "style", "fill:#BBBBBB;fill-opacity:.7" );
      beerCircle.setAttribute( "style", "fill:#BBBBBB;fill-opacity:.7" );
      orText.setAttribute( "style", "display:inline" );
    } else {
      rootCircle.setAttribute( "style", "fill-opacity:0" );
      beerCircle.setAttribute( "style", "fill-opacity:0" );
      orText.setAttribute( "style", "display:none" );
    }
  }

  function highlightAND ( evt, showHighlight ) {
    var intersection = document.getElementById( "intersection" );
    var andText = document.getElementById( "ANDtext" );
    if ( showHighlight ) {
      intersection.setAttribute( "style",
         "fill:#BBBBBB;fill-opacity:.7;clip-path: url(#clip)" );
      andText.setAttribute( "style", "display:inline" );
    } else {
      intersection.setAttribute( "style", "fill-opacity:0" );
      andText.setAttribute( "style", "display:none" );
    }
  }

  function highlightPHRASE ( evt, showHighlight ) {
    var phraseCircle = document.getElementById( "phraseCircle" );
    var phraseText = document.getElementById( "PHRASEtext" );
    if ( showHighlight ) {
      phraseCircle.setAttribute( "style", "fill:#BBBBBB;fill-opacity:.7" );
      phraseText.setAttribute( "style", "display:inline" );
    } else {
      phraseCircle.setAttribute( "style", "fill-opacity:0" );
      phraseText.setAttribute( "style", "display:none" );
    }
  }

]]>
</script>

  <defs>
    <g id="arrow">
      <marker id="Arrowhead" style="overflow:visible;fill:white;stroke:white"
          orient="auto">
        <path transform="rotate(90) translate(-4,3)"
          d="M0,0 l4,-4 l4,4 L0,0 z" />
      </marker>
    </g>
    <clipPath id="clip">
       <circle cx="105" cy="105" r="100" />
    </clipPath>
  </defs>

  <!-- background -->
  <rect id="background" x="0" y="0" width="100%" height="100%"
      fill="#000066" />

  <g id="venDiagrams">
    <circle id="rootCircle" cx="105" cy="105" r="100"
        stroke="white" stroke-width="1" fill-opacity="0" />
     <circle id="beerCircle" cx="210" cy="105" r="100"
        stroke="white" stroke-width="1" fill-opacity="0" />
     <circle id="phraseCircle" cx="155" cy="105" r="30"
        stroke="white" stroke-width="1" fill-opacity="0" />
     <circle id="intersection" cx="210" cy="105" r="100"
        stroke="white" stroke-width="1" fill-opacity="0"
        style="clip-path: url(#clip);" />

     <text id="root" x="30" y="110" xml:space="preserve" fill="white"
        style="font-size:18px">Root</text>
     <text id="beer" x="230" y="110" xml:space="preserve" fill="white"
        style="font-size:18px">Beer</text>
  </g>

  <g id="ANDtext" style="display:none">
     <text id="rootANDbeer" x="95" y="260" xml:space="preserve" fill="white"
        style="font-size:18px">Root AND Beer</text>
     <path id="ANDarrow"  fill="none" stroke="white"
        d="M150,245 s0,-45 0,-80" marker-end="url(#Arrowhead)" />
  </g>

  <g id="ORtext" style="display:none">
     <text id="rootORbeer" x="100" y="260" xml:space="preserve" fill="white"
        style="font-size:18px">Root OR Beer</text>
     <path id="ORarrow1"  fill="none" stroke="white"
        d="M150,245 s-55,-55 -50,-100" marker-end="url(#Arrowhead)" />
     <path id="ORarrow2"  fill="none" stroke="white"
        d="M160,245 s85,-55 80,-100" marker-end="url(#Arrowhead)" />
  </g>

  <g id="PHRASEtext" style="display:none">
     <text id="rootBeer" x="80" y="260" xml:space="preserve" fill="white"
        style="font-size:18px">&quot;Root Beer&quot; (phrase)</text>
     <path id="PHRASEarrow"  fill="none" stroke="white"
        d="M160,245 s55,-55 0,-130" marker-end="url(#Arrowhead)" />
  </g>

  <g id="rollOverText" transform="translate(360,50)">
     <text id="directions" x="0" y="0" xml:space="preserve" fill="yellow"
        style="font-size:18px; font-style:italic"
      >Hover mouse over searches below to highlight:</text>

     <text id="rootORbeer" x="30" y="25" xml:space="preserve" fill="yellow"
        style="font-size:18px"
        onmouseover="highlightOR(evt, true);"
        onmouseout="highlightOR(evt, false);"
      >Root OR Beer</text>
     <text id="rootANDbeer" x="30" y="50" xml:space="preserve" fill="yellow"
        style="font-size:18px"
        onmouseover="highlightAND(evt, true);"
        onmouseout="highlightAND(evt, false);"
     >Root AND Beer (the default)</text>
     <text id="rootbeerPHRASE" x="30" y="75" xml:space="preserve" fill="yellow"
        style="font-size:18px"
        onmouseover="highlightPHRASE(evt, true);"
        onmouseout="highlightPHRASE(evt, false);"
     >&quot;Root Beer&quot; (PHRASE)</text>
  </g>
</svg>


