var StampView = function(stamp){
  this.stamp = stamp;
}

StampView.prototype = {
  getLangData:function(){
    var langSum = 0;
    var langArray = d3.entries(this.stamp.data.langTotals)
      .map(function(d){
        langSum += d.value;
        return d;
      })
    langArray.map(function(d){
      var v = d.value;
      d.value = {
        total: v,
        avg: v/langSum*100
      }
      return d;
    })
    langArray.sort(function(b,a){return a.value.total-b.value.total})
    return {langArray:langArray,langSum:langSum};
  },
  makeScale:function(domainMax,rangeMax){
    return d3.scale.linear().domain([0,domainMax]).range([0,rangeMax])
  },
  makeStampSvg:function(stampsDiv){
    return d3.select(stampsDiv[0]).append('svg').attr('height',400).attr('width',500);
  },
  makeLangComposite:function(g,langArray,langSum){
    var xScale = this.makeScale(langSum,500);
    g.selectAll('rect').data(langArray).enter().append('rect')
      .attr('transform',function(d,i){
        var offset = 0;
        for (var b=0;b<i;b++){
          offset += xScale(langArray[b].value.total);
        }
        return 'translate('+offset+',0)'
      })
      .style('height',20)
      .style('width',function(d){
        var w = xScale(d.value.total);
        return w;
      })
      .style('fill',function(d){
        return githubColors[d.key];
      })
      .on("mouseover",langHover)
      .on("mousemove",langHover)
      .on("mouseleave",langUnhover);
  },
  getRepoLangData:function(){
    var data = d3.entries(this.stamp.data.languages).map(function(d){return d});
    var repoMax = 0;
    var repoLangs = data
      .filter(function(d){return Object.keys(d.value).length>1})
      .sort(function(a,b){
        return Date.parse(a.value.meta['last-modified']) - Date.parse(b.value.meta['last-modified'])
      })
    repoLangs.forEach(function(repo){
      var thisSum = 0;
      for (val in repo.value){
        if(val!=='meta'){thisSum+=repo.value[val]}
      }
      if(thisSum > repoMax){repoMax = thisSum}
    });
    return {repoLangs:repoLangs, repoMax:repoMax};
  },
  makeRepoComposite:function(g,data,repoMax){
    var xScale = this.makeScale(data.length,500);
    var yScale = this.makeScale(repoMax,300);
    var w = data.length/500;
    var repos = g.selectAll('.repo').data(data).enter().append('g').attr('class','repo')
      .attr('transform',function(d,i){return 'translate('+xScale(i)+',0)'});
    // repos.
  },
  render: function(stampsDiv){
    var svg = this.makeStampSvg(stampsDiv);
    var langSummary = this.getLangData();
    var langArray = langSummary.langArray;
    var langSum = langSummary.langSum;
    var langComposite = svg.append('g').attr('class','languageComposite')
      .attr('transform','translate(0,20)');

    var repoSummary = this.getRepoLangData();
    var repoLangs = repoSummary.repoLangs;
    var repoMax = repoSummary.repoMax;
    var langRepos = svg.append('g').attr('class','languageRepos')
      .attr('transform','translate(0,60)');
    this.makeLangComposite(langComposite,langArray,langSum);
    this.makeRepoComposite(langRepos,repoLangs,repoMax);
  }
}

function langHover(d){
  d3.select('.tooltip')
    .style('top',(d3.event.pageY+10)+"px")
    .style('left',(d3.event.pageX+10)+"px")
    .text(d.key+": "+d.value.total+ " bytes, "+d3.round(d.value.avg,2)+"%")
    .style('opacity',1)
}
function langUnhover(d){
  d3.select('.tooltip').style('opacity',0)
}

@@ -1541,16 +1541,23 @@
 nguages)
+%0A      
 .map(fun
@@ -1565,24 +1565,210 @@
 tion(d)%7B
-return d
+%0A        var values = d3.entries(d.value).filter(function(a)%7Breturn a.key!=='meta'%7D)%0A        return %7B%0A          key: d.key,%0A          meta: d.value.meta,%0A          value: values%0A        %7D%0A      
 %7D);%0A    
@@ -1846,36 +1846,23 @@
 urn 
-Object.keys(
 d.value
-)
 .length%3E
 1%7D)%0A
@@ -1857,17 +1857,17 @@
 .length%3E
-1
+0
 %7D)%0A     
@@ -1916,22 +1916,16 @@
 parse(a.
-value.
 meta%5B'la
@@ -1954,22 +1954,16 @@
 parse(b.
-value.
 meta%5B'la
@@ -2043,24 +2043,48 @@
 hisSum = 0;%0A
+      console.log(repo)%0A
       for (v
@@ -2088,13 +2088,16 @@
  (va
-l in 
+r i=0;i%3C
 repo
@@ -2102,16 +2102,27 @@
 po.value
+.length;i++
 )%7B%0A     
@@ -2128,25 +2128,8 @@
     
-if(val!=='meta')%7B
 this
@@ -2148,13 +2148,17 @@
 lue%5B
-val%5D%7D
+i%5D.value;
 %0A   
@@ -2213,24 +2213,49 @@
 um%7D%0A    %7D);%0A
+    console.log(repoMax)%0A
     return %7B
@@ -2452,16 +2452,20 @@
 var w = 
+500/
 data.len
@@ -2471,12 +2471,8 @@
 ngth
-/500
 ;%0A  
@@ -2642,18 +2642,247 @@
 %0A   
- //
  repos.
+selectAll('rect').data(function(d)%7Breturn d.value%7D).enter().append('rect')%0A      .attr('height',function(d)%7B%0A        return yScale(d.value)%0A      %7D)%0A      .attr('width',w)%0A      .style('fill',function(d)%7Breturn githubColors%5Bd.key%5D%7D)
 %0A  %7D

add stacked bar for each repo