/**************************************************************************************************************************************

	RatingBar.js
	By: Tommy Farley
	wolfpit64@gmail.com
	
	Instructions:
	- Create a SPAN tag anywhere you want to include a Rating Bar and set an ID for it, do not forget to put text inside
	- Anywhere on the page include the ratingbar.js file
	- Create a Rating object with the arguments of that ID, the initial rating percentage and what orientation you want
	- Celebrate!
	
	Example:
	<HTML>
	<HEAD>
		<TITLE>Rating Bar Test</TITLE>
		<SCRIPT LANGUAGE="JavaScript" src="ratingbar.js"></SCRIPT>
	</HEAD>
	<BODY>
		<SPAN ID="rating">Random Text</SPAN>

		<SCRIPT LANGUAGE="JavaScript">
			var RatingBar = new Rating('rating',80,'h');
		</SCRIPT>
	</BODY>
	</HTML>

***************************************************************************************************************************************/

// *************************************************** Rating Text Defaults ***********************************************************
var RatingTextColor = "#000000";
var RatingTextBold = true;

/*   Rating Image Defaults
	RatingImageLoc + RatingImageName + <h/v> + <average, good, excellent, bg> + RatingImageExt
	"/images/siteimages/" + "hrating" + <average, good, excellent, bg> + ".jpg";
	"/images/siteimages/hratingaverage.jpg";

   Each image must be 1x15 (horizontal) or 30x1 (vertical) slices and are suggested to be solid (but don't necessarily have to be)
*/
var RatingImageLoc = "/images/siteimages/";
var RatingImageName = "rating";
var RatingImageExt = ".jpg";

function Rating(tagid, percent, orient) {
	this.Tag = document.getElementById(tagid);
	
	this.Orientation = orient;

	this.ImageLoc = RatingImageLoc;
	this.ImageName = RatingImageName;
	this.ImageExt = RatingImageExt;

	this.TextColor = RatingTextColor;
	this.TextBold = RatingTextBold;

	this.Percent = percent

	this.convertPercent = function() {
		if(this.Percent >= 80) {
			return "excellent";
		} else if(this.Percent >= 60) {
			return "good";
		} else {
			return "average";
		}
		return "";
	};

	this.RefreshRating = function()	{		
		this.imgTable = document.createElement('table');
		this.imgTable.cellspacing = '0';
		this.imgTable.cellpadding = '0';
		this.imgTBODY = document.createElement('tbody');
		this.imgTR = document.createElement('tr');
		this.imgTD = document.createElement('td');
		
		if(this.Orientation == 'h') {
			this.imgTD.style.height == '15px';
		} else if(this.Orientation == 'v') {
			this.imgTD.style.height == '100px';
		}
		this.imgTD.style.overflow = 'hidden';

		this.imgTableBot = document.createElement('table');
		this.imgTableBot.cellspacing = '0';
		this.imgTableBot.cellpadding = '0';
		this.imgTableBot.style.borderCollapse = 'collapse';
		this.imgTBODYBot = document.createElement('tbody');
		this.imgTRBot = document.createElement('tr');
		this.imgTDBot = document.createElement('td');
		if(this.Orientation == 'h') {
			this.imgTDBot.style.height = '15px';
			this.imgTDBot.style.width = '100px';
		} else if(this.Orientation == 'v') {
			this.imgTDBot.style.height = '100px';
			this.imgTDBot.style.width = '15px';			
		}
		this.imgBotLoc = 'url(' + this.ImageLoc + this.Orientation + this.ImageName + 'bg' + this.ImageExt + ')';
		this.imgTDBot.style.backgroundImage = this.imgBotLoc;
		this.imgTDBot.innerHTML = ' ';
		this.imgTRBot.appendChild(this.imgTDBot);
		this.imgTBODYBot.appendChild(this.imgTRBot);
		this.imgTableBot.appendChild(this.imgTBODYBot);
		if(this.Orientation == 'v') {
			this.imgTableBot.align = 'center';
		}

		this.imgTD.appendChild(this.imgTableBot);

		this.imgTableTop = document.createElement('table');
		this.imgTableTop.cellspacing = '0';
		this.imgTableTop.cellpadding = '0';
		this.imgTableTop.style.borderCollapse = 'collapse';
		this.imgTBODYTop = document.createElement('tbody');
		this.imgTRTop = document.createElement('tr');
		this.imgTDTop = document.createElement('td');
		if(this.Orientation == 'h') {
			this.imgTDTop.width = this.Percent + 'px';
			this.imgTDTop.height = '15px';
		} else if(this.Orientation == 'v') {
			this.imgTDTop.height = this.Percent + 'px';
			this.imgTDTop.width = '15px';
		}
		this.imgTopLoc = 'url(' + this.ImageLoc + this.Orientation + this.ImageName + this.convertPercent() + this.ImageExt + ')';
		this.imgTDTop.style.backgroundImage = this.imgTopLoc;
		this.imgTDTop.innerHTML = ' ';
		this.imgTRTop.appendChild(this.imgTDTop);
		this.imgTBODYTop.appendChild(this.imgTRTop);
		this.imgTableTop.appendChild(this.imgTBODYTop);
		this.imgTableTop.zIndex = '2';
		this.imgTableTop.style.position = 'relative';
		if(this.Orientation == 'h') {
			this.imgTableTop.style.top = '-15px';
		} else if(this.Orientation == 'v') {
			this.imgTableTop.style.top = '-' + (this.Percent + 4) + 'px';
			this.imgTableTop.align = 'center';
		}

		this.imgTD.appendChild(this.imgTableTop);

		this.imgTableText = document.createElement('table');
		this.imgTableText.cellspacing = '0';
		this.imgTableText.cellpadding = '0';
		this.imgTableText.style.borderCollapse = 'collapse';
		this.imgTBODYText = document.createElement('tbody');
		this.imgTRText = document.createElement('tr');
		this.imgTDText = document.createElement('td');
		this.imgTDText.style.height = '15px';
		if(this.Orientation == 'h') {
			this.imgTDText.style.width = '100px';
		}
		this.imgTDText.align = 'center';
		this.imgTDText.style.fontSize = '11px';
		this.imgTDText.style.color = this.TextColor;
		if(this.TextBold) {
			this.imgTDText.style.fontWeight = 'bold';
		}
		this.imgTDText.innerHTML = this.Percent + '%';
		this.imgTRText.appendChild(this.imgTDText);
		this.imgTBODYText.appendChild(this.imgTRText);
		this.imgTableText.appendChild(this.imgTBODYText);
		this.imgTableText.style.zIndex = '3';
		this.imgTableText.style.position = 'relative';
		if(this.Orientation == 'h') {
			this.imgTableText.style.top = '-30px';
		} else if(this.Orientation == 'v') {
			this.imgTableText.style.top = '-' + (68 + this.Percent) + 'px';
		}		
		this.imgTD.appendChild(this.imgTableText);
		this.imgTR.appendChild(this.imgTD);
		this.imgTBODY.appendChild(this.imgTR);
		this.imgTable.appendChild(this.imgTBODY);

		this.Tag.replaceChild(this.imgTable,this.Tag.childNodes[0]);
		
		while(this.Tag.childNodes[1]) {
			this.Tag.removeChild(this.Tag.childNodes[1]);
		}
		
		this.Tag.style.float = 'right';
	};

	if(this.Tag) {
		this.RefreshRating();
	}

	this.changeTagID = function(chtagid)
	{
		this.Tag = document.getElementById(chtagid);
		this.RefreshRating();
	};

	this.setPercent = function(chpercent)
	{
		this.Percent = chpercent;
		this.RefreshRating();
	};
}