//Declare all the variables that appear on the sliders, the start and end values of each one, and the 
//list values

//Global
var start = 10
var end = 205 
var sliderwidth = 89

//Loan Amount
var maxAmount = 300000
var minAmount = 10000

//Length Of Term			
var maxTerm = 480
var minTerm = 12
			
// APR options			
var maxAPR = 12
var minAPR = 3

// Initial values on page load
var APRIndex = 6
var TermIndex= 300
var LoanAmount = 100000


// set default values 
function CalculatorInit()
{

var AmountRange = maxAmount - minAmount
var TermRange = maxTerm - minTerm
var APRRange = maxAPR - minAPR

var AmountFactor = (end) /  AmountRange
var TermFactor = (end) / TermRange
var APRFactor = (end) / APRRange 



var startAmount = LoanAmount * AmountFactor
var startTerm = TermIndex * TermFactor
var startAPR = APRIndex * APRFactor


document.getElementById("Amount").style.left = 70 + "px"
document.getElementById("Term").style.left = 130 + "px"
document.getElementById("APR").style.left = 75 + "px"

APRCalculation(APRIndex, TermIndex, LoanAmount)
document.getElementById("Amount").innerHTML =  "\u00A3" + (LoanAmount/1000) + ",000"
document.getElementById("Term").innerHTML =   TermIndex/12  + " Years"
document.getElementById("APR").innerHTML =  APRIndex.toFixed(1)+ "%"
document.getElementById("Amount2").innerHTML =  "\u00A3" + (LoanAmount/1000) + ",000"
document.getElementById("Term2").innerHTML =   TermIndex/12  + " Years"
document.getElementById("APR2").innerHTML =  APRIndex.toFixed(1) + "%"
}
		
var DragHandler = {

    // private property.
    _oElem : null,


    // public method. Attach drag handler to an element.
    attach : function(oElem) {
        oElem.onmousedown = DragHandler._dragBegin;

        // callbacks
        oElem.dragBegin = new Function();
        oElem.drag = new Function();
        oElem.dragEnd = new Function();

        return oElem;
    },


    // private method. Begin drag process.
    _dragBegin : function(e) {
        var oElem = DragHandler._oElem = this;

        if (isNaN(parseInt(oElem.style.left))) { oElem.style.left = '10px'; }
        if (isNaN(parseInt(oElem.style.top))) { oElem.style.top = '0px'; }

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;
        oElem.mouseX = e.clientX;
        oElem.mouseY = e.clientY;

        oElem.dragBegin(oElem, x, y);

        document.onmousemove = DragHandler._drag;
        document.onmouseup = DragHandler._dragEnd;
        return false;
    },


    // private method. Drag (move) element.
    _drag : function(e) {
	


        var oElem = DragHandler._oElem;

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        e = e ? e : window.event;
		var position = x + (e.clientX - oElem.mouseX)
		
		if (position >= start && position <= end)
		{
        oElem.style.left = position + 'px';
		}
		
		if (oElem.id == "Amount"){
		
			var rangeAmount = maxAmount - minAmount
			var factor = rangeAmount/(end-start)
			var AmountReal = (parseInt(oElem.style.left)-start) * factor
			AmountReal = AmountReal/5000
			var AmountDisplay = (Math.round(AmountReal,0) * 5000) + minAmount
			
			LoanAmount = AmountDisplay
			
			document.getElementById("Amount").innerHTML =  "\u00A3" + (AmountDisplay)/1000 + ",000"
			document.getElementById("Amount2").innerHTML =  "\u00A3" + (AmountDisplay)/1000 + ",000"

			APRCalculation(APRIndex, Math.round(TermIndex/12,0)*12, LoanAmount)
		
		}
		
		if (oElem.id == "Term"){
		
			var rangeAmount = maxTerm - minTerm
			var factor = rangeAmount/(end-start)
			var PositionReal = (parseInt(oElem.style.left)-start) * factor
			var SelectedLevel = Math.round(PositionReal,0)
			
			TermIndex = SelectedLevel + minTerm

			document.getElementById("Term").innerHTML = Math.round(TermIndex/12,0) + " Years"
			document.getElementById("Term2").innerHTML = Math.round(TermIndex/12,0) + " Years"
			APRCalculation(APRIndex, Math.round(TermIndex/12,0)*12, LoanAmount)
		
		}
		
		if (oElem.id == "APR"){
		
			var rangeAmount = maxAPR - minAPR
			var factor = rangeAmount/(end- start)
			var PositionReal =  (parseInt(oElem.style.left)-start) * factor
			var SelectedLevel = PositionReal
		
			APRIndex = SelectedLevel + minAPR
			
			var APRvalue = Math.round(APRIndex*10)/10
			
			document.getElementById("APR").innerHTML = APRvalue.toFixed(1) + "%"
			document.getElementById("APR2").innerHTML =  APRvalue.toFixed(1) + "%"
			
			APRCalculation(Math.round(APRIndex*10)/10, Math.round(TermIndex/12,0)*12, LoanAmount)
		
		}

        oElem.mouseX = e.clientX;
        oElem.mouseY = e.clientY;

        oElem.drag(oElem, x, y);

        return false;
    },


    // private method. Stop drag process.
    _dragEnd : function() {
        var oElem = DragHandler._oElem;

        var x = parseInt(oElem.style.left);
        var y = parseInt(oElem.style.top);

        oElem.dragEnd(oElem, x, y);

        document.onmousemove = null;
        document.onmouseup = null;
        DragHandler._oElem = null;
    }

}

function APRCalculation(APRIndex, TermIndex, LoanAmount){
	

var APRRate =  APRIndex

var n  = TermIndex - (2*TermIndex)
var R  = APRRate/1200
var Pv = LoanAmount

var Left =  Pv*R
var Right = 1 - Math.pow((1+R),n)

var MonthlyPayment  = (Left/Right)

//interest only payment
var I = APRRate/100
var IP = (Pv*I)/12

document.getElementById("MonthlyPayment").innerHTML =  "\u00A3" + Math.round(MonthlyPayment)

document.getElementById("InterestOnly").innerHTML =  "\u00A3" +  Math.round(IP)
}

