/**
 * Javascript
 * 
 * @author     banhthidiem <banhthidiem@gmail.com>
 * @copyright  2007 Bach Khoa Computer Inc.
 * @version    $Id: RatingStar$BTD.js, v1.0 2007/12/8
 */

function RatingStar$BTD(totalStar, percent, totalTimeRate, myName, pathImgStar)
{
	this.myName = myName;
	this.pathImgStar = pathImgStar;
	this.widthStar = 17;
	this.heightStar = 19;
	totalStar = (!isNaN(totalStar) && totalStar > 0) ? parseInt(totalStar) : 5;
	percent = (percent.trim() != "" && !isNaN(percent) && percent >= 0 && percent <= 100) ? parseInt(percent)  : 50;
	this.widthTotalStar = this.widthStar * totalStar - 1;
	this.totalTimeRate = parseInt(totalTimeRate);
	this.u = utilObj;
	this.curPer = this.selectPer = this.startPer = percent;
	this.curWidth = this.selectWidth =  this.startWidth = this.getW(this.curPer);
	this.isSelected = false;
};

RatingStar$BTD.prototype = 
{
	createMain : function()
	{
		this.createStyle();
		var o = this.u.createEl("DIV");
		o.id = "disStar_" + this.myName;
		o.style.width = (this.widthTotalStar + 50) + "px";
		o.style.height = this.heightStar + "px";
		o.style.textAlign = "left";
		o.appendChild(this.createStar());
		o.appendChild(this.createShowPercent());
		var self = this;
		this.u.addEvent(o, "mousemove", function(e) { self.starMove(e); });
		this.u.addEvent(o, "mouseout", function(e) { self.starStop(e); });
		this.u.addEvent(o, "mousedown", function(e) { self.starUpdate(e); });
		this.oOut = o;
		return o;
	},
	
	createStyle : function()
	{
		var cssStr = ".star	{ list-style: none; margin: 0px; padding: 0px; height: 20px; left: 10px; top: -5px; position: relative; float: left; background: url(" + this.pathImgStar + ") repeat-x; cursor: pointer; }";
		cssStr += ".starOver { background: url(" + this.pathImgStar + ") left 25px; font-size: 1px; padding: 0px; margin: 0px; float: left; display: block; height: 20px; z-index: 20; position: absolute; }";
		cssStr += ".starSelected { background: url(" + this.pathImgStar + ") left 50px; font-size: 1px; padding: 0px; margin: 0px; float: left;	display: block;	height: 20px; z-index: 20; position: absolute; }";
		cssStr += ".showPercent { left: 15px; position: relative; float: left; font-size: 13px; font-family: Arial; color: #888; }";
		this.u.createStyle(cssStr);
	},
	
	createStar : function()
	{
		var o = this.u.createEl("UL");
		o.id = "star_" + this.myName;
		o.className = "star";
		o.style.width = (this.widthTotalStar + 1) + "px";
		o.appendChild(this.createStarOver());
		this.oStar = o;
		return o;
	},
	
	createStarOver : function()
	{
		var o = this.u.createEl("UL");
		o.id = "starOver_" + this.myName;
		o.className = "starOver";
		o.style.width = this.curWidth + "px";
		o.title = this.curPer;
		this.oStarOver = o;
		return o;
	},
	
	createShowPercent : function()
	{
		var o = this.u.createEl("DIV");
		o.id = "showPercent_" + this.myName;
		o.className = "showPercent";
		o.innerHTML = this.curPer + "%";
		this.oShowPercent = o;
		return o;
	},

	getP : function(v)
	{
		return (v * 100) / this.widthTotalStar;
	},
	
	getW : function(v)
	{
		return (v * this.widthTotalStar) / 100;
	},
	
	updateAll : function()
	{
		var tM = this.totalTimeRate * this.startPer + this.selectPer;
		this.totalTimeRate += 1;
		var p = tM / this.totalTimeRate;
		this.totalMark = Math.round(tM);
		this.isSelected = false;
		this.selectWidth = this.startWidth = this.curWidth = this.getW(p);
		this.selectPer = this.startPer = this.curPer = p;
		this.startWidth = this.startWidth < 0 ? 0 : this.startWidth;
		this.updateCurrent(this.startWidth, this.curPer);
	},
	
	// return total mark
	getTotalMark : function()
	{
		this.updateAll();
		return this.totalMark;
	},
	
	updateCurrent : function(w, p)
	{
		this.oStarOver.style.width = w + "px"; 
		this.oShowPercent.style.color = "#111";
		this.oStarOver.className = "starOver";
		p = Math.round(p);
		this.oStarOver.title = p; 
		this.oShowPercent.innerHTML = p + "%";
	},
	
	starMove : function(e)
	{
		var p = this.u.getElementPosition(this.oStar);
		e = this.u.getWindowEvent();
		var coord = this.u.mouseCoords(e);
		var eX = coord.X - p.X, eY = coord.Y - p.Y;		
		if(eX < 1 || eX > this.widthTotalStar || eY < 0 || eY > this.heightStar)
		{
			this.starRevert();
		}
		else 
		{
			this.curWidth = eX;
			this.curPer = this.getP(eX);
			var w = this.curWidth - 3;
			w = w < 0 ? 0 : w;
			this.updateCurrent(w, this.curPer);
		}
	},
	
	starRevert : function() 
	{
		if (this.isSelected)
		{
			this.oStarOver.className = "starSelected";
		}
		this.oStarOver.style.width = Math.round(this.selectWidth) + "px";
		this.oShowPercent.style.color = "#888";
		this.oShowPercent.innerHTML = (this.selectPer > 0 ? Math.round(this.selectPer) + "%" : "0%");
	},
	
	starUpdate : function(e)
	{
		this.selectWidth = this.curWidth;
		this.selectPer = this.curPer;
		if (!this.isSelected)
		{
			this.oStarOver.className = "starSelected";
			this.isSelected = true;
		}
		this.oStarOver.title = Math.round(this.startPer);
	},
	
	starStop : function(e)
	{
		this.starRevert();
	}
};