	dojo.require("dojox.charting.Chart2D");
	
	if (typeof(chartVals) == "undefined") { chartVals = new Array(); }
	if (typeof(thePeriod) == "undefined" || isNaN(thePeriod)) { var thePeriod = 30; }
	thePeriod = parseInt(thePeriod);

	var areaValues = new Array();
	var levelValues = new Array();
	var xLabels = new Array();

	var xMajorTickStep = 4;
	var xMinorTickStep = 4;
	var yMinValue = 0;
	var yMaxValue = 100;
	var yMinorTickStep = 4;
	var yMajorTickStep = 4;

	var error = 0;
	
	init = function () {
		if (isValidArray(chartVals)) {
			getChartValues();
			//drawTitle();
			drawChart();
		} else {
			showErrorMessage();
		}
	}

	function drawChart () {
		document.getElementById("chart01").innerHTML = "";

		var CREFChart = new dojox.charting.Chart2D("chart01", {
			fill: "transparent",
			margins: {l: 0,t: -1,r: -10,b: -6}
		});
		CREFChart.addPlot("redLine", {
			type: "Lines",
			hAxis: "x",
			vAxis: "y"
		});
		CREFChart.addPlot("blueArea", {
			type: "Areas",
			hAxis: "x",
			vAxis: "y"
		});
		CREFChart.addPlot("Grid", {
			type: "Grid",
			hAxis: "x",
			vAxis: "y",
			hMajorLines: false,
			hMinorLines: false,
			vMajorLines: true,
			vMinorLines: true
		});
		CREFChart.addAxis("x", {	
			majorTick: {stroke: "black",length: 4},
			minorTick: {stroke: "black",length: 4},
			majorTickStep: xMajorTickStep,
			minorTickStep: xMinorTickStep,
			fixUpper: "major",
			fixLower: "minor",
			majorLabels: true,
			minorTicks: true,
			minorLabels: true,
			microTicks: false,
			microLabels: false,
			labels:	xLabels
		});
		CREFChart.addAxis("y", {
			vertical: true,
			leftBottom: false,
			majorTick: {stroke: "gray",length: 6},
			min: yMinValue,
			max: yMaxValue,
			majorTickStep: yMajorTickStep,
			minorTicks: true,
			minorLabels: true,
			microTicks: true,
			microLabels: true
		});
		CREFChart.addSeries("blueGraph", areaValues, {
			plot: "blueArea",
			stroke: {color:"blue"},
			fill:"blue"
		});
		CREFChart.addSeries("redLevel", levelValues, {
			plot: "redLine",
			stroke: {color:"red"}
		});

		CREFChart.render();
	}

	/*function drawTitle () {
		var  theTitle = "Unit Values: ";
		if (thePeriod < 365) {
			theTitle += thePeriod + " day";
		} else {
			theTitle += Math.floor(thePeriod/365) + " year";
		}
		document.getElementById('periodTitle').innerHTML = theTitle;
	}*/
	
	/**
	 * EXAMPLE Chart Values Array
	 * chartVals = [{val:77.6092,dte:"07/27/1999"},{val:78.1066,dte:"07/28/1999"}];
	 */
	function getChartValues() {
		var recordCount = chartVals.length-1;
		for (i=0; i < chartVals.length; i++) {
			var theVal = parseFloat(chartVals[i].val);
			var theDate = chartVals[i].dte;
			var dateLabel = (thePeriod > 180) ? (theDate.substring(0,6) + theDate.substring(8,10)) : theDate; 
			if (i == 0) {
				//levelValues = "{x:0, y:" + theVal + "},{x:" + recordCount + ", y:" + theVal + "}";
				levelValues = [{x:0, y:theVal},{x:recordCount,y:theVal}];
				//set the initial min and max values for chart range
				yMinValue = Math.floor(theVal);
				yMaxValue = Math.ceil(theVal);
			} else {				
				//adjust the min and max values if necessary
				if (theVal < yMinValue) {
					yMinValue = Math.floor(theVal);
				}
				if (theVal > yMaxValue) {
					yMaxValue = Math.ceil(theVal);
				}
			}
			//add the data and label values to the appropriate series
			xLabels.push({value:i,text:dateLabel});
			areaValues.push({x:i,y:theVal});
		}

		yMaxValue++;
		yMajorTickStep = (yMaxValue - yMinValue) / 3;
		
		xMajorTickStep = recordCount;
		xMinorTickStep = Math.floor(recordCount / 5);
	}
	
	function isValidArray (testArray) {
		if (testArray == "") return false;
		//if (testArray.length == 0) return false;
		if (testArray instanceof Array && testArray.length > 0) { return true; }
	}
	
	function showErrorMessage () {
		var msg = "<p class=\"error\" style=\"color:red;padding:2px 5px;text-align:center;\">An error occurred while attempting to render the chart for this fund. Please try your request again later.</p>";
		document.getElementById('periodTitle').innerHTML = "ERROR";
		document.getElementById("chart01").innerHTML = msg;
	}

	dojo.addOnLoad(init);
