Your IP : 216.73.216.50


Current Path : /home/azimutno/www/demo/libraries/nextend/assets/smartslider/admin/js/
Upload File :
Current File : /home/azimutno/www/demo/libraries/nextend/assets/smartslider/admin/js/slide.layer.js

(function ($, scope, undefined) {
    scope.ssadminLayersClass = NClass.extend({
        active: false,
        init: function (slide, slideobj, layouturl) {
            var $this = this;
            this.slide = slide;

            this.layercanvas = slide.find('> .smart-slider-canvas-inner');
            if (this.layercanvas.length === 0) this.layercanvas = slide;

            this.parent = slideobj;
            this.slideSize = {
                width: slide.width(),
                height: slide.height()
            };
            this.zindex = [];
            this.activeLayer = $({});
            this.initToolbox();
            this.views = $('.smartslider-slide-view');
            this.toolboxviews = $('.smartslider-slide-toolbox-view');
            this.layerClass = '.smart-slider-layer';
            this.refreshLayers();

            this.layouts = new ssadminLayoutsClass(this, layouturl);

            this.items = new ssadminItemsClass(this);
            this.sortableItems = '> .smart-slider-items, > .smart-slider-item-container';

            this.makeDummyLayerSortable();
            this.layers.each(function () {
                $this.makeLayerResizeable(this);
                $this.makeLayerDraggable(this);
                $this.makeLayerDeletable(this);
                $this.makeLayerZindexable(this);
                $this.makeLayerSortable(this);
                $this.formAddLayer(this);
                $this.items.initLayer(this);
            });
            this.refreshSortableConnectWith();
            this.views.eq(1).on('click', function () {
                $this.switchToLayerTab();
            });
            $('.smartslider-createlayer').on('click', function () {
                $this.createLayer();
                slideconsole.set('Layer created', 2);
            });

            $('#smartslider-slide-toolbox-layer').on('mouseenter',function () {
                $('#smartslider-admin').addClass('smartslider-layer-highlight-active');
            }).on('mouseleave', function () {
                    $('#smartslider-admin').removeClass('smartslider-layer-highlight-active');
                });

            if (this.getParameterByName('action') == 'create') {
                this.layouts.switchToLayoutTab();
            } else {
                this.switchToLayerTab();
            }

            this.enableLayerMode();
            this.items.enableItemMode();

            this.initAdvancedView();

        },
        getParameterByName: function (name) {
            name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
            var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                results = regex.exec(location.search);
            return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        },
        switchToLayerTab: function () {
            this.views.removeClass('active');
            this.views.eq(1).addClass('active');
            this.toolboxviews.parent().css((window.nextendDir == 'rtl' ? 'marginRight' : 'marginLeft'), '-100%');
            this.parent.switchToEdit();
            $('#smartslider-admin').removeClass('smartslider-item-mode-active');
            $('#smartslider-admin').addClass('smartslider-layer-mode-active');
            $(window).trigger('resize');
        },
        enableLayerMode: function () {
            if (this.active === true)
                return;
            this.active = true;
            this.layerModeChanged();
        },
        disableLayerMode: function () {
            if (this.active === false)
                return;
            this.active = false;
            this.layerModeChanged();
        },
        layerModeChanged: function () {
            var $this = this;
            this.layers.each(function () {
                if ($this.active) {
                    $(this).draggable("enable");
                } else {
                    $(this).draggable("disable");
                }
            });
            if (this.active) {
                this.slide.addClass('smartslider-layer-mode');
            } else {
                this.slide.removeClass('smartslider-layer-mode');
                if (this.leaveborder) {
                    this.slide.addClass('smartslider-layer-border-mode');
                    this.leaveborder = false;
                }
            }
        },
        createLayer: function () {
            var $layer = $('<div class="smart-slider-layer" style="top: 0%; left: 0%; width: 20%; height: 20%; position: absolute;" data-animation="slide">'),
                layer = $layer[0];
            this.layercanvas.append($layer);
            this.makeLayerResizeable(layer);
            this.makeLayerDraggable(layer);
            this.makeLayerDeletable(layer);
            this.makeLayerZindexable(layer);
            this.makeLayerSortable(layer);
            this.refreshLayers();
            this.formAddLayer(layer);
            this.items.refreshSortableConnect();
            this.refreshSortableConnectWith();
            this.switchToLayerTab();
            this.setActiveLayer($(layer));
        },
        addLayer: function (node) {
            var $layer = $(node).clone(),
                layer = $layer[0];
            $layer.find('[class^=ui-]').remove();
            $layer.find('.active').removeClass('active');
            $layer.find('.ui-resizable').removeClass('ui-resizable');
            $layer.find('.ui-draggable').removeClass('ui-draggable');
            $layer.find('.ui-sortable').removeClass('ui-sortable');
            this.layercanvas.append($layer);
            this.makeLayerResizeable(layer);
            this.makeLayerDraggable(layer);
            this.makeLayerDeletable(layer);
            this.makeLayerZindexable(layer);
            this.makeLayerSortable(layer);
            this.refreshLayers();
            this.formAddLayer(layer);
            this.items.initLayer(layer);
            this.items.refreshSortableConnect();
            this.refreshSortableConnectWith();
            return $layer;
        },
        refreshLayers: function () {
            this.layers = this.slide.find(this.layerClass);
        },
        makeLayerResizeable: function (layer) {
            var $this = this,
                $layer = $(layer);
            $layer.resizable({
                /*disabled: !this.active,*/
                handles: 'n, e, s, w, ne, se, sw, nw',
                containment: this.layercanvas,
                start: function () {
                    $('#smartslider-admin').addClass('smartslider-layer-highlight-active-2');
                },
                stop: function () {
                    $('#smartslider-admin').removeClass('smartslider-layer-highlight-active-2');
                    $this.makeLayerToPercent(this, true, true);
                }
            });

            $layer.find('> .ui-resizable-handle').on('mouseenter',function () {
                slideconsole.set('Resize layer - drag', 1, 0);
            }).on('mouseleave', function () {
                    slideconsole.set('', 1, 0);
                });
        },
        makeLayerDeletable: function (layer) {
            var $this = this;
            var removeLayer = $('<div class="ui-removelayer-handle" style="z-index: 92;"></div>');
            $(layer).append(removeLayer);
            removeLayer.on('click',function () {
                $this.deleteLayer(layer);
                slideconsole.set('Layer deleted', 2);
            }).on('mouseenter',function () {
                    slideconsole.set('Delete layer - click', 1, 0);
                }).on('mouseleave', function () {
                    slideconsole.set('', 1, 0);
                });
        },
        makeLayerZindexable: function (layer) {
            var $this = this,
                $layer = $(layer),
                forward = $('<div class="ui-forward-handle" style="z-index: 91;"></div>'),
                backward = $('<div class="ui-backward-handle" style="z-index: 91;"></div>'),
                $zindex = $('<div class="ui-zindex-handle" style="z-index: 91;"></div>');

            var i = parseInt($layer.css('zIndex'));
            if (!i) {
                i = this.zindex.length > 0 ? this.zindex.length : 1;
            }
            while (this.zindex[i]) {
                i++;
            }
            this.zindex[i] = $layer;
            $layer.css('zIndex', i);

            $layer.data('sszIndex', $zindex);

            $zindex.html(i);
            $layer.append(forward)
                .append($zindex)
                .append(backward);
            forward.on('click',function () {
                var i1 = parseInt($layer.css('zIndex')),
                    i2 = i1 + 1,
                    tmp = undefined;
                if ($this.zindex[i2]) {
                    tmp = $this.zindex[i2];
                    tmp.css('zIndex', i1);
                    tmp.data('sszIndex').html(i1);
                }
                $this.zindex[i2] = $layer;
                $this.zindex[i1] = tmp;
                $layer.css('zIndex', i2);
                $zindex.html(i2);
                //$this.layers.removeClass('smart-slider-main-layer');
                //$($this.zindex[1]).addClass('smart-slider-main-layer');
            }).on('mouseenter',function () {
                    $this.slide.addClass('smart-slider-showzindex');
                }).on('mouseleave', function () {
                    $this.slide.removeClass('smart-slider-showzindex');
                });
            backward.on('click',function () {
                var i1 = parseInt($layer.css('zIndex')),
                    i2 = i1 - 1,
                    tmp = undefined;
                if (i2 < 1)
                    return;
                if ($this.zindex[i2]) {
                    tmp = $this.zindex[i2];
                    tmp.css('zIndex', i1);
                    tmp.data('sszIndex').html(i1);
                }
                $this.zindex[i2] = $layer;
                $this.zindex[i1] = tmp;
                $layer.css('zIndex', i2);
                $zindex.html(i2);
                //$this.layers.removeClass('smart-slider-main-layer');
                //$($this.zindex[1]).addClass('smart-slider-main-layer');
            }).on('mouseenter',function () {
                    $this.slide.addClass('smart-slider-showzindex');
                }).on('mouseleave', function () {
                    $this.slide.removeClass('smart-slider-showzindex');
                });

            $zindex.on('mouseenter',function () {
                $this.slide.addClass('smart-slider-showzindex');
            }).on('mouseleave', function () {
                    $this.slide.removeClass('smart-slider-showzindex');
                });


            forward.on('mouseenter',function () {
                slideconsole.set('Increment z-index - click', 1, 0);
            }).on('mouseleave', function () {
                    slideconsole.set('', 1, 0);
                });

            backward.on('mouseenter',function () {
                slideconsole.set('Decrement z-index - click', 1, 0);
            }).on('mouseleave', function () {
                    slideconsole.set('', 1, 0);
                });

            $zindex.on('mouseenter',function () {
                slideconsole.set('Current z-index', 1, 0);
            }).on('mouseleave', function () {
                    slideconsole.set('', 1, 0);
                });
        },
        makeLayerDraggable: function (layer) {
            var $this = this,
                $layer = $(layer),
                handle = $('<div class="ui-movable-handle" style="z-index: 91;"></div>');
            $layer.draggable({
                disabled: !this.active,
                containment: this.layercanvas,
                create: function () {
                    $(this).append(handle);
                },
                start: function () {
                    $('#smartslider-admin').addClass('smartslider-layer-highlight-active-2');
                },
                stop: function () {
                    $('#smartslider-admin').removeClass('smartslider-layer-highlight-active-2');
                    $this.makeLayerToPercent(this, true);
                },
                handle: '.ui-movable-handle'
            });
            handle.on('mouseenter',function () {
                slideconsole.set('Move layer - drag', 1, 0);
            }).on('mouseleave', function () {
                    slideconsole.set('', 1, 0);
                });
        },
        makeLayerToPercent: function (layer, position, size) {
            var $layer = $(layer);
            if (position) {
                $layer.css('left', (parseFloat($layer.css('left')) / this.slideSize.width * 100).toFixed(3) + '%');
                $layer.css('top', (parseFloat($layer.css('top')) / this.slideSize.height * 100).toFixed(3) + '%');
            }
            if (size) {
                $layer.width(Math.ceil(1000 * $layer.width() / this.slideSize.width * 100) / 1000 + '%');
                $layer.height(Math.ceil(1000 * $layer.height() / this.slideSize.height * 100) / 1000 + '%');
            }
            this.updatePositionField(layer);
        },
        makeLayerSortable: function (layer) {
            var $this = this;
            $(layer).nextendSortable({
                disabled: !this.items.active,
                items: this.sortableItems,
                zIndex: 120000,
                helper: "clone",
                placeholder: "sortable-placeholder",
                forcePlaceholderSize: true,
                tolerance: "pointer",
                appendTo: this.layercanvas,
                handle: '.ui-movableitem-handle',
                update: function (event, ui) {
                    $this.items.updateItem(ui);
                },
                start: function () {
                    $this.slide.addClass('smartslider-layer-border-mode');
                    slideconsole.set('Drop the item into a layer', 2, 0);
                },
                stop: function () {
                    $this.slide.removeClass('smartslider-layer-border-mode');
                    slideconsole.set('Item dropped into the layer', 2);
                }
            });
        },
        makeDummyLayerSortable: function () {
            var $this = this;

            this.dummyLayer = $('#smart-slider-layer-dummy');
            this.dummyLayer.nextendSortable({
                items: this.sortableItems,
                zIndex: 12,
                helper: "clone",
                tolerance: "pointer",
                appendTo: 'body',
                handle: '.ui-movableitem-handle',
                update: function (event, ui) {

                }
            });
            window.dummySortable = this.dummyLayer.data('ui-sortable');
        },
        deleteLayers: function () {
            var $this = this;
            this.layers.each(function (i, layer) {
                $this.deleteLayer(layer);
            });
        },
        deleteLayer: function (layer) {
            var $layer = $(layer);
            //$layer.data('sszIndex');
            this.zindex[parseInt($layer.css('zIndex'))] = null;

            $layer.resizable('destroy');
            $layer.draggable('destroy');
            $layer.nextendSortable('destroy');
            var option = $layer.data('ssoption'),
                select = option.parent()[0],
                optgroup = $layer.data('ssoptgroup'),
                optgroupselect = optgroup.parent()[0];
            select.selectedIndex = optgroupselect.selectedIndex = 0;
            $.fireEvent(optgroupselect, 'change');
            $.fireEvent(select, 'change');
            option.remove();
            optgroup.remove();
            $layer.remove();
            this.refreshLayers();
            this.refreshSortableConnectWith();
            this.items.refreshSortableConnect();
        },
        refreshSortableConnectWith: function () {
            this.layers.nextendSortable('option', 'connectWith', this.layers.add(this.items.items).add(this.dummyLayer));
        },
        destroy: function () {
            /*
             * Use getHTML instead
             * 
             */
            this.layers.resizable('destroy');
            this.layers.draggable('destroy');
            this.layers.nextendSortable('destroy');
            this.slide.find('[class^=ui-]').remove();
            this.slide.find('.active').removeClass('active');
        },
        getHTML: function () {
            var slide = this.layercanvas.clone();
            slide.find('[class^=ui-]').remove();
            slide.find('.active').removeClass('active');
            slide.find('.ui-resizable').removeClass('ui-resizable');
            slide.find('.ui-draggable').removeClass('ui-draggable');
            slide.find('.ui-sortable').removeClass('ui-sortable');
            slide.appendTo($('body'));
            slide.children().removeAttr('aria-disabled');
            var html = slide.html();
            slide.remove();

            return $.trim(html)/*.replace(/\\/g,'\\\\')*/;
        },
        initToolbox: function () {
            var $this = this;
            this.toolbox = $('#smartslider-slide-toolbox-layer');
            this.form = {};
            this.form.tabs = this.toolbox.find('.nextend-tab').slice(1);
            this.form.layers = $('#layerlayer').on('change', function (e) {
                $this.changeActiveLayer(e);
            });
            this.form.layersSelect = $(this.form.layers[0].select).css('float', 'left');
            var deleteLayer = $('<a href="#" class="smartslider-icon smartslider-icon-trash"></a>');
            var selectparent = this.form.layersSelect.parent();
            deleteLayer.css({
                float: 'left',
                marginTop: '2px'
            });
            deleteLayer.appendTo(selectparent);
            deleteLayer.on('click', function (e) {
                e.preventDefault();
                var si = $this.form.layersSelect[0].selectedIndex;
                if (si) {
                    if (confirm('Are you sure that you want to delete the layer?')) {
                        var layer = $($this.form.layersSelect[0].options[si]).data('sslayer');
                        $this.deleteLayer(layer);
                    }
                } else {
                    alert('Layer not selected!');
                }
            });

            var duplicateLayer = $('<a href="#" class="smartslider-icon smartslider-icon-duplicate"></a>');
            duplicateLayer.css({
                float: 'left',
                marginTop: '2px'
            });
            duplicateLayer.appendTo(selectparent);
            duplicateLayer.on('click', function (e) {
                e.preventDefault();
                var si = $this.form.layersSelect[0].selectedIndex;
                if (si) {
                    var $layer = $this.addLayer($($this.form.layersSelect[0].options[si]).data('sslayer'));
                    $this.setActiveLayer($layer);
                } else {
                    alert('Layer not selected!');
                }
            });

            this.form.defaults = {};
            this.form.fields = this.toolbox.find('[name^="layer"]').slice(1);
            this.form.positionfields = this.form.fields.slice(1, 5);

            this.form.positionfields.eq(0).on('change', function () {
                $this.setPositionField($this.activeLayer[0], 'left', this.value);
            });
            this.form.positionfields.eq(1).on('change', function () {
                $this.setPositionField($this.activeLayer[0], 'top', this.value);
            });
            this.form.positionfields.eq(2).on('change', function () {
                $this.setPositionField($this.activeLayer[0], 'width', this.value);
            });
            this.form.positionfields.eq(3).on('change', function () {
                $this.setPositionField($this.activeLayer[0], 'height', this.value);
            });

            this.form.fields = this.form.fields.not(this.form.positionfields);

            this.form.fields.each(function () {
                var $el = $(this);
                $el.data('name', $el.attr('name').match(/layer\[(.*?)\]/)[1]);
            });
            this.form.fields.slice(1).each(function () {
                var $el = $(this),
                    $name = $el.data('name');
                $this.form.defaults[$name] = $el.val();
                $el.on('change', function () {
                    $this.changeActiveLayerData($name, $el.val());
                });
            });
            this.form.fields.eq(0).on('change keyup', function (e) {
                var name = e.currentTarget.value,
                    option = $this.activeLayer.data('ssoption')[0],
                    $options = $($this.form.layersSelect[0].options),
                    namecheckfn = function () {
                        if (this.value == name && this != option) {
                            name += ' - copy';
                            $options.each(namecheckfn);
                            return false;
                        }
                    };
                if (name == '') name = 'empty';
                $options.each(namecheckfn);
                e.currentTarget.value = name;
                $this.changeActiveLayerName(e.currentTarget.value);
            });
            this.form.layers.trigger('change');
        },
        formAddLayer: function (layer) {
            var $layer = $(layer);
            if ($layer.ssdata('name') === undefined) {
                $layer.ssdata('name', 'Layer #' + (this.form.layersSelect[0].options.length));
            }
            var name = $layer.ssdata('name'),
                $options = $(this.form.layersSelect[0].options),
                namecheckfn = function () {
                    if (this.value == name) {
                        name += ' - copy';
                        $layer.ssdata('name', name);
                        $options.each(namecheckfn);
                        return false;
                    }
                };
            $options.each(namecheckfn);

            var $option = $('<option value="' + name + '">' + $layer.ssdata('name') + '</option>');
            this.form.layersSelect.append($option);
            $layer.data('ssoption', $option);
            $option.data('sslayer', $layer);
            var $optgroup = $('<optgroup label="' + $layer.ssdata('name') + '"></optgroup>');
            this.items.form.select.append($optgroup);
            $layer.data('ssoptgroup', $optgroup);
            $optgroup.data('sslayer', $layer);
            this.makeLayerActivable($layer);
        },
        makeLayerActivable: function ($layer) {
            var $this = this;
            $layer.on('mousedown', function (e) {
                $this.setActiveLayer($layer, e);
                slideconsole.set('Layer selected', 1);
            });
        },
        changeActiveLayer: function (e) {
            var select = e.currentTarget.select;
            if (select.selectedIndex === 0) {
                this.form.tabs.css('display', 'none');
                this.activeLayer.removeClass('active');
                this.activeLayer = $({});
                this.form.fields.eq(0).val('Choose a layer');
            } else {
                this.setActiveLayer($(select.options[select.selectedIndex]).data('sslayer'), e);
                this.form.tabs.css('display', 'block');
                $(window).trigger('resize');
            }
        },
        setActiveLayer: function ($layer, e) {
            if (e) {
                if (e.type === 'change' && !this.active) {
                    return;
                } else if (!this.items.clicked) {
                    this.switchToLayerTab();
                }
            }
            if ($layer === this.activeLayer)
                return;
            var $form = this.form,
                $this = this,
                layer = $layer[0];
            this.activeLayer.removeClass('active');
            this.activeLayer = $layer;
            this.activeLayer.addClass('active');
            var option = $layer.data('ssoption');

            if (option.val() !== $form.layers.val()) {
                $form.layers.val(option.val());
                $.fireEvent($form.layers[0], 'change');
            }

            this.updatePositionField(layer);

            this.form.fields.each(function () {
                var $el = $(this),
                    name = $el.data('name');
                $this.changeFormValueFromData($el, name, $layer);
            });

        },
        updatePositionField: function (layer) {
            this.form.positionfields.eq(0).val(layer.style.left);
            this.form.positionfields.eq(1).val(layer.style.top);
            this.form.positionfields.eq(2).val(layer.style.width);
            this.form.positionfields.eq(3).val(layer.style.height);
        },
        setPositionField: function (layer, prop, v) {
            if (v.match(/^[0-9]*\.?[0-9]*%$/) !== null) {
                layer.style[prop] = v;
            } else if (v.match(/^[0-9]*px$/) !== null) {
                layer.style[prop] = v;
                this.makeLayerToPercent(layer, (prop === 'top' || prop === 'left'), (prop === 'width' || prop === 'height'));
            } else if (parseInt(v) === 0) {
                layer.style[prop] = '0%';
            }
            return layer.style[prop];
        },
        changeFormValueFromData: function ($el, name, $layer) {
            var layerValue = $layer.ssdata(name);
            if (layerValue === undefined) {
                $layer.ssdata(name, this.form.defaults[name]);
                layerValue = this.form.defaults[name];
            }
            if ($el.val() !== layerValue) {
                $el.val(layerValue);
                $.fireEvent($el[0], 'change');
            }
        },
        changeActiveLayerName: function (name) {
            if (this.activeLayer.length === 0)
                return;
            this.activeLayer.ssdata('name', name).data('ssoption').val(name).text(name);
            this.activeLayer.data('ssoptgroup').attr('label', name);
            this.form.layers.val(name);
        },
        changeActiveLayerData: function (name, value) {
            this.activeLayer.ssdata(name, value);
        },

        initAdvancedView: function () {
            var $this = this,
                $admin = $('#smartslider-admin'),
                options = $('.smartslider-advanced-layers .smartslider-toolbar-options'),
                classes = ['smartslider-advanced-layers-simple-active', 'smartslider-advanced-layers-advanced-active'],
                tableContainer = $('.smartslider-slide-advanced-layers').css('display', 'none');
            table = $('<table><thead><th>Layer name</th><th>Left<br>Top</th><th>Width<br>Height</th><th></th><th>Animation</th><th>Duration</th><th>Easing</th><th>Delay</th><th>Parallax</th><th>Play out</th></thead><tbody></tbody></table>')
            tbody = table.find('tbody');

            tableContainer.append(table);

            options.eq(0).on('click', function () {
                $admin.addClass(classes[0]).removeClass(classes[1]);
                tableContainer.css('display', 'none');
                $('.ui-layer-overlay').remove();
                tbody.children().remove();
                $(window).trigger('resize');
            });
            options.eq(1).on('click', function () {
                var activeTRs = $([]);
                $admin.addClass(classes[1]).removeClass(classes[0]);
                var select = $this.form.layersSelect;
                select[0].selectedIndex = 0;
                NfireEvent(select[0], 'change');

                var animationSelect = $($this.form.fields.get(1).select).clone().removeAttr('id'),
                    easingSelect = $($this.form.fields.get(3).select).clone().removeAttr('id'),
                    msInput = $this.form.fields.eq(2).parent().clone(),
                    onoff = $this.form.fields.eq(6).parent().clone();

                msInput.find('input').removeAttr('id');
                onoff.find('input').removeAttr('id');

                var layers = $this.layers;
                layers.each(function (i) {

                    var layer = this,
                        $el = $(this),
                        $tr = $('<tr class="n-in ' + (i % 2 ? 'even' : 'odd') + '"></tr>'),
                        $tr2 = $('<tr class="n-out ' + (i % 2 ? 'even' : 'odd') + '"></tr>');

                    $el.append($('<div class="ui-layer-overlay"></div>').on('click', function(){
                        activeTRs.removeClass('active');
                        activeTRs = $.merge($tr, $tr2).addClass('active');
                    }));

                    $tr.append($('<td rowspan="2" class="rs2">' +
                        '<div class="nextend-text">' +
                        '<input type="text" autocomplete="off" value="' + $el.data('name') + '" name="row-' + i + '-name">' +
                        '</div>' +
                        '</td>'));
                    $tr.append($('<td>' +
                        '<div class="nextend-text" style="width:50px;">' +
                        '<input type="text" autocomplete="off" value="' + layer.style.left + '" name="row-' + i + '-left">' +
                        '</div>' +
                        '</td>'));
                    $tr2.append($('<td>' +
                        '<div class="nextend-text" style="width:50px;">' +
                        '<input type="text" autocomplete="off" value="' + layer.style.top + '" name="row-' + i + '-top">' +
                        '</div>' +
                        '</td>'));
                    $tr.append($('<td>' +
                        '<div class="nextend-text" style="width:50px;">' +
                        '<input type="text" autocomplete="off" value="' + layer.style.width + '" name="row-' + i + '-width">' +
                        '</div>' +
                        '</td>'));
                    $tr2.append($('<td>' +
                        '<div class="nextend-text" style="width:50px;">' +
                        '<input type="text" autocomplete="off" value="' + layer.style.height + '" name="row-' + i + '-height">' +
                        '</div>' +
                        '</td>'));
                    $tr.append($('<td class="t-label">In</td>'));
                    $tr2.append($('<td class="t-label">Out</td>'));

                    $tr.append($('<td></td>').append(animationSelect.clone().attr('name', 'row-' + i + '-animationin').val($el.data('animationin'))));
                    $tr2.append($('<td></td>').append(animationSelect.clone().attr('name', 'row-' + i + '-animationout').val($el.data('animationout'))));

                    var ms = msInput.clone();
                    ms.find('input').attr('name', 'row-' + i + '-durationin').val($el.data('durationin'));
                    $tr.append($('<td></td>').append(ms));
                    var ms = msInput.clone();
                    ms.find('input').attr('name', 'row-' + i + '-durationout').val($el.data('durationout'));
                    $tr2.append($('<td></td>').append(ms));


                    $tr.append($('<td></td>').append(easingSelect.clone().attr('name', 'row-' + i + '-easingin').val($el.data('easingin'))));
                    $tr2.append($('<td></td>').append(easingSelect.clone().attr('name', 'row-' + i + '-easingout').val($el.data('easingout'))));


                    var ms = msInput.clone();
                    ms.find('input').attr('name', 'row-' + i + '-delayin').val($el.data('delayin'));
                    $tr.append($('<td></td>').append(ms));
                    var ms = msInput.clone();
                    ms.find('input').attr('name', 'row-' + i + '-delayout').val($el.data('delayout'));
                    $tr2.append($('<td></td>').append(ms));

                    $tr.append($('<td>' +
                        '<div class="nextend-text" style="width:50px;">' +
                        '<input  type="text" autocomplete="off" value="' + $el.data('parallaxin') + '" name="row-' + i + '-parallaxin">' +
                        '</div>' +
                        '</td>'));
                    $tr2.append($('<td>' +
                        '<div class="nextend-text" style="width:50px;">' +
                        '<input type="text" autocomplete="off" value="' + $el.data('parallaxout') + '" name="row-' + i + '-parallaxout">' +
                        '</div>' +
                        '</td>'));

                    var playoutid = 'row-' + i + '-playoutafter';
                    var playout = onoff.clone();
                    playout.find('input').attr('id', playoutid).attr('name', 'row-' + i + '-playoutafter').val($el.data('playoutafter'));
                    $tr.append($('<td></td>').append(playout));
                    $tr2.append($('<td></td>'));

                    tbody.append($tr);
                    tbody.append($tr2);

                    new NextendElementOnoff({
                        hidden: playoutid
                    });

                });

                tbody.find('input, select').on('change', function () {
                    var $el = $(this),
                        field = $el.attr('name').match(/row-([0-9]+)-(.*)/);
                    if (field.length == 3) {
                        field[1] = parseInt(field[1]);

                        var $layer = $this.layers.eq(field[1]);

                        switch (field[2]) {
                            case 'left':
                            case 'top':
                            case 'width':
                            case 'height':
                                $el.val($this.setPositionField($layer[0], field[2], $el.val()));
                                break;
                            case 'name':
                                var name = $el.val(),
                                    option = $layer.data('ssoption')[0],
                                    $options = $($this.form.layersSelect[0].options),
                                    namecheckfn = function () {
                                        if (this.value == name && this != option) {
                                            name += ' - copy';
                                            $options.each(namecheckfn);
                                            return false;
                                        }
                                    };
                                if (name == '') name = 'empty';
                                $options.each(namecheckfn);
                                $this.setActiveLayer($layer);
                                $this.changeActiveLayerName(name);
                                select[0].selectedIndex = 0;
                                NfireEvent(select[0], 'change');
                                $el.val(name);
                                break;
                            default:
                                $layer.ssdata(field[2], $el.val());
                                break;
                        }
                    }
                });
                tableContainer.css('display', 'block');
                $(window).trigger('resize');
            });

        }
    });
})(njQuery, window);