CKEDITOR.dialog.add('boldedSpan', function (editor) {
    return {
        title: 'Свойства элемента выбора (выделения жирным)',
        minWidth: 400,
        minHeight: 500,
        contents:
        [
            {
                id: 'Tab-BoldedSpan',
                label: 'Базовые настройки',
                elements: [
                    {
                        type: 'text',
                        id: 'CreateBoldedSpanName',
                        label: 'Имя',
                        validate: CKEDITOR.dialog.validate.notEmpty('Укажите имя элемента.'),
                        required: true

                    },
                    {
                        type: 'text',
                        id: 'CreateBoldedSpanId',
                        label: 'ID элемента',
                        validate: CKEDITOR.dialog.validate.notEmpty('Укажите ID элемента.'),
                        required: true
                    },
                    {
                        type: 'hbox',
                        children:
                            [
                                {
                                    type: 'text',
                                    id: 'SubSpanID',
                                    label: 'ID под-элемента'                        
                                },
                                {
                                    type: 'text',
                                    id: 'SubSpanName',
                                    label: 'Имя под-элемента'
                                },
                            ]
                    },                          
                    {
                        type: 'button',
                        id: 'SubSpanAdd',
                        label: 'Добавить подэлемент',
                        onClick: function () {
                            var a = this.getDialog();
                            var ForSubSpanID = a.getContentElement('Tab-BoldedSpan', 'SubSpanID');
                            var ForSubSpanName = a.getContentElement('Tab-BoldedSpan', 'SubSpanName');                            
                            var InsertedSubID = a.getContentElement('Tab-BoldedSpan', 'PreInsertedSubID');
                            var index = InsertedSubID.items.length;
                            InsertedSubID.items.length += 1;
                            InsertedSubID.add(ForSubSpanID.getValue(), ForSubSpanID.getValue(),index);
                            var InsertedSubName = a.getContentElement('Tab-BoldedSpan', 'PreInsertedSubName');
                            InsertedSubName.add(ForSubSpanName.getValue(), ForSubSpanName.getValue(), index);
                            alert(InsertedSubID.items.length);
                        }
                    },
                    {
                        type: 'html',
                        html: 'Доступные варианты'
                    },
                    {
                        type: 'hbox',
                        label: 'Введённые элементы',
                        children: 
                        [
                                    {
                                        type: 'select',
                                        id: 'PreInsertedSubID',
                                        label: 'ID',
                                        inputStyle: 'width: 190px',
                                        items: [['Basketball'], ['Baseball'], ['Hockey']]
                                    },
                                    {
                                        type: 'select',
                                        id: 'PreInsertedSubName',
                                        label: 'Имя',
                                        inputStyle: 'width: 200px',
                                        items: [['Basketball'], ['Baseball'], ['Hockey']]
                                    },

                        ]
                    },
                    {
                        type: 'checkbox',
                        id: 'CreateBoldedSpanAllowMultiple',
                        label: 'Разрешить множественный выбор'
                    }  
                    ]
            }
        ],
        onOk: function () {
            var dialog = this;
            var CreateBoldedSpan = editor.document.createElement('span');
            CreateBoldedSpan.setAttribute('id', dialog.getValueOf('Tab-BoldedSpan', 'CreateBoldedSpanId'));
            CreateBoldedSpan.setAttribute('name', dialog.getValueOf('Tab-BoldedSpan', 'CreateBoldedSpanName'));
            CreateBoldedSpan.setAttribute('type', 'boldedSpan');
            var isMultiple = dialog.getValueOf('Tab-BoldedSpan', 'CreateBoldedSpanAllowMultiple');
            if (isMultiple == true) {
                CreateBoldedSpan.setAttribute('multiple', 'multiple');
            };
            var InnerSpan = new Array();
            var i = 0;
            var SelName = document.getElementById('cke_124_select');
            for (var i =0 ; i < SelName.length; ) {
                InnerSpan[i] = editor.document.createElement('span');
                InnerSpan[i].setAttribute('id', SelName[i].value);
                InnerSpan[i].setText(SelName[i].value);
                CreateBoldedSpan.append(InnerSpan[i]);                
                InnerSpan[i+1] = editor.document.createElement('span');
                InnerSpan[i+1].setAttribute('id', SelName[i].value);
                InnerSpan[i+1].setAttribute('type', 'DynamicSeparator');
                InnerSpan[i+1].setText(',');
                CreateBoldedSpan.append(InnerSpan[i + 1]);
                i++;
            }
            //var InnerSpan = new Array();
            //var InsertedSubID = dialog.getContentElement('Tab-BoldedSpan', 'PreInsertedSubID');
            //var InsertedSubName = dialog.getContentElement('Tab-BoldedSpan', 'PreInsertedSubName');
            //for (var i in InsertedSubID.items) {
                
            //    //i += 1;
            //    //InnerSpan[i] = editor.document.createElement('span');
            //    //InnerSpan[i].setAttribute('type', 'DynamicSeparator');
            //    //InnerSpan[i].setText(',');
            //    //CreateBoldedSpan.append(InnerSpan[i]);
            //}
            var CreateBoldedSpanIn = editor.document.createElement('span');            
            //CreateBoldedSpanIn.setAttribute('id', 'dfdffsf');
            //CreateBoldedSpanIn.setText('ewdewffefewfew');
            //CreateBoldedSpan.setText('jkllk');
            //alert(InsertedSubID.items.length);
            // var element = CKEDITOR.dom.element.createFromHtml('<span>dsgdgegrg</span><span id="spanDS3" type="DynamicSeparator">,</span>');
            //CreateBoldedSpan.append(CreateBoldedSpanIn);
            editor.insertElement(CreateBoldedSpan);
        }
        
    };
});