//JavaScript DonationForm object version 1.0 - Sept 08

//Gets and sets prototypes define the Donation form object
DonationForm.prototype.setDdStateAmount = function($ddStateAmount){this.ddStateAmount = $ddStateAmount;}
DonationForm.prototype.getDdStateAmount = function(){return this.ddStateAmount;}

DonationForm.prototype.setCashStateAmount = function($cashStateAmount){this.cashStateAmount = $cashStateAmount;}
DonationForm.prototype.getCashStateAmount = function(){return this.cashStateAmount;}

DonationForm.prototype.setDivId = function($id){this.divId = $id;}
DonationForm.prototype.getDivId = function(){return this.divId;}

DonationForm.prototype.setInstanceName = function($instanceName){this.instanceName = $instanceName;}
DonationForm.prototype.getInstanceName = function(){return this.instanceName;}

DonationForm.prototype.setDestinationUrl = function($destinationUrl){this.destinationUrl = $destinationUrl;}
DonationForm.prototype.getDestinationUrl = function(){return this.destinationUrl;}

DonationForm.prototype.setCssClass = function($cssClass){this.cssClass = $cssClass;}
DonationForm.prototype.getCssClass = function(){return this.cssClass;}

DonationForm.prototype.setRef = function($ref){this.ref = $ref;}
DonationForm.prototype.getRef = function(){return this.ref;}

DonationForm.prototype.setValue = function($value){this.valueArray.push($value);}
DonationForm.prototype.getValueArray = function(){return this.valueArray;}
DonationForm.prototype.clearValues = function(){this.valueArray = new Array();}

// ALLOWABLE INPUTS : CASH | DD
DonationForm.prototype.setDisplayType = function($displayType){($displayType == "CASH" || $displayType == "DD") ? this.displayType = $displayType : alert("Invalid Display Type");}
DonationForm.prototype.getDisplayType = function(){return this.displayType;}


//empty text field
function emptyTextfield(obj){
	if(obj.value == obj.defaultValue){
		obj.value= '';
		obj.style.color = "#222";
	}
}
function emptyOtherField(){
	var other = document.donForm.otherAmount.value;
	if(other != "" || other != "my choice"){
		document.donForm.otherAmount.value = "my choice";
	}
}
//Gets form HTML and creates InnerHTML for each type of form and inserts it into the appropriate div
DonationForm.prototype.init = function() {
	var displayHtml = "";
	if (this.getDisplayType() == "CASH") {
		displayHtml = this.getCashFormHtml();
		document.getElementById("cashList").style.display = "block";
		document.getElementById("ddList").style.display = "none";
		document.getElementById("cashHeader").style.display = "block";
		document.getElementById("ddHeader").style.display = "none";
	}
	if (this.getDisplayType() == "DD") {
		displayHtml = this.getDirectDebitFormHtml();
		document.getElementById("ddList").style.display = "block";
		document.getElementById("cashList").style.display = "none";
		document.getElementById("ddHeader").style.display = "block";
		document.getElementById("cashHeader").style.display = "none";
	}
	document.getElementById(this.getDivId()).innerHTML = displayHtml;	
}

//populates hidden fields
function populateHidden(){
	var otherAmount = document.donForm.otherAmount.value;
	var donAmount = 0;
	for( i = 0; i < document.donForm.fAmount.length; i++ ){
		if( document.donForm.fAmount[i].checked == true ){
			donAmount = document.donForm.fAmount[i].value;
		}
	}
	if(otherAmount == "" || otherAmount == "my choice"){
		document.donForm.amount.value = donAmount;
	}else{
		document.donForm.amount.value = otherAmount;
	}
	
}

//Creates the form HTML (cash)
DonationForm.prototype.getCashFormHtml = function() {
	
	var html = '<div class="' + this.getCssClass() + '"><div class="' + this.getCssClass() + 'Tabs"><a onclick="ddForm.init()"><span class="hidden">Regular Donation</span></a><a onclick="cashForm.init()"><span class="hidden">One off donation</span></a></div>';
	html +=  '<div class="' + this.getCssClass() + 'Content"><form name="donForm" id="donForm" class="' + this.getCssClass() + '" action="' + this.getDestinationUrl() + '" method="GET">';
	html += '<label for="cashAmount">I would like to make a one off donation to Barnardo\'s:</label><div style="margin:15px 5px 0 15px;">';
	var valArr = this.getValueArray();
	for (var i=0; i<valArr.length; i++) {
		html += '<input type="radio" name="fAmount" id="fAmount" onClick="emptyOtherField()" value="' + valArr[i] + '" style="float:left" /><div title="&#163;' + valArr[i] + '" style="background:url(donate-' + valArr[i] + '.gif) 0px 1px  no-repeat; height:19px;  width:55px; float:left"><span class="hidden">&#163;' + valArr[i] + '</span></div>';
		if ((i+1) % 4 == 0) {
			html += '<div style="clear:both; height:20px;"></div>';
		}
	}
	html += '<input type="radio" name="fAmount" id="amountOther" value="-1" style="float:left" onClick="javascript:document.donForm.otherAmount.focus();" /><div style="float:left; background:url(donate-pound.gif) 0px 1px no-repeat; height:19px; width:13px"><span class="hidden">&#163;</span></div><input style="float:left" id="otherAmount" onFocus="javascript:emptyTextfield(this); document.donForm.amountOther.checked=true;" type="text" value="my choice" size="7">';
	html += '<input class="donSubmit" style="float:right; position:relative; top:-4px;" type="submit" value="" title="Make a donation" onclick="populateHidden()">';
	html += '<input type="hidden" name="ref" value="'+ this.getRef() +'" /><input type="hidden" id="amount" name="amount" value="" />';
	html += '</div></form></div>';
	return html;
	//form submissions are: amount + ref
}

//Creates the form HTML (Direct debit)
DonationForm.prototype.getDirectDebitFormHtml = function() {
	
	var html = '<div class="' + this.getCssClass() + '"><div class="' + this.getCssClass() + 'Tabs"><a onclick="ddForm.init()"><span class="hidden">Regular Donation</span></a><a onclick="cashForm.init()"><span class="hidden">One off donation</span></a></div>';
	html += '<div class="' + this.getCssClass() + 'Content"><form name="donForm" id="donForm" action="' + this.getDestinationUrl() + '" method="GET">';
	html += '<label for="ddAmount">I would like to make a regular donation to Barnardo\'s:</label><div style="padding:15px; float:left; width:200px;">';
	var valArr = this.getValueArray();
		for (var i = 0; i < valArr.length; i++) {
		html += '<input type="radio" name="fAmount" id="fAmount" onClick="emptyOtherField();" value="' + valArr[i] + '" style="float:left" /><div title="&#163;' + valArr[i] + '" style="background:url(donate-' + valArr[i] + '.gif) 0px 1px no-repeat; height:19px; width:55px; float:left"><span class="hidden">&#163;' + valArr[i] + '</span></div>';
		if ((i+1) % 2 == 0) {
			html += '<div style="clear:both; height:20px;"></div>';
		}
	}
	html += '<input type="radio" name="fAmount" id="amountOther" value="-1" style="float:left" onClick="javascript:document.donForm.otherAmount.focus();" /><div style="float:left; background:url(donate-pound.gif) 0px 1px no-repeat; height:19px; width:13px"><span class="hidden">&#163;</span></div><input style="float:left" id="otherAmount" onFocus="javascript:emptyTextfield(this); document.donForm.amountOther.checked=true;" type="text" value="my choice" size="7">';
	html += '</div><div style="padding:15px 5px 0 0; float:right; width:225px;"><select name="freq" style="color:#444"><option value="m">Monthly</option><option value="q">Quarterly</option><option value="y">Yearly</option></select>';
	html += '<input class="donSubmit" style="margin-top:15px;" type="submit" value="" title="Make a donation" onclick="populateHidden()">';
	html += '<input type="hidden" name="ref" value="'+ this.getRef() +'" /><input type="hidden" id="amount" name="amount" value="" />';
	html += '</div></form></div>';
	return html;
	//form submissions are: amount + freq + ref

}

//Initiates the DonationForm object instance
function DonationForm ($instanceName) {
	this.setInstanceName($instanceName);
	//sets the default form
	this.setDisplayType("CASH");
	this.valueArray = new Array();	
}