var numColors = 50;

var colArray = ['red','purple','blue','green', 'yellow','orange','red']

// this file should have my code for doing d3 stuff
colorMods = ['default', "hsv","hsl", "lab", "lch"]

var colSel = d3.select('.info').append('p')
.text('Colorspace:').attr('class', 'colorspace')
.append('select')
.attr('class', "colorspace").style('width', '100px')
.attr("onchange", 'render(this.value)')
//.style('position', 'absolute')


d3.select('.info').append('button').text('Spin it')
.on('click', spin);

d3.select('.info').append('div').html('</br>  Number of colors:').attr('id', 'colin').append('input').attr('value',numColors.toString()).on('keydown', function(d){
  //console.log(d3.select(this)[0][0].value)
    console.log(d3.select('select.colorspace')[0][0].value)
    console.log( d3.event.keyIdentifier)

  numColors = parseInt(d3.select(this)[0][0].value); // same thing     console.log(this.value)

//  render(d3.select('select.colorspace')[0][0].value)
    if(d3.event.keyIdentifier === 'Enter'){

      render(d3.select('select.colorspace')[0][0].value)

      console.log('maybe render now')
    }

})
.style('width', '35px')

function colChange(num){
  numColors = num;
//  console.log(d3.select('.colorpace').value)
}


for(i in colorMods){
  colSel.append('option')
  .attr('value', colorMods[i]).text(colorMods[i])

}

var vWidth = 1000;

var r = 240;


var rectwi = 30;

var recthi = 166.666;

var rectbuf = 30;
var arru = [];

var color = d3.scale.category20c();     //builtin range of colors



var svg = d3.select('body').append('svg').attr("height", 500).attr("width", vWidth).attr("class", "svger")

console.log(arru);

// ['red', 'blue']
var scale = chroma.scale(  colArray)

console.log(scale(.5).hex)
var xtran = r + 80;

render('default');

function render(colspa){

  arru = [];

  for(i = 0; i < numColors; i++){

    arru.push(i);

  }

  svg.data([arru])

  d3.selectAll('g').remove();



  var g = svg.append('g').attr("transform", "translate(" + xtran + "," + r + ")")
    .attr('id', 'wheelie');



    var arc = d3.svg.arc()              //this will create <path> elements for us using arc data
             .outerRadius(r);


  var pie = d3.layout.pie()           //this will create arc data for us given a list of values

               .value(function(d) {  console.log('heres the d for values');

          //     console.log(scale(i*(1/(numColo))).hex)
               return 1;
               //return d;
             });    //we must tell it out to access the value of each element in our data array


     var arcs = g.selectAll("g.slice")     //this selects all <g> elements with class slice (there aren't any yet)
                   .data(pie)                          //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties)
                   .enter()                            //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
                   .append("svg:g")                //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
                   .attr("class", "slice")
                   .sort(function(a, b){
                //     console.log(a,b)
                     return a > b;
                   });    //allow us to style things in the slices (like text)


      arcs.append("svg:path")
         .attr("fill", function(d, i) {
                var colval =  i*(1/(numColors-1));
                console.log(colval)

                if(colspa === 'default'){
                  return scale(colval).hex()
                }

             return scale.mode(colspa)(colval).hex()
             //return   color(i);
            } )
             //set the color for each slice to be chosen from the color function defined above
           .attr("d", arc)
           .attr('class', function(d, i){
             return i
           })
           .sort(function(d){
             return i;
           });

}

function spin(){

  console.log('should be spinning')
  d3.select('#wheelie')
  .transition()
 .duration(2000)
 .attr("transform", "translate(290,290)")
 .attrTween("transform", tween);


}


    function tween(d, i, a) {
      //return d3.interpolateString("rotate(0, 0, 0)", "rotate(390, 00, 0)");
      return d3.interpolateString("translate(280,250)rotate(0)",  "translate(280,250)rotate(1121060)" );

    }