Your IP : 216.73.216.89


Current Path : /home/azimutno/azimutno/azimutno/www/libraries/nextend/assets/smartslider/admin/js/
Upload File :
Current File : /home/azimutno/azimutno/azimutno/www/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(window.ss2lang.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();
            this.initDeviceView();
            
            window.getSlide = function(){
               return $this.getHTML.call($this); 
            };

        },
        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.removeClass('active');
            this.toolboxviews.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));
            
            var desktop = tablet = phone = 1;
            switch(this.adminmode){
                case 'desktop':
                    tablet = phone = 0;
                    break;
                case 'tablet':
                    desktop = phone = 0;
                    break;
                case 'phone':
                    desktop = tablet = 0;
                    break;
                
            };
            this.form.showfield.val(desktop+'|*|'+tablet+'|*|'+phone);
            $.fireEvent(this.form.showfield[0], 'change');
        },
        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 (event, ui) {
                    $('#smartslider-admin').addClass('smartslider-layer-highlight-active-2');
                    $layer.data('width', $this.covertPxToPercent('width', ui.originalSize.width, $this.slideSize.width) + '%');
                    $layer.data('height', $this.covertPxToPercent('height', ui.originalSize.height, $this.slideSize.height) + '%');
                    $layer.data('left', $this.covertPxToPercent('left', ui.originalPosition.left, $this.slideSize.width) + '%');
                    $layer.data('top', $this.covertPxToPercent('top', ui.originalPosition.top, $this.slideSize.height) + '%');
                },
                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(window.ss2lang.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 () {
                if($this.adminmode == 'all'){
                    $this.deleteLayer(layer);
                    slideconsole.set(window.ss2lang.Layer_deleted, 2);
                }else{
                    $this.setActiveLayer($(layer));
                    var desktop = $this.activeLayer.ssdata('showdesktop');
                    if(typeof desktop == 'undefined') desktop = 1;
                    var tablet = $this.activeLayer.ssdata('showtablet');
                    if(typeof tablet == 'undefined') tablet = 1;
                    var phone = $this.activeLayer.ssdata('showphone');
                    if(typeof phone == 'undefined') phone = 1;
                    switch($this.adminmode){
                        case 'desktop':
                          desktop = 0;
                          break;
                        case 'tablet':
                          tablet = 0;
                          break;
                        case 'phone':
                          phone = 0;
                          break;
                    }
                    $this.form.showfield.val(desktop+'|*|'+tablet+'|*|'+phone);
                    $.fireEvent($this.form.showfield[0], 'change');
                    slideconsole.set(window.ss2lang.Layer_hidden_for_this_device_type, 2);
                }
            }).on('mouseenter',function () {
                    if($this.adminmode == 'all'){
                        slideconsole.set(window.ss2lang.Delete_layer_click, 1, 0);                    
                    } else {
                        slideconsole.set(window.ss2lang.Hide_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(window.ss2lang.Increment_z_index_click, 1, 0);
            }).on('mouseleave', function () {
                    slideconsole.set('', 1, 0);
                });

            backward.on('mouseenter',function () {
                slideconsole.set(window.ss2lang.Decrement_z_index_click, 1, 0);
            }).on('mouseleave', function () {
                    slideconsole.set('', 1, 0);
                });

            $zindex.on('mouseenter',function () {
                slideconsole.set(window.ss2lang.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>');
            if(typeof $layer.data('desktopleft') == 'undefined') $layer.ssdata('desktopleft', layer.style.left);
            if(typeof $layer.data('desktoptop') == 'undefined') $layer.ssdata('desktoptop', layer.style.top);
            $layer.draggable({
                disabled: !this.active,
                containment: this.layercanvas,
                create: function () {
                    $(this).append(handle);
                },
                start: function (event, ui) {
                    $('#smartslider-admin').addClass('smartslider-layer-highlight-active-2');
                    var pos = ui.helper.position();
                    $layer.data('left', $this.covertPxToPercent('left', pos.left, $this.slideSize.width) + '%');
                    $layer.data('top', $this.covertPxToPercent('top', pos.top, $this.slideSize.height) + '%');
                },
                stop: function () {
                    $('#smartslider-admin').removeClass('smartslider-layer-highlight-active-2');
                    $this.makeLayerToPercent(this, true);
                },
                handle: '.ui-movable-handle'
            });
            handle.on('mouseenter',function () {
                slideconsole.set(window.ss2lang.Move_layer_drag, 1, 0);
            }).on('mouseleave', function () {
                    slideconsole.set('', 1, 0);
                });
        },
        makeLayerToPercent: function (layer, position, size) {
            var $layer = $(layer);
            if (position) {
                this.setPositionField(layer, 'left', this.covertPxToPercent('left', $layer.css('left'), this.slideSize.width) + '%');
                this.setPositionField(layer, 'top', this.covertPxToPercent('top', $layer.css('top'), this.slideSize.height) + '%');
                //$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) {
                this.setPositionField(layer, 'width', this.covertPxToPercent('width', $layer.width(), this.slideSize.width) + '%');
                this.setPositionField(layer, 'height', this.covertPxToPercent('height', $layer.height(), this.slideSize.height) + '%');
                //$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);
        },
        covertPxToPercent: function(prop, size, parentsize){
            if(prop == 'left' || prop == 'top'){
                return (parseFloat(size) / parentsize * 100).toFixed(3);
            }else if(prop == 'width' || prop == 'height'){
                return Math.ceil(1000 * size / parentsize * 100) / 1000;
            }
        },
        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(window.ss2lang.Drop_the_item_into_a_layer, 2, 0);
                },
                stop: function () {
                    $this.slide.removeClass('smartslider-layer-border-mode');
                    slideconsole.set(window.ss2lang.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 savedmode = $('#slideadminmode').val();
            if(savedmode != 'all') this.setAllMode();
            var slide = this.layercanvas.clone();
            slide.find('.smart-slider-layer').css('display', 'block');
            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 items = slide.find('.smart-slider-items');
            items.each(function(){
                var $this = $(this);
                var shortcode = '[';
                shortcode+=$this.data('item');
                shortcode+=' values="'+Base64.encode(JSON.stringify($this.data('itemvalues')))+'"';
                shortcode+=']';
                $this.replaceWith(shortcode);
            });
            
            var html = slide.html();
            slide.remove();
            $('#slideadminmode').val(savedmode);

            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(window.ss2lang.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(window.ss2lang.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(window.ss2lang.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.activeLayer.data('left', $this.activeLayer[0].style.left);
                $this.setPositionField($this.activeLayer[0], 'left', this.value);
            });
            this.form.positionfields.eq(1).on('change', function () {
                $this.activeLayer.data('top', $this.activeLayer[0].style.top);
                $this.setPositionField($this.activeLayer[0], 'top', this.value);
            });
            this.form.positionfields.eq(2).on('change', function () {
                $this.activeLayer.data('width', $this.activeLayer[0].style.width);
                $this.setPositionField($this.activeLayer[0], 'width', this.value);
            });
            this.form.positionfields.eq(3).on('change', function () {
                $this.activeLayer.data('height', $this.activeLayer[0].style.height);
                $this.setPositionField($this.activeLayer[0], 'height', this.value);
            });

            this.form.fields = this.form.fields.not(this.form.positionfields);
            
            this.form.showfield = this.form.fields.eq(1);
            
            var mainslider = $this.parent.$slider.data('smartslider').slider.mainslider;
            this.form.showfield.on('change', function(){
                var values = this.value.split('|*|');
                if($this.activeLayer.ssdata('showdesktop') != values[0]){
                    $this.changeActiveLayerData('showdesktop', values[0]);
                    mainslider.refreshMode();
                }
                if($this.activeLayer.ssdata('showtablet') != values[1]){
                    $this.changeActiveLayerData('showtablet', values[1]);
                    mainslider.refreshMode();
                }
                if($this.activeLayer.ssdata('showphone') != values[2]){
                    $this.changeActiveLayerData('showphone', values[2]);
                    mainslider.refreshMode();
                }
            });
            
            this.form.fields = this.form.fields.not(this.form.showfield);

            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.filter('#layerlayerbackgroundcolor').on('change', function(){
                var alpha = this.value.substr(6,2),
                    color = 'transparent';
                $this.activeLayer.css('background-color', '');
                if(alpha != '00'){
                    $this.activeLayer.attr('style', $this.activeLayer[0].style.cssText+'background-color:#'+this.value.substr(0,6)+';background-color:'+hex2rgba(this.value)+';');
                }
            });
            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]).find('option'),
                    namecheckfn = function () {
                        if (this.value == name && this != option) {
                            name += ' - ' + window.ss2lang.copy;
                            $options.each(namecheckfn);
                            return false;
                        }
                    };
                if (name == '') name = window.ss2lang.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', window.ss2lang.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 += ' - ' + window.ss2lang.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(window.ss2lang.Layer_selected, 1);
            });
        },
        changeActiveLayer: function (e) {
            var select = e.currentTarget.select;
            if (select.selectedIndex === 0) {
                this.form.tabs.css('display', 'none');
                this.activeLayer.removeClass(window.ss2lang.active);
                this.activeLayer = $({});
                this.form.fields.eq(0).val(window.ss2lang.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);
            
            var desktop = this.activeLayer.ssdata('showdesktop');
            if(typeof desktop == 'undefined') desktop = 1;
            var tablet = this.activeLayer.ssdata('showtablet');
            if(typeof tablet == 'undefined') tablet = 1;
            var phone = this.activeLayer.ssdata('showphone');
            if(typeof phone == 'undefined') phone = 1;
            this.form.showfield.val(desktop+'|*|'+tablet+'|*|'+phone);
            $.fireEvent(this.form.showfield[0], 'change');
        },
        setPositionField: function (layer, prop, v) {
            var s = layer.style;
            if (v.match(/^[0-9]*\.?[0-9]*%$/) !== null) {
                this.dimensionFieldPreChanged(layer, prop, v);
                s[prop] = v;
            } else if (v.match(/^[0-9]*px$/) !== null) {
                s[prop] = v;
                this.makeLayerToPercent(layer, (prop === 'top' || prop === 'left'), (prop === 'width' || prop === 'height'));
            } else if (parseInt(v) === 0) {
                this.dimensionFieldPreChanged(layer, prop, '0%');
                s[prop] = '0%';
            }
            return s[prop];
        },
        dimensionFieldPreChanged: function(layer, prop, newval){
            var $layer = $(layer);
            if(this.adminmode == 'all' || this.adminmode == 'desktop'){
                $layer.ssdata('desktop'+prop, newval);
            }else{
                if(typeof $layer.ssdata('desktop'+prop) == 'undefined'){
                    $layer.ssdata('desktop'+prop, $layer.data(prop));
                }
                $layer.ssdata(this.adminmode+prop, newval);
            }
        },
        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>' + window.ss2lang.Layer_name + '</th><th>' + window.ss2lang.Left + '<br>' + window.ss2lang.Top + '</th><th>' + window.ss2lang.Width + '<br>' + window.ss2lang.Height + '</th><th></th><th>' + window.ss2lang.Animation + '</th><th>' + window.ss2lang.Duration + '</th><th>' + window.ss2lang.Easing + '</th><th>' + window.ss2lang.Delay + '</th><th>' + window.ss2lang.Parallax + '</th><th>' + window.ss2lang.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(2).select).clone().removeAttr('id'),
                    easingSelect = $($this.form.fields.get(4).select).clone().removeAttr('id'),
                    msInput = $this.form.fields.eq(3).parent().clone(),
                    onoff = $this.form.fields.eq(7).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">' + window.ss2lang.In + '</td>'));
                    $tr2.append($('<td class="t-label">' + window.ss2lang.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':
                                $layer.data(field[2], $layer[0].style[field[2]]);
                                $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]).find('option'),
                                    namecheckfn = function () {
                                        if (this.value == name && this != option) {
                                            name += ' - ' + window.ss2lang.copy;
                                            $options.each(namecheckfn);
                                            return false;
                                        }
                                    };
                                if (name == '') name = window.ss2lang.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');
            });

        },
        initDeviceView: function(){
            var $this = this,
                savedmode = $('#slideadminmode').val(),
                mainslider = $this.parent.$slider.data('smartslider').slider.mainslider,
                ratios = mainslider.options.responsive.ratios,
                $admin = $('#smartslider-admin'),
                options = $('.smartslider-device-switch .smartslider-toolbar-options'),
                classes = ['smartslider-device-all-active', 'smartslider-device-desktop-active', 'smartslider-device-tablet-active', 'smartslider-device-phone-active'],
                currentclass = classes[0],
                switchfn = function(i){
                    $('#slideadminmode').val($this.adminmode);
                    if(classes[i] != currentclass){
                        $admin.addClass(classes[i]).removeClass(currentclass);
                        currentclass = classes[i];
                    }
                    
                    mainslider.onResize(ratios[i]);
                    $this.slideSize.width = mainslider.slideDimension.w;
                    $this.slideSize.height = mainslider.slideDimension.h;
                },
                positionTab = $('#smartslider-slide-toolbox-layer .smartslider-toolbar-options.first'),
                resettodesktop = $('#layerresettodesktop'),
                layerresettodesktopTR = resettodesktop.closest('tr');
                
            $this.adminmode = mainslider.adminmode = 'all';
            mainslider.refreshMode = function(){
                this._currentmode = this.adminmode;
                
                for (var i = 0; i < this.slideList.length; i++) {
                    var slide = this.slideList[i];
                    slide.layers.refresh();
                    slide.layers.changeMode(this.adminmode);
                }
                if($admin.hasClass('smartslider-advanced-layers-advanced-active')){
                    $this.layers.each(function(i){
                        $("[name='"+'row-' + i + '-left'+"']").val(this.style.left);
                        $("[name='"+'row-' + i + '-top'+"']").val(this.style.top);
                        $("[name='"+'row-' + i + '-width'+"']").val(this.style.width);
                        $("[name='"+'row-' + i + '-height'+"']").val(this.style.height);
                    });
                }else{
                    var layer = $this.activeLayer[0];
                    if(!jQuery.isEmptyObject(layer)){
                        $('#layerleft').val(layer.style.left);
                        $('#layertop').val(layer.style.top);
                        $('#layerwidth').val(layer.style.width);
                        $('#layerheight').val(layer.style.height);
                    }
                }
                return true;
            };
            
            switchfn(0);
            layerresettodesktopTR.css('display', 'none');
            
            this.setAllMode = function () {
                $this.adminmode = mainslider.adminmode = 'all';
                switchfn(0);
                layerresettodesktopTR.css('display', 'none');
            };
                
            options.eq(0).on('click', this.setAllMode);
            
            options.eq(1).on('click', function () {
                $this.adminmode = mainslider.adminmode = 'desktop';
                switchfn(1);
                positionTab.trigger('click');
                layerresettodesktopTR.css('display', 'none');
            });
            
            options.eq(2).on('click', function () {
                $this.adminmode = mainslider.adminmode = 'tablet';
                switchfn(2);
                positionTab.trigger('click');
                layerresettodesktopTR.css('display', '');
            });
            
            options.eq(3).on('click', function () {
                $this.adminmode = mainslider.adminmode = 'phone';
                switchfn(3);
                positionTab.trigger('click');
                layerresettodesktopTR.css('display', '');
            });
            
            if(savedmode != $this.adminmode){
                switch(savedmode){
                    case 'desktop':
                        options.eq(1).trigger('click');
                        break;
                    case 'tablet':
                        options.eq(2).trigger('click');
                        break;
                    case 'phone':
                        options.eq(3).trigger('click');
                        break;
                }
            }
            
            resettodesktop.on('click', function(){
                //Here comes the reset
                if($this.adminmode == 'tablet' || $this.adminmode == 'phone'){
                    $this.activeLayer.each(function(){
                        $(this).removeData($this.adminmode+'left');
                        this.removeAttribute('data-'+$this.adminmode+'left');
                        $(this).removeData($this.adminmode+'top');
                        this.removeAttribute('data-'+$this.adminmode+'top');
                        $(this).removeData($this.adminmode+'width');
                        this.removeAttribute('data-'+$this.adminmode+'width');
                        $(this).removeData($this.adminmode+'height');
                        this.removeAttribute('data-'+$this.adminmode+'height');
                    });
                    mainslider.refreshMode();
                }
            });
        }
    });
    
    function hex2rgba(hex) {
        var r = hexdec(hex.substr(0, 2));
        var g = hexdec(hex.substr(2, 2));
        var b = hexdec(hex.substr(4, 2));
        var a = (intval(hexdec(hex.substr(6, 2)))) / 255;
        a = a.toFixed(3);
        var color = r + "," + g + "," + b + "," + a;
        return 'RGBA(' + color + ')';
    }

    function hexdec(hex_string) {
        hex_string = (hex_string + '').replace(/[^a-f0-9]/gi, '');
        return parseInt(hex_string, 16);
    }

    function intval(mixed_var, base) {
        var tmp;
        var type = typeof(mixed_var);
        if (type === 'boolean') {
            return +mixed_var;
        } else if (type === 'string') {
            tmp = parseInt(mixed_var, base || 10);
            return (isNaN(tmp) || !isFinite(tmp)) ? 0 : tmp;
        } else if (type === 'number' && isFinite(mixed_var)) {
            return mixed_var | 0;
        } else {
            return 0;
        }
    }
    
})(njQuery, window);