<div class="hololayout row row-fluid">
    <div class="holoframe span9 col-xs-8 col-md-9">
        <div id="_anim_img{{ id }}">
            {% block init_frame %}
                {{ init_frame }}
            {% endblock %}
        </div>
    </div>
    <div class="span3 col-xs-4 col-md-3">
        <form class="holoform well">
            {% for widget_data in widgets %}
                {% if widget_data['type'] == 'slider' %}
                    <div class="form-group control-group holoformgroup" style='{{ widget_data['visibility'] }}'>
                        <label for="textInput{{ id }}_{{ widget_data['dim'] }}">
                            <strong>{{ widget_data['dim_label'] }}:</strong>
                        </label>
                        <div class="holowell row row-fluid">
                            <div class="hologroup col-xs-4 span4">
                                <input type="text" class="holotext form-control input-small"
                                       id="textInput{{ id }}_{{ widget_data['dim'] }}" value="" disabled>
                            </div>
                            <div class="holoslider span7 offset1 col-xs-7 col-xs-offset-1"
                                 id="_anim_widget{{ id }}_{{ widget_data['dim'] }}"></div>
                        </div>
                    </div>
                    <script>
                        // Slider JS Block START
                        function loadcssfile(filename){
                            var fileref=document.createElement("link")
                            fileref.setAttribute("rel", "stylesheet")
                            fileref.setAttribute("type", "text/css")
                            fileref.setAttribute("href", filename)
                            document.getElementsByTagName("head")[0].appendChild(fileref)
                        }
                        loadcssfile("https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css");
                        /* Check if jQuery and jQueryUI have been loaded
                         otherwise load with require.js */
                        var jQuery = window.jQuery,
                        // check for old versions of jQuery
                                oldjQuery = jQuery && !!jQuery.fn.jquery.match(/^1\.[0-4](\.|$)/),
                                jquery_path = '',
                                paths = {},
                                noConflict;
                        var jQueryUI = jQuery.ui;
                        // check for jQuery
                        if (!jQuery || oldjQuery) {
                            // load if it's not available or doesn't meet min standards
                            paths.jQuery = jQuery;
                            noConflict = !!oldjQuery;
                        } else {
                            // register the current jQuery
                            define('jquery', [], function() { return jQuery; });
                        }
                        if (!jQueryUI) {
                            paths.jQueryUI = "{{ CDN['jQueryUI'] }}"
                        } else {
                            define('jQueryUI', [], function() { return jQuery.ui; });
                        }
                        paths.underscore = "{{ CDN['underscore'] }}";
                        var jquery_require = {paths: paths,
                            shim: {
                                "jQueryUI": {
                                    exports:"$",
                                    deps: ['jquery']
                                },
                                "underscore": {
                                    exports: '_'
                                }
                            }}
                        require.config(jquery_require);
                        require(["jQueryUI", "underscore"], function(jUI, _){
                            if (noConflict) $.noConflict(true);
                            var vals = {{ widget_data['vals'] }};
                            var next_vals = {{ widget_data['next_vals'] }};
                            if ({{ dynamic }} && vals.constructor === Array) {
                                var min = parseFloat(vals[0]);
                                var max = parseFloat(vals[vals.length-1]);
                                var step = {{ widget_data['step'] }};
                            } else {
                                var min = 0;
								if ({{ dynamic }}) {
                                   var max = Object.keys(vals).length - 1;
								} else {
								   var max = vals.length - 1;
								}
                                var step = 1;
                            }
                            var slider = $('#_anim_widget{{ id }}_{{ widget_data['dim'] }}');
                            slider.slider({
                                animate: "fast",
                                min: min,
                                max: max,
                                step: step,
                                value: min,
                                dim_vals: vals,
                                next_vals: next_vals,
                                slide: _.throttle(function(event, ui) {
                                    var vals = slider.slider("option", "dim_vals");
                                    var next_vals = slider.slider("option", "next_vals");
                                    if ({{ dynamic }} && vals.constructor === Array) {
                                        var dim_val = ui.value;
                                    } else {
                                        var dim_val = vals[ui.value];
                                    }
									$('#textInput{{ id }}_{{ widget_data['dim'] }}').val((dim_val*1).toString());
                                    anim{{ id }}.set_frame(dim_val, {{ widget_data['dim_idx'] }});
                                    if (Object.keys(next_vals).length > 0) {
                                        var new_vals = next_vals[dim_val];
                                        var next_widget = $('#_anim_widget{{ id }}_{{ widget_data['next_dim'] }}');
                                        update_widget(next_widget, new_vals);
									}
                                }, {{ throttle }})
                            });
                            slider.keypress(function(event) {
                                if (event.which == 80 || event.which == 112) {
                                    var start = slider.slider("option", "value");
                                    var stop =  slider.slider("option", "max");
                                    for (var i=start; i<=stop; i++) {
                                        var delay = i*{{ delay }};
                                        $.proxy(function doSetTimeout(i) { setTimeout($.proxy(function() {
                                            var val = {value:i};
                                            slider.slider('value',i);
                                            slider.slider("option", "slide")(null, val);
                                        }, slider), delay);
                                        }, slider)(i);
                                    }
                                }
                                if (event.which == 82 || event.which == 114) {
                                    var start = slider.slider("option", "value");
                                    var stop =  slider.slider("option", "min");
                                    var count = 0;
                                    for (var i=start; i>=stop; i--) {
                                        var delay = count*{{ delay }};
                                        count = count + 1;
                                        $.proxy(function doSetTimeout(i) { setTimeout($.proxy(function() {
                                            var val = {value:i};
                                            slider.slider('value',i);
                                            slider.slider("option", "slide")(null, val);
                                        }, slider), delay);
                                        }, slider)(i);
                                    }
                                }
                            });
                            $('#textInput{{ id }}_{{ widget_data['dim'] }}').val((vals[0]*1).toString());
                        });
						// Slider JS Block END
                    </script>
                {% elif widget_data['type']=='dropdown' %}
                    <div class="form-group control-group holoformgroup" style='{{ widget_data['visibility'] }}'>
                        <label for="textInput{{ id }}_{{ widget_data['dim'] }}"><strong>{{ widget_data['dim_label'] }}:</strong></label>
                        <select class="holoselect form-control" id="_anim_widget{{ id }}_{{ widget_data['dim'] }}" >
                        </select>
                    </div>
                    <script>
                        var vals = {{ widget_data['vals'] }};
                        var widget = $("#_anim_widget{{ id }}_{{ widget_data['dim'] }}");
                        for (var i=0; i<vals.length; i++){
                            widget.append($("<option>", {
                                value: i,
                                text: vals[i]
                            }));
                        };
                        widget.data("next_vals", {{ widget_data['next_vals'] }});
                        widget.on('change', function(event, ui) {
                            var dim_val = this.options[this.value].text;
                            if(anim{{ id }}) {
                                anim{{ id }}.set_frame(dim_val, {{ widget_data['dim_idx'] }});
                            }
							var next_vals = $.data(this, "next_vals");
							if (Object.keys(next_vals).length > 0) {
                                var new_vals = next_vals[dim_val];
                                var next_widget = $('#_anim_widget{{ id }}_{{ widget_data['next_dim'] }}');
                                update_widget(next_widget, new_vals);
							}
                        });
                    </script>
                {% endif %}
            {% endfor %}
        </form>
    </div>
</div>


<script language="javascript">
    /* Instantiate the {{ widget_name }} class. */
    /* The IDs given should match those used in the template above. */
    (function() {
        var widget_ids = new Array({{ Nwidget }});
        {% for dim in dimensions %}
            widget_ids[{{ loop.index0 }}] = "_anim_widget{{ id }}_{{ dim }}";
        {% endfor %}
        var frame_data = {{ frames | safe }};
        var dim_vals = {{ init_dim_vals }};
        var keyMap = {{ key_data }};
        var notFound = "{{ notFound }}";

        function create_widget() {
            setTimeout(function() {
                anim{{ id }} = new {{ widget_name }}(frame_data, "{{ id }}", widget_ids,
                        keyMap, dim_vals, notFound, {{ load_json }}, {{ mode }},
                        {{ cached }}, "{{ json_path}}", {{ dynamic }});
            }, 0);
        }

        {% block create_widget %}
            create_widget();
        {% endblock %}
    })();
</script>
