!function(){
	var bP={};	
	var b=30, bb=200, height=600, buffMargin=1, minHeight=14;
	//var c1=[-180, 40], c2=[-50, 160], c3=[0, 210]; //Column positions of labels.
	var c1=[-200, 40], c2=[-53, 250], c3=[-2, 300]; 
	//var colors =["#FF99CC", "#66CCCC", "#FFCC33", "#6666CC", "#99CC33", "#99CCFF", "#999999", "#CC6699", "#0099CC", "#FF9900"];
	var colors = ["#000000"]
	
	bP.partData = function(data,p){
		var sData={};
		
		sData.keys=[
			d3.set(data.map(function(d){ return d[0];})).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);}),
			d3.set(data.map(function(d){ return d[1];})).values().sort(function(a,b){ return ( a<b? -1 : a>b ? 1 : 0);})		
		];
		
		sData.data = [	sData.keys[0].map( function(d){ return sData.keys[1].map( function(v){ return 0; }); }),
						sData.keys[1].map( function(d){ return sData.keys[0].map( function(v){ return 0; }); }) 
		];
		
		data.forEach(function(d){ 
			sData.data[0][sData.keys[0].indexOf(d[0])][sData.keys[1].indexOf(d[1])]=d[p];
			sData.data[1][sData.keys[1].indexOf(d[1])][sData.keys[0].indexOf(d[0])]=d[p]; 
		});
		
		return sData;
	}
	
	function visualize(data){
		var vis ={};
		function calculatePosition(a, s, e, b, m){
			var total=d3.sum(a);
			var sum=0, neededHeight=0, leftoverHeight= e-s-2*b*a.length;
			var ret =[];
			
			a.forEach(
				function(d){ 
					var v={};
					v.percent = (total == 0 ? 0 : d/total); 
					v.value=d;
					v.height=Math.max(v.percent*(e-s-2*b*a.length), m);
					(v.height==m ? leftoverHeight-=m : neededHeight+=v.height );
					ret.push(v);
				}
			);
			
			var scaleFact=leftoverHeight/Math.max(neededHeight,1), sum=0;
			
			ret.forEach(
				function(d){ 
					d.percent = scaleFact*d.percent; 
					d.height=(d.height==m? m : d.height*scaleFact);
					d.middle=sum+b+d.height/2;
					d.y=s + d.middle - d.percent*(e-s-2*b*a.length)/2;
					d.h= d.percent*(e-s-2*b*a.length);
					d.percent = (total == 0 ? 0 : d.value/total);
					sum+=2*b+d.height;
				}
			);
			return ret;
		}

		vis.mainBars = [ 
			calculatePosition( data.data[0].map(function(d){ return d3.sum(d);}), 0, height, buffMargin, minHeight),
			calculatePosition( data.data[1].map(function(d){ return d3.sum(d);}), 0, height, buffMargin, minHeight)
		];
		
		vis.subBars = [[],[]];
		vis.mainBars.forEach(function(pos,p){
			pos.forEach(function(bar, i){	
				calculatePosition(data.data[p][i], bar.y, bar.y+bar.h, 0, 0).forEach(function(sBar,j){ 
					sBar.key1=(p==0 ? i : j); 
					sBar.key2=(p==0 ? j : i); 
					vis.subBars[p].push(sBar); 
				});
			});
		});
		vis.subBars.forEach(function(sBar){
			sBar.sort(function(a,b){ 
				return (a.key1 < b.key1 ? -1 : a.key1 > b.key1 ? 
						1 : a.key2 < b.key2 ? -1 : a.key2 > b.key2 ? 1: 0 )});
		});
		
		vis.edges = vis.subBars[0].map(function(p,i){
			return {
				key1: p.key1,
				key2: p.key2,
				y1:p.y,
				y2:vis.subBars[1][i].y,
				h1:p.h,
				h2:vis.subBars[1][i].h
			};
		});
		vis.keys=data.keys;
		return vis;
	}
	
	function arcTween(a) {
		var i = d3.interpolate(this._current, a);
		this._current = i(0);
		return function(t) {
			return edgePolygon(i(t));
		};
	}
	
	function drawPart(data, id, p){
		d3.select("#"+id).append("g").attr("class","part"+p)
			.attr("transform","translate("+( p*(bb+b))+",0)");
		d3.select("#"+id).select(".part"+p).append("g").attr("class","subbars");
		d3.select("#"+id).select(".part"+p).append("g").attr("class","mainbars");
		
		var mainbar = d3.select("#"+id).select(".part"+p).select(".mainbars")
			.selectAll(".mainbar").data(data.mainBars[p])
			.enter().append("g").attr("class","mainbar");

		mainbar.append("rect").attr("class","mainrect")
			.attr("x", 0).attr("y",function(d){ return d.middle-d.height/2; })
			.attr("width",b).attr("height",function(d){ return d.height; })
			.style("shape-rendering","auto")
			.style("fill-opacity",0).style("stroke-width","0.5")
			.style("stroke","black").style("stroke-opacity",0);
			
		mainbar.append("text").attr("class","barlabel")
			.attr("x", c1[p]).attr("y",function(d){ return d.middle+5;})
			.text(function(d,i){ return data.keys[p][i];})
			.attr("text-anchor","start" );
			
		mainbar.append("text").attr("class","barvalue")
			.attr("x", c2[p]).attr("y",function(d){ return d.middle+5;})
			.text(function(d,i){ return d.value ;})
			.attr("value",function(d,i){ return d.value ;})
			.attr("text-anchor","end");
			
		mainbar.append("text").attr("class","barpercent")
			.attr("x", c3[p]).attr("y",function(d){ return d.middle+5;})
			.text(function(d,i){ if((100*d.percent)<0.1){
			return "("+0.1+"%)" }
			else{return "("+(100*d.percent).toFixed(1)+"%)" ;}})
			.attr("text-anchor","end").style("fill","grey");
			
		d3.select("#"+id).select(".part"+p).select(".subbars")
			.selectAll(".subbar").data(data.subBars[p]).enter()
			.append("rect").attr("class","subbar")
			.attr("x", 0).attr("y",function(d){ return d.y})
			.attr("width",b).attr("height",function(d){ return d.h})
			.style("fill",function(d){ return colors[d.key1];});
	}
	
	function drawEdges(data, id){
		d3.select("#"+id).append("g").attr("class","edges").attr("transform","translate("+ b+",0)");

		d3.select("#"+id).select(".edges").selectAll(".edge")
			.data(data.edges).enter().append("polygon").attr("class","edge")
			.attr("points", edgePolygon).style("fill",function(d){ return colors[d.key1];})
			.style("opacity",0.5).each(function(d) { this._current = d; });	
	}	
	
	function drawHeader(header, id){
		d3.select("#"+id).append("g").attr("class","header").append("text").text(header[2])
			.style("font-size","20").attr("x",130).attr("y",-20).style("text-anchor","middle")
			.style("font-weight","bold");
		
		[0,1].forEach(function(d){
			var h = d3.select("#"+id).select(".part"+d).append("g").attr("class","header");
			
			h.append("text").text(header[d]).attr("x", (c1[d]+5))
				.attr("y", -5).style("fill","grey");
			
			h.append("text").text("Traffic").attr("x", (c2[d]-40))
				.attr("y", -5).style("fill","grey");
			
			h.append("line").attr("x1",c1[d]-10).attr("y1", -2)
				.attr("x2",c3[d]+5).attr("y2", -2).style("stroke","black")
				.style("stroke-width","1").style("shape-rendering","crispEdges");
		});
	}
	
	//tips
	var populationData = {};
	var tip = d3.tip()
			  .attr('class','d3-tip')
			  .offset([-10,0])
			  .html(function(d){
			  	 var data = populationData[0]["data"]["data"][1];
			  	 //console.log(data);
			  	 var key = populationData[0]["data"]["keys"][1];
			  	 //console.log(key);
			  	 var stateData = {};
			  	 var i =  0;
				 data.forEach(function(d){
						stateData[key[i]]  = data[i]; 
						i++;
					});
			  	 
			  	 return d.id;
			  });
			  
			  
	
	function drawMap(svg){
		var w = 700;
		var h = 700;
		var projection = d3.geo.albersUsa()
			   .translate([w/2, h/2])
			   .scale([700]);
		var path = d3.geo.path()
				.projection(projection);

			//Load in GeoJSON data
		d3.json("us-state.json", function(json) {				
			g = svg.append("g")
			.attr("class", "created")
			.selectAll("path")
			.data(json.features)
    		.enter()
			.append("path")
    		.attr("d", path)
    		.attr("transform", "translate(380,-150)")
    		.style("fill","white").style('stroke', '#666').style('stroke-width', 0.5);
    		
    	});
	}
	
	function edgePolygon(d){
		return [0, d.y1, bb, d.y2, bb, d.y2+d.h2, 0, d.y1+d.h1].join(" ");
	}	
	
	function transitionPart(data, id, p){
		var mainbar = d3.select("#"+id).select(".part"+p).select(".mainbars")
			.selectAll(".mainbar").data(data.mainBars[p]);
		
		mainbar.select(".mainrect").transition().duration(500)
			.attr("y",function(d){ return d.middle-d.height/2;})
			.attr("height",function(d){ return d.height;});
			
		mainbar.select(".barlabel").transition().duration(500)
			.attr("y",function(d){ return d.middle+5;})
			.text(function (d,i){if(d.value==0){return ""}else{return data.keys[p][i];}});
			
		mainbar.select(".barvalue").transition().duration(500)
			.attr("y",function(d){ return d.middle+5;}).text(function(d,i){ if(d.value==0){return "";}
			else{return d.value;}});
			
		mainbar.select(".barpercent").transition().duration(500)
			.attr("y",function(d){ return d.middle+5;})
			.text(function(d,i){ if(d.value==0){return "";}
			else if((100*d.percent)<0.1){return "(0.1%)";}
			else{return "("+(100*d.percent).toFixed(1)+"%)" ;}});
			
		d3.select("#"+id).select(".part"+p).select(".subbars")
			.selectAll(".subbar").data(data.subBars[p])
			.transition().duration(500)
			.attr("y",function(d){ return d.y}).attr("height",function(d){ return d.h});
	}
	
	function transitionEdges(data, id){
		d3.select("#"+id).append("g").attr("class","edges")
			.attr("transform","translate("+ b+",0)");

		d3.select("#"+id).select(".edges").selectAll(".edge").data(data.edges)
			.transition().duration(500)
			.attrTween("points", arcTween)
			.style("opacity",function(d){ return (d.h1 ==0 || d.h2 == 0 ? 0 : 0.5);});	
	}
	
	function transition(data, id){
		transitionPart(data, id, 0);
		transitionPart(data, id, 1);
		transitionEdges(data, id);
	}
	
	bP.draw = function(data, svg){
		//drawMap(svg)
		//populationData = data;
		//svg.call(tip);
		//d3.selectAll(".d3-tip");
		data.forEach(function(biP,s){
			svg.append("g")
				.attr("id", biP.id)
				.attr("transform","translate("+ (550*s)+",0)");
				
			var visData = visualize(biP.data);
			drawPart(visData, biP.id, 0);
			drawPart(visData, biP.id, 1); 
			drawEdges(visData, biP.id);
			drawHeader(biP.header, biP.id);
			
			
			[0,1].forEach(function(p){			
				d3.select("#"+biP.id)
					.select(".part"+p)
					.select(".mainbars")
					.selectAll(".mainbar")
					.on("mouseover",function(d, i){ return bP.selectSegment(data, p, i,svg); })
					.on("mouseout",function(d, i){ return bP.deSelectSegment(data, p, i,svg); });
					// .on("mouseover",function(d, i){ return bP.clickSegment(data, p, i,svg); });	
			});
		});	
	}
	/*
	function sleep(seconds) 
	{
  		var e = new Date().getTime() + (seconds * 1000);
  		while (new Date().getTime() <= e) {}
	}
	var flag = true;*/
	bP.selectSegment = function(data, m, s,svg){
		
		data.forEach(function(k){
			var newdata =  {keys:[], data:[]};	
				
			newdata.keys = k.data.keys.map( function(d){ return d;});
			
			newdata.data[m] = k.data.data[m].map( function(d){ return d;});
			
			newdata.data[1-m] = k.data.data[1-m]
				.map( function(v){ return v.map(function(d, i){ return (s==i ? d : 0);}); });
			
			transition(visualize(newdata), k.id);
				
			var selectedBar = d3.select("#"+k.id).select(".part"+m).select(".mainbars")
				.selectAll(".mainbar").filter(function(d,i){ return (i==s);});
			
			selectedBar.select(".mainrect").style("stroke-opacity",1);			
			selectedBar.select(".barlabel").style('font-weight','bold');
			selectedBar.select(".barvalue").style('font-weight','bold');
			selectedBar.select(".barpercent").style('font-weight','bold');	
			
		});
		//removeCreatedGroup = d3.select("g").selectAll(".created").remove();
		
		
		if(m==0){
			removeCreatedGroup = d3.select("g").selectAll(".created").remove();
			
			
			var chosenData = data["0"]["data"]["data"][0][s];
			var chosenState = data["0"]["data"]["keys"][1];
			var sortArray = {};
			var i =  0;
			chosenData.forEach(function(d){
				sortArray[chosenState[i]]  = chosenData[i]; 
				i++;
			});
			var keys = [];
			for(var key in sortArray) keys.push(key);
			var afterSort = keys.sort(function(a,b){return sortArray[b]-sortArray[a]});
			var statesHL = afterSort.slice(0,10);

/*
			var w = 700;
			var h = 700;
			var projection = d3.geo.albersUsa()
			   .translate([w/2, h/2])
			   .scale([700]);
			var path = d3.geo.path()
				.projection(projection);
			//Load in GeoJSON data


			d3.json("us-state.json", function(json) {				
				g = svg.append("g")
				.attr("class", "created")
				.selectAll("path")
				.data(json.features)
    			.enter()
				.append("path")
    			.attr("d", path)
    			.attr("transform", "translate(380,-150)")
    			.style('stroke', '#666')
    			.style('stroke-width', 0.5)
    			.style("fill",function(d){
    				var statesName = d.properties.name;
    				if(statesHL.indexOf(statesName)>-1){
    					return colors[s];
    				}else{
    					return "white"; }
    			})
    			.style("fill-opacity",function(d){
    				var statesName = d.properties.name;
    				if(statesHL.indexOf(statesName)>-1){
    					var index = statesHL.indexOf(statesName)
    					return 1-index/10;
    				}else{return 1;}
    			});
    			
    			svg.selectAll('.created').selectAll("text")
   			 	.data(json.features)
    			.enter()
    			.append("svg:text")
    			.text(function(d){
    				var statesName = d.properties.name;
    					if(statesHL.indexOf(statesName)>-1){
    						return statesShortName[statesName];
    					}else{
    						return ""; }
    					})
   				.attr("x", function(d){
   					if(path.centroid(d)[0]){
       					return path.centroid(d)[0]+380;
       			 	}
    			})
    			.attr("y", function(d){
    				if(path.centroid(d)[1]){
        				return  path.centroid(d)[1]-150;
        			}
   				})
    			.attr("text-anchor","middle")
    			.attr('fill','#444');
			}); */
		}
	}	
	
	bP.deSelectSegment = function(data, m, s,svg){
		data.forEach(function(k){
			transition(visualize(k.data), k.id);
			
			var selectedBar = d3.select("#"+k.id).select(".part"+m).select(".mainbars")
				.selectAll(".mainbar").filter(function(d,i){ return (i==s);});
			
			selectedBar.select(".mainrect").style("stroke-opacity",0);			
			selectedBar.select(".barlabel").style('font-weight','normal');
			selectedBar.select(".barvalue").style('font-weight','normal');
			selectedBar.select(".barpercent").style('font-weight','normal');
		});
		
		
		//drawMap(svg);
	
			
	}
	

	
	
	
	this.bP = bP;
}();