/**
 * Creation of a treemap
 */

/**
 * Parameters is the object containing basics initialization parameters
 */
function Treemap(json, parametres) {
	this.parametres = {
		name: null,
		hauteur: 300,
		largeur: 500,
		selector: "#treemap",
		
		couleurs: null,
		relations: null,
		
		contenu: null,
		template: null,
	
		transitionDuration: 1000
	};
	
	this.etendre(parametres);
	
	/* -- Gestion des valeurs par défaut -- */
	if (null==this.parametres.name) {
		this.parametres.name = this.parametres.selector;
	}
	if (null==this.parametres.contenu) {
		if (null!=this.parametres.template) {
			this.template = jQuery(this.parametres.template.selector);
			this.template.remove();
			this.parametres.contenu = this.renderContenu;
			
			// Check for forgotten values
			this.setDefaultValue(this.parametres.template.maxTextSpace, 50);
			this.setDefaultValue(this.parametres.template.minFontSize, 1);
		}
		else {
			this.parametres.contenu = this.defaultContent;
		}
	}
	
	/* -- Initialisation d'attributs -- */
	var object = this;
	this.treemap = null;
	this.dataTreemap = null;
	this.articles = null;
	this.treemapHtml = null;

	this.dataJSON = json;	
	this.dataTreemap = this.getDataTreemap(json);
	this.articles = this.dataJSON.articles[0];
	
	this.duree = this.dataJSON.clusters[0].timeline.length;
	this.nbClusters = this.dataJSON.clusters.length;
	this.nbArticles = this.articles.length;
	
	/* -- Create the treemap -- */
	
	if (null==this.parametres.couleurs) {
		this.parametres.couleurs = new Couleurs(this.nbClusters);
	}
	
	this.treemap = d3.layout.treemap()
		.size([this.parametres.largeur, this.parametres.hauteur])
		.sticky(true)
		.value(function(d) { 
			return object.comptage(d); 
		});
		
	this.treemapHtml = d3.select("#treemap").append('div')
		.style('position', 'relative')
		.style('width', this.parametres.largeur + 'px')
		.style('height', this.parametres.hauteur + 'px')
		.style('background-color', '#32375F');
		
	this.treemapHtml.data(this.dataTreemap).selectAll("div")
		.data(this.treemap.nodes).enter().append("div")
			.attr('class', 'cell')
			.style('background-color', function(datum) {
				return d.children? null: object.parametres.couleurs.get(datum.id);
			})
			.call(this.sizeCell)
			.html(function(d) { 
				return d.children? null: object.getContent(d); 
			})
			.attr("datetime", function(d) {
				return d.children? 0: object.articles[d.idMax].date;
			});
	
	/* -- Register items in relations -- */
	
	if (null!=this.parametres.relations) {
		this.parametres.relations.add(this.parametres.name, this);
		
		this.treemapHtml.selectAll("div")
			.each(function(datum) {
				var item = d3.select(this);
				datum["relationName"] = object.parametres.name +'.'+ datum.name;
				object.parametres.relations.add(datum.relationName, item);
			});
	}
};

Treemap.prototype = {
	constructor: Treemap,
	
	etendre: function(parametres) {
		if (null==parametres || "object"!=typeof(parametres)) {
			return;
		}
		
		for (var cle in parametres) {
			this.parametres[cle] = parametres[cle];
		}
	},
	
	setDefaultValue: function(attribute, value) {
		if (undefined==attribute || null==attribute) {
			attribute = value;
		}
	},
	
	// calcule la taille d'un cluster (somme de tout les articles)
	// et l'élément de poids maximal
	comptage : function(datumCell, start, end) {
		var compteursize = 0, idMax = 0, poidsMax = 0;
		var timeline = datumCell.timeline;
		
		var tStart = (start==null || start<0)? 0: start;
		var tEnd = (end==null || end>timeline.length)? 
				timeline.length: end;
		var index, endIndex, articleId;
		for (var t=tStart; t<tEnd; t++) { //boucle sur les t de la timeline
			compteursize+= timeline[t].length;
			for (index = 0, endIndex = timeline[t].length; 
				index < endIndex; ++index) {
				articleId = timeline[t][index];
				if (this.articles[articleId].poids > poidsMax) {
					poidsMax = this.articles[articleId].poids;
					idMax = articleId;
				}
			}
		}
		
		datumCell.poidsMax = poidsMax;
		datumCell.idMax = idMax;
		return compteursize;
	},
	
	getContent: function(datumCell, start, end) {
		if (null!=this.parametres.contenu) {
			return this.parametres.contenu.call(
				this, datumCell, this.articles[datumCell.idMax]);
		}
		else {
			return this.articles[datumCell.idMax].titre;
		}
	},

	getDataTreemap : function(json, start, end) {
		var data = { name : "data", children : []};
		var clusters = json.clusters;
		
		for (var i=0, _end=clusters.length; i<_end; i++) { // parcours les differents clusters
			var cluster = { id: clusters[i].numero, name : "cluster." + clusters[i].numero, timeline : clusters[i].timeline };
			data.children.push(cluster);
		}
		
		return [data];
	},

	sizeCell: function() {
		this.style("left", function(d) { return d.x + "px"; })
			.style("top", function(d) { return d.y + "px"; })
			.style("width", function(d) { return d.dx - 1 + "px"; })
			.style("height", function(d) { return d.dy - 1 + "px"; });
	},
	
	focus: function(map) {
		map.classed("selected", true)
			.transition()
			.duration(150)
			.delay(50)
			.style("opacity", 0.5);
	},
	
	blur: function(map) {
		map.classed("selected", false)
			.transition()
			.duration(100)
			.delay(50)
			.style("opacity", 1);
	},
	
	transition: function(start, end) {
		var object = this;
		// To avoid conflicts while elements are hovered, lock the actions
		
		this.treemapHtml.selectAll("div")
			.each(function(datum) {
				object.parametres.relations.get(datum.relationName)
						.lock();
			})
			.data(this.treemap.value(function(d) {
				return object.comptage(d, start, end); 
			}))
			.attr("datetime", function(d) {
				return d.children? 0: object.articles[d.idMax].date;
			})
			.html(function(d) { return d.children? null: object.getContent(d, start, end); })
			.transition()
				.duration(this.parametres.transitionDuration)
				.call(this.sizeCell)
				// Free the lock
				.each("end", function(datum) {
					object.parametres.relations.get(datum.relationName)
						.unlock();
				});
	},
	
	defaultContent: function(cellule, article) {
		var html;
		var img = article.image;
		var wi, hi, wc, hc, w, h, r;
		
		wi = img.largeur;
		hi = img.hauteur;
		wc = cellule.dx - 1;
		hc = cellule.dy - 1;
		r = Math.min(hi/hc, wi/wc);
		w = wi/r;
		h = hi/r;
		
		var posx, posy;
		posx = -(w-wc)/2;
		posy = -(h-hc)/2;
		
		html = "<img class = 'img' src = \"" + img.url + "\" style=\" width:"+ w + "px; height:" +h + "px; margin-top:" + posy + "px; margin-left:" + posx + "px;\" />";
		html += "<p class = 'title' style = \" width:" + wc + "px;\" >" + article.titre + "</p>";
		
		return html;
	},
	
	renderContenu: function(cellule, article) {
		var image = article.image;
		
		var wi = image.largeur,
			hi = image.hauteur,
			wc = cellule.dx - 1,
			hc = cellule.dy - 1,
			r = Math.min(hi/hc, wi/wc),
			w = wi/r,
			h = hi/r,
			posx = -(w-wc)/2,
			posy = -(h-hc)/2;
		
		var data = {
			'urlImage': image.url,
			'widhtImage': w +"px",
			'heightImage': h +"px",
			'cssOffsetImage': "margin-top: "+ posy +"px; margin-left: "+posx +"px;",
			'titreArticle': article.titre,
			'dateArticle': article.date,
			'widthArticle': wc +"px",
			'heightArticle': hc +"px",
			'cssWidthArticle': "width:" +wc +"px;",
			'cssHeightArticle': "height:" +hc +"px;",
			'cssDimensionsArticle': "width:" +wc +"px;height:" +hc +"px;",
			'dateArticle': article.date
		};
		
		return this.template
			.render(data, this.parametres.template.directives).html();
	},
	
	on: function(event, action) {
		switch(event) {
		default:
			this.treemapHtml.on(event, action);
		}
	}
};