<%
	# generated by biojs-galaxy

    default_title = "exelixis of '" + hda.name + "'"
    info = hda.name
    if hda.info:
        info += ' : ' + hda.info

    # Use root for resource loading.
    root = h.url_for( '/' )
%>
## ----------------------------------------------------------------------------

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>${title or default_title} | ${visualization_display_name}</title>

${h.javascript_link( root + 'plugins/visualizations/exelixis/static/exelixis.min.js' )}

</head>

## ----------------------------------------------------------------------------
<body>
<div>
    <h2>${title or default_title}</h2>
</div>

<div id="galaxyContainer"></div>

<script type="text/javascript">
    var config  = ${h.dumps( config )};
    var hdaJson = ${h.dumps( trans.security.encode_dict_ids( hda.to_dict() ), indent=2 )};
    var dataType = hdaJson.data_type;

    var title   = "${title or default_title}";
    var jsonURL = "${root}api/datasets/"+config.dataset_id+"?data_type=raw_data&provider=base";
    var url = "${root}api/histories/"+config.dataset_id+"/contents/" +config.dataset_id+ "/display";
    var galaxyDiv = document.getElementById("galaxyContainer");
    var relativeURL = "${root}/plugins/visualizations/exelixis";

	var xhr = require("xhr");
xhr(jsonURL, function(err, response,text){
	var data = JSON.parse(text).data;
	
	var exe = require("exelixis");
	var createTree = exe.createTree;
	
	var opts = {
		el : galaxyDiv,
		tree : {
			data : data,	
			width : 500,
			height : 12,
			scale : false,
			layoutInput : "vertical",
		},
		label : {
			fontsize : 12,
			usePics : true, 
			pics : {
				pictureWidth : 30,
				pictureHeight : 40,
			},
		},
		nodes : {
			toggle : true, //allows onClickEvent
			select: true, //allows selections
			size : 5,
			fill : "grey",
			stroke : "black",
			selectedFill : "steelblue",
			selectedSize : 4,
		},
	};

	tree = createTree(opts);

});


</script>

</body>
</html>
