<?xml version="1.0" encoding="UTF-8"?> 
<Module>
  <ModulePrefs title="EMI Calculator"
	width="300" height="220" author="Ripul Chhabra"
	author_email="ripul.chhabra+emi-calculator@google.com"
	scrolling="true"
	render_inline="optional"
	category="finance"
	description="Gaget calculates EMI and displays Priciple and Interest as Pie chart."	screenshot="http://sites.google.com/site/ripulchhabra/Home/google-worksheet.PNG"
	thumbnail="http://sites.google.com/site/ripulchhabra/Home/google-worksheet_thumbnail.PNG"/>
  <UserPref name="period" display_name="Interest Period" datatype="enum" default_value="Monthly">
	<EnumValue value="12" display_value="Monthly"/>
	<EnumValue value="4" display_value="Quaterly"/>
	<EnumValue value="2" display_value="Half Yearly"/>
	<EnumValue value="1" display_value="Yearly"/>
  </UserPref>
  <UserPref name="chartWidth" display_name="Pie Chart Width" datatype="string" default_value="280"/>
  <UserPref name="chartHeight" display_name="Pie Chart Height" datatype="string" default_value="280"/>
  <UserPref name="bankList" display_name="Add Banks" datatype="list" />
  <Content type="html">
     <![CDATA[ 

	<style>
		.fontStyle
		{
		font-family: monospace;
		color: #0657B2;
		}
		.alertStyle
		{
		font-family: monospace;
		color: #FF0000;
		}
	</style>
	<script language="javascript">
	function onKeyPressNumberOrDot(e)
		{
		var key = window.event ? e.keyCode : e.which;
		if((key >= 48 && key <= 58) || key == 0 || key == 8 || key == 46 || e.ctrlKey)
			return true;
		else
			return false;
		}

	function onKeyPressNumber(e)
		{
		var key = window.event ? e.keyCode : e.which;
		if((key >= 48 && key <= 58) || key == 0 || key == 8 || e.ctrlKey)
			return true;
		else
			return false;
		}

	function showEMIAndPieChart()
		{
		var prefs = new gadgets.Prefs();
		var period = prefs.getInt("period");
		if( period < 1)
			period = 12
		var amount = EMICalculateForm.txt_amount.value;
		var rate = EMICalculateForm.txt_rate.value / (100 * period);
		var months = EMICalculateForm.txt_months.value;

		if ( amount == null || amount.length == 0 || rate == null || rate.length == 0
				|| months == null || months.length == 0)
			{
			document.getElementById("div_emi").innerHTML = 'Enter valid amount, rate and year.';
			return;
			}

		var ratio = Math.pow((1 + rate ), months);
		ratio = ratio / (ratio - 1);

		var emi = amount * rate * ratio;
		emi = Math.ceil(emi);
		document.getElementById("div_emi").innerHTML = "EMI is Rs " + emi;

		var width = prefs.getInt("chartWidth");
		if(width < 50)
			width = 250;
		var height = prefs.getInt("chartHeight");
		if(height < 50)
			height = 250;
		var interest = (emi * months) - amount;
		var url = "http://www.virante.com/seo-tools/pie.php?t=Pie%20Chart&h=" + height + "&w= " + width + "&x=2&n0=Principle&v0=" + amount + "&n1=Interest&v1=" + interest;
		document.pieChartImage.src = url;
		document.getElementById("div_img").style.display= 'inline';
		}
	</script>

	<div>
		<form id="EMICalculateForm"name="EMICalculateForm"> 
			<table width="280" border="0" cellPadding="0" cellSpacing="0" style="border: 2px solid #0657B2;"> 
				<tr>
					<td class="fontStyle" colspan="2" height="40" align="center" style="border-bottom: 2px solid #0657B2; font-size: large;"><b>EMI CALCULATOR</b></td>
				</tr>
				<tr>
					<td class="fontStyle" width="220" height="24" align="left">&nbsp;Loan Amount(Rs)<font color="red">*</font></td>
					<td width="120" height="24" align="left">
						<INPUT type="text" id="txt_amount" style="WIDTH: 100px" name="txt_amount" onKeyPress="return onKeyPressNumber(event)"> 
					</td>
				</tr> 
				<tr>
					<td class="fontStyle" height="24" align="left">&nbsp;Interest Rate(%)<font color="red">*</font></td> 
					<td align="left" width="120" height="24">
						<INPUT type="text" id="txt_rate" style="WIDTH: 100px" name="txt_rate" onKeyPress="return onKeyPressNumberOrDot(event)">
					</td>
				</tr> 
				<tr>
					<td class="fontStyle" height="24" align="left">&nbsp;Months<font color="red">*</font></td>
					<td width="120" height="24" align="left">
						<INPUT type="text" id="txt_months" style="WIDTH: 100px" name="txt_months" onKeyPress="return onKeyPressNumber(event)">
					</td>
				</tr>
				<tr>
					<td colspan="2" width="120" height="24" align="center">
						<div class="alertStyle" id="div_emi" name="div_emi"/>
					</td>
				</tr>
				<tr>
					<td colspan="2" width="120" height="24" align="center">
						<INPUT TYPE="button" NAME="button" Value="Calculate" onClick="showEMIAndPieChart()">
					</td>
				</tr>
			</table>
			<br/>
		</form>
		<div id="div_img" style="display:none" align="center">
			<img id="pieChartImage" name="pieChartImage"/>
		</div>

		<div class="fontStyle" id="div_banks"></div>
	</div>
	<script type="text/javascript"> 
		var prefs = new gadgets.Prefs();
		var bankList = prefs.getArray("bankList");
		var html = "";
		if (bankList != null || bankList.length > 0)
			{
			html += "Loan avialable from Banks are:<br/> <ol>";
			for (var i = 0; i < bankList.length ; i++)
				{
				var bank = (bankList[i]);
				html += "<li>" + bank + "</li>";
				}
			html += "</ol>";
			}
		document.getElementById("div_banks").innerHTML = html;
	</script>
     ]]>
  </Content> 
</Module>