// start of follow tick
var rangeSlider = document.getElementById("userCount");
var rangeBullet = document.getElementById("rs-bullet");
var cbul = document.getElementById("countr")

rangeSlider.addEventListener("input", showSliderValue, false);

function showSliderValue() {
  rangeBullet.innerHTML = rangeSlider.value;
  var bulletPosition = (rangeSlider.value /240);
    rangeBullet.style.left= (bulletPosition * 76.1) + "%";
  cbul.style.display= "none";
}


///// LEVEL SLIDER ////
 $(document).ready(function(){
$('#levelexpl2, #levelexpl3, #levelexpl4').hide(); 
 });


$(document).ready(function(){
	 $('#level1').click(function() {
      $("#levelhover").animate({"left": "0%"}, "slow");
      $("#levelexpl1").fadeIn(500);
      $("#levelexpl2").hide();
      $("#levelexpl3").hide();
      $("#levelexpl4").hide();
     
     		});
		});
$(document).ready(function(){
	 $('#level2').click(function() {
      $("#levelhover").animate({"left": "25%"}, "slow");
      $("#levelexpl2").fadeIn(500);
      $("#levelexpl3").hide();
      $("#levelexpl4").hide();
      $("#levelexpl1").hide();
     		});
		});
$(document).ready(function(){
	 $('#level3').click(function() {
      $("#levelhover").animate({"left": "50%"}, "slow");
      $("#levelexpl3").fadeIn(500);
      $("#levelexpl1").hide();
      $("#levelexpl2").hide();
      $("#levelexpl4").hide();
     		});
		});
$(document).ready(function(){
	 $('#level4').click(function() {
      $("#levelhover").animate({"left": "75%"}, "slow");
      $("#levelexpl4").fadeIn(500);
      $("#levelexpl1").hide();
      $("#levelexpl2").hide();
      $("#levelexpl3").hide();
     		});
		});





//add comma's to Total ROI//
function removecomma() {   
   var remc = document.getElementById('roiThree').value; 
  document.getElementById('roiThreeWC').value = remc;
        var tlroi = document.getElementById('roiThreeWC').value;   
            if(tlroi != '') {             
                roiThreeWC.value = roiThreeWC.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            } else {             
                roiThreeWC.value= 0;
            }  
     var niceroi = document.getElementById('roiThreeWC').value;
    document.getElementById('niceroishow').innerHTML = "<span style='font-size:3.4rem;'><sup>$</sup></span>" + niceroi;
  
  // total monthly cost
   var remc1 = document.getElementById('totalPriceMontly').value; 
  document.getElementById('totalPriceMontlyWC').value = remc1;
        var tlcost = document.getElementById('totalPriceMontlyWC').value;   
            if(tlcost != '') {             
                totalPriceMontlyWC.value = totalPriceMontlyWC.value.replace(/\D/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');
            } else {             
                totalPriceMontlyWC.value= 0;
            }  
     var nicecost = document.getElementById('totalPriceMontlyWC').value;
    document.getElementById('nicecostshow').innerHTML = "<span style='font-size:3.4rem;'><sup>$</sup></span>" + nicecost;
  var niceusnum = document.getElementById('userNum').value;
    document.getElementById('niceusershow').innerHTML = niceusnum;
    var niceplan = document.getElementById('selectedPlan').value;
    document.getElementById('niceplanshow').innerHTML = niceplan;
  }



//calculate the EPG Line over 3 years and show usercount//
function calcROI() {  
var userC = document.getElementById("userCount").value;
var labourY = document.getElementById("labourcostyear").value;
var epg1 = document.getElementById("year1EPG").value;
var epg2 = document.getElementById("year2EPG").value;
var epg3 = document.getElementById("year3EPG").value;
document.getElementById("year1Return").value = userC * labourY * epg1;
document.getElementById("year2Return").value = userC * labourY * epg2;
document.getElementById("year3Return").value = userC * labourY * epg3;
document.getElementById("userNum").value = userC;
}

//calculate ROI for each year//
function calcROIyear() {  
var r1cal = document.getElementById("year1Return").value;
var r2cal = document.getElementById("year2Return").value;
var r3cal = document.getElementById("year3Return").value;
var c1cal = document.getElementById("year1Cost").value;
var c2cal = document.getElementById("year2Cost").value;
var c3cal = document.getElementById("year3Cost").value;

var year1roitotal = 1;
year1roitotal =  parseInt(r1cal) - parseInt(c1cal);
document.getElementById("year1ROI").value = year1roitotal;
  
var year2roitotal = 1;
year2roitotal =  parseInt(r2cal) - parseInt(c2cal);
document.getElementById("year2ROI").value = year2roitotal;
  
var year3roitotal = 1;
year3roitotal =  parseInt(r3cal) - parseInt(c3cal);
document.getElementById("year3ROI").value = year3roitotal;

var troi1 = document.getElementById("year1ROI").value;
var troi2 = document.getElementById("year2ROI").value;
var troi3 = document.getElementById("year3ROI").value;
var totalzroi = 1;
totalzroi =  parseInt(troi1) + parseInt(troi2) + parseInt(troi3);
document.getElementById("roiThree").value = totalzroi;
}


//calculate the Monthly and cost over 3years//
function selectPlan() {
  
  var userC = document.getElementById("userCount").value;
  var base = "Base Users";
  var pro = "Pro Users";
  var enterprise = "Enterprise Users";
  var price = document.getElementById("planPrice").value;
  var total = 1;
  document.getElementById("userNum").value = userC;
  if (userC > 0 && userC < 21) { 
      document.getElementById("selectedPlan").value = base;
      price = 44; 
      document.getElementById("planPrice").value = price;    
      
  } else if (userC > 20 && userC < 101) {
     document.getElementById("selectedPlan").value = pro;
     price = 119;
     document.getElementById("planPrice").value = price;
  } else {
    document.getElementById("selectedPlan").value = enterprise;
    price = 156;
    document.getElementById("planPrice").value = price;
  }
  total = userC * price;
  document.getElementById("totalPriceMontly").value = total;
  document.getElementById("year1Cost").value = total * 12;
  document.getElementById("year2Cost").value = total * 12;
  document.getElementById("year3Cost").value = total * 12;
  var c1 = document.getElementById("year1Cost").value
  var c2 = document.getElementById("year2Cost").value
  var c3 = document.getElementById("year3Cost").value
  var costtotal = 1;
costtotal =  parseInt(c1) + parseInt(c2) + parseInt(c3);
document.getElementById("totalCost").value = costtotal;
}

// render the chart

function makechart() {
  

var y1r =  document.getElementById("year1Return").value;
var y2r =  document.getElementById("year2Return").value; 
var y3r =  document.getElementById("year3Return").value; 
  
var y1c =  document.getElementById("year1Cost").value;
var y2c =  document.getElementById("year2Cost").value; 
var y3c =  document.getElementById("year3Cost").value; 
  
var y1roi =  document.getElementById("year1ROI").value;
var y2roi =  document.getElementById("year2ROI").value; 
var y3roi =  document.getElementById("year3ROI").value; 
  
  
// change chart type to bar or line //  
var typeChart = document.getElementById("typechart").value;
 
var ctx = document.getElementById("myChart").getContext('2d');
Chart.defaults.global.defaultFontColor = '#B0B0B0';
Chart.defaults.global.defaultFontSize = '10';
var myChart = new Chart(ctx, {
    type: [typeChart],
    data: {
        labels: ["Start",	"1st year",	"2nd year"],
  
        datasets: [{
            label: 'Returned', // Name the series
            data: [(y1r),	(y2r),	(y3r)], // Specify the data values array
            fill: false,
            borderColor: '#009999', // Add custom color border (Line)
            backgroundColor: '#009999', // Add custom color background (Points and Fill)
            borderWidth: 1.3 // Specify bar border width
        },
                  {
            label: 'Invested', // Name the series
            data: [(y1c),	(y2c),	(y3c)], // Specify the data values array
            fill: false,
            borderColor: '#AF235F', // Add custom color border (Line)
            backgroundColor: '#AF235F', // Add custom color background (Points and Fill)
            borderWidth: 1.3 // Specify bar border width    
                       },
                        {
            label: 'ROI', // Name the series
            data: [(y1roi),	(y2roi),	(y3roi)], // Specify the data values array
            fill: false,
            borderColor: '#50BED7', // Add custom color border (Line)
            backgroundColor: '#50BED7', // Add custom color background (Points and Fill)
            borderWidth: 1.3 // Specify bar border width    
                       },             
                 
                ]
    },
    options: {
      responsive: true, // Instruct chart js to respond nicely.
      maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height 
      
                  legend: {
         display: false //This will do the task
            }    
    }
    
});

}