$(document).ready(function(){
 
  // Call the vertical slider plugin with the question ID
  // Edit options here as desired
  $('#questionQQ').lsVerticalSlider({
    minValue    :0,  // Minimum value (default 0)
    maxValue    :200,  // Maximum value (default 100) 
    startValue    :100,  // Start value (default null)
    step      :10,  // Slider increments (default 1)
    height      :100,  // Height of slider in pixels (default 200)
    recordStart    :true,  // Record the start value? (default no)
    showMin      :true,  // Show minimum value? (default no)
    showMax      :true  // Show maximum value? (default no)
  });
 
});
 
// NO EDITING REQUIRED BELOW HERE
 
// A jQuery plugin to convert multiple-numeric questions to vertical sliders
(function( $ ){
 
  $.fn.lsVerticalSlider = function(options) {  
 
    // The defaults, extended and modified with any passed in the function call
    var opts = $.extend( {
      minValue    :0, 
      maxValue    :100, 
      startValue    :'',
      step      :1,
      height      :150, 
      recordStart    :false,
      showMin      :false,
      showMax      :false
    }, options);
 
    return this.each(function() { 
 
      var $this = $(this);
 
      // Some classes for the question and sub-questions
      $this.addClass('vertical-slider-question');
      $('li:[id^="javatbd"]', $this).addClass('vertical-slider-sub-question');
 
      // Loop through the sub-questions
      $('li:[id^="javatbd"]', $this).each(function(i){
 
        var itemID = $(this).attr('id').replace(/javatbd/, '');
 
        // Check for pre-existing answer
        if($('#answer'+itemID).val() != '') {
          opts.startValue = $('#answer'+itemID).val();
        }
 
        // Insert the slider elements
        $('#answer'+itemID).after(
          '<div class="vertical-slider-max-min" style="height:'+(opts.height+2)+'px;"> \
            <div class="vertical-slider-max"></div> \
            <div class="vertical-slider-min"></div> \
          </div> \
          <div id="vertical-slider-'+itemID+'" class="vertical-slider" style="height:'+opts.height+'px;"></div> \
          <div class="vertical-slider-callout-wrapper" style="height:'+(opts.height+2)+'px;"> \
            <div class="vertical-slider-callout" id="slider-callout-'+itemID+'"></div> \
          </div>'
        );
 
        // Show min/max if option is set
        if(opts.showMax) {
          $('.vertical-slider-max', $this).text(opts.maxValue);
        }
        if(opts.showMin) {
          $('.vertical-slider-min', $this).text(opts.minValue);
        }
 
        // Initiate the slider
        $('#vertical-slider-'+itemID).slider({
          orientation: 'vertical',
          range: 'min',
          min: opts.minValue,
          max: opts.maxValue,
          value: opts.startValue,
          step: opts.step,
          slide: function(event, ui) {
            $('#answer'+itemID).val(ui.value);
            $('#slider-callout-'+itemID).text(ui.value);
            setTimeout(function() { 
              $('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') }).show();
            }, 10);
          },
          create: function(event, ui) {
            // Initial values and positions
            if($('#answer'+itemID).val() != '') { // Pre-existing answer
              $('#slider-callout-'+itemID).text(opts.startValue);
            }
            else if(opts.recordStart) { // Record the start value (if option is set)
              $('#answer'+itemID).val(opts.startValue);
              $('#slider-callout-'+itemID).text(opts.startValue);
            }
            else {
              $('#slider-callout-'+itemID).hide();
            }
            $('#slider-callout-'+itemID).css({ 'bottom':$('#vertical-slider-'+itemID+' .ui-slider-handle').css('bottom') });
          }
        });
      });
    });
 
  };
})( jQuery );

/* Vertical slider styles and overrides */  
 
.vertical-slider-question p.tip {
  display: none;
}
 
.vertical-slider-sub-question {
  float: left;
  margin: 0 3em 0 0 !important;
}
 
.vertical-slider-question label {
  display: block;
  padding: 0 0 0.75em 0 !important;
}
 
.vertical-slider-question span.input {
  padding: 0.3em 0 0 0;
  display: block;
}
 
.vertical-slider-question input.text {
  display: none;
}
 
.vertical-slider {
  float: left;
  border-radius: 4px;
}
 
.vertical-slider-question .ui-slider-handle {
  top: auto;
  border-radius: 4px;
}
 
.vertical-slider-max-min,
.vertical-slider-callout-wrapper {
  float: left;
  position: relative;
}
 
.vertical-slider-callout-wrapper {
  min-width: 3em;
}
 
.vertical-slider-max-min {
  margin-right: 0.5em;
}
 
.vertical-slider-max,
.vertical-slider-min {
  font-size: 0.8em;
  color:#666666;
  line-height: 1;
}
 
.vertical-slider-max {
  margin-top: -0.5em;
}
 
.vertical-slider-min {
  position: absolute;
  right: 0;
  bottom: 0;
  margin-bottom: -0.5em;
}
 
.vertical-slider-callout {
  position: absolute;
  top: auto;
  margin: 0 0 -0.6em 0.5em;
  padding: 0.1em;
  font-size: 0.9em;
  color:#000000;
  line-height: 1;
  background: #F8F8FF;
  border: 1px solid #D2E0F2;
  border-radius: 4px;
}