// IMPORTANT TODO: Namespace

var ${ id }contents=["",
 %for t in items:
 ${t[1]['content']} , 
 %endfor
 ""
       ];

var ${ id }types=["",
 %for t in items:
 "${t[1]['type']}" , 
 %endfor
 ""
       ];

var ${ id }init_functions=["",
 %for t in items:
	       function(){ ${t[1]['init_js']} }, 
 %endfor
	       ""];

var ${ id }destroy_functions=["",
 %for t in items:
	       function(){ ${t[1]['destroy_js']} }, 
 %endfor
	       ""];

var ${ id }loc = -1;

function ${ id }goto(i) {
    log_event("seq_goto", {'old':${id}loc, 'new':i,'id':'${id}'});

    postJSON('/modx/sequential/${ id }/goto_position',
	     {'position' : i });

    if (${ id }loc!=-1)
	${ id }destroy_functions[ ${ id }loc ]();
    $('#seq_content').html(${ id }contents[i]);
    ${ id }init_functions[i]()
	       //$('#tt_'+${ id }loc).attr("style", "background-color:gray");
	       $('#tt_'+${ id }loc).removeClass();
	       $('#tt_'+${ id }loc).addClass("seq_"+${ id }types[${ id }loc]+"_visited");
    ${ id }loc=i;
    //$('#tt_'+i).attr("style", "background-color:red");
    $('#tt_'+i).removeClass();
    $('#tt_'+i).addClass("seq_"+${ id }types[${ id }loc]+"_active");

    MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
}

function ${ id }setup_click(i) {
        $('#tt_'+i).click(function(eo) { ${ id }goto(i);});
	$('#tt_'+i).addClass("seq_"+${ id }types[i]+"_inactive");

}

function ${ id }next() { 
    var i=${ id }loc+1;
    log_event("seq_next", {'old':${id}loc, 'new':i,'id':'${id}'});
    if(i > ${ len(items) } ) i = ${ len(items) };
    ${ id }goto(i);
}

function ${ id }prev() { 
    var i=${ id }loc-1;
    log_event("seq_prev", {'old':${id}loc, 'new':i,'id':'${id}'});
    if (i < 1 ) i = 1;
    ${ id }goto(i);
}

$(function() {
	var i; 
	for(i=1; i<${ len(items)+1 }; i++) {
	    ${ id }setup_click(i);
	}
        $('#${ id }next').click(function(eo) { ${ id }next();});
        $('#${ id }prev').click(function(eo) { ${ id }prev();});
	${ id }goto( ${ position } );
    });