<?php /* Template Name: Beer Finder Template */ get_header(); ?>

    <?php

        $lat = $_GET['lat'];
        $lon = $_GET['lon'];

    ?>



    <!-- section -->
    <section role="main" class="main finder">
    <div id="finder-map"></div>

        <!-- article -->
        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

            <h1><?php the_title(); ?></h1>


            <div id="gmap-container">
            <p class="content">Even our year round beers can be elusive at times, so use this guide to help you find any and all of our beers that are out there.</p>
                <div id="filter-container">
                    <!--<span class="filter-title">Filter:</span>-->
                    <div class="form-container">
                        <button class="finderbutton findmargin" id="all" type="button">All Beers</button>
                        <div class="distance drop findmargin">
                            <h4>Distance</h4>
                            <ul class="distance">
                                <li><input class="filter-input" type="checkbox" name="20" id="release-year"><label for="release-year"><span></span>Within 20 Miles</label></li>
                                <li><input class="filter-input" type="checkbox" name="50" id="release-migrational"><label for="release-migrational"><span></span>20-50 Miles</label></li>
                                <li><input class="filter-input" type="checkbox" name="100" id="release-spasmodic"><label for="release-spasmodic"><span></span>50-100 Miles</label></li>
                            </ul>
                            <span>+</span>
                        </div>
                        <div class="beer drop findmargin">
                            <h4>Category</h4>
                            <ul class="beer">
                                <li><input class="filter-input" type="checkbox" name="Year Round" id="release-year"><label for="release-year"><span></span>Year Round</label></li>
                                <li><input class="filter-input" type="checkbox" name="Migrational" id="release-migrational"><label for="release-migrational"><span></span>Migrational Release</label></li>
                                <li><input class="filter-input" type="checkbox" name="Spasmodic" id="release-spasmodic"><label for="release-spasmodic"><span></span>Spasmodic Release</label></li>
                                <li><input class="filter-input" type="checkbox" name="Elusive Reclusive" id="release-elusive"><label for="release-elusive"><span></span>Elusive Reclusive</label></li>
                            </ul>
                            <span>+</span>
                        </div>
                        <div class="zip">
                            <input type="tel" name="zip" class="zip findmargin" onfocus="if (this.value==this.defaultValue) this.value = ''"onblur="if (this.value=='') this.value = this.defaultValue" value="Zip">
                        </div>
                        <button class="finderbutton findmargin" id="gps" type="button">Use My Location</button>
                        <button class="finderbutton findmargin" id="findit" type="button">Find The Beer</button>
                    </div>

                </div>
                <div id="controls"></div>
                <div id="gmap-inner">
                    <div id="gmap"></div>
                </div>
                <p class="content">Keep in mind that this map represents a list of accounts that have purchased our beer in the last 30 days, not necessarily who is pouring our beer at any given time. If you are specifically hunting a certain Swamp Head beer, always call the bar or restaurant first.</p>

            </div>
            <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
            <script src="/wp-content/themes/swamphead/js/maplace.min.js"></script>
            <script src="http://jquery-ui-map.googlecode.com/svn/trunk/ui/min/jquery.ui.map.full.min.js"></script>
            <?php
                //Grab all beers at all retailers
                if($lat!=""){
                    $jsonData = file_get_contents("http://digitalrelativity.org/BeerMappr/API/GetLocationByLatLon.aspx?clientid=SWAMP&lat=".$lat."&lon=".$lon."&dist=100");
                }
                else{
                    $jsonData = file_get_contents("http://digitalrelativity.org/BeerMappr/API/GetLocationByLatLon.aspx?clientid=SWAMP&lat=29.6249388&lon=-82.388749&dist=10000");
                }
            ?>
            <script type="text/javascript">

                var maplace = new Maplace();

                var sampleArray = [];
                var firstRun = console.log(<?php echo $jsonData; ?>);
                var json = <?php echo $jsonData; ?>;
                var lat = "";
                var lon = "";

                for (var i = 0, length = json.locations.length; i < length; i++)
                {
                    var data = json.locations[i];
                    var latLng = new google.maps.LatLng(data.lat, data.lng);


                    //console.log("HTML: "+data.description);
                    var html = jQuery.parseHTML(data.description);
                    var fullBeer = $(html).find("li").text();
                    var beerName = fullBeer.substr(0, fullBeer.indexOf(" - "));
                    var fullCat = fullBeer.substr(fullBeer.indexOf("-") + 1);
                    var pack = fullCat.substring(fullCat.lastIndexOf(" ")+1);
                    var release = fullCat.replace(pack,"");
                    var cleanRelease = release.split(' ').join('');

                    console.log("Beer Release: *"+cleanRelease+"*");


                    sampleArray.push({
                        lat: data.lat,
                        lon: data.lng,
                        release: cleanRelease,
                        title: data.title,
                        html: data.description,
                        icon: 'http://swamp.digitalrelativity.me/wp-content/themes/swamphead/img/Pin'+cleanRelease+'.png'
                    });
                }

                maplace.Load({
                    show_markers: true,
                    type:'marker',
                    generate_controls: false,
                    locations: sampleArray
                });

                console.log("Found "+json.count+" beers.");
                console.log("Displayed "+sampleArray.length+" beers.");


                $('.filter-input').click(function(e)
                {
                    var visibility = $('#findit').css( "visibility" );
                    if(visibility=="hidden"){
                        if(document.querySelectorAll('.filter-input:checked').length!=0){
                            $('#findit').css( "visibility" ,"visible");
                        }
                    }
                    else{
                        if(document.querySelectorAll('.filter-input:checked').length==0)
                        {
                            $('#findit').css( "visibility" ,"hidden");
                        }
                    }
                });
                $('input.zip').change(function(e)
                {
                    var length = $(this).val().length;

                    if(length>4){
                        $('#findit').css( "visibility" ,"visible");
                    }
                    if(length<5 && document.querySelectorAll('.filter-input:checked').length==0){
                        $('#findit').css( "visibility" ,"hidden");
                    }
                });

                $('#gps').click(function(e)
                {
                    navigator.geolocation.getCurrentPosition(GetLocation);
                    $('#filter-container *').prop('disabled', true);

                    function GetLocation(location)
                    {
                        lat = location.coords.latitude;
                        lon = location.coords.longitude;
                        $.getJSON("http://maps.googleapis.com/maps/api/geocode/json?latlng="+location.coords.latitude+","+location.coords.longitude+"&sensor=false",null,
                        function(data) {
                            var zip = data['results'][0]['address_components'][7]['long_name'];
                            console.log("GPS Zip: "+zip);
                            $('input.zip').val(zip);
                            $('input.zip').trigger('change');
                            $('#filter-container *').prop('disabled', false);
                        });
                    }
                });

                $('#findit').click(function(e)
                {
                    e.preventDefault();

                    $('#filter-container *').prop('disabled', true);

                    //Distance
                    if(document.querySelectorAll('.distance .filter-input:checked').length!=0){
                        var dist = document.querySelectorAll('.distance .filter-input:checked')[0].name;
                    }
                    else{
                        var dist = 10000;
                    }
                    //Category
                    if(document.querySelectorAll('.beer .filter-input:checked').length!=0){
                        var name = document.querySelectorAll('.beer .filter-input:checked')[0].name;

                        try
                        {
                        //Run some code here
                        if(document.querySelectorAll('.beer .filter-input:checked')[1]!=""){
                            name = name+","+document.querySelectorAll('.beer .filter-input:checked')[1].name;
                        }
                        }
                        catch(err)
                        {
                        //Handle errors here
                        }
                        try
                        {
                        //Run some code here
                        if(document.querySelectorAll('.beer .filter-input:checked')[2]!=""){
                            name = name+","+document.querySelectorAll('.beer .filter-input:checked')[2].name;
                        }
                        }
                        catch(err)
                        {
                        //Handle errors here
                        }
                        try
                        {
                        //Run some code here
                        if(document.querySelectorAll('.beer .filter-input:checked')[3]!=""){
                            name = name+","+document.querySelectorAll('.beer .filter-input:checked')[3].name;
                        }
                        }
                        catch(err)
                        {
                        //Handle errors here
                        }

                    }
                    else{
                        var name = null;
                    }
                    //Zip
                    var zip = $('input.zip').val();
                    if(zip=="Zip"){
                        zip="32608";
                    }

                    FilterLocations({
                        dist:dist,
                        name: name,
                        zip: zip
                    });
                });

                $('#all').click(function(e)
                {
                    e.preventDefault();
                    $('#filter-container *').prop('disabled', true);
                    FilterLocations({
                        dist:100000,
                        zip: 32608
                    });
                });

                function FilterLocations(args)
                {
                    console.log("Argument object: "+JSON.stringify(args));
                    jQuery.getJSON('http://digitalrelativity.org/BeerMappr/API/GetLocationByZipcode.aspx', {
                        city: args.city,
                        dist: args.dist,
                        name: args.name,
                        zip: args.zip,
                        clientid: 'SWAMP'
                        },
                    function(data)
                    {

                        console.log("Parameter City: *"+args.city+"*");
                        console.log("Parameter Distance: *"+args.dist+"*");
                        console.log("Parameter Lat: *"+args.lat+"*");
                        console.log("Parameter Lon: *"+args.lon+"*");
                        console.log("Parameter Zip: *"+args.zip+"*");
                        console.log("Parameter Name: *"+args.name+"*");
                        console.log("Count: *"+data.count+"*");

                        var sampleArray = [];
                        var json = data;

                        for (var i = 0, length = json.locations.length; i < length; i++)
                        {
                            var data = json.locations[i];
                            var latLng = new google.maps.LatLng(data.lat, data.lng);

                            var html = jQuery.parseHTML(data.description);
                            var fullBeer = $(html).find("li").text();
                            var beerName = fullBeer.substr(0, fullBeer.indexOf(" - "));
                            var fullCat = fullBeer.substr(fullBeer.indexOf("-") + 1);
                            var pack = fullCat.substring(fullCat.lastIndexOf(" ")+1);
                            var release = fullCat.replace(pack,"");
                            var cleanRelease = release.split(' ').join('');

                            sampleArray.push({
                                lat: data.lat,
                                lon: data.lng,
                                release: cleanRelease,
                                title: data.title,
                                html: data.description,
                                icon: 'http://swamp.digitalrelativity.me/wp-content/themes/swamphead/img/Pin'+cleanRelease+'.png'
                            });
                        }

                        maplace.Load({
                            show_markers: true,
                            type:'marker',
                            generate_controls: false,
                            locations: sampleArray
                        });

                        console.log("Found "+json.count+" beers.");
                        console.log("Displayed "+sampleArray.length+" beers.");
                        $('#filter-container *').prop('disabled', false);

                    });
                }

            </script>
            <?php edit_post_link(); ?>

        </article>
        <!-- /article -->

    </section>
    <!-- /section -->

<?php //get_sidebar(); ?>

<?php get_footer(); ?>