$(function(){
var svgWidth=screen.width;
var svgHeight=960;
var actionnaires=[];
var medias=[];
var childrenMedia=[]
var lengthOfTheLongestText=0;


d3.json("actionnaireEtMediafrancais.json", function(data) {
var count=0;
for (elem in data){
	count++;
	actionnaires.push({id:elem,num:count});
	for(var it=0;it<data[elem].length;it++){
		//console.log("actionnaire:"+elem+"-nbenfants:",data[elem].length);
		medias.push({parent:elem,name:data[elem][it].MediaNOM,percent:data[elem][it].possessionPoucentage});
		//console.log("nom medias:",data[elem][it].MediaNOM);
	}
//20-38 nl, we filter the medias
currentActionnaire=[];//temporaire
mediasByActionnaire=[]//liste finale de media par actionnaire
for(var it=0;it <medias.length;it++){
	if(it==0){
		currentActionnaire.push({name:medias[it].name,percent:medias[it].percent});
	}
	if(it>0){
		if(medias[it].parent == medias[it-1].parent){
			currentActionnaire.push({name:medias[it].name,percent:medias[it].percent});
		}else{
			mediasByActionnaire.push({parent:medias[it-1].parent,mediasName:currentActionnaire})
			currentActionnaire=[];
			currentActionnaire.push({name:medias[it].name,percent:medias[it].percent});
		}
	}
	if(it==medias.length-1){
			mediasByActionnaire.push({parent:medias[it].parent,mediasName:currentActionnaire})
	}
}
}


//1nl, le svg principal de notre visualisation:
var svg=createSvg(svgWidth,svgHeight);

/** creation des actionnaires **/
//1nl, the main contenainer that will contain all the g element
var container=createContainer(svg);
//1nl, we add to the container all g element 
container.selectAll('g')
	.data(actionnaires)
	.enter()
	.append('g')
	.attr("transform", function(d, i) { return "translate(10," + i * 40 + ")"; });
//1nl, we add to the g element rect elements
container.selectAll('g').append("rect")
		 .attr("width",100)
		 .attr("height",30)
		 .style("fill","#5F91D5"); 
//and we add the text to the same element g
container.selectAll('g').append("text")
		.attr("x",5)
		.attr("y",15)
		.attr('class',"actionnaire")
		.style("fill","#FFF")
		.text(function(d){
			currentString=''+d.id;
			if(lengthOfTheLongestText<currentString.length)
				lengthOfTheLongestText=currentString.length;

			return currentString;
			 }
		);
//nl,we fix now the size of all the elements 
var containerwidth=$(".containerActionnaire").width();
var containerheight=$(".containerActionnaire").height();
var longestText=$(".containerActionnaire").width();
svg.attr("height",containerheight+100);
	svg.select('g').selectAll('g').selectAll('rect').attr("width",longestText+5);
	console.log("nb actionnaires: ",count);
	console.log("container height: ",containerheight+20);
	console.log("top text length: ",lengthOfTheLongestText);
	/*
	console.log("childrenMedia1: ",childrenMedia[0].name);
	console.log("childrenMedia2: ",childrenMedia[1].name);
	console.log("childrenMedia3: ",childrenMedia[1].name);
	console.log("childrenMedia4: ",childrenMedia[1].name);
	*/





/** creation des medias **/
//1nl, the main contenainer that will contain all the g element
var containerMedias=createContainer(svg);
containerMedias.attr("class","containerMedias");
containerMedias.selectAll('g')
	.data(mediasByActionnaire)
	.enter()
	.append('g')
	.attr("transform", function(d, i) { return "translate("+(longestText+60)+','+ i * 40 + ")"; });

containerMedias.selectAll('g').append("rect")
		 .attr("width",100)
		 .attr("height",30)
		 .attr("class","rectMedias")
		 .style("fill","#F36161"); 

containerMedias.selectAll('g').append("text")
		.attr("x",5)
		.attr("y",15)
		.attr('class',"actionnaire")
		.style("fill","#FFF")
		.text(function(d){
			currentString=JSON.stringify(d.mediasName);
			if(lengthOfTheLongestText<currentString.length){
				lengthOfTheLongestText=currentString.length;
			}
				currentString=[]
			for(mediaElem in d.mediasName){
				currentString.push(d.mediasName[mediaElem].name+'['+d.mediasName[mediaElem].percent+']')
			}

			return currentString;
			 }
		);
var containerMediawidth=$(".containerMedias").width();
var containerMediaheight=$(".containerMedias").height();


var longestTextMedias=$(".containerMedias").width();
$(".rectMedias").attr("width",longestTextMedias+5);
svg.attr("width",containerwidth+containerMediawidth+100);
console.log("longestTextMedias:",longestTextMedias);
console.log("final svg width:",$("svg").width());

//nl, pour les phrases trop longue, une idée utiliser d3plus, a voir....
/*
d3plus.textwrap()
  .container(d3.select("text"))
  .draw();
*/
});/*the end*/
})