/*!
 * VERSION: beta 0.2.3
 * DATE: 2013-07-10
 * UPDATES AND DOCS AT: http://www.greensock.com
 *
 * @license Copyright (c) 2008-2013, GreenSock. All rights reserved.
 * SplitText is a Club GreenSock membership benefit; You must have a valid membership to use
 * this code without violating the terms of use. Visit http://www.greensock.com/club/ to sign up or get more details.
 * This work is subject to the software agreement that was issued with your membership.
 *
 * @author: Jack Doyle, jack@greensock.com
 */
(function (t) {
    "use strict";
    var e = t.GreenSockGlobals || t, i = function (t) {
        var i, s = t.split("."), r = e;
        for (i = 0; s.length > i; i++)r[s[i]] = r = r[s[i]] || {};
        return r
    }, s = i("com.greensock.utils"), r = function (t) {
        var e = t.nodeType, i = "";
        if (1 === e || 9 === e || 11 === e) {
            if ("string" == typeof t.textContent)return t.textContent;
            for (t = t.firstChild; t; t = t.nextSibling)i += r(t)
        } else if (3 === e || 4 === e)return t.nodeValue;
        return i
    }, n = document, a = n.defaultView ? n.defaultView.getComputedStyle : function () {
    }, o = /([A-Z])/g, h = function (t, e, i, s) {
        var r;
        return (i = i || a(t, null)) ? (t = i.getPropertyValue(e.replace(o, "-$1").toLowerCase()), r = t || i.length ? t : i[e]) : t.currentStyle && (i = t.currentStyle, r = i[e]), s ? r : parseInt(r, 10) || 0
    }, l = function (t) {
        return t.length && t[0] && (t[0].nodeType && t[0].style && !t.nodeType || t[0].length && t[0][0]) ? !0 : !1
    }, _ = function (t) {
        var e, i, s, r = [], n = t.length;
        for (e = 0; n > e; e++)if (i = t[e], l(i))for (s = i.length, s = 0; i.length > s; s++)r.push(i[s]); else r.push(i);
        return r
    }, u = ")eefec303079ad17405c", c = /(?:<br>|<br\/>|<br \/>)/gi, p = n.all && !n.addEventListener, f = "<div style='position:relative;display:inline-block;" + (p ? "*display:inline;*zoom:1;'" : "'"), m = function (t) {
        t = t || "";
        var e = -1 !== t.indexOf("++"), i = 1;
        return e && (t = t.split("++").join("")), function () {
            return f + (t ? " class='" + t + (e ? i++ : "") + "'>" : ">")
        }
    }, d = s.SplitText = e.SplitText = function (t, e) {
        if ("string" == typeof t && (t = d.selector(t)), !t)throw"cannot split a null element.";
        this.elements = l(t) ? _(t) : [t], this.chars = [], this.words = [], this.lines = [], this._originals = [], this.vars = e || {}, this.split(e)
    }, g = function (t, e, i, s, o) {
        c.test(t.innerHTML) && (t.innerHTML = t.innerHTML.replace(c, u));
        var l, _, p, f, d, g, v, y, T, w, b, x, P, S = r(t), C = e.type || e.split || "chars,words,lines", k = -1 !== C.indexOf("lines") ? [] : null, R = -1 !== C.indexOf("words"), A = -1 !== C.indexOf("chars"), D = "absolute" === e.position || e.absolute === !0, O = D ? "&#173; " : " ", M = -999, L = a(t), I = h(t, "paddingLeft", L), E = h(t, "borderBottomWidth", L) + h(t, "borderTopWidth", L), N = h(t, "borderLeftWidth", L) + h(t, "borderRightWidth", L), F = h(t, "paddingTop", L) + h(t, "paddingBottom", L), U = h(t, "paddingLeft", L) + h(t, "paddingRight", L), X = h(t, "textAlign", L, !0), z = t.clientHeight, B = t.clientWidth, j = S.length, Y = "</div>", q = m(e.wordsClass), V = m(e.charsClass), Q = -1 !== (e.linesClass || "").indexOf("++"), G = e.linesClass;
        for (Q && (G = G.split("++").join("")), p = q(), f = 0; j > f; f++)g = S.charAt(f), ")" === g && S.substr(f, 20) === u ? (p += Y + "<BR/>", f !== j - 1 && (p += " " + q()), f += 19) : " " === g && " " !== S.charAt(f - 1) && f !== j - 1 ? (p += Y, f !== j - 1 && (p += O + q())) : p += A && " " !== g ? V() + g + "</div>" : g;
        for (t.innerHTML = p + Y, d = t.getElementsByTagName("*"), j = d.length, v = [], f = 0; j > f; f++)v[f] = d[f];
        if (k || D)for (f = 0; j > f; f++)y = v[f], _ = y.parentNode === t, (_ || D || A && !R) && (T = y.offsetTop, k && _ && T !== M && "BR" !== y.nodeName && (l = [], k.push(l), M = T), D && (y._x = y.offsetLeft, y._y = T, y._w = y.offsetWidth, y._h = y.offsetHeight), k && (R !== _ && A || (l.push(y), y._x -= I), _ && f && (v[f - 1]._wordEnd = !0)));
        for (f = 0; j > f; f++)y = v[f], _ = y.parentNode === t, "BR" !== y.nodeName ? (D && (b = y.style, R || _ || (y._x += y.parentNode._x, y._y += y.parentNode._y), b.left = y._x + "px", b.top = y._y + "px", b.position = "absolute", b.display = "block", b.width = y._w + 1 + "px", b.height = y._h + "px"), R ? _ ? s.push(y) : A && i.push(y) : _ ? (t.removeChild(y), v.splice(f--, 1), j--) : !_ && A && (T = !k && !D && y.nextSibling, t.appendChild(y), T || t.appendChild(n.createTextNode(" ")), i.push(y))) : k || D ? (t.removeChild(y), v.splice(f--, 1), j--) : R || t.appendChild(y);
        if (k) {
            for (D && (w = n.createElement("div"), t.appendChild(w), x = w.offsetWidth + "px", T = w.offsetParent === t ? 0 : t.offsetLeft, t.removeChild(w)), b = t.style.cssText, t.style.cssText = "display:none;"; t.firstChild;)t.removeChild(t.firstChild);
            for (P = !D || !R && !A, f = 0; k.length > f; f++) {
                for (l = k[f], w = n.createElement("div"), w.style.cssText = "display:block;text-align:" + X + ";position:" + (D ? "absolute;" : "relative;"), G && (w.className = G + (Q ? f + 1 : "")), o.push(w), j = l.length, d = 0; j > d; d++)"BR" !== l[d].nodeName && (y = l[d], w.appendChild(y), P && (y._wordEnd || R) && w.appendChild(n.createTextNode(" ")), D && (0 === d && (w.style.top = y._y + "px", w.style.left = I + T + "px"), y.style.top = "0px", T && (y.style.left = y._x - T + "px")));
                R || A || (w.innerHTML = r(w).split(String.fromCharCode(160)).join(" ")), D && (w.style.width = x, w.style.height = y._h + "px"), t.appendChild(w)
            }
            t.style.cssText = b
        }
        D && (z > t.clientHeight && (t.style.height = z - F + "px", z > t.clientHeight && (t.style.height = z + E + "px")), B > t.clientWidth && (t.style.width = B - U + "px", B > t.clientWidth && (t.style.width = B + N + "px")))
    }, v = d.prototype;
    v.split = function (t) {
        this.isSplit && this.revert(), this.vars = t || this.vars, this._originals.length = this.chars.length = this.words.length = this.lines.length = 0;
        for (var e = 0; this.elements.length > e; e++)this._originals[e] = this.elements[e].innerHTML, g(this.elements[e], this.vars, this.chars, this.words, this.lines);
        return this.isSplit = !0, this
    }, v.revert = function () {
        if (!this._originals)throw"revert() call wasn't scoped properly.";
        for (var t = this._originals.length; --t > -1;)this.elements[t].innerHTML = this._originals[t];
        return this.chars = [], this.words = [], this.lines = [], this.isSplit = !1, this
    }, d.selector = t.$ || t.jQuery || function (e) {
            return t.$ ? (d.selector = t.$, t.$(e)) : n ? n.getElementById("#" === e.charAt(0) ? e.substr(1) : e) : e
        }
})(window || {});


/*! ROTATABLE */
// ROTATABLE
(function ($, undefined) {

    $.widget("ui.rotatable", $.ui.mouse, {

        options: {
            handle: false,
            angle: false,

            // callbacks
            start: null,
            rotate: null,
            stop: null
        },

        handle: function (handle) {
            if (handle === undefined) {
                return this.options.handle;
            }
            this.options.handle = handle;
        },

        angle: function (angle) {
            if (angle === undefined) {
                return this.options.angle;
            }
            this.options.angle = angle;
            this.performRotation(this.options.angle);
        },

        _create: function () {
            var handle;
            if (!this.options.handle) {
                handle = $(document.createElement('div'));
                handle.addClass('ui-rotatable-handle');
            }
            else {
                handle = this.options.handle;
            }

            this.listeners = {
                rotateElement: $.proxy(this.rotateElement, this),
                startRotate: $.proxy(this.startRotate, this),
                stopRotate: $.proxy(this.stopRotate, this)
            };

            handle.draggable({helper: 'clone', start: this.dragStart, handle: handle});
            handle.bind('mousedown', this.listeners.startRotate);
            handle.appendTo(this.element);

            if (this.options.angle != false) {
                this.elementCurrentAngle = this.options.angle;
                this.performRotation(this.elementCurrentAngle);
            }
            else {
                this.elementCurrentAngle = 0;
            }
        },


        _destroy: function () {
            this.element.removeClass('ui-rotatable');
            this.element.find('.ui-rotatable-handle').remove();
        },

        performRotation: function (angle) {

            var deg = angle * 180 / Math.PI;
            this.element.css('transform', 'rotate(' + deg + 'deg)');
            this.element.css('-moz-transform', 'rotate(' + deg + 'deg)');
            this.element.css('-webkit-transform', 'rotate(' + deg + 'deg)');
            this.element.css('-o-transform', 'rotate(' + deg + 'deg)');

            /*        this.element.css('transform','rotate(' + angle + 'rad)');
             this.element.css('-moz-transform','rotate(' + angle + 'rad)');
             this.element.css('-webkit-transform','rotate(' + angle + 'rad)');
             this.element.css('-o-transform','rotate(' + angle + 'rad)');*/
        },

        getElementOffset: function () {
            this.performRotation(0);
            var offset = this.element.offset();
            this.performRotation(this.elementCurrentAngle);
            return offset;
        },

        getElementCenter: function () {
            var elementOffset = this.getElementOffset();
            var elementCentreX = elementOffset.left + this.element.width() / 2;
            var elementCentreY = elementOffset.top + this.element.height() / 2;
            return Array(elementCentreX, elementCentreY);
        },

        dragStart: function (event) {
            if (this.element) {
                return false;
            }
        },

        startRotate: function (event) {
            var center = this.getElementCenter();
            var startXFromCenter = event.pageX - center[0];
            var startYFromCenter = event.pageY - center[1];
            this.mouseStartAngle = Math.atan2(startYFromCenter, startXFromCenter);
            this.elementStartAngle = this.elementCurrentAngle;
            this.hasRotated = false;

            this._propagate("start", event);

            $(document).bind('mousemove', this.listeners.rotateElement);
            $(document).bind('mouseup', this.listeners.stopRotate);

            return false;
        },

        rotateElement: function (event) {
            if (!this.element) {
                return false;
            }

            var center = this.getElementCenter();

            var xFromCenter = event.pageX - center[0];
            var yFromCenter = event.pageY - center[1];
            var mouseAngle = Math.atan2(yFromCenter, xFromCenter);
            var rotateAngle = mouseAngle - this.mouseStartAngle + this.elementStartAngle;

            this.performRotation(rotateAngle);
            var previousRotateAngle = this.elementCurrentAngle;
            this.elementCurrentAngle = rotateAngle;

            // Plugins callbacks need to be called first.
            this._propagate("rotate", event);

            if (previousRotateAngle != rotateAngle) {
                this._trigger("rotate", event, this.ui());
                this.hasRotated = true;
            }

            return false;
        },

        stopRotate: function (event) {
            if (!this.element) {
                return;
            }

            $(document).unbind('mousemove', this.listeners.rotateElement);
            $(document).unbind('mouseup', this.listeners.stopRotate);

            this.elementStopAngle = this.elementCurrentAngle;
            if (this.hasRotated) {
                this._propagate("stop", event);
            }

            setTimeout(function () {
                this.element = false;
            }, 10);
            return false;
        },

        _propagate: function (n, event) {
            $.ui.plugin.call(this, n, [event, this.ui()]);
            (n !== "rotate" && this._trigger(n, event, this.ui()));
        },

        plugins: {},

        ui: function () {
            return {
                element: this.element,
                angle: {
                    start: this.elementStartAngle,
                    current: this.elementCurrentAngle,
                    stop: this.elementStopAngle
                }
            };
        }

    });

})(jQuery);

//ver 3.2

function UniteLayersRev() {
    var initTop = 100;
    var initLeft = 100;
    var initSpeed = 300;

    var initTopVideo = 20;
    var initLeftVideo = 20;
    var g_startTime = 500;
    var g_stepTime = 0;
    var g_slideTime;

    var initText = "Caption Text";

    //init system vars"
    //init system vars
    var t = this;
    var initArrFontTypes = [];
    var containerID = "#divLayers";
    var container;
    var arrLayers = {};
    var id_counter = 0;
    var initLayers = null;
    var initDemoLayers = null;
    var initDemoSettings = null;
    var selectedLayerSerial = -1;

    var sortMode = "time";				//can be "depth" or "time"
    var layerGeneralParamsStatus = false;

    //Layer Animations
    var initLayerAnims = [];
    var currentAnimationType = 'customin';

    var curDemoSlideID = 0;

    /**
     * set init layers object (from db)
     */
    this.setInitLayersJson = function(jsonLayers) {
        initLayers = jQuery.parseJSON(jsonLayers);
    }

    /**
     * set init demo layers object (from db)
     */
    this.setInitDemoLayersJson = function(jsonLayers) {
        initDemoLayers = jQuery.parseJSON(jsonLayers);
    }

    /**
     * set init demo settings object (from db)
     */ 
    this.setInitDemoSettingsJson = function(jsonLayers) {
        initDemoSettings = jQuery.parseJSON(jsonLayers);
    }

    /**
     * set init layer animations (from db)
     */
    this.setInitLayerAnim = function (jsonLayersAnims) {
        initLayerAnims = jQuery.parseJSON(jsonLayersAnims);
    }

    /**
     * update init layer animations (from db)
     */
    this.updateInitLayerAnim = function (layerAnims) {
        initLayerAnims = [];
        initLayerAnims = layerAnims;
    }

    /**
     * set init captions classes array (from the captions.css)
     */
    this.setInitCaptionClasses = function (jsonClasses) {
        initArrCaptionClasses = jQuery.parseJSON(jsonClasses);
    }

    /**
     * set init font family types array
     */
    this.setInitFontTypes = function (jsonClasses) {
        initArrFontTypes = jQuery.parseJSON(jsonClasses);
    }


    /**
     * insert button by class and text
     */
    this.insertButton = function (buttonClass, buttonText) {
        if (selectedLayerSerial == -1)
            return (false);

        var html = "<a href='#' class='tp-button " + buttonClass + " small'>" + buttonText + "</a>";

        //jQuery("#layer_caption").val("");
        jQuery("#layer_text").val(jQuery("#layer_text").val() + html);

        t.updateLayerFromFields();

        jQuery("#dialog_insert_button").dialog("close");
    }

    /**
     * insert template to editor
     */
    this.insertTemplate = function (text) {

        if (selectedLayerSerial == -1)
            return (false);

        jQuery("#layer_text").val(jQuery("#layer_text").val() + '%' + text + '%');

        t.updateLayerFromFields();

        jQuery("#dialog_template_insert").dialog("close");
    }

    this.refreshGridSize = function () {

        var grid_size = jQuery('#rs-grid-sizes option:selected').val();
        var snapto = jQuery('#rs-grid-snapto option:selected').val();
        var wrapper = jQuery('#divLayers');


        if (grid_size == 1) {
            wrapper.find('#helpergrid').remove();
            grid_size = 1;
        } else {
            wrapper.css({position: "relative"});
            wrapper.find('#helpergrid').remove();
            wrapper.append('<div id="helpergrid" style="position:absolute;top:0px;left:0px;position:absolute;z-index:0;width:100%;height:100%"></div>');
            var hg = wrapper.find('#helpergrid');
            if (grid_size > 4) {
                for (var i = 1; i < (wrapper.height() / grid_size); i++) {
                    var jump = i * grid_size;
                    hg.append('<div class="helplines" style="background-color:#4affff;width:100%;height:1px;position:absolute;left:0px;top:' + jump + 'px"></div>');
                }

                for (var i = 1; i < (wrapper.width() / grid_size); i++) {
                    var jump = i * grid_size;
                    hg.append('<div class="helplines" style="background-color:#4affff;height:100%;width:1px;position:absolute;top:0px;left:' + jump + 'px"></div>');
                }
            }


        }


        for (var key in arrLayers) {
            var layer = getHtmlLayerFromSerial(key);
            //update layer events.
            layer.draggable({
                drag: onLayerDrag,	//set ondrag event
                //grid: [grid_size,grid_size],	//set the grid to 1 pixel
                snap: snapto,
                snapMode: "outer"

            });
        }


    }
    //======================================================
    //	Init Functions
    //======================================================
    
    function _________INIT___________(){}

    /*! INITIALISATION */
    /**
     * init the layout
     */
    this.init = function (slideTime) {

        if (jQuery().draggable == undefined || jQuery().autocomplete == undefined) {
            jQuery("#jqueryui_error_message").show();
        }


        g_slideTime = Number(slideTime);

        container = jQuery(containerID);

        //add all layers from init
        if (initDemoLayers) {
            var len = initDemoLayers.length;
            if (len) {
                for (var i = 0; i < len; i++) {
                    for (var key in initDemoLayers[i]) {
                        curDemoSlideID = i;
                        addLayer(initDemoLayers[i][key], true, true);
                    }
                }
            } else {
                for (var i in initDemoLayers) {
                    for (var key in initDemoLayers[i]) {
                        curDemoSlideID = i;
                        addLayer(initDemoLayers[i][key], true, true);
                    }
                }
            }
        }


        //add all layers from init
        if (initLayers) {
            var len = initLayers.length;
            if (len) {
                for (var i = 0; i < len; i++)
                    addLayer(initLayers[i], true);
            } else {
                for (key in initLayers)
                    addLayer(initLayers[key], true);
            }
        }

        //disable the properties box
        disableFormFields();

        //init elements
        initMainEvents();
        initSortbox();
        initButtons();
        initHtmlFields();
        initAlignTable();
        scaleImage();
        positionChanged();

        //initScaleImage();
        preparePeviewAnimations();
        initBackgroundFunctions();
        initLoopFunctions();
        prepareAnimateCreator();
        
        jQuery('.bgsrcchanger').each(function () {
            if (jQuery(this).is(':checked'))
                initSliderBackgroundOptions(jQuery(this));
        });
                   
        jQuery("#select_bg_source").change(function(){
        	var option = jQuery(this).children("option:selected");
                        
        	initSliderBackgroundOptions(option);
        	
        });
        
        
        /*
        jQuery('.bgsrcchanger').click(function () {
            initSliderBackgroundOptions(jQuery(this));
        });
        */

        initDisallowCaptionsOnClick();

        showHideTimeines();


        // OPEN LEFT PANEL TO FULL
        jQuery('.open_right_panel').click(function () {
            var orp = jQuery('.layer_props_wrapper')
            if (orp.hasClass("openeed")) {
                orp.removeClass("openeed");
            } else {
                orp.addClass("openeed");
            }
        })

        jQuery('#rs-grid-sizes, #rs-grid-snapto').change(function () {
            t.refreshGridSize();
        });


        jQuery('select[name="rev_show_the_slides"]').change(function () {
            jQuery('.demo_layer').hide();
            jQuery("#divbgholder").addClass("trans_bg");
            jQuery("#divbgholder").css("background-image", "none");
            jQuery("#divbgholder").css("background-color", "transparent");
            jQuery("#divbgholder").css("background-position", "top center");
            jQuery("#divbgholder").css("background-size", "cover"); //100% 100%
            jQuery("#divbgholder").css("background-repeat", "no-repeat");


            if (jQuery(this).val() !== 'none') {
                var sv = jQuery(this).val();
                jQuery('.demo_layer_' + sv).show();

                if (typeof initDemoSettings[sv] !== 'undefined') {
                    var bgfit = (initDemoSettings[sv]['bg_fit'] == 'percentage') ? initDemoSettings[sv]['bg_fit_x'] + '% ' + initDemoSettings[sv]['bg_fit_y'] + '% ' : initDemoSettings[sv]['bg_fit'];
                    var bgpos = (initDemoSettings[sv]['bg_position'] == 'percentage') ? initDemoSettings[sv]['bg_position_x'] + '% ' + initDemoSettings[sv]['bg_position_y'] + '% ' : initDemoSettings[sv]['bg_position'];

                    if (initDemoSettings[sv]['bg_fit'] == 'contain') {
                        //jQuery('#divLayers-wrapper').css('maxWidth', jQuery('#divbgholder').css('minWidth'));
                    } else {
                        //jQuery('#divLayers-wrapper').css('maxWidth', 'none');
                    }

                    //trace(bgfit);
                    
                    switch (initDemoSettings[sv]['background_type']) {
                        case "image":
                        	
                            var urlImage = initDemoSettings[sv]['image'];
                            jQuery("#divbgholder").css("background-image", "url('" + urlImage + "')");
                            jQuery("#divbgholder").css("background-color", "transparent");
                            jQuery("#divbgholder").css("background-size", bgfit);
                            jQuery("#divbgholder").css("background-position", bgpos);
                            jQuery("#divbgholder").css("background-repeat", initDemoSettings[sv]['bg_repeat']);
                            jQuery("#divbgholder").removeClass("trans_bg");
                            break;
                        case "trans":
                            jQuery("#divbgholder").css("background-image", "none");
                            jQuery("#divbgholder").css("background-color", "transparent");
                            jQuery("#divbgholder").addClass("trans_bg");
                            break;
                        case "solid":
                            jQuery("#divbgholder").css("background-image", "none");
                            jQuery("#divbgholder").removeClass("trans_bg");
                            var bgColor = initDemoSettings[sv]['slide_bg_color'];
                            jQuery("#divbgholder").css("background-color", bgColor);
                            break;
                        case "external":
                            var urlImage = initDemoSettings[sv]['slide_bg_external'];
                            jQuery("#divbgholder").css("background-image", "url('" + urlImage + "')");
                            jQuery("#divbgholder").css("background-color", "transparent");
                            jQuery("#divbgholder").css("background-size", bgfit);
                            jQuery("#divbgholder").css("background-position", bgpos);
                            jQuery("#divbgholder").css("background-repeat", initDemoSettings[sv]['bg_repeat']);
                            jQuery("#divbgholder").removeClass("trans_bg");
                            break;
                    }
                }
            }
        });
        
        //update size on init
        sceneSize();
        
        jQuery(document).resize(sceneSize);
    }

    var initDisallowCaptionsOnClick = function () {

        jQuery('.slide_layer.tp-caption a').on('click', function () {
            return false;
        });

    }


    /**
     * init background options
     */
    function initSliderBackgroundOptions(jQueryObj) {
        
        jQuery('.bgsrcchanger-div').each(function () {
            if (jQuery(this).attr('id') != "tp-bgimagesettings" || (jQuery(this).attr('id') == "tp-bgimagesettings" && jQueryObj.data('imgsettings') != "on")) {
                if (jQuery(this).attr('id') == "tp-bgimagesettings")
                    jQuery(this).slideUp(200)
                else
                    jQuery(this).css({display: "none"});
            }
        });
        
        jQuery('#' + jQueryObj.data('callid')).css({display: "block"});
        if (jQueryObj.data('imgsettings') == "on")
            jQuery('#tp-bgimagesettings').slideDown(200);
        
    }

    

    /*! LAYER ANIMATION */
    /******************************
     -    ANIMATION CREATOR    -
     ********************************/
    
    function _________LAYER_ANIMATION___________(){}

    function prepareAnimateCreator() {
        var cic = jQuery('#caption-inout-controll');
        cic.data('direction', 0);

        jQuery('#caption-inout-controll').click(function () {
            if (cic.data('direction') == 0) {
                cic.data('direction', 1);
                jQuery('#revshowmetheinanim').removeClass("reviconinaction");
                jQuery('#revshowmetheoutanim').addClass("reviconinaction");
            } else if (cic.data('direction') == 1) {
                cic.data('direction', 2);
                jQuery('#revshowmetheinanim').addClass("reviconinaction");
                jQuery('#revshowmetheoutanim').addClass("reviconinaction");

            } else if (cic.data('direction') == 2) {
                cic.data('direction', 0);
                jQuery('#revshowmetheinanim').addClass("reviconinaction");
                jQuery('#revshowmetheoutanim').removeClass("reviconinaction");

            }
        });
        startAnimationInCreator();

    }

    function startAnimationInCreator() {
        stopAnimationInPreview();
        animateCreatorIn();
    }

    function killAnimationInCreator() {
        var nextcaption = jQuery('#caption_custon_anim_preview');
        punchgs.TweenLite.killTweensOf(nextcaption, false);
    }

    function animateCreatorIn() {


        var nextcaption = jQuery('#caption_custon_anim_preview');
        var cic = jQuery('#caption-inout-controll');


        var transx = jQuery('input[name="movex"]').val();
        var transy = jQuery('input[name="movey"]').val();
        var transz = jQuery('input[name="movez"]').val();

        var rotatex = jQuery('input[name="rotationx"]').val();
        var rotatey = jQuery('input[name="rotationy"]').val();
        var rotatez = jQuery('input[name="rotationz"]').val();

        var scalex = jQuery('input[name="scalex"]').val() / 100;
        var scaley = jQuery('input[name="scaley"]').val() / 100;

        var skewx = jQuery('input[name="skewx"]').val();
        var skewy = jQuery('input[name="skewy"]').val();
        var opac = jQuery('input[name="captionopacity"]').val() / 100;

        var tper = jQuery('input[name="captionperspective"]').val();
        //var tper = 600;

        var originx = jQuery('input[name="originx"]').val() + "%";
        var originy = jQuery('input[name="originy"]').val() + "%";
        var origin = originx + " " + originy;

        var speed = parseInt(jQuery('input[name="captionspeed"]').val(), 0);
        if (speed < 100) speed = 100;

        var easedata = jQuery('#caption-easing-demo').val();
        speed = speed / 1000;


        var mdelay = (jQuery('input[name="captionsplitdelay"]').val() / 100);
        var $split = jQuery('#caption-split-demo').val();

        var animobject = nextcaption;
        if (nextcaption.data('mySplitText') != undefined)
            if ($split != "none") nextcaption.data('mySplitText').revert();

        if ($split == "chars" || $split == "words" || $split == "lines") {
            if (nextcaption.find('a').length > 0)
                nextcaption.data('mySplitText', new SplitText(nextcaption.find('a'), {type: "lines,words,chars"}));
            else
                nextcaption.data('mySplitText', new SplitText(nextcaption, {type: "lines,words,chars"}));
        }

        if ($split == "chars") {
            animobject = nextcaption.data('mySplitText').chars;

        }

        if ($split == "words") {
            animobject = nextcaption.data('mySplitText').words;

        }

        if ($split == "lines") {
            animobject = nextcaption.data('mySplitText').lines;

        }


        var timedelay = ((animobject.length * mdelay) + speed) * 1000;


        punchgs.TweenLite.killTweensOf(animobject, false);

        if (animobject != nextcaption)
            punchgs.TweenLite.set(nextcaption, {
                opacity: 1,
                scaleX: 1,
                scaleY: 1,
                rotationX: 0,
                rotationY: 0,
                rotationZ: 0,
                skewX: 0,
                skewY: 0,
                z: 0,
                x: 0,
                y: 0,
                visibility: 'visible',
                opacity: 1,
                overwrite: "all"
            });

        var tl = new punchgs.TimelineLite();

        tl.staggerFromTo(animobject, speed,
            {
                scaleX: scalex,
                scaleY: scaley,
                rotationX: rotatex,
                rotationY: rotatey,
                rotationZ: rotatez,
                x: transx,
                y: transy,
                z: transz + 1,
                skewX: skewx,
                skewY: skewy,
                opacity: opac,
                transformPerspective: tper,
                transformOrigin: origin,
                visibility: 'hidden'
            },

            {
                x: 0,
                y: 0,
                scaleX: 1,
                scaleY: 1,
                rotationX: 0,
                rotationY: 0,
                rotationZ: 0,
                skewX: 0,
                skewY: 0,
                z: 1,
                visibility: 'visible',
                opacity: 1,
                ease: easedata,
                overwrite: "all",

            }, mdelay);


        setTimeout(function () {
            if (cic.data('direction') == 0)
                animateCreatorIn();
            else if (cic.data('direction') == 1 || cic.data('direction') == 2)
                animateCreatorOut()

        }, (timedelay) + 500)


    }


    function animateCreatorOut() {


        var nextcaption = jQuery('#caption_custon_anim_preview');
        var cic = jQuery('#caption-inout-controll');

        var transx = jQuery('input[name="movex"]').val();
        var transy = jQuery('input[name="movey"]').val();
        var transz = jQuery('input[name="movez"]').val();

        var $split = jQuery('#caption-split-demo').val();

        var rotatex = jQuery('input[name="rotationx"]').val();
        var rotatey = jQuery('input[name="rotationy"]').val();
        var rotatez = jQuery('input[name="rotationz"]').val();

        var scalex = jQuery('input[name="scalex"]').val() / 100;
        var scaley = jQuery('input[name="scaley"]').val() / 100;

        var skewx = jQuery('input[name="skewx"]').val();
        var skewy = jQuery('input[name="skewy"]').val();
        var opac = jQuery('input[name="captionopacity"]').val() / 100;

        var tper = jQuery('input[name="captionperspective"]').val();
        //var tper = 600;

        var originx = jQuery('input[name="originx"]').val() + "%";
        var originy = jQuery('input[name="originy"]').val() + "%";
        var origin = originx + " " + originy;

        var speed = parseInt(jQuery('input[name="captionspeed"]').val(), 0);
        if (speed < 100) speed = 100;

        var easedata = jQuery('#caption-easing-demo').val();
        speed = speed / 1000;

        var xx = 258, yy = 58;

        var mdelay = (jQuery('input[name="captionsplitdelay"]').val() / 100);

        var animobject = nextcaption;
        if (nextcaption.data('mySplitText') != undefined)
            if ($split != "none") nextcaption.data('mySplitText').revert();

        if ($split == "chars" || $split == "words" || $split == "lines") {
            if (nextcaption.find('a').length > 0)
                nextcaption.data('mySplitText', new SplitText(nextcaption.find('a'), {type: "lines,words,chars"}));
            else
                nextcaption.data('mySplitText', new SplitText(nextcaption, {type: "lines,words,chars"}));
        }

        if ($split == "chars")
            animobject = nextcaption.data('mySplitText').chars;


        if ($split == "words")
            animobject = nextcaption.data('mySplitText').words;


        if ($split == "lines")
            animobject = nextcaption.data('mySplitText').lines;

        var timedelay = ((animobject.length * mdelay) + speed) * 1000;

        punchgs.TweenLite.killTweensOf(animobject, false);

        if (animobject != nextcaption)
            punchgs.TweenLite.set(nextcaption, {
                opacity: 1,
                scaleX: 1,
                scaleY: 1,
                rotationX: 0,
                rotationY: 0,
                rotationZ: 0,
                skewX: 0,
                skewY: 0,
                z: 0,
                x: 0,
                y: 0,
                visibility: 'visible',
                opacity: 1,
                overwrite: "all"
            });

        var tl = new punchgs.TimelineLite();


        punchgs.TweenLite.killTweensOf(animobject, false);
        tl.staggerFromTo(animobject, speed,
            {

                x: 0,
                y: 0,
                scaleX: 1,
                scaleY: 1,
                rotationX: 0,
                rotationY: 0,
                rotationZ: 0,
                skewX: 0,
                skewY: 0,
                z: 1,
                visibility: 'visible',
                opacity: 1
            },

            {

                scaleX: scalex,
                scaleY: scaley,
                rotationX: rotatex,
                rotationY: rotatey,
                rotationZ: rotatez,
                x: transx,
                y: transy,
                z: transz + 1,
                skewX: skewx,
                skewY: skewy,
                opacity: opac,
                transformPerspective: tper,
                transformOrigin: origin,
                ease: easedata,
                overwrite: "all",
                delay: 0.3,

            }, mdelay);

        setTimeout(function () {
            if (cic.data('direction') == 0)
                animateCreatorIn();
            else if (cic.data('direction') == 2)
                animateCreatorIn();

            else if (cic.data('direction') == 1)
                animateCreatorOut();

        }, (timedelay) + 500)

    }


    /*********************************
     -    PREPARE THE ANIMATIONS    -
     ********************************/
    
    function _________PREPARE_ANIMATIONS___________(){}

    function preparePeviewAnimations() {

        jQuery('#preview_looper').click(function () {
            var pl = jQuery(this);
            if (pl.hasClass("deactivated")) {
                pl.removeClass("deactivated");
                pl.data('loop', 0);
                pl.find('.replyinfo').html("ON");
                setInAnimOfPreview();
            } else {
                pl.addClass("deactivated");
                setInAnimOfPreview();
                pl.data('loop', 0);
                pl.find('.replyinfo').html("OFF");
            }
        })

        var nextcaption = jQuery('#preview_caption_animateme');
        var startanim = jQuery('#layer_animation');
        var startspeed = jQuery('#layer_speed');
        var startease = jQuery('#layer_easing');
        var endanim = jQuery('#layer_endanimation');
        var endspeed = jQuery('#layer_endspeed');
        var endease = jQuery('#layer_endeasing');


        startanim.on('change', function () {
            setInAnimOfPreview();
        });
        startspeed.on('change', function () {
            setInAnimOfPreview();
        });
        startease.on('change', function () {
            setInAnimOfPreview();
        });

        endanim.on('change', function () {
            setInAnimOfPreview();
        });
        endspeed.on('change', function () {
            setInAnimOfPreview();
        });
        endease.on('change', function () {
            setInAnimOfPreview();
        });
    }


    /******************************
     -    PLAY IN ANIMATION    -
     ********************************/
    
    function _________PLAY_ANIMATIONS___________(){}

    function stopAnimationInPreview() {
        var nextcaption = jQuery('#preview_caption_animateme');
        punchgs.TweenLite.killTweensOf(nextcaption, false);
        if (nextcaption.data("timer")) clearTimeout(nextcaption.data('timer'));
        if (nextcaption.data("timera")) clearTimeout(nextcaption.data('timera'));
    }

    function setInAnimOfPreview() {
        var nextcaption = jQuery('#preview_caption_animateme');
        var startanim = jQuery('#layer_animation');
        var startspeed = jQuery('#layer_speed');
        var startease = jQuery('#layer_easing');
        var endanim = jQuery('#layer_endanimation');
        var endspeed = jQuery('#layer_endspeed');
        var endease = jQuery('#layer_endeasing');

        var anim = startanim.val();
        var speed = startspeed.val() / 1000;
        var easedata = startease.val();


        var mdelay = (jQuery('input[name="layer_splitdelay"]').val() / 100);
        var $split = jQuery('#layer_split').val();

        var animobject = nextcaption;
        if (nextcaption.data('mySplitText') != undefined)
            if ($split != "none") nextcaption.data('mySplitText').revert();

        if ($split == "chars" || $split == "words" || $split == "lines") {
            if (nextcaption.find('a').length > 0)
                nextcaption.data('mySplitText', new SplitText(nextcaption.find('a'), {type: "lines,words,chars"}));
            else
                nextcaption.data('mySplitText', new SplitText(nextcaption, {type: "lines,words,chars"}));
        }

        if ($split == "chars") {
            animobject = nextcaption.data('mySplitText').chars;

        }

        if ($split == "words") {
            animobject = nextcaption.data('mySplitText').words;

        }

        if ($split == "lines") {
            animobject = nextcaption.data('mySplitText').lines;

        }


        var timedelay = ((animobject.length * mdelay) + speed) * 1000;

        punchgs.TweenLite.killTweensOf(nextcaption, false);
        punchgs.TweenLite.killTweensOf(animobject, false);
        punchgs.TweenLite.set(nextcaption, {clearProps: "transform"});
        punchgs.TweenLite.set(animobject, {clearProps: "transform"});

        if (animobject != nextcaption)
            punchgs.TweenLite.set(nextcaption, {
                opacity: 1,
                scaleX: 1,
                scaleY: 1,
                rotationX: 0,
                rotationY: 0,
                rotationZ: 0,
                skewX: 0,
                skewY: 0,
                z: 0,
                x: 0,
                y: 0,
                visibility: 'visible',
                opacity: 1,
                overwrite: "all"
            });

        var tl = new punchgs.TimelineLite();


        if (nextcaption.data("timer")) clearTimeout(nextcaption.data('timer'));
        if (nextcaption.data("timera")) clearTimeout(nextcaption.data('timera'));
        var tlop = 0,
            tlxx = 198, tlyy = 82, tlzz = 2,
            tlsc = 1, tlro = 0,
            sc = 1, scX = 1, scY = 1,
            ro = 0, roX = 0, roY = 0, roZ = 0,
            skwX = 0, skwY = 0,
            opa = 0,
            trorig = "center,center",
            tper = 300,
            repeatV = 0,
            yoyoV = false,
            repeatdelayV = 0,
            calcx = 198,
            calcy = 82;

        if (anim == null) anim = "fade";

        if (anim == "randomrotate") {

            sc = Math.random() * 3 + 1;
            ro = Math.round(Math.random() * 200 - 100);
            transx = Math.round(Math.random() * 200 - 100);
            transy = Math.round(Math.random() * 200 - 100);
        }
        if (anim == ('lfr') || anim == ('skewfromright')) transx = 560;
        if (anim == ('lfl') || anim == ('skewfromleft')) transx = -100;
        if (anim == ('sfl') | anim == ('skewfromleftshort')) transx = -50;
        if (anim == ('sfr') | anim == ('skewfromrightshort')) transx = 50;
        if (anim == ('lft')) transy = -50;
        if (anim == ('lfb')) transy = 250;
        if (anim == ('sft')) transy = -50;
        if (anim == ('sfb')) transy = 50;
        if (anim == ('skewfromright') || anim == ('skewfromrightshort')) skwX = -85;
        if (anim == ('skewfromleft') || anim == ('skewfromleftshort')) skwX = 85;

        if (anim.split('custom').length > 1) {
            var id = anim.split("-")[1];
            var params = new Object;
            params = getCutCustomParams(id);

            var transx = params.movex;
            var transy = params.movey;
            var transz = params.movez;
            var rotatex = params.rotationx;
            var rotatey = params.rotationy;
            var rotatez = params.rotationz;
            var scalex = params.scalex / 100;
            var scaley = params.scaley / 100;
            var skewx = params.skewx;
            var skewy = params.skewy;
            var opac = params.captionopacity / 100;
            var tper = params.captionperspective;
            //var tper = 600;
            var originx = params.originx + "%";
            var originy = params.originy + "%";
            var origin = originx + " " + originy;


            nextcaption.data('newanim', tl.staggerFromTo(animobject, speed,
                {
                    scaleX: scalex,
                    scaleY: scaley,
                    rotationX: rotatex,
                    rotationY: rotatey,
                    rotationZ: rotatez,
                    x: transx,
                    y: transy,
                    z: transz + 1,
                    skewX: skewx,
                    skewY: skewy,
                    opacity: opac,
                    transformPerspective: tper,
                    transformOrigin: origin,
                    visibility: 'hidden'
                },

                {
                    x: 0,
                    y: 0,
                    scaleX: 1,
                    scaleY: 1,
                    rotationX: 0,
                    rotationY: 0,
                    rotationZ: 0,
                    skewX: 0,
                    skewY: 0,
                    z: 1,
                    visibility: 'visible',
                    opacity: 1,
                    ease: easedata,
                    overwrite: "all",

                }, mdelay));

            nextcaption.data('timera', setTimeout(function () {
                if (!jQuery('#preview_looper').hasClass("deactivated") && jQuery('#preview_looper').data('loop') != 2) setOutAnimOfPreview();
            }, (timedelay) + 500));
        } else {

            nextcaption.data('newanim', tl.staggerFromTo(animobject, speed,
                {
                    scale: sc,
                    rotation: ro,
                    rotationX: 0,
                    rotationY: 0,
                    rotationZ: 0,
                    x: transx,
                    y: transy,
                    opacity: 0,
                    z: 1,
                    skewX: skwX,
                    skewY: 0,
                    transformPerspective: 600,
                    transformOrigin: "50% 50%",
                    visibility: 'visible'
                },

                {
                    scale: 1,
                    skewX: 0,
                    rotation: 0,
                    z: 1,
                    x: 0,
                    y: 0,
                    visibility: 'visible',
                    opacity: 1,
                    ease: easedata,
                    overwrite: "all",

                }, mdelay));
            nextcaption.data('timera', setTimeout(function () {
                if (!jQuery('#preview_looper').hasClass("deactivated") && jQuery('#preview_looper').data('loop') != 2) setOutAnimOfPreview();
            }, (timedelay) + 500));
        }

    }

    function getCutCustomParams(id) {
        var params = new Object;
        jQuery.each(initLayerAnims, function (i, curobj) {
            if (parseInt(curobj.id, 0) == parseInt(id, 0)) params = curobj.params;
        })
        return params;
    }

    /******************************
     -    PLAY OUT ANIMATION    -
     ********************************/
    
    function setOutAnimOfPreview() {

        var nextcaption = jQuery('#preview_caption_animateme');
        var startanim = jQuery('#layer_animation');
        var startspeed = jQuery('#layer_speed');
        var startease = jQuery('#layer_easing');
        var endanim = jQuery('#layer_endanimation');
        var endspeed = jQuery('#layer_endspeed');
        var endease = jQuery('#layer_endeasing');

        var anim = endanim.val();
        var speed = endspeed.val() / 1000;
        var easedata = endease.val();
        var xx = 0;
        var yy = 0;
        skwX = 0;


        var mdelay = (jQuery('input[name="layer_endsplitdelay"]').val() / 100);
        var $split = jQuery('#layer_endsplit').val();

        var animobject = nextcaption;
        if (nextcaption.data('mySplitText') != undefined)
            if ($split != "none") nextcaption.data('mySplitText').revert();

        if ($split == "chars" || $split == "words" || $split == "lines") {
            if (nextcaption.find('a').length > 0)
                nextcaption.data('mySplitText', new SplitText(nextcaption.find('a'), {type: "lines,words,chars"}));
            else
                nextcaption.data('mySplitText', new SplitText(nextcaption, {type: "lines,words,chars"}));
        }

        if ($split == "chars") {
            animobject = nextcaption.data('mySplitText').chars;

        }

        if ($split == "words") {
            animobject = nextcaption.data('mySplitText').words;

        }

        if ($split == "lines") {
            animobject = nextcaption.data('mySplitText').lines;

        }


        var timedelay = ((animobject.length * mdelay) + speed) * 1000;


        punchgs.TweenLite.killTweensOf(animobject, false);

        if (animobject != nextcaption)
            punchgs.TweenLite.set(nextcaption, {
                opacity: 1,
                scaleX: 1,
                scaleY: 1,
                rotationX: 0,
                rotationY: 0,
                rotationZ: 0,
                skewX: 0,
                skewY: 0,
                z: 0,
                x: 0,
                y: 0,
                visibility: 'visible',
                opacity: 1,
                overwrite: "all"
            });

        var tl = new punchgs.TimelineLite();


        if (anim == null) anim = "auto";

        if (anim == ('fadeout') ||
            anim == ('ltr') ||
            anim == ('ltl') ||
            anim == ('str') ||
            anim == ('stl') ||
            anim == ('ltt') ||
            anim == ('ltb') ||
            anim == ('stt') ||
            anim == ('stb') ||
            anim == ('skewtoright') ||
            anim == ('skewtorightshort') ||
            anim == ('skewtoleft') ||
            anim == ('skewtoleftshort')) {

            if (anim == ('skewtoright') || anim == ('skewtorightshort'))
                skwX = 35

            if (anim == ('skewtoleft') || anim == ('skewtoleftshort'))
                skwX = -35


            if (anim == ('ltr') || anim == ('skewtoright'))
                xx = 560;
            else if (anim == ('ltl') || anim == ('skewtoleft'))
                xx = -100;
            else if (anim == ('ltt'))
                yy = -50;
            else if (anim == ('ltb'))
                yy = 250;
            else if (anim == ('str') || anim == ('skewtorightshort')) {
                xx = 50;
                oo = 0;
            } else if (anim == ('stl') || anim == ('skewtoleftshort')) {
                xx = -50;
                oo = 0;
            } else if (anim == ('stt')) {
                yy = -50;
                oo = 0;
            } else if (anim == ('stb')) {
                yy = 50;
                oo = 0;
            }

            if (anim == ('skewtorightshort'))
                xx = 400;

            if (anim == ('skewtoleftshort'))
                xx = 0

            nextcaption.data('newanim', tl.staggerTo(animobject, speed,
                {
                    scale: 1,
                    rotation: 0,
                    skewX: skwX,
                    opacity: 0,
                    x: xx,
                    y: yy,
                    z: 2,
                    overwrite: "auto",
                    ease: easedata,
                }, mdelay));
            nextcaption.data('timera', setTimeout(function () {
                if (jQuery('#preview_looper').hasClass("deactivated"))                jQuery('#preview_looper').data('loop', 2);
                setInAnimOfPreview();
            }, (timedelay) + 500));
        } else if (anim.split('custom').length > 1) {
            var id = anim.split("-")[1];
            var params = new Object;
            params = getCutCustomParams(id);

            var transx = params.movex;
            var transy = params.movey;
            var transz = params.movez;
            var rotatex = params.rotationx;
            var rotatey = params.rotationy;
            var rotatez = params.rotationz;
            var scalex = params.scalex / 100;
            var scaley = params.scaley / 100;
            var skewx = params.skewx;
            var skewy = params.skewy;
            var opac = params.captionopacity / 100;
            var tper = params.captionperspective;
            //var tper = 600;
            var originx = params.originx + "%";
            var originy = params.originy + "%";
            var origin = originx + " " + originy;

            nextcaption.data('newanim', tl.staggerFromTo(animobject, speed,
                {
                    x: 0,
                    y: 0,
                    scaleX: 1,
                    scaleY: 1,
                    rotationX: 0,
                    rotationY: 0,
                    rotationZ: 0,
                    skewX: 0,
                    skewY: 0,
                    transformPerspective: tper,
                    transformOrigin: origin,
                    z: 1,
                    visibility: 'visible',
                    opacity: 1,
                },

                {
                    scaleX: scalex,
                    scaleY: scaley,
                    rotationX: rotatex,
                    rotationY: rotatey,
                    rotationZ: rotatez,
                    x: transx,
                    y: transy,
                    z: transz + 1,
                    skewX: skewx,
                    skewY: skewy,
                    opacity: opac,
                    transformPerspective: tper,
                    transformOrigin: origin,
                    ease: easedata,

                }, mdelay));
            nextcaption.data('timera', setTimeout(function () {
                if (jQuery('#preview_looper').hasClass("deactivated"))                jQuery('#preview_looper').data('loop', 2);
                setInAnimOfPreview();
            }, (timedelay) + 500));

        } else {
            nextcaption.data('newanim').reverse();
            nextcaption.data('timer', setTimeout(function () {
                if (jQuery('#preview_looper').hasClass("deactivated")) jQuery('#preview_looper').data('loop', 2);
                setInAnimOfPreview();
            }, (speed * 1000) + 1000))
        }
    }


    /*! ALIGN TABLE HANDLING */
    /**
     * init the align table
     */
    function initAlignTable() {
        jQuery("#align_table a").click(function () {
            var obj = jQuery(this);
            if (jQuery("#align_table").hasClass("table_disabled"))
                return (false);
            if (obj.hasClass("selected"))
                return (false);

            var alignHor = obj.data("hor");
            var alignVert = obj.data("vert");
            jQuery("#align_table a").removeClass("selected");
            obj.addClass("selected");

            jQuery("#layer_align_hor").val(alignHor);
            jQuery("#layer_align_vert").val(alignVert);

            var objLayerXText = jQuery("#layer_left_text");
            var objLayerYText = jQuery("#layer_top_text");

            switch (alignHor) {
                case "left":
                    objLayerXText.html(objLayerXText.data("textnormal")).css("width", "auto");
                    jQuery("#layer_left").val("10");
                    break;
                case "right":
                    objLayerXText.html(objLayerXText.data("textoffset")).css("width", "42px");
                    jQuery("#layer_left").val("10");
                    break;
                case "center":
                    objLayerXText.html(objLayerXText.data("textoffset")).css("width", "42px");
                    jQuery("#layer_left").val("0");
                    break;
            }

            switch (alignVert) {
                case "top":
                    objLayerYText.html(objLayerYText.data("textnormal")).css("width", "auto");
                    jQuery("#layer_top").val("10");
                    break;
                case "bottom":
                    objLayerYText.html(objLayerYText.data("textoffset")).css("width", "42px");
                    jQuery("#layer_top").val("10");
                    break;
                case "middle":
                    objLayerYText.html(objLayerYText.data("textoffset")).css("width", "42px");
                    jQuery("#layer_top").val("0");
                    break;
            }

            t.updateLayerFromFields();
            updateHtmlLayersFromObject(getSerialFromID(jQuery('.layer_selected').attr('id')), true);
        });

    }

 
    /**
     * init general events
     */
    function initMainEvents() {
        //unselect layers on container click
        container.click(unselectLayers);

    }


    /*! INIT HTML FIELDS */
    /**
     * init events (update) for html properties change.
     */
    function initHtmlFields() {

        //show / hide slide link offset
        jQuery("#layer_slide_link").change(function () {
            showHideOffsetRow();
        });

        //set layers autocompolete
        jQuery("#layer_caption").autocomplete({
            position: { my : "right top", at: "right bottom" },
            source: initArrCaptionClasses,
            minLength: 0,
            close: t.updateLayerFromFields
        }).data("ui-autocomplete")._renderItem = function (ul, item) {
            var listItem = jQuery("<li></li>")
                .data("item.autocomplete", item)
                .append("<a>" + item.label + "</a>")
                .appendTo(ul);

            listItem.attr('original-title', item.value);
            return listItem;
        };

        //open the list on right button
        jQuery("#layer_captions_down").click(function (event) {
            event.stopPropagation();

            jQuery("#css_editor_expert").hide();
            jQuery("#css_editor_wrap").hide();

            //if opened - close autocomplete
            if (jQuery('#layer_caption').data("is_open") == true)
                jQuery("#layer_caption").autocomplete("close");
            else   //else open autocomplete
            if (jQuery(this).hasClass("ui-state-active"))
                jQuery("#layer_caption").autocomplete("search", "").data("ui-autocomplete")._renderItem = function (ul, item) {
                    var listItem = jQuery("<li></li>")
                        .data("item.autocomplete", item)
                        .append("<a>" + item.label + "</a>")
                        .appendTo(ul);

                    listItem.attr('original-title', item.value);
                    return listItem;
                };
        });

        //handle autocomplete close
        jQuery('#layer_caption').bind('autocompleteopen', function () {
            jQuery(this).data('is_open', true);

            //handle tooltip
            jQuery('.ui-autocomplete li').tipsy({
                delayIn: 70,
                html: true,
                gravity: "e",
                //trigger:"manual",
                title: function () {
                    setTimeout(function () {
                        jQuery('.tp-present-caption-small').parent().addClass("tp-present-wrapper-small");
                        jQuery('.tp-present-caption-small').parent().parent().addClass("tp-present-wrapper-parent-small");
                    }, 10)
                    return '<div class="tp-present-caption-small"><div class="tp-caption ' + this.getAttribute('original-title') + '">example</div></div>';
                }
            });
        });

        jQuery('#layer_caption').bind('autocompleteclose', function () {
            jQuery(this).data('is_open', false);
        });

        //set layers autocompolete
        jQuery("#font_family").autocomplete({
            source: initArrFontTypes,
            minLength: 0,
            close: t.updateLayerFromFields
        });

        //open the list on right button
        jQuery("#font_family_down").click(function (event) {
            event.stopPropagation();

            //if opened - close autocomplete
            if (jQuery('#font_family').data("is_open") == true)
                jQuery("#font_family").autocomplete("close");
            else   //else open autocomplete
            if (jQuery(this).hasClass("ui-state-active"))
                jQuery("#font_family").autocomplete("search", "").data("ui-autocomplete");
        });

        //handle autocomplete close
        jQuery('#font_family').bind('autocompleteopen', function () {
            jQuery(this).data('is_open', true);
        });

        jQuery('#font_family').bind('autocompleteclose', function () {
            jQuery(this).data('is_open', false);
        });


        jQuery("body").click(function () {
            jQuery("#layer_caption").autocomplete("close");
            jQuery("#font_family").autocomplete("close");
        });

        //set events:
        jQuery("#form_layers select, #layer_proportional_scale").change(function () {
            t.updateLayerFromFields();
        });
        
        // UPDATE LAYER TEXT FIELD
        jQuery("#layer_text").keyup(function () {
        	
            updateLayerTextField("", jQuery('#sortlist li.ui-state-hover .tl-fullanim'), jQuery(this).val());
            t.updateLayerFromFields();
        });

        var pressEnterFields = "#form_layers input, #form_layers textarea";
        jQuery(pressEnterFields).blur(function () {
            t.updateLayerFromFields();
        });
        jQuery(pressEnterFields).keypress(function (event) {
            if (event.keyCode == 13) {
                t.updateLayerFromFields();
            }
        });

        //end time validation
        jQuery("#layer_endtime").blur(validateCurrentLayerTimes).keypress(function (event) {
            if (event.keyCode == 13)
                validateCurrentLayerTimes();
        });

        //end speed update
        jQuery("#layer_endspeed").blur(validateCurrentLayerTimes).keypress(function (event) {
            updateCurTimer("", jQuery('#sortlist li.ui-state-hover .tl-fullanim'));
        });

        jQuery("#layer_endspeed").blur(function () {
            updateCurTimer("", jQuery('#sortlist li.ui-state-hover .tl-fullanim'));
        });


        jQuery("#delay").keypress(function (event) {
            if (Number(jQuery('#delay').val()) > 0)
                g_slideTime = jQuery('#delay').val();
            updateCurTimer("", jQuery('#sortlist li.ui-state-hover .tl-fullanim'));

        });

        jQuery("#delay").blur(function () {
            if (Number(jQuery('#delay').val()) > 0)
                g_slideTime = jQuery('#delay').val();
            updateCurTimer("", jQuery('#sortlist li.ui-state-hover .tl-fullanim'));
        });


    }


    /**
     * init buttons actions
     */
    function initButtons() {

        //set event buttons actions:
        jQuery("#button_add_layer").click(function () {
            if (jQuery(this).data('isstatic') == true) {
                addLayerText('static');
                sceneSize();

            } else {
                addLayerText();
                sceneSize();
            }
            });

        jQuery("#button_add_layer_image").click(function () {
            if (jQuery(this).data('isstatic') == true) {
                UniteAdminRev.openAddImageDialog("Select Static Layer Image", function (urlImage) {
                    addLayerImage(urlImage, 'static');
                });
                sceneSize();

            } else {
                UniteAdminRev.openAddImageDialog("Select Layer Image", function (urlImage) {
                    addLayerImage(urlImage);
                });
                sceneSize();
            }
        });


        //add youtube actions:
        jQuery("#button_add_layer_video").click(function () {
            if (jQuery(this).data('isstatic') == true) {
                UniteAdminRev.openVideoDialog(function (videoData) {
                    addLayerVideo(videoData, 'static');
                });
                sceneSize();
            } else {
                UniteAdminRev.openVideoDialog(function (videoData) {
                    addLayerVideo(videoData);
                });
                sceneSize();
            }
        });


        // BUILD THE LAYER ANIMATION DIALOG
        jQuery('#add_customanimation_in').click(function () {
            if (!t.getLayerGeneralParamsStatus()) return false; //false if fields are disabled

            currentAnimationType = 'customin';
            stopAnimationInPreview();
            initLayerAnimationDialog();
            setNewAnimObj();
        });

        // BUILD THE LAYER ANIMATION DIALOG
        jQuery('#add_customanimation_out').click(function () {
            if (!t.getLayerGeneralParamsStatus()) return false; //false if fields are disabled

            currentAnimationType = 'customout';

            initLayerAnimationDialog();
            setNewAnimObj();
        });

        //build the random animation button
        jQuery('#set-random-animation').click(function () {
            jQuery('input[name="movex"]').val((Math.floor(Math.random() * 101) - 50) * 10);
            jQuery('input[name="movey"]').val((Math.floor(Math.random() * 101) - 50) * 10);
            jQuery('input[name="movez"]').val((Math.floor(Math.random() * 11) - 5) * 10);

            jQuery('input[name="rotationx"]').val((Math.floor(Math.random() * 101) - 50) * 10);
            jQuery('input[name="rotationy"]').val((Math.floor(Math.random() * 101) - 50) * 10);
            jQuery('input[name="rotationz"]').val((Math.floor(Math.random() * 101) - 50) * 10);

            jQuery('input[name="scalex"]').val((Math.floor(Math.random() * 31)) * 10);
            jQuery('input[name="scaley"]').val((Math.floor(Math.random() * 31)) * 10);

            jQuery('input[name="skewx"]').val(Math.floor(Math.random() * 61));
            jQuery('input[name="skewy"]').val(Math.floor(Math.random() * 61));

            jQuery('input[name="captionopacity"]').val(0);
            jQuery('input[name="captionperspective"]').val(600);

            jQuery('input[name="originx"]').val((Math.floor(Math.random() * 41) - 20) * 10);
            jQuery('input[name="originy"]').val((Math.floor(Math.random() * 41) - 20) * 10);

            jQuery("#caption-movex-slider").slider("value", jQuery('input[name="movex"]').val());
            jQuery("#caption-movey-slider").slider("value", jQuery('input[name="movey"]').val());
            jQuery("#caption-movez-slider").slider("value", jQuery('input[name="movez"]').val());
            jQuery("#caption-rotationx-slider").slider("value", jQuery('input[name="rotationx"]').val());
            jQuery("#caption-rotationy-slider").slider("value", jQuery('input[name="rotationy"]').val());
            jQuery("#caption-rotationz-slider").slider("value", jQuery('input[name="rotationz"]').val());
            jQuery("#caption-scalex-slider").slider("value", jQuery('input[name="scalex"]').val());
            jQuery("#caption-scaley-slider").slider("value", jQuery('input[name="scaley"]').val());
            jQuery("#caption-skewx-slider").slider("value", jQuery('input[name="skewx"]').val());
            jQuery("#caption-skewy-slider").slider("value", jQuery('input[name="skewy"]').val());
            jQuery("#caption-opacity-slider").slider("value", jQuery('input[name="captionopacity"]').val());
            jQuery("#caption-perspective-slider").slider("value", jQuery('input[name="captionperspective"]').val());
            jQuery("#caption-originx-slider").slider("value", jQuery('input[name="originx"]').val());
            jQuery("#caption-originy-slider").slider("value", jQuery('input[name="originy"]').val());

            jQuery('input[name="captionspeed"]').val((Math.floor(Math.random() * 11) + 5) * 100);

            transition = jQuery('#caption-easing-demo option');
            var random = Math.floor(transition.length * (Math.random() % 1));

            transition.attr('selected', false).eq(random).attr('selected', true);
        });

        //edit video actions
        jQuery("#button_edit_video").click(function () {
            var objCurrentLayer = getCurrentLayer();
            var objVideoData = objCurrentLayer.video_data;

            //open video dialog
            UniteAdminRev.openVideoDialog(function (videoData) {
                    //update video layer
                    var objLayer = getVideoObjLayer(videoData);
                    updateCurrentLayer(objLayer);
                    updateHtmlLayersFromObject(selectedLayerSerial);
                    updateLayerFormFields(selectedLayerSerial);
                    redrawLayerHtml(selectedLayerSerial);
                },
                objVideoData);

        });

        //change image source actions
        jQuery("#button_change_image_source").click(function () {
            UniteAdminRev.openAddImageDialog("Select Layer Image", function (urlImage) {
                var objData = {};
                objData.image_url = urlImage;
                updateCurrentLayer(objData);
                redrawLayerHtml(selectedLayerSerial);
            });
        });

        //delete layer actions:
        jQuery(".timeline-layer-delete").live('click', function () {
            if (jQuery(this).hasClass("button-disabled"))
                return (false);
            //delete selected layer
            deleteCurrentLayer();
            sceneSize();

        });

        //delete layer actions:
        jQuery(".timeline-layer-duplicate").live('click', function () {
            if (jQuery(this).hasClass("button-disabled"))
                return (false);

            //delete selected layer
            duplicateCurrentLayer();
            sceneSize();
        });

        //delete all layers actions:
        jQuery("#button_delete_all").click(function () {
            if (confirm("Do you really want to delete all the layers?") == false)
                return (true);

            if (jQuery(this).hasClass("button-disabled"))
                return (false);

            deleteAllLayers();
            jQuery('.edit_layers_left').addClass("hidden").removeClass("visible");
            sceneSize();
        });

        //insert button link - open the dialog
        jQuery("#linkInsertButton").click(function () {
            if (jQuery(this).hasClass("disabled"))
                return (false);

            var buttons = {
                "Cancel": function () {
                    jQuery("#dialog_insert_button").dialog("close")
                }
            }
            jQuery("#dialog_insert_button").dialog({
                buttons: buttons,
                minWidth: 500,
                dialogClass: "tpdialogs",
                modal: true
            });

        });

        //insert button link - open the dialog
        jQuery("#linkInsertTemplate").click(function () {
            if (jQuery(this).hasClass("disabled"))
                return (false);

            var buttons = {
                "Cancel": function () {
                    jQuery("#dialog_template_insert").dialog("close")
                }
            }
            jQuery("#dialog_template_insert").dialog({
                buttons: buttons,
                minWidth: 500,
                dialogClass: "tpdialogs",
                modal: true
            });

        });

    }


//======================================================
//		Init Function End
//======================================================

    function _________LAYER_ANIMATION_DIALOG___________(){}


    /**************************************
     -    INIT LAYER ANIMATION DIALOG    -
     **************************************/
    function initLayerAnimationDialog() {
        var curAnimHandle = (currentAnimationType == 'customin') ? jQuery('#layer_animation').val() : jQuery('#layer_endanimation').val();
        var curAnimText = (currentAnimationType == 'customin') ? jQuery('#layer_animation option:selected').text() : jQuery('#layer_endanimation option:selected').text();
        var isOriginal = (curAnimHandle.indexOf('custom') > -1) ? false : true;

        var layerEasing = (currentAnimationType == 'customin') ? jQuery('#layer_easing option:selected').val() : jQuery('#layer_endeasing option:selected').val();
        var layerSpeed = (currentAnimationType == 'customin') ? jQuery('#layer_speed').val() : jQuery('#layer_endspeed').val();

        if (layerEasing == 'nothing') layerEasing = jQuery('#layer_easing option:selected').val();
        jQuery('#caption-easing-demo').val(layerEasing);

        if (parseInt(layerSpeed) == 0) layerSpeed = 600;
        jQuery('input[name="captionspeed"]').val(layerSpeed);

        var cic = jQuery('#caption-inout-controll');
        cic.data('direction', 0);
        jQuery('#revshowmetheinanim').addClass("reviconinaction");
        jQuery('#revshowmetheoutanim').removeClass("reviconinaction");

        //set the transition direction to out
        if (currentAnimationType == 'customout') jQuery('#caption-inout-controll').click();

        jQuery("#layeranimeditor_wrap").dialog({
            modal: true,
            resizable: false,
            title: 'Layer Animation Editor',
            minWidth: 700,
            minHeight: 500,
            closeOnEscape: true,
            open: function () {
                jQuery(this).closest(".ui-dialog")
                    .find(".ui-button").each(function (i) {
                    var cl;
                    if (i == 0) cl = "revgray";
                    if (i == 1) cl = "revgreen";
                    if (i == 2) cl = "revred";
                    if (i == 3) cl = "revred";
                    jQuery(this).addClass(cl).addClass("button-primary").addClass("rev-uibuttons");
                })
            },
            close: function () {
                setInAnimOfPreview();
            },
            buttons: {
                "Save/Change": function () {
                    var animObj = createNewAnimObj();

                    UniteAdminRev.setErrorMessageID("dialog_error_message");

                    jQuery('#current-layer-handle').text(curAnimText);
                    jQuery('input[name="layeranimation_save_as"]').val(curAnimText);

                    jQuery("#dialog-change-layeranimation").dialog({
                        modal: true,
                        buttons: {
                            'Save as': function () {
                                jQuery("#dialog-change-layeranimation-save-as").dialog({
                                    modal: true,
                                    buttons: {
                                        'Save as new': function () {
                                            var id = checkIfAnimExists(jQuery('input[name="layeranimation_save_as"]').val());
                                            var update = true;
                                            if (id !== false) {
                                                update = false;
                                                if (confirm("Animation already exists, overwrite?")) {
                                                    updateAnimInDb(jQuery('input[name="layeranimation_save_as"]').val(), animObj, id);
                                                    update = true;
                                                }
                                            } else {
                                                updateAnimInDb(jQuery('input[name="layeranimation_save_as"]').val(), animObj, false);
                                            }
                                            if (update) {
                                                jQuery("#dialog-change-layeranimation-save-as").dialog("close");
                                                jQuery("#dialog-change-layeranimation").dialog("close");
                                                jQuery(this).dialog("close");
                                                jQuery("#layeranimeditor_wrap").dialog("close");
                                                setInAnimOfPreview();
                                            }
                                        }
                                    }
                                });
                            },
                            Save: function () {
                                var id = checkIfAnimExists(jQuery('input[name="layeranimation_save_as"]').val());

                                if (id !== false) {
                                    if (confirm("Really overwrite animation?")) {
                                        updateAnimInDb(jQuery('input[name="layeranimation_save_as"]').val(), animObj, id);
                                        jQuery(this).dialog("close");
                                        jQuery("#layeranimeditor_wrap").dialog("close");
                                        setInAnimOfPreview();
                                    }
                                } else {
                                    updateAnimInDb(jQuery('input[name="layeranimation_save_as"]').val(), animObj, false);
                                    jQuery(this).dialog("close");
                                    jQuery("#layeranimeditor_wrap").dialog("close");
                                    setInAnimOfPreview();
                                }
                            }
                        }
                    });
                },
                "Cancel": function () {
                    jQuery(this).dialog("close");
                    setInAnimOfPreview();
                },
                Delete: function () {

                    if (isOriginal) {
                        alert("Default animations can't be deleted");
                    } else {
                        if (confirm('Really delete the animation "' + curAnimText + '"?')) {
                            deleteAnimInDb(curAnimHandle);
                            setInAnimOfPreview();
                            jQuery("#layeranimeditor_wrap").dialog("close");
                        }
                    }
                }
            }
        });

        jQuery("#caption-rotationx-slider").slider({
            range: "min",
            min: -980,
            max: 980,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="rotationx"]').val(ui.value);

            }
        });

        jQuery("#caption-rotationy-slider").slider({
            range: "min",
            min: -980,
            max: 980,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="rotationy"]').val(ui.value);

            }
        });

        jQuery("#caption-rotationz-slider").slider({
            range: "min",
            min: -980,
            max: 980,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="rotationz"]').val(ui.value);

            }
        });

        jQuery("#caption-movex-slider").slider({
            range: "min",
            min: -2000,
            max: 2000,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="movex"]').val(ui.value);

            }
        });

        jQuery("#caption-movey-slider").slider({
            range: "min",
            min: -2000,
            max: 2000,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="movey"]').val(ui.value);

            }
        });

        jQuery("#caption-movez-slider").slider({
            range: "min",
            min: -2000,
            max: 2000,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="movez"]').val(ui.value);

            }
        });

        jQuery("#caption-scalex-slider").slider({
            range: "min",
            min: 0,
            max: 800,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="scalex"]').val(ui.value);

            }
        });

        jQuery("#caption-scaley-slider").slider({
            range: "min",
            min: 0,
            max: 800,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="scaley"]').val(ui.value);

            }
        });

        jQuery("#caption-skewx-slider").slider({
            range: "min",
            min: -180,
            max: 180,
            step: 1,
            slide: function (event, ui) {
                jQuery('input[name="skewx"]').val(ui.value);

            }
        });

        jQuery("#caption-skewy-slider").slider({
            range: "min",
            min: -180,
            max: 180,
            step: 1,
            slide: function (event, ui) {
                jQuery('input[name="skewy"]').val(ui.value);

            }
        });

        jQuery("#caption-opacity-slider").slider({
            range: "min",
            min: -0,
            max: 100,
            step: 1,
            slide: function (event, ui) {
                jQuery('input[name="captionopacity"]').val(ui.value);

            }
        });

        jQuery("#caption-perspective-slider").slider({
            range: "min",
            min: -3000,
            max: 3000,
            step: 1,
            slide: function (event, ui) {
                jQuery('input[name="captionperspective"]').val(ui.value);

            }
        });

        jQuery("#caption-originx-slider").slider({
            range: "min",
            min: -200,
            max: 200,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="originx"]').val(ui.value);

            }
        });

        jQuery("#caption-originy-slider").slider({
            range: "min",
            min: -200,
            max: 200,
            step: 10,
            slide: function (event, ui) {
                jQuery('input[name="originy"]').val(ui.value);

            }
        });
    }

    /**
     * get the values of custom animation dialog
     */
    function createNewAnimObj() {
        var customAnim = new Object;

        customAnim['movex'] = jQuery('input[name="movex"]').val();
        customAnim['movey'] = jQuery('input[name="movey"]').val();
        customAnim['movez'] = jQuery('input[name="movez"]').val();
        customAnim['rotationx'] = jQuery('input[name="rotationx"]').val();
        customAnim['rotationy'] = jQuery('input[name="rotationy"]').val();
        customAnim['rotationz'] = jQuery('input[name="rotationz"]').val();
        customAnim['scalex'] = jQuery('input[name="scalex"]').val();
        customAnim['scaley'] = jQuery('input[name="scaley"]').val();
        customAnim['skewx'] = jQuery('input[name="skewx"]').val();
        customAnim['skewy'] = jQuery('input[name="skewy"]').val();
        customAnim['captionopacity'] = jQuery('input[name="captionopacity"]').val();
        customAnim['captionperspective'] = jQuery('input[name="captionperspective"]').val();
        customAnim['originx'] = jQuery('input[name="originx"]').val();
        customAnim['originy'] = jQuery('input[name="originy"]').val();

        return customAnim;
    }

    /**
     * set the values of custom animation dialog
     */
    function setNewAnimObj() {
        var customAnim = new Object;

        var selectedLayer = (currentAnimationType == 'customin') ? jQuery('#layer_animation').val() : jQuery('#layer_endanimation').val();

        if (selectedLayer.indexOf('customin') > -1 || selectedLayer.indexOf('customout') > -1) {
            selectedLayer = selectedLayer.replace('customin-', '').replace('customout-', '');

            if (typeof initLayerAnims === 'object' && !jQuery.isEmptyObject(initLayerAnims)) {
                for (var key in initLayerAnims) {
                    if (initLayerAnims[key]['id'] == selectedLayer) {
                        customAnim = initLayerAnims[key]['params'];
                    }
                }
            }
        }

        if (!jQuery.isEmptyObject(customAnim)) {
            jQuery('input[name="movex"]').val(customAnim['movex']);
            jQuery('input[name="movey"]').val(customAnim['movey']);
            jQuery('input[name="movez"]').val(customAnim['movez']);
            jQuery('input[name="rotationx"]').val(customAnim['rotationx']);
            jQuery('input[name="rotationy"]').val(customAnim['rotationy']);
            jQuery('input[name="rotationz"]').val(customAnim['rotationz']);
            jQuery('input[name="scalex"]').val(customAnim['scalex']);
            jQuery('input[name="scaley"]').val(customAnim['scaley']);
            jQuery('input[name="skewx"]').val(customAnim['skewx']);
            jQuery('input[name="skewy"]').val(customAnim['skewy']);
            jQuery('input[name="captionopacity"]').val(customAnim['captionopacity']);
            jQuery('input[name="captionperspective"]').val(customAnim['captionperspective']);
            jQuery('input[name="originx"]').val(customAnim['originx']);
            jQuery('input[name="originy"]').val(customAnim['originy']);
        } else {
            jQuery('input[name="movex"]').val(0);
            jQuery('input[name="movey"]').val(0);
            jQuery('input[name="movez"]').val(0);
            jQuery('input[name="rotationx"]').val(0);
            jQuery('input[name="rotationy"]').val(0);
            jQuery('input[name="rotationz"]').val(0);
            jQuery('input[name="scalex"]').val(100);
            jQuery('input[name="scaley"]').val(100);
            jQuery('input[name="skewx"]').val(0);
            jQuery('input[name="skewy"]').val(0);
            jQuery('input[name="captionopacity"]').val(0);
            jQuery('input[name="captionperspective"]').val(600);
            jQuery('input[name="originx"]').val(50);
            jQuery('input[name="originy"]').val(50);
        }

        jQuery("#caption-movex-slider").slider("value", jQuery('input[name="movex"]').val());
        jQuery("#caption-movey-slider").slider("value", jQuery('input[name="movey"]').val());
        jQuery("#caption-movez-slider").slider("value", jQuery('input[name="movez"]').val());
        jQuery("#caption-rotationx-slider").slider("value", jQuery('input[name="rotationx"]').val());
        jQuery("#caption-rotationy-slider").slider("value", jQuery('input[name="rotationy"]').val());
        jQuery("#caption-rotationz-slider").slider("value", jQuery('input[name="rotationz"]').val());
        jQuery("#caption-scalex-slider").slider("value", jQuery('input[name="scalex"]').val());
        jQuery("#caption-scaley-slider").slider("value", jQuery('input[name="scaley"]').val());
        jQuery("#caption-skewx-slider").slider("value", jQuery('input[name="skewx"]').val());
        jQuery("#caption-skewy-slider").slider("value", jQuery('input[name="skewy"]').val());
        jQuery("#caption-opacity-slider").slider("value", jQuery('input[name="captionopacity"]').val());
        jQuery("#caption-perspective-slider").slider("value", jQuery('input[name="captionperspective"]').val());
        jQuery("#caption-originx-slider").slider("value", jQuery('input[name="originx"]').val());
        jQuery("#caption-originy-slider").slider("value", jQuery('input[name="originy"]').val());
    }

    /**
     * check if anim handle already exists
     */
    function checkIfAnimExists(handle) {
        if (typeof initLayerAnims === 'object' && !jQuery.isEmptyObject(initLayerAnims)) {
            for (var key in initLayerAnims) {
                if (initLayerAnims[key]['handle'] == handle) return initLayerAnims[key]['id'];
            }
        }
        return false;
    }

    /**
     * update animation in database
     */
    function deleteAnimInDb(handle) {
        UniteAdminRev.setErrorMessageID("dialog_error_message");
        handle = jQuery.trim(handle);
        if (handle != '') {
            var animSelect = (currentAnimationType == 'customin') ? jQuery('#layer_animation option') : jQuery('#layer_endanimation option');

            UniteAdminRev.ajaxRequest("delete_custom_anim", handle, function (response) {
                jQuery("#dialog_success_message").show().html(response.message);

                //update html select (got from response)
                t.updateInitLayerAnim(response.customfull);
                updateLayerAnimsInput(response.customin, 'customin');
                updateLayerAnimsInput(response.customout, 'customout');
            });
        }
    }

    /**
     * update animation in database
     */
    function updateAnimInDb(handle, animObj, id) {
        UniteAdminRev.setErrorMessageID("dialog_error_message");
        animObj['handle'] = handle;


        if (id === false) { //create new
            //insert in database
            UniteAdminRev.ajaxRequest("insert_custom_anim", animObj, function (response) {
                jQuery("#dialog_success_message").show().html(response.message);

                //update html select (got from response)
                t.updateInitLayerAnim(response.customfull);
                updateLayerAnimsInput(response.customin, 'customin');
                updateLayerAnimsInput(response.customout, 'customout');

                selectLayerAnim(handle);
            });

        } else { //update existing

            //update to database
            UniteAdminRev.ajaxRequest("update_custom_anim", animObj, function (response) {
                jQuery("#dialog_success_message").show().html(response.message);

                //update html select (got from response)
                t.updateInitLayerAnim(response.customfull);
                updateLayerAnimsInput(response.customin, 'customin');
                updateLayerAnimsInput(response.customout, 'customout');

                selectLayerAnim(handle);
            });
        }
    }

    /**
     * update the layer animation inputs
     */
    function selectLayerAnim(handle) {
        var animSelect = (currentAnimationType == 'customin') ? jQuery('#layer_animation option') : jQuery('#layer_endanimation option');
        animSelect.each(function () {
            if (jQuery(this).text() == handle)
                jQuery(this).prop('selected', true);
            else
                jQuery(this).prop('selected', false);
        });
    }

    /**
     * update the layer animation inputs
     */
    function updateLayerAnimsInput(customAnim, type) {
        if (type == 'customin') {
            var animSelect = jQuery('#layer_animation');
            var animOption = jQuery('#layer_animation option');
            var current = jQuery('#layer_animation option:selected').val();
        } else {
            var animSelect = jQuery('#layer_endanimation');
            var animOption = jQuery('#layer_endanimation option');
            var current = jQuery('#layer_endanimation option:selected').val();
        }

        animOption.each(function () {
            if (jQuery(this).val().indexOf(type) > -1) {
                jQuery(this).remove();
            }
        });

        if (typeof customAnim === 'object' && !jQuery.isEmptyObject(customAnim)) {
            for (key in customAnim) {
                animSelect.append(new Option(customAnim[key], key));
            }
        }
        animSelect.val(current);
    }

    /**
     * show / hide offset row accorging the slide link value
     */
    function showHideOffsetRow() {
        var value = jQuery("#layer_slide_link").val();
        var offsetRow = jQuery("#layer_scrolloffset_row");

        if (value == "scroll_under")
            offsetRow.show();
        else
            offsetRow.hide();
    }


    /**
     * do various form validations
     */
    function doCurrentLayerValidations() {
        if (selectedLayerSerial == -1)
            return (false);

        validateCurrentLayerTimes();
    }


    /**
     * validate times (start and end times) of the current layer
     */
    function validateCurrentLayerTimes() {
        var currentLayer = getCurrentLayer();
        if (!currentLayer)
            return (false);

        var startTime = currentLayer.time;
        var endTime = jQuery("#layer_endtime").val();
        endTime = jQuery.trim(endTime);

        if (!endTime || endTime == "") {
            unmarkFieldError("#layer_endtime");
            return (false);
        }

        startTime = Number(startTime);
        endTime = Number(endTime);

        if (startTime >= endTime)
            markFieldError("#layer_endtime", "Must be greater then start time (" + startTime + ")");
        else
            unmarkFieldError("#layer_endtime");
    }

    /**
     * mark some field as error field and give it a error title
     */
    function markFieldError(field_selector, errorTitle) {
        jQuery(field_selector).addClass("field_error");
        if (errorTitle)
            jQuery(field_selector).prop("title", errorTitle);
    }


    /**
     * unmark field error class and title
     */
    function unmarkFieldError(field_selector) {
        jQuery(field_selector).removeClass("field_error");
        jQuery(field_selector).prop("title", "");
    }


    /**
     * get the first style from the styles list (from autocomplete)
     */
    function getFirstStyle() {
        var arrClasses = jQuery("#layer_caption").autocomplete("option", "source");
        var firstStyle = "";

        if (arrClasses == null || arrClasses.length == 0)
            return ("");

        var firstStyle = arrClasses[0];

        return (firstStyle);
    }


    /**
     * clear layer html fields, and disable buttons
     */
    function disableFormFields() {

        //clear html form
        jQuery("#form_layers")[0].reset();
        jQuery("#form_layers input, #form_layers select, #form_layers textarea").attr("disabled", "disabled").addClass("setting-disabled");

        jQuery("#button_delete_layer").addClass("button-disabled");
        jQuery("#button_duplicate_layer").addClass("button-disabled");

        jQuery("#form_layers label, #form_layers .setting_text, #form_layers .setting_unit").addClass("text-disabled");

        jQuery("#layer_captions_down").removeClass("ui-state-active").addClass("ui-state-default");
        jQuery("#font_family_down").removeClass("ui-state-active").addClass("ui-state-default");

        jQuery("#linkInsertButton").addClass("disabled");
        jQuery("#linkInsertTemplate").addClass("disabled");

        jQuery("#align_table").addClass("table_disabled");

        if (!jQuery('#preview_looper').hasClass("deactivated")) jQuery('#preview_looper').click();

        layerGeneralParamsStatus = false;
    }

    /**
     * enable buttons and form fields.
     */
    function enableFormFields() {
        jQuery("#form_layers input, #form_layers select, #form_layers textarea").removeAttr("disabled").removeClass("setting-disabled");

        jQuery("#button_delete_layer").removeClass("button-disabled");
        jQuery("#button_duplicate_layer").removeClass("button-disabled");

        jQuery("#form_layers label, #form_layers .setting_text, #form_layers .setting_unit").removeClass("text-disabled");

        jQuery("#layer_captions_down").removeClass("ui-state-default").addClass("ui-state-active");
        jQuery("#font_family_down").removeClass("ui-state-default").addClass("ui-state-active");

        jQuery("#linkInsertButton").removeClass("disabled");
        jQuery("#linkInsertTemplate").removeClass("disabled");

        jQuery("#align_table").removeClass("table_disabled");

        if (jQuery('#preview_looper').hasClass("deactivated")) jQuery('#preview_looper').click();

        layerGeneralParamsStatus = true;
    }


    /**
     * update z-index of the layers by order value
     */
    function updateZIndexByOrder() {
        for (var key in arrLayers) {
            var layer = arrLayers[key];
            if (layer.order !== undefined) {
                var zindex = layer.order + 100;
                jQuery("#slide_layer_" + key).css("z-index", zindex);
            }
        }
        ;
    }

    /**
     * get layers array
     */
    this.getLayers = function () {
        if (selectedLayerSerial != -1) {
            t.updateLayerFromFields();
        }
        //update sizes in images
        updateLayersImageSizes();

        return (arrLayers);
    }


    /**
     * update image sizes
     */
    function updateLayersImageSizes() {

        for (serial in arrLayers) {
            var layer = arrLayers[serial];
            if (layer.type == "image") {
                var htmlLayer = getHtmlLayerFromSerial(serial);
                var objUpdate = {};

                objUpdate.width = htmlLayer.width();
                objUpdate.height = htmlLayer.height();
                updateLayer(serial, objUpdate);
            }
        }
    }

    /*! LAYER EVENTS */

    /**
     * refresh layer events
     */
    function refreshEvents(serial) {
        var layer = getHtmlLayerFromSerial(serial);

        var grid_size = jQuery('#rs-grid-sizes option:selected').val();

        //update layer events.
        layer.draggable({
            drag: onLayerDrag,	//set ondrag event
            grid: [grid_size, grid_size],	//set the grid to 1 pixel
            /*					stop: function() {
             updateHtmlLayersFromObject(getSerialFromID(jQuery(this).attr("id")),true);
             }*/
        });

        layer.click(function (event) {
            if (!isLayerLocked(serial)) {

                setLayerSelected(serial);
                event.stopPropagation();
                setInAnimOfPreview();
            }
        });

    }

    /**
     *  Resize slider window
     */
    function sceneSize(){
    	var sortboxWrapper = jQuery(".layer_sortbox");
    	//var height = sortboxWrapper.height();
    	
        var layerHeight = jQuery(document).height() - jQuery('#sortlist').outerHeight() - 173;
        
        jQuery('#divLayers-wrapper').css({"height": layerHeight + "px"});
    }

    /**
     * Hide/show remove thumb button
     */


    function removebtnShow(){
        if (jQuery('#slide_thumb_button_preview').html() === ""){
            jQuery("#slide_thumb_button_remove").hide();
            jQuery("#slide_thumb_button").css('opacity','1');


        } else {
            jQuery("#slide_thumb_button_remove").show();
            jQuery("#slide_thumb_button").css('opacity','0');


        }
    }

    /**
     * Hide/show remove thumb button
     */

    function hideAccordion(){
    	
    	var handles = "#slide_params_holder, #slide_main_img_bg, #slide_main_advanced, #slide_main_link, #slide_main_transition";
    	
        if (jQuery('.edit_layers_left').css('display') === 'none'){
            jQuery(handles).show();
        } else if (jQuery('.edit_layers_left').css('display') === 'block'){
            jQuery(handles).hide();
        }
        
    }

    
    /**
     * get layer serial from id
     */
    function getSerialFromID(layerID) {
        var layerSerial = layerID.replace("slide_layer_", "");
        return (layerSerial);
    }

    /**
     * get serial from sortID
     */
    function getSerialFromSortID(sortID) {

        var layerSerial = sortID.replace("layer_sort_", "");
        return (layerSerial);
    }

    /**
     * get html layer from serial
     */
    function getHtmlLayerFromSerial(serial, isDemo) {
        if (!isDemo)
            isDemo = false;

        if (!isDemo)
            var htmlLayer = jQuery("#slide_layer_" + serial);
        else
            var htmlLayer = jQuery("#demo_layer_" + serial);

        if (htmlLayer.length == 0)
            UniteAdminRev.showErrorMessage("Html Layer with serial: " + serial + " not found!");

        return (htmlLayer);
    }

    /**
     * get sort field element from serial
     */
    function getHtmlSortItemFromSerial(serial) {
        var htmlSortItem = jQuery("#layer_sort_" + serial);
        if (htmlSortItem.length == 0) {
            UniteAdminRev.showErrorMessage("Html sort field with serial: " + serial + " not found!");
            return (false);
        }

        return (htmlSortItem);
    }

    /**
     * get layer object by id
     */
    function getLayer(serial) {
        var layer = arrLayers[serial];
        if (!layer)
            UniteAdminRev.showErrorMessage("getLayer error, Layer with serial:" + serial + "not found");

        //modify some data
        layer.speed = Number(layer.speed);
        layer.endspeed = Number(layer.endspeed);

        return layer;
    }

    /**
     * get current layer object
     */
    function getCurrentLayer() {
        if (selectedLayerSerial == -1) {
            UniteAdminRev.showErrorMessage("Selected layer not set");
            return (null);
        }

        return getLayer(selectedLayerSerial);
    }

 
    /**
     * set layer object to array
     */
    function setLayer(layerID, layer) {
        if (!arrLayers[layerID]) {
            UniteAdminRev.showErrorMessage("setLayer error, Layer with ID:" + layerID + "not found");
            return (false);
        }

        arrLayers[layerID] = jQuery.extend({}, layer);
    }


    /*! MAKE HTML LAYER */

    /**
     * make layer html, with params from the object
     */
    function makeLayerHtml(serial, objLayer, isDemo) {


        if (!isDemo)
            isDemo = false;

        var type = "text";
        if (objLayer.type)
            type = objLayer.type;

        var zIndex = Number(objLayer.order) + 1;

        var style = "z-index:" + zIndex + ";position:absolute;";
        var stylerot = "";
        switch (type) {
            case 'text':
            case 'image':
                if (parseFloat(objLayer['2d_rotation']) !== 0) {
                    stylerot += ' -moz-transform: rotate(' + objLayer['2d_rotation'] + 'deg); -ms-transform: rotate(' + objLayer['2d_rotation'] + 'deg); -o-transform: rotate(' + objLayer['2d_rotation'] + 'deg); -webkit-transform: rotate(' + objLayer['2d_rotation'] + 'deg); transform: rotate(' + objLayer['2d_rotation'] + 'deg);';
                    stylerot += ' -moz-transform-origin: ' + parseFloat(objLayer['2d_origin_x']) + '% ' + parseFloat(objLayer['2d_origin_x']) + '%; -ms-transform-origin: ' + parseFloat(objLayer['2d_origin_x']) + '% ' + parseFloat(objLayer['2d_origin_x']) + '%; -o-transform-origin: ' + parseFloat(objLayer['2d_origin_x']) + '% ' + parseFloat(objLayer['2d_origin_x']) + '%; -webkit-transform-origin: ' + parseFloat(objLayer['2d_origin_x']) + '% ' + parseFloat(objLayer['2d_origin_x']) + '%; transform-origin: ' + parseFloat(objLayer['2d_origin_x']) + '% ' + parseFloat(objLayer['2d_origin_x']) + '%;';
                }
                break;
        }

        if (objLayer.max_width !== 'auto')
            style += ' width: ' + objLayer.max_width + ';';

        if (objLayer.max_height !== 'auto')
            style += ' height: ' + objLayer.max_height + ';';

        //if(objLayer.whitespace !== 'normal')
        style += ' white-space: ' + objLayer.whitespace + ';';

        var static_class = '';

        if (typeof objLayer.special_type !== 'undefined' && objLayer.special_type == 'static') static_class = ' static_layer';

        if (type == "image") style += "line-height:0;";

        if (!isDemo)
            var html = '<div id="slide_layer_' + serial + '" style="' + style + '" class="slide_layer"><div style="' + stylerot + '" class="innerslide_layer tp-caption ' + objLayer.style + static_class + '" >';
        else
            var html = '<div id="demo_layer_' + serial + '" style="' + style + ' display: none;" class="demo_layer demo_layer_' + curDemoSlideID + ' slide_layer tp-caption ' + objLayer.style + static_class + '" >';

        //add layer specific html
        switch (type) {
            case "image":
                var addStyle = '';
                if (objLayer.scaleX != "") addStyle += "width: " + objLayer.scaleX + "px; ";
                if (objLayer.scaleY != "") addStyle += "height: " + objLayer.scaleY + "px;";

                html += '<img src="' + objLayer.image_url + '" alt="' + objLayer.alt + '" style="' + addStyle + '"></img>';
                break;
            default:
            case "text":
                html += objLayer.text;
                break;
            case "video":
                var styleVideo = "width:" + objLayer.video_width + "px;height:" + objLayer.video_height + "px;";
                if (typeof (objLayer.video_data) !== "undefined") {
                    var useImage = (jQuery.trim(objLayer.video_data.previewimage) != '') ? objLayer.video_data.previewimage : objLayer.video_image_url;
                } else {
                    var useImage = objLayer.video_image_url;
                }
                switch (objLayer.video_type) {
                    case "youtube":
                    case "vimeo":
                        styleVideo += ";background-image:url(" + useImage + ");";
                        break;
                    case "html5":
                        if (useImage !== undefined && useImage != "")
                            styleVideo += ";background-image:url(" + useImage + ");";
                        break;
                }

                html += "<div class='slide_layer_video' style='" + styleVideo + "'><div class='video-layer-inner video-icon-" + objLayer.video_type + "'>"
                html += "<div class='layer-video-title'>" + objLayer.video_title + "</div>";
                html += "</div></div>";
                break;
        }

        html += "</div>";

        //add cross icon:
        html += "<div class='icon_cross'></div>";
        html += '</div>';
        return (html);
    }


    /**
     * update layer by data object
     */
    function updateLayer(serial, objData) {
        var layer = getLayer(serial);
        if (!layer) {
            return (false);
        }
        for (key in objData) {
            layer[key] = objData[key];
        }


        setLayer(serial, layer);
    }


    /**
     * update current layer
     */
    function updateCurrentLayer(objData) {
        if (!arrLayers[selectedLayerSerial]) {
            UniteAdminRev.showErrorMessage("error! the layer with serial: " + selectedLayerSerial + " don't exists");
            return (false);
        }


        updateLayer(selectedLayerSerial, objData);
    }


    /**
     * add image layer
     */
    function addLayerImage(urlImage, special_type) {

        objLayer = {
            style: "",
            text: "Image " + (id_counter + 1),
            type: "image",
            image_url: urlImage
        };

        if (typeof special_type !== 'undefined')
            objLayer['special_type'] = special_type;

        addLayer(objLayer);
    }


    /**
     * get video layer object from video data
     */
    function getVideoObjLayer(videoData) {

        var objLayer = {
            type: "video",
            style: "",
            video_type: videoData.video_type,
            video_width: videoData.width,
            video_height: videoData.height,
            video_data: videoData
        };

        if (objLayer.video_type == "youtube" || objLayer.video_type == "vimeo") {
            objLayer.video_id = videoData.id;
            objLayer.video_title = videoData.title;
            objLayer.video_image_url = videoData.thumb_medium.url;
            objLayer.video_args = videoData.args;
        }

        //set sortbox text
        switch (objLayer.video_type) {
            case "youtube":
                objLayer.text = "Youtube: " + videoData.title;
                break;
            case "vimeo":
                objLayer.text = "Vimeo: " + videoData.title;
                break;
            case "html5":
                objLayer.text = "Html5 Video";
                objLayer.video_title = objLayer.text;
                objLayer.video_image_url = "";

                if (videoData.urlPoster != "")
                    objLayer.video_image_url = videoData.urlPoster;

                break;
        }

        return (objLayer);
    }


    /**
     * add video layer
     */
    function addLayerVideo(videoData, special_type) {
        var objLayer = getVideoObjLayer(videoData);

        if (typeof special_type !== 'undefined')
            objLayer['special_type'] = special_type;

        addLayer(objLayer);
    }


    /**
     * add text layer
     */
    function addLayerText(special_type) {

        var objLayer = {
            text: initText + (id_counter + 1),
            type: "text"
        };

        if (typeof special_type !== 'undefined')
            objLayer['special_type'] = special_type;

        addLayer(objLayer);
    }


    /*! ADD LAYER */
    /**
     * add layer
     */
    function addLayer(objLayer, isInit, isDemo) {

        if (!isInit)
            var isInit = false;

        if (!isDemo)
            var isDemo = false;

        //set init fields (if not set):
        if (objLayer.order == undefined)
            objLayer.order = (id_counter);
        objLayer.order = Number(objLayer.order);

        //set init position
        if (objLayer.type == "video") {
            if (objLayer.left == undefined)
                objLayer.left = initLeftVideo;

            if (objLayer.top == undefined)
                objLayer.top = initTopVideo;

            objLayer = checkUpdateFullwidthVideo(objLayer);

        } else {
            if (objLayer.left == undefined)
                objLayer.left = initLeft;

            if (objLayer.top == undefined)
                objLayer.top = initTop;
        }

        //set Loop Animations
        if (objLayer.loop_animation == undefined)
            objLayer.loop_animation = jQuery("#layer_loop_animation option:selected").val();

        if (objLayer.loop_easing == undefined)
            objLayer.loop_easing = jQuery("#layer_loop_easing").val();

        if (objLayer.loop_speed == undefined)
            objLayer.loop_speed = jQuery("#layer_loop_speed").val();

        if (objLayer.loop_startdeg == undefined)
            objLayer.loop_startdeg = jQuery("#layer_loop_startdeg").val();

        if (objLayer.loop_enddeg == undefined)
            objLayer.loop_enddeg = jQuery("#layer_loop_enddeg").val();

        if (objLayer.loop_xorigin == undefined)
            objLayer.loop_xorigin = jQuery("#layer_loop_xorigin").val();

        if (objLayer.loop_yorigin == undefined)
            objLayer.loop_yorigin = jQuery("#layer_loop_yorigin").val();

        if (objLayer.loop_xstart == undefined)
            objLayer.loop_xstart = jQuery("#layer_loop_xstart").val();

        if (objLayer.loop_xend == undefined)
            objLayer.loop_xend = jQuery("#layer_loop_xend").val();

        if (objLayer.loop_ystart == undefined)
            objLayer.loop_ystart = jQuery("#layer_loop_ystart").val();

        if (objLayer.loop_yend == undefined)
            objLayer.loop_yend = jQuery("#layer_loop_yend").val();

        if (objLayer.loop_zoomstart == undefined)
            objLayer.loop_zoomstart = jQuery("#layer_loop_zoomstart").val();

        if (objLayer.loop_zoomend == undefined)
            objLayer.loop_zoomend = jQuery("#layer_loop_zoomend").val();

        if (objLayer.loop_angle == undefined)
            objLayer.loop_angle = jQuery("#layer_loop_angle").val();

        if (objLayer.loop_radius == undefined)
            objLayer.loop_radius = jQuery("#layer_loop_radius").val();


        //set animation:
        if (objLayer.animation == undefined)
            objLayer.animation = jQuery("#layer_animation option:selected").val();

        //set easing:
        if (objLayer.easing == undefined)
            objLayer.easing = jQuery("#layer_easing").val();

        if (objLayer.split == undefined)
            objLayer.split = jQuery("#layer_split").val();

        if (objLayer.endsplit == undefined)
            objLayer.endsplit = jQuery("#layer_endsplit").val();

        if (objLayer.splitdelay == undefined)
            objLayer.splitdelay = jQuery("#layer_splitdelay").val();

        if (objLayer.endsplitdelay == undefined)
            objLayer.endsplitdelay = jQuery("#layer_endsplitdelay").val();

        if (objLayer.max_height == undefined && isInit)
            objLayer.max_height = jQuery("#layer_max_height").val();

        if (objLayer.max_width == undefined && isInit)
            objLayer.max_width = jQuery("#layer_max_width").val();

        if (objLayer['2d_rotation'] == undefined && isInit)
            objLayer['2d_rotation'] = jQuery("#layer_2d_rotation").val();

        if (objLayer['2d_origin_x'] == undefined)
            objLayer['2d_origin_x'] = jQuery("#layer_2d_origin_x").val();

        if (objLayer['2d_origin_y'] == undefined)
            objLayer['2d_origin_y'] = jQuery("#layer_2d_origin_x").val();

        if (objLayer.parallax_level == undefined)
            objLayer.parallax_level = jQuery("#parallax_level").val();

        if (objLayer.whitespace == undefined)
            objLayer.whitespace = jQuery("#layer_whitespace option:selected").val();


        if (objLayer.static_start == undefined)
            objLayer.static_start = jQuery("#layer_static_start option:selected").val();

        if (objLayer.static_end == undefined)
            objLayer.static_end = jQuery("#layer_static_end option:selected").val();

        //set speed:
        if (objLayer.speed == undefined)
            objLayer.speed = initSpeed;

        if (objLayer.align_hor == undefined)
            objLayer.align_hor = "left";

        if (objLayer.align_vert == undefined)
            objLayer.align_vert = "top";

        //set animation:
        if (objLayer.hiddenunder == undefined)
            objLayer.hiddenunder = "";

        if (objLayer.resizeme == undefined)
            objLayer.resizeme = "true";

        //set image link
        if (objLayer.link == undefined)
            objLayer.link = "";

        //set image link open in
        if (objLayer.link_open_in == undefined)
            objLayer.link_open_in = "same";

        //set slide link:
        if (objLayer.link_slide == undefined)
            objLayer.link_slide = "nothing";

        //set scroll under offset
        if (objLayer.scrollunder_offset == undefined)
            objLayer.scrollunder_offset = "";


        //set style, if empty, add first style from the list
        if (objLayer.style == undefined)
            objLayer.style = jQuery("#layer_caption").val();

        objLayer.style = jQuery.trim(objLayer.style);
        if (isInit == false && objLayer.type == "text" && (!objLayer.style || objLayer.style == "")) {
            objLayer.style = getFirstStyle();
        }

        //add time
        if (objLayer.time == undefined)
            objLayer.time = getNextTime();

        objLayer.time = Number(objLayer.time);	//casting

        //end time:
        if (objLayer.endtime == undefined)
            objLayer.endtime = "";

        if (objLayer.endspeed == undefined)
            objLayer.endspeed = initSpeed;

        //set end animation:
        if (objLayer.endanimation == undefined)
            objLayer.endanimation = jQuery("#layer_endanimation").val();

        //set end easing:
        if (objLayer.endeasing == undefined)
            objLayer.endeasing = jQuery("#layer_endeasing").val();

        //set corners
        if (objLayer.corner_left == undefined)
            objLayer.corner_left = "nothing";

        if (objLayer.corner_right == undefined)
            objLayer.corner_right = "nothing";

        if (objLayer.width == undefined)
            objLayer.width = -1;
        objLayer.width = Number(objLayer.width);

        if (objLayer.height == undefined)
            objLayer.height = -1;
        objLayer.height = Number(objLayer.height);

        //round position
        objLayer.top = Math.round(objLayer.top);
        objLayer.left = Math.round(objLayer.left);

        objLayer.serial = id_counter;

        if (!isDemo)
            arrLayers[id_counter] = jQuery.extend({}, objLayer);

        //add html
        var htmlLayer = makeLayerHtml(id_counter, objLayer, isDemo);
        container.append(htmlLayer);


        var objHtmlLayer = getHtmlLayerFromSerial(id_counter, isDemo);

        //update layer position
        updateHtmlLayerPosition(isInit, objHtmlLayer, objLayer, objLayer.top, objLayer.left, objLayer.align_hor, objLayer.align_vert);

        //update corners
        updateHtmlLayerCorners(objHtmlLayer, objLayer);

        //update cross position
        updateCrossIconPosition(objHtmlLayer, objLayer);

        //add layer to sortbox
        if (!isDemo)
            addToSortbox(id_counter, objLayer);

        //refresh draggables
        if (!isDemo)
            refreshEvents(id_counter);

        id_counter++;

        //enable "delete all" button, not event, but anyway :)
        jQuery("#button_delete_all").removeClass("button-disabled");

        //select the layer
        if (isInit == false && !isDemo) {

            setLayerSelected(objLayer.serial);
            jQuery("#layer_text").focus();
        }

    }


    /**
     *
     * delete layer from layers object
     */
    function deleteLayerFromObject(serial) {

        var arrLayersNew = {};
        var flagFound = false;
        for (key in arrLayers) {
            if (key != serial)
                arrLayersNew[key] = arrLayers[key];
            else
                flagFound = true;
        }

        if (flagFound == false)
            UniteAdminRev.showErrorMessage("Can't delete layer, serial: " + serial + " not found");

        arrLayers = jQuery.extend({}, arrLayersNew);
    }

    /**
     * delete the layer from html.
     */
    function deleteLayerFromHtml(serial) {
        var htmlLayer = getHtmlLayerFromSerial(serial);
        htmlLayer.remove();
    }


    /**
     * delete all representation of some layer
     */
    function deleteLayer(serial) {
        deleteLayerFromObject(serial);
        deleteLayerFromHtml(serial);
        deleteLayerFromSortbox(serial);
    }

    /**
     *
     * call "deleteLayer" function with selected serial
     */
    function deleteCurrentLayer() {
        if (selectedLayerSerial == -1)
            return (false);
        deleteLayer(selectedLayerSerial);

        //set unselected
        selectedLayerSerial = -1;

        //clear form and disable buttons
        //disableFormFields();
    }


    /**
     * duplicate layer, set it a little aside of the layer position
     */
    function duplicateLayer(serial) {
        var obj = arrLayers[serial];
        var obj2 = jQuery.extend(true, {}, obj);	//duplicate object
        obj2.left += 5;
        obj2.top += 5;
        obj2.order = undefined;
        obj2.time = undefined;

        addLayer(obj2);
        redrawSortbox();
        //initDisallowCaptionsOnClick();
    }


    /**
     * call "duplicateLayer" function with selected serial
     */
    function duplicateCurrentLayer() {
        if (selectedLayerSerial == -1)
            return (false);

        duplicateLayer(selectedLayerSerial);
    }


    /**
     * delete all layers
     */
    function deleteAllLayers() {

        arrLayers = {};
        container.html("");
        emptySortbox();
        selectedLayerSerial = -1;

        disableFormFields();
        jQuery("#button_delete_all").addClass("button-disabled");

        //add all layers from init
        if (initDemoLayers) {
            var len = initDemoLayers.length;
            if (len) {
                for (var i = 0; i < len; i++) {
                    for (var key in initDemoLayers[i]) {
                        curDemoSlideID = i;
                        addLayer(initDemoLayers[i][key], true, true);
                    }
                }
            } else {
                for (var i in initDemoLayers) {
                    for (var key in initDemoLayers[i]) {
                        curDemoSlideID = i;
                        addLayer(initDemoLayers[i][key], true, true);
                    }
                }
            }

            jQuery('select[name="rev_show_the_slides"] option[value="none"]').attr("selected", "selected");
            jQuery("#divbgholder").addClass("trans_bg");
            jQuery("#divbgholder").css("background-image", "none");
            jQuery("#divbgholder").css("background-color", "transparent");
        }

    }

    /**
     * update the corners
     */
    function updateHtmlLayerCorners(htmlLayer, objLayer) {
        htmlLayer = htmlLayer.find('.innerslide_layer');
        var ncch = htmlLayer.outerHeight();
        var bgcol = htmlLayer.css('backgroundColor');

        switch (objLayer.corner_left) {
            case "curved":
                htmlLayer.append("<div class='frontcorner'></div>");
                break;
            case "reverced":
                htmlLayer.append("<div class='frontcornertop'></div>");
                break;
        }

        switch (objLayer.corner_right) {
            case "curved":
                htmlLayer.append("<div class='backcorner'></div>");
                break;
            case "reverced":
                htmlLayer.append("<div class='backcornertop'></div>");
                break;
        }


        htmlLayer.find(".frontcorner").css({
            'borderWidth': ncch + "px",
            'left': (0 - ncch) + 'px',
            'borderRight': '0px solid transparent',
            'borderTopColor': bgcol
        });

        htmlLayer.find(".frontcornertop").css({
            'borderWidth': ncch + "px",
            'left': (0 - ncch) + 'px',
            'borderRight': '0px solid transparent',
            'borderBottomColor': bgcol
        });

        htmlLayer.find('.backcorner').css({
            'borderWidth': ncch + "px",
            'right': (0 - ncch) + 'px',
            'borderLeft': '0px solid transparent',
            'borderBottomColor': bgcol
        });

        htmlLayer.find('.backcornertop').css({
            'borderWidth': ncch + "px",
            'right': (0 - ncch) + 'px',
            'borderLeft': '0px solid transparent',
            'borderTopColor': bgcol
        });

    }

    /**
     * update the position of html cross
     */
    function updateCrossIconPosition(objHtmlLayer, objLayer) {

        var htmlCross = objHtmlLayer.find(".icon_cross");
        var crossWidth = htmlCross.width();
        var crossHeight = htmlCross.height();
        var totalWidth = objHtmlLayer.outerWidth();
        var totalHeight = objHtmlLayer.outerHeight();
        var crossHalfW = Math.round(crossWidth / 2);
        var crossHalfH = Math.round(crossHeight / 2);


        var posx = 0;
        var posy = 0;
        switch (objLayer.align_hor) {
            case "left":
                posx = -crossHalfW;
                break;
            case "center":
                posx = (totalWidth - crossWidth) / 2;
                break;
            case "right":
                posx = totalWidth - crossHalfW;
                break;
        }

        switch (objLayer.align_vert) {
            case "top":
                posy = -crossHalfH;
                break;
            case "middle":
                posy = (totalHeight - crossHeight) / 2;
                break;
            case "bottom":
                posy = totalHeight - crossHalfH;
                break;
        }

        htmlCross.css({"left": posx + "px", "top": posy + "px"});
    }


    /*! UPDATE HTML LAYER POSITION */
    /**
     * update html layer position
     */
    function updateHtmlLayerPosition(isInit, htmlLayer, objLayer, top, left, align_hor, align_vert) {

        //update positions by align
        var width = htmlLayer.outerWidth();
        var height = htmlLayer.outerHeight();


        //get sizes from saved if on get
        if (isInit == true && objLayer.type == "image") {
            if (objLayer.width != -1)
                width = objLayer.width;

            if (objLayer.height != -1)
                height = objLayer.height;
        }

        var totalWidth = container.width();
        var totalHeight = container.height();


        var objCss = {};

        //handle horizontal
        switch (align_hor) {
            default:
            case "left":
                objCss["right"] = "auto";
                objCss["left"] = left + "px";

                break;
            case "right":
                objCss["left"] = "auto";
                objCss["right"] = left + "px";
                break;
            case "center":
                var realLeft = (totalWidth - width) / 2;
                realLeft = Math.round(realLeft) + left;
                objCss["left"] = realLeft + "px";
                objCss["right"] = "auto";
                break;
        }

        //handle vertical
        switch (align_vert) {
            default:
            case "top":
                objCss["bottom"] = "auto";
                objCss["top"] = top + "px";
                break;
            case "middle":
                var realTop = (totalHeight - height) / 2;
                realTop = Math.round(realTop) + top;
                objCss["top"] = realTop + "px";
                objCss["bottom"] = "auto";
                break;
            case "bottom":
                objCss["top"] = "auto";
                objCss["bottom"] = top + "px";
                break;
        }


        //objCss["top"] = top+"px";
        //objCss["top"] = top+"px";
        htmlLayer.css(objCss);
    }


    /**
     * check / update full width video position and size
     */
    function checkUpdateFullwidthVideo(objLayer) {

        if (objLayer.type != "video")
            return (objLayer);

        if (typeof (objLayer.video_data) !== "undefined") {
            if (objLayer.video_data && objLayer.video_data.fullwidth && objLayer.video_data.fullwidth == true) {
                objLayer.top = 0;
                objLayer.left = 0;
                objLayer.align_hor = "left";
                objLayer.align_vert = "top";
                objLayer.video_width = container.width();
                objLayer.video_height = container.height();
            }
        }
        return (objLayer);
    }


    /*! UPDATE HTML LAYER */
    /**
     * update html layers from object
     */
    function updateHtmlLayersFromObject(serial, posresets) {
        if (!serial)
            serial = selectedLayerSerial

        var objLayer = getLayer(serial);

        if (!objLayer)
            return (false);

        var htmlLayer = getHtmlLayerFromSerial(serial);

        //set class name
        var className = "innerslide_layer tp-caption";
        if (serial == selectedLayerSerial)
            htmlLayer.addClass("layer_selected");
        className += " " + objLayer.style;
        htmlLayer.find('.innerslide_layer').attr("class", className);



        //set html
        var type = "text";
        if (objLayer.type)
            type = objLayer.type;

        //update layer by type:
        switch (type) {
            case "image":
                break;
            case "video":	//update fullwidth position
                objLayer = checkUpdateFullwidthVideo(objLayer);
                break;
            default:
            case "text":
                htmlLayer.find('.innerslide_layer').rotatable("destroy");
                htmlLayer.find('.innerslide_layer').html(objLayer.text);
                htmlLayer.find('.innerslide_layer').rotatable({
                    angle: htmlLayer.find('.innerslide_layer').data('angle'),
                    start: function (event, ui) {

                    },
                    rotate: function (event, ui) {
                        jQuery('#layer_2d_rotation').val(getRotationDegrees(ui.element));
                        ui.element.data('angle', ui.angle.current);
                    },
                    stop: function (event, ui) {
                        t.updateLayerFromFields();
                    }
                });

                updateHtmlLayerCorners(htmlLayer, objLayer);
                break;
        }

        //set position
        // KRISZTIAN REMOVED THE CALL BASED ON DRAG ISSUES
        if (posresets)
            updateHtmlLayerPosition(false, htmlLayer, objLayer, objLayer.top, objLayer.left, objLayer.align_hor, objLayer.align_vert);

        updateCrossIconPosition(htmlLayer, objLayer);
    }

    /**
     THE CHANGE OF POSITION FIELD TRIGGERS THE REPOSITIONINNG OF THE LAYER
     **/
    function positionChanged() {
        jQuery("#layer_top, #layer_left").change(function () {
            setTimeout(function () {
                updateHtmlLayersFromObject(getSerialFromID(jQuery('.layer_selected').attr('id')), true);
            }, 19);
        });
    }

    /**
     * update layer from html fields
     */
    this.updateLayerFromFields = function () {

        if (selectedLayerSerial == -1) {
            //UniteAdminRev.showErrorMessage("No layer selected, can't update.");
            return (false);
        }

        var objUpdate = {};

        objUpdate.style = jQuery("#layer_caption").val();
        objUpdate.text = jQuery("#layer_text").val();
        objUpdate.top = Number(jQuery("#layer_top").val());
        objUpdate.left = Number(jQuery("#layer_left").val());

        objUpdate.whitespace = jQuery("#layer_whitespace option:selected").val();
        objUpdate.max_height = jQuery("#layer_max_height").val();
        objUpdate.max_width = jQuery("#layer_max_width").val();
        objUpdate.parallax_level = jQuery("#parallax_level").val();
        objUpdate['2d_rotation'] = jQuery("#layer_2d_rotation").val();

        objUpdate['2d_origin_x'] = jQuery("#layer_2d_origin_x").val();
        objUpdate['2d_origin_y'] = jQuery("#layer_2d_origin_y").val();
        objUpdate['static_start'] = jQuery("#layer_static_start option:selected").val();
        objUpdate['static_end'] = jQuery("#layer_static_end option:selected").val();


        //set Loop Animations
        objUpdate.loop_animation = jQuery("#layer_loop_animation option:selected").val();
        objUpdate.loop_easing = jQuery("#layer_loop_easing").val();
        objUpdate.loop_speed = jQuery("#layer_loop_speed").val();
        objUpdate.loop_startdeg = jQuery("#layer_loop_startdeg").val();
        objUpdate.loop_enddeg = jQuery("#layer_loop_enddeg").val();
        objUpdate.loop_xorigin = jQuery("#layer_loop_xorigin").val();
        objUpdate.loop_yorigin = jQuery("#layer_loop_yorigin").val();
        objUpdate.loop_xstart = jQuery("#layer_loop_xstart").val();
        objUpdate.loop_xend = jQuery("#layer_loop_xend").val();
        objUpdate.loop_ystart = jQuery("#layer_loop_ystart").val();
        objUpdate.loop_yend = jQuery("#layer_loop_yend").val();
        objUpdate.loop_zoomstart = jQuery("#layer_loop_zoomstart").val();
        objUpdate.loop_zoomend = jQuery("#layer_loop_zoomend").val();
        objUpdate.loop_angle = jQuery("#layer_loop_angle").val();
        objUpdate.loop_radius = jQuery("#layer_loop_radius").val();

        objUpdate.animation = jQuery("#layer_animation option:selected").val();
        objUpdate.speed = jQuery("#layer_speed").val();
        objUpdate.align_hor = jQuery("#layer_align_hor").val();
        objUpdate.align_vert = jQuery("#layer_align_vert").val();
        objUpdate.hiddenunder = jQuery("#layer_hidden").is(":checked");
        objUpdate.resizeme = jQuery("#layer_resizeme").is(":checked");
        objUpdate.easing = jQuery("#layer_easing").val();
        objUpdate.split = jQuery("#layer_split").val();
        objUpdate.endsplit = jQuery("#layer_endsplit").val();
        objUpdate.splitdelay = jQuery("#layer_splitdelay").val();
        objUpdate.endsplitdelay = jQuery("#layer_endsplitdelay").val();
        objUpdate.link_slide = jQuery("#layer_slide_link").val();
        objUpdate.scrollunder_offset = jQuery("#layer_scrolloffset").val();
        objUpdate.alt = jQuery("#layer_alt").val();
        objUpdate.scaleX = jQuery("#layer_scaleX").val();
        objUpdate.scaleY = jQuery("#layer_scaleY").val();


        objUpdate.scaleProportional = jQuery("#layer_proportional_scale").is(":checked");

        objUpdate.attrID = jQuery("#layer_id").val();
        objUpdate.attrClasses = jQuery("#layer_classes").val();
        objUpdate.attrTitle = jQuery("#layer_title").val();
        objUpdate.attrRel = jQuery("#layer_rel").val();
        objUpdate.link = jQuery("#layer_image_link").val();
        objUpdate.link_open_in = jQuery("#layer_link_open_in").val();
        objUpdate.link_id = jQuery("#layer_link_id").val();
        objUpdate.link_class = jQuery("#layer_link_class").val();
        objUpdate.link_title = jQuery("#layer_link_title").val();
        objUpdate.link_rel = jQuery("#layer_link_rel").val();


        objUpdate.endtime = jQuery("#layer_endtime").val();
        objUpdate.endanimation = jQuery("#layer_endanimation").val();
        objUpdate.endspeed = jQuery("#layer_endspeed").val();
        objUpdate.endeasing = jQuery("#layer_endeasing").val();

        objUpdate.corner_left = jQuery("#layer_cornerleft").val();
        objUpdate.corner_right = jQuery("#layer_cornerright").val();

        
        //update object
        updateCurrentLayer(objUpdate);

        //update html layers
        updateHtmlLayersFromObject();

        //update html sortbox
        updateHtmlSortboxFromObject();

        //update the timeline with the new data
        updateCurrentLayerTimeline();

        UniteCssEditorRev.setCssPreviewLive();

        //event on element for href
        initDisallowCaptionsOnClick();

        var type = "text";

        var objLayer = getCurrentLayer();

        if (objLayer.type)
            type = objLayer.type;

        switch (type) {
            case 'text':
                if (objUpdate.whitespace == "nowrap") {
                    jQuery("#layer_max_height").val("auto");
                    jQuery("#layer_max_width").val("auto");
                    objUpdate.max_width = "none";
                    objUpdate.max_height = "none;"

                }
                jQuery('#slide_layer_' + selectedLayerSerial + ' .innerslide_layer').css({'maxWidth': objUpdate.max_width});
                jQuery('#slide_layer_' + selectedLayerSerial + ' .innerslide_layer').css({'maxHeight': objUpdate.max_height});
                jQuery('#slide_layer_' + selectedLayerSerial + ' .innerslide_layer').css({'whiteSpace': objUpdate.whitespace});
                jQuery('#slide_layer_' + selectedLayerSerial).css({'width': "auto"});
                jQuery('#slide_layer_' + selectedLayerSerial).css({'height': "auto"});

                break;
            case 'image':

                jQuery('#slide_layer_' + selectedLayerSerial + ' .innerslide_layer').css({'maxWidth': objUpdate.max_width});
                jQuery('#slide_layer_' + selectedLayerSerial + ' .innerslide_layer').css({'maxHeight': objUpdate.max_height});

                break;
        }

        switch (type) {
            case 'text':
            case 'image':

                var rotation = parseFloat(objUpdate['2d_rotation']),
                    trorigin = parseFloat(objUpdate['2d_origin_x']) + '% ' + parseFloat(objUpdate['2d_origin_y']) + '%',
                    element = jQuery('#slide_layer_' + selectedLayerSerial + ' .innerslide_layer');
                angle = rotation;
                punchgs.TweenLite.set(jQuery('#slide_layer_' + selectedLayerSerial + ' .innerslide_layer'), {
                    transformOrigin: trorigin,
                    overwrite: "auto"
                });

                element.css('transform', 'rotate(' + angle + 'deg)');
                element.css('-moz-transform', 'rotate(' + angle + 'deg)');
                element.css('-webkit-transform', 'rotate(' + angle + 'deg)');
                element.css('-o-transform', 'rotate(' + angle + 'deg)');

                break;
        }
        
        //update title line
        updateLayerTitleLine(objLayer);
        
    }
    
    
    /**
     * update layer text
     */
    function updateLayerTitleLine(objLayer){
        jQuery("#left-layer-title-line span").html(objLayer.text);
    	
    }


    /**
     * redraw some layer html
     */
    function redrawLayerHtml(serial) {

        var objLayer = getLayer(serial);
        var html = makeLayerHtml(serial, objLayer)
        var htmlInner = jQuery(html).html();
        var htmlLayer = getHtmlLayerFromSerial(serial);

        htmlLayer.html(htmlInner);

    }


    /**
     * update layer parameters from the object
     */
    function updateLayerFormFields(serial) {
    	    	
        var objLayer = arrLayers[serial];
        
        jQuery("#layer_caption").val(objLayer.style);
        jQuery("#layer_text").val(UniteAdminRev.stripslashes(objLayer.text));
        jQuery("#layer_alt").val(objLayer.alt);


        jQuery("#layer_scaleX").val(objLayer.scaleX);
        jQuery("#layer_scaleY").val(objLayer.scaleY);

        jQuery("#layer_max_height").val(objLayer.max_height);
        jQuery("#layer_max_width").val(objLayer.max_width);
        jQuery("#layer_2d_rotation").val(objLayer['2d_rotation']);
        jQuery("#layer_2d_origin_x").val(objLayer['2d_origin_x']);
        jQuery("#layer_2d_origin_y").val(objLayer['2d_origin_y']);

        jQuery("#layer_static_start option[value='" + objLayer.static_start + "']").attr('selected', 'selected');
        changeEndStaticFunctions();
        jQuery("#layer_static_end option[value='" + objLayer.static_end + "']").attr('selected', 'selected');

        jQuery("#parallax_level").val(objLayer.parallax_level);
        jQuery("#layer_whitespace option[value='" + objLayer.whitespace + "']").attr('selected', 'selected');


        if (objLayer.scaleProportional == "true" || objLayer.scaleProportional == true)
            jQuery("#layer_proportional_scale").prop("checked", true);
        else
            jQuery("#layer_proportional_scale").prop("checked", false);
        jQuery("#layer_top").val(objLayer.top);
        jQuery("#layer_left").val(objLayer.left);

        //set Loop Animations
        jQuery("#layer_loop_animation option[value='" + objLayer.loop_animation + "']").attr('selected', 'selected');
        jQuery("#layer_loop_easing").val(objLayer.loop_easing);
        jQuery("#layer_loop_speed").val(objLayer.loop_speed);
        jQuery("#layer_loop_startdeg").val(objLayer.loop_startdeg);
        jQuery("#layer_loop_enddeg").val(objLayer.loop_enddeg);
        jQuery("#layer_loop_xorigin").val(objLayer.loop_xorigin);
        jQuery("#layer_loop_yorigin").val(objLayer.loop_yorigin);
        jQuery("#layer_loop_xstart").val(objLayer.loop_xstart);
        jQuery("#layer_loop_xend").val(objLayer.loop_xend);
        jQuery("#layer_loop_ystart").val(objLayer.loop_ystart);
        jQuery("#layer_loop_yend").val(objLayer.loop_yend);
        jQuery("#layer_loop_zoomstart").val(objLayer.loop_zoomstart);
        jQuery("#layer_loop_zoomend").val(objLayer.loop_zoomend);
        jQuery("#layer_loop_angle").val(objLayer.loop_angle);
        jQuery("#layer_loop_radius").val(objLayer.loop_radius);

        jQuery("#layer_animation option[value='" + objLayer.animation + "']").attr('selected', 'selected');

        jQuery("#layer_easing").val(objLayer.easing);

        jQuery("#layer_split").val(objLayer.split);
        jQuery("#layer_endsplit").val(objLayer.endsplit);
        jQuery("#layer_splitdelay").val(objLayer.splitdelay);
        jQuery("#layer_endsplitdelay").val(objLayer.endsplitdelay);

        jQuery("#layer_slide_link").val(objLayer.link_slide);
        jQuery("#layer_scrolloffset").val(objLayer.scrollunder_offset);

        jQuery("#layer_speed").val(objLayer.speed);
        jQuery("#layer_align_hor").val(objLayer.align_hor);
        jQuery("#layer_align_vert").val(objLayer.align_vert);

        if (objLayer.hiddenunder == "true" || objLayer.hiddenunder == true)
            jQuery("#layer_hidden").prop("checked", true);
        else
            jQuery("#layer_hidden").prop("checked", false);

        if (objLayer.resizeme == "true" || objLayer.resizeme == true)
            jQuery("#layer_resizeme").prop("checked", true);
        else
            jQuery("#layer_resizeme").prop("checked", false);

        jQuery("#layer_image_link").val(objLayer.link);
        jQuery("#layer_link_open_in").val(objLayer.link_open_in);
        jQuery("#layer_link_id").val(objLayer.link_id);
        jQuery("#layer_link_class").val(objLayer.link_class);
        jQuery("#layer_link_title").val(objLayer.link_title);
        jQuery("#layer_link_rel").val(objLayer.link_rel);


        jQuery("#layer_endtime").val(objLayer.endtime);
        jQuery("#layer_endanimation").val(objLayer.endanimation);
        jQuery("#layer_endeasing").val(objLayer.endeasing);
        jQuery("#layer_endspeed").val(objLayer.endspeed);

        //set advanced params
        jQuery("#layer_cornerleft").val(objLayer.corner_left);
        jQuery("#layer_cornerright").val(objLayer.corner_right);

        //set align table
        var alignClass = "#linkalign_" + objLayer.align_hor + "_" + objLayer.align_vert;
        jQuery("#align_table a").removeClass("selected");
        jQuery(alignClass).addClass("selected");

        jQuery("#layer_id").val(objLayer.attrID);
        jQuery("#layer_classes").val(objLayer.attrClasses);
        jQuery("#layer_title").val(objLayer.attrTitle);
        jQuery("#layer_rel").val(objLayer.attrRel);


        //show / hide go under slider offset row
        showHideOffsetRow();
        showHideLoopFunctions(); //has to be the last thing done to not interrupt settings
        
        updateLayerTitleLine(objLayer);
    }


    /**
     * unselect all html layers
     */
    function unselectHtmlLayers() {

        jQuery(containerID + " .slide_layer.layer_selected").each(function () {
            try {
                jQuery(this).resizable("destroy");
                jQuery(this).find('.innerslide_layer').rotatable("destroy");
            } catch (e) {
            }
        });


        jQuery(containerID + " .slide_layer").removeClass("layer_selected");
        jQuery('.edit_layers_left').addClass("hidden").removeClass("visible");

    }


    /**
     * set all layers unselected
     */
    function unselectLayers() {

        unselectHtmlLayers();
        unselectSortboxItems();
        selectedLayerSerial = -1;
        disableFormFields();


        //reset elements
        jQuery("#layer_alt_row").hide();
        jQuery("#layer_scale_title_row").hide();
        jQuery("#layer_max_width_row").hide();
        jQuery("#layer_max_height_row").hide();
        jQuery("#layer_whitespace_row").hide();
        jQuery("#layer_scaleX_row").hide();
        jQuery("#layer_scaleY_row").hide();
        jQuery("#layer_proportional_scale_row").hide();
        jQuery("#button_edit_video_row").hide();
        jQuery("#button_change_image_source_row").hide();
        jQuery("#layer_text").css("height", "80px");

        jQuery("#layer_image_link_row").hide();
        jQuery("#layer_link_id_row").hide();
        jQuery("#layer_link_class_row").hide();
        jQuery("#layer_link_title_row").hide();
        jQuery("#layer_link_rel_row").hide();
        jQuery("#layer_link_open_in_row").hide();

    }

    /*! SET LAYER SELECTED */
    /**
     * set layer selected representation
     */
    function setLayerSelected(serial) {


        if (selectedLayerSerial == serial)
            return (false);


        objLayer = getLayer(serial);


        var layer = getHtmlLayerFromSerial(serial);
        

        //unselect all other layers
        unselectHtmlLayers();

        //set selected class
        layer.addClass("layer_selected");
        jQuery('.edit_layers_left').addClass("visible").removeClass("hidden");
        hideAccordion();


        setSortboxItemSelected(serial);


        //update selected serial var
        selectedLayerSerial = serial;
        //update bottom fields
        updateLayerFormFields(serial);

        //enable form fields
        enableFormFields();
        jQuery('#sortlist').scrollTop(jQuery('#sortlist').scrollTop()+jQuery('.ui-state-hover').position().top);
                
        //do specific operations depends on type
        switch (objLayer.type) {
            case "video":	//show edit video button
                jQuery("#linkInsertButton").addClass("disabled");
                jQuery("#linkInsertTemplate").addClass("disabled");
                jQuery("#button_edit_video_row").show();

                jQuery("#layer_text").css("height", "25px");

                jQuery("#layer_2d_rotation_row").hide();
                jQuery("#layer_2d_origin_x_row").hide();
                jQuery("#layer_2d_origin_y_row").hide();
                jQuery("#layer_2d_title_row").hide();
                break;
            case "image":
                //disable the insert button
                jQuery("#linkInsertButton").addClass("disabled");
                jQuery("#linkInsertTemplate").addClass("disabled");

                //show / hide some elements
                jQuery("#layer_alt_row").show();
                jQuery("#layer_scale_title_row").show();
                jQuery("#layer_scaleX_row").show();
                jQuery("#layer_scaleY_row").show();
                //initScaleImage();
                jQuery("#layer_proportional_scale_row").show();
                jQuery("#button_change_image_source_row").show();
                jQuery("#layer_text").css("height", "25px");
                jQuery("#layer_image_link_row").show();
                jQuery("#layer_link_open_in_row").show();
                jQuery("#layer_link_id_row").show();
                jQuery("#layer_link_class_row").show();
                jQuery("#layer_link_title_row").show();
                jQuery("#layer_link_rel_row").show();
                jQuery("#layer_2d_rotation_row").show();
                jQuery("#layer_2d_origin_x_row").show();
                jQuery("#layer_2d_origin_y_row").show();


                if (jQuery("#layer_proportional_scale").is(":checked"))
                    var aspectratio = true;
                else
                    var aspectratio = false;

                layer.resizable({
                    aspectRatio: aspectratio,
                    handles: "all",
                    start: function (event, ui) {
                        ui.element.css({width: ui.originalSize.width, height: ui.originalSize.height});

                        ui.element.find('img').css({width: "100%", height: "100%"});
                        ui.element.find('.innerslide_layer').css({width: "100%", height: "100%"});
                    },
                    resize: function (event, ui) {
                        jQuery('#layer_scaleX').val(ui.size.width);
                        jQuery('#layer_scaleY').val(ui.size.height);
                    },
                    stop: function (event, ui) {
                        t.updateLayerFromFields();
                    }
                });


                layer.find('.innerslide_layer').rotatable({
                    angle: layer.find('.innerslide_layer').data('angle'),
                    start: function (event, ui) {

                    },
                    rotate: function (event, ui) {
                        jQuery('#layer_2d_rotation').val(getRotationDegrees(ui.element));
                        ui.element.data('angle', ui.angle.current);
                    },
                    stop: function (event, ui) {
                        t.updateLayerFromFields();
                    }
                });


                break;
            default:  //set layer text to default height
                jQuery("#layer_text").css("height", "80px");
                jQuery("#layer_max_width_row").show();
                jQuery("#layer_max_height_row").show();
                jQuery("#layer_whitespace_row").show();
                jQuery("#layer_2d_rotation_row").show();
                jQuery("#layer_2d_origin_x_row").show();
                jQuery("#layer_2d_origin_y_row").show();
                layer.resizable({
                    handles: "all",
                    resize: function (event, ui) {
                        var il = ui.element.find('.innerslide_layer');

                        il.css({"maxWidth": ui.size.width, "maxHeight": ui.size.height});

                        jQuery('#layer_max_width').val(ui.size.width + "px");
                        jQuery('#layer_max_height').val(ui.size.height + "px");
                    },
                    stop: function (event, ui) {
                        var il = ui.element.find('.innerslide_layer');
                        layer.css({width: il.outerWidth(), height: il.outerHeight()});
                        il.css({"maxWidth": "auto", "maxHeight": "auto"});
                        setTimeout(function () {
                            il.css({"maxWidth": il.outerWidth(), "maxHeight": il.outerHeight()});
                            jQuery('#layer_max_width').val(il.width() + "px");
                            jQuery('#layer_max_height').val(il.height() + "px");
                            layer.css({width: il.outerWidth(), height: il.outerHeight()});
                            t.updateLayerFromFields();
                        }, 50)
                    }
                });
                layer.find('.innerslide_layer').rotatable({
                    angle: layer.find('.innerslide_layer').data('angle'),
                    start: function (event, ui) {

                    },
                    rotate: function (event, ui) {
                        jQuery('#layer_2d_rotation').val(getRotationDegrees(ui.element));
                        ui.element.data('angle', ui.angle.current);
                    },
                    stop: function (event, ui) {
                        t.updateLayerFromFields();
                    }
                });
                break;
        }


        //hide edit video button
        if (objLayer.type != "video") {
            jQuery("#button_edit_video_row").hide();
        }


        //hide image layer related fields
        if (objLayer.type != "image") {
            jQuery("#layer_alt_row").hide();
            jQuery("#layer_scale_title_row").hide();
            jQuery("#layer_scaleX_row").hide();
            jQuery("#layer_scaleY_row").hide();
            jQuery("#layer_proportional_scale_row").hide();
            jQuery("#layer_image_link_row").hide();
            jQuery("#layer_link_open_in_row").hide();
            jQuery("#button_change_image_source_row").hide();
        }

        //show/hide text related layers
        if (objLayer.type == "text") {
            jQuery("#layer_cornerleft_row").show();
            jQuery("#layer_cornerright_row").show();
            jQuery("#layer_resizeme_row").show();
            jQuery("#layer_max_width_row").show();
            jQuery("#layer_max_height_row").show();
            jQuery("#layer_whitespace_row").show();
        } else {
            jQuery("#layer_cornerleft_row").hide();
            jQuery("#layer_cornerright_row").hide();
            jQuery("#layer_resizeme_row").hide();
            jQuery("#layer_max_width_row").hide();
            jQuery("#layer_max_height_row").hide();
            jQuery("#layer_whitespace_row").hide();
        }


        //hide autocomplete
        jQuery("#layer_caption").autocomplete("close");

        //make layer form validations
        doCurrentLayerValidations();

        //update timeline of the layer
        updateCurrentLayerTimeline();

        //set focus to text editor
        //jQuery("#layer_text").focus();
    }

    /**
     * get rotation degrees
     */
    function getRotationDegrees(obj) {
        var matrix = obj.css("-webkit-transform") ||
            obj.css("-moz-transform") ||
            obj.css("-ms-transform") ||
            obj.css("-o-transform") ||
            obj.css("transform");
        if (matrix !== 'none') {
            var values = matrix.split('(')[1].split(')')[0].split(',');
            var a = values[0];
            var b = values[1];
            var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
        } else {
            var angle = 0;
        }
        return (angle < 0) ? angle += 360 : angle;
    }
    /**
     *
     * return if the layer is selected or not
     */
    function isLayerSelected(serial) {
        return (serial == selectedLayerSerial);
    }

    /**
     * hide in html and sortbox
     */
    function hideLayer(serial, skipGlobalButton) {
        var htmlLayer = jQuery("#slide_layer_" + serial);
        htmlLayer.hide();
        setSortboxItemHidden(serial);

        if (skipGlobalButton != true) {
            if (isAllLayersHidden())
                jQuery("#button_sort_visibility").addClass("e-disabled");
        }
    }


    /**
     * show layer in html and sortbox
     */
    function showLayer(serial, skipGlobalButton) {
        var htmlLayer = jQuery("#slide_layer_" + serial);
        htmlLayer.show();
        setSortboxItemVisible(serial);

        if (skipGlobalButton != true)
            jQuery("#button_sort_visibility").removeClass("e-disabled");

    }


    /**
     * show all layers
     */
    function showAllLayers() {
        for (serial in arrLayers)
            showLayer(serial, true);
    }

    /**
     * hide all layers
     */
    function hideAllLayers() {
        for (serial in arrLayers)
            hideLayer(serial, true);
    }

    /**
     * hide in html and sortbox
     */
    function lockAllLayers(serial) {
        for (serial in arrLayers)
            lockLayer(serial);
    }


    /**
     * show layer in html and sortbox
     */
    function unlockAllLayers(serial) {
        for (serial in arrLayers)
            unlockLayer(serial);
    }


    /**
     * get true / false if the layer is hidden
     */
    function isLayerVisible(serial) {
        var htmlLayer = jQuery("#slide_layer_" + serial);
        var isVisible = htmlLayer.is(":visible");
        return (isVisible);
    }

    /**
     * get true / false if all layers hidden
     */
    function isAllLayersHidden() {
        for (serial in arrLayers) {
            if (isLayerVisible(serial) == true)
                return (false);
        }

        return (true);
    }


    /**
     * get true / false if the layer can be moved
     */
    function isLayerLocked(serial) {
        var htmlLayer = jQuery("#slide_layer_" + serial);
        var isLocked = htmlLayer.attr('aria-disabled');

        if (typeof(isLocked) == 'undefined')
            return false;
        else
            return (isLocked == 'false') ? false : true;
    }


    /**
     * hide in html and sortbox
     */
    function lockLayer(serial) {
        setSortboxItemLocked(serial);

        var layer = getHtmlLayerFromSerial(serial);


        layer.draggable('disable');

        try {
            layer.resizable("destroy");
        } catch (e) {
        }
        try {
            layer.find('.innerslide_layer').rotatable("destroy");
        } catch (e) {
        }
        layer.removeClass("layer_selected");
        jQuery('.edit_layers_left').addClass("hidden").removeClass("visible");
        hideAccordion();
        //	setTimeout(function() {
        layer.blur();
        layer.addClass("ui-state-disabled");
        layer.attr('aria-disabled', true);

        //	},10)

    }


    /**
     * show layer in html and sortbox
     */
    function unlockLayer(serial) {
        setSortboxItemUnlocked(serial);
        var layer = getHtmlLayerFromSerial(serial);
        layer.attr('aria-disabled', false);
        layer.draggable('enable');

    }


//======================================================
//			Sortbox Functions
//======================================================
    
    function _________SORTBOX___________(){}

    /**
     * init the sortbox
     */
    function initSortbox() {

        redrawSortbox();

        //set the sortlist sortable
        jQuery("#sortlist").sortable({
            handle: '.sort_content_container .eg-icon-sort',
            axis: 'y',
            update: function () {
                onSortboxSorted();
            }
        });

        //set input time events:
        jQuery("#sortlist").delegate(".sortbox_time", "keyup", function (event) {
            if (event.keyCode == 13)
                onSortboxTimeChange(jQuery(this));
        });

        jQuery("#sortlist").delegate(".sortbox_time", "blur", function (event) {
            onSortboxTimeChange(jQuery(this));
        });


        //set click event
        jQuery("#sortlist").delegate("li", "mousedown", function () {

            var serial = getSerialFromSortID(this.id);
            setLayerSelected(serial);
        });


        //on show / hide layer icon click - show / hide layer
        jQuery("#sortlist").delegate(".sortbox_eye", "mousedown", function (event) {

            var sortboxID = jQuery(this).parent().parent().parent().attr("id");
            var serial = getSerialFromSortID(sortboxID);
            if (isLayerVisible(serial))
                hideLayer(serial);
            else
                showLayer(serial);

            //prevnt the layer from selecting
            event.stopPropagation();
        });

        //on show / hide layer icon click - show / hide layer
        jQuery("#sortlist").delegate(".sortbox_lock", "mousedown", function (event) {

            var sortboxID = jQuery(this).parent().parent().parent().attr("id");
            var serial = getSerialFromSortID(sortboxID);
            if (isLayerLocked(serial))
                unlockLayer(serial);
            else
                lockLayer(serial);

            //prevent the layer from selecting
            event.stopPropagation();
        });


        //show / hide all layers
        jQuery("#button_sort_visibility").click(function () {
            var button = jQuery(this);
            if (button.hasClass("e-disabled")) {	//show all
                button.removeClass("e-disabled");
                showAllLayers();
            } else {	//hide all
                button.addClass("e-disabled");
                hideAllLayers();
            }

        });

        //Lock / Unlock all layers
        jQuery("#button_sort_lock").click(function () {
            var button = jQuery(this);
            if (button.hasClass("e-disabled")) {	//show all
                button.removeClass("e-disabled");
                unlockAllLayers();
            } else {	//hide all
                button.addClass("e-disabled");
                lockAllLayers();
            }
        });

        //on show / hide layer icon click - show / hide layer
        jQuery("#sortlist").delegate(".till_slideend", "mousedown", function (event) {

            var sortboxID = jQuery(this).parent().parent().parent().attr("id");
            var serial = getSerialFromSortID(sortboxID);
            var objLayer = getLayer(serial);

            var button = jQuery(this);

            if (button.hasClass("tillendon")) {
                button.removeClass("tillendon")
                // KRIKI

                if (objLayer.realEndTime == g_slideTime) {
                    objLayer.realEndTime = g_slideTime - 200;
                    button.closest('li').find('.sortbox_timeend').val(g_slideTime - 200);
                    updateCurrentLayerTimeline();
                }
            } else {
                button.addClass("tillendon");
                objLayer.realEndTime = g_slideTime;
                button.closest('li').find('.sortbox_timeend').val(g_slideTime);
                updateCurrentLayerTimeline();
            }


        });


    }


    /**
     * set sortbox items selected
     */
    function setSortboxItemSelected(serial) {
        var sortItem = getHtmlSortItemFromSerial(serial);
        unselectSortboxItems();

        sortItem.removeClass("ui-state-default").addClass("ui-state-hover");
    }


    /**
     * set sortbox item hidden mode
     */
    function setSortboxItemHidden(serial) {
        var sortItem = getHtmlSortItemFromSerial(serial);
        sortItem.addClass("sortitem-hidden");
    }

    /**
     * set sortbox item visible mode
     */
    function setSortboxItemVisible(serial) {
        var sortItem = getHtmlSortItemFromSerial(serial);
        sortItem.removeClass("sortitem-hidden");
    }

    /**
     * set sortbox item locked mode
     */
    function setSortboxItemLocked(serial) {
        var sortItem = getHtmlSortItemFromSerial(serial);
        sortItem.addClass("sortitem-locked");
    }

    /**
     * set sortbox item unlocked mode
     */
    function setSortboxItemUnlocked(serial) {
        var sortItem = getHtmlSortItemFromSerial(serial);
        sortItem.removeClass("sortitem-locked");
    }


    /**
     *
     * add layer to sortbox
     */
    function addToSortbox(serial, objLayer) {


        if (objLayer.realEndTime == "undefined" || objLayer.realEndTime == undefined)
            objLayer = getLayerExtendedParams(objLayer);

        var endslideclass = "";
        if (objLayer.endSpeed == 0 || objLayer.endSpeed == undefined || objLayer.realEndTime >= g_slideTime || objLayer.endWithSlide) {
            objLayer.endWithSlide = true;
            var endslideclass = "tillendon";
        }

        var isVisible = isLayerVisible(serial);
        var classLI = "";
        if (isVisible == false)
            classLI = " sortitem-hidden";

        var sortboxText = getSortboxText(objLayer.text);
        var depth = Number(objLayer.order) + 1;

        var htmlSortbox = '<li id="layer_sort_' + serial + '" class="ui-state-default' + classLI + '">';
        htmlSortbox += '<div class="sort_content_container">';
        htmlSortbox += '<span style="display:table-cell"><i class="eg-icon-sort"></i></span>';
        htmlSortbox += '<div class="layer_sort_input_depth sortbox-tablecell">';
        htmlSortbox += '<input type="text" class="sortbox_depth" readonly title="Edit Depth" value="' + depth + '">';
        htmlSortbox += '</div>';
        htmlSortbox += '<div class="sortbox-tablecell sort-iconcollection">';
        htmlSortbox += '<span class="sortbox_eye" title="Show / Hide Layer" class="tipsy_enabled_top"><i class="eg-icon-eye"></i><i class="eg-icon-eye-off"></i></span>';
        htmlSortbox += '<span class="sortbox_lock" title="Lock / Unlock Layer" class="tipsy_enabled_top"><i class="eg-icon-lock-open"></i><i class="eg-icon-lock"></i></span>';
        htmlSortbox += '<span class="till_slideend ' + endslideclass + '" title="Snap to Slide End / Custom End" class="tipsy_enabled_top"><i class="eg-icon-back-in-time"></i><i class="eg-icon-minus"></i></span>';
        htmlSortbox += '</div>';

        htmlSortbox += '<div style="position:relative;" class="sort-hover-part layer_sort_layer_text_field sortbox-tablecell" <span class="sortbox_text"><i style="margin:0px 10px" class="';

        switch (objLayer.type) {
            case "text":
                htmlSortbox += 'fa fa-font';
                break;
            case "image":
                htmlSortbox += 'fa fa-camera';
                break;
            case "video":
                htmlSortbox += 'fa fa-video-camera';
                break;
        }

        htmlSortbox += '"></i><span class="timer-layer-text">' + sortboxText + '</span></span>';
        htmlSortbox += '<div class="timeline">';
        htmlSortbox += '<div class="tl-fullanim"><div class="tl-startanim"></div><div class="tl-endanim"></div></div>';
        htmlSortbox += '</div>';
        htmlSortbox += '</div>';

        htmlSortbox += '<div class="layer_sort_inputs sortbox-tablecell">';
        htmlSortbox += '<input type="text" class="sortbox_time" title="Edit Layer Start" value="' + objLayer.time + '">';


        htmlSortbox += '<input type="text" class="sortbox_timeend" title="Edit Layer End" value="' + objLayer.realEndTime + '">';
        htmlSortbox += '</div>';


        htmlSortbox += '<div class="layer_sort_inputs metabox-tablecell">';
        htmlSortbox += '<a href="javascript:void(0)" id="button_duplicate_layer" class="timeline-layer-duplicate"><i class="fa fa-clone" aria-hidden="true"></i></a>';
        htmlSortbox += '<a href="javascript:void(0)" id="button_delete_layer" class="timeline-layer-delete"><i class="fa fa-trash-o" aria-hidden="true"></i></a>';
        htmlSortbox += '</div>';

        htmlSortbox += '</div>';
        htmlSortbox += '</li>';

        jQuery("#sortlist").append(htmlSortbox);


        var cur = jQuery('#layer_sort_' + serial + " .timeline"),
            dragfull = cur.find('.tl-fullanim');

        setCurTimer(dragfull);

        dragfull.draggable({
            containment: "parent",
            //snap:".tl-fullanim",
            axis: "x",
            stop: function () {
                updateCurTimer("stop", jQuery(this));
            },
            drag: function () {
                updateCurTimer("resize", jQuery(this));
            }
        })

        dragfull.resizable({
            containment: "parent",
            handles: "w,e",
            stop: function () {
                updateCurTimer("stop", jQuery(this));
            },
            resize: function () {
                updateCurTimer("resize", jQuery(this));
            }
            //snap:".tl-fullanim"
        });

        var iwrapper = jQuery('#layer_sort_' + serial + " .layer_sort_inputs");

        iwrapper.find('input').keypress(function (event) {
            if (event.keyCode == 13)
                changeTimerInputs();
        }).blur(changeTimerInputs);

    }

    /**
     check if the Layer should go till Slide End, or should animate our before.
     if objLayer.endWithSlide == true -> the Layer should not get any "data-end" output !!
     */
    function checkTillSlideEnd(li, objLayer) {
        if (objLayer.realEndTime >= g_slideTime) {
            objLayer.endWithSlide = true;
            li.find('.till_slideend').addClass("tillendon");
        } else {
            objLayer.endWithSlide = false;
            li.find('.till_slideend').removeClass("tillendon");

        }

    }

    /**
     on Input Change we need to resize and reposition all available Timer lines
     */
    function changeTimerInputs() {
        var li = jQuery(this).closest("li"),
            sortLayerID = li.attr("id"),
            serial = getSerialFromSortID(sortLayerID);
        objLayer = getLayer(serial),
            iwrapper = jQuery(this).closest('.layer_sort_inputs'),
            times = iwrapper.find('.sortbox_time'),
            timee = iwrapper.find('.sortbox_timeend');

        if (Number(timee.val()) < Number(times.val())) {
            timee.val((parseInt(times.val(), 0) + 1000 + objLayer.speed + objLayer.endspeed));
        }

        objLayer.time = Number(times.val());
        objLayer.realEndTime = Number(timee.val());
        checkTillSlideEnd(li, objLayer);
        setCurTimer(li.find('.tl-fullanim'));
        jQuery('#layer_endtime').val((objLayer.realEndTime - objLayer.endSpeedFinal));
    }

    /**
     * update timeline of current layer
     */
    function updateCurrentLayerTimeline() {

        jQuery('#sortlist').find('.tl-fullanim').each(function () {
            setCurTimer(jQuery(this));
        });

    }

    /**
     Set the Current Timer Line to Position end start/end time should be set as well
     */
    function setCurTimer(timer) {

        var li = timer.closest("li"),
            sortLayerID = li.attr("id"),
            serial = getSerialFromSortID(sortLayerID);
        objLayer = getLayer(serial);

        var tl = li.find('.timeline'),
            tw = tl.width(),
            dragfull = li.find('.tl-fullanim'),
            dragstart = dragfull.find('.tl-startanim'),
            dragend = dragfull.find('.tl-endanim'),
            ft = g_slideTime;
        if (objLayer.realEndTime == "undefined" || objLayer.realEndTime == undefined)
            objLayer = getLayerExtendedParams(objLayer);

        dragfull.css({
            width: ((objLayer.realEndTime - objLayer.time) / ft) * 100 + "%",
            left: ((objLayer.time) / ft) * 100 + "%"
        });

        dragstart.css({width: (objLayer.speed / ft) * tw + "px"});
        dragend.css({width: (objLayer.endspeed / ft) * tw + "px"});

        checkTillSlideEnd(li, objLayer);

        jQuery('#layer_endtime').val((objLayer.realEndTime - objLayer.endSpeedFinal));
    }

    /**
     * update layer text field
     */
    function updateLayerTextField(event, timerobj, txt) {
    	
        var li = timerobj.closest("li");
        txt = getSortboxText(txt);
        li.find('.timer-layer-text').html(txt);
        
    }
    
    /**
     Update the Current Timelines
     */
    function updateCurTimer(event, timer) {

        var li = timer.closest("li"),
            sortLayerID = li.attr("id"),
            serial = getSerialFromSortID(sortLayerID),
            objLayer = getLayer(serial),
            l = timer.position().left,
            w = timer.width(),
            tl = li.find('.timeline'),
            tw = tl.width(),
            dragstart = tl.find('.tl-startanim'),
            dragend = tl.find('.tl-endanim');

        objLayer = getLayerExtendedParams(objLayer);


        if (l + w > tw) timer.css({left: (tw - w)});
        if (l < 0) timer.css({left: "0px"});
        if (w > tw) timer.width(tw);

        var ft = g_slideTime,
            ns = Math.round(((l / tl.width()) * ft) / 50) * 50,
            ne = ns + Math.round(((w / tl.width()) * ft) / 50) * 50,
            dif = ne - ns;

        if (ne > ft) {
            ne = ft;
            ns = ne - dif;
        }

        if (ns < 0) ns = 0;

        li.find('.sortbox_time').val(ns);
        li.find('.sortbox_timeend').val(ne);

        if (event == "stop") {
            timer.css({
                left: (timer.position().left / tw) * 100 + "%",
                width: (timer.width() / tw) * 100 + "%"
            })
        }


        dragstart.css({width: (objLayer.speed / ft) * tw + "px"});
        dragend.css({width: (objLayer.endspeed / ft) * tw + "px"});

        objLayer.endTimeFinal = ne - objLayer.endSpeedFinal;
        objLayer.endtime = ne - objLayer.endSpeedFinal;
        objLayer.realEndTime = ne;
        objLayer.time = ns;
        objLayer.timeLast = objLayer.endTimeFinal;


        jQuery('#layer_endtime').val((objLayer.realEndTime - objLayer.endSpeedFinal));

        checkTillSlideEnd(li, objLayer);


    }

    /**
     Show / HIde The Timelines
     */
    function showHideTimeines() {
        /* HIDE / SHOW  TIMELINES */

        jQuery('#button_sort_timing').click(function () {
            var bst = jQuery(this);
            if (bst.hasClass("off")) {
                bst.removeClass("off");
                bst.find('.onoff').html('- on');
                punchgs.TweenLite.to(jQuery('#sortlist .timeline'), 0.5, {autoAlpha: 0.5, overwrite: "auto"});
            } else {
                punchgs.TweenLite.to(jQuery('#sortlist .timeline'), 0.5, {autoAlpha: 0, overwrite: "auto"});
                bst.addClass("off");
                bst.find('.onoff').html('- off');
            }
        })

    }


    /**
     *
     * delete layer from sortbox
     */
    function deleteLayerFromSortbox(serial) {
        var sortboxLayer = getHtmlSortItemFromSerial(serial);
        sortboxLayer.remove();
    }

    /**
     *
     * unselect all items in sortbox
     */
    function unselectSortboxItems() {
        jQuery("#sortlist li").removeClass("ui-state-hover").addClass("ui-state-default");
    }


    /**
     * update layers order from sortbox elements
     */
    function updateOrderFromSortbox() {

        var arrSortLayers = jQuery("#sortlist").sortable("toArray");

        for (var i = 0; i < arrSortLayers.length; i++) {
            var sortID = arrSortLayers[i];
            var serial = getSerialFromSortID(sortID);
            var objUpdate = {order: i};
            updateLayer(serial, objUpdate);

            //update sortbox order input
            var depth = i + 1;
            jQuery("#" + sortID + " input.sortbox_depth").val(depth);
        }

        //update z-index of the html window by order
        updateZIndexByOrder();
    }

    /**
     * shift order among all the layers, push down all order num beyong the given
     * need to redraw after this function
     */
    function shiftOrder(orderToFree) {

        for (key in arrLayers) {
            var obj = arrLayers[key];
            if (obj.order >= orderToFree) {
                obj.order = Number(obj.order) + 1;
                arrLayers[key] = obj;
            }
        }
    }


    /**
     * get sortbox text from layer html
     */
    function getSortboxText(text) {
        sorboxTextSize = 20;
        var textSortbox = UniteAdminRev.stripTags(text);

        //if no content - escape html
        if (textSortbox.length < 2)
            textSortbox = UniteAdminRev.htmlspecialchars(text);

        //short text
        if (textSortbox.length > sorboxTextSize)
            textSortbox = textSortbox.slice(0, sorboxTextSize) + "...";

        return (textSortbox);
    }

    /**
     *
     * redraw the sortbox
     */
    function redrawSortbox(mode) {

        if (mode == undefined)
            mode = sortMode;

        emptySortbox();

        var layers_array = getLayersSorted("depth");

        if (layers_array.length == 0)
            return (false);

        for (var i = 0; i < layers_array.length; i++) {
            var objLayer = layers_array[i];

            addToSortbox(objLayer.serial, objLayer);
        }


        if (selectedLayerSerial != -1)
            setSortboxItemSelected(selectedLayerSerial);

    }


    /**
     * remove all from sortbox
     */
    function emptySortbox() {
        jQuery("#sortlist").html("");
    }

    /**
     *
     * update sortbox text from object
     */
    function updateHtmlSortboxFromObject(serial) {
        if (!serial)
            serial = selectedLayerSerial;

        var objLayer = getLayer(serial);

        if (!objLayer)
            return (false);

        var htmlSortItem = getHtmlSortItemFromSerial(serial);

        if (!htmlSortItem)
            return (false);

        var sortboxText = getSortboxText(objLayer.text);
        htmlSortItem.children(".sortbox_text").text(sortboxText);
    }

    /**
     * on sortbox sorted event.
     */
    function onSortboxSorted() {
        updateOrderFromSortbox();

    }


//======================================================
//			Sortbox Functions End
//======================================================


//======================================================
//			Time Functions
//======================================================
    function _________TIME___________(){}

    /**
     * get next available time
     */
    function getNextTime() {
        var maxTime = 0;

        //get max time
        for (key in arrLayers) {
            var layer = arrLayers[key];

            layerTime = (layer.time) ? Number(layer.time) : 0;

            if (layerTime > maxTime)
                maxTime = layerTime;
        }

        var outputTime;
        if (maxTime == 0)
            outputTime = g_startTime;
        else
            outputTime = Number(maxTime) + Number(g_stepTime);

        return (outputTime);
    }


    /**
     * change time on the layer from the sortbox and reorder
     */
    function onSortboxTimeChange(inputBox) {

        //update the time by inputbox:
        var timeValue = inputBox.val();
        timeValue = Number(timeValue);
        var sortLayerID = inputBox.parent().parent().parent().attr("id");

        var serial = getSerialFromSortID(sortLayerID);
        var objUpdate = {time: timeValue};

        updateLayer(serial, objUpdate);
        validateCurrentLayerTimes();
    }

    /**
     * change time on the layer from the sortbox and reorder
     */
    function onSortboxDepthChange(inputBox) {

        //update the time by inputbox:
        var depthValue = inputBox.val();
        depthValue = Number(depthValue);
        var order = depthValue - 1;

        var sortLayerID = inputBox.parent().attr("id");
        var serial = getSerialFromSortID(sortLayerID);
        var objUpdate = {order: order};

        updateLayer(serial, objUpdate);

        redrawSortbox();

        updateOrderFromSortbox();

    }


    /**
     * order layers by time
     * type can be [time] or [order]
     */
    function getLayersSorted(type) {

        if (type == undefined)
            type = "time";

        //convert to array
        var layers_array = [];
        for (key in arrLayers) {
            var obj = arrLayers[key];
            obj.serial = key;
            layers_array.push(obj);
        }

        if (layers_array.length == 0)
            return (layers_array);

        //sort layers array
        layers_array.sort(function (layer1, layer2) {

            switch (type) {
                case "time":

                    if (Number(layer1.time) == Number(layer2.time)) {
                        if (layer1.order == layer2.order)
                            return (0);

                        if (layer1.order > layer2.order)
                            return (1);

                        return (-1);
                    }

                    if (Number(layer1.time) > Number(layer2.time))
                        return (1);
                    break;
                case "depth":
                    if (layer1.order == layer2.order)
                        return (0);

                    if (layer1.order > layer2.order)
                        return (1);
                    break;
                default:
                    trace("wrong sort type: " + type);
                    break;
            }

            return (-1);
        });

        return (layers_array);

    }


    /**
     * reditribute times between the layers sorted from small to big
     */
    function redistributeTimes() {

        //collect times to array:
        var arrTimes = [];
        for (key in arrLayers)
            arrTimes.push(Number(arrLayers[key].time));

        arrTimes.sort(function (a, b) {
            return a - b
        });	//sort number

        var arrSortLayers = jQuery("#sortlist").sortable("toArray");

        for (var i = 0; i < arrSortLayers.length; i++) {
            var sortID = arrSortLayers[i];
            var serial = getSerialFromSortID(sortID);

            //update time:
            var newTime = arrTimes[i];
            var objUpdate = {time: newTime};
            updateLayer(serial, objUpdate);

            //update input box:
            jQuery("#" + sortID + " input.sortbox_time").val(newTime);
        }

    }


//======================================================
//				Time Functions End
//======================================================


    function _________EVENTS___________(){}

    /**
     *
     * on layer drag event - update layer position
     */
    function onLayerDrag() {

        var layerSerial = getSerialFromID(this.id);
        var htmlLayer = jQuery(this);
        var position = htmlLayer.position();
        var objLayer = getLayer(layerSerial);

        var posTop = Math.round(position.top);
        var posLeft = Math.round(position.left);
        var layerWidth = htmlLayer.outerWidth();
        var totalWidth = container.width();
        var layerHeight = htmlLayer.outerHeight();
        var totalHeight = container.height();

        var updateY, updateX;


        setLayerSelected(layerSerial);

        switch (objLayer.align_hor) {
            case "left":
                updateX = posLeft;
                break;
            case "right":
                updateX = totalWidth - posLeft - layerWidth;
                break;
            case "center":
                updateX = posLeft - (totalWidth - layerWidth) / 2;
                updateX = Math.round(updateX);
                break;
        }

        switch (objLayer.align_vert) {
            case "top":
                updateY = posTop;
                break;
            case "bottom":
                updateY = totalHeight - posTop - layerHeight;
                break;
            case "middle":
                updateY = posTop - (totalHeight - layerHeight) / 2;
                updateY = Math.round(updateY);
                break;
        }

        var objUpdate = {top: updateY, left: updateX, width: layerWidth, height: layerHeight};
        updateLayer(layerSerial, objUpdate);

        //update the position back with the rounded numbers (improve precision)
        updateHtmlLayerPosition(false, htmlLayer, objLayer, objUpdate.top, objUpdate.left, "left", "top");

        //update bottom fields (only if selected)
        if (isLayerSelected(layerSerial))
            updateLayerFormFields(layerSerial);
    }


    /**
     * move some layer
     */
    function moveLayer(serial, dir, step) {
        var layer = getLayer(serial);

        if (!layer)
            return (false);

        switch (dir) {
            case "down":
                arrLayers[serial].top += step;
                break;
            case "up":
                arrLayers[serial].top -= step;
                break;
            case "right":
                arrLayers[serial].left += step;
                break;
            case "left":
                arrLayers[serial].left -= step;
                break;
            default:
                UniteAdminRev.showErrorMessage("wrong direction: " + dir);
                return (false);
                break;
        }

        updateHtmlLayersFromObject(serial);

        if (isLayerSelected(serial))
            updateLayerFormFields(serial);
    }



    function _________TIMELINE___________(){}


    /**
     * get some calculations like real end time
     */
    function getLayerExtendedParams(layer) {

        var endSpeed = layer.endspeed;
        if (!endSpeed)
            endSpeed = layer.speed;

        endSpeed = Number(endSpeed);

        var endTime = layer.endtime;


        var realEndTime;

        if (!endTime || endTime == undefined || endTime == "") {	//end time does not given
            endTime = g_slideTime - Number(layer.speed);
            realEndTime = g_slideTime;
        } else {	//end time given
            realEndTime = Number(endTime) + Number(endSpeed);
        }


        layer.endTimeFinal = Number(endTime); 	 //time caption stay - without end transition
        layer.endSpeedFinal = Number(endSpeed);
        layer.realEndTime = Number(realEndTime); //time with end transition

        layer.timeLast = layer.realEndTime - layer.time;	//time that the whole caption last

        return (layer);
    }


    
    function _________SCALE___________(){}

    /**
     * calculate image height/width
     */
    function scaleImage() {


        jQuery("#layer_scaleX").change(function () {
            if (jQuery("#layer_proportional_scale").is(":checked"))
                scaleProportional(true);
            else
                scaleNormal();
        });

        jQuery("#layer_scaleY").change(function () {
            if (jQuery("#layer_proportional_scale").is(":checked"))
                scaleProportional(false);
            else
                scaleNormal();
        });

        jQuery("#layer_proportional_scale").click(function () {
            var serial = selectedLayerSerial;
            var layer = jQuery("#slide_layer_" + serial);


            if (jQuery(this).is(":checked")) {
                scaleProportional(true);
                var aspectratio = true;
            } else {
                scaleNormal();
                var aspectratio = false;
            }

            layer.resizable("destroy").resizable({
                aspectRatio: aspectratio,
                resize: function (event, ui) {

                    ui.element.find('img').css({width: "100%", height: "100%"});
                    jQuery('#layer_scaleX').val(ui.size.width);
                    jQuery('#layer_scaleY').val(ui.size.height);
                },
                stop: function (event, ui) {
                    t.updateLayerFromFields();
                }
            });


        });


        jQuery("#reset-scale").click(function () {

            resetImageDimensions();
            jQuery("#layer_proportional_scale").attr('checked', false);
            jQuery("#layer_scaleX_text").html(jQuery("#layer_scaleX_text").data("textnormal")).css("width", "10px");
            jQuery("#layer_scaleX").val("");
            jQuery("#layer_scaleY").val("");

            jQuery("#slide_layer_" + selectedLayerSerial + " img").css("width", "");
            jQuery("#slide_layer_" + selectedLayerSerial + " img").css("height", "");
            t.updateLayerFromFields();
        });

    }


    /**
     * scale proportional
     */
    function scaleProportional(useX) {
        var serial = selectedLayerSerial;

        resetImageDimensions();

        var imgObj = new Image();
        imgObj.src = jQuery("#slide_layer_" + serial + " img").attr("src");

        if (useX) {
            var x = parseInt(jQuery("#layer_scaleX").val());
            if (isNaN(x)) x = imgObj.width;
            var y = Math.round(100 / imgObj.width * x / 100 * imgObj.height, 0);
        } else {
            var y = parseInt(jQuery("#layer_scaleY").val());
            if (isNaN(y)) y = imgObj.height;
            var x = Math.round(100 / imgObj.height * y / 100 * imgObj.width, 0);
        }

        jQuery("#slide_layer_" + serial + " img").css("width", x + "px");
        jQuery("#slide_layer_" + serial + " img").css("height", y + "px");

        jQuery("#slide_layer_" + serial).css("width", jQuery("#slide_layer_" + serial + " img").width() + "px");
        jQuery("#slide_layer_" + serial).css("height", jQuery("#slide_layer_" + serial + " img").height() + "px");


        jQuery("#slide_layer_" + serial + " img").css("width", "100%");
        jQuery("#slide_layer_" + serial + " img").css("height", "100%");

        jQuery("#layer_scaleX").val(x);
        jQuery("#layer_scaleY").val(y);
    }


    /**
     * scale normal
     */
    function scaleNormal() {

        var serial = selectedLayerSerial;

        var imgdims = resetImageDimensions();

        jQuery("#slide_layer_" + serial + " img").css("width", jQuery("#layer_scaleX").val() + "px");
        jQuery("#slide_layer_" + serial + " img").css("height", jQuery("#layer_scaleY").val() + "px");

        jQuery("#slide_layer_" + serial).css("width", jQuery("#slide_layer_" + serial + " img").width() + "px");
        jQuery("#slide_layer_" + serial).css("height", jQuery("#slide_layer_" + serial + " img").height() + "px");


        jQuery("#slide_layer_" + serial + " img").css("width", "100%");
        jQuery("#slide_layer_" + serial + " img").css("height", "100%");
    }

    function resetImageDimensions() {
        var imgObj = new Image();
        imgObj.src = jQuery("#slide_layer_" + selectedLayerSerial + " img").attr("src");

        jQuery("#slide_layer_" + selectedLayerSerial).css("width", imgObj.width + "px");
        jQuery("#slide_layer_" + selectedLayerSerial).css("height", imgObj.height + "px");

        var imgdims = {width: imgObj.width, height: imgObj.height};
        return imgdims;
    }


    /**
     * get general layer params
     */
    this.getLayerGeneralParamsStatus = function () {
        return layerGeneralParamsStatus;
    }
    
    
    function _________MAIN_BACKGROUND___________(){}

    function initBackgroundFunctions() {

        jQuery('#slide_bg_fit').change(function () {
            if (jQuery(this).val() == 'percentage') {
            	
            	jQuery('#bg_fit_procent_row').show();
                
            	jQuery('input[name="bg_fit_x"]').show();
                jQuery('input[name="bg_fit_y"]').show();
                
                jQuery('#divbgholder').css('background-size', jQuery('input[name="bg_fit_x"]').val() + '% ' + jQuery('input[name="bg_fit_y"]').val() + '%');
            } else {
            	jQuery('#bg_fit_procent_row').hide();
            	
                jQuery('input[name="bg_fit_x"]').hide();
                jQuery('input[name="bg_fit_y"]').hide();

                jQuery('#divbgholder').css('background-size', jQuery(this).val());
            }


            if (jQuery(this).val() == 'contain') {
                //jQuery('#divLayers-wrapper').css('maxWidth', jQuery('#divbgholder').css('minWidth'));
            } else {
                //jQuery('#divLayers-wrapper').css('maxWidth', '100%');
            }
        });
        
        
        //-----------
        
        function updateBGFit(){
        	var fitX = jQuery('input[name="bg_fit_x"]').val();
        	var fitY = jQuery('input[name="bg_fit_y"]').val();
        	fitX = fitX.replace("%","");
        	fitY = fitY.replace("%","");
        	
        	if(fitX != "auto")
        		fitX += "%";
        	
        	if(fitY != "auto")
        		fitY += "%";
        	
            jQuery('#divbgholder').css('background-size',fitX+" "+fitY );
        }
        
        jQuery('input[name="bg_fit_x"]').change(updateBGFit);
        jQuery('input[name="bg_fit_y"]').change(updateBGFit);
        
        
        jQuery('#slide_bg_fit').change();

        
        jQuery('#slide_bg_position').change(function () {
            if (jQuery(this).val() == 'percentage') {
                jQuery('input[name="bg_position_x"]').show();
                jQuery('input[name="bg_position_y"]').show();
                
                updateBGFit();
                
            } else {
                jQuery('input[name="bg_position_x"]').hide();
                jQuery('input[name="bg_position_y"]').hide();

                jQuery('#divbgholder').css('background-position', jQuery(this).val());
            }
        });

        jQuery('input[name="bg_position_x"]').change(function () {
            jQuery('#divbgholder').css('background-position', jQuery('input[name="bg_position_x"]').val() + '% ' + jQuery('input[name="bg_position_y"]').val() + '%');
        });

        jQuery('input[name="bg_position_y"]').change(function () {
            jQuery('#divbgholder').css('background-position', jQuery('input[name="bg_position_x"]').val() + '% ' + jQuery('input[name="bg_position_y"]').val() + '%');
        });

        jQuery('#slide_bg_repeat').change(function () {
            jQuery('#divbgholder').css('background-repeat', jQuery(this).val());
        });

        jQuery('input[name="kenburn_effect"]').change(function () {
            if (jQuery(this).val() == "on") {
                jQuery('#kenburn_wrapper').show();
                jQuery('#bg-position-lbl').hide();
                jQuery('#bg-start-position-wrapper').children().appendTo(jQuery('#bg-start-position-wrapper-kb'));
                jQuery('#bg-setting-wrap').hide();

                jQuery('#divbgholder').css('background-repeat', '');
                jQuery('#divbgholder').css('background-position', '');
                jQuery('#divbgholder').css('background-size', '');

                jQuery('input[name="kb_start_fit"]').change();

               //jQuery('#divLayers-wrapper').css('maxWidth', 'none');

                jQuery('#slide_bg_position').change();
            } else {
                jQuery('#kenburn_wrapper').hide();
                jQuery('#bg-position-lbl').show();
                jQuery('#bg-start-position-wrapper-kb').children().appendTo(jQuery('#bg-start-position-wrapper'));
                jQuery('#bg-setting-wrap').show();

                jQuery('#slide_bg_repeat').change();
                jQuery('#slide_bg_position').change();
                jQuery('#slide_bg_fit').change();

                if (jQuery('#slide_bg_fit').val() == 'contain') {
                    //jQuery('#divLayers-wrapper').css('maxWidth', jQuery('#divbgholder').css('minWidth'));
                } else {
                    //jQuery('#divLayers-wrapper').css('maxWidth', '100%');
                }


            }
        });
        jQuery('input[name="kenburn_effect"]:checked').change();


        jQuery('#slide_bg_end_position').change(function () {
            if (jQuery(this).val() == 'percentage') {
                jQuery('input[name="bg_end_position_x"]').show();
                jQuery('input[name="bg_end_position_y"]').show();
            } else {
                jQuery('input[name="bg_end_position_x"]').hide();
                jQuery('input[name="bg_end_position_y"]').hide();
            }
        });


        jQuery('input[name="kb_start_fit"]').change(function () {
            var fitVal = parseInt(jQuery(this).val());
            var limg = new Image();
            limg.onload = function () {
                calculateKenBurnScales(fitVal, limg.width, limg.height, jQuery('#divbgholder'));
            }

            var urlImage = '';
            if (jQuery('#radio_back_image').is(':checked'))
                urlImage = jQuery("#image_url").val();
            else if (jQuery('#radio_back_external').is(':checked'))
                urlImage = jQuery("#slide_bg_external").val();

            if (urlImage != '') {
                limg.src = urlImage;
            }

        });

        /**
         * calc ken burnes scales
         */
        function calculateKenBurnScales(proc, owidth, oheight, opt) {
            var ow = owidth;
            var oh = oheight;


            var factor = (opt.width() / ow);
            var factorh = (opt.height() / oh);

            //  if (factor>=1) {

            var nheight = oh * factor;
            proc = proc + "%";
            var hfactor = "auto"; //(nheight / opt.height())*proc;
            /*} else {

             var nwidth = "auto" //ow * factorh;
             var hfactor = proc+"%";
             proc = "auto";
             //proc = (nwidth / opt.width()) * proc;

             }*/

            jQuery('#divbgholder').css('background-size', proc + " " + hfactor);
        }


        jQuery(window).resize(function () {
            if (jQuery('input[name="kenburn_effect"]:checked').val() == 'on') {
                var fitVal = parseInt(jQuery('input[name="kb_start_fit"]').val());
                var limg = new Image();
                limg.onload = function () {
                    calculateKenBurnScales(fitVal, limg.width, limg.height, jQuery('#divbgholder'));
                }

                var urlImage = '';
                if (jQuery('#radio_back_image').is(':checked'))
                    urlImage = jQuery("#image_url").val();
                else if (jQuery('#radio_back_external').is(':checked'))
                    urlImage = jQuery("#slide_bg_external").val();

                if (urlImage != '') {
                    limg.src = urlImage;
                }

            }
        });
    }

    function _________LOOP___________(){}
    
    function initLoopFunctions() {

        jQuery('select[name="layer_loop_animation"]').change(function () {
            showHideLoopFunctions();
        });

        jQuery('#layer_static_start').change(function () {
            changeEndStaticFunctions();
        });
    }

    /**
     * show hide loops functions
     */
    function showHideLoopFunctions() {

        jQuery('select[name="layer_loop_animation"]').each(function () {
            jQuery("#layer_easing_wrapper").hide();
            jQuery("#layer_speed_wrapper").hide();
            jQuery("#layer_degree_wrapper").hide();
            jQuery("#layer_origin_wrapper").hide();
            jQuery("#layer_x_wrapper").hide();
            jQuery("#layer_y_wrapper").hide();
            jQuery("#layer_zoom_wrapper").hide();
            jQuery("#layer_angle_wrapper").hide();
            jQuery("#layer_radius_wrapper").hide();

            switch (jQuery(this).val()) {
                case 'none':
                    break;
                case 'rs-pendulum':
                    jQuery("#layer_easing_wrapper").show();
                    jQuery("#layer_speed_wrapper").show();
                    jQuery("#layer_degree_wrapper").show();
                    jQuery("#layer_origin_wrapper").show();
                    break;
                case 'rs-rotate':
                    jQuery("#layer_easing_wrapper").show();
                    jQuery("#layer_speed_wrapper").show();
                    jQuery("#layer_degree_wrapper").show();
                    jQuery("#layer_origin_wrapper").show();
                    break;

                case 'rs-slideloop':
                    jQuery("#layer_easing_wrapper").show();
                    jQuery("#layer_speed_wrapper").show();
                    jQuery("#layer_x_wrapper").show();
                    jQuery("#layer_y_wrapper").show();
                    break;
                case 'rs-pulse':
                    jQuery("#layer_easing_wrapper").show();
                    jQuery("#layer_speed_wrapper").show();
                    jQuery("#layer_zoom_wrapper").show();
                    break;
                case 'rs-wave':
                    jQuery("#layer_speed_wrapper").show();
                    jQuery("#layer_angle_wrapper").show();
                    jQuery("#layer_radius_wrapper").show();
                    jQuery("#layer_origin_wrapper").show();
                    break;
            }
        });
    }

    /**
     * change end static functions
     */
    function changeEndStaticFunctions() {

        jQuery('#layer_static_start').each(function () {
            var cur_att = parseInt(jQuery(this).val());
            var cur_end = jQuery('#layer_static_end option:selected').val();
            var go_max_up_to = parseInt(jQuery('#layer_static_end option:last-child').val());
            var go_up_to = parseInt(jQuery('#layer_static_start option:last-child').val()) + 1;

            jQuery('#layer_static_end').empty();

            for (var cur = cur_att + 1; cur <= go_max_up_to; cur++) {
                jQuery("#layer_static_end").append('<option value="' + cur + '">' + cur + '</option>');
            }

            jQuery("#layer_static_end option[value='" + cur_end + "']").attr('selected', 'selected');
        });
    }

    jQuery(document).ready(function(){
        removebtnShow();
        hideAccordion();
        
        jQuery(document).on("click", function(){
        	removebtnShow();
            hideAccordion();
        });
        
        jQuery('.unselect_layer').on('click', function(e){
            unselectLayers();
            e.preventDefault();
        });
        
        });
  }


