<div id="divWrapper_ItemCharacteristicFilter" style="display:none;"></div>
<script type="text/javascript" src="/Ecommerce/Site/Shop/js/colorDictionary.js"></script>
<style type="text/css">
    .dx-list-group-header {
        text-decoration: none;
        color: #ff6607;
        font-family: inherit;
        font-size: 16px;
        border-width: 0;
        min-width: 180px;
        text-transform: uppercase;
        font-weight: 500;
        padding: 20px 10px 10px 0px;
    }

        .dx-list-group-header:before {
            border-width: 0;
        }

    .dx-list-group-collapsed .dx-list-group-header:before {
        border-width: 0;
    }

    .dx-list-group-header:before,
    .dx-list-group-collapsed .dx-list-group-header:before {
        border-bottom-color: transparent;
        border-top-color: transparent;
        margin-top: -2px;
        margin-right: 5px;
    }

    .dx-list-collapsible-groups .dx-list-group-header:before {
        content: "\f077";
        font-family: 'FontAwesome';
        color: #000000;
        float: right;
        font-size: 12px;
    }

    .dx-list-group-collapsed .dx-list-group-header:before {
        /* border-bottom-color: #333; */
        content: "\f078";
        font-family: 'FontAwesome';
        color: #000;
        float: right;
        font-size: 12px;
    }

    .dx-list-group-body {
        max-height: 240px;
        overflow: auto;
        /*    height: auto !important;*/
    }

    .dx-scrollbar-hoverable {
        display: none;
    }

    .dx-scrollable-customizable-scrollbars ::-webkit-scrollbar {
        background-color: #f5f2f2;
        width: 4px;
    }

    .dx-scrollable-customizable-scrollbars ::-webkit-scrollbar-thumb {
        background-color: #d6d6d6;
    }

    /*::-webkit-scrollbar {
        width: 4px;
        height: 1em
    }*/
    .dx-scrollable-customizable-scrollbars ::-webkit-scrollbar-button {
        background: #ccc
    }

    .dx-scrollable-customizable-scrollbars ::-webkit-scrollbar-track-piece {
        background: #f5f2f2
    }

    ::-webkit-scrollbar-thumb {
        background: #d6d6d6
    }




    .dx-list-item {
        border-top-width: 0;
    }

    .dx-radiobutton-icon {
        width: 15px;
        height: 15px;
    }

        .dx-radiobutton-icon:before {
            width: 12px;
            height: 12px;
            border-radius: 0;
            border: 1px solid #000;
        }

    .dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-focused .dx-radiobutton-icon::before,
    .dx-list.dx-list-select-decorator-enabled .dx-list-item.dx-state-focused .dx-checkbox-icon {
        border: 1px solid #000;
    }

    .dx-list-item-before-bag .dx-list-select-checkbox,
    .dx-list-item-before-bag .dx-list-select-radiobutton {
        margin-top: 3px;
        margin-bottom: 0px;
        margin-left: 10px;
    }

    .dx-radiobutton-checked .dx-radiobutton-icon-dot {
        display: block;
        margin-top: -11px;
        margin-left: 3px;
        width: 8px;
        height: 8px;
        background: #787878;
        content: "";
        border-radius: 5px;
    }

    .dx-list-item-content,
    .dx-list .dx-empty-message {
        padding: 6px 0px;
       /* color: #000;*/
    }

    .dx-item-content.dx-list-item-content:hover {
        font-weight: 700;
    }

    div#divActiveFilters_ItemCharacteristicFilter a {
        color: #000;
    }

    .activeFilter {
        display: inline-block;
        height: 16px;
        margin: 0 5px;
        background-image: url(/ECommerce/images/circle-remove.png);
        background-position: 0px 0px;
        cursor: pointer;
        text-decoration: none;
    }

    .FilterListAction {
        padding-left: 10px;
        font-size: 13px;
    }

        .FilterListAction a {
            cursor: pointer;
            display: block;
            color: #0c2916;
        }

            .FilterListAction a:hover {
                text-decoration: underline;
            }

    @media screen and (max-width: 767px) {
        #divWrapper_ItemCharacteristicFilter .dx-scrollable-native.dx-scrollable-vertical, #divWrapper_ItemCharacteristicFilter .dx-scrollable-native.dx-scrollable-vertical .dx-scrollable-container {
            overflow-y: auto;
        }
    }
    .activeFilter {
        display: inline-block;
        height: 16px;
        margin: 0 5px;
        background-image: url(/ECommerce/images/circle-remove.png);
        background-position: 0px 0px;
        cursor: pointer;
        text-decoration: none;
    }

    .FilterListAction {
        padding-left: 10px;
        font-size: 13px;
    }

        .FilterListAction a {
            cursor: pointer;
        }

    .CharacteristicFilterColorTile {
        /* display: inline-block; */
        width: 20px;
        height: 20px;
        float: left;
    }

    .CharacteristicFilterColorName {
        margin: 0 0 0 25px;
    }
</style>

<script type="text/javascript">
    //
    // variables and functions in global space used by this and other widgets
    //

    var CurrentFilterCount = 0,
        TotalFilterCount = 0,
        MinimumItemsToShowFilter = 0,
        FilterCharaceristicPaths = [],
        FiltersToShow = [];

    function GetActiveFilters() {
        var filters = [];
        for (var i = 0; i < FilterCharaceristicPaths.length; i++) {
            if (($('#divFilterList_ItemCharacteristicFilter_' + FilterCharaceristicPaths[i].replace(/[\W_]+/g, '_').toLowerCase()).length)) {
                var f = DevExpress.ui.dxList.getInstance($('#divFilterList_ItemCharacteristicFilter_' + FilterCharaceristicPaths[i].replace(/[\W_]+/g, '_').toLowerCase()));
                var d = f.getDataSource()._items[0];
                var label = d.key;
                var selection = f.option("selectedItemKeys").join(", ");
                if (selection != '') {
                    filters.push({
                        Path: d.path,
                        Value: selection,
                        FilterDiv: 'divFilterList_ItemCharacteristicFilter_' + d.path.replace(/[\W_]+/g, '_').toLowerCase(),
                        Label: d.label,
                        Suffix: d.suffix,
                        DataType: d.dataType
                    });
                }
            }
        }
        return filters;
    };

    function ToggleFilterAction(pathIDString) {
        var pageSize = (widgetOptions.pageSize || 10);
        var data = DevExpress.ui.dxList.getInstance($('#divFilterList_ItemCharacteristicFilter_' + pathIDString)).getDataSource()._items[0];
        if (data.allItems.length != null && data.allItems.length > data.items.length) {
            DevExpress.ui.dxList.getInstance($('#divFilterList_ItemCharacteristicFilter_' + pathIDString)).option('dataSource', [{
                key: data.key,
                items: data.allItems,
                allItems: data.allItems,
                label: data.label,
                path: data.path,
                suffix: data.suffix
            }]
            );
            $('#divFilterListAction_' + pathIDString)
                .empty()
                .append([
                    $('<br />'),
                    $('<a \>')
                        .attr('onclick', 'ToggleFilterAction(\'' + pathIDString + '\');')
                        .append('Show Fewer ' + data.label + ' options'),
                ])
        } else if (data.allItems.length == data.items.length && data.items.length > pageSize) {
            DevExpress.ui.dxList.getInstance($('#divFilterList_ItemCharacteristicFilter_' + pathIDString)).option('dataSource', [{
                key: data.key,
                items: data.items.slice(0, pageSize),
                allItems: data.items,
                label: data.label,
                path: data.path,
                suffix: data.suffix
            }]
            );

            $('#divFilterListAction_' + pathIDString)
                .empty()
                .append([
                    $('<br />'),
                    $('<a \>')
                        .attr('onclick', 'ToggleFilterAction(\'' + pathIDString + '\');')
                        .append('Show More ' + data.label + ' options'),
                    String.Format(' ({0} total)', data.allItems.length)
                ])
        }

    }

</script>

<script type="text/javascript">

    //
    // ItemCharacteristics_Filter Widget Module
    //
    $(document).ready(function () {
        MinimumItemsToShowFilter = widgetOptions.minimumToShow || 2;
        FilterCharaceristicPaths = widgetOptions.characteristicPaths.split(',');
        TotalFilterCount = FilterCharaceristicPaths.length;
        LoadAllFilters();
    });

    function LoadAllFilters() {
        FilterCharaceristicPaths.forEach(function (path, i) {
            loadFilters(path, 'add');
        });
    };

    function reloadFilter(charPath, data) {
        var pathIDString = data[0].path.replace(/[\W_]+/g, '_').toLowerCase();
        var f = DevExpress.ui.dxList.getInstance($('#divFilterList_ItemCharacteristicFilter_' + pathIDString));
        var d = data[0].items;
        if (d.length < 1 || (d.length < MinimumItemsToShowFilter && f.option('selectedItems').length == 0)) {
            f.option('visible', false);
        } else {
            f.option('dataSource', data);
            f.option('visible', true); var pageSize = widgetOptions.pageSize || 10;

            $('#divFilterList_ItemCharacteristicFilter_' + pathIDString).find('.dx-list-group-body').append(
                $('<div \>')
                    .attr('id', 'divFilterListAction_' + pathIDString)
                    .attr('class', 'FilterListAction')
            );

            if (data[0].items.length > pageSize) {
                var d = data;
                if (d[0].allItems == null) {
                    d[0].allItems = data[0].items;
                }
                d[0].items = data[0].items.slice(0, pageSize);

                f.option('dataSource', d);

                $('#divFilterList_ItemCharacteristicFilter_' + pathIDString).find('#divFilterListAction_' + pathIDString).append([
                    $('<a \>')
                        .attr('onclick', 'ToggleFilterAction(\'' + pathIDString + '\');')
                        .append('Show More ' + d[0].label + ' options'),
                    String.Format(' ({0} total)', d[0].allItems.length)
                ]
                );
            }
            // collapseGroup(f);
            if (widgetOptions.showCollapsed != null
                && widgetOptions.enableAccordion != null
                && widgetOptions.showCollapsed
                && widgetOptions.enableAccordion) {
                f.collapseGroup(0);
            }
            // end add
        }
    };

    function loadFilters(charPath, action, filters) {
        var searchParams = GetSearchParameters(1);
        MakeAJAXCall("Inventory.GetCharacteristicInSearchResultsFiltered", {
            CharacteristicPath: charPath,
            SearchString: searchParams.SearchString,
            SearchCategoryID: searchParams.SearchCategoryID,
            IncludeModels: searchParams.IncludeModels,
            IncludeStockCodes: searchParams.IncludeStockCodes,
            IncludeSKUs: searchParams.IncludeSKUs,
            IncludeItemsFromAllChildCategories: searchParams.IncludeItemsFromAllChildCategories,
            Filters: (filters)
                ? JSON.stringify(filters)
                : JSON.stringify([])
        },
            bindFilter,
            {
                "path": charPath,
                "action": action
            }
        );
    };

    function ReloadAllFilters() {
        for (var i = 0; i < FilterCharaceristicPaths.length; i++) {
            loadFilters(FilterCharaceristicPaths[i], 'update', GetActiveFilters())
        }
    };

    function bindFilter(DATA, params) {
        if (DATA != '') {
            var results = JSON.parse(DATA);
            var result = results.Result;
            if (result.Success) {
                var dataSource = results.Data;
                dataSource.Values.forEach(function (val) {
                    val.Suffix = dataSource.Characteristic.Suffix;
                })
                var filterData = [{
                    key: dataSource.Characteristic.Label,
                    items: dataSource.Values,
                    path: dataSource.Characteristic.CharacteristicPath,
                    label: dataSource.Characteristic.Label,
                    suffix: dataSource.Characteristic.Suffix,
                    dataType: dataSource.Characteristic.DataType
                }];
                if (params.action == 'update') {
                    reloadFilter(filterData[0].path, filterData);
                } else {
                    buildFilter(filterData);
                }
            } else {
                TotalFilterCount--;
                console.log('(Widget) ItemCharacteristics_Filter: ' + result.Message);
            };
        };
    };

    function buildFilter(data) {
        var filterDiv = document.createElement('div');
        CurrentFilterCount++;

        filterDiv.id = 'divFilterList_ItemCharacteristicFilter_' + data[0].path.replace(/[\W_]+/g, '_').toLowerCase();
        var filterWidget = $(filterDiv).dxList({
            keyExpr: "Value",
            dataSource: data,
            pageLoadMode: 'scrollNext',
            width: '100%',
            selectionMode: 'single',
            visible: false,
            showSelectionControls: true,
            noDataText: '',
            grouped: true,
            scrollingEnabled: false,
            collapsibleGroups: (widgetOptions.enableAccordion != null)
                ? widgetOptions.enableAccordion
                : true,
            itemTemplate: function (item) {
                function getColordisplay(color) {
                    return color.HexColor.trim() === item.Value.trim();
                };
                if (data[0].dataType === 'Color') {
                    var colorDisplay = COLOR_DICTIONARY.filter(getColordisplay);
                    var template =
                        $('<div />').attr('class', 'colorFilterDisplayWrapper')
                            .append(
                                $('<img />')
                                    .attr('class', 'CharacteristicFilterColorTile')
                                    .attr('style', 'dsiplay: block; width: 20px; height: 20px')
                                    .attr('src', '/Ecommerce/site/images/swatches/' + colorDisplay[0].HexColor.slice(1) + '.png')
                                    .attr('title', colorDisplay[0].Name)
                            )
                            .append(
                                $('<div />').attr('class', 'CharacteristicFilterColorName')
                                    .append(colorDisplay[0].Name)
                            )
                } else {
                    var template = item.Value + ' ' + item.Suffix;
                }
                return template;
            },
            onContentReady: function (e) {
                var pathIDString = data[0].path.replace(/[\W_]+/g, '_').toLowerCase();
                var pageSize = widgetOptions.pageSize || 10;

                $(e.element).find('.dx-list-group-body').append(
                    $('<div \>')
                        .attr('id', 'divFilterListAction_' + pathIDString)
                        .attr('class', 'FilterListAction')
                );

                if (data[0].items.length > pageSize) {
                    var d = data;
                    if (d[0].allItems == null) {
                        d[0].allItems = data[0].items;
                    }
                    d[0].items = data[0].items.slice(0, pageSize);

                    e.component.option('dataSource', d);

                    $(e.element).find('#divFilterListAction_' + pathIDString).append([
                        $('<a \>')
                            .attr('onclick', 'ToggleFilterAction(\'' + pathIDString + '\');')
                            .append('Show More ' + d[0].label + ' options'),
                        String.Format(' ({0} total)', d[0].allItems.length)
                    ]
                    );
                }
                collapseGroup(e, data);
            },
            onGroupRendered: function (e) {


            },
            onSelectionChanged: function (item) {

                if ($('#divActiveFilters_ItemCharacteristicFilter').length) {
                    var filters = GetActiveFilters();
                    var filterHTML = '';
                    var altValue = '';
                    var color;
                    nextPage = 1;

                    filters.forEach(function (filter) {
                        if (filter.DataType === 'Color') {

                            color = COLOR_DICTIONARY.filter(function (color) {
                                return getColordisplay(color, filter);
                            });

                            filterHTML += '<span><a onclick="DevExpress.ui.dxList.getInstance($(\'#' + filter.FilterDiv + '\')).unselectAll();"><img src="/ecommerce/images/spacer.png" class="activeFilter">' + filter.Label + ': ' + '<img src="/Ecommerce/site/images/swatches/' + filter.Value.slice(1) + '.png" style="display:inline; width:20px; height:20px"> ' + color[0].Name + filter.Suffix + '</a></span>';
                        } else {
                            filterHTML += '<span><a onclick="DevExpress.ui.dxList.getInstance($(\'#' + filter.FilterDiv + '\')).unselectAll();"><img src="/ecommerce/images/spacer.png" class="activeFilter">' + filter.Label + ': ' + filter.Value + ' ' + filter.Suffix + '</a></span>';
                        }

                    });
                    if (filterHTML != '') {
                        filterHTML = (widgetOptions.activeFiltersLabelText || 'Active Filters:') + ' ' + filterHTML;
                    }
                    $('#divActiveFilters_ItemCharacteristicFilter').html(filterHTML);
                } else {
                    console.log('(Widget) ItemCharacteristic_Filter: Cannot display active filters. Be sure an element with id=\'divActiveFilters_ItemCharacteristicFilter\' exists in your page HTML.');
                }

                var searchParams = GetSearchParameters(1);
                searchParams.Filters = JSON.stringify(GetActiveFilters());
                MakeAJAXCall(searchParams.SearchOperation, searchParams, SetupItemsToDisplay);
            }

        }).dxList("instance");

        if (data[0].items.length >= MinimumItemsToShowFilter) {
            filterWidget.option('visible', true);
        }

        FiltersToShow.push(filterDiv);
        if (CurrentFilterCount == TotalFilterCount) {
            var prefixLength = 'divFilterList_ItemCharacteristicFilter_'.length;
            FilterCharaceristicPaths.map(function (path) {
                FiltersToShow.map(function (filter) {
                    if (filter.id.slice(prefixLength, filter.id.length) === path.replace(/[\W_]+/g, '_').toLowerCase()) {
                        $("#divWrapper_ItemCharacteristicFilter").append(filter)
                    }
                });
                $("#divWrapper_ItemCharacteristicFilter").css('display', 'block');
            });
        };
    };
    function getColordisplay(color, filter) {
        return color.HexColor === filter.Value;
    };

    function collapseGroup(e, data) {
        if (isPreferredFilterUsed()) {
            if (!isAccordianEnabled() /*=== false*/ || !isCollapseable() /*=== false*/) {
                widgetOptions.preferredFilter = null;
            } else if (isCollapseable() && isAccordianEnabled() === false) {
                widgetOptions.showCollapsed = null;
            } else {
                if (data[0].path.toLowerCase() != widgetOptions.preferredFilter.toLowerCase()) {
                    e.component.collapseGroup(0);
                }
            }
        } else if (isCollapseable() && isAccordianEnabled() === false) {
            widgetOptions.showCollapsed = null;
        } else if (isCollapseable() && isAccordianEnabled()) {
            e.component.collapseGroup(0);
        }
    };

    function isPreferredFilterUsed() {
        var preferredFilter = (widgetOptions.preferredFilter != null)
            ? true
            : false;
        return preferredFilter;
    };

    function isAccordianEnabled() {
        var enableAccordion = (widgetOptions.enableAccordion != null)
            ? widgetOptions.enableAccordion
            : true;
        return enableAccordion;
    };

    function isCollapseable() {
        var showCollapsed = (widgetOptions.showCollapsed != null)
            ? widgetOptions.showCollapsed
            : false;
        return showCollapsed;
    };

    function isFilterColor(item) {
        return item.component._dataSource._store._array[0].dataType === 'Color';
    };

    function doPathsMatch(item, filter) {
        return item.component._dataSource._store._array[0].path === filter.Path;
    };

    function isActiveFilterAdded(item) {
        return item.addedItems.length > 0;
    };

    function isActiveFilterRemoved() {

    };
</script>