/**
 * @description responsible for  all the global level elements on the website
 * @author Sailesh Raghavan
 * @version 0.3
 */

var $j = $j || jQuery.noConflict();
var ICICI = ICICI || {};
ICICI.components = ICICI.components || {};
/*
 * @description Constructor for the savings calculator
 * @constructor
 */
ICICI.components.savingsCalculator = function($element,params){
	if (!$element || $element.length<=0) {
		return; 
	}

	params = $j.extend({
		launchCalculator: ".launchCalculator",
		theCalculator: "#savingsCalculator",
		closeIcon: ".closeIcon",
		monthDropdown: ".monthDropdown",
		monthDropdown1: ".monthDropdown1",
		initValue: ".savingsInput[@name=initValue]",
		introContainer: ".intro",
		calculateSav: ".calculate",
		calculateSav1: ".calculate1",
		compareSav: ".compare",
		compareCheck: ".compairInterest input[@name=compare]",
		AERInput: ".savingsInput[@name=interestRate]",
		dataTable: ".dataTable",
		dataTableBody: ".dataTable tbody",
		tabs: ".tabbedContent.savingsCalcTabbedWrapper>ul",
		chartContainer: ".graph",
		chartingArea: ".charting",
		reset: ".resetCalc",
		moreInfo: ".moreInfoLink",
		savingsTab: "hisaveSavingsContent",
		differData: "#diffData",
		color1: ".grandTotalValue1",
		color2: ".grandTotalValue2",
		plotFunction: function (t, p, r, type){
			switch(type){
				case "saving":
					return (p+(p*(r/100)*(t/12)));
					//return (p*Math.pow((1+((r/100)/12)),(12*(t/12))));
				case "fixed":
					return (p+(p*(r/100)*(t/12)));
			}
		}
	},params);

	var $currentChartingArea = null;
	var $currentTab = null;
	
	//Function to show tooltip on chart
	function showTooltip(x, y, contents) {
        $j('<div id="tooltip" class="graphTooltip">' + contents + '</div>').css( {
            top: y + 5,
            left: x + 5
        }).appendTo("body").fadeIn(200);
    }

	//method format amount
	function moneyFormater(num){
		num = num.toString().replace(/\$|\,/g,'');
		if(isNaN(num))
		num = "0";
		sign = (num == (num = Math.abs(num)));
		num = Math.floor(num*100+0.50000000001);
		cents = num%100;
		num = Math.floor(num/100).toString();
		//alert(num);
		if(cents<10)
		cents = "0" + cents;
		for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
		num = num.substring(0,num.length-(4*i+3))+','+
		num.substring(num.length-(4*i+3));
		return (((sign)?'':'-') + '&pound;' + num + '.' + cents);
	}
	
	//method to update the row of the table	
	var firstInt = 0;
	var secondInt = 0;
	var intDifference = "";
	function updateDataRow(initValue, interestEarned, grandTotal, row) {
		(row==1)?firstInt = interestEarned:secondInt = interestEarned;
		if(firstInt>0 && secondInt>0){intDifference=firstInt-secondInt;}else{intDifference=""}
		$j(params.dataTable,$currentChartingArea).show();
		var $table = $j(params.dataTable,$currentChartingArea);
		if (initValue===null) {
			if ($table[0].rows[row]) {
				$j($table[0].rows[row]).remove();
			}
		} else {
			var rowLabel="";
			(row==1) ? rowLabel="HiSAVE" : rowLabel="Other";
			var rowData = "<td style='text-align:left; padding-left: 5px;'>" + rowLabel + "</td><td><div title='" + moneyFormater(initValue) + "'>" + moneyFormater(initValue) + "</div></td>" + "<td><div title='" + moneyFormater(interestEarned) + "'>" + moneyFormater(interestEarned) + "</div></td><td class='grandTotalValue" + row + "'><div title='" + moneyFormater(grandTotal) + "'>" + moneyFormater(grandTotal) + "</div></td>";
			$j(params.dataTable, $currentChartingArea).show();
			if (!$table[0].rows[row]) {
				$j("<tr class='row" + row + "'>" + rowData + "</tr>").appendTo($table);
			} else {
				$j($table[0].rows[row]).html(rowData);
			}
			if(row > 1 && intDifference!=""){
				$j(params.differData).remove();
				var diffData = "<td style='text-align:left; padding-left: 5px;'>Difference</td><td></td>" + "<td><div title='" + moneyFormater(intDifference) + "'>" + moneyFormater(intDifference) + "</div></td><td></td>";
				$j("<tr class='row1' id='diffData'>" + diffData + "</tr>").appendTo($table);
			}
		}
	}
	
	//method to plot the chart
	function plotChart(initValue, months, interest1, interest2) {
		var data1 = [];
		var data2 = [];
		var tickData=[];
		
		if (initValue===null || months===null || interest1===null) { return;} 
		
		var value, minValue1, maxValue1, minValue2, maxValue2;
		value = minValue1 = maxValue1 = minValue2 = maxValue2 = initValue;
		data1.push([0,0]);
		data2.push([0,0]);
		var type = ($currentTab.attr("id")===params.savingsTab?"saving":"fixed");
		if(type=="fixed" && initValue<1000){return;}
		//alert(type);
		value = params.plotFunction(months, initValue, interest1, type);
		data1.push([1,value]);
		data2.push([1,0]);
		tickData.push([1, "HiSAVE"]);
		if (maxValue1<value) {
					maxValue1 = value;
				}
		data1.push([2,0]);
		data2.push([2,0]);
		updateDataRow(initValue, maxValue1-initValue, maxValue1, 1,"");
		var interestEarned1 = maxValue1-initValue;
		if (interest2) {
			value = params.plotFunction(months, initValue, interest2,type);
			if (maxValue2<value) {
					maxValue2 = value;
				}
			data1.push([3,0]);
			data2.push([3,value]);
			tickData.push([3, " Other"]);
			updateDataRow(initValue, maxValue2-initValue, maxValue2, 2, interestEarned1-maxValue2-initValue);
		} else {
			data1.push([3,0]);
			data2.push([3,0]);
			tickData.push([3, ""]);
			updateDataRow(null,null,null,2,"");
		}
		data1.push([4,0]);
		data2.push([4,0]);
		
		var $graph = $j(params.chartContainer, $currentChartingArea); 
		var minValue = minValue1<minValue2?minValue1:minValue2;
		var maxValue = maxValue1>maxValue2?maxValue1:maxValue2;
		var color1 = "#ee7900";
		var color2 = "#253177";
		
		$j(params.introContainer, $currentChartingArea).hide();
		$graph.show();
		$j.plot($graph, [{data:data1,color:color1}, {data:data2,color:color2}], {
			points:{show:false},
			bars:{show:true},
			xaxis:{tickSize:5, ticks:tickData, labelWidth:10},
			yaxis: {minTickSize:0, min: minValue, max: maxValue, tickFormatter: moneyFormater},
			grid: {borderWidth:1, hoverable: true}			
		});
		
		$graph.unbind("plothover").bind("plothover", function (event, pos, item) {
			if (item) {
				if (previousPoint != item.datapoint) {
					previousPoint = item.datapoint;
					
					$j("#tooltip").remove();
					var x = item.datapoint[0];
						y = moneyFormater(item.datapoint[1]);
					
					showTooltip(item.pageX, item.pageY,	y);
				}
			}
			else {
				$j("#tooltip").remove();
				previousPoint = null;            
			}
		});
		$element.unbind("mouseout").bind("mouseout",function(){
				$j("#tooltip").remove();
				previousPoint = null;            
		});	
	}
	
	//Initialization begins
	
	//Reset button
	$j(params.reset).bind("click", function(){
		$j(params.initValue).val("");
		$j(params.monthDropdown).val("");
		$j(params.monthDropdown1).val("");
		$j(params.AERInput).val("0.50");
		$j(params.differData).remove();
		$j(params.dataTable, $currentChartingArea).hide();
		$j(params.chartContainer, $currentChartingArea).hide();
		$j(params.introContainer, $currentChartingArea).show();
	});
	
	//Tabs clicking
	$j(params.tabs).bind('tabsshow',function(event, ui){
		$j(params.reset).trigger("click");											 
		$currentChartingArea = $j("#" + $j(ui.panel).attr("id").replace(/Content/g,"Tab"));
		$currentTab = $j(ui.panel);
		$j(params.chartingArea,$element).hide();
		$j(params.moreInfo,$element).hide();
		$j("#" + $j(ui.panel).attr("id").replace(/Content/g,"Tab")).show();	
		$j("#" + $j(ui.panel).attr("id").replace(/Content/g,"Link")).show();	
	});

	
	//Chart update event binding 
	$j(params.chartContainer,$element).bind("updateChart",function(){
		if ($j(params.initValue, $currentTab).val()!=="" && $j(params.monthDropdown, $currentTab).val()!="") {
			
			
			var initValue = parseFloat($j(params.initValue, $currentTab).val(),10);
				//$j(params.monthDropdown1).val("");
			var months = parseInt(($j(params.monthDropdown, $currentTab).val()).split(",")[0],10);
			
			var interest1 = parseFloat(($j(params.monthDropdown, $currentTab).val()).split(",")[1],10);
			plotChart(initValue, months, interest1, "");
			
			
			
			
		}
	});
	
	
	$j(params.chartContainer,$element).bind("updateChart1",function(){
		if ($j(params.initValue, $currentTab).val()!=="" && $j(params.monthDropdown1, $currentTab).val()!="") {
			
			
			var initValue = parseFloat($j(params.initValue, $currentTab).val(),10);
			
				//$j(params.monthDropdown).val("");
				var months = parseInt(($j(params.monthDropdown1, $currentTab).val()).split(",")[0],10);
			
			var interest1 = parseFloat(($j(params.monthDropdown1, $currentTab).val()).split(",")[1],10);
			plotChart(initValue, months, interest1, "");
			
			//$j(params.monthDropdown).val("");
			
			
		}
	});
	
	
	
	
	//Chart update event binding 
	$j(params.chartContainer,$element).bind("compareChart",function(){
		if ($j(params.initValue, $currentTab).val()!=="" && ($j(params.monthDropdown, $currentTab).val()!="" || $j(params.monthDropdown1, $currentTab).val()!="")) {
		//	alert("Triggered");
			var initValue = parseFloat($j(params.initValue, $currentTab).val(),10);
			if($j(params.monthDropdown, $currentTab).val()!="" )
			{
			var months = parseInt(($j(params.monthDropdown, $currentTab).val()).split(",")[0],10);
			var interest1 = parseFloat(($j(params.monthDropdown, $currentTab).val()).split(",")[1],10);
			var interest2 = parseFloat($j(params.AERInput, $currentTab).val(),10);
			plotChart(initValue, months, interest1, interest2);
			}
			else{
				var months = parseInt(($j(params.monthDropdown1, $currentTab).val()).split(",")[0],10);
			var interest1 = parseFloat(($j(params.monthDropdown1, $currentTab).val()).split(",")[1],10);
			var interest2 = parseFloat($j(params.AERInput, $currentTab).val(),10);
			plotChart(initValue, months, interest1, interest2);
			}
		}
	});
	
	//Calculator launcher button
	$j(params.launchCalculator).bind("click",function(){
		$j(window).scrollTop(0);
		var leftMargin = (100-(($j(params.theCalculator).width() * 100)/$j(document).width()))/2;
		var topMargin = (100-((($j(params.theCalculator).height()-20) * 100)/$j(window).height()))/2;
		$j.blockUI({
			message:$element,
			css:{
				border:0, 
				top:topMargin+"%", 
				left:leftMargin+"%", 
				cursor:"default"
			},
			overlayCSS:  {  
				opacity: "0.4"
			}			
		})
		return false;
	});
	
	//Close icon on openned saving calculator dialog
	$j(params.closeIcon,$element).bind("click",function(){
		$j(params.reset).trigger("click");
		$j.unblockUI();
		return false;
	});
	
	//Number validation on various numeric fields and lost focus chart update trigger.
	$element.find(params.initValue).numeric(".", function(){
		$j(this).val("");
	}).end().find(params.AERInput).numeric(".", function(){
		$j(this).val("");
	});

	//Calculate Button 
	$j(params.calculateSav, $element).bind("click", function(){
		$j(params.monthDropdown1).val("");											 
		if ($j(params.initValue, $currentTab).val()!=="") {
			$j(params.chartContainer,$currentChartingArea).trigger("updateChart");
		}
		return false;
	});	
	$j(params.calculateSav1, $element).bind("click", function(){
		$j(params.monthDropdown).val("");
		if ($j(params.initValue, $currentTab).val()!=="") {
			$j(params.chartContainer,$currentChartingArea).trigger("updateChart1");
		}
		return false;
	});	
	$j(params.compareSav, $element).bind("click", function(){
		if ($j(params.initValue, $currentTab).val()!=="") {
			$j(params.chartContainer,$currentChartingArea).trigger("compareChart");
		}
		return false;
	});	
	
	
};