// Copyright (c) VinAudit.com, Inc. All Right Reserved.
// Please contact VinAudit.com for licensing details.

/**************************************************************
Script Usage:
   <script src="//www.vinaudit.com/widgets/ownershipcost.js"></script>
   <script>
      VinAudit.OwnershipCostWidget.insertHtml();
      VinAudit.OwnershipCostWidget.render({'key': 'VA_DEMO_KEY', 'vin': '999'});
   </script>
**************************************************************/

var VinAudit = VinAudit || {};

VinAudit.dom = VinAudit.dom || new function() {
  this.loadedFiles = {};
  
  this.loadCss = function(url) {
    var element = document.createElement('link');
    element.setAttribute('rel', 'stylesheet');
    element.setAttribute('href', url);
    document.getElementsByTagName('head')[0].appendChild(element);
  };
  
  this.loadJs = function(url) {
    if (!this.loadedFiles[url]) {
      this.loadedFiles[url] = true;
      var element = document.createElement('script');
      element.setAttribute('src', url);
      document.getElementsByTagName('head')[0].appendChild(element);
    }
  };
  
  this.get = function(id) {
    return document.getElementById(id);
  }
  
  this.fill = function(id, html) {
    var element = this.get(id);
    if (element) {
      element.innerHTML = html;
    } else if (window.console) {
      window.console.log('missing elem: ' + id);
    }
  }
  
  this.hide = function(id) {
    var element = this.get(id);
    if (element) {
      element.style.display = 'none';
    } else if (window.console) {
      window.console.log('missing elem: ' + id);
    }
  }
  
  this.show = function(id) {
    var element = this.get(id);
    element.style.display = '';
  }
  
  this.fadeIn = function(id, startDelay, fadeDelay, displayStyle) {
    var elem = this.get(id);
    if (!elem) return;
    if (startDelay > 0) {
      setTimeout(function() {
        VinAudit.dom.fadeIn(id, 0, fadeDelay, displayStyle);
      }, startDelay);
    } else {
      elem.style.opacity = 0;
      elem.style.filter = "alpha(opacity=0)";
      elem.style.display = displayStyle || "inline-block";
      elem.style.visibility = "visible";
      if (fadeDelay) {
        var opacity = 0;
        var timer = setInterval(function() {
          opacity += 50 / fadeDelay;
          if (opacity >= 1) {
            clearInterval(timer);
            opacity = 1;
          }
          elem.style.opacity = opacity;
          elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
        }, 50 );
      } else {
        elem.style.opacity = 1;
        elem.style.filter = "alpha(opacity=1)";
      }
    }
  }
  
  this.selectAddOption = function(select, value, text) {
    var option = document.createElement('option');
    option.value = value;
    option.innerHTML = text;
    select.appendChild(option);
  }
  
  this.selectValue = function(selectId, value) {
    var select = document.getElementById(selectId);
    for (var i = 0; i < select.options.length; i++) {
      if (select.options[i].value == value) {
        select.selectedIndex = i;
        return;
      }
    }
  }
};

VinAudit.utils = VinAudit.utils || new function() {
  var VA = VinAudit;
  var MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
  var CURRENCY_PREFIX = '$';
  var MILEAGE_UNIT = 'miles';
  var MILEAGE_UNIT_SHORT = 'mi';

  this.setMileageUnit = function(mileageUnit, mileageUnitShort) {
    MILEAGE_UNIT = mileageUnit;
    MILEAGE_UNIT_SHORT = mileageUnitShort;
  }

  this.setCurrencyPrefix = function(currencyPrefix) {
    CURRENCY_PREFIX = currencyPrefix;
  }
  
  this.getMileageUnit = function() {
    return MILEAGE_UNIT;
  }
  
  this.getMileageUnitShort = function() {
    return MILEAGE_UNIT_SHORT;
  }
  
  this.convertMileageOutput = function(miles) {
    return (MILEAGE_UNIT == 'kilometers') ? Math.round(miles * 1.609344) : miles;
  }
  
  this.convertMileageInput = function(value) {
    return (MILEAGE_UNIT == 'kilometers') ? Math.round(value / 1.609344) : value;
  }

  this.formatDate = function(date) {
    var year = date.substring(0,4);
		var month = date.substring(5,7);
    var day = date.substring(8,10);
		return MONTHS[parseInt(month) - 1] + ' ' + day + ', ' + year;
  }

  this.formatCents = function(num) {
    return num ? CURRENCY_PREFIX + num.toFixed(2) : num;
  }

  this.formatPrice = function(num, defaultText) {
    if (defaultText && !num) {
      return defaultText;
    }
    var num = VA.utils.formatNumber(num);
    return num ? CURRENCY_PREFIX + num : num;
  }
  
  this.formatNumber = function(num) {
    var num = parseInt(num);
    if (isNaN(num)) {
      return null;
    } else {
      return (num + '').replace(/(\d)(?=(\d{3})$)/g, "$1,").toString();
    }
  }

  this.computePrices = function(mean, stdev) {
    var prices = [];
    for (i = 0; i <= 100; i++) {
      var price = this.formatPrice(mean + stdev * (i - 50) / 25);
      prices.push(price || 'No data');
    }
    return prices;
  }

	this.normalCdf = function(mean, sigma, to) {
    var z = (to-mean)/Math.sqrt(2*sigma*sigma);
    var t = 1/(1+0.3275911*Math.abs(z));
    var a1 =  0.254829592;
    var a2 = -0.284496736;
    var a3 =  1.421413741;
    var a4 = -1.453152027;
    var a5 =  1.061405429;
    var erf = 1-(((((a5*t + a4)*t) + a3)*t + a2)*t + a1)*t*Math.exp(-z*z);
    var sign = 1;
    if (z < 0) {
      sign = -1;
    }
    return (1/2)*(1+sign*erf);
  }

  this.getUrlParam = function(field) {
		var urlParts = window.location.search.substring(1).split('&');
		for (var i = 0; i < urlParts.length; i++) {
			var param = urlParts[i].split('=');
			if (param[0] == field) {
				return param[1];
			}
		}
	}
};VinAudit.OwnershipCostWidget = new function() {
	var VA = VinAudit;
  var key = 'VA_DEMO_KEY';
  var vin = null;
  var year = null;
  var make = null;
  var model = null;
  var trim = null;
  var country = null;
  var mileage_start = null;
  var mileage_year = null;
  var myPie;
  var myBar;
  var jsonData;
  var isLoaded = false;
  
  var YEARS = 5;
  var CATEGORIES = [
    'depreciation',
    'insurance',
    'fuel',
    'electricity',
    'maintenance',
    'repairs',
    'fees'
  ];
  var CATEGORY_NAMES = [
    'Depreciation',
    'Insurance',
    'Fuel',
    'Electricity',
    'Maintenance',
    'Repairs',
    'Taxes & Fees'
  ];
  
  var COLORS_BASE = ['rgba(11,50,89,1)', 'rgba(15,72,127,1)', 'rgba(52,109,164,1)', 'rgba(88,145,200,1)', 'rgba(124,181,236,1)', 'rgba(160,217,255,1)', 'rgb(187 228 255)'];
  //var COLORS_HILIGHT = ['rgba(13,58,104,1)', 'rgba(40,97,152,1)', 'rgba(77,134,189,1)', 'rgba(115,162,208,1)', 'rgba(149,206,255,1)', 'rgba(185,242,255,1)'];
  var COLORS_HILIGHT = ['rgba(55,81,12,1)', 'rgba(74,115,16,1)', 'rgba(109,150,50,1)', 'rgba(142,183,84,1)', 'rgba(176,217,117,1)', 'rgba(208,235,151,1)', 'rgba(208,235,151,0.7)'];
  
  this.getHtml = function() {
    var html = [];
    html.push('<div class="va_oc_wrapper"><div class="va_oc_graph_table">' +
      '<div id="va_oc_title" class="va_oc_title" style="display: none"><div style="font-size:18px; font-weight: bold;"><span id="va_oc_title_text">Ownership Cost - Loading...</span></div></div><div id="va_oc_sub_title" class="va_oc_sub_title" style="display: none"><h2><span id="va_oc_subtitle_text"></span></h2></div>' +
      '<div id="va_oc_graph"><div id="va_oc_chartjs_tooltip" style="display: none;"></div><div class="va_oc_chart_area"><div class="va_oc_left_side"><canvas id="va_oc_bar_chart" height="290" width="425"></canvas><div id="va_oc_ylabel" style="display: none">Cost of Ownership</div></div><div class="va_oc_right_side"><div id="va_oc_canvas_holder"><canvas id="va_oc_pie_chart" height="100" width="100"></canvas><div id="va_pie_label" style="display: none"><span id="va_oc_pie_label_text">Total</span>: <span id="va_pie_cost_text"></span></div></div>');
    html.push('<ul id="va_oc_legend_ul" style="display: none">');
    for (var i = 0; i < CATEGORIES.length; i++) {
      html.push('<li id="' + CATEGORIES[i] + '"><div id="va_oc_legend_item'+i+'" class="va_oc_legend_item"><div id="va_oc_legend_box'+i+'" class="va_oc_box" id="va_oc_legend'+i+'"></div><span id="va_oc_legend'+i+'label"></span> (<span id="va_oc_legend'+i+'cost"></span>)</div></li>');
    }
    html.push('</ul></div></div></div><div id="va_oc_table" style="display: none">');

    // OC Table
    html.push('<table id="va_oc_data_table"><thead><tr><td style="border-top-left-radius:4px;"></td>');
    for (var i = 1; i <= YEARS; i++) {
      html.push('<td>Year '+i+'</td>');
    }
    html.push('<td style="border-top-right-radius:4px;">Total</td></tr></thead><tbody>');
    for (var i = 0; i < CATEGORY_NAMES.length; i++) {
      html.push('<tr id="label_' + CATEGORIES[i] +'"><td>'+CATEGORY_NAMES[i]+'</td>');
      for (var y = 1; y <= YEARS; y++) {
        html.push('<td id="va_oc_'+CATEGORIES[i]+y+'"></td>');
      }
      html.push('<td id="va_oc_'+CATEGORIES[i]+'_total"></td>');
      html.push('</tr>');
    }
    html.push('<tr class="va_oc_data_table_lastrow"><td style="border-bottom-left-radius:4px;">Ownership Costs</td>');
    for (var y = 1; y <= YEARS; y++) {
      html.push('<td id="va_oc_ownershipcost'+y+'"></td>');
    }
    html.push('<td id="va_oc_ownershipcost_total" style="border-bottom-right-radius:4px;"></td>');
    html.push('</tr></tbody></table></div>');
    
    // Bottom links
    html.push('<div id="va_oc_bottom_links" class="va_oc_bottom_links" style="display: none"><div style="float:right;"><span id="va_oc_graph_link" class="active">Graph</span> | <span id="va_oc_table_link">Table</span></div></div>');
    
    // Footer
    html.push('</div><div id="va_oc_footer"><div id="va_oc_assumptions" class="va_oc_footer_block"><h2>ASSUMPTIONS</h2>Vehicle: <span id="va_oc_vehicle2_text"></span><br>Mileage: <span id="va_oc_mileage_content" style="display: none"><span id="va_oc_startmileage_text"></span><select id="va_oc_startmileage_text_dd" style="display:none"></select> <span id="va_oc_mileage_unit_a">mi</span> + <span id="va_oc_yearmileage_text"></span><select id="va_oc_yearmileage_text_dd" style="display:none"></select> <span id="va_oc_mileage_unit_b">mi</span>/year</span><br></div><div id="va_oc_estimates" class="va_oc_footer_block"><h2>ESTIMATES</h2>'+YEARS+'-Year Mileage: <span id="va_oc_totalmiles_text"></span><br>Cost Per <span id="va_oc_costper_unit_text">Mile</span>: <span id="va_oc_permile_text"></span></div><div id="va_oc_powered" class="va_oc_footer_block"><h2>POWERED BY</h2><img src="//www.vinaudit.com/widgets/images/logo.png" width=110 height=36></div></div>');
   
    return html.join('');   
  }
  
  this.render = function(options) {
    if (!window.ChartStackedBarLoaded) {  // "Chart" not loaded yet? Retry...
      setTimeout(function() {
        VinAudit.OwnershipCostWidget.render(options);
      }, 200);
      return;
    }
    vin = options.vin || '';
    year = options.year || '';
    make = options.make || '';
    model = options.model || '';
    trim = options.trim || '';
    mileage_start = options.mileage_start || -1;
    mileage_year = options.mileage_start || -1;
    country = options.country || '';
    
    if (country == 'CAN') {
      VinAudit.utils.setCurrencyPrefix('C$');
      VA.utils.setMileageUnit('kilometers', 'km');
      VA.dom.fill('va_oc_mileage_unit_a', 'km');
      VA.dom.fill('va_oc_mileage_unit_b', 'km');
      VA.dom.fill('va_oc_costper_unit_text', 'Kilometer');
    }
    
    reloadWidget(true);
  };
  
  this.reRender = function(options) {
    var oldVin = vin;
    var oldYear = year;
    var oldMake = make;
    var oldModel = model;
    var oldTrim = trim;
    vin = options.vin || vin;
    year = options.year || year;
    make = options.make || make;
    model = options.model || model;
    trim = options.trim || trim;
    mileage_start = options.mileage_start || mileage_start;
    mileage_year = options.mileage_year || mileage_year;
    key = options.key || 'VA_DEMO_KEY';
    reloadWidget(oldVin != vin || oldYear != year || oldMake != make || oldModel != model || oldTrim != trim);
  }
  
  this.destroy = function() {
    if (myPie) {
      myPie.destroy();
      myPie = null;
    }
    if (myBar) {
      myBar.destroy();
      myBar = null;
    }
  }
  
  var reloadWidget = function(newVin) {
    var dataUrl = '';
    if (vin != '') {
      dataUrl = '//ownershipcost.vinaudit.com/getownershipcost.php?key='+key+'&vin='+vin+'&mileage_start='+mileage_start+'&mileage_year='+mileage_year+'&country='+country;
    } else {
      dataUrl = '//ownershipcost.vinaudit.com/getownershipcost.php?key=' + key + '&year=' + year + '&make=' + make + '&model=' + model + '&trim=' + trim +'&mileage_start='+mileage_start+'&mileage_year='+mileage_year+'&country='+country;
    }
    
    hideGraphElements(newVin);
    isLoaded = false;
    getJson(dataUrl, onJsonReady, onJsonFailed);
  }
  
  var hideGraphElements = function(newVin) {
    VA.dom.hide('va_oc_title');
    VA.dom.hide('va_oc_sub_title');
    VA.dom.hide('va_pie_label');
    VA.dom.hide('va_oc_ylabel');
    VA.dom.hide('va_oc_legend_ul');
    VA.dom.hide('va_oc_bottom_links');
    VA.dom.hide('va_oc_mileage_content');
    VinAudit.OwnershipCostWidget.destroy();
  };
  
  var fadeInUiElements = function(data) {
    VA.dom.show('va_oc_mileage_content');
    VA.dom.fadeIn('va_oc_title', 0, 300, 'block');
    VA.dom.fadeIn('va_oc_sub_title', 0, 300, 'block');
    VA.dom.fadeIn('va_oc_ylabel', 0, 300, 'block');
    VA.dom.fadeIn('va_oc_bottom_links', 0, 300, 'block');
    window.setTimeout(function() {
      drawGraphUi(data);
      VA.dom.fadeIn('va_pie_label', 200, 300, 'block');
      VA.dom.fadeIn('va_oc_legend_ul', 700, 300, 'block');
    }, 500);
  }
  
  var getJson = function(path, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
          if (success) success(JSON.parse(xhr.responseText));
        } else {
          if (error) error(xhr);
        }
      }
    };
    xhr.open('GET', path, true);
    xhr.send();
  };
  
  var getListTotal = function(list) {
    var total = 0;
    for (var i = 0; i < list.length; i++) {
      total += list[i];
    }
    return total;
  }
  
  var onJsonFailed = function() {
    if (!isLoaded) {
      VA.dom.fill('va_oc_title_text', 'Ownership Cost - Loading...');
      VA.dom.fill('va_oc_subtitle_text', 'Error: Loading failed. Please try again later.');
      VA.dom.show('va_oc_title');
      VA.dom.show('va_oc_sub_title');
    }
  }
  
  var onJsonReady = function(data) {
    isLoaded = true;
    
    // Fix data.
    if (!data) {
      data = [];
    }

    console.log('data: ', data);

    if (!data['vehicle']) {
      data['vehicle'] = 'Unknown Vehicle';
    }
    for (var i = -1; i < CATEGORIES.length; i++) {
      var category = i >= 0 ? CATEGORIES[i] : 'total';
      //Check if the all the values of any field is zero, Hide from the graph and table.
      if (i > 0) {
        var isAllZero;
        if(data[category + '_cost']) {
          isAllZero = data[category + '_cost'].every(item => item === 0);
        }
        if (isAllZero) {
          document.getElementById(category).style.display = 'none';
          document.getElementById('label_' + category).style.display = 'none';
        } else {
          document.getElementById(category).style.display = '';
          document.getElementById('label_' + category).style.display = '';
        }
      }
      
      if (!data[category+'_cost']) {
        data[category+'_cost'] = [];
      }
      for (var y = 1; y <= YEARS; y++) {
        if (!data[category+'_cost'][y-1]) {
          data[category+'_cost'][y-1] = null;
        }
      }
    }
    if (!data['total_cost_sum']) {
      data['total_cost_sum'] = null;
    }
    
    if (data['mileage_start']) {
      mileage_start = data['mileage_start'];
    }
    if (data['mileage_year']) {
      mileage_year = data['mileage_year'];
    }
    totalcostown = data['total_cost_sum'];
    
    fillUiText(data);
    fadeInUiElements(data);
  }
  
  var drawGraphUi = function(data) {
    var HAS_COST_DATA = !!data['total_cost_sum'];
    
    for (var i = 0; i < CATEGORIES.length; i++) {
      var total = 0;
      for (var y = 1; y <= YEARS; y++) {
        var cost = data[CATEGORIES[i]+'_cost'][y-1];
        VA.dom.fill('va_oc_' + CATEGORIES[i] + y, VA.utils.formatPrice(cost) || 'No data');
        total += cost;
      }
      VA.dom.fill('va_oc_'+CATEGORIES[i]+'_total', total > 0 ? VA.utils.formatPrice(total) : 'No data');
    }
    for (var y = 1; y <= YEARS; y++) {
      VA.dom.fill('va_oc_ownershipcost' + y, VA.utils.formatPrice(data['total_cost'][y-1]) || 'No data');
    }
    VA.dom.fill('va_oc_ownershipcost_total', VA.utils.formatPrice(data['total_cost_sum']) || 'No data');

    var bar_value_list = [];
    var totals = [];
    var labels = [];
    for (var i = 0; i < CATEGORIES.length; i++) {
      bar_value_list.push(data[CATEGORIES[i]+'_cost']);
      totals.push(getListTotal(data[CATEGORIES[i]+'_cost']));
      labels.push(CATEGORY_NAMES[i]);
    }
    
    for (var i = 0; i < CATEGORIES.length; i++) {
      VA.dom.fill('va_oc_legend'+i+'label', labels[i]);
      VA.dom.fill('va_oc_legend'+i+'cost', totals[i] > 0 ? VA.utils.formatPrice(totals[i]) : 'No data');
    }
    
    var barChartData = {
        labels: [],
        datasets: []
        };
    var BLANK_LIST = [];
    for (var y = 1; y <= YEARS; y++) {
      barChartData.labels.push('Year '+y);
      BLANK_LIST.push(1);
    }
    for (var i = 0; i < CATEGORIES.length; i++) {
      barChartData.datasets.push({
        fillColor : COLORS_BASE[CATEGORIES.length-1-i],
        highlightFill: COLORS_HILIGHT[CATEGORIES.length-1-i],
        data: HAS_COST_DATA ? bar_value_list[CATEGORIES.length-1-i] : BLANK_LIST
      });
    }

    Chart.defaults.global.scaleLabel = function(label){
      return HAS_COST_DATA ? VA.utils.formatPrice(label.value) : '';
    };
    
    var ctx = document.getElementById('va_oc_bar_chart').getContext("2d");
    var myChart = new Chart(ctx);
    myBar = myChart.StackedBar(barChartData, {
      barStrokeWidth : 1,
      barValueSpacing : 15,
      scaleFontFamily: "'Open Sans', sans-serif",
      tooltipFontFamily: "'Open Sans', sans-serif",
      tooltipFontSize: 12,
      tooltipTitleFontFamily:"'Open Sans', sans-serif",
      tooltipTitleFontSize: 12,
      customTooltips: function() { return; }
    });
  
    var pieChartLastHighlightedIndex = -1;
    Chart.defaults.global.customTooltips = function(tooltip) {
      var tooltipEl = VA.dom.get('va_oc_chartjs_tooltip');
      var labelParts;
      var i = -1;
      if (tooltip.text) {
        labelParts = tooltip.text.split(':');
        i = parseInt(labelParts[0]);
      }
      if (i == pieChartLastHighlightedIndex) {
        if (!tooltip || !tooltip.text) {
          tooltipEl.style.display = 'none';
        }
        return;
      }
      if (pieChartLastHighlightedIndex >= 0) {
        // clean up: pieChartLastHighlightedIndex
        var i2 = pieChartLastHighlightedIndex;
        for (j = 0; j < myBar.datasets[CATEGORIES.length - 1 - i2].bars.length; j++) {
          var bar = myBar.datasets[CATEGORIES.length - 1 - i2].bars[j];
          bar.fillColor = COLORS_BASE[i2];
        }
        myBar.update();
        VA.dom.get('va_oc_legend_item'+i2).className = 'va_oc_legend_item';
        VA.dom.get('va_oc_legend_box'+i2).style.backgroundColor = COLORS_BASE[i2];
        pieChartLastHighlightedIndex = -1;
      }
      if (!tooltip || !tooltip.text) {
        tooltipEl.style.display = 'none';
        return;
      }
      if (!isNaN(i) && i >= 0) {
        pieChartLastHighlightedIndex = i;
        // highlight category 
        for (j = 0; j < myBar.datasets[CATEGORIES.length-1-i].bars.length; j++) {
          var bar = myBar.datasets[CATEGORIES.length-1-i].bars[j];
          bar.fillColor = COLORS_HILIGHT[i];
        }
        myBar.update();
        
        // VA.dom.get('va_oc_legend_item'+i).className = 'va_oc_legend_item_hilighted';
        VA.dom.get('va_oc_legend_box'+i).style.backgroundColor = COLORS_HILIGHT[i];
        
        // Set caret Position
        // tooltipEl.removeClass('above below');
        tooltipEl.className = tooltip.yAlign;
        // Set Text
        tooltipEl.innerHTML = labels[i] + ': ' + (HAS_COST_DATA ? labelParts[1] : 'No data');
        // Find Y Location on page
        var top;
        if (tooltip.yAlign == 'above') {
            top = tooltip.y - tooltip.caretHeight - tooltip.caretPadding;
        } else {
            top = tooltip.y + tooltip.caretHeight + tooltip.caretPadding;
        }
        // Display, position, and set styles for font
        tooltipEl.style.opacity = 1;
        tooltipEl.style.left = tooltip.chart.canvas.offsetLeft + tooltip.x + 'px';
        tooltipEl.style.top = tooltip.chart.canvas.offsetTop + top + 'px';
        tooltipEl.style.fontFamily = tooltip.fontFamily;
        tooltipEl.style.fontSize = tooltip.fontSize;
        tooltipEl.style.fontStyle = tooltip.fontStyle;
        tooltipEl.style.display = '';
      }
    };
    
    var pieData = [];
    for (var i = 0; i < CATEGORIES.length; i++) {
      pieData.push({
        value: HAS_COST_DATA ? (totals[i]/totalcostown*100).toFixed(2) : 1,
        color: COLORS_BASE[i],
        highlight: COLORS_HILIGHT[i],
        label: i+''
      });
    }
    var ctx2 = VinAudit.dom.get("va_oc_pie_chart").getContext("2d");
    myPie = new Chart(ctx2).Pie(pieData, {
      segmentShowStroke : false,
      tooltipFontFamily: "'Open Sans', sans-serif",
      tooltipFontSize: 12,
      tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>%",
    });
    
    var myBarShowTooltip = function(activeBar, text) {
      var tooltipEl = VA.dom.get('va_oc_chartjs_tooltip');
      if (!activeBar) {
        tooltipEl.style.display = 'none';
        return;
      }
      tooltipEl.className = 'above';
      tooltipEl.innerHTML = text;
      tooltipEl.style.opacity = 1;
      tooltipEl.style.left = myBar.chart.canvas.offsetLeft + activeBar.x + 'px';
      tooltipEl.style.top = myBar.chart.canvas.offsetTop + activeBar.y - 10 + 'px';
      tooltipEl.style.display = '';
    }
    
    var onBarChartMouseEvent = function(evt) {
        var activeBars = myBar.getBarsAtEvent(evt);
        if (activeBars.length > 0) {
          for (var y = 1; y <= YEARS; y++) {
            if (activeBars[0].label == 'Year ' + y) {
              for (var i = 0; i < CATEGORIES.length; i++) {
                myPie.segments[i].value = data['total_cost'][y-1] ? (bar_value_list[i][y-1]/data['total_cost'][y-1]*100).toFixed(2) : 1;
                myPie.segments[i].fillColor = COLORS_HILIGHT[i];
                VA.dom.get('va_oc_legend_box'+i).style.backgroundColor = COLORS_HILIGHT[i];
              }
              myPie.update();
              VA.dom.fill('va_oc_pie_label_text', 'Year ' + y);
              VA.dom.fill('va_pie_cost_text', VA.utils.formatPrice(data['total_cost'][y-1], 'No data'));
              myBarShowTooltip(activeBars[0], VA.utils.formatPrice(data['total_cost'][y-1], 'No data'));
              
              for (var i = 0; i < CATEGORIES.length; i++) {
                VA.dom.fill('va_oc_legend'+i+'cost', VA.utils.formatPrice(bar_value_list[i][y-1], 'No data'));
              }
            }
          }
        } else {
          myBarShowTooltip(null);
          for (var i = 0; i < CATEGORIES.length; i++) {
            myPie.segments[i].value = totalcostown > 0 ? (totals[i]/totalcostown*100).toFixed(2) : 1;
            myPie.segments[i].fillColor = COLORS_BASE[i];
            VA.dom.get('va_oc_legend_box'+i).style.backgroundColor = COLORS_BASE[i];
          }
          myPie.update();
          VA.dom.fill('va_oc_pie_label_text', 'Total');
          VA.dom.fill('va_pie_cost_text', VA.utils.formatPrice(totalcostown, 'No data'));
          for (var i = 0; i < CATEGORIES.length; i++) {
            VA.dom.fill('va_oc_legend'+i+'cost', VA.utils.formatPrice(totals[i], 'No data'));
          }
        }
    };
    
    VinAudit.dom.get("va_oc_bar_chart").onmousemove = onBarChartMouseEvent;
    VinAudit.dom.get("va_oc_bar_chart").onmouseout = onBarChartMouseEvent;
    
    for (var i = 0; i < CATEGORIES.length; i++) {
      VA.dom.get('va_oc_legend_box'+i).style.backgroundColor = COLORS_BASE[i];
      
      VA.dom.get('va_oc_legend_item'+i).onmouseover = (function(i, myPie, myBar) {
        return function() {
          myPie.segments[i].fillColor = COLORS_HILIGHT[i];
          myPie.update();
          for (j = 0; j < myBar.datasets[CATEGORIES.length-1-i].bars.length; j++) {
            var bar = myBar.datasets[CATEGORIES.length-1-i].bars[j];
            bar.fillColor = COLORS_HILIGHT[i];
          }
          myBar.update();
          
          VA.dom.get('va_oc_legend_item'+i).className = 'va_oc_legend_item_hilighted';
          VA.dom.get('va_oc_legend_box'+i).style.backgroundColor = COLORS_HILIGHT[i];
        }
      })(i, myPie, myBar);
      
      VA.dom.get('va_oc_legend_item'+i).onmouseout = (function(i, myPie, myBar) {
        return function() {
          myPie.segments[i].fillColor = COLORS_BASE[i];
          myPie.update();
          VA.dom.get('va_oc_legend_item'+i).className = 'va_oc_legend_item';
          for (j = 0; j < myBar.datasets[CATEGORIES.length-1-i].bars.length; j++) {
            var bar = myBar.datasets[CATEGORIES.length-1-i].bars[j];
            bar.fillColor = COLORS_BASE[i];
            bar.strokeColor = bar.origStrokeColor;
          }
          myBar.update();
          VA.dom.get('va_oc_legend_item'+i).className = 'va_oc_legend_item';
          VA.dom.get('va_oc_legend_box'+i).style.backgroundColor = COLORS_BASE[i];
        }
      })(i, myPie, myBar);
    }
  }
  
  var fillUiText = function(data) {
    if (!data.success && data.error == 'rate_limited') {
      VA.dom.fill('va_oc_title_text', '<span style="color:red">Demo expired. Please contact support@vinaudit.com for licensing.</span>');
    } else {
      VA.dom.fill('va_oc_title_text', 'Ownership Cost for ' + data.vehicle);
    }
    VA.dom.fill('va_oc_vehicle2_text', data.vehicle);
    
    VA.dom.fill('va_oc_startmileage_text', VA.utils.formatNumber(VA.utils.convertMileageOutput(data['mileage_start'])));
    VA.dom.fill('va_oc_yearmileage_text', VA.utils.formatNumber(VA.utils.convertMileageOutput(data['mileage_year'])));
    
    VA.dom.fill('va_oc_subtitle_text', 'Estimated: ' + VA.utils.formatPrice(data['total_cost_sum'], 'Unknown') + ' over the next 5 years');
    VA.dom.fill('va_oc_totalmiles_text', VA.utils.formatNumber(VA.utils.convertMileageOutput(data['mileage_year']*5)) + ' ' + VA.utils.getMileageUnitShort() || 'No data');
    VA.dom.fill('va_pie_cost_text', VA.utils.formatPrice(data['total_cost_sum']) || 'No data');
    
    VA.dom.fill('va_oc_permile_text', data['total_cost_sum'] ? VA.utils.formatCents(data['total_cost_sum']/(data['mileage_year']*5)) : 'No data');
    
    // fill start mileage
    var convertedMileageStart = VA.utils.convertMileageOutput(data['mileage_start']);
    var startMileageSelect = VA.dom.get('va_oc_startmileage_text_dd');
    startMileageSelect.innerHTML = '';
    var lastValue = -1;
    var maxI = 200;
    for (var i = 0; i <= maxI;) {
      var value = i*1000;
      VA.dom.selectAddOption(startMileageSelect, value, VA.utils.formatNumber(value));
      i += 25;
      if (convertedMileageStart > value && (convertedMileageStart < i*1000 || i > maxI)) {
        VA.dom.selectAddOption(startMileageSelect, convertedMileageStart, VA.utils.formatNumber(convertedMileageStart));
      }
    }
    VA.dom.selectAddOption(startMileageSelect, 'input', 'Input...');
    
    // fill yearly mileage...
    var yearMileageSelect = VA.dom.get('va_oc_yearmileage_text_dd');
    yearMileageSelect.innerHTML = '';
    var lastValue = -1;
    var maxI = 50;
    for (var i = 0; i <= maxI;) {
      var value = i*1000;
      VA.dom.selectAddOption(yearMileageSelect, value, VA.utils.formatNumber(value));
      i += 5;
      if (data['mileage_year'] > value && (data['mileage_year'] < i*1000 || i > maxI)) {
        VA.dom.selectAddOption(yearMileageSelect, data['mileage_year'], VA.utils.formatNumber(data['mileage_year']));
      }
    }
    VA.dom.selectAddOption(yearMileageSelect, 'input', 'Input...');
    
    VA.dom.get('va_oc_startmileage_text').onclick = function() {
      VA.dom.hide('va_oc_startmileage_text');
      VA.dom.show('va_oc_startmileage_text_dd');
      VA.dom.selectValue('va_oc_startmileage_text_dd', convertedMileageStart);
    };
    
    VA.dom.get('va_oc_startmileage_text_dd').onchange = function() {
      var startMileage = VA.dom.get('va_oc_startmileage_text_dd').value;
      if (startMileage == 'input') {
        startMileage = prompt('Start mileage:', mileage_start);
        if (startMileage !== null) {
          startMileage = parseInt(startMileage);
          if (isNaN(startMileage) || startMileage < 0 || startMileage > 1000000) {
            startMileage = null;
          }
        }
        if (startMileage === null) {
          VA.dom.selectValue('va_oc_startmileage_text_dd', convertedMileageStart);
          return;
        }
      }
      VinAudit.OwnershipCostWidget.reRender({
        'mileage_start': VA.utils.convertMileageInput(startMileage)
      });
      VA.dom.hide('va_oc_startmileage_text_dd');
      VA.dom.show('va_oc_startmileage_text');
    };
    
    VA.dom.get('va_oc_yearmileage_text').onclick = function() {
      VA.dom.hide('va_oc_yearmileage_text');
      VA.dom.show('va_oc_yearmileage_text_dd');
      VA.dom.selectValue('va_oc_yearmileage_text_dd', data['mileage_year']);
    };
    
    VA.dom.get('va_oc_yearmileage_text_dd').onchange = function() {
      var yearMileage = VA.dom.get('va_oc_yearmileage_text_dd').value;
      if (yearMileage == 'input') {
        yearMileage = prompt('Enter yearly mileage:', mileage_year);
        if (yearMileage !== null) {
          yearMileage = parseInt(yearMileage);
          if (isNaN(yearMileage) || yearMileage < 0 || yearMileage > 1000000) {
            yearMileage = null;
          }
        }
        if (yearMileage === null) {
          VA.dom.selectValue('va_oc_yearmileage_text_dd', data['mileage_year']);
          return;
        }
      }
      VinAudit.OwnershipCostWidget.reRender({
        'mileage_year': VA.utils.convertMileageInput(yearMileage)
      })
      VA.dom.hide('va_oc_yearmileage_text_dd');
      VA.dom.show('va_oc_yearmileage_text');
    };
    
    VA.dom.get('va_oc_table_link').onclick = function() {
      var tableLink = VA.dom.get('va_oc_table_link');
      var graphLink = VA.dom.get('va_oc_graph_link');
      if (tableLink.className != 'active') {
        tableLink.className = tableLink.className == '' ? 'active' : '';
        graphLink.className = graphLink.className == '' ? 'active' : '';
        VA.dom.hide('va_oc_graph');
        VA.dom.show('va_oc_table');
      }
    };
    
    VA.dom.get('va_oc_graph_link').onclick = function() {
      var tableLink = VA.dom.get('va_oc_table_link');
      var graphLink = VA.dom.get('va_oc_graph_link');
      if (graphLink.className != 'active') {
        tableLink.className = tableLink.className == '' ? 'active' : '';
        graphLink.className = graphLink.className == '' ? 'active' : '';
        VA.dom.hide('va_oc_table');
        VA.dom.show('va_oc_graph');
      }
    };
  }
}

VinAudit.dom.loadCss('https://fonts.googleapis.com/css?family=Open+Sans');
VinAudit.dom.loadCss('https://www.vinaudit.com/widgets/ownershipcost/styles.css');
VinAudit.dom.loadJs('https://www.vinaudit.com/widgets/libs/chart.js-1.0.2-h_min.js');
VinAudit.dom.loadJs('https://www.vinaudit.com/widgets/libs/chart.js.stackedbar.js');