Super fee comparison tool

[{"tag":"link","attributes":{"rel":"stylesheet","href":"/libs/calculators/css/clientlib-vma.min.css"},"children":[]},{"tag":"style","attributes":{},"children":[],"content":"\n\n\t/* Need Rendy to add this to main CSS */\n\t* {\n\t\tfont-family: 'inter', sans-serif, 'roboto-condensed-fallback';\n\t}\n\t\n\t.ui-slider-range {\n\t  height: 16px;\n\t  background-color: #de0000;\n\t  position: relative;\n\t  border: 2px solid #fff;\n\t  border-radius: 16px;\n\t}\n\t\n\t.ui-slider{\n\t  width: 100%;\n\t  height: 16px;\n\t  background-color: #fff;\n\t  border-radius: 16px;\n\t  position: relative;\n\t}\n\t\n\t/* DELETE */\n\t/*.super-fee-comparison {\n\tbackground-color: #e7e7e7;\n\tmargin: 10px 0;\n\tpadding: 20px;\n\t}*/\n\t\n\t.super-fee-comparison:after {\n\t  content: ' ';\n\t  line-height: 0;\n\t  display: block;\n\t  clear: both;\n\t}\n\t\n\t.points-calculator{\n\t  padding: 10px 15px;\n\t  float: left;\n\t}\n\t.points-form,\n\t.points-form form{\n\t  display: block!important;\n\t}\n\t.calculator-row{\n\t  border-bottom: 1px solid #a9a8a9;\n\t  padding: 10px 0;\n\t  float: left;\n\t  width: 100%;\n\t}\n\t\n\t.calculator-item{\n\t  float: left;\n\t  line-height: 24px;\n\t}\n\t\n\t.calculator-item-left{\n\t  width: 394px;\n\t}\n\t\n\t.calculator-item-right{\n\t  width: 294px;\n\t}\n\t\n\t.calculator-input,\n\t.calculator-choice,\n\t.calculator-radio{\n\t  float: left;\n\t  width: 100%;\n\t  padding: 8px 0;\n\t}\n\t\n\t.calculator-slider{\n\t  width: 100%;\n\t  height: 40px;\n\t  padding: 8px 0;\n\t}\n\t\n\t\n\t.calculator-row-1 .calculator-slider-container {\n\t  height: 40px;\n\t}\n\t\n\t.calculator-checkbox{\n\t  float: left;\n\t  padding: 8px 24px 8px 0;\n\t}\n\t\n\t.calculator-input label{\n\t  float: left;\n\t  width: 270px;\n\t  margin: 0;\n\t}\n\t\n\t.calculator-input label.label-full{\n\t  width: 100%;\n\t}\n\t\n\t.calculator-item-right .calculator-input label{\n\t  width: auto;\n\t}\n\t\n\t.credit-block .calculator-item-right .calculator-input label {\n\t  width: 100%;\n\t}\n\t\n\t.calculator-input .input-type{\n\t  float: left;\n\t  width: 15px;\n\t  text-align: right;\n\t  margin: 0 3px 0 10px;\n\t}\n\t\n\t.calculator-input input{\n\t  width: 85px;\n\t  height: 24px;\n\t  line-height: 18px;\n\t  padding: 3px 6px;\n\t  border: 0;\n\t  box-sizing: border-box;\n\t  font-size: 13px;\n\t  /*font-family: 'gotham-roundedbook', Arial, Verdana, Helvetica, sans-serif;*/\n\t}\n\t\n\t.calculator-item-choice-inline .calculator-input,\n\t.calculator-item-choice-inline .calculator-choice {\n\t  width: 120px;\n\t}\n\t\n\t.calculator-item-choice-inline .calculator-input label {\n\t  width: auto;\n\t}\n\t\n\t.calculator-radio-button{\n\t  float: left;\n\t  padding: 0 0 0 25px;\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/calculator-radio-button.png) left no-repeat;\n\t  cursor: default;\n\t}\n\t\n\t.calculator-radio-button-checked{\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/calculator-radio-button-checked.png) left no-repeat;\n\t}\n\t\n\t.calculator-checkbox-button{\n\t  float: left;\n\t  padding: 0 0 0 35px;\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/calculator-checkbox.png) left no-repeat;\n\t  cursor: default;\n\t}\n\t\n\t.calculator-checkbox-button-checked{\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/calculator-checkbox-checked.png) left no-repeat;\n\t}\n\t\n\t.calculator-tooltip {\n\t  width: 17px;\n\t  height: 17px;\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/tooltip-icon.png) no-repeat;\n\t  position: relative;\n\t  display: inline-block;\n\t  margin: 0 0 -3px 8px;\n\t}\n\t\n\t.calculator-tooltip .calculator-tooltip-wrapper{\n\t  position: absolute;\n\t  left: 18px;\n\t  top: -21px;\n\t  padding-left: 12px;\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/tooltip-point.png) 0 16px no-repeat;\n\t  z-index: 999999;\n\t  white-space: normal;\n\t  display: none;\n\t}\n\t\n\t.calculator-checkbox .calculator-tooltip .calculator-tooltip-wrapper{\n\t  top: auto;\n\t  bottom: 17px;\n\t  left: -120px;\n\t  padding: 0 0 12px 0;\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/tooltip-point-bottom.png) bottom right no-repeat;\n\t}\n\t\n\t.calculator-tooltip .calculator-tooltip-value{\n\t  background: #fff;\n\t  border-radius: 8px;\n\t  padding: 15px 10px;\n\t  width: 175px;\n\t  font-size: 11px;\n\t  line-height: 15px;\n\t  box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);\n\t}\n\t\n\t\n\t.slider-min{\n\t  float: left;\n\t  margin-left: 15px;\n\t}\n\t\n\t.slider-max{\n\t  float: right;\n\t  margin-right: 15px;\n\t}\n\t\n\t.slider-bar{\n\t  float: left;\n\t}\n\t.slider-bar-label{\n\t  width: 27%;\n\t  float: left;\n\t}\n\t\n\t.slider-wrapper{\n\t  float: left;\n\t  width: 70%;\n\t}\n\t\n\t.slider-bar-ticks{\n\t  position: relative;\n\t  float:left;\n\t  height: 40px;\n\t  width:100%;\n\t}\n\t.slider-bar-tick{\n\t  position: absolute;\n\t  top: 20px;\n\t}\n\t.slider-bar-tick span{\n\t  position: absolute;\n\t  transform: translatex(-50%);\n\t  font-size: 16px;\n\t}\n\t\n\t\n\t.calculator-choice .ui-slider{\n\t  width: 48px;\n\t}\n\t\n\t.ui-slider-handle{\n\t  height: 30px;\n\t  width: 30px;\n\t  border-radius: 30px;\n\t  background-color: #414141;\n\t  display: block;\n\t  position: absolute;\n\t  top: -7px;\n\t  margin-left: 3%;\n\t  outline: none!important;\n\t}\n\t\n\t.ui-slider-value{\n\t  position: absolute;\n\t  right: 35px;\n\t  top: 7px;\n\t  color: #fff;\n\t  font-size: 11px;\n\t  line-height: 16px;\n\t}\n\t\n\t.ui-slider-value-inversed{\n\t  right: auto;\n\t  left: 35px;\n\t  color: #00b3be;\n\t}\n\t\n\t.points-chart{\n\t  color: #414042;\n\t  float: left;\n\t  width:100%;\n\t  padding: 20px 0;\n\t}\n\t\n\t.points-chart .v-axis{\n\t  margin-right: 5px;\n\t  float: left;\n\t}\n\t\n\t.points-chart .v-axis .grid{\n\t  padding-right: 3px;\n\t  margin-left: 60px;\n\t  border-left: 3px solid #77787b;\n\t  border-top: 1px solid #77787b;\n\t  position: relative;\n\t  box-sizing: border-box;\n\t}\n\t\n\t.points-chart .v-axis .grid:first-child{\n\t  border-top: none;\n\t}\n\t\n\t.points-chart .v-axis .grid-value{\n\t  position: absolute;\n\t  left: -60px;\n\t  top: -10px;\n\t  text-align: right;\n\t  font-size: 16px;\n\t  line-height: 20px;\n\t  width: 50px;\n\t}\n\t\n\t.points-chart .h-axis{\n\t  border-top: 3px solid #77787b;\n\t  -webkit-box-sizing: content-box;\n\t  -moz-box-sizing: content-box;\n\t  box-sizing: content-box;\n\t  margin-left: 60px;\n\t  padding-left: 11px;\n\t  float: left;\n\t  clear: both;\n\t  width: calc(100% - 80px);\n\t}\n\t.points-chart .h-axis .h-axis-wrapper {\n\t  float: left;\n\t  padding-top: 70px;\n\t}\n\t.points-chart .h-axis-wrapper-inner {\n\t  position: relative;\n\t}\n\t.points-chart .h-axis .column-label{\n\t  overflow: visible;\n\t  padding-inline: 10px;\n\t}\n\t.points-chart .h-axis .column-label span{\n\t  /* display: block; */\n\t  font-size: 20px;\n\t  text-align: right;\n\t  line-height: 13px;\n\t  text-indent: 65px;\n\t  transform: rotate(0 deg);\n\t  transform-origin: 0 90%;\n\t  white-space:nowrap;\n\t  /* width:80px; */\n\t  font-weight: bold;\n\t}\n\t\n\t\t@media only screen and (max-width: 768px) {\n\t\t.points-chart .h-axis .column-label span{\n\t\t  transform-origin: 0 50%;\n\t\t}\n\t  }\n\t  \n\t.points-chart .h-axis > .column-label{\n\t  padding-top: 70px;\n\t}\n\t\n\t.points-chart .columns{\n\t  float: left;\n\t  height: 300px;\n\t  width: calc(100% - 80px);\n\t}\n\t\n\t.points-chart .column-box,\n\t.points-chart .h-axis .column-label{\n\t  float: left;\n\t}\n\t.points-chart .comparison-scroller{\n\t  float:left;\n\t  overflow-x: hidden;\n\t}\n\t\n\t.points-chart .column-box div{\n\t  margin: 0 5%;\n\t}\n\t\n\t.points-chart .column-box .points-wrapper{\n\t  position: relative;\n\t}\n\t\n\t.super-fee-comparison .points-chart .column-box .points{\n\t  background-color: #E10A0A;\n\t  position:relative;\n\t}\n\t\n\t.super-fee-comparison .points-chart  .comparison-scroller .column-box .points{\n\t  background-color: #FFA199;\n\t}\n\t\n\t.points-chart .column-box .points span{\n\t  color: #FFF;\n\t  position: absolute;\n\t  bottom: 70px;\n\t  text-align: center;\n\t  width: 100%;\n\t  font-size: 18px;\n\t  font-weight: bold;\n\t}\n\t.points-chart .column-box .points,\n\t.points-chart .column-box .blank-points{\n\t  -webkit-transition: height 0.5s;\n\t  -o-transition: height 0.5s;\n\t  -moz-transition: height 0.5s;\n\t  transition: height 0.5s;\n\t}\n\t\n\t.points-breakdown{\n\t  margin: 10px 15px 10px 72px;\n\t  padding: 15px;\n\t  background-color: #fff;\n\t  border-radius: 8px;\n\t  float: left;\n\t}\n\t\n\t.breakdown-title{\n\t  text-align: center;\n\t  line-height: 30px;\n\t}\n\t\n\t.breakdown-list{\n\t  overflow: hidden;\n\t  border-bottom: 1px solid #e7e7e7;\n\t  margin-bottom: 5px;\n\t  padding: 10px 0 20px 0;\n\t}\n\t\n\t.breakdown-list .breakdown-item{\n\t  float: left;\n\t  width: 200px;\n\t  box-sizing: border-box;\n\t}\n\t\n\t.breakdown-list .breakdown-loan{\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/breakdown-loan.png) left top no-repeat;\n\t  padding-left: 38px;\n\t}\n\t\n\t.breakdown-list .breakdown-credit{\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/breakdown-credit.png) left no-repeat;\n\t  padding-left: 43px;\n\t}\n\t\n\t.breakdown-list .breakdown-insurance{\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/breakdown-insurance.png) left no-repeat;\n\t  padding-left: 53px;\n\t}\n\t\n\t.breakdown-list .breakdown-description{\n\t  font-size: 11px;\n\t}\n\t\n\t.breakdown-info{\n\t  padding: 10px 0 5px 0;\n\t}\n\t\n\t#copy .breakdown-info p{\n\t  margin-bottom: 0!important;\n\t  line-height: 18px;\n\t}\n\t\n\t.points-disclaimer{\n\t  margin: 20px 15px 20px 72px;\n\t  float: left;\n\t}\n\t\n\t#copy .points-disclaimer p{\n\t  margin-bottom: 0!important;\n\t  font-size: 11px;\n\t}\n\t\n\t.nowrap{\n\t  display: inline;\n\t  white-space: nowrap;\n\t}\n\t\n\t#copy .points-disclaimer p:not(:last-child) {\n\t  padding-bottom: 8px;\n\t}\n\t\n\tbody.in-mobile .super-fee-comparison{\n\t  color: #414042;\n\t  font-size: 13px;\n\t}\n\t\n\tbody.in-mobile .super-fee-comparison a,\n\tbody.in-mobile .super-fee-comparison a:visited,\n\tbody.in-mobile .super-fee-comparison a:hover{\n\t  color: #414042;\n\t}\n\t\n\tbody.in-mobile .super-fee-comparison label{\n\t  font-size: 13px;\n\t  line-height: 16px;\n\t  padding: 8px 0;\n\t  width: auto;\n\t}\n\t\n\tbody.in-mobile .calculator-item-right .calculator-input label{\n\t  width: auto;\n\t  padding-right: 8px;\n\t}\n\t\n\tbody.in-mobile .super-fee-comparison input{\n\t  font-size: 13px;\n\t  background-color: #fff;\n\t}\n\t\n\tbody.in-mobile .points-calculator {\n\t  padding-top: 0;\n\t}\n\t\n\tbody.in-mobile .calculator-row {\n\t  position: relative;\n\t}\n\t\n\tbody.in-mobile .calculator-item{\n\t  width: 100%;\n\t  box-sizing: border-box;\n\t}\n\t\n\tbody.in-mobile .calculator-item-choice{\n\t  /* padding-right: 85px; */\n\t}\n\t\n\tbody.in-mobile .calculator-wrapper{\n\t  margin: 0 auto;\n\t  width: 160px;\n\t}\n\t\n\t\n\tbody.in-mobile .calculator-row-1 .calculator-item-choice-inline .calculator-input {\n\t  width: 40%;\n\t}\n\t\n\tbody.in-mobile .calculator-row-2 .calculator-wrapper{\n\t  padding: 0;\n\t  float: none;\n\t}\n\t\n\tbody.in-mobile .calculator-item-left {\n\t  width: 100%;\n\t}\n\t\n\tbody.in-mobile .calculator-item-right {\n\t  width: 60%;\n\t  float: left;\n\t}\n\tbody.in-mobile .calculator-item-right .slider-bar {\n\t  float: right;\n\t}\n\t\n\tbody.in-mobile .calculator-tooltip {\n\t  margin-top: 3px;\n\t}\n\t\n\tbody.in-mobile .calculator-row-2 .calculator-item-right .calculator-choice {\n\t  margin: 0 auto;\n\t}\n\t\n\tbody.in-mobile .calculator-slider-container {\n\t  height: auto;\n\t  width: 100%;\n\t}\n\t\n\tbody.in-mobile .calculator-slider{\n\t  position: relative;\n\t  padding: 0 15px;\n\t  width: calc(100% - 30px);\n\t}\n\t\n\tbody.in-mobile #loan-slider,\n\tbody.in-mobile #credit-amount-slider,\n\tbody.in-mobile #tenure-slider{\n\t  width: 100%;\n\t  float: none;\n\t  margin: 0;\n\t}\n\t\n\tbody.in-mobile #loan-slider .ui-slider-value,\n\tbody.in-mobile #credit-amount-slider .ui-slider-value{\n\t  display: none;\n\t}\n\t\n\tbody.in-mobile .slider-min,\n\tbody.in-mobile .slider-max {\n\t  margin: 10px 0;\n\t  /*width: 80px;*/\n\t  /*text-align: right;*/\n\t  /*position: absolute;*/\n\t  /*top: 6px;*/\n\t  /*left: 0;*/\n\t}\n\t\n\tbody.in-mobile .slider-max {\n\t  /*width: 80px;*/\n\t  /*text-align: left;*/\n\t  /*position: absolute;*/\n\t  /*top: 6px;*/\n\t  /*right: 0;*/\n\t}\n\t\n\tbody.in-mobile .calculator-choice{\n\t  /*  position: absolute;\n\t  width: auto;\n\t  right: 0;\n\t  top: 10px;*/\n\t}\n\t\n\tbody.in-mobile .calculator-row-1 .calculator-choice{\n\t  top: auto;\n\t  bottom: 10px;\n\t}\n\t\n\tbody.in-mobile .calculator-radio-button,\n\tbody.in-mobile .calculator-checkbox-button{\n\t  font-size: 11px;\n\t}\n\t\n\tbody.in-mobile .calculator-checkbox {\n\t  width: 100%;\n\t  padding: 8px 0;\n\t}\n\t\n\tbody.in-mobile .calculator-tooltip .calculator-tooltip-wrapper {\n\t  top: auto;\n\t  bottom: 17px;\n\t  left: -140px;\n\t  padding: 0 0 12px 0;\n\t  background: url(http://virginmoney.com.au/images/home-loans/calculator/tooltip-point-bottom.png) bottom right no-repeat;\n\t}\n\t\n\tbody.in-mobile .calculator-row-1 .calculator-tooltip .calculator-tooltip-wrapper {\n\t  background-position: bottom left;\n\t  left: -35px;\n\t}\n\t\n\tbody.in-mobile .calculator-tooltip .calculator-tooltip-value {\n\t  box-shadow: -2px -2px 2px 0 rgba(0, 0, 0, 0.1);\n\t}\n\t\n\tbody.in-mobile .calculator-tooltip-button{\n\t  line-height: 20px;\n\t}\n\t\n\tbody.in-mobile .points-breakdown{\n\t  float: none;\n\t  margin: 20px 15px;\n\t}\n\t\n\tbody.in-mobile .breakdown-title {\n\t  text-align: center;\n\t  line-height: 15px;\n\t  padding: 15px 0 10px 0;\n\t}\n\t\n\tbody.in-mobile .breakdown-list{\n\t  padding: 0 0 5px 0;\n\t}\n\t\n\tbody.in-mobile .points-breakdown .breakdown-item{\n\t  float: none;\n\t  width: 160px;\n\t  margin: 10px auto;\n\t}\n\t\n\tbody.in-mobile .points-disclaimer {\n\t  margin: 20px 15px;\n\t  float: none;\n\t}\n\tdiv.vma-important-info{\n\t  background: url(\"http://virginmoney.com.au/images/global/icons/icon-vma-info-22-red.png\") no-repeat scroll 72px 0;\n\t  clear: both;\n\t  font-size: 11px;\n\t  padding-left: 100px;\n\t  padding-right: 20px;\n\t}\n\tbody.in-mobile div.vma-important-info{\n\t  background: url(\"http://virginmoney.com.au/images/global/icons/icon-vma-info-22-red.png\") no-repeat scroll 22px 0;\n\t  padding-left: 50px;\n\t  margin-top:15px;\n\t}\n\tdiv.tenure-div{\n\t  padding-top: 10px;\n\t}\n\t.clearfix:after {\n\t  content: \".\";\n\t  display: block;\n\t  clear: both;\n\t  visibility: hidden;\n\t  line-height: 0;\n\t  height: 0;\n\t}\n\t.clearfix {\n\t  /*display: inline-block;*/\n\t}\n\thtml[xmlns] .clearfix {\n\t  display: block;\n\t}\n\t* html .clearfix {\n\t  height: 1%;\n\t}\n\t\n\t@media screen and (max-width: 768px) {\n\t  .super-fee-comparison{\n\t\toverflow-x: hidden;\n\t\tpadding: 20px 0;\n\t  }\n\t  .points-chart{\n\t\twidth:275%;\n\t  }\n\t  .slider-bar-label{\n\t\ttext-align: center;\n\t\twidth: 100%;\n\t\tmargin-bottom: 20px;\n\t  }\n\t  .slider-wrapper{\n\t\twidth: 80%;\n\t\tfloat:none;\n\t\tmargin: 10px auto;\n\t  }\n\t  .points-chart .h-axis .h-axis-wrapper{\n\t\tfloat: left;\n\t\toverflow-x: hidden;\n\t\toverflow-y: visible;\n\t\tpadding-top: 60px;\n\t  }\n\t\n\t}\n\t\n\t"},{"tag":"script","attributes":{"src":"/libs/calculators/jquery/jquery-1.8.2.min.js"},"children":[],"content":""},{"tag":"script","attributes":{"src":"/libs/calculators/jquery/jquery-ui-1.9.2.custom.js"},"children":[],"content":""},{"tag":"script","attributes":{"src":"/libs/calculators/jquery/jquery.ui.touch-punch.min.js"},"children":[],"content":""},{"tag":"div","attributes":{"class":"main-container"},"children":[{"tag":"div","attributes":{"class":"super-fee-comparison vma-calculator"},"children":[{"tag":"div","attributes":{"class":"data"},"children":[{"text":"[\"Product Name\", \"$150,000\", \"$100,000\", \"$50,000\", \"$25,000\", \"$5,000\"],\n\t\t[\"Virgin Money Super\", 946, 650, 354, 206, 88],\n\t\t[\"Industry Fund Average\", 1240, 847, 454, 257, 100],\n\t\t[\"Retail Fund Average\", 1236, 844, 452, 256, 99],"}]}]},{"tag":"script","attributes":{},"children":[],"content":"\n\n\n\tvar comparison_points_options = Object();\n\tchartHeight = 300;\n\t/**\n\tmain Function to build a comparison calculator\n\targument: id of div to be replaced with calc\n\t*/\n\tfunction buildComparison(calcId) {\n\t\n\t  $velocity_calculator = jQuery('#' + calcId);\n\t  data = comparison_points_options[calcId]['data'];\n\t\n\t  comparisonHtml  = \"\";\n\t  comparisonHtml += '<div class=\"points-form clearfix\">';\n\t  comparisonHtml += '  <form class=\"clearfix\">';\n\t  comparisonHtml += '\t\t\t<div class=\"calculator-item slider-bar-label\">What is your super balance?</div>';\n\t  comparisonHtml += '\t\t\t<div class=\"calculator-item slider-wrapper\">';\n\t  comparisonHtml += '\t\t\t\t<div class=\"slider-bar\"></div>';\n\t  comparisonHtml += '\t\t\t\t<div class=\"slider-bar-ticks clearfix\">';\n\t  for(i=1; i<data[0].length; i++){\n\t\tcomparisonHtml += '\t\t\t<div class=\"slider-bar-tick\" style=\"left:' + ((i-1) * (100 / (data[0].length - 2))) + '%;\"><span>' + data[0][i] + '</span></div>';\n\t  }\n\t  comparisonHtml += '\t\t\t\t</div>';\n\t  comparisonHtml += '\t\t\t</div>';\n\t  comparisonHtml += '\t</form>';\n\t  comparisonHtml += '</div>';\n\t  comparisonHtml += '<div class=\"points-chart\"><div class=\"points-chart-inner\">';\n\t  comparisonHtml += buildComparisonVAxis(calcId, 3);\n\t  comparisonHtml += buildComparisonColumns(calcId, 3);\n\t  comparisonHtml += buildComparisonHAxis(calcId);\n\t  comparisonHtml += '</div></div>';\n\t\n\t  $velocity_calculator.html(comparisonHtml);\n\t\n\t  jQuery(\".points-chart .comparison-scroller-inner\", $velocity_calculator).draggable(\n\t\t{\n\t\t  axis: \"x\",\n\t\t  scroll: false,\n\t\t  drag: function( event, ui ) {\n\t\t\tif(ui.position.left >= 0){\n\t\t\t  ui.position.left = 0;\n\t\t\t}\n\t\t\tscrollWindowWidth = $velocity_calculator.outerWidth() - (jQuery('.v-axis', $velocity_calculator).outerWidth() + jQuery('.column-box-1', $velocity_calculator).outerWidth());\n\t\t\tif(ui.position.left < -(jQuery(this).width() - scrollWindowWidth)){\n\t\t\t  ui.position.left = (jQuery(this).width() - scrollWindowWidth > 0) ? -(jQuery(this).width() - scrollWindowWidth) : 0;\n\t\t\t}\n\t\t\tjQuery(\".h-axis-wrapper-inner\", $velocity_calculator).css('left', ui.position.left);\n\t\t  }\n\t\t}\n\t  );\n\t\n\t  jQuery('.slider-bar', $velocity_calculator).slider({\n\t\trange: \"min\",\n\t\tvalue: 3,\n\t\tmin: 1,\n\t\tmax: 5,\n\t\tslide: function(event, ui) {\n\t\t  rebuildComparisonColumns(calcId, ui.value);\n\t\t  jQuery('.v-axis', '#' + calcId).replaceWith(buildComparisonVAxis(calcId, ui.value));\n\t\t},\n\t\tcreate: function(event, ui) {\n\t\t  // build label\n\t\t}\n\t  });\n\t\n\t\n\t\n\t  //  activateCalculator(calcId);\n\t}\n\t\n\tfunction buildComparisonVAxis(calcId, idx){\n\t  data = comparison_points_options[calcId]['data'];\n\t\n\t  ticks = getTicks(data, idx, 4); // due to rounding this can sometimes be 5\n\t\n\t  comparison_points_options[calcId]['ticks'] = ticks;\n\t\n\t  vAxisHtml  = '\t<div class=\"v-axis\">';\n\t  vAxisHtml += '\t\t<div style=\"height: 0px\"></div>';\n\t  for(i = ticks.length-1; i >= 0; --i){\n\t\tvAxisHtml += '\t\t<div class=\"grid\" style=\"height: ' + (chartHeight / ticks.length) + 'px\">';\n\t\tvAxisHtml += '\t\t\t<div class=\"grid-value\">$' + parseInt(ticks[i]) + '</div>';\n\t\tvAxisHtml += '\t\t</div>';\n\t  }\n\t  vAxisHtml += '\t</div>';\n\t\n\t  return vAxisHtml;\n\t}\n\t\n\tfunction buildComparisonHAxis(calcId){\n\t\n\t  data = comparison_points_options[calcId]['data'];\n\t\n\t  hAxisHtml  = '\t<div class=\"h-axis cols-' + (data.length - 1) + '\">';\n\t  hAxisHtml += '\t\t<div class=\"column-label\" style=\"width:' + (100 / ( data.length - 1 )) + '%\"><span>' + data[1][0] + '</span></div>';\n\t  hAxisHtml += '\t\t<div class=\"h-axis-wrapper\" style=\"width:' + (100 - (100 / ( data.length - 1 ) ) ) + '%\"><div class=\"h-axis-wrapper-inner\">';\n\t  for(i=2; i<data.length; i++){\n\t\thAxisHtml += '\t\t\t<div class=\"column-label\" style=\"width:' + (100 / ( data.length - 2 )) + '%\"><span>' + data[i][0] + '</span></div>';\n\t  }\n\t  hAxisHtml += '\t\t</div></div>';\n\t  hAxisHtml += '\t</div>';\n\t  return hAxisHtml;\n\t}\n\t\n\tfunction buildComparisonColumns(calcId, idx){\n\t  data = comparison_points_options[calcId]['data'];\n\t  ticks = getTicks(data, idx, 4);\n\t  maxVal = ticks[ticks.length-1];\n\t\n\t  columnsHTML  = '\t<div class=\"columns cols-' + (data.length - 1) + '\">';\n\t  columnsHTML += '\t\t<div class=\"column-box column-box-1\" style=\"width:' + (100 / ( data.length - 1 )) + '%\">';\n\t  columnsHTML += '\t\t\t<div class=\"blank-points\" style=\"height: ' + (chartHeight - Math.ceil((data[1][idx] / maxVal) * chartHeight)) + 'px;\"></div>';\n\t  columnsHTML += '\t\t\t<div class=\"points-wrapper\">';\n\t  columnsHTML += '\t\t\t\t<div class=\"points\" style=\"height: ' + Math.ceil((data[1][idx] / maxVal) * chartHeight) + 'px;\"><span>' + dollarFormat(data[1][idx]) + '</span></div>';\n\t  columnsHTML += '\t\t\t</div>';\n\t  columnsHTML += '\t\t</div>';\n\t  columnsHTML += '\t\t<div class=\"comparison-scroller\" style=\"width:' + (100 - (100 / ( data.length - 1 ) ) ) + '%\">';\n\t  columnsHTML += '\t\t\t<div class=\"comparison-scroller-inner\">';\n\t  for(i=2; i<data.length; i++){\n\t\tcolumnsHTML += '\t\t\t\t<div class=\"column-box column-box-' + i + '\" style=\"width:' + (100 / ( data.length - 2 )) + '%\">';\n\t\tcolumnsHTML += '\t\t\t\t\t<div class=\"blank-points\" style=\"height: ' + (chartHeight - Math.ceil((data[i][idx] / maxVal) * chartHeight)) + 'px;\"></div>';\n\t\tcolumnsHTML += '\t\t\t\t\t<div class=\"points-wrapper\">';\n\t\tcolumnsHTML += '\t\t\t\t\t\t<div class=\"points\" style=\"height: ' + Math.ceil((data[i][idx] / maxVal) * chartHeight) + 'px;\"><span>' + dollarFormat(data[i][idx]) + '</span></div>';\n\t\tcolumnsHTML += '\t\t\t\t\t</div>';\n\t\tcolumnsHTML += '\t\t\t\t</div>';\n\t  }\n\t  columnsHTML += '\t\t\t</div>';\n\t  columnsHTML += '\t\t</div>';\n\t  columnsHTML += '\t</div>';\n\t\n\t  return columnsHTML;\n\t}\n\t\n\tfunction rebuildComparisonColumns(calcId, idx){\n\t  data = comparison_points_options[calcId]['data'];\n\t  ticks = getTicks(data, idx, 4);\n\t  maxVal = ticks[ticks.length-1];\n\t\n\t  for(i=1; i<data.length; i++){\n\t\tjQuery('.blank-points', '#' + calcId + ' .column-box-' + i).height((chartHeight - Math.ceil((data[i][idx] / maxVal) * chartHeight)));\n\t\tjQuery('.points', '#' + calcId + ' .column-box-' + i).height(Math.ceil((data[i][idx] / maxVal) * chartHeight)).html('<span>' + dollarFormat(data[i][idx]) + '</span>');\n\t  }\n\t}\n\t\n\tfunction getTicks(data, idx, tickCount){\n\t  maxVal = 0;\n\t  ticks = [];\n\t  for(i=1; i<data.length; i++){\n\t\tmaxVal = Math.max(maxVal, data[i][idx]);\n\t  }\n\t  tickCount = 4;\n\t  tempStep = maxVal / tickCount;\n\t  mag = Math.floor(Math.log10(tempStep));\n\t  magPow = Math.pow(10, mag);\n\t  magMsd = parseInt(tempStep / magPow + 0.5);\n\t  stepSize = magMsd * magPow;\n\t\n\t  val = 0;\n\t  while(val < maxVal){\n\t\tval += stepSize;\n\t\tticks.push(val);\n\t  }\n\t  return ticks;\n\t}\n\t\n\tif(typeof Math.log10 == 'undefined'){\n\t  Math.log10 = function (x) {\n\t\treturn Math.log(x) / Math.LN10;\n\t  };\n\t}\n\t\n\tfunction dollarFormat(number){\n\t  return '$' + addCommas(number);\n\t}\n\t\n\tfunction addCommas(number) {\n\t  var n= number.toString().split(\".\");\n\t  n[0] = n[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\n\t  return n.join(\".\");\n\t}\n\tjQuery(document).ready(function() {\n\t  jQuery('.super-fee-comparison').each(function(idx, obj){\n\t\t// don't do anything if no id provided\n\t\tif(typeof jQuery(obj).attr('id') == 'undefined'){\n\t\t  jQuery(obj).attr('id', 'comparison' + idx);\n\t\t}\n\t\tid = jQuery(obj).attr('id');\n\t\tcomparison_points_options[id] = Object();\n\t\tdata = \"[\" + jQuery('.data', obj).html().trim() + \"]\";\n\t\tconsole.log(data, eval(data));\n\t\tjQuery('.data', obj).remove();\n\t\tcomparison_points_options[id]['data'] = eval(data);\n\t\tbuildComparison(id);\n\t  })\n\t});\n\t\n\t"}]}]