$(document).ready(function() {
    greeting();
    $.simpleWeather({
        location: 'Singapore, SG',
        woeid: '',
        unit: 'C',
        success: function(weather) {
            $("#weather-temp").html(weather.temp + '&deg;' + weather.units.temp);
            $("#weather-text").html(weather.currently);
            var code = weather.code;
            // code = 21;
            switch (parseInt(code)) {
                case 11:
                case 12:
                case 40:
                    //showers
                    $(".weather-icon").html('<svg viewbox="375 0 170 170"><defs><style>.rain{fill:none;stroke-miterlimit:10;stroke:#3fa9f5;stroke-width:10px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;animation:animate-rain 1s linear infinite}.cloud{fill:#fff;stroke:#999;animation:animate-cloud 3s linear;stroke-width:10px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:400}.rain-2{animation-delay:.3s}.rain-3{animation-delay:.6s}@keyframes animate-cloud{0%{stroke-dashoffset:400}25%{stroke-dashoffset:0}}@keyframes animate-rain{0%{opacity:.5;stroke-dashoffset:120}100%{stroke-dashoffset:0}}</style></defs><path class="cloud" d="M416.42,104H532.37a15.48,15.48,0,0,0,6.15-1.26c4.12-1.78,10.31-5.62,10.31-12.63,0-16.38-15.61-13.27-15.61-13.27s1.72-11.12-9.8-21c-9-7.7-25-3.62-25-3.62s1.69-27.65-39.35-27.42c-40.05.22-34.69,39.6-34.69,39.6s-25.65.23-25.65,18.73C398.72,104,416.42,104,416.42,104Z" transform="translate(-15 -11.17)"/><line class="rain rain-1" x1="420.57" y1="106.14" x2="389.98" y2="152.92"/><line class="rain rain-2" x1="444.47" y1="106.14" x2="413.88" y2="152.92"/><line class="rain rain-3" x1="468.36" y1="106.14" x2="437.77" y2="152.92"/><line class="rain rain-4" x1="492.25" y1="106.14" x2="461.66" y2="152.92"/></svg>');
                    break;
                case 21:
                    //haze
                    $(".weather-icon").html('<svg viewBox="200 490 51 34"><defs><style>.cls-5{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:3px;stroke-dasharray:50;stroke:#757575;animation:animate 4s cubic-bezier(0,0,.2,1)}.wave2,.wave4{animation-delay:.3s}@keyframes animate{0%{stroke-dashoffset:100}50%{stroke-dashoffset:0}}</style></defs><path class="cls-5 wave1" d="M206.13,517.1c3.3,2.88,9,3.75,12.12,1a7.21,7.21,0,0,1,10.12,0c3.19,2.78,6.9,2.8,10.12,0s6.84-2.86,10.12,0" transform="translate(0)"/> <path class="cls-5 wave2" d="M206.13,509.35c3.3,2.88,9,3.75,12.12,1a7.21,7.21,0,0,1,10.12,0c3.19,2.78,6.9,2.8,10.12,0s6.84-2.86,10.12,0" transform="translate(0)"/> <path class="cls-5 wave3" d="M206.13,501.59c3.3,2.88,9,3.75,12.12,1a7.21,7.21,0,0,1,10.12,0c3.19,2.78,6.9,2.8,10.12,0s6.84-2.86,10.12,0" transform="translate(0)"/> <path class="cls-5 wave4" d="M206.13,493.85c3.3,2.88,9,3.75,12.12,1a7.21,7.21,0,0,1,10.12,0c3.19,2.78,6.9,2.8,10.12,0s6.84-2.86,10.12,0" transform="translate(0)"/></svg>');
                break;
                case 25:
                case 26:
                case 27:
                case 28:
                case 29:
                case 30:
                    //cloudy
                break;
                case 31:
                case 33:
                case 34:
                    //clear
                    $(".weather-icon").html('<svg viewBox="100 20 110 120" class="sunny"><defs><style>.sun{fill:#FFD600}.sunny{animation:pulse 3s ease infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}</style></defs><circle class="sun" cx="153.23" cy="76.33" r="47.94"/></svg>');
                    break;
                case 32:
                case 36:
                    //sunny
                    $(".weather-icon").html('<svg viewBox="60 0 180 200"><defs><style>circle{fill:#FFD600;transform:scale(1);animation:expand 3s ease-in;transform-origin:center}.rays{stroke:#ffd600;stroke-width:10px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;transform:scale(1);animation:spinxpand 3s ease-out;transform-origin:center}@keyframes expand{0%{transform:scale(0)}20%{transform:scale(1)}}@keyframes spinxpand{0%{transform:scale(0) rotate(0)}100%{transform:scale(1) rotate(360deg)}}</style></defs><g id="Sunny"><circle class="cls-1" cx="153.23" cy="76.33" r="47.94"/><g id="sunrays" class="rays"><line class="cls-1" x1="209.18" y1="76.33" x2="227.06" y2="76.33"/><line class="cls-1" x1="201.69" y1="48.36" x2="217.17" y2="39.42"/><line class="cls-1" x1="181.2" y1="27.87" x2="190.14" y2="12.39"/><line class="cls-1" x1="153.23" y1="20.38" x2="153.23" y2="2.5"/><line class="cls-1" x1="125.25" y1="27.87" x2="116.31" y2="12.39"/><line class="cls-1" x1="104.77" y1="48.36" x2="89.29" y2="39.42"/><line class="cls-1" x1="97.27" y1="76.33" x2="79.39" y2="76.33"/><line class="cls-1" x1="104.77" y1="104.31" x2="89.29" y2="113.25"/><line class="cls-1" x1="125.25" y1="124.79" x2="116.31" y2="140.27"/><line class="cls-1" x1="153.23" y1="132.29" x2="153.23" y2="150.17"/><line class="cls-1" x1="181.2" y1="124.79" x2="190.14" y2="140.27"/><line class="cls-1" x1="201.69" y1="104.31" x2="217.17" y2="113.25"/></g></g></svg>');
                    break;
                case 3:
                case 4:
                case 37:
                case 38:
                case 39:
                case 47:
                    //thunderstorm
                    $('.weather-icon').html('<svg viewBox="180 0 180 160"><defs><style>.cloud,.lightning,.rain{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:10px;stroke-dasharray:400}.lightning{stroke:#f4c800;animation:animate-lightning 3s linear infinite;stroke-dasharray:100}.cloud{fill:#fff;stroke:#999;animation:animate-cloud 3s linear}.rain{animation:animate-rain 1s linear infinite;stroke-dasharray:60;stroke:#3fa9f5}@keyframes animate-cloud{0%{stroke-dashoffset:400}25%{stroke-dashoffset:0}}@keyframes animate-lightning{0%{stroke-dashoffset:100;opacity:1}10%{stroke-dashoffset:0;opacity:1}}.rain-2{animation-delay:.3s}.rain-3{animation:animate-rain 1s linear infinite;animation-delay:.6s;stroke-width:10px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;opacity:100%}@keyframes animate-rain{0%{opacity:.5;stroke-dashoffset:120}100%{stroke-dashoffset:0}}</style></defs><path class="cloud" d="M224.9,94.43H340.85A15.48,15.48,0,0,0,347,93.17c4.12-1.78,10.31-5.62,10.31-12.63,0-16.38-15.61-13.27-15.61-13.27s1.72-11.12-9.8-21c-9-7.7-25-3.62-25-3.62S308.57,15,267.54,15.23c-40.05.22-34.69,39.6-34.69,39.6s-25.65.23-25.65,18.73C207.2,94.5,224.9,94.43,224.9,94.43Z" transform="translate(-15 -11.17)"/><polyline id="lightning" class="cls-3 lightning" points="319.66 68.46 299.6 96.24 321.72 96.24 301.66 126.85"/><line class="rain rain-1" x1="229.05" y1="96.59" x2="198.46" y2="143.37"/><line class="rain rain-2" x1="253.05" y1="96.59" x2="222.46" y2="143.37"/><line class="rain rain-3" x1="277.05" y1="96.59" x2="246.46" y2="143.37"/></svg>');
                    break;
                case 3200:
                    $('.weather-icon').html('?');
                    break;
            }
        },
        error: function(error) {
            $("#weather").html('<p>' + error + '</p>');
        }
    });
});
// $(".search-box").on('click', function (){
$(".search-box.inactive, .backbtn, .searchbtn, .closebtn").on('click', function (){
    $(".search-box").toggleClass("inactive");
    $(".mainnav").toggleClass("hide");
    $(".cards").toggleClass("hide");
    $("header>.logo").toggleClass("hide");
    $(".recent-nearby-search").toggleClass("hide");
    $(".bg").toggleClass("blur");
    $(".recent-search").toggleClass("hide");
    $(".search-box").toggleClass("active");
    $(".backbtn").toggleClass("hide");
    $(".filterbtn").toggleClass("hide");
    $(".homebtn").toggleClass("hide");
    $(".closebtn").toggleClass("hide");
});

$(".recent-list>li").on('click',function(){
    alert($(this).text().trim());
});

function greeting() {
    var now = new Date();
    var hours = now.getHours();
    var msg;
    if (hours < 12) msg = "Good Morning";
    else if (hours < 18) msg = "Good Afternoon";
    else msg = "Good Evening";
    $("#weather-greeting").html(msg);
}

var mainnavHeight = $('.mainnav').height();
$('#container').scroll(function(event) {
    var scroll = $('#container').scrollTop();
    var scale = 1 - (1 / ((mainnavHeight / 2) / scroll));
    var opacity = (1 / ((mainnavHeight / 2) / scroll));

    if(opacity >= 1) {
        opacity = 1;
    }
    $('header').css('background', 'rgba(255,255,255,'+opacity+')');

    $('.mainnav').css('transform', 'scale('+scale+') translateX(-50%)');
    $('.mainnav').css('-o-transform', 'scale('+scale+') translateX(-50%)');
    $('.mainnav').css('-moz-transform', 'scale('+scale+') translateX(-50%)');
    $('.mainnav').css('-webkit-transform', 'scale('+scale+') translateX(-50%)');
    $('.mainnav').css('opacity', scale);
    if (scale <= 0) {
        $('.mainnav').css('display', 'none');
    } else {
        $('.mainnav').css('display', 'block');
    }
});
