(function($) {
    
    "use strict";

    $(window).on("load", function() {
        $.get("/api/inspirations/country/")
            .done(function(data) {
                $("#countrygroup").empty();

                data.forEach(function(value) {
                    var option = $("<option>")
                        .val(value["code"])
                        .text(value["name"]);

                    $("#countrygroup").append(option);

                    if (value["code"] === "AT") {
                        option.prop("selected", true);
                    };
                });

                $("#country").change();
        });
    });

    $("#country").change(function() {
        $.get("/api/inspirations/country/" + $(this).val() + "/")
            .done(function(data) {
                $("#stategroup").empty();
                $("#regiongroup").empty();

                data.forEach(function(value, index) {
                    var selector = (value["state"] ? "#stategroup" : "#regiongroup");
                    var option = $("<option>")
                        .val(value["id"])
                        .text(value["name"]);
                    
                    $(selector).append(option);

                    if (index == 0) {
                        option.prop("selected", true);
                    };
                });
            
                $("#region").change();
        });

    });

    $("#region").change(function() {
        $.get("/api/inspirations/region/" + $(this).val() + "/")
            .done(function(data) {
                $("#inspirations_container").empty();
                data.forEach(function(value, index) {
                    if (index % 2 == 0) {
                        $("#inspirations_container").append($("<div>")
                            .addClass("row")
                        );
                    };

                    var container = $("#inspirations_container div.row:last");

                    var md6 = $("<div>")
                        .addClass("col-md-6");

                    var a = $("<a>")
                        .addClass("widget")
                        .addClass("widget-image")
                        .attr("href", "javascript:;")
                        .attr("data-toggle", "modal")
                        .attr("data-target", "#inspiration" + value["id"] + "Modal");

                    var imagecover = $("<div>")
                        .addClass("widget-image-cover");

                    imagecover.append($("img")
                        .attr("src", value["image"])
                        .attr("alt", value["title"])
                        );

                    var imageinfo = $("<div>")
                        .addClass("widget-image-info");

                    imageinfo.append($("<h5>")
                        .text(value["subtitle"])
                    );

                    imageinfo.append($("<p>")
                        .text(value["title"])
                    );

                    var footrow = $("<div>")
                        .addClass("row");

                    var footmd6left = $("<div>")
                        .addClass("col-md-6");

                    var imageuser = $("<div>")
                        .addClass("widget-image-user");

                    var imageuserimage = $("<div>")
                        .addClass("widget-image-user-image");

                    imageuserimage.append($("<img>")
                        .attr("src", value["sponsor"]["image"])
                        .attr("alt", value["sponsor"]["name"])
                    );

                    var imageuserinfo = $("<div>")
                        .addClass("widget-image-user-info")

                    imageuserinfo.append($("<div>")
                        .text(value["sponsor"]["name"])
                    );

                    imageuserinfo.append($("<span>"));

                    var footmd6right = $("<div>")
                        .addClass("col-md-6");

                    footmd6right.append($("<div>")
                        .addClass("widget-image-rating-text")
                        .text(value["destination"]["name"])
                    );

                    container.append(md6);
                    md6.append(a);
                    a.append(imagecover);
                    a.append(imageinfo);
                    imageinfo.append(footrow);
                    footrow.append(footmd6left);
                    footmd6left.append(imageuser);
                    imageuser.append(imageuserimage);
                    imageuser.append(imageuserinfo);
                    footrow.append(footmd6right);

                });            
        });
    });

    $("#country").change();

})(jQuery);