//Define SparkLineDimension
function SparkLineDimension(canvasWidth, canvasHeight, marginX, marginY, offsetX, offsetY) {
	this.canvasWidth = canvasWidth;
	this.canvasHeight = canvasHeight;
	this.marginX = marginX;
	this.marginY = marginY;
	this.offsetX = offsetX;
	this.offsetY = offsetY;
}

//Define SparkLineChart
function SparkLineChart(x, y, z, dimention, graphEngine) {
	this.x = x;
	this.y = y;
	this.z = z;
	this.dimension = dimention;
	this.graphEngine = graphEngine;

	this.yMax = MathUtils.getMaxValueFromArray(this.y);
	this.yMin = MathUtils.getMinValueFromArray(this.y);
	this.xPoints = this.getXPoints();
	this.yPoints = this.getYPoints();	

	var lineBackgroundImage;
	var lineColor;

	this.setLineBackgroundImage = function (lineBackgroundImage) {
		this.lineBackgroundImage = lineBackgroundImage;
	}
	this.setDimension = function (dimension) {
		this.dimension = dimension;
	}	
	this.setGraphEngine = function (graphEngine) {
		this.graphEngine = graphEngine;
	}		
	this.setLineColor = function(lineColor) {
		this.lineColor = lineColor;
	}
	//Draw Chart
	this.draw = function() {
		this.drawLabelX();
		this.drawLabelY();
		this.drawVerticalAxis();
		this.drawChart();
	}

	//Draw Polyline with graph
	this.drawChart = function () {
		if (typeof(this.yPoints[0].length) == 'number') {
			for (var i=0; i<this.yPoints.length; i++) {
				if (typeof(this.lineColor.length) == 'number') {
					this.graphEngine.setColor(this.lineColor[i]);
				}
				this.graphEngine.drawPolyline(this.xPoints, this.yPoints[i]);
				this.drawPoints(this.yPoints[i], i);
			}
		} else {
			this.graphEngine.drawPolyline(this.xPoints, this.yPoints);
			this.drawPoints(this.yPoints);
		}
		this.graphEngine.paint();
	}
	
}

//Convert input data to xPoints
SparkLineChart.prototype.getXPoints = function () {
	var xPoints = new Array();
	var xUnit = Math.round((dimension.canvasWidth - (dimension.marginX * 2)) / (this.x.length - 1));
	for (var i=0; i<this.x.length; i++) {
		xPoints[i] = (dimension.offsetX + dimension.marginX) + (xUnit * i);
	}
	return xPoints;
}

//Convert input data to yPoints
SparkLineChart.prototype.getYPoints = function () {
	var yPoints = new Array();
	for (var i=0; i<this.y.length; i++) {
		if (typeof(this.y[i].length) == 'number') {
			var yPointsArray = new Array();
			for (var j=0; j<this.y[i].length; j++) {
				yPointsArray[j] = (dimension.offsetY + dimension.canvasHeight) - Math.round(((dimension.canvasHeight - dimension.marginY) * this.y[i][j]) / this.yMax) - 2;
			}
			yPoints[i] = yPointsArray;
		} else {
			yPoints[i] = (dimension.offsetY + dimension.canvasHeight) - Math.round(((dimension.canvasHeight - dimension.marginY) * this.y[i]) / this.yMax) - 2;
		}
	}
	return yPoints;
}

//Draw X-Label
SparkLineChart.prototype.drawLabelX = function () {
	var mod = Math.round(this.x.length / 10);
	if (mod == 0) mod = 1;
	for (var i=0; i<this.x.length; i++) {
		var div = '<div id="xlabel" style="position:absolute;left:'+(this.xPoints[i] - 10)+'px;top:' + (dimension.canvasHeight + dimension.offsetY + 5) + 'px;width:20px;height:10px;border:0px solid black;z-index:0;font-size:9px;font-family:verdana;font-weight:bold;">'+this.x[i]+'</div>';
		if (i % mod == 0) document.write (div);
	}	
}	
	
//Draw Y-Label
SparkLineChart.prototype.drawLabelY = function () {
	var yAxis = new Array();
	var yAxisCount = 10;
	var yUnit = Math.round((dimension.canvasHeight - dimension.marginY) / (yAxisCount - 1));
	for (var i=0; i<yAxisCount; i++) {
		var top = (dimension.canvasHeight + dimension.offsetY) - (i * yUnit) - Math.round(dimension.marginY / 2);
		var value = Math.round(this.yMax * i / (yAxisCount - 1));
		var div = '<div id="ylabel" style="position:absolute;left:' + (dimension.offsetX - 50) + 'px;top:'+top+'px;width:45px;height:10px;border:0px solid black;z-index:-1;font-size:8px;font-family:verdana;text-align:right;z-index:0">'+value+'</div>';
		document.write (div);
	}	
}
	
//Draw Vertical Axis
SparkLineChart.prototype.drawVerticalAxis = function () {
	for (var i=0; i<this.x.length; i++) {
		var div = '<div id="verticalaxis" style="position:absolute;left:'+(this.xPoints[i])+'px;top:'+ (dimension.offsetY)+'px;width:1px;height:' + (dimension.canvasHeight - 2) + 'px;background:url(' + ((this.lineBackgroundImage != null) ? this.lineBackgroundImage : "") + ');z-index:1;"></div>';
		document.write (div);
	}	
}

//Draw points
SparkLineChart.prototype.drawPoints = function (yPoints, idx) {
	for (var i=0; i<this.x.length; i++) {
		var div = '<div id="points" style="position:absolute;left:'+((this.xPoints[i]) - 2)+'px;top:' + (yPoints[i] - 2) + 'px;width:5px;height:5px;z-index:1;font-size:2px;border:1px solid ' + ((typeof(idx) != 'undefined') ? this.lineColor[idx] : '#FF5400') + ';background-color:#FFFFFF" onmouseover="SpartChartHandler.openPopup('+ i + ');"></div>';
		var pop = '<div id="popups'+i+'" style="position:absolute;left:'+((this.xPoints[i]) + 2)+'px;top:' + (yPoints[i] + 2) + 'px;width:50px;z-index:2;border:1px solid #A5A5A5;background-color:#FFFFFF;display:none;"><table border=0 width=100%><tr><td style="font-size:9px;font-family:Arial;text-align:center;">' + this.z[i] +'<br>'+this.y[i]+'pt</td></tr></table></div>';
		document.write (div);
		document.write(pop);
	}	
}

//--------------------------------------------------------------------------------
//SpartChartHandlers
function SpartChartHandler() {};
SpartChartHandler.openPopup = function (idx) {
	for (var i=0; i<this.x.length; i++) {
		var obj = document.getElementById(('popups' + i));
		if (i == idx) obj.style.display = 'block';
		else obj.style.display = 'none';
	}
}

//--------------------------------------------------------------------------------
//MathUtils
function MathUtils() {};
MathUtils.getMaxValueFromArray = function(a) {
	var n = 0;
	for (var i=0;i<a.length;i++) {
		var tmp = a[i];
		if (typeof(tmp.length) == 'number') {
			for (var j=0;j<tmp.length;j++) {
				n = Math.max(tmp[j], n);
			}
		} else {
			n = Math.max(a[i], n);
		}
	}
	return n;
}
MathUtils.getMinValueFromArray = function(a) {
	var n = 0;
	for (var i=0;i<a.length;i++) n = Math.min(a[i], n);
	return n;
}