<div class="main-content">
<div class="main-wrap container_automobili_full">
<div id="bike-search">
<h1 class="title">Listino Usato</h1>

<div class="field search" style="width:100%;"><input name="model" placeholder="cerca" style="height:60px;width:100%;font-size:24px" type="search" /></div>

<div class="field odd">
<div id="placeHolderMarca"></div>
<script id="selectMarca" type="text/x-handlebars-template">
                    <label for="car-search-marca">Seleziona la Marca</label>
                    <select name="make" id="car-search-marca">
                        <option value="">Marca</option>
                        {{#each this}}
                        <option value="{{.}}" {{#selectedFromUrl . 'makeFromUrl' }}selected="selected"{{/selectedFromUrl}} >{{.}}</option>
                        {{/each}}
                    </select>
                </script></div>

<div class="field">
<div id="placeHolderModello"></div>
<script id="selectModelli" type="text/x-handlebars-template">
                    <label for="car-search-modello">Seleziona la Tipologia</label>
                    <select name="type" id="car-search-modello">
                        <option value="">Tipo</option>
                        {{#each .}}
                        <option value="{{.}}" {{#selectedFromUrl . 'modelFromUrl' }}selected="selected"{{/selectedFromUrl}}>{{.}}</option>
                        {{/each}}
                    </select>
                </script></div>
<script type="text/javascript">
                $( "#car-search-modello" ).change(function() {
                    val = $(this).val();
                    $(this).parent().find("span").html(val);
                });
            </script><script type="text/javascript">
                var currentMarca = "";
                var makeFromUrl = getQueryVariable("make");
                var modelFromUrl = getQueryVariable("model");

                Handlebars.registerHelper('ifCurrentMarca', function(v1, options) {
                    if(v1 == currentMarca) {
                        return options.fn(this);
                    }
                    return options.inverse(this);
                });
                Handlebars.registerHelper('selectedFromUrl', function(v1, v2, options) {
                    if(encodeURI(v1) == window[v2]) {
                        return options.fn(this);
                    }
                    return options.inverse(this);
                });

                var selectMarca = $("#selectMarca").html();
                var templateMarca = Handlebars.compile(selectMarca);

                var selectModelli = $("#selectModelli").html();
                var templateModelli = Handlebars.compile(selectModelli);

                $.get("/sn-rest/makes",function(data,status,xhr){
                    //d = eval ( data );
                    $("#placeHolderMarca").append(templateMarca(data));
                    // RE-INIT THE UNIFORM JS
                    app.initForms();
                    // search from url
                    if (makeFromUrl) {
                        $('#car-search-marca').val(decodeURI(makeFromUrl)).trigger('change');
                        $('#car-search button.button').trigger('click');
                    }
                });
                $.get("/sn-rest/types",function(data,status,xhr){
                    //d = eval ( data );
                    $("#placeHolderModello").append(templateModelli(data));
                    // RE-INIT THE UNIFORM JS
                    app.initForms();
                });

            </script>

<div class="field odd"><label for="car-search-prezzo">Prezzo a partire da (€)</label> <select id="car-search-prezzo" name="minPrice"><option selected="selected" value="0">Prezzo a partire da</option><option value="500">500</option><option value="1000">1.000</option><option value="1500">1.500</option><option value="2000">2.000</option><option value="2500">2.500</option><option value="3000">3.000</option><option value="4000">4.000</option><option value="5000">5.000</option><option value="6000">6.000</option><option value="7000">7.000</option><option value="8000">8.000</option><option value="9000">9.000</option><option value="10000">10.000</option><option value="12500">12.500</option><option value="15000">15.000</option><option value="17500">17.500</option><option value="20000">20.000</option><option value="25000">25.000</option><option value="30000">30.000</option><option value="40000">40.000</option><option value="50000">50.000</option><option value="75000">75.000</option><option value="100000">100.000</option> </select></div>

<div class="field"><label for="car-search-prezzomax">Prezzo fino a (€)</label> <select id="car-search-prezzomax" name="maxPrice"><option selected="selected" value="0">Prezzo fino a</option><option value="500">500</option><option value="1000">1.000</option><option value="1500">1.500</option><option value="2000">2.000</option><option value="2500">2.500</option><option value="3000">3.000</option><option value="4000">4.000</option><option value="5000">5.000</option><option value="6000">6.000</option><option value="7000">7.000</option><option value="8000">8.000</option><option value="9000">9.000</option><option value="10000">10.000</option><option value="12500">12.500</option><option value="15000">15.000</option><option value="17500">17.500</option><option value="20000">20.000</option><option value="25000">25.000</option><option value="30000">30.000</option><option value="40000">40.000</option><option value="50000">50.000</option><option value="75000">75.000</option><option value="100000">100.000</option> </select></div>

<div class="field odd"><label for="car-search-anno">Anno di immatricolazione</label> <select id="car-search-anno" name="maxYear"><option selected="selected" value="0">Fino al</option><option value="2014">2014</option><option value="2013">2013</option><option value="2012">2012</option><option value="2011">2011</option><option value="2010">2010</option><option value="2009">2009</option><option value="2008">2008</option><option value="2007">2007</option><option value="2006">2006</option><option value="2005">2005</option><option value="2004">2004</option><option value="2003">2003</option><option value="2002">2002</option><option value="2001">2001</option><option value="2000">2000</option><option value="1999">1999</option><option value="1998">1998</option><option value="1997">1997</option><option value="1996">1996</option><option value="1995">1995</option><option value="1994">1994</option><option value="1993">1993</option><option value="1992">1992</option><option value="1991">1991</option><option value="1990">1990</option><option value="1989">1989</option><option value="1988">1988</option><option value="1987">1987</option><option value="1986">1986</option><option value="1985">1985</option><option value="1980">1980</option><option value="1975">1975</option><option value="1970">1970</option><option value="1965">1965</option><option value="1960">1960</option><option value="1955">1955</option><option value="1950">1950</option><option value="1940">1940</option><option value="1930">1930</option><option value="1920">1920</option><option value="1910">1910</option> </select></div>

<div class="field"><label for="car-search-chilometraggio">Chilometraggio</label> <select id="car-search-chilometraggio" name="mileageto"><option selected="selected" value="0">fino a</option><option value="2500">2.500</option><option value="5000">5.000</option><option value="10000">10.000</option><option value="20000">20.000</option><option value="30000">30.000</option><option value="40000">40.000</option><option value="50000">50.000</option><option value="60000">60.000</option><option value="70000">70.000</option><option value="80000">80.000</option><option value="90000">90.000</option><option value="100000">100.000</option><option value="125000">125.000</option><option value="150000">150.000</option><option value="175000">175.000</option><option value="200000">200.000</option> </select></div>

<div class="button-wrap blockSearchButton" id="blockSearchButton"><button class="button" type="button">Cerca</button></div>
</div>
<a name="search-results-list"></a>

<div class="container_list_full"></div>
<script id="resultsAd" type="text/x-handlebars-template">
            <section id="bike-search-results">
                <header class="header">
                    <h1 class="title">Risultati della ricerca</h1>
                    <div class="sort">
                        <label for="bike-search-results-sort">Ordina risultati per</label>
                        <select name="sort" id="bike-search-results-sort">
                            <option value="orderAsc:price">Prezzo crescente</option>
                            <option value="orderDesc:price">Prezzo decrescente</option>
                            <option value="orderAsc:make">Marca crescente</option>
                            <option value="orderDesc:make">Marca decrescente</option>
                            <option value="orderAsc:year">Anno crescente</option>
                            <option value="orderDesc:year">Anno decrescente</option>
                            <option value="orderAsc:km">Chilometraggio crescente</option>
                            <option value="orderDesc:km">Chilometraggio decrescente</option>
                            <option value="orderAsc:cc">Cilindrata crescente</option>
                            <option value="orderDesc:cc">Cilindrata decrescente</option>
                        </select>
                    </div>
                </header>

                {{#each ads}}
                <article class="car">
                    <a href="{{url}}">
                        <div class="head">
                            <h1 class="name">{{make}} - {{title}} - {{year}}</h1>
                            <p>{{city}} - Usato </p>
                        </div>
                        <span class="image">{{#if img}}<span><img width="300" src="{{img}}" /></span>{{/if}}</span>
                        <ul class="specs">
                            <li>Prezzo <strong>€ {{price}}</strong></li>
                            <li>Chilometri <strong>{{km}} Km</strong></li>
                            <li>Anno imm. <strong>{{year}}</strong></li>
                            <li>Cilindrata <strong>{{cc}}</strong></li>
                            <li>Tipo <strong>{{type}}</strong></li>
                        </ul>
                    </a>
                </article>
                {{/each}}

                {{paginationLoop currentPage pageCount}}
            </section>
        </script> <script type="text/javascript">
            var form_full = ".container_automobili_full";
            var list_full = ".container_list_full";
            var resultsAd = $("#resultsAd").html();
            var templateAd = Handlebars.compile(resultsAd);
            var currentPage = 1;

            function submitForm() {
                var querystring = "";
                var fields = $(form_full + " :input").serializeArray();
                $.each(fields, function(i, field) {
                    if(field.name != "undefined" && field.value != "0" && field.value != "" && field.value != "all"){
                        querystring += "&"+field.name+"="+field.value;
                    }
                });
                if ( $('#bike-search-results-sort').val()!= undefined && $('#bike-search-results-sort').val() != '' ) {
                    var selectedSort = $('#bike-search-results-sort').val() ;
                    querystring += "&"+ selectedSort.split(':')[0] +"="+ selectedSort.split(':')[1];
                } else {
                    var selectedSort = 'orderAsc:price';
                    querystring += "&orderAsc=price";
                }

                querystring+="&currentPage="+currentPage;

                $(".container_list_full").html('<div style="text-align:center"><img src="/assets/img/loading.gif" /></div>');

                $.get( "/sn-rest/search?" + querystring, function(data) {
                    $(".container_list_full").html(templateAd(data));
                    $(list_full + " :input").val(selectedSort);
                    // RE-INIT THE UNIFORM JS
                    app.initForms();

                    $("#archivio_pagination a").click(function() {
                        currentPage = $(this).attr("data-value");
                        submitForm();
                    });
                    $( "#bike-search-results-sort" ).change(function() {
                        submitForm();
                    });
                }).done(function() {
                    var posResultsAnchor = $('a[name="search-results-list"]').length > 0 ? $('a[name="search-results-list"]').offset().top : 0;
                    $("html, body").animate({scrollTop: posResultsAnchor},300);
                }).fail(function(qXHR, textStatus, errorThrown) {
                    //console.log( "error ",qXHR );
                })
                        .always(function() {
                            //alert( "finished" );
                        });

            }



            $(form_full + " .blockSearchButton :input").click(function(){currentPage = 1; submitForm();});
            $(form_full).keypress(function(e) {
                var code = e.keyCode || e.which;
                if(code == 13) {
                    currentPage = 1;
                    submitForm();
                }
            });



            Handlebars.registerHelper('paginationLoop', function(currentPage,totalPage) {
                gap = 7;
                htmlLi = '';
                startNumber = parseInt(currentPage) - gap;
                endNumber = parseInt(currentPage) + gap;
                if(totalPage > 1)
                    htmlLi +='<div id="archivio_pagination" class="pagination"><span class="pages">';
                if(startNumber > 0)
                    htmlLi += '<span >...</span>';
                for (i = 1; i <= totalPage; i++) {
                    if(currentPage == i)
                        htmlLi += '<a class="current">'+i+'</a>';
                    else if( i >= startNumber && i <= endNumber)htmlLi += '<a href="#" data-value="'+i+'">'+i+'</a>';
                };
                if(endNumber < totalPage)
                    htmlLi += '<span class="dotted">...</span>';
                if(totalPage > 1)
                    htmlLi += '</span></div>';
                return new Handlebars.SafeString(htmlLi);
            });


            $( "select" ).change(function() {
                val = $(this).val();
                $(this).parent().find("span").html(val);
            });

        </script></div>
</div>