<script type="text/javascript">
    if (vis.editMode) {
        // Add words for basic widgets
        $.extend(true, systemDictionary, {
            "group_left":           {"en": "Swipe to left",     "de": "Swipe nach links",   "ru": "Сдвиг влево"},
            "left_nav_view":        {"en": "View name",         "de": "Viewname",           "ru": "Имя страницы"},
            "left_in_effect":       {"en": "In effect",         "de": "In-Effekt",          "ru": "In эффект"},
            "left_in_eff_opt":      {"en": "In options",        "de": "In-Optionen",        "ru": "In опции"},
            "left_out_effect":      {"en": "Out effect",        "de": "Out-Effekt",         "ru": "Out эффект"},
            "left_out_eff_opt":     {"en": "Out options",       "de": "Out-Optionen",       "ru": "Out опции"},
            "group_right":          {"en": "Swipe to right",    "de": "Swipe nach rechts",  "ru": "Сдвиг вправо"},
            "right_nav_view":       {"en": "View name",         "de": "Viewname",           "ru": "Имя страницы"},
            "right_in_effect":      {"en": "In effect",         "de": "In-Effekt",          "ru": "In эффект"},
            "right_in_eff_opt":     {"en": "In options",        "de": "In-Optionen",        "ru": "In опции"},
            "right_out_effect":     {"en": "Out effect",        "de": "Out-Effekt",         "ru": "Out эффект"},
            "right_out_eff_opt":    {"en": "Out options",       "de": "Out-Optionen",       "ru": "Out опции"},
            "Swipe Navigation":     {"en": "Swipe Navigation",  "de": "Swipe Navigation",   "ru": "Swipe навигация"}
        });
    }

    vis.binds.swipe = {
        loadedSwipe: false,
        loadedRound: false,
        loadSwipeScripts: function (cb) {
            if (vis.binds.swipe.loadedSwipe) {
                cb && cb();
            } else {
                vis.binds.swipe.loadedSwipe = true;
                $.ajax({
                    url: 'widgets/swipe/js/jquery.touchSwipe.min.js',
                    dataType: 'script',
                    success: function () {
                        cb && cb();
                    },
                    async: false
                });
            }
        },
        swipeNav: function (wid, view, data, style) {
            console.log('SWIPE ' + wid);
            var $div = $('#' + wid);
            // if nothing found => wait
            if (!$div.length) {
                setTimeout(function () {
                    vis.binds.swipe.swipeNav(wid, view, data, style);
                }, 100);
                return;
            }

            if (vis.editMode) {
                $div.show()
                    .find('.translate-it')
                        .each(function () {
                            $(this).html(_($(this).text()));
                        });
            } else {
                $div.hide();
                vis.binds.swipe.loadSwipeScripts(function () {
                    var $view = $('#visview_' + view);
                    $view.swipe({
                        swipeLeft: function () {
                            vis.changeView(data['left_nav_view'], data['left_nav_view'], {
                                effect: data['left_out_effect'],
                                options: {
                                    direction: data['left_out_eff_opt'],
                                    queue: false
                                }, duration: $div.attr('duration')
                            }, {
                                effect: data['left_in_effect'],
                                options: {direction: data['left_in_eff_opt'], queue: false},
                                duration: $div.attr('duration')
                            }, true)
                        },
                        swipeRight: function () {
                            vis.changeView(data['right_nav_view'], data['right_nav_view'], {
                                effect: data['right_out_effect'],
                                options: {direction: data['right_out_eff_opt'], queue: false},
                                duration: $div.attr('duration')
                            }, {
                                effect: data['right_in_effect'],
                                options: {direction: data['right_in_eff_opt'], queue: false},
                                duration: $div.attr('duration')
                            }, true)
                        }
                    });
                });
            }
        },
    };
</script>

<script id="tplSwipe"
        type="text/ejs"
        class="vis-tpl"
        data-vis-set="swipe"
        data-vis-prev='<img src="widgets/swipe/img/Prev_Swipe.png"></img>'
        data-vis-name="swipe Navigation"
        data-vis-attrs="left_nav_view;right_nav_view;"
        data-vis-no-palette="true"
        data-vis-disabled-attrs2="duration;"
        data-vis-disabled-attrs3="left_in_effect[slide];left_in_eff_opt[right];left_out_effect[slide];left_out_eff_opt[left];"
        data-vis-disabled-attrs4="right_in_effect[slide];right_in_eff_opt[left];right_out_effect[slide];right_out_eff_opt[right];"
>
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 160px; height: 82px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>" <%= (el) -> vis.binds.swipe.swipeNav(this.data.wid, this.view, this.data, this.style) %>>
        <div class="vis-widget-body">
            <div style="font-weight: bold" class="translate-it">Swipe Navigation</div>
            <table>
                <tr><td style="width: 40px" class="translate-it">left</td><td style="width: 20px">&gt;</td><td><%= this.data.attr('left_nav_view') %></td></tr>
                <tr><td style="width: 40px" class="translate-it">right</td><td style="width: 20px">&lt;</td><td><%= this.data.attr('right_nav_view') %></td></tr>
            </table>
        </div>
    </div>
</script>

<script id="tplCarousel"
        type="text/ejs"
        class="vis-tpl"
        data-vis-set="swipe"
        data-vis-prev='<img src="widgets/swipe/img/Prev_Carousel.png"></img>'
        data-vis-name="Carousel"
        data-vis-attrs="contains_view/views">
    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 300px; height: 100px;" id="<%= this.data.attr('wid') %>">
        Does not work in vis-2.0
    </div>
</script>