// create a basic slider that does nothing

var slider = new GUId3.Slider()

slider.width(300)
slider.height(20)

slider.label('my slider')

// set up the scale using a d3 scale!
var my_scale = d3.scale.linear()
  .domain([1,100])
  .range([303,909])

slider.scale(my_scale)

// create the container, or select one
var container = d3.select('div#example0')
  .append('svg')
  .attr('width', 512)
  .attr('height', 32)

// create the slider
slider.create(container)

// set the value of the slider
slider.setValue(808.1)

// create a basic slider that does something!
// pass a callback into the constructor that does
// something with the value the slider generates

var slider = new GUId3.Slider(function(v){
  v = Math.floor(v)
  var rgb_string = 'rgb('+[v,v,v].join(',')+')'
  console.log(rgb_string)
  d3.select('div#example1')
    .style('background-color', rgb_string)
})

slider.width(300)
slider.height(20)

slider.label('my slider')

// set up the scale using a d3 scale!
var my_scale = d3.scale.linear()
  .domain([1,100])
  .range([0,255])

slider.scale(my_scale)

// create the container, or select one
var container = d3.select('div#example1')
  .append('svg')
  .attr('width', 300)
  .attr('height', 20)

// create the slider
slider.create(container)

// set the value of the slider
slider.setValue(33)

// create a basic slider using all of the more
// advanced options
var slider = new GUId3.Slider(function(v){
  // empty callback
})

slider.width(300)
slider.height(20)

slider.roundedRectangle([5,5])
slider.fixedDecimal(0)
slider.steps(4)

slider.label('')

// set up the scale using a d3 scale!
var my_scale = d3.scale.linear()
  .domain([1,100])
  .range([0,255])

slider.scale(my_scale)

// create the container, or select one
var container = d3.select('div#example2')
  .append('svg')
  .attr('width', 300)
  .attr('height', 45)

// create the slider
slider.create(container)

// set the value of the slider
slider.setValue(128)

// style the slider with css
var slider = new GUId3.Slider(callback)

slider.cssClass('example3')

slider.width(300).height(20).label('styled slider')

// set up the scale using a d3 scale!
var my_scale = d3.scale.linear().domain([1,100]).range([303,909])
slider.scale(my_scale)

// create the container, or select one
var container = d3.select('div#example3')
  .append('svg').attr('width', 512).attr('height', 32)

// create the slider
slider.create(container)

// set the value of the slider
slider.setValue(808.1)

/* the associated css */
.example3 .guid3-slider {
  fill: rgb(232,232,232) !important;
  fill-opacity: 1.0 !important;
  stroke: none !important;
}
.example3 .guid3-slider-indicator {
  fill: rgb(33,66,255) !important;
  fill-opacity: 0.33 !important;
  stroke: none !important;
}
.example3 .guid3-slider-textlabel {
  fill: white !important;
}
.example3 .guid3-slider-textvalue {
  fill: white !important;
}

// vertical slider type
var slider = new GUId3.Slider()

slider.cssClass('example4')

slider.width(30).height(250).label('styled & vertical!')
slider.type('vertical') // !!!

// set up the scale using a d3 scale!
var my_scale = d3.scale.linear().domain([1,100]).range([303,909])
slider.scale(my_scale)

// create the container, or select one
var container = d3.select('div#example4')
  .append('svg').attr('width', 500).attr('height', 300)

// create the slider
slider.create(container.append('g')
  .attr('transform','translate(100,0)'))

// set the value of the slider
slider.setValue(808.1)

/* the associated css */
.example4 .guid3-slider {
  fill: rgb(232,232,232) !important;
  fill-opacity: 1.0 !important;
  stroke: none !important;
}
.example4 .guid3-slider-indicator {
  fill: #b887fd  !important;
  fill-opacity: 0.33 !important;
  stroke: none !important;
}
.example4 .guid3-slider-textlabel {
  fill: black !important;
  font-family: serif !important;
  font-size: 12px !important;
  font-weight: 100 !important;
}
.example4 .guid3-slider-textvalue {
  fill: black !important;
  font-family: cursive !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

// toggle buttons
var button = new GUId3.Button()
button.cssClass('example5')
button.width(100).height(50)
button.labelOn('zomgon').labelOff('zomgoff')
button.callback(function(v){
  if(v){
    d3.select('div#example5').style('background-color', '#406573')
  } else {
    d3.select('div#example5').style('background-color', 'black')
  }
})

// create the container, or select one
var container = d3.select('div#example5')
  .append('svg').attr('width', 500).attr('height', 300)

// create the button
button.create(container.append('g')
  .attr('transform','translate(10,10)'))
button.setValue(true)

/* the associated css */

// momentary buttons
var button = new GUId3.Button()
button.cssClass('example6')
button.width(150).height(50)
button.labelOn('zomgon').labelOff('zomgomentary')
button.type('momentary')
button.roundedRectangle([10,10])
button.callback(function(v){
  if(v){
    d3.select('div#example6').style('background-color', '#406573')
  } else {
    d3.select('div#example6').style('background-color', 'white')
  }
})

// create the container, or select one
var container = d3.select('div#example6')
  .append('svg').attr('width', 500).attr('height', 300)

// create the button
button.create(container.append('g')
  .attr('transform','translate(10,10)'))
button.setValue(true)

/* the associated css */
.example6 .guid3-button {
  fill: green !important;
  fill-opacity: 1.0 !important;
  stroke: white !important;
}
.example6 .guid3-button-text {
  fill: white !important;
  font-family: Helvetica !important;
  font-size: 16px !important;
  font-weight: 100;
}
.example6 .guid3-button-inactive {
  fill: blue !important;
  fill-opacity: 1.0 !important;
  stroke: orange !important;
}