const margin={top:50,right:50,bottom:50,left:50},
      width=$(".plot").width()-margin.left-margin.right,
      height=$(".plot").height()-margin.top-margin.bottom;

//const tooltip=d3.select(".plot").append("div").attr("class","tooltip");    
const svg = d3.select('.plot')
              .append('svg')
              .attr('width', width + margin.left + margin.right)
              .attr('height', height + margin.top + margin.bottom)
              .append('g')
              .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
                 
const button=["user1","user2"];
const click=d3.select(".click").selectAll("button")
              .data(button).enter()
              .append("button").attr("id",(d,i)=>{return d})
              .append("text").text((d)=>{return d});

const bar=svg.append("g");

//x y scale
const dateStart=new Date(2016,07,01),dateEnd=new Date(2017,01,24);
const x = d3.scaleTime().range([0,width]).domain([dateStart,dateEnd]),
//const x = d3.scaleTime().rangeRound([0,width]).domain([dateStart,dateEnd]),
      y = d3.scaleLinear().range([height,0]).domain([0,118]);

const xAxis = d3.axisBottom(x);
const yAxis = d3.axisLeft(y).tickValues([0,50,100]);

const x_Axis=svg.append("g")
    .attr("class","x-axis")
    .call(xAxis)
    .attr("transform","translate("+0+","+height+")")
    .selectAll("text")
    .attr("transform","rotate(30)")
    .style("text-anchor","strat")
    .attr("dx", "2em")
    .attr("dy", "1em")
    
const y_Axis=svg.append("g")
    .attr("class","y-axis").call(yAxis).selectAll(".tick")
    .attr("stroke-width",0.2)
    .select("text")
    .attr("dx", "-.2em")
//    .attr("transform","translate("+(-width-gridSize*2)+","+0+")")
    .style("text-anchor","end");
   



///load in data/
d3.queue()
  .defer(d3.json,"user1.json")
  .defer(d3.json,"user2.json")
  .await(ready);

function ready (error,user1,user2) {
	 if (error) throw error;
        
    
        //create bottom click
        const dataset=[user1,user2];
              drawBarchart(dataset[0])


        click
        .on("click",(d)=>{

        const index=button.indexOf(d),
              data=dataset[index];
              drawBarchart(data);
//              $(".tooltip").css("visibility","visible")
        });

}




function drawBarchart(d){

/////////////////////////////////////////////////////////////////
//////////////////////draw bars//////////////////////////////////
/////////////////////////////////////////////////////////////////
      
     const formatTime = d3.timeFormat("%B %d, %Y");
     
     //enter  
     const update=bar.selectAll(".bar").data(d);
    
     //update
     update.enter().append("rect").merge(update)
      .attr("class", "bar")
      .attr("x", function(d) { return x(new Date(formatTime(new Date(d.date)))); })
      .attr("y", function(d) { return y(0); })
      .attr("height", function(d) { return height - y(0); })
      .attr("width", "2")
      .transition().duration(800)
      .attr("height", function(d) { return height - y(d.count); })
      .attr("y", function(d) { return y(d.count); });
    
    //remove
    update.exit().remove();

//hover over tooltip
    bar.selectAll(".bar")
        .on("mouseover",(d,i)=>{
        
        
        //change color of the bar
//        update.style("fill","blue")
        console.log(d);
//        d3.select(this).attr("class","select");
        var tip=d3.select(".tooltip");
        
//        console.log(d)
        //show date,time,text for each array        //enter tip
        var updateTip=tip.selectAll(".content").data(d.values)
            
        updateTip.enter().append("div").attr("class","content")
        .merge(updateTip)
        .html((d,i)=>{
            
            return "<span id='time'>"+d.date+"<br>"+(d.hour+1)+":00"+"</span>"+"<br>"+"<br>"+"<span id='tweet'>"+d.text +"</span>"+ "<br>"+"<br>"+"<br>"+"<br>"
        })
        .style("opacity",0.5)
        .transition().duration(200)
        .style("opacity",1.0);
        
//        updateTip.exit().remove();
        
      
        });
    
    
    
    
    
}