// for drawing personality charts.

// descriptions looks like this:
// [ { desc: 'Earthy/Imaginative', percent: 15, other_percent: 12 }, ... ]

// the other_percent are the 'yellow bar' items.
// specify is_comparative = false to ignore the other_percent items.



function draw_chart(containerId, descriptions, is_comparative) {

	var div = document.getElementById(containerId);
	if (null == div)
		return;

	var table = document.createElement('table');
	table.width = 300;

	var tbody = document.createElement('tbody');
	table.appendChild(tbody);

	for (var i = 0; i < descriptions.length; i++) {

		var desc          = descriptions[i].desc;
		var percent       = descriptions[i].percent;
		var other_percent = descriptions[i].other_percent;

		// here are the axis names.
		// for traits including a slash, what follows is the low axis.
		var lo = 'Low';
		var hi = 'High';
		var slash_index = desc.indexOf('/');
		if (-1 != slash_index) {
			lo = desc.substr(slash_index + 1);
			hi = desc.substr(0, slash_index);
		}
		var caption_html = '' +
			'<div style="width:300px;">' +
				'<span class="caption">'      + lo + '</span>' +
				'<span class="captionright">' + hi + '</span>' +
			'</div>';

		// here we build the html for drawing the bars.
		//var image_html = image_html_mixed(
		//var image_html = image_html_band(
		var image_html = image_html_yellowtop(
			is_comparative, percent, other_percent);


		// and for the percentage report
		var percent_string = '&nbsp;&nbsp;' + percent;
		if (is_comparative)
			percent_string += '&nbsp;/&nbsp;' + other_percent;


		// now we actually build and append the table row.
		var tr = document.createElement('tr');

		var td = document.createElement('td');
		td.setAttribute('valign', 'top');
		td.innerHTML = desc;
		tr.appendChild(td);


		td = document.createElement('td');
		td.setAttribute('valign', 'bottom');
		var wid = 3 * percent;
		var grey_wid = 300 - wid;
		var cellHTML = '<img class="bar" src="images/bar.jpg" ' +
							'height="15" width="' + wid + '"/>' +
			           '<img class="bar" src="images/bar2.jpg" ' +
							'height="15" width="' + grey_wid + '"/>';
		if (! is_comparative)
			cellHTML += '<br />' + caption_html;

		td.innerHTML = cellHTML;
		tr.appendChild(td);

		td = document.createElement('td');
		td.setAttribute('valign', 'top');
		//td.innerHTML = percent_string;
		td.innerHTML = '&nbsp;&nbsp;' + percent;

		tr.appendChild(td);
		tbody.appendChild(tr);

		if (! is_comparative)
			continue;

		tr = document.createElement('tr');
		td = document.createElement('td');
		tr.appendChild(td);

		td = document.createElement('td');
		td.setAttribute('valign', 'top');
		wid = 3 * other_percent;
		grey_wid = 300 - wid;
		td.innerHTML = '<img class="bar" src="images/yellowbar.jpg" ' +
							'height="15" width="' + wid + '"/>' +
			           '<img class="bar" src="images/bar2.jpg" ' +
							'height="15" width="' + grey_wid + '"/>' +
					   '<br />' +
					   caption_html;
		tr.appendChild(td);

		td = document.createElement('td');
		td.setAttribute('valign', 'top');
		td.innerHTML = '&nbsp;&nbsp;' + other_percent;

		tr.appendChild(td);
		tbody.appendChild(tr);

	}

	div.innerHTML = "";
	div.appendChild(table);
	
}



// various ways to build the bars
function image_html_mixed(is_comparative, percent, other_percent) {

	var image_html = "";

	var green_width;
	var yellow_width;
	var grey_width;

	if (! is_comparative || percent <= other_percent) {

		if (! is_comparative) {
			green_width = 3 * percent;
			yellow_width = 0;

		} else if (percent < other_percent) {
			green_width  = 3 * percent;
			yellow_width = 3 * (other_percent - percent);

		} else if (0 == percent) {
			green_width = 0;
			yellow_width = 3;

		}  else {
			green_width = 3 * (percent - 1);
			yellow_width = 3;
		}

		grey_width = 300 - (green_width + yellow_width);

		image_html += '<img class="bar" src="images/bar.jpg" ' +
			'height="15" width="' + green_width + '"/>';

		image_html += '<img class="bar" src="images/yellowbar.jpg" ' +
			'height="15" width="' + yellow_width + '"/>';

		image_html += '<img class="bar" src="images/bar2.jpg" ' +
			'height="15" width="' + grey_width + '"/>';


	} else {

		yellow_width = 3 * other_percent;
		green_width  = 3 * (percent - other_percent);
		grey_width   = 300 - (green_width + yellow_width);

		image_html += '<img class="bar" src="images/yellowbar.jpg" ' +
			'height="15" width="' + yellow_width + '"/>';

		image_html += '<img class="bar" src="images/bar.jpg" ' +
			'height="15" width="' + green_width + '"/>';

		image_html += '<img class="bar" src="images/bar2.jpg" ' +
			'height="15" width="' + grey_width + '"/>';

	}

	return image_html;

}

function image_html_yellowtop(is_comparative, percent, other_percent) {

	var green_width = 3 * percent;
	var grey_width  = 300 - green_width;

	var image_html = '<img class="bar" src="images/bar.jpg" ' +
			'height="15" width="' + green_width + '"/>' +
			'<img class="bar" src="images/bar2.jpg" ' +
			'height="15" width="' + grey_width + '"/>';

	if (is_comparative) {
		var yellow_width = 3 * other_percent;
		grey_width = 300 - yellow_width;

		image_html = '<img class="bar" src="images/yellowbar.jpg" ' +
			'height="15" width="' + yellow_width + '"/>' +
			'<img class="bar" src="images/bar2.jpg" ' +
			'height="15" width="' + grey_width + '"/>' + '<br/>' + image_html;
	}

	return image_html;
}


function image_html_band(is_comparative, percent, other_percent) {

	var image_html = '';

	if (! is_comparative) {

		var green_width = 3 * percent;
		var grey_width  = 300 - green_width;

		image_html += '' +
			'<img class="bar" src="images/bar.jpg" ' +
				'height="15" width="' + green_width + '"/>' +
			'<img class="bar" src="images/bar2.jpg" ' +
				'height="15" width="' + grey_width + '"/>';

		return image_html;

	}

	var yellow_width = 3;
	var pre_yellow_width = (other_percent * 3) - yellow_width;
	var post_yellow_width = 300 - (other_percent * 3);

	if (pre_yellow_width < 0) {
		pre_yellow_width = 0;
		post_yellow_width = 300 - yellow_width;
	}

	// the yellow obscures some of these.
	var total_green_width = 3 * percent;
	var total_grey_width  = 300 - total_green_width;

	// green bar extending no longer than pre_yellow_width.
	var initial_green_width = total_green_width;
	if (initial_green_width > pre_yellow_width)
		initial_green_width = pre_yellow_width;

	image_html += '<img class="bar" src="images/bar.jpg" ' +
		'height="15" width="' + initial_green_width + '"/>';

	// possible grey to make up for the difference between
	// the end of the first green bar and the beginning of the yellow
	if (pre_yellow_width > initial_green_width) {
		var initial_grey_width = pre_yellow_width - initial_green_width;
		image_html += '<img class="bar" src="images/bar2.jpg" ' +
			'height="15" width="' + initial_grey_width + '"/>';
	}

	// yellow
	image_html += '<img class="bar" src="images/yellowbar.jpg" ' +
		'height="15" width="' + yellow_width + '"/>';

	// possible green to make up for the difference between the
	// end of the yellow and the beginning of the grey
	if (post_yellow_width > total_grey_width) {
		var final_green_width = post_yellow_width - total_grey_width;
		image_html += '<img class="bar" src="images/bar.jpg" ' +
			'height="15" width="' + final_green_width + '"/>';
	}

	// grey
	var final_grey_width = total_grey_width;
	if (final_grey_width > post_yellow_width)
		final_grey_width = post_yellow_width;

	image_html += '<img class="bar" src="images/bar2.jpg" ' +
		'height="15" width="' + final_grey_width + '"/>';

	return image_html;

}