$(document).ready(function () {
    createCountryDropDown();
    initCountryDropDown();

    createOfficeDropDown();
    initOfficeDropDown();
});

function createCountryDropDown() {

    // set selectedcountry
    var currentCountry = $(".default-country").val();
    if (currentCountry != null && currentCountry != '') {
        var option = $('#source option[value=' + currentCountry + ']');
        if(option != null) {
            option.attr('selected', 'selected');
        }
    }

    var source = $("#source");
    var selected = source.find("option[selected]");
    var options = $("option", source);

    var imgLink = $('#flag-source option[value=' + selected.val() + ']').html();
    var imgTag = '';
    if (imgLink != null && imgLink != '') {
        imgTag = '<img width="16px" height="11px" src="' + imgLink + '" alt="" />'
    }

    $("#country-search").append('<dl id="target" class="dropdown"></dl>')
    $("#target").append('<dt><a href="#" onclick="return false;">' +
                imgTag +
                selected.text() +
                '<span class="value">' + selected.val() +
                '</span></a></dt>')
    $("#target").append('<dd><ul></ul></dd>')

    options.each(function () {
        var imgLink = $('#flag-source option[value=' + $(this).val() + ']').html();
        var imgTag = '';
        if (imgLink != null && imgLink != '') {
            imgTag = '<img width="16px" height="11px" src="' + imgLink + '" alt="" />'
        }
        $("#target dd ul").append('<li><a href="#" onclick="countryClicked(event);">' +
                    imgTag +
                    $(this).text() + '<span class="value">' +
                    $(this).val() + '</span></a></li>');
    });
}

function initCountryDropDown() {
    $("#country-search .dropdown dt a").click(function () {
        $("#single-office-search .dropdown dd ul").hide();
        $("#country-search .dropdown dd ul").toggle();
    });

    $(document).bind('click', function (e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("dropdown"))
            $("#country-search .dropdown dd ul").hide();
    });

    $("#country-search .dropdown dd ul li a").click(function () {
        var text = $(this).html();
        $("#country-search .dropdown dt a").html(text);
        $("#country-search .dropdown dd ul").hide();
        var source = $("#source");
        source.val($(this).find("span.value").html())
    });    
}

function createOfficeDropDown() {
    // set selected office
    var currentOffice = $(".default-office").val();
    if (currentOffice != null && currentOffice != '') {
        var option = $('#office-source option[value=' + currentOffice + ']');
        if (option != null) {
            option.attr('selected', 'selected');
        }
    }

    var source = $("#office-source");
    var selected = source.find("option[selected]");
    var options = $("option", source);

    $("#single-office-search").append('<dl id="office-target" class="dropdown"></dl>')
    $("#office-target").append('<dt><a href="#" onclick="return false;">' +
                selected.text() +
                '<span class="value">' + selected.val() +
                '</span></a></dt>')
    $("#office-target").append('<dd><ul></ul></dd>')

    options.each(function () {
        var url = $('#office-url-source option[value=' + $(this).text() + ']').html();        

        $("#office-target dd ul").append('<li><a href="' + url + '">' +
                    $(this).text() + '<span class="value">' +
                    $(this).val() + '</span></a></li>');
    });
}

function initOfficeDropDown() {
    $("#single-office-search .dropdown dt a").click(function () {
        $("#country-search .dropdown dd ul").hide();
        $("#single-office-search .dropdown dd ul").toggle();
    });

    $(document).bind('click', function (e) {
        var $clicked = $(e.target);
        if (!$clicked.parents().hasClass("dropdown"))
            $("#single-office-search .dropdown dd ul").hide();
    });

    $("#single-office-search .dropdown dd ul li a").click(function () {
        var text = $(this).html();
        $("#single-office-search .dropdown dt a").html(text);
        $("#single-office-search .dropdown dd ul").hide();
        var source = $("#office-source");
        source.val($(this).find("span.value").html())
    });

    var source = $("#source");
    var selectedCountry = source.find("option[selected]");
    if (selectedCountry != null) {
        var countryPath = selectedCountry.val();
        handleCountryChanged(countryPath);
    }
}

function countryClicked(e) {
    if (!e) e = window.event;
    var target = (e.target == null) ? e.srcElement : e.target;
    var countryPath = $(target).find("span.value").html();
    if (countryPath == null || countryPath == '') {
        countryPath = $(target).next("span.value").html();
    }
    handleCountryChanged(countryPath);
}

function handleCountryChanged(countryPath) {
    var country = countryPath.substring(countryPath.lastIndexOf('/') + 1);

    var items = $("#single-office-search li");
    $(items).each(function () {
        if (country == "all") {
            $(this).css("display", "block");
        }
        else {
            var officeCountryPath = $(this).find("span.value").html();
            var officeCountry = officeCountryPath.substring(officeCountryPath.lastIndexOf('/') + 1);
            if (country != officeCountry && officeCountry != "all") {
                $(this).css("display", "none");
            }
            else {
                $(this).css("display", "block");
            }
        }
    });

    var visitCards = $(".visit-card");
    $(visitCards).each(function () {
        if (country == "all") {
            $(this).css("display", "block");
        }
        else {
            var visitCardCountryPath = $(this).find("input.country-tag").attr("value");
            var visitCardCountry = visitCardCountryPath.substring(visitCardCountryPath.lastIndexOf('/') + 1);
            if (country != visitCardCountry && visitCardCountry != "all") {
                $(this).css("display", "none");
            }
            else {
                $(this).css("display", "block");
            }
        }
    });
    return false;
}