html
    head
        link(rel='stylesheet', href="#{url}/stylesheets/select.css")
        link(rel='stylesheet', href="#{url}/stylesheets/button.css")
    body
        script(type='text/javascript').
            var maprequest = {};
            function set_visibility (select) { 
                document.getElementById('election_to_compare').style.visibility = (select.value === 'Evolution avec autre scrutin') ? 'visible' : 'hidden' 
            }
            function savechoice (select, item) { 
                maprequest[item] = select.value; 
                if (
                    maprequest.election          && maprequest.section  
                    && maprequest.election !== "0" && maprequest.section  !== "0"
                    && ((maprequest.requete  && maprequest.requete  !== 'Requêtes' && maprequest.requete !== 'Evolution avec autre scrutin') ||
                    (maprequest.requete === 'Evolution avec autre scrutin' && maprequest.comparaison && maprequest.comparaison !== 0 
                    && maprequest.comparaison !== maprequest.election ) ) 
                ) {
                    document.getElementById('gobutton').style.visibility = 'visible';
                }
                else {
                    document.getElementById('gobutton').style.visibility = 'hidden';
                }
            }
            function showzemap () {
                var form = document.createElement("form");
                form.setAttribute("method", "post");
                form.setAttribute("action", "/cartes-elections");
                for (var key in maprequest) {
                    if(maprequest.hasOwnProperty(key)) {
                        var hiddenField = document.createElement("input");
                        hiddenField.setAttribute("type", "hidden");
                        hiddenField.setAttribute("name", key);
                        hiddenField.setAttribute("value", maprequest[key]);
                        form.appendChild(hiddenField);
                    }
                }
                document.body.appendChild(form);
                form.submit();
            }
        #page-wrapper
            .row
                span(class="css3-metro-dropdown")
                    select(name="selected_election" onchange="savechoice(this, 'election')")
                        .form-control
                            each election,i in elections
                                option(value=i) #{election)
            br
            .row
                span(class="css3-metro-dropdown css3-metro-dropdown-color-ff2e12")
                    select(name="selected_section" onchange="savechoice(this, 'section')")
                        .form-control
                            each section,i in sections
                                option(value=i) #{section)
            br
            .row
                span(class="css3-metro-dropdown css3-metro-dropdown-color-ff2e12")
                    select(name="selected_requete" onchange="set_visibility(this); savechoice(this, 'requete')")
                        .form-control
                            each requete,i in requetes
                                option(value=i) #{i}
            .row(id="election_to_compare" style="visibility:hidden")
                br
                span(class="css3-metro-dropdown")
                    select(name="selected_election_comparaison" onchange="savechoice(this, 'comparaison')")
                        .form-control
                            each election,i in elections
                                option(value=i) #{election)
            br
            .row(id="gobutton" style="visibility:hidden")
                a.btn(href="javascript: showzemap()") Voir la carte