openproject/app/assets/javascripts/vendor/enjoyhint.js

var EnjoyHint;

(function ($) {
    EnjoyHint = function (_options) {
        var $event_element;
        var that = this;

        var defaults = {

            onStart: function () {

            },

            onEnd: function () {

            },

            onSkip: function () {

            },

            onNext: function () {

            }
        };

        var options = $.extend(defaults, _options);
        var data = [];
        var current_step = 0;

        $body = $('body');


        /********************* PRIVATE METHODS ***************************************/

        var init = function () {

            if ($('.enjoyhint')) {

                $('.enjoyhint').remove();
            }

            $body.css({'overflow':'hidden'});
            $body.addClass('enjoyhint-tutorial');

            $(document).on("touchmove",lockTouch);

            $body.enjoyhint({

                onNextClick: function () {

                    if (data[current_step].onNext && typeof data[current_step].onNext === 'function') {
                        data[current_step].onNext();
                    }

                    nextStep();
                },

                onSkipClick: function () {

                    options.onSkip();
                    skipAll();
                }
            });
        };

        var lockTouch = function(e) {

            e.preventDefault();
        };

        var destroyEnjoy = function () {

            $('.enjoyhint').remove();
            $body.css({'overflow':'auto'});
            $body.removeClass('enjoyhint-tutorial');
            $(document).off("touchmove", lockTouch);
        };

        that.clear = function(){

            var $nextBtn = $('.enjoyhint_next_btn');
            var $skipBtn = $('.enjoyhint_skip_btn');

            $nextBtn.removeClass(that.nextUserClass);
            $nextBtn.text("Next");
            $skipBtn.removeClass(that.skipUserClass);
            $skipBtn.text("Skip");
        };

        var stepAction = function () {

            if (!(data && data[current_step])) {

                $body.enjoyhint('hide');
                options.onEnd();
                destroyEnjoy();
                return;
            }

            options.onNext();

            var $enjoyhint = $('.enjoyhint');
            var step_data = data[current_step];

            // Remove all classes
            $enjoyhint.removeClass();
            $enjoyhint.addClass("enjoyhint enjoyhint-step-" + (current_step + 1));
            if (step_data.clickable) $enjoyhint.addClass('-clickable');
            if (step_data.containerClass) $enjoyhint.addClass(step_data.containerClass);


            if (step_data.onBeforeStart && typeof step_data.onBeforeStart === 'function') {

                step_data.onBeforeStart();
            }

            // Allow a wait function in as timout parameter
            if(step_data.timeout && typeof step_data.timeout === 'function') {
                step_data.timeout().then(function() {
                    toggleNext();
                })
            } else {
                var timeout = step_data.timeout || 0;
                setTimeout(function () {
                    toggleNext();
                }, timeout);
            }

            function toggleNext() {
                if (!step_data.selector) {

                    for (var prop in step_data) {

                        if (step_data.hasOwnProperty(prop) && prop.split(" ")[1]) {

                            step_data.selector = prop.split(" ")[1];
                            step_data.event = prop.split(" ")[0];

                            if (prop.split(" ")[0] == 'next' || prop.split(" ")[0] == 'auto' || prop.split(" ")[0] == 'custom') {

                                step_data.event_type = prop.split(" ")[0];
                            }

                            step_data.description = step_data[prop];
                        }
                    }
                }

                setTimeout(function () {

                    that.clear();
                }, 250);

                $(document.body).scrollTop(step_data.selector, step_data.scrollAnimationSpeed || 250, {offset: -100});

                setTimeout(function () {

                    var $element = $(step_data.selector);
                    var event = makeEventName(step_data.event);

                    $body.enjoyhint('show');
                    $body.enjoyhint('hide_next');
                    $event_element = $element;

                    if (step_data.event_selector) {

                        $event_element = $(step_data.event_selector);
                    }

                    if (!step_data.event_type && step_data.event == "key") {

                        $element.keydown(function (event) {

                            if (event.which == step_data.keyCode) {

                                current_step++;
                                stepAction();
                            }
                        });
                    }

                    if (step_data.showNext == true) {

                        $body.enjoyhint('show_next');
                    }

                    if (step_data.showSkip == false) {

                        $body.enjoyhint('hide_skip');
                    } else {

                        $body.enjoyhint('show_skip');
                    }

                    if (step_data.showSkip == true) {

                    }

                    if (step_data.nextButton) {

                        var $nextBtn = $('.enjoyhint_next_btn');

                        $nextBtn.addClass(step_data.nextButton.className || "");
                        $nextBtn.text(step_data.nextButton.text || "Next");
                        that.nextUserClass = step_data.nextButton.className;
                    }

                    if (step_data.skipButton) {

                        var $skipBtn = $('.enjoyhint_skip_btn');

                        $skipBtn.addClass(step_data.skipButton.className || "");
                        $skipBtn.text(step_data.skipButton.text || "Skip");
                        that.skipUserClass = step_data.skipButton.className;
                    }

                    if (step_data.event_type) {

                        switch (step_data.event_type) {

                            case 'auto':

                                $element[step_data.event]();

                                switch (step_data.event) {

                                    case 'click':
                                        break;
                                }

                                current_step++;
                                stepAction();

                                return;
                                break;

                            case 'custom':

                                on(step_data.event, function () {

                                    current_step++;
                                    off(step_data.event);
                                    stepAction();
                                });

                                break;

                            case 'next':

                                $body.enjoyhint('show_next');
                                break;
                        }

                    } else {

                        $event_element.on(event, function (e) {

                            if (step_data.keyCode && e.keyCode != step_data.keyCode) {

                                return;
                            }

                            current_step++;
                            $(this).off(event);

                            stepAction(); // clicked
                        });
                    }

                    var max_habarites = Math.max($element.outerWidth(), $element.outerHeight());
                    var radius = step_data.radius || Math.round(max_habarites / 2) + 5;
                    var offset = $element.offset();
                    var w = $element.outerWidth();
                    var h = $element.outerHeight();
                    var shape_margin = (step_data.margin !== undefined) ? step_data.margin : 10;

                    var coords = {
                        x: offset.left + Math.round(w / 2),
                        y: offset.top + Math.round(h / 2) - $(document).scrollTop()
                    };

                    var shape_data = {
                        enjoyHintElementSelector: step_data.selector,
                        center_x: coords.x,
                        center_y: coords.y,
                        text: step_data.description,
                        top: step_data.top,
                        bottom: step_data.bottom,
                        left: step_data.left,
                        right: step_data.right,
                        margin: step_data.margin,
                        scroll: step_data.scroll
                    };

                    if (step_data.shape && step_data.shape == 'circle') {

                        shape_data.shape = 'circle';
                        shape_data.radius = radius;
                    } else {

                        shape_data.radius = 0;
                        shape_data.width = w + shape_margin;
                        shape_data.height = h + shape_margin;
                    }

                    $body.enjoyhint('render_label_with_shape', shape_data, that.stop);
                }, step_data.scrollAnimationSpeed + 20 || 270);
            }
        };

        var nextStep = function() {

            current_step++;
            stepAction();
        };

        var skipAll = function() {

            var step_data = data[current_step];
            var $element = $(step_data.selector);

            off(step_data.event);
            $element.off(makeEventName(step_data.event));

            destroyEnjoy();
        };

        var makeEventName = function (name, is_custom) {

            return name + (is_custom ? 'custom' : '') + '.enjoy_hint';
        };

        var on = function (event_name, callback) {

            $body.on(makeEventName(event_name, true), callback);
        };

        var off = function (event_name) {

            $body.off(makeEventName(event_name, true));
        };


        /********************* PUBLIC METHODS ***************************************/

        window.addEventListener('resize', function() {

            if ($event_element != null) {

                $body.enjoyhint('redo_events_near_rect', $event_element[0].getBoundingClientRect());
            }
        });

        that.stop = function() {

            skipAll();
        };

        that.reRunScript = function(cs) {

            current_step = cs;
            stepAction();
        };

        that.runScript = function () {

            current_step = 0;
            options.onStart();
            stepAction();
        };

        that.resumeScript = function () {

            stepAction();
        };

        that.setCurrentStep = function(cs) {

            current_step = cs;
        };

        that.getCurrentStep = function () {

            return current_step;
        };

        that.trigger = function (event_name) {

            switch (event_name) {

                case 'next':

                    nextStep();
                    break;

                case 'skip':

                    skipAll();
                    break;
            }
        };

        that.setScript = function (_data) {

            if (_data) {

                data = _data;
            }
        };

        //support deprecated API methods
        that.set = function (_data) {

            that.setScript(_data);
        };

        that.setSteps = function (_data) {

            that.setScript(_data);
        };

        that.run = function () {

            that.runScript();
        };

        that.resume = function () {

            that.resumeScript();
        };

        init();
    };;CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) {

        if (w < 2 * r) r = w / 2;
        if (h < 2 * r) r = h / 2;
        this.beginPath();
        this.moveTo(x + r, y);
        this.arcTo(x + w, y, x + w, y + h, r);
        this.arcTo(x + w, y + h, x, y + h, r);
        this.arcTo(x, y + h, x, y, r);
        this.arcTo(x, y, x + w, y, r);
        this.closePath();
        return this;
    };

    (function ($) {

        var that;

        var originalLabelLeft, originalLabelTop;
        var originalArrowLeft, originalArrowTop;
        var originalCenterX, originalCenterY;
        var originalSkipbuttonLeft, originalSkipbuttonTop;
        var prevWindowWidth, prevWindowHeight;
        var originalWidth = window.innerWidth, originalHeight = window.innerHeight;

        var methods = {

            init: function (options) {

                return this.each(function () {

                    var defaults = {

                        onNextClick: function () {

                        },
                        onSkipClick: function () {

                        },

                        animation_time: 800
                    };

                    this.enjoyhint_obj = {};
                    that = this.enjoyhint_obj;

                    that.resetComponentStuff = function() {

                        originalLabelLeft = null;
                        originalLabelTop = null;
                        originalArrowLeft = null;
                        originalArrowTop = null;
                        originalCenterX = null;
                        originalCenterY = null;
                        originalSkipbuttonLeft = null;
                        originalSkipbuttonTop = null;
                        prevWindowWidth = null;
                        prevWindowHeight = null;
                        originalWidth = window.innerWidth;
                        originalHeight = window.innerHeight;
                    };


                    var $that = $(this);
                    that.options = jQuery.extend(defaults, options);

                    //general classes
                    that.gcl = {

                        chooser: 'enjoyhint'
                    };

                    // classes
                    that.cl = {

                        enjoy_hint: 'enjoyhint',
                        hide: 'enjoyhint_hide',
                        disable_events_element: 'enjoyhint_disable_events',
                        btn: 'enjoyhint_btn',
                        skip_btn: 'enjoyhint_skip_btn',
                        close_btn: 'enjoyhint_close_btn',
                        next_btn: 'enjoyhint_next_btn',
                        main_canvas: 'enjoyhint_canvas',
                        main_svg: 'enjoyhint_svg',
                        svg_wrapper: 'enjoyhint_svg_wrapper',
                        svg_transparent: 'enjoyhint_svg_transparent',
                        kinetic_container: 'kinetic_container'
                    };

                    function makeSVG(tag, attrs) {

                        var el = document.createElementNS('http://www.w3.org/2000/svg', tag);

                        for (var k in attrs) {

                            el.setAttribute(k, attrs[k]);
                        }

                        return el;
                    }


                    // =======================================================================
                    // ========================---- enjoyhint ----==============================
                    // =======================================================================

                    that.canvas_size = {

                        w: $(window).width()*1.4,
                        h: $(window).height()*1.4
                    };

                    var canvas_id = "enj_canvas";

                    that.enjoyhint = $('<div>', {'class': that.cl.enjoy_hint + ' ' + that.cl.svg_transparent}).appendTo($that);
                    that.enjoyhint_svg_wrapper = $('<div>', {'class': that.cl.svg_wrapper + ' ' + that.cl.svg_transparent}).appendTo(that.enjoyhint);
                    that.$stage_container = $('<div id="' + that.cl.kinetic_container + '">').appendTo(that.enjoyhint);
                    that.$canvas = $('<canvas id="' + canvas_id + '" width="' + that.canvas_size.w + '" height="' + that.canvas_size.h + '" class="' + that.cl.main_canvas + '">').appendTo(that.enjoyhint);
                    that.$svg = $('<svg width="' + that.canvas_size.w + '" height="' + that.canvas_size.h + '" class="' + that.cl.main_canvas + ' ' + that.cl.main_svg + '">').appendTo(that.enjoyhint_svg_wrapper);

                    var defs = $(makeSVG('defs'));
                    var marker = $(makeSVG('marker', {id: "arrowMarker", viewBox: "0 0 36 21", refX: "21", refY: "10", markerUnits: "strokeWidth", orient: "auto", markerWidth: "16", markerHeight: "12"}));
                    var polilyne = $(makeSVG('path', {style: "fill:none; stroke:rgb(255,255,255); stroke-width:2", d: "M0,0 c30,11 30,9 0,20"}));

                    defs.append(marker.append(polilyne)).appendTo(that.$svg);

                    that.kinetic_stage = new Kinetic.Stage({
                        container: that.cl.kinetic_container,
                        width: that.canvas_size.w,
                        height: that.canvas_size.h,
                        scaleX: 1
                    });

                    that.layer = new Kinetic.Layer();
                    that.rect = new Kinetic.Rect({
                        fill: 'rgba(0,0,0,0.6)',
                        width: that.canvas_size.w,
                        height: that.canvas_size.h
                    });

                    var $top_dis_events = $('<div>', {'class': that.cl.disable_events_element}).appendTo(that.enjoyhint);
                    var $bottom_dis_events = $top_dis_events.clone().appendTo(that.enjoyhint);
                    var $left_dis_events = $top_dis_events.clone().appendTo(that.enjoyhint);
                    var $right_dis_events = $top_dis_events.clone().appendTo(that.enjoyhint);

                    var stopPropagation = function(e) {

                        e.stopImmediatePropagation();
                    };

                    $("button").focusout(stopPropagation);
                    $top_dis_events.click(stopPropagation);
                    $bottom_dis_events.click(stopPropagation);
                    $left_dis_events.click(stopPropagation);
                    $right_dis_events.click(stopPropagation);


                    that.$skip_btn = $('<div>', {'class': that.cl.skip_btn}).appendTo(that.enjoyhint).html('Skip').click(function (e) {

                        that.hide();
                        that.options.onSkipClick();
                    });
                    that.$next_btn = $('<div>', {'class': that.cl.next_btn}).appendTo(that.enjoyhint).html('Next').click(function (e) {

                        that.options.onNextClick();
                    });

                    that.$close_btn = $('<div>', {'class': that.cl.close_btn}).appendTo(that.enjoyhint).html('').click(function (e) {

                        that.hide();
                        that.options.onSkipClick();
                    });

                    that.$canvas.mousedown(function (e) {

                        $('canvas').css({left: '4000px'});

                        try {
                          var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
                          $('canvas').css({left: '0px'});

                          $(BottomElement).click();
                        } catch (e) {
                          console.error("Failed to click on element from point. " + e);
                        }

                        return false;
                    });


                    var circle_r = 0;
                    var shape_init_shift = 130;

                    that.shape = new Kinetic.Shape({
                        radius: circle_r,
                        center_x: -shape_init_shift,
                        center_y: -shape_init_shift,
                        width: 0,
                        height: 0,
                        sceneFunc: function (context) {

                            var ctx = this.getContext("2d")._context;
                            var pos = this.pos;
                            var def_comp = ctx.globalCompositeOperation;
                            ctx.globalCompositeOperation = 'destination-out';
                            ctx.beginPath();

                            var x = this.attrs.center_x - Math.round(this.attrs.width / 2);
                            var y = this.attrs.center_y - Math.round(this.attrs.height / 2);
                            ctx.roundRect(x, y, this.attrs.width, this.attrs.height, this.attrs.radius);
                            ctx.fillStyle = "red";
                            ctx.fill();

                            ctx.globalCompositeOperation = def_comp;
                        }
                    });

                    that.shape.radius = circle_r;
                    that.layer.add(that.rect);
                    that.layer.add(that.shape);
                    that.kinetic_stage.add(that.layer);

                    $(window).on('resize', function() {

                        if (!($(that.stepData.enjoyHintElementSelector).is(":visible"))) {

                            that.stopFunction();
                            $(window).off('resize');
                            return;
                        }

                        prevWindowWidth = window.innerWidth;
                        prevWindowHeight = window.innerHeight;

                        var boundingClientRect = $(that.stepData.enjoyHintElementSelector)[0].getBoundingClientRect();

                        that.shape.attrs.center_x = Math.round(boundingClientRect.left + boundingClientRect.width / 2);
                        that.shape.attrs.center_y = Math.round(boundingClientRect.top + boundingClientRect.height / 2);
                        that.shape.attrs.width = boundingClientRect.width + 11;
                        that.shape.attrs.height = boundingClientRect.height + 11;

                        var newWidth = window.innerWidth;
                        var newHeight = window.innerHeight;
                        var scaleX = newWidth / originalWidth;
                        var scaleY = newHeight / originalHeight;

                        that.kinetic_stage.setAttr('width', originalWidth * scaleX);
                        that.kinetic_stage.setAttr('height', originalHeight * scaleY);

                        if (that.stepData != null) {

                            prevWindowWidth = window.innerWidth;
                            prevWindowHeight = window.innerHeight;


                            /* Init */

                            if (!originalCenterX) {

                                originalCenterX = that.shape.attrs.center_x;
                                originalCenterY = that.shape.attrs.center_y;
                            }

                            if (!originalArrowLeft) {

                                originalArrowLeft = [];
                                var attr = $('#enjoyhint_arrpw_line').attr('d');
                                originalArrowLeft.push(attr.substr(1).split(',')[0]);
                                originalArrowLeft.push(attr.substr(attr.indexOf('Q') + 1).split(',')[0]);
                                originalArrowLeft.push(attr.split(' ')[2].split(',')[0]);
                                originalArrowTop = [];
                                originalArrowTop.push(attr.split(',')[1].split(' ')[0]);
                                originalArrowTop.push(attr.split(',')[2].split(' ')[0]);
                                originalArrowTop.push(attr.split(',')[3]);
                            }

                            var labelElement = $('.enjoy_hint_label');

                            if (!originalLabelLeft) {

                                originalLabelLeft = labelElement[0].getBoundingClientRect().left;
                                originalLabelTop = labelElement[0].getBoundingClientRect().top;
                            }

                            var skipButton = $('.enjoyhint_skip_btn');

                            if (!originalSkipbuttonLeft) {

                                originalSkipbuttonLeft = skipButton[0].getBoundingClientRect().left;
                                originalSkipbuttonTop = skipButton[0].getBoundingClientRect().top;
                            }


                            /* Resizing label */

                            labelElement.css('left', window.innerWidth / 2 - labelElement.outerWidth() / 2);


                            /* Resizing arrow */

                            var labelRect = labelElement[0].getBoundingClientRect();

                            if (window.innerWidth < 640) {

                                $('#enjoyhint_arrpw_line').hide();
                                labelElement.css('top', window.innerHeight / 2 - labelElement.outerHeight() / 2);
                            } else {

                                $('#enjoyhint_arrpw_line').show();

                                labelElement.css('top', originalLabelTop);

                                var x1, x2, y1, y2;

                                var labelLeftOfShape = labelRect.left + labelRect.width / 2 < that.shape.attrs.center_x;
                                var labelAboveShape = labelRect.top + labelRect.height / 2 < that.shape.attrs.center_y;

                                if (window.innerWidth < 900) {

                                    x1 = Math.round(labelRect.left + (labelRect.width / 2 + 15) * (labelRect.left + labelRect.width / 2 < that.shape.attrs.center_x ? 1 : -1));
                                    y1 = Math.round(labelRect.top + labelRect.height * (labelRect.top + labelRect.height / 2 < that.shape.attrs.center_y ? 1 : -1));
                                    x2 = Math.round(that.shape.attrs.center_x + (that.shape.attrs.radius + 15) * (labelLeftOfShape ? -1 : 1));
                                    y2 = Math.round(that.shape.attrs.center_y);
                                } else {

                                    x1 = Math.round((labelRect.left + (labelRect.width / 2)) + ((labelRect.width / 2 + 15) * (labelLeftOfShape ? 1 : -1)));
                                    y1 = Math.round(labelRect.top + labelRect.height / 2);
                                    x2 = Math.round(that.shape.attrs.center_x);
                                    y2 = Math.round(that.shape.attrs.center_y + (((that.shape.attrs.height / 2) + 15) * (labelAboveShape ? -1 : 1)));
                                }

                                var midX = x1 + (x2 - x1) / 2;
                                var midY = y1 + (y2 - y1) / 2;

                                var bezX = x1 < x2 ? x2 : x1;
                                var bezY = y1 < y2 ? y1 : y2;

                                if (Math.abs(labelRect.left + labelRect.width / 2 - that.shape.attrs.center_x) < 200) {

                                    x1 = x2 = labelRect.left + labelRect.width / 2;
                                    y1 = labelRect.top;
                                    bezX = x1;
                                    bezY = y1;
                                    console.log("ok");
                                }

                                if (window.innerWidth < 900) {

                                    bezX = x1 < x2 ? x1 : x2;
                                    bezY = y1 < y2 ? y2 : y1;
                                }

                                var newCoordsLine = "M%d1,%d2 Q%d3,%d4 %d5,%d6"
                                    .replace("%d1", x1).replace("%d2", y1)
                                    .replace("%d3", bezX).replace("%d4", bezY)
                                    .replace("%d5", x2).replace("%d6", y2);
                                $('#enjoyhint_arrpw_line')[0].setAttribute('d', newCoordsLine);
                            }


                            /* Resizing skip button */

                            var newSkipbuttonLeft = +originalSkipbuttonLeft + (that.shape.attrs.center_x - originalCenterX) / 2;
                            skipButton.css('left', newSkipbuttonLeft < 15 ? 15 : newSkipbuttonLeft);
                            skipButton.css('top', labelRect.top + labelRect.height + 20);
                        }

                        that.rect = new Kinetic.Rect({
                            fill: 'rgba(0,0,0,0.6)',
                            width: window.innerWidth,
                            height: window.innerHeight
                        });

                        that.layer.removeChildren();
                        that.layer.add(that.rect);
                        that.layer.add(that.shape);
                        that.layer.draw();
                        that.kinetic_stage.draw();
                    });

                    var enjoyhint_elements = [
                        that.enjoyhint,
                        $top_dis_events,
                        $bottom_dis_events,
                        $left_dis_events,
                        $right_dis_events
                    ];

                    that.show = function () {

                        that.enjoyhint.removeClass(that.cl.hide);
                    };

                    that.hide = function () {

                        that.enjoyhint.addClass(that.cl.hide);

                        var tween = new Kinetic.Tween({
                            node: that.shape,
                            duration: 0.002,
                            center_x: -shape_init_shift,
                            center_y: -shape_init_shift
                        });

                        tween.play();
                    };

                    that.hide();

                    that.hideNextBtn = function () {

                        that.$next_btn.addClass(that.cl.hide);
                        that.nextBtn = "hide";
                    };

                    that.showNextBtn = function () {

                        that.$next_btn.removeClass(that.cl.hide);
                        that.nextBtn = "show";
                    };

                    that.hideSkipBtn = function () {

                        that.$skip_btn.addClass(that.cl.hide);
                    };

                    that.showSkipBtn = function () {

                        that.$skip_btn.removeClass(that.cl.hide);
                    };

                    that.renderCircle = function (data) {

                        var r = data.r || 0;
                        var x = data.x || 0;
                        var y = data.y || 0;

                        var tween = new Kinetic.Tween({
                            node: that.shape,
                            duration: 0.2,
                            center_x: x,
                            center_y: y,
                            width: r * 2,
                            height: r * 2,
                            radius: r
                        });

                        tween.play();

                        var left = x - r;
                        var right = x + r;
                        var top = y - r;
                        var bottom = y + r;
                        var margin = 20;

                        return {
                            x: x,
                            y: y,
                            left: left,
                            right: right,
                            top: top,
                            bottom: bottom,
                            conn: {
                                left: {
                                    x: left - margin,
                                    y: y
                                },
                                right: {
                                    x: right + margin,
                                    y: y
                                },
                                top: {
                                    x: x,
                                    y: top - margin
                                },
                                bottom: {
                                    x: x,
                                    y: bottom + margin
                                }
                            }
                        };

                    };

                    that.renderRect = function (data, timeout) {

                        var r = data.r || 0;
                        var x = data.x || 0;
                        var y = data.y || 0;
                        var w = data.w || 0;
                        var h = data.h || 0;
                        var margin = 20;

                        var tween = new Kinetic.Tween({
                            node: that.shape,
                            duration: timeout,
                            center_x: x,
                            center_y: y,
                            width: w,
                            height: h,
                            radius: r
                        });

                        tween.play();

                        var half_w = Math.round(w / 2);
                        var half_h = Math.round(h / 2);
                        var left = x - half_w;
                        var right = x + half_w;
                        var top = y - half_h;
                        var bottom = y + half_h;

                        return {
                            x: x,
                            y: y,
                            left: left,
                            right: right,
                            top: top,
                            bottom: bottom,
                            conn: {
                                left: {
                                    x: left - margin,
                                    y: y
                                },
                                right: {
                                    x: right + margin,
                                    y: y
                                },
                                top: {
                                    x: x,
                                    y: top - margin
                                },
                                bottom: {
                                    x: x,
                                    y: bottom + margin
                                }
                            }
                        };
                    };

                    that.renderLabel = function (data) {

                        var x = data.x || 0;
                        that.originalElementX = x;
                        var y = data.y || 0;
                        var text = data.text || 0;

                        var label = that.getLabelElement({
                            x: x,
                            y: y,
                            text: data.text
                        });

                        var label_w = label.width();
                        var label_h = label.height();
                        var label_left = label.offset().left;
                        var label_right = label.offset().left + label_w;
                        var label_top = label.offset().top - $(document).scrollTop();
                        var label_bottom = label.offset().top + label_h;

                        var margin = 10;

                        var conn_left = {
                            x: label_left - margin,
                            y: label_top + Math.round(label_h / 2)
                        };

                        var conn_right = {
                            x: label_right + margin,
                            y: label_top + Math.round(label_h / 2)
                        };

                        var conn_top = {
                            x: label_left + Math.round(label_w / 2),
                            y: label_top - margin
                        };

                        var conn_bottom = {
                            x: label_left + Math.round(label_w / 2),
                            y: label_bottom + margin
                        };

                        label.detach();

                        setTimeout(function () {

                            $('#enjoyhint_label').remove();
                            label.appendTo(that.enjoyhint);
                        }, that.options.animation_time / 2);

                        return {
                            label: label,
                            left: label_left,
                            right: label_right,
                            top: label_top,
                            bottom: label_bottom,
                            conn: {
                                left: conn_left,
                                right: conn_right,
                                top: conn_top,
                                bottom: conn_bottom
                            }

                        };
                    };

                    that.renderArrow = function (data) {

                        if (window.innerWidth >= 640) {

                            var x_from = data.x_from || 0;
                            var y_from = data.y_from || 0;
                            var x_to = data.x_to || 0;
                            var y_to = data.y_to || 0;
                            var by_top_side = data.by_top_side;
                            var control_point_x = 0;
                            var control_point_y = 0;
                            if (by_top_side) {

                                if (y_from >= y_to) {

                                    control_point_y = y_to;
                                    control_point_x = x_from;
                                } else {

                                    control_point_y = y_from;
                                    control_point_x = x_to;
                                }
                            } else {

                                if (y_from >= y_to) {

                                    control_point_y = y_from;
                                    control_point_x = x_to;
                                } else {

                                    control_point_y = y_to;
                                    control_point_x = x_from;
                                }
                            }
                        }


                        var text = data.text || '';
                        that.enjoyhint.addClass(that.cl.svg_transparent);

                        setTimeout(function () {

                            $('#enjoyhint_arrpw_line').remove();

                            var d = 'M' + x_from + ',' + y_from + ' Q' + control_point_x + ',' + control_point_y + ' ' + x_to + ',' + y_to;
                            that.$svg.append(makeSVG('path', {style: "fill:none; stroke:rgb(255,255,255); stroke-width:3", 'marker-end': "url(" + location.href + "#arrowMarker)", d: d, id: 'enjoyhint_arrpw_line'}));
                            that.enjoyhint.removeClass(that.cl.svg_transparent);

                        }, that.options.animation_time / 2);
                    };

                    that.getLabelElement = function (data) {

                        return $('<div>', {"class": 'enjoy_hint_label', id: 'enjoyhint_label'})
                            .css({
                                'top': data.y + 'px',
                                'left': data.x + 'px'
                            })
                            .html(data.text).appendTo(that.enjoyhint);
                    };


                    that.disableEventsNearRect = function (rect) {

                        $top_dis_events.css({
                            top: '0',
                            left: '0'
                        }).height(rect.top);

                        $bottom_dis_events.css({
                            top: rect.bottom + 'px',
                            left: '0'
                        });

                        $left_dis_events.css({
                            top: '0',
                            left: 0 + 'px'
                        }).width(rect.left);

                        $right_dis_events.css({
                            top: '0',
                            left: rect.right + 'px'
                        });
                    };

                    (function($) {

                        $.event.special.destroyed = {

                            remove: function(o) {

                                if (o.handler) {

                                    o.handler()
                                }
                            }
                        }
                    })(jQuery);

                    that.renderLabelWithShape = function (data) {

                        that.stepData = data;

                        function findParentDialog(element) {

                            if (element.tagName === "MD-DIALOG") {

                                return element;
                            } else if (typeof element.tagName == "undefined") {

                                return null;
                            } else {

                                return findParentDialog($(element).parent()[0]);
                            }
                        }

                        var dialog = findParentDialog($(that.stepData.enjoyHintElementSelector)[0]);

                        if (dialog != null) {

                            $(dialog).on('dialogClosing', function() {

                                that.stopFunction();
                                return;
                            });
                        }

                        that.resetComponentStuff();

                        var shape_type = data.shape || 'rect';
                        var shape_data = {};

                        var half_w = 0;
                        var half_h = 0;

                        var shape_offsets = {
                            top: data.top || 0,
                            bottom: data.bottom || 0,
                            left: data.left || 0,
                            right: data.right || 0
                        };

                        switch (shape_type) {

                            case 'circle':

                                half_w = half_h = data.radius;

                                var sides_pos = {
                                    top: data.center_y - half_h + shape_offsets.top,
                                    bottom: data.center_y + half_h - shape_offsets.bottom,
                                    left: data.center_x - half_w + shape_offsets.left,
                                    right: data.center_x + half_w - shape_offsets.right
                                };

                                var width = sides_pos.right - sides_pos.left;
                                var height = sides_pos.bottom - sides_pos.top;
                                data.radius = Math.round(Math.min(width, height) / 2);

                                //new half habarites
                                half_w = half_h = Math.round(data.radius / 2);

                                var new_half_w = Math.round(width / 2);
                                var new_half_h = Math.round(height / 2);

                                //new center_x and center_y
                                data.center_x = sides_pos.left + new_half_w;
                                data.center_y = sides_pos.top + new_half_h;

                                shape_data = that.renderCircle({
                                    x: data.center_x,
                                    y: data.center_y,
                                    r: data.radius
                                });

                                break;

                            case 'rect':

                                half_w = Math.round(data.width / 2);
                                half_h = Math.round(data.height / 2);

                                var sides_pos = {
                                    top: data.center_y - half_h + shape_offsets.top,
                                    bottom: data.center_y + half_h - shape_offsets.bottom,
                                    left: data.center_x - half_w + shape_offsets.left,
                                    right: data.center_x + half_w - shape_offsets.right
                                };

                                data.width = sides_pos.right - sides_pos.left;
                                data.height = sides_pos.bottom - sides_pos.top;

                                half_w = Math.round(data.width / 2);
                                half_h = Math.round(data.height / 2);

                                //new center_x and center_y
                                data.center_x = sides_pos.left + half_w;
                                data.center_y = sides_pos.top + half_h;

                                shape_data = that.renderRect({
                                    x: data.center_x,
                                    y: data.center_y,
                                    w: data.width,
                                    h: data.height,
                                    r: data.radius
                                }, 0.2);

                                break;
                        }

                        var body_size = {
                            w: that.enjoyhint.width(),
                            h: that.enjoyhint.height()
                        };

                        var label = that.getLabelElement({
                            x: 0,
                            y: 0,
                            text: data.text
                        });

                        var label_width = label.outerWidth();
                        var label_height = label.outerHeight();
                        label.remove();
                        var top_offset = data.center_y - half_h;
                        var bottom_offset = body_size.h - (data.center_y + half_h);
                        var left_offset = data.center_x - half_w;
                        var right_offset = body_size.w - (data.center_x + half_w);

                        var label_hor_side = (body_size.w - data.center_x) < data.center_x ? 'left' : 'right';
                        var label_ver_side = (body_size.h - data.center_y) < data.center_y ? 'top' : 'bottom';
                        var label_shift = 150;
                        var label_margin = 40;
                        var label_shift_with_label_width = label_shift + label_width + label_margin;
                        var label_shift_with_label_height = label_shift + label_height + label_margin;
                        var label_hor_offset = half_w + label_shift;
                        var label_ver_offset = half_h + label_shift;

                        //original: var label_x = (label_hor_side == 'left') ? data.center_x - label_hor_offset - label_width : data.center_x + label_hor_offset;
                        var label_y = (label_ver_side == 'top') ? data.center_y - label_ver_offset - label_height : data.center_y + label_ver_offset;
                        var label_x = window.innerWidth / 2 - label_width / 2;

                        if (top_offset < label_shift_with_label_height && bottom_offset < label_shift_with_label_height) {

                            label_y = data.center_y + label_margin;
                        }

                        if (window.innerWidth <= 640) {

                        }

                        var label_data = that.renderLabel({
                            x: label_x,
                            y: label_y,
                            text: data.text
                        });

                        var next_btn_x = window.innerWidth / 2 -  that.$next_btn.width() / 2;
                        that.$next_btn.css({
                            left: next_btn_x,
                            top: label_y + label_height + 20
                        });

                        var left_skip = next_btn_x + that.$next_btn.width() + 30;

                        if (that.nextBtn == "hide"){

                            left_skip = label_x;
                        }

                        that.$skip_btn.css({
                            left: left_skip,
                            top: label_y + label_height + 20
                        });

                        that.$close_btn.css({
                            right : 10,
                            top: 10
                        });

                        that.disableEventsNearRect({
                            top: shape_data.top,
                            bottom: shape_data.bottom,
                            left: shape_data.left,
                            right: shape_data.right
                        });

                        var x_to = 0;
                        var y_to = 0;
                        var arrow_side = false;
                        var conn_label_side = 'left';
                        var conn_circle_side = 'left';

                        var is_center = (label_data.left <= shape_data.x && label_data.right >= shape_data.x);
                        var is_left = (label_data.right < shape_data.x);
                        var is_right = (label_data.left > shape_data.x);

                        var is_abs_left = (label_data.right < shape_data.left);
                        var is_abs_right = (label_data.left > shape_data.right);

                        var is_top = (label_data.bottom < shape_data.top);
                        var is_bottom = (label_data.top > shape_data.bottom);
                        var is_mid = (label_data.bottom >= shape_data.y && label_data.top <= shape_data.y);
                        var is_mid_top = (label_data.bottom <= shape_data.y && !is_top);
                        var is_mid_bottom = (label_data.top >= shape_data.y && !is_bottom);


                        function setArrowData(l_s, c_s, a_s) {

                            conn_label_side = l_s;
                            conn_circle_side = c_s;
                            arrow_side = a_s;
                        }

                        function sideStatements(top_s, mid_top_s, mid_s, mid_bottom_s, bottom_s) {

                            var statement = [];

                            if (is_top) {

                                statement = top_s;
                            } else if (is_mid_top) {

                                statement = mid_top_s;
                            } else if (is_mid) {

                                statement = mid_s;
                            } else if (is_mid_bottom) {

                                statement = mid_bottom_s;
                            } else {//bottom

                                statement = bottom_s;
                            }

                            if (!statement) {

                                return;
                            } else {

                                setArrowData(statement[0], statement[1], statement[2]);
                            }
                        }

                        if (is_center) {

                            if (is_top) {

                                setArrowData('bottom', 'top', 'top');
                            } else if (is_bottom) {

                                setArrowData('top', 'bottom', 'bottom');
                            } else {

                                return;
                            }

                        } else if (is_left) {

                            sideStatements(
                                ['right', 'top', 'top'],//top
                                ['bottom', 'left', 'bottom'],//mid_top
                                ['right', 'left', 'top'],//mid
                                ['top', 'left', 'top'],//mid_bot
                                ['right', 'bottom', 'bottom']//bot
                            );

                        } else {//right

                            sideStatements(
                                ['left', 'top', 'top'],//top
                                ['bottom', 'right', 'bottom'],//mid_top
                                ['left', 'right', 'top'],//mid
                                ['top', 'right', 'top'],//mid_bot
                                ['left', 'bottom', 'bottom']//bot
                            );

                        }

                        var label_conn_coordinates = label_data.conn[conn_label_side];
                        var circle_conn_coordinates = shape_data.conn[conn_circle_side];
                        var by_top_side = (arrow_side == 'top');

                        that.renderArrow({
                            x_from: label_conn_coordinates.x,
                            y_from: label_conn_coordinates.y,
                            x_to: window.innerWidth < 640 ? shape_data.left + (shape_data.left > 0) : circle_conn_coordinates.x,
                            y_to: window.innerWidth < 640 ? shape_data.conn.left.y : circle_conn_coordinates.y,
                            by_top_side: by_top_side
                        });

                    };

                    that.clear = function () {

                        that.ctx.clearRect(0, 0, 3000, 2000);
                    };

                    return this;
                });
            },

            set: function (val) {

                this.each(function () {

                    this.enjoyhint_obj.setValue(val);
                });

                return this;
            },

            show: function () {

                this.each(function () {

                    this.enjoyhint_obj.show();
                });

                return this;
            },

            hide: function () {

                this.each(function () {

                    this.enjoyhint_obj.hide();
                });

                return this;
            },

            hide_next: function () {

                this.each(function () {

                    this.enjoyhint_obj.hideNextBtn();
                });

                return this;
            },

            show_next: function () {

                this.each(function () {

                    this.enjoyhint_obj.showNextBtn();
                });

                return this;
            },

            hide_skip: function () {

                this.each(function () {

                    this.enjoyhint_obj.hideSkipBtn();
                });

                return this;
            },

            show_skip: function () {

                this.each(function () {

                    this.enjoyhint_obj.showSkipBtn();
                });

                return this;
            },

            render_circle: function (x, y, r) {

                this.each(function () {

                    this.enjoyhint_obj.renderCircle(x, y, r);
                });

                return this;
            },

            render_label: function (x, y, r) {

                this.each(function () {

                    this.enjoyhint_obj.renderLabel(x, y, r);
                });

                return this;
            },

            render_label_with_shape: function (data, stopFunction) {

                this.each(function () {

                    that.stopFunction = stopFunction;
                    this.enjoyhint_obj.renderLabelWithShape(data);
                });

                return this;
            },

            redo_events_near_rect: function(rect) {

                that.disableEventsNearRect({
                    top: rect.top,
                    bottom: rect.bottom,
                    left: rect.left,
                    right: rect.right
                });
            },

            clear: function () {

                this.each(function () {

                    this.enjoyhint_obj.clear();
                });

                return this;
            },

            close: function (val) {

                this.each(function () {

                    this.enjoyhint_obj.closePopdown();
                });

                return this;
            }
        };

        $.fn.enjoyhint = function (method) {

            if (methods[method]) {

                return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
            } else if (typeof method === 'object' || !method) {

                return methods.init.apply(this, arguments);
            } else {

                $.error('Method ' + method + ' does not exist on $.numinput');
            }

            return this;
        };
    })(window.jQuery);;/*! KineticJS v5.2.0 2015-01-22 http://lavrton.github.io/KineticJS/ by Eric Rowell @ericdrowell, Anton Lavrenov @lavrton - MIT License https://github.com/lavrton/KineticJS/wiki/License*/
    var Kinetic={};!function(a){var b=Math.PI/180;Kinetic={version:"5.2.0",stages:[],idCounter:0,ids:{},names:{},shapes:{},listenClickTap:!1,inDblClickWindow:!1,enableTrace:!1,traceArrMax:100,dblClickWindow:400,pixelRatio:void 0,dragDistance:0,angleDeg:!0,showWarnings:!0,Filters:{},Node:function(a){this._init(a)},Shape:function(a){this.__init(a)},Container:function(a){this.__init(a)},Stage:function(a){this.___init(a)},BaseLayer:function(a){this.___init(a)},Layer:function(a){this.____init(a)},FastLayer:function(a){this.____init(a)},Group:function(a){this.___init(a)},isDragging:function(){var a=Kinetic.DD;return a?a.isDragging:!1},isDragReady:function(){var a=Kinetic.DD;return a?!!a.node:!1},_addId:function(a,b){void 0!==b&&(this.ids[b]=a)},_removeId:function(a){void 0!==a&&delete this.ids[a]},_addName:function(a,b){if(void 0!==b)for(var c=b.split(/\s/g),d=0;d<c.length;d++){var e=c[d];e&&(void 0===this.names[e]&&(this.names[e]=[]),this.names[e].push(a))}},_removeName:function(a,b){if(void 0!==a){var c=this.names[a];if(void 0!==c){for(var d=0;d<c.length;d++){var e=c[d];e._id===b&&c.splice(d,1)}0===c.length&&delete this.names[a]}}},getAngle:function(a){return this.angleDeg?a*b:a},_parseUA:function(a){var b=a.toLowerCase(),c=/(chrome)[ \/]([\w.]+)/.exec(b)||/(webkit)[ \/]([\w.]+)/.exec(b)||/(opera)(?:.*version|)[ \/]([\w.]+)/.exec(b)||/(msie) ([\w.]+)/.exec(b)||b.indexOf("compatible")<0&&/(mozilla)(?:.*? rv:([\w.]+)|)/.exec(b)||[],d=!!a.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i),e=!!a.match(/IEMobile/i);return{browser:c[1]||"",version:c[2]||"0",mobile:d,ieMobile:e}},UA:void 0},Kinetic.UA=Kinetic._parseUA(a.navigator&&a.navigator.userAgent||"")}(this),function(a,b){if("object"==typeof exports){var c=b();if(global.window===global)Kinetic.document=global.document,Kinetic.window=global;else{var d=require("canvas"),e=require("jsdom").jsdom;Kinetic.document=e("<!DOCTYPE html><html><head></head><body></body></html>"),Kinetic.window=Kinetic.document.createWindow(),Kinetic.window.Image=d.Image,Kinetic._nodeCanvas=d}return Kinetic.root=a,void(module.exports=c)}"function"==typeof define&&define.amd&&define(b),Kinetic.document=document,Kinetic.window=window,Kinetic.root=a}(this,function(){return Kinetic}),function(){Kinetic.Collection=function(){var a=[].slice.call(arguments),b=a.length,c=0;for(this.length=b;b>c;c++)this[c]=a[c];return this},Kinetic.Collection.prototype=[],Kinetic.Collection.prototype.each=function(a){for(var b=0;b<this.length;b++)a(this[b],b)},Kinetic.Collection.prototype.toArray=function(){var a,b=[],c=this.length;for(a=0;c>a;a++)b.push(this[a]);return b},Kinetic.Collection.toCollection=function(a){var b,c=new Kinetic.Collection,d=a.length;for(b=0;d>b;b++)c.push(a[b]);return c},Kinetic.Collection._mapMethod=function(a){Kinetic.Collection.prototype[a]=function(){var b,c=this.length,d=[].slice.call(arguments);for(b=0;c>b;b++)this[b][a].apply(this[b],d);return this}},Kinetic.Collection.mapMethods=function(a){var b=a.prototype;for(var c in b)Kinetic.Collection._mapMethod(c)},Kinetic.Transform=function(a){this.m=a&&a.slice()||[1,0,0,1,0,0]},Kinetic.Transform.prototype={copy:function(){return new Kinetic.Transform(this.m)},point:function(a){var b=this.m;return{x:b[0]*a.x+b[2]*a.y+b[4],y:b[1]*a.x+b[3]*a.y+b[5]}},translate:function(a,b){return this.m[4]+=this.m[0]*a+this.m[2]*b,this.m[5]+=this.m[1]*a+this.m[3]*b,this},scale:function(a,b){return this.m[0]*=a,this.m[1]*=a,this.m[2]*=b,this.m[3]*=b,this},rotate:function(a){var b=Math.cos(a),c=Math.sin(a),d=this.m[0]*b+this.m[2]*c,e=this.m[1]*b+this.m[3]*c,f=this.m[0]*-c+this.m[2]*b,g=this.m[1]*-c+this.m[3]*b;return this.m[0]=d,this.m[1]=e,this.m[2]=f,this.m[3]=g,this},getTranslation:function(){return{x:this.m[4],y:this.m[5]}},skew:function(a,b){var c=this.m[0]+this.m[2]*b,d=this.m[1]+this.m[3]*b,e=this.m[2]+this.m[0]*a,f=this.m[3]+this.m[1]*a;return this.m[0]=c,this.m[1]=d,this.m[2]=e,this.m[3]=f,this},multiply:function(a){var b=this.m[0]*a.m[0]+this.m[2]*a.m[1],c=this.m[1]*a.m[0]+this.m[3]*a.m[1],d=this.m[0]*a.m[2]+this.m[2]*a.m[3],e=this.m[1]*a.m[2]+this
    },_get:function(a){return this.className===a||this.nodeType===a?[this]:[]},_off:function(a,b){var c,d,e=this.eventListeners[a];for(c=0;c<e.length;c++)if(d=e[c].name,!("kinetic"===d&&"kinetic"!==b||b&&d!==b)){if(e.splice(c,1),0===e.length){delete this.eventListeners[a];break}c--}},_fireChangeEvent:function(a,b,d){this._fire(a+c,{oldVal:b,newVal:d})},setId:function(a){var b=this.getId();return Kinetic._removeId(b),Kinetic._addId(this,a),this._setAttr(h,a),this},setName:function(a){var b=this.getName();return Kinetic._removeName(b,this._id),Kinetic._addName(this,a),this._setAttr(m,a),this},setAttr:function(a,b){var c=n+Kinetic.Util._capitalize(a),d=this[c];return Kinetic.Util._isFunction(d)?d.call(this,b):this._setAttr(a,b),this},_setAttr:function(a,b){var c;void 0!==b&&(c=this.attrs[a],this.attrs[a]=b,this._fireChangeEvent(a,c,b))},_setComponentAttr:function(a,b,c){var d;void 0!==c&&(d=this.attrs[a],d||(this.attrs[a]=this.getAttr(a)),this.attrs[a][b]=c,this._fireChangeEvent(a,d,c))},_fireAndBubble:function(a,b,c){var d=!0;if(b&&this.nodeType===o&&(b.target=this),a===k&&c&&(this._id===c._id||this.isAncestorOf&&this.isAncestorOf(c))?d=!1:a===l&&c&&(this._id===c._id||this.isAncestorOf&&this.isAncestorOf(c))&&(d=!1),d){this._fire(a,b);var e=(a===k||a===l)&&(c&&c.isAncestorOf&&c.isAncestorOf(this)||!(!c||!c.isAncestorOf));b&&!b.cancelBubble&&this.parent&&this.parent.isListening()&&!e&&(c&&c.parent?this._fireAndBubble.call(this.parent,a,b,c.parent):this._fireAndBubble.call(this.parent,a,b))}},_fire:function(a,b){var c,d=this.eventListeners[a];if(b.type=a,d)for(c=0;c<d.length;c++)d[c].handler.call(this,b)},draw:function(){return this.drawScene(),this.drawHit(),this}}),Kinetic.Node.create=function(a,b){return this._createNode(JSON.parse(a),b)},Kinetic.Node._createNode=function(a,b){var c,d,e,f=Kinetic.Node.prototype.getClassName.call(a),g=a.children;if(b&&(a.attrs.container=b),c=new Kinetic[f](a.attrs),g)for(d=g.length,e=0;d>e;e++)c.add(this._createNode(g[e]));return c},Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"position"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"x",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"y",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"opacity",1),Kinetic.Factory.addGetter(Kinetic.Node,"name"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"name"),Kinetic.Factory.addGetter(Kinetic.Node,"id"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"id"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"rotation",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"scale",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"scaleX",1),Kinetic.Factory.addGetterSetter(Kinetic.Node,"scaleY",1),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"skew",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"skewX",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"skewY",0),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Node,"offset",["x","y"]),Kinetic.Factory.addGetterSetter(Kinetic.Node,"offsetX",0),Kinetic.Factory.addGetterSetter(Kinetic.Node,"offsetY",0),Kinetic.Factory.addSetter(Kinetic.Node,"dragDistance"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"dragDistance"),Kinetic.Factory.addSetter(Kinetic.Node,"width",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"width"),Kinetic.Factory.addSetter(Kinetic.Node,"height",0),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"height"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"listening","inherit"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"filters",void 0,function(a){return this._filterUpToDate=!1,a}),Kinetic.Factory.addGetterSetter(Kinetic.Node,"visible","inherit"),Kinetic.Factory.addGetterSetter(Kinetic.Node,"transformsEnabled","all"),Kinetic.Factory.addOverloadedGetterSetter(Kinetic.Node,"size"),Kinetic.Factory.backCompat(Kinetic.Node,{rotateDeg:"rotate",setRotationDeg:"setRotation",getRotationDeg:"getRotation"}),Kinetic.Collection.mapMethods(Kinetic.Node)}(),function(){Kinetic.Filters.Grayscale=function(a){var b,c,d=a.data,e=d.length;for(b=0;e>b;b+=4)c=.34*d[b]+.5*d[b+1]+.16*d[b+2],d
        a.children=[];for(var b=this.getChildren(),c=b.length,d=0;c>d;d++){var e=b[d];a.children.push(e.toObject())}return a},_getDescendants:function(a){for(var b=[],c=a.length,d=0;c>d;d++){var e=a[d];this.isAncestorOf(e)&&b.push(e)}return b},isAncestorOf:function(a){for(var b=a.getParent();b;){if(b._id===this._id)return!0;b=b.getParent()}return!1},clone:function(a){var b=Kinetic.Node.prototype.clone.call(this,a);return this.getChildren().each(function(a){b.add(a.clone())}),b},getAllIntersections:function(a){var b=[];return this.find("Shape").each(function(c){c.isVisible()&&c.intersects(a)&&b.push(c)}),b},_setChildrenIndices:function(){this.children.each(function(a,b){a.index=b})},drawScene:function(a,b){var c=this.getLayer(),d=a||c&&c.getCanvas(),e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.scene;return this.isVisible()&&(g?this._drawCachedSceneCanvas(e):this._drawChildren(d,"drawScene",b)),this},drawHit:function(a,b){var c=this.getLayer(),d=a||c&&c.hitCanvas,e=d&&d.getContext(),f=this._cache.canvas,g=f&&f.hit;return this.shouldDrawHit(d)&&(c&&c.clearHitCache(),g?this._drawCachedHitCanvas(e):this._drawChildren(d,"drawHit",b)),this},_drawChildren:function(a,b,c){var d,e,f=this.getLayer(),g=a&&a.getContext(),h=this.getClipWidth(),i=this.getClipHeight(),j=h&&i;j&&f&&(d=this.getClipX(),e=this.getClipY(),g.save(),f._applyTransform(this,g),g.beginPath(),g.rect(d,e,h,i),g.clip(),g.reset()),this.children.each(function(d){d[b](a,c)}),j&&g.restore()},shouldDrawHit:function(a){var b=this.getLayer(),c=Kinetic.DD,d=c&&Kinetic.isDragging()&&-1!==Kinetic.DD.anim.getLayers().indexOf(b);return a&&a.isCache||b&&b.hitGraphEnabled()&&this.isVisible()&&!d}}),Kinetic.Util.extend(Kinetic.Container,Kinetic.Node),Kinetic.Container.prototype.get=Kinetic.Container.prototype.find,Kinetic.Factory.addComponentsGetterSetter(Kinetic.Container,"clip",["x","y","width","height"]),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipX"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipY"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipWidth"),Kinetic.Factory.addGetterSetter(Kinetic.Container,"clipHeight"),Kinetic.Collection.mapMethods(Kinetic.Container)}(),function(){function a(a){a.fill()}function b(a){a.stroke()}function c(a){a.fill()}function d(a){a.stroke()}function e(){this._clearCache(f)}var f="hasShadow";Kinetic.Util.addMethods(Kinetic.Shape,{__init:function(f){this.nodeType="Shape",this._fillFunc=a,this._strokeFunc=b,this._fillFuncHit=c,this._strokeFuncHit=d;for(var g,h=Kinetic.shapes;;)if(g=Kinetic.Util.getRandomColor(),g&&!(g in h))break;this.colorKey=g,h[g]=this,Kinetic.Node.call(this,f),this.on("shadowColorChange.kinetic shadowBlurChange.kinetic shadowOffsetChange.kinetic shadowOpacityChange.kinetic shadowEnabledChange.kinetic",e)},hasChildren:function(){return!1},getChildren:function(){return[]},getContext:function(){return this.getLayer().getContext()},getCanvas:function(){return this.getLayer().getCanvas()},hasShadow:function(){return this._getCache(f,this._hasShadow)},_hasShadow:function(){return this.getShadowEnabled()&&0!==this.getShadowOpacity()&&!!(this.getShadowColor()||this.getShadowBlur()||this.getShadowOffsetX()||this.getShadowOffsetY())},hasFill:function(){return!!(this.getFill()||this.getFillPatternImage()||this.getFillLinearGradientColorStops()||this.getFillRadialGradientColorStops())},hasStroke:function(){return!!(this.stroke()||this.strokeRed()||this.strokeGreen()||this.strokeBlue())},intersects:function(a){var b,c=this.getStage(),d=c.bufferHitCanvas;return d.getContext().clear(),this.drawScene(d),b=d.context.getImageData(Math.round(a.x),Math.round(a.y),1,1).data,b[3]>0},destroy:function(){Kinetic.Node.prototype.destroy.call(this),delete Kinetic.shapes[this.colorKey]},_useBufferCanvas:function(){return(this.hasShadow()||1!==this.getAbsoluteOpacity())&&this.hasFill()&&this.hasStroke()&&this.getStage()},drawScene:function(a,b){var c,d,e,f=this.getLayer(),g=a||f.getCanvas(),h=g.getContext(),i=this._cache.canvas,j=this.sceneFunc(),k=this.hasShadow();if(this.isVisible())if(i)this._drawCachedSceneCanvas(h);else 
    },_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},getWidth:function(){var a=this.getImage();return this.attrs.width||(a?a.width:0)},getHeight:function(){var a=this.getImage();return this.attrs.height||(a?a.height:0)}},Kinetic.Util.extend(Kinetic.Image,Kinetic.Shape),Kinetic.Factory.addGetterSetter(Kinetic.Image,"image"),Kinetic.Factory.addComponentsGetterSetter(Kinetic.Image,"crop",["x","y","width","height"]),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropX",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropY",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropWidth",0),Kinetic.Factory.addGetterSetter(Kinetic.Image,"cropHeight",0),Kinetic.Collection.mapMethods(Kinetic.Image)}(),function(){function a(a){a.fillText(this.partialText,0,0)}function b(a){a.strokeText(this.partialText,0,0)}var c="auto",d="center",e="Change.kinetic",f="2d",g="-",h="",i="left",j="text",k="Text",l="middle",m="normal",n="px ",o=" ",p="right",q="word",r="char",s="none",t=["fontFamily","fontSize","fontStyle","fontVariant","padding","align","lineHeight","text","width","height","wrap"],u=t.length,v=Kinetic.Util.createCanvasElement().getContext(f);Kinetic.Text=function(a){this.___init(a)},Kinetic.Text.prototype={___init:function(d){d=d||{},d.fill=d.fill||"black",void 0===d.width&&(d.width=c),void 0===d.height&&(d.height=c),Kinetic.Shape.call(this,d),this._fillFunc=a,this._strokeFunc=b,this.className=k;for(var f=0;u>f;f++)this.on(t[f]+e,this._setTextData);this._setTextData(),this.sceneFunc(this._sceneFunc),this.hitFunc(this._hitFunc)},_sceneFunc:function(a){var b,c=this.getPadding(),e=this.getTextHeight(),f=this.getLineHeight()*e,g=this.textArr,h=g.length,j=this.getWidth();for(a.setAttr("font",this._getContextFont()),a.setAttr("textBaseline",l),a.setAttr("textAlign",i),a.save(),a.translate(c,0),a.translate(0,c+e/2),b=0;h>b;b++){var k=g[b],m=k.text,n=k.width;a.save(),this.getAlign()===p?a.translate(j-n-2*c,0):this.getAlign()===d&&a.translate((j-n-2*c)/2,0),this.partialText=m,a.fillStrokeShape(this),a.restore(),a.translate(0,f)}a.restore()},_hitFunc:function(a){var b=this.getWidth(),c=this.getHeight();a.beginPath(),a.rect(0,0,b,c),a.closePath(),a.fillStrokeShape(this)},setText:function(a){var b=Kinetic.Util._isString(a)?a:a.toString();return this._setAttr(j,b),this},getWidth:function(){return this.attrs.width===c?this.getTextWidth()+2*this.getPadding():this.attrs.width},getHeight:function(){return this.attrs.height===c?this.getTextHeight()*this.textArr.length*this.getLineHeight()+2*this.getPadding():this.attrs.height},getTextWidth:function(){return this.textWidth},getTextHeight:function(){return this.textHeight},_getTextSize:function(a){var b,c=v,d=this.getFontSize();return c.save(),c.font=this._getContextFont(),b=c.measureText(a),c.restore(),{width:b.width,height:parseInt(d,10)}},_getContextFont:function(){return this.getFontStyle()+o+this.getFontVariant()+o+this.getFontSize()+n+this.getFontFamily()},_addTextLine:function(a,b){return this.textArr.push({text:a,width:b})},_getTextWidth:function(a){return v.measureText(a).width},_setTextData:function(){var a=this.getText().split("\n"),b=+this.getFontSize(),d=0,e=this.getLineHeight()*b,f=this.attrs.width,h=this.attrs.height,i=f!==c,j=h!==c,k=this.getPadding(),l=f-2*k,m=h-2*k,n=0,p=this.getWrap(),q=p!==s,t=p!==r&&q;this.textArr=[],v.save(),v.font=this._getContextFont();for(var u=0,w=a.length;w>u;++u){var x=a[u],y=this._getTextWidth(x);if(i&&y>l)for(;x.length>0;){for(var z=0,A=x.length,B="",C=0;A>z;){var D=z+A>>>1,E=x.slice(0,D+1),F=this._getTextWidth(E);l>=F?(z=D+1,B=E,C=F):A=D}if(!B)break;if(t){var G=Math.max(B.lastIndexOf(o),B.lastIndexOf(g))+1;G>0&&(z=G,B=B.slice(0,z),C=this._getTextWidth(B))}if(this._addTextLine(B,C),d=Math.max(d,C),n+=e,!q||j&&n+e>m)break;if(x=x.slice(z),x.length>0&&(y=this._getTextWidth(x),l>=y)){this._addTextLine(x,y),n+=e,d=Math.max(d,y);break}}else this._addTextLine(x,y),n+=e,d=Math.max(d,y);if(j&&n+e>m)break}v.restore(),this.textHeight=b,this.textWidth=d}},Kinetic.Util.extend(Kinetic.Te
     * Copyright (c) 2007-2015 Ariel Flesler - aflesler<a>gmail<d>com | http://flesler.blogspot.com
     * Licensed under MIT
     * @author Ariel Flesler
     * @version 2.1.2
     */
    ;(function(f){"use strict";"function"===typeof define&&define.amd?define(["jquery"],f):"undefined"!==typeof module&&module.exports?module.exports=f(require("jquery")):f(jQuery)})(function($){"use strict";function n(a){return!a.nodeName||-1!==$.inArray(a.nodeName.toLowerCase(),["iframe","#document","html","body"])}function h(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}var p=$.scrollTo=function(a,d,b){return $(window).scrollTo(a,d,b)};p.defaults={axis:"xy",duration:0,limit:!0};$.fn.scrollTo=function(a,d,b){"object"=== typeof d&&(b=d,d=0);"function"===typeof b&&(b={onAfter:b});"max"===a&&(a=9E9);b=$.extend({},p.defaults,b);d=d||b.duration;var u=b.queue&&1<b.axis.length;u&&(d/=2);b.offset=h(b.offset);b.over=h(b.over);return this.each(function(){function k(a){var k=$.extend({},b,{queue:!0,duration:d,complete:a&&function(){a.call(q,e,b)}});r.animate(f,k)}if(null!==a){var l=n(this),q=l?this.contentWindow||window:this,r=$(q),e=a,f={},t;switch(typeof e){case "number":case "string":if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(e)){e= h(e);break}e=l?$(e):$(e,q);case "object":if(e.length===0)return;if(e.is||e.style)t=(e=$(e)).offset()}var v=$.isFunction(b.offset)&&b.offset(q,e)||b.offset;$.each(b.axis.split(""),function(a,c){var d="x"===c?"Left":"Top",m=d.toLowerCase(),g="scroll"+d,h=r[g](),n=p.max(q,c);t?(f[g]=t[m]+(l?0:h-r.offset()[m]),b.margin&&(f[g]-=parseInt(e.css("margin"+d),10)||0,f[g]-=parseInt(e.css("border"+d+"Width"),10)||0),f[g]+=v[m]||0,b.over[m]&&(f[g]+=e["x"===c?"width":"height"]()*b.over[m])):(d=e[m],f[g]=d.slice&& "%"===d.slice(-1)?parseFloat(d)/100*n:d);b.limit&&/^\d+$/.test(f[g])&&(f[g]=0>=f[g]?0:Math.min(f[g],n));!a&&1<b.axis.length&&(h===f[g]?f={}:u&&(k(b.onAfterFirst),f={}))});k(b.onAfter)}})};p.max=function(a,d){var b="x"===d?"Width":"Height",h="scroll"+b;if(!n(a))return a[h]-$(a)[b.toLowerCase()]();var b="client"+b,k=a.ownerDocument||a.document,l=k.documentElement,k=k.body;return Math.max(l[h],k[h])-Math.min(l[b],k[b])};$.Tween.propHooks.scrollLeft=$.Tween.propHooks.scrollTop={get:function(a){return $(a.elem)[a.prop]()}, set:function(a){var d=this.get(a);if(a.options.interrupt&&a._last&&a._last!==d)return $(a.elem).stop();var b=Math.round(a.now);d!==b&&($(a.elem)[a.prop](b),a._last=this.get(a))}};return p});

}(jQuery));