{% extends widget_template %}

{% block init_slider %}
{{ widget_name }}.prototype.init_slider = function(init_val){
    if(this.mode == 'nbagg') {
	this.update_cache();
	this.update(0);
	this.set_frame(init_val, 0);
    } else if(this.cached) {
	this.update_cache();
	this.update(0);
    } else {
	this.dynamic_update(0);
    }
}
{% endblock %}


{% block populate_cache %}
{{ widget_name }}.prototype.populate_cache = function(idx){
    var cache_id = this.img_id+"_"+idx;
    if(this.load_json) {
	var data_url = "{{ server }}/" + this.fig_id + "/" + idx;
	if(this.mode == 'd3') {
	    $.getJSON(data_url, (function(cache_id) {
		return function(data) {
		    mpld3.draw_figure(cache_id, data);
		};
	    }(cache_id)));
	} else {
	    this.cache[idx].load(data_url);
	}
    } else {
	if(this.mode == 'd3') {
	    mpld3.draw_figure(cache_id, this.frames[idx]);
	} else {
	    this.cache[idx].html(this.frames[idx]);
	}
    }
}
{% endblock %}


{% block dynamic_update %}
{{ widget_name }}.prototype.dynamic_update = function(current){
    function callback(msg){
	/* This callback receives data from Python as a string
	   in order to parse it correctly quotes are sliced off*/
	if (!(this.mode == 'nbagg')) {
	    if(!(current in this.cache)) {
		var data = msg.content.data['text/plain'].slice(1, -1);
		if(this.mode == 'd3'){
		    data = JSON.parse(data)[0];
		}
		this.frames[current] = data;
		this.update_cache();
	    }
	    this.update(current);
	}
    }
    if((this.mode == 'nbagg') || !(current in this.cache)) {
	var kernel = IPython.notebook.kernel;
	callbacks = {iopub: {output: $.proxy(callback, this)}};
	var cmd = "holoviews.plotting.widgets.NdWidget.widgets['" + this.id + "'].update(" + current + ")";
	kernel.execute("import holoviews;" + cmd, callbacks, {silent : false});
    } else {
	this.update(current);
    }
}
{% endblock %}


{% block create_widget %}
{% if mode == "'d3'" %}
var paths = {};
paths.underscore = "{{ CDN['underscore'] }}";
if (!(typeof(window.mpld3) !== "undefined" && window.mpld3._mpld3IsLoaded)){
    paths.d3 = "{{ CDN['d3'] }}";
}
var require_conf = {paths: paths};
require.config(require_conf);
if ((typeof(window.mpld3) !== "undefined" && window.mpld3._mpld3IsLoaded)){
    require(["underscore"], function(d3){
	create_widget();
    });
} else {
    require(["d3", "underscore"], function(d3){
	window.d3 = d3;
	$.getScript("{{ CDN['mpld3'] }}.js", function(){
            create_widget();
	});
    });
}
{% else %}
{{ super() }}
{% endif %}
{% endblock %}
