Mini Kabibi Habibi

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<asp:Content ID="indexContent" ContentPlaceHolderID="ContentHolder" runat="server">
    <script type="text/javascript">
    //<![CDATA[
        var textSeparator = ";";
        function OnListBoxSelectionChanged(listBox, args) {
            if(args.index == 0)
                args.isSelected ? listBox.SelectAll() : listBox.UnselectAll();
            UpdateSelectAllItemState();
            UpdateText();
        }
        function UpdateSelectAllItemState() {
            IsAllSelected() ? checkListBox.SelectIndices([0]) : checkListBox.UnselectIndices([0]);
        }
        function IsAllSelected() {
            for(var i = 1; i < checkListBox.GetItemCount(); i++)
                if(!checkListBox.GetItem(i).selected)
                    return false;
            return true;
        }
        function UpdateText() {
            var selectedItems = checkListBox.GetSelectedItems();
            checkComboBox.SetText(GetSelectedItemsText(selectedItems));
        }
        function SynchronizeListBoxValues(dropDown, args){
            checkListBox.UnselectAll();
            var texts = dropDown.GetText().split(textSeparator);
            var values = GetValuesByTexts(texts);
            checkListBox.SelectValues(values);
            UpdateSelectAllItemState();
            UpdateText();  // for remove non-existing texts
        }
        function GetSelectedItemsText(items) {
            var texts = [];
            for(var i = 0; i < items.length; i++)
                if(items[i].index != 0)
                    texts.push(items[i].text);
            return texts.join(textSeparator);               
        }
        function GetValuesByTexts(texts) {
            var actualValues = [];
            var item;
            for(var i = 0; i < texts.length; i++) {
                item = checkListBox.FindItemByText(texts[i]);
                if(item != null)
                    actualValues.push(item.value);
            }
            return actualValues;
        }
    // ]]>    
    </script>
    <% 
        Html.DevExpress().DropDownEdit(
            settings => {
                settings.Name = "checkComboBox";
                settings.SkinID = "CheckComboBox";
                settings.Text = "Chrome;Safari";
                settings.Width = 210;
                settings.Properties.DropDownWindowStyle.BackColor = Color.FromArgb(0xEDEDED);
                
                settings.SetDropDownWindowTemplateContent(c =>
                {%>
                    <% 
                        Html.DevExpress().ListBox(
                            listBoxSettings => {
                                listBoxSettings.Name = "checkListBox";
                                listBoxSettings.SkinID = "CheckComboBoxListBox";
                                listBoxSettings.ControlStyle.Border.BorderWidth = 0;
                                listBoxSettings.ControlStyle.BorderBottom.BorderWidth = 1;
                                listBoxSettings.ControlStyle.BorderBottom.BorderColor = Color.FromArgb(0xDCDCDC);
                                listBoxSettings.Width = Unit.Percentage(100);
                                
                                listBoxSettings.Properties.SelectionMode = ListEditSelectionMode.CheckColumn;
                                listBoxSettings.Properties.Items.Add("(Select all)");
                                listBoxSettings.Properties.Items.Add("Chrome", "1");
                                listBoxSettings.Properties.Items.Add("Firefox", "2");
                                listBoxSettings.Properties.Items.Add("IE", "3");
                                listBoxSettings.Properties.Items.Add("Opera", "4");
                                listBoxSettings.Properties.Items.Add("Safari", "5");
                                
                                listBoxSettings.Properties.ClientSideEvents.SelectedIndexChanged = "OnListBoxSelectionChanged";
                            }
                        )
                        .Render();
                    %>
                    <div style="padding: 6px; height: 24px;">
                        <% 
                            Html.DevExpress().Button(
                                buttonSettings => {
                                    buttonSettings.Name = "buttonClose";
                                    buttonSettings.Text = "Close";
                                    buttonSettings.Style.Add("float", "right");
                                    buttonSettings.ClientSideEvents.Click = "function(s, e){ checkComboBox.HideDropDown(); }";
                                }
                            )
                            .Render();
                        %>
                    </div>
                <%});
                settings.Properties.AnimationType = AnimationType.None;
                settings.Properties.ClientSideEvents.TextChanged="SynchronizeListBoxValues";
                settings.Properties.ClientSideEvents.DropDown = "SynchronizeListBoxValues";
            }
        )
        .Render();
    %>
</asp:Content>