JS select logic and behaviour.

index.html

@@ -134,22 +134,22 @@
         <!--</select>-->
 
         <a class="selectedPollutionCity selectedPollutionCitySmall">
-            <span class="selectedPollutionCityWrapper">
-                <span class="stationName">Al. Krasińskiego</span>
+            <span class="selectedPollutionCityWrapper" id="pollution-city-wrapper">
+                <span class="stationName" id="pollution-station-name">Al. Krasińskiego</span>
             </span>
-            <span class="selectedPollutionCityWrapper">
-                <span class="showList arrowDown">rozwiń</span>
+            <span class="selectedPollutionCityWrapper" id="pollution-arrow-wrapper">
+                <span class="showList arrowDown" id="pollution-arrow">rozwiń</span>
             </span>
-            <div class="select-box">
+            <div class="select-box" id="select-pollution-menu">
                 <ul class="city-list left">
-                    <li value="00000000-0000-0000-0000-000000000001">Al. Krasińskiego</li>
-                    <li value="00000000-0000-0000-0000-000000000003">ul. Bujaka</li>
-                    <li value="00000000-0000-0000-0000-000000000002">ul. Bulwarowa</li>
+                    <li value="00000000-0000-0000-0000-000000000001" name="Al. Krasińskiego" onclick="onStationChosen(this)">Al. Krasińskiego</li>
+                    <li value="00000000-0000-0000-0000-000000000003" name="ul. Bujaka" onclick="onStationChosen(this)">ul. Bujaka</li>
+                    <li value="00000000-0000-0000-0000-000000000002" name="ul. Bulwarowa" onclick="onStationChosen(this)">ul. Bulwarowa</li>
                 </ul>
                 <ul class="city-list right">
-                    <li value="00000000-0000-0000-0000-00000000000f">ul. Złoty Róg</li>
-                    <li value="00000000-0000-0000-0000-00000000000e">os. Piastów</li>
-                    <li value="00000000-0000-0000-0000-00000000000d">ul. Dietla</li>
+                    <li value="00000000-0000-0000-0000-00000000000f" name="ul. Złoty Róg" onclick="onStationChosen(this)">ul. Złoty Róg</li>
+                    <li value="00000000-0000-0000-0000-00000000000e" name="os. Piastów" onclick="onStationChosen(this)">os. Piastów</li>
+                    <li value="00000000-0000-0000-0000-00000000000d" name="ul. Dietla" onclick="onStationChosen(this)">ul. Dietla</li>
                 </ul>
             </div>
         </a>
@@ -166,6 +166,40 @@
 
     (function(){
 
+        document.onStationChosen = function(node){
+            selectedStation = node.getAttribute('value');
+            updateView(node.getAttribute('name'));
+        };
+
+        var setBoxVisible = function(val){
+            document.getElementById('pollution-arrow').style.visibility = val ? "hidden" : "visible";
+            document.getElementById('select-pollution-menu').style.display = val ? "block" : "none";
+        };
+
+        var isBoxVisible = function(val){
+            return document.getElementById('select-pollution-menu').style.display === 'block';
+        };
+
+        setBoxVisible(false);
+
+        var handleClick = function(evt){
+            evt.preventDefault();
+            if (isBoxVisible()){
+                setBoxVisible(false);
+            } else {
+                setBoxVisible(true);
+            }
+            evt.stopPropagation();
+        };
+
+        document.getElementById('pollution-city-wrapper').addEventListener('click', handleClick);
+        document.getElementById('pollution-arrow-wrapper').addEventListener('click', handleClick);
+        document.addEventListener('click', function(evt){
+            if (isBoxVisible()){
+                setBoxVisible(false);
+            }
+        });
+
         var dataDownloaded = false;
         var data;
 
@@ -195,7 +229,7 @@
                 if (xhr.readyState == XMLHttpRequest.DONE) {
                     dataDownloaded = true;
                     data = JSON.parse(xhr.response);
-                    updateView();
+                    updateView("Al. Krasińskiego");
                 }
             }
             xhr.open('GET', 'view', true);
@@ -213,16 +247,12 @@
             }
         };
 
-        var updateView = function(value){
+        var updateView = function(name){
             document.getElementById("pollution-value").textContent = filterValues();
+            document.getElementById("pollution-station-name").textContent = name;
         };
 
         var parameters = getParams();
-        document.getElementById('select-station').value = parameters["local_id"] || defaultStation;
-        document.getElementById('select-station').addEventListener("change", function(){
-            selectedStation = document.getElementById('select-station').value;
-            updateView();
-        });
         if (parameters["local_id"]){
             selectedStation = parameters["local_id"];
             getPollution();