google.load('visualization', '1', {packages: ['corechart']});

function GetChildNodesByTagName(parent, tagName)
{
	var children = [];
	for (var a = 0; a < parent.childNodes.length; a++)
	{
		var child = parent.childNodes[a];
		if (child.tagName && child.tagName.toLowerCase() == tagName.toLowerCase())
		{
			children.push(child);
		}
	}

	return children;	
}

function GetTableData(table)
{
	var tableData = [];

	var tbody = GetChildNodesByTagName(table, "TBODY")[0];
	var rows = GetChildNodesByTagName(tbody, "TR")
	for (var a = 0; a < rows.length; a++)
	{
		var rowData = [];
		var cells = GetChildNodesByTagName(rows[a], "TD")
		if (cells.length > 0)
		{
			for (var b=0; b<cells.length; b++)
			{
				//var text = cells[b].textContent ? cells[b].textContent : cells[b].innerText;
				var text = GetInnerText(cells[b]);
				rowData.push(text)
			}
			if (rowData.length > 0)
			{
				tableData.push(rowData);
			}
		}
	}
	
	return tableData;
}

function GetInnerText(obj)
{
	if (obj.textContent)
	{
		return obj.textContent;
	}
	
	if (obj.innerText)
	{
		return obj.innerText;
	}
	
	return "";
}

function InsertChartDiv(id, ref, width, height, className)
{
	width = width ? width : 800;
	height = height ? height : 200;

	var chart = document.createElement("DIV");
	chart.id = id;
	chart.style.width = width + "px";
	chart.style.height = height + "px";
	chart.className = className;
	ref.parentNode.insertBefore(chart, ref);
}

function DrawChart(rawData, targetID, colNames, colIndices, rowCount, colors, title, reverseCategories, width, height)
{
	width = width ? width : 800;
	height = height ? height : 200;
	
	var data = new google.visualization.DataTable();
	for (var a=0; a<colNames.length; a++)
	{
		data.addColumn((a==0)?'string':'number', colNames[a]);
	}
	data.addRows(rowCount);
	for (var i = 0; i < rawData.length; ++i)
	{
		data.setCell(i, 0, rawData[i][0]);
		for(var a=0; a<colIndices.length; a++)
		{
			data.setCell(i, a + 1, parseInt(rawData[i][colIndices[a]])); 
		}
	}

	//var ac = new google.visualization.AreaChart(document.getElementById(targetID));
	var ac = new google.visualization.AreaChart(document.getElementById(targetID));
	ac.draw(data, {
	title: title,
		isStacked: false,
		width: width,
		height: height,
		vAxis: { logScale: false },
		hAxis: {},
		colors: colors,
		reverseCategories: reverseCategories
	});
}








function DrawSummaryChart(data, image)
{
	if (data.length == 1)
	{
		ShowFirstMonthBox();
		data.push(["",0,0,0,0,0,0,0,0,0,0,0]);
	}

	var chart = document.createElement("DIV");
	chart.style.width = "805px";
	chart.style.height = "400px";
	image.parentNode.insertBefore(chart, image);

	var ref = document.createElement("DIV");
	ref.style.clear = "both";
	chart.appendChild(ref);

	InsertChartDiv("summarychart1", ref, 500, 400, "leftchart");
	InsertChartDiv("summarychart2", ref, 300, 200, "leftchart");
	InsertChartDiv("summarychart3", ref, 300, 200, "leftchart");


	DrawChart(data
		, "summarychart1"
		, ['Day', 'Hits', 'Files', 'Pages']
		, [10,9,8]
		, data.length
		, ["#008040", "#0080FF", "#00E0FF", "#FFFF00", "#FF8000", "#FF0000"]
		, "Total Traffic"
		, true
		, 500, 400
		);

	DrawChart(data
		, "summarychart2"
		, ['Day', 'Visits', 'Sites']
		, [7,5]
		, data.length
		, ["#FFFF00", "#FF8000", "#FF0000"]
		, "Total Visitors and Referring Sites"
		, true
		, 300, 200
		);

	DrawChart(data
		, "summarychart3"
		, ['Day', 'KBytes']
		, [6]
		, data.length
		, ["#FF0000"]
		, "Total Bandwidth"
		, true
		, 300, 200
		);

	image.style.display = "none";
		
}

function DrawDayChart(daydata, dayimage)
{
	// http://code.google.com/apis/visualization/documentation/gallery/areachart.html#Configuration_Options


	if (daydata.length != 0 && parseInt(daydata[0][0]) != 1)
	{
		var firstDay = parseInt(daydata[0][0]);
		for (var a = firstDay-1; a > 0; a--)
		{
			daydata.unshift(["" + a, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);
		}
	}

	InsertChartDiv("daychart1", dayimage);
	InsertChartDiv("daychart2", dayimage);
	InsertChartDiv("daychart3", dayimage);


	DrawChart(daydata
		, "daychart1"
		, ['Day', 'Hits', 'Files', 'Pages']
		, [1,3,5]
		, 31
		, ["#008040", "#0080FF", "#00E0FF", "#FFFF00", "#FF8000", "#FF0000"]
		, "Daily Traffic");

	DrawChart(daydata
		, "daychart2"
		, ['Day', 'Visits', 'Sites']
		, [7,9]
		, 31
		, ["#FFFF00", "#FF8000", "#FF0000"]
		, "Daily Visitors and Referring Sites");

	DrawChart(daydata
		, "daychart3"
		, ['Day', 'KBytes']
		, [11]
		, 31
		, ["#FF0000"]
		, "Daily Bandwidth");

	dayimage.style.display = "none";
}



function DrawHourChart(data, image)
{
	// http://code.google.com/apis/visualization/documentation/gallery/areachart.html#Configuration_Options

	image.style.display = "none";


	InsertChartDiv("hourchart1", image);
	InsertChartDiv("hourchart2", image);


	DrawChart(data
		, "hourchart1"
		, ['Day', 'Hits', 'Files', 'Pages']
		, [1,4,7]
		, 24
		, ["#008040", "#0080FF", "#00E0FF", "#FFFF00", "#FF8000", "#FF0000"]
		, "Average Hourly Traffic");

	DrawChart(data
		, "hourchart2"
		, ['Day', 'KBytes']
		, [10]
		, 24
		, ["#FF0000"]
		, "Average Hourly Bandwidth");


}

function DrawPieChart(rawData, targetID, colNames, colIndices, rowCount, colors, title, reverseCategories, width, height)
{
	width = width ? width : 800;
	height = height ? height : 200;

	var data = new google.visualization.DataTable();
	for (var a = 0; a < colNames.length; a++)
	{
		data.addColumn((a == 0) ? 'string' : 'number', colNames[a]);
	}
	data.addRows(rowCount);
	//alert(rawData.length);
	for (var i = 0; i < rawData.length; ++i)
	{
		if (rawData[i].length >= colIndices.length)
		{
			for (var a = 0; a < colIndices.length; a++)
			{
				if (a == 0)
				{
					data.setValue(i, a, rawData[i][colIndices[a]]);
					
				}
				else
				{
					data.setValue(i, a, parseInt(rawData[i][colIndices[a]]));
				}
			}
		}
	}

	//var ac = new google.visualization.AreaChart(document.getElementById(targetID));
	var ac = new google.visualization.PieChart(document.getElementById(targetID));
	ac.draw(data, {
		title: title,
		width: width,
		height: height,
		colors: colors,
		legend: 'none'
	});
}

function LimitAndRemainder(data, maxRows, colIndices)
{
	var valueTotal = 0;
	var percentTotal = 0;
	for (var i=0; i<data.length && i<maxRows; i++)
	{
		if (data[i].length >= 3)
		{
			valueTotal += parseInt(data[i][colIndices[0]]);
			percentTotal += parseFloat(data[i][colIndices[1]].replace('%',''));
		}
	}
	var valueSum = parseInt(valueTotal * 100 / percentTotal);
	var remainder = parseInt(valueSum * (1-percentTotal/100));

	data = data.slice(0, maxRows);
	

	data.unshift([0, remainder, 0, 'Other']);
	
	return data;

}

function UrlTruncate(data, colIndex)
{
	for (var i=0; i<data.length; i++)
	{
		if (data[i].length >= colIndex)
		{
			var url = data[i][colIndex];
			url = url.split('/');
			url = url[url.length-1];
			data[i][colIndex] = url;
		}
	}
	
	return data;
}

function DrawUrlChart(data, table, title)
{

	var chart = document.createElement("DIV");
	chart.style.width = "805px";
	chart.style.height = "200px";
	table.parentNode.insertBefore(chart, table);

	var ref = document.createElement("DIV");
	ref.style.clear = "both";
	chart.appendChild(ref);

	InsertChartDiv("urlchart1", ref, 300, 300, "leftchart");

	data = LimitAndRemainder(data, 5, [1, 2, 3]);
	data = UrlTruncate(data, 3);

	DrawPieChart(data
		, "urlchart1"
		, ['', '']
		, [3, 1]
		, data.length
		, ["#008040", "#0080FF", "#00E0FF", "#FFFF00", "#FF8000", "#FF0000"]
		, title
		, true
		, 300, 300
		);

}

function DrawBrowserChart(data, table)
{

	var chart = document.createElement("DIV");
	chart.style.width = "805px";
	chart.style.height = "200px";
	table.parentNode.insertBefore(chart, table);

	var ref = document.createElement("DIV");
	ref.style.clear = "both";
	chart.appendChild(ref);

	InsertChartDiv("browserchart1", ref, 200, 200, "leftchart");

	data = LimitAndRemainder(data, 10, [1, 2, 3]);	

	DrawPieChart(data
		, "browserchart1"
		, ['User Agent', 'Hits']
		, [3, 1]
		, data.length
		, ["#008040", "#0080FF", "#00E0FF", "#FFFF00", "#FF8000", "#FF0000"]
		, "Browsers"
		, true
		, 600, 200
		);

}


function ShowFirstMonthBox()
{
	var div = document.createElement("DIV");
	//div.innerHTML = "<h1>But wait, there's more!</h1>";

	div.innerHTML = '<div id="ctl00_contentBody_boxWelcome" class="helpbox" style="margin-bottom:100px;" ><div class="head" style="background:transparent url(http://www.s3stat.com/images/boxes/helpbox/head_left.gif) no-repeat left 0px;"><div class="r" style="background:transparent url(http://www.s3stat.com/images/boxes/helpbox/head_right.gif) no-repeat right 0px;"><div class="c" style="background:transparent url(http://www.s3stat.com/images/boxes/helpbox/head_center.gif) repeat-x right 0px;"></div></div></div><div class="body" style="background:transparent url(http://www.s3stat.com/images/boxes/helpbox/body_left.gif) repeat-y left 0px;"><div class="r" style="background:transparent url(http://www.s3stat.com/images/boxes/helpbox/body_right.gif) repeat-y right 0px;"><div id="" class="boxContent" style="background:transparent url(http://www.s3stat.com/images/boxes/helpbox/body_center.gif) repeat-x right 0px;"> '
		+ '<img src="http://www.s3stat.com/images/boxes/helpbox/up.png" style="float:left;margin-right:20px;" alt="" /> '
		+ '<h1>Wait, there\'s more!</h1> '
		+ 'The month name in that table up there is a link.  '
		+ 'Click it to see more detailed reports.'
		+ '</div></div></div><div class="foot" style="background:transparent url(http://www.s3stat.com/images/boxes/helpbox/foot_left.gif) no-repeat left 0px;"><div class="r" style="background:transparent url(http://www.s3stat.com/images/boxes/helpbox/foot_right.gif) no-repeat right 0px;"><div class="c" style="background:transparent url(http://www.s3stat.com/images/boxes/helpbox/foot_center.gif) repeat-x right 0px;"></div></div></div></div> '


	var tables = document.getElementsByTagName("TABLE");
	tables[0].parentNode.appendChild(div);
	//document.body.appendChild(div);
}






window.onload = function()
{

	var tables = document.getElementsByTagName("TABLE");
	var images = document.getElementsByTagName("IMG");

	// hack to determine if we're on the usage_month page
	if (tables.length >= 11)
	{
		DrawDayChart(GetTableData(tables[1]), images[0]);
		DrawHourChart(GetTableData(tables[2]), images[1]);
		//DrawBrowserChart(GetTableData(tables[10]), tables[10]);
		//DrawUrlChart(GetTableData(tables[3]), tables[3]);
		//DrawRefererChart(GetTableData(tables[9]), tables[10]);

		//DrawUrlChart(GetTableData(tables[9]), tables[9], "Referrers");

		// hide country chart and table
		images[2].style.display = "none";
		tables[tables.length - 2].style.display = "none";
		tables[tables.length - 3].style.marginBottom = "50px";
	}
	else if (tables.length == 2)
	{
		DrawSummaryChart(GetTableData(tables[0]), images[0]);
	}

	// deborder tables (because they mess with css in ff & ie)
	for (var a = 0; a < tables.length; a++)
	{
		tables[a].border = "0";
	}

	// fix formatting for footer table	
	if (tables.length > 0)
	{
		tables[tables.length - 1].style.width = "100%";
		tables[tables.length - 1].style.marginTop = "20px";
	}

	// fix formatting for footer cells
	var cells = document.getElementsByTagName("TD");
	if (cells.length > 2)
	{
		cells[cells.length - 2].style.display = "none";
		cells[cells.length - 2].style.border = "none";
		cells[cells.length - 1].style.border = "none";
	}

}