function SearchBar() { }

SearchBar.DivID = 'search-bar';
SearchBar.FinishedLoading;

SearchBar.Load = function (selector) {
    $(selector).colorbox({
        title: textItems["selectRegions"],
        close: textItems['Close'],
        width: '900px',
        height: '740px',
        inline: true,
        href: '#region-frame',
        overlayClose: false,
        onComplete: function () {
            $.ajax({
                type: "POST",
                url: "/Services/RegionService.asmx/GetRegionControl",
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (msg) {
                    SearchBar.RenderRegionBox(msg.d);
                }
            });
        }
    });
}

SearchBar.RenderRegionBox = function (html) {
    $("#region-frame").html(html);
    var flashMovie = SearchBar.GetFlashMovie();
    $('#region-frame li input').click(function () {
        if ($(this).is(':checked')) {
            $(this).closest('li').addClass('selected');
            var id = $(this).closest('span').attr('regionid');
            flashMovie.selectRegion(id);
        }
        else {
            $(this).closest('li').removeClass('selected');
            var id = $(this).closest('span').attr('regionid');

            flashMovie.removeRegion(id);
        }

        var id = $(this).closest('span').attr('regionid');
        // Send to flash
    });

    $('#region-frame li').hover(
        function () {
            clearHover();
            $(this).addClass('hover');

            var id = $(this).find('.regionselection>span.checkbox').attr('regionid');
    
            flashMovie.hoverRegion(id);
        },
        function () {
            $(this).removeClass('hover');

            var id = $(this).find('.regionselection>span.checkbox').attr('regionid');
            flashMovie.hoverOutRegion(id);
        }
    );

    //    $('#region-frame li input:checked').closest('li').addClass('selected');
}

SearchBar.GetFlashMovie = function () {
    return getFlashMovieObject('flash-map');
}

SearchBar.Reload = function () {
    SearchBar.PreLoad();

    $.ajax({
        type: "POST",
        url: "/Services/RegionService.asmx/GetSearchBar",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            SearchBar.Render(msg.d);
        }
    });
}

SearchBar.Render = function (html) {
    SearchBar.GetElement().html(html);
    $("#region-bar-message").text("Je filter is aangepast.");
    SearchBar.CleanUp();

    if (SearchBar.FinishedLoading !== undefined)
        SearchBar.FinishedLoading();
}

SearchBar.GetElement = function() {
    return $("#" + SearchBar.DivID);
}

SearchBar.PreLoad = function () {
    var element = SearchBar.GetElement();
    var innerHeight = element.innerHeight();
    var marginBottom = parseInt(element.css('margin-bottom'));

    var height = innerHeight //element.height();
    var width = element.innerWidth();

    var marginTop = '-' + (innerHeight + marginBottom) + 'px';

    var css = {
        width: width + 'px',
        height: innerHeight + 'px',
        marginTop: marginTop
    };

    element.after($("<div></div>")
            .addClass("load-overlay-opacity")
            .css(css)
            .after($("<div></div>")
                .addClass("loading-overlay")
                .css(css))
        );
}

SearchBar.CleanUp = function () {
    $('.load-overlay-opacity, .loading-overlay').remove();
}

function selectRegion(regionCode) {
    var control = getControlByRegionCode(regionCode);
    control.closest('li').addClass('selected');
    control.attr('checked', true);
}

function removeRegion(regionCode) {
    var control = getControlByRegionCode(regionCode);
    control.closest('li').removeClass('selected');
    control.attr('checked', false);
}

function removeRegions() {
    $('#region-frame li span input').attr('checked', false);
}

function clearHover() {
    $('#region-frame li.hover').removeClass('hover');
	
}

function hoverRegion(regionCode) {
    clearHover();

    var control = getControlByRegionCode(regionCode);
    control.closest('li').addClass('hover');
}

function getControlByRegionCode(regionCode) {
    return $('#region-frame li span[regionid="' + regionCode + '"] input');
}