// On cr�e l'objet relations qui va nous permettre d'ajouter des animations et des effets sur les cases de treemap
var r = new Relations();

var couleurs = new Couleurs(20);

//*
var parametresStreamgraphTimeline = {
	name: "streamgraphTimeline",
	selector: "#streamgraphTimeline",
	activerSelection : true,
	activerTimeline: true,
	activerCurseur: true,
	hauteur: 50,
	largeur: 800,
	relations: r,
	couleurs: couleurs
};

var streamgraphTimeline = new Streamgraph(json.clusters, parametresStreamgraphTimeline);
//*/

//*
var parametresTreemap = {
	name: "treemap",
	selector: "#treemap",
	hauteur: 400,
	largeur: 800,
	relations: r,
	template: {
		selector: "#streamgraphTemplate",
		directives: {
			"img@src": "urlImage",
			"img@title": "titreArticle",
			"img@alt": "titreArticle",
			"img@width": "widthImage",
			"img@height": "heightImage",
			"img@style+": "cssOffsetImage",
			"p.title": "titreArticle",
			"p.title@style+": "cssWidthArticle"
		}
	},
	couleurs: couleurs
};
var treemap = new Treemap(json, parametresTreemap);
//*/

//*
r.get("streamgraphTimeline").bind("selectionResize", "treemap", 
		function(objet, params) { objet.transition(params[0], params[1]); });

function placerCurseur(cluster) {
	streamgraphTimeline.placerCurseur(parseInt(cluster.attr("datetime")), 'index');
	streamgraphTimeline.showCursor();
}

function cacherCurseur() {
	streamgraphTimeline.hideCursor();
}

for (var i = 0; i<10; ++i) {
	var cluster = r.get("treemap.cluster." + i);
	cluster.mouseover(treemap.focus)
		.mouseout(treemap.blur)
		.mouseover(placerCurseur)
		.mouseout(cacherCurseur);
}
//*/