function initPage() {

	//Set 'FromDate'.
	var dateToUse = new Date();
	$j(".date-field-to").val(dateToUse.getDate() + "/" + (dateToUse.getMonth() + 1) + "/" + dateToUse.getFullYear());
	
	//Set 'ToDate'.
	dateToUse.setDate(dateToUse.getDate() - 7);
	$j(".date-field-from").val(dateToUse.getDate() + "/" + (dateToUse.getMonth() + 1) + "/" + dateToUse.getFullYear());
	
	//Initiate j-query datepicker
	$j(".date-field").datepicker({ dateFormat: 'dd/mm/yy' });

	//Load the revenue chart
	LoadRevenueChart();

	//Load the lead chart
	LoadLeadChart();

	//Bind Revenue Chart Re-Load onclick
	$j("#btnApplyRevenueDateRange").bind("click", function() {
		LoadRevenueChart();
		return false;
	});

	//Bind Lead Chart Re-Load onclick
	$j("#btnApplyLeadDateRange").bind("click", function() {
		LoadLeadChart();
		return false;
	});
	
	$j("#Master_MainContent_ddlAffiateSelect").bind("change", function(){
		affiliateUserId = $j(this).val();
		//Re-load the two charts
		LoadLeadChart();
		LoadRevenueChart();
		return false;
	});
	
}

function LoadRevenueChart() {

	//Get the date values
	var dateFromObj = $j("#txtRevenueDateFrom").datepicker('getDate');
	var dateFrom = dateFromObj.getDate() + "/" + (parseInt(dateFromObj.getMonth()) + 1) + "/" + dateFromObj.getFullYear();

	var dateToObj = $j("#txtRevenueDateTo").datepicker('getDate');
	var dateTo = dateToObj.getDate() + "/" + (parseInt(dateToObj.getMonth()) + 1) + "/" + dateToObj.getFullYear();
	
	//Set a loading message: TODO: Change to gif loader image
	$j("div#RevenueFlotPlaceholder").html("<div id='loading' ><img src='/_client/images/global/loader.gif' /></div>");
	
	$j.getJSON("/_handlers/GetRevenueChartFlotData.ashx?dateFrom=" + dateFrom + "&dateTo=" + dateTo + "&affiliateUserId=" + affiliateUserId, function(data) {
		if (data.IsSuccess) {

			//Plot the data
			var oPlot = $j.plot($j("div#RevenueFlotPlaceholder"), data.FlotDataSeries, {
				xaxis: {
					mode: "time",
					timeformat: "%d/%m/%y",
					minTickSize: [1, "day"]
				},
				series: {
					lines: { show: true }
				},
				legend: {
					position: "nw"
				},
				grid: {
					hoverable: true
				}
			});

			var previousPoint = null;
			$j("div#RevenueFlotPlaceholder").bind("plothover", function(event, pos, item) {
				if (item) {
					//Store the previous point
					if (previousPoint != item.datapoint) {
						previousPoint = item.datapoint;

						$j("div#FlotToolTip").remove();
						var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);

						ShowFlotToolTip(
							item.pageX,
							item.pageY,
							"<strong>&pound;" + parseInt(y).toString() + "</strong> commission on <strong>" + GetDateFromTimestamp(x) + "</strong>");
					}
				}
				else {
					$j("div#ShowFlotToolTip").remove();
					previousPoint = null;
				}
			});

		}
		else {
			//Show the error
			alert(data.ErrorMessage);
		}
	});
}


function LoadLeadChart() {

	//Get the date values
	var dateFromObj = $j("#txtLeadDateFrom").datepicker('getDate');
	var dateFrom = dateFromObj.getDate() + "/" + (parseInt(dateFromObj.getMonth()) + 1) + "/" + dateFromObj.getFullYear();

	var dateToObj = $j("#txtLeadDateTo").datepicker('getDate');
	var dateTo = dateToObj.getDate() + "/" + (parseInt(dateToObj.getMonth()) + 1) + "/" + dateToObj.getFullYear();

	//Set a loading message: TODO: Change to gif loader image
	$j("div#LeadFlotPlaceholder").html("<div id='loading' ><img src='/_client/images/global/loader.gif' /></div>");

	$j.getJSON("/_handlers/GetLeadChartFlotData.ashx?dateFrom=" + dateFrom + "&dateTo=" + dateTo + "&affiliateUserId=" + affiliateUserId, function(data) {
		if (data.IsSuccess) {

			//Plot the data
			var oPlot = $j.plot($j("div#LeadFlotPlaceholder"), data.FlotDataSeries, {
				xaxis: {
					mode: "time",
					timeformat: "%d/%m/%y",
					minTickSize: [1, "day"]
				},
				series: {
					lines: { show: true }
				},
				legend: {
					position: "nw"
				},
				grid: {
					hoverable: true
				}
			});

			var previousPoint = null;
			$j("div#LeadFlotPlaceholder").bind("plothover", function(event, pos, item) {
				if (item) {
					//Store the previous point
					if (previousPoint != item.datapoint) {
						previousPoint = item.datapoint;

						$j("div#FlotToolTip").remove();
						var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);

						ShowFlotToolTip(
							item.pageX,
							item.pageY,
							"<strong>" + parseInt(y).toString() + "</strong> leads submitted on <strong>" + GetDateFromTimestamp(x) + "</strong>");
					}
				}
				else {
					$j("div#ShowFlotToolTip").remove();
					previousPoint = null;
				}
			});

		}
		else {
			//Show the error
			alert(data.ErrorMessage);
		}
	});
}






function ShowFlotToolTip(x, y, contents) {
	$j('<div id="FlotToolTip">' + contents + '</div>').css({
		position: 'absolute',
		display: 'none',
		top: y + 5,
		left: x + 5,
		border: '1px solid #fdd',
		padding: '2px',
		'background-color': '#fee',
		opacity: 0.80
	}).appendTo("body").fadeIn(200);
}


function GetDateFromTimestamp(timestamp) {

	// Create a new javascript Date object based on the timestamp
	var date = new Date(parseInt(timestamp));

	// will display date in dd/mm/yyyy
	return date.getDate().toString() + '/' + (date.getMonth() + 1).toString() + '/' + date.getFullYear().toString();

}