// settings
var min_loan = 100;
var max_loan = 1000;
var default_loan = 500;
var steps = 50;
var rate = 0.15;

// update the calculator fields
var borrow_div;var interest_div;var repay_div;
function update_calc(value) {

	amount = Math.round(value / steps) * steps;
	interest = Math.round(amount * rate);
	repay = amount + interest;
	
	borrow_div.update("£" + amount);
	interest_div.update("£" + interest);
	repayment_div.update("£" + repay);
	
}

// dynamically add the calculator and attach a slider	
Event.observe(window, 'load', function(event) {
	
	calc_div = $('calculator');
	if (calc_div) {

		// left column
		leftcol_div = document.createElement('div'); Element.extend(leftcol_div);
		leftcol_div.addClassName("leftcol");
		
			title_div = document.createElement('div'); Element.extend(title_div);
			title_div.addClassName("title");
			title_div.update("Loan Calculator");
			leftcol_div.insert(title_div);	
			
			
			trackholder_div = document.createElement('div'); Element.extend(trackholder_div);
			trackholder_div.addClassName("trackholder");
			
			track_div = document.createElement('div'); Element.extend(track_div);
			track_div.addClassName("track");
				min_label_div = document.createElement('div'); Element.extend(min_label_div);
				min_label_div.addClassName("min_label");		
				min_label_div.update("£" + min_loan);
				track_div.insert(min_label_div);	
				
				max_label_div = document.createElement('div'); Element.extend(max_label_div);
				max_label_div.addClassName("max_label");		
				max_label_div.update("£" + max_loan);
				track_div.insert(max_label_div);	

				handle_div = document.createElement('div'); Element.extend(handle_div);
				handle_div.addClassName("handle");		
				track_div.insert(handle_div);	
	
	
				trackholder_div.insert(track_div);	
			leftcol_div.insert(trackholder_div);	
		
		
		calc_div.insert(leftcol_div);	
		
		
		// right column
		rightcol_div = document.createElement('div'); Element.extend(rightcol_div);
		rightcol_div.addClassName("rightcol");
			
			borrow_lbl_div = document.createElement('div'); Element.extend(borrow_lbl_div);
			borrow_lbl_div.addClassName("lbl");
			borrow_lbl_div.addClassName("borrow_lbl");
			borrow_lbl_div.update("You borrow:");
			rightcol_div.insert(borrow_lbl_div);	
			
			borrow_div = document.createElement('div'); Element.extend(borrow_div);
			borrow_div.addClassName("field");
			borrow_div.addClassName("borrow");
			rightcol_div.insert(borrow_div);	
			
			interest_lbl_div = document.createElement('div'); Element.extend(interest_lbl_div);
			interest_lbl_div.addClassName("lbl");
			interest_lbl_div.addClassName("interest_lbl");
			interest_lbl_div.update("Total interest:");
			rightcol_div.insert(interest_lbl_div);	
			
			interest_div = document.createElement('div'); Element.extend(interest_div);
			interest_div.addClassName("field");
			interest_div.addClassName("interest");
			rightcol_div.insert(interest_div);	
			
			repayment_lbl_div = document.createElement('div'); Element.extend(repayment_lbl_div);
			repayment_lbl_div.addClassName("lbl");
			repayment_lbl_div.addClassName("repayment_lbl");
			repayment_lbl_div.update("You repay:");
			rightcol_div.insert(repayment_lbl_div);	
			
			repayment_div = document.createElement('div'); Element.extend(repayment_div);
			repayment_div.addClassName("field");
			repayment_div.addClassName("repayment");
			rightcol_div.insert(repayment_div);	
						
		calc_div.insert(rightcol_div);							
		
		var loanslider = new Control.Slider(handle_div.identify(), track_div.identify(), {
		axis:'horizontal',
		range: $R(min_loan, max_loan),
		sliderValue: default_loan,
		onSlide: function(value) {
					update_calc(value);
			},
		onChange: function(value) {
					update_calc(value);
			}
		});
		
		update_calc(default_loan);
	}
});