$(document).ready(function() {
        var spinner = $('.spinner');
        spinner.show();
        var objAjax = {
            type: "POST",
            dataType: "JSON",
            async: true,
            url: extendedWeatherInfoPath,
            data:
            {
                spotId: {{$spot['id']}},
                lat: {{$spot['lat']}},
                lng: {{$spot['lng']}}
            },
            success: function(data)
            {
                var wrapper = $('.miniWeatherWidget');
                if(data.error === false) {

                    //////////////////////////////////////////////////////wind graph + wave graph
                    var htmlWind = '<p class="fsWidget">The speed of the wind</p>';
                    var htmlWave = '<p class="fsWidget">The height of the wave</p>';
                    var htmlSlider = '';

                    $.each(data.forecast.info.data.weather, function(i, item){

                        htmlSlider += '<div class="weathertbl">'
                                        +'<p class="hdrLabels tblHeader">'+ moment(item.date).format('dddd') +', '+ moment(item.date).format('MMM') + moment(item.date).format('D') +'</p>'
                                        +'<div class="tblContainer">';

                        htmlWind += '<div class="wrappercols">';
                            htmlWind += '<div class="header-col1-5">'+ moment(item.date).format('dd') + ', '+ moment(item.date).format('D') +'</div>';
                            htmlWind += '<div class="col1-5">';

                        htmlWave += '<div class="wrappercols">';
                            htmlWave += '<div class="header-col1-5">'+ moment(item.date).format('dd') + ', '+ moment(item.date).format('D') +'</div>';
                                 htmlWave += '<div class="col1-5">';

                                 $.each(item.hourly, function(j, itemh){

                                     htmlWind += '<div class="elemItem">'
                                                    +'<div class="elmMed intensity_default intensity_'+ Math.ceil(parseFloat(itemh.windspeedKmph) / 7) +'" style="height:'+ itemh.windspeedKmph +'px"></div>' //7 represents 70(kmph - max speed) / 10 (total color intervals)
                                                    +'<div class="elmMax intensity_default intensity_'+ Math.ceil(parseFloat(itemh.WindGustKmph) / 7) +'" style="top:'+ (70 - itemh.WindGustKmph) +'px"></div>'
                                                +'</div>';

                                     htmlWave += '<div class="elemItem">'
                                                    +'<div class="elmMed intensity_default intensity_'+ Math.ceil(parseFloat(itemh.swellHeight_m) / 0.5) +'" style="height:'+ (70 * (itemh.swellHeight_m) / 5) +'px"></div>' //0.5 represents 5(m - max height / 10 (total color intervals))
                                                    +'<div class="elmMax intensity_default intensity_'+ Math.ceil(parseFloat(itemh.sigHeight_m) / 0.5) +'" style="top:'+ (70 - (70 * (itemh.sigHeight_m) / 5)) +'px"></div>'
                                                +'</div>';

                                     htmlSlider += '<div class="tblColumn">' +
                                                     +'<div class="tblCell">'+ returnReadableHour(itemh.time) +'</div>'
                                                 +' </div>';
                                 });

                            htmlWind += '</div></div>';
                        htmlWave += '</div></div>';

                        htmlSlider += '</div></div>';
                    });
                    $('.topGraph').html(htmlWind);
                    $('.topGraph2').html(htmlWave);
                    $('.containerTables').html(htmlSlider);

                    //load the slider for the generated content
                    loadSlider('.slider');

                } else {
                    wrapper.html(data.error);
                }
            },
            error: function(XMLHttpRequest, textStatus, errorThrown)
            {
                //console.log(errorThrown);
            }
        };

        $.ajax(objAjax);

        function returnReadableHour(time) {
            var objHours = {
                0: '0h',
                300: '03h',
                600: '06h',
                900: '09h',
                1200: '12h',
                1500: '15h',
                1800: '18h',
                2100: '21h'
            };

            return objHours[time];
        }

        function loadSlider(which) {
            $(which).slick({
                dots: false,
                infinite: false,
                speed: 300,
                slidesToShow: 2,
                slidesToScroll: 2,
                responsive: [
                    {
                        breakpoint: 992,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1
                        }
                    },
                    {
                        breakpoint: 768,
                        settings: {
                            slidesToShow: 1,
                            slidesToScroll: 1
                        }
                    }
                    // You can unslick at a given breakpoint now by adding:
                    // settings: "unslick"
                    // instead of a settings object
                ]
            });
        }
    });