diff --git a/mov/ffg-standard.svg b/mov/ffg-standard.svg
index dadd671..cea70f0 100644
--- a/mov/ffg-standard.svg
+++ b/mov/ffg-standard.svg
@@ -16,7 +16,11 @@ To the extent possible under law, Drew Folta has waived all copyright and relate
 
     <defs>
         <style><![CDATA[
-            #background { 
+            svg {
+                font-family: sans-serif;
+                font-size: 12px;
+            }
+            .background { 
                 fill: #002;
                 stroke: none;
             }
@@ -38,6 +42,21 @@ To the extent possible under law, Drew Folta has waived all copyright and relate
                 stroke-width: 3;
                 stroke-dasharray: 6 3;
             }
+            .popup {
+                display: none;
+            }
+            .popup .mask {
+                fill: #000;
+                fill-opacity: 0.4;
+            }
+            .popup .background {
+                stroke: #004;
+                stroke-width: 3;
+            }
+            .popup text {
+                fill: #00E;
+                text-anchor: middle;
+            }
             .icon path {
                 fill: #00E;
                 stroke: none;
@@ -411,19 +430,6 @@ To the extent possible under law, Drew Folta has waived all copyright and relate
         }
 
 
-        // displays race chooser popup
-        // calls callback with chosen race
-        function racePopup(races, callback) {
-            // TODO
-            var chosen = Math.floor(Math.random() * (races.length + 1));
-            if (chosen === races.length) {
-                callback(null);
-                return;
-            }
-            callback(races[chosen]);
-        }
-
-
         function thumbIconSet(oldThumb, iconID) {
             // This is the only way I've found that works on Chrome.
             var newThumb = oldThumb.cloneNode(true);
@@ -432,6 +438,48 @@ To the extent possible under law, Drew Folta has waived all copyright and relate
         }
 
 
+        // displays race chooser popup
+        // calls callback with chosen race
+        function systemPopupOpen(systemID, races) {
+            var popupUI = document.documentElement.getElementById('popupSystem'),
+                raceUI,
+                raceUIs = {};
+
+            // disable all race icons (except rUN)
+            objectEach(RACES, function(raceID, race) {
+                raceUI = popupUI.getElementsByClassName(raceID)[0];
+                raceUIs[raceID] = raceUI;
+                raceUI.onclick = function(evt) {
+                    evt.stopPropagation();
+                    evt.preventDefault();
+                };
+                raceUI.style.opacity = 0.4;
+            });
+
+            // enable available race icons
+            races.forEach(function(raceID) {
+                raceUI = raceUIs[raceID];
+                raceUI.style.opacity = 1;
+                raceUI.onclick = function() {
+                    popupUI.style.display = 'none';
+                    systemRaceSet(systemID, raceID);
+                };
+            });
+
+            // unknown race
+            raceUI = popupUI.getElementsByClassName('rUN')[0];
+            raceUI.onclick = function() {
+                popupUI.style.display = 'none';
+                systemRaceSet(systemID, null);
+            };
+
+            popupUI.style.display = 'inline';
+            popupUI.onclick = function() {
+                popupUI.style.display = 'none';
+            };
+        }
+
+
         function systemRaceSet(systemID, raceID) {
             var system = SYSTEMS[systemID],
                 race,
@@ -445,37 +493,34 @@ To the extent possible under law, Drew Folta has waived all copyright and relate
             systemUI = document.documentElement.getElementById(systemID);
             thumbUI = systemUI.getElementsByClassName('thumb')[0];
             thumbIconSet(thumbUI, raceID || 'rUN');
+
+            // TODO:  recalculate routes
         }
 
 
         // handles system thumbnail click
-        function systemThumbClick(evt, systemID) {
-            evt.preventDefault();
-            evt.stopPropagation();
+        function systemThumbClick(systemID) {
+            var system,
+                raceID,
+                races = [];
 
-            var system = SYSTEMS[systemID];
-            var raceID = system.raceID;
-            // unset, to normalize to first-choice algorithm
+            system = SYSTEMS[systemID];
+            raceID = system.raceID;
             if (raceID) {
-                system.raceID = null;
-                RACES[raceID].systemID = null;
+                races.push(raceID);
             }
-
-            var races = [];
             objectEach(RACES, function(raceID, race) {
                 if (! race.systemID) {
                     races.push(raceID);
                 }
             });
-            racePopup(races, function(raceID) {
-                systemRaceSet(systemID, raceID);
-            });
+            systemPopupOpen(systemID, races);
         }
 
     ]]></script>
 
 
-    <rect id="background" x="0" y="0" width="1440" height="800"/>
+    <rect class="background" x="0" y="0" width="1440" height="800"/>
 
     <g id="map">
 <!-- DEBUGGING
@@ -517,54 +562,54 @@ To the extent possible under law, Drew Folta has waived all copyright and relate
 
         <g id="sAS" class="system" >
             <path class="boundary" d="m 440,734 c 54,0 172,-72 172,-72 0,0 70,-75 117,-77 60,0 161,83 161,83 0,0 -12,64 -12,64 -69,64 -279,32 -279,32 0,0 -99,31 -159,-30 z" />
-            <use class="thumb" x="720" y="670" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sAS');" />
+            <use class="thumb" x="720" y="670" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sAS');" />
         </g>
         <g id="sCW" class="system" >
             <ellipse class="boundary" cx="181" cy="353" rx="103" ry="78" />
-            <use class="thumb" x="165" y="338" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sCW');" />
+            <use class="thumb" x="165" y="338" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sCW');" />
         </g>
         <g id="sDW" class="system" >
             <ellipse class="boundary" cx="484" cy="90" rx="115" ry="75" />
-            <use class="thumb" x="469" y="75" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sDW');" />
+            <use class="thumb" x="469" y="75" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sDW');" />
         </g>
         <g id="sGH" class="system" >
             <use class="thumb" x="414" y="433" width="30" height="30" xlink:href="#icon-sGH" />
         </g>
         <g id="sGP" class="system" >
             <ellipse class="boundary" cx="608" cy="520" rx="80" ry="103" transform="rotate(50 608,520)" />
-            <use class="thumb" x="593"  y="505" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sGP');" />
+            <use class="thumb" x="593"  y="505" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sGP');" />
         </g>
         <g id="sIB" class="system" >
             <ellipse class="boundary" cx="348" cy="245" rx="100" ry="80" transform="rotate(55 348,245)" />
-            <use class="thumb" x="333" y="230" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sIB');" />
+            <use class="thumb" x="333" y="230" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sIB');" />
         </g>
         <g id="sIM" class="system" >
             <ellipse class="boundary" cx="1027" cy="91" rx="105" ry="70" />
-            <use class="thumb" x="1012" y="76" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sIM');" />
+            <use class="thumb" x="1012" y="76" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sIM');" />
         </g>
         <g id="sIW" class="system" >
             <ellipse class="boundary" cx="197" cy="714" rx="99" ry="70" />
-            <use class="thumb" x="182" y="699" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sIW');" />
+            <use class="thumb" x="182" y="699" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sIW');" />
         </g>
         <g id="sJW" class="system" >
             <ellipse class="boundary" cx="140" cy="534" rx="95" ry="77" />
-            <use class="thumb" x="125" y="519" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sJW');" />
+            <use class="thumb" x="125" y="519" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sJW');" />
         </g>
         <g id="sMS" class="system" >
             <ellipse class="boundary" cx="885" cy="503" rx="90" ry="70" />
-            <use class="thumb" x="870" y="488" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sMS');" />
+            <use class="thumb" x="870" y="488" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sMS');" />
         </g>
         <g id="sNH" class="system" >
             <ellipse class="boundary" cx="567" cy="341" rx="96" ry="78" />
-            <use class="thumb" x="552" y="326" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sNH');" />
+            <use class="thumb" x="552" y="326" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sNH');" />
         </g>
         <g id="sPP" class="system" >
             <ellipse class="boundary" cx="1041" cy="372" rx="102" ry="77" />
-            <use class="thumb" x="1026" y="357" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sPP');" />
+            <use class="thumb" x="1026" y="357" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick'sPP');" />
         </g>
         <g id="sRP" class="system" >
             <ellipse class="boundary" cx="142" cy="128" rx="108" ry="85" transform="rotate(45 142,128)" />
-            <use class="thumb" x="127" y="113" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sRP');" />
+            <use class="thumb" x="127" y="113" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sRP');" />
         </g>
         <g id="sSG" class="system hazard" >
             <ellipse class="boundary" cx="363" cy="593" rx="42" ry="50" />
@@ -574,11 +619,11 @@ To the extent possible under law, Drew Folta has waived all copyright and relate
         </g>
         <g id="sWS" class="system" >
             <ellipse class="boundary" cx="1038" cy="693" rx="105" ry="69" />
-            <use class="thumb" x="1023" y="678" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sWS');" />
+            <use class="thumb" x="1023" y="678" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sWS');" />
         </g>
         <g id="sWW" class="system" >
             <ellipse class="boundary" cx="767" cy="221" rx="104" ry="73" />
-            <use class="thumb" x="752" y="206" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick(event, 'sWW');" />
+            <use class="thumb" x="752" y="206" width="30" height="30" xlink:href="#icon-rUN" onclick="systemThumbClick('sWW');" />
         </g>
     </g>
 
@@ -586,11 +631,80 @@ To the extent possible under law, Drew Folta has waived all copyright and relate
         <!-- TODO -->
     </g>
 
+    <g id="popupSystem" class="popup">
+        <rect class="mask" x="0" y="0" width="1200" height="800"/>
+        <svg class="display" x="450" y="260" viewport="0,0 300,280">
+            <rect class="background" x="0" y="0" width="300" height="280"/>
+
+            <g class="race r01">
+                <use class="thumb" x="30" y="20" width="30" height="30" xlink:href="#icon-r01" />
+                <text class="name" x="45" y="65">Nillis</text>
+            </g>
+            <g class="race r02">
+                <use class="thumb" x="100" y="20" width="30" height="30" xlink:href="#icon-r02" />
+                <text class="name" x="115" y="65">Volois</text>
+            </g>
+            <g class="race r03">
+                <use class="thumb" x="170" y="20" width="30" height="30" xlink:href="#icon-r03" />
+                <text class="name" x="185" y="65">Graw</text>
+            </g>
+            <g class="race r04">
+                <use class="thumb" x="240" y="20" width="30" height="30" xlink:href="#icon-r04" />
+                <text class="name" x="255" y="65">Niks</text>
+            </g>
+
+            <g class="race r05">
+                <use class="thumb" x="30" y="85" width="30" height="30" xlink:href="#icon-r05" />
+                <text class="name" x="45" y="130">Dell</text>
+            </g>
+            <g class="race r06">
+                <use class="thumb" x="100" y="85" width="30" height="30" xlink:href="#icon-r06" />
+                <text class="name" x="115" y="130">Human</text>
+            </g>
+            <g class="race r07">
+                <use class="thumb" x="170" y="85" width="30" height="30" xlink:href="#icon-r07" />
+                <text class="name" x="185" y="130">Shenna</text>
+            </g>
+            <g class="race r08">
+                <use class="thumb" x="240" y="85" width="30" height="30" xlink:href="#icon-r08" />
+                <text class="name" x="255" y="130">Yxklyx</text>
+            </g>
+
+            <g class="race r09">
+                <use class="thumb" x="30" y="150" width="30" height="30" xlink:href="#icon-r09" />
+                <text class="name" x="45" y="195">Zum</text>
+            </g>
+            <g class="race r10">
+                <use class="thumb" x="100" y="150" width="30" height="30" xlink:href="#icon-r10" />
+                <text class="name" x="115" y="195">Eeepeeep</text>
+            </g>
+            <g class="race r11">
+                <use class="thumb" x="170" y="150" width="30" height="30" xlink:href="#icon-r11" />
+                <text class="name" x="185" y="195">Whynoms</text>
+            </g>
+            <g class="race r12">
+                <use class="thumb" x="240" y="150" width="30" height="30" xlink:href="#icon-r12" />
+                <text class="name" x="255" y="195">Cholos</text>
+            </g>
+
+            <g class="race r13">
+                <use class="thumb" x="30" y="215" width="30" height="30" xlink:href="#icon-r13" />
+                <text class="name" x="45" y="260">Wollow</text>
+            </g>
+            <g class="race r14">
+                <use class="thumb" x="100" y="215" width="30" height="30" xlink:href="#icon-r14" />
+                <text class="name" x="115" y="260">Qossoth</text>
+            </g>
+            <g class="race rUN">
+                <use class="thumb" x="240" y="215" width="30" height="30" xlink:href="#icon-rUN" />
+                <text class="name" x="255" y="260">unknown</text>
+            </g>
+        </svg>
+    </g>
+
     <foreignObject x="1200" y="10" width="200" height="400">
         <div xmlns="http://www.w3.org/1999/xhtml">
         <b>TODO</b> <br/>
-        * system config popup <br/>
-        <br/>
         * map: routes <br/>
         * routes calculations <br/>
         * game config popup <br/>