<script type="text/javascript">
    //jQuery.extend(true, vis.binds, {
        vis.binds.special = {
            soundOnClickInitialized: false,
            soundOnClick: function (el, url) {
                if (vis.editMode) {
                    $(el).parent().parent().show();
                    return;
                }
                if (vis.binds.special.soundOnClickInitialized) {
                    return;
                }
                vis.binds.special.soundOnClickInitialized = true;
                $('body')
                .append('<audio id="sound_on_click" src="' + url + '"></audio>')
                .click(function (e) {
                    var node = e.target;

                    for (var i = 0; i < 4 && node.parentNode; node = node.parentNode, i++) {
                        //console.log(node);
                        if (node.nodeName === 'BODY') return;
                        var $node = $(node);
                        if ($node.attr('id') === 'vis_container') return;
                        if ($node.hasClass('dashui-view')) return;
                        if ($node.hasClass('ui-dialog')) return;

                        var events = $._data(node, "events");

                        if (events && events.click || node.nodeName == "INPUT" || node.nodeName == "SELECT" || node.nodeName == "BUTTON") {
                            //console.log("has click event!");
                            document.getElementById('sound_on_click').play();
                            return;
                        }
                    }
                });
            },
            preRenderView: function(el, view, delay) {
                if (vis.editMode) {
                    jQuery(el).parent().parent().show();
                } else {
                    if (parseInt(delay, 10) > 0) {
                        setTimeout(function (_v) {
                            vis.renderView(_v, _v, true);
                        }, delay, view);
                    } else {
                        vis.renderView(view, view, true);
                    }
                }
            },
            instance: function(el) {
                if (vis.editMode) {
                    jQuery(el).parent().parent().show();
                }
                vis.initInstance();
            },
            unfocusInitialized: false,
            unfocusTimer: null,
            unfocus: function(el) {
                if (vis.binds.special.unfocusInitialized) {
                    return;
                } else {
                    vis.binds.special.unfocusInitialized = true;
                }
                if (vis.editMode) {
                    jQuery(el).parent().parent().show();
                }

                function removeFocus(that) {
                    var $this = jQuery(that);
                    if ($this.is("textarea")) {
                        return;
                    }
                    if ($this.is("input") && ($this.attr("type") == "text" || $this.attr("type") == "number" || $this.attr("type") == "password")) {
                        return;
                    }
                    if (vis.binds.special.unfocusTimer) {
                        clearTimeout(vis.binds.special.unfocusTimer);
                    }
                    vis.binds.special.unfocusTimer = setTimeout(function (_this) {
                        // TODO - Funktioniert nicht mit Android/Webkit :-(
                        _this.trigger("blur");
                    }, 100, $this);

                }

                jQuery("*").mouseup(function() {
                    removeFocus(this);
                });
                jQuery("*").on('touchend', function() {
                    removeFocus(this);
                });
                jQuery("*").on('touchcancel', function() {
                    removeFocus(this);
                });

            }
        };
    //});

</script>
<script type="text/ejs" id="tplPreRenderView" class="dashui-tpl" data-dashui-set="special" data-dashui-name="special - pre-render view" data-dashui-attrs="prerender">
    <div class="dashui-widget <%== this.data.attr('class') %>" style="display:none; width: 320px; height: 20px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>">
        <div class="dashui-widget-body">
            <b>pre-render view: <%= this.data.attr('prerender') %></b>
            <div <%= (el) -> vis.binds.special.preRenderView(el, data.attr('prerender')) %>></div>
        </div>
    </div>
</script>


<script type="text/ejs" id="tplInitInstance" class="dashui-tpl" data-dashui-set="special" data-dashui-name="special - create Instance" data-dashui-attrs="">
    <div class="dashui-widget <%== this.data.attr('class') %>" style="display:none; width: 320px; height: 20px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>">
        <div class="dashui-widget-body">
            <b>Instance</b>
            <div <%= (el) -> vis.binds.special.instance(el) %>></div>
        </div>
    </div>
</script>


<script type="text/ejs" id="tplUnFocus" class="dashui-tpl" data-dashui-set="special" data-dashui-name="special - remove Focus" data-dashui-attrs="">
    <div class="dashui-widget <%== this.data.attr('class') %>" style="display:none; width: 320px; height: 20px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>">
        <div class="dashui-widget-body">
            <b>Remove Focus</b>
            <div <%= (el) -> vis.binds.special.unfocus(el) %>></div>
        </div>
    </div>
</script>


<script type="text/ejs" id="tplSoundOnClick" class="dashui-tpl" data-dashui-set="special" data-dashui-name="special - Sound onClick" data-dashui-attrs="url">
    <div class="dashui-widget <%== this.data.attr('class') %>" style="display:none; width: 320px; height: 20px; background-color: #333; color: #eee; border: 2px dashed red; opacity:0.8;" id="<%= this.data.attr('wid') %>">
        <div class="dashui-widget-body">
            <b>Sound onClick: <%= this.data.attr('url') %></b>
            <div <%= (el) -> vis.binds.special.soundOnClick(el, data.attr('url')) %>></div>
        </div>
    </div>
</script>