Untitled

<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/base-min.css">
<link rel="stylesheet" type="text/css" href="css/base.css">
<style>
    .healthbar {
	height: 30px;
	position: relative;
	background: #555;
}
    .healthbar > span {
	display: block;
	height: 100%;
	background-color: rgb(230, 248, 243);//fallback option
	background-image: -webkit-gradient(
	  linear,
	  left bottom,
	  left top,
	  color-stop(0, rgb(43,194,83)),
	  color-stop(1, rgb(84,240,84))
	 );
	background-image: -webkit-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	background-image: -moz-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	background-image: -ms-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	background-image: -o-linear-gradient(
	  center bottom,
	  rgb(43,194,83) 37%,
	  rgb(84,240,84) 69%
	 );
	position: relative;
	overflow: hidden;
}
</style>
<script>
////////////////
//function prototypes

var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval;

window.setTimeout = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
  return __nativeST__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
  } : vCallback, nDelay);
};

window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) {
  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2);
  return __nativeSI__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
  } : vCallback, nDelay);
};

window.clearTimeout = function (vCallback /*, argumentToPass1, argumentToPass2, etc. */) {
  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 1);
  return __nativeSI__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
  } : vCallback);
};
window.clearInterval = function (vCallback /*, argumentToPass1, argumentToPass2, etc. */) {
  var oThis = this, aArgs = Array.prototype.slice.call(arguments, 1);
  return __nativeSI__(vCallback instanceof Function ? function () {
    vCallback.apply(oThis, aArgs);
  } : vCallback);
};
//setTimeout.call(myArray, myArray.myMethod, 2000);  example;
//thank u mozilla for blessing me with capracious hax as used and modified above
function HealthBar (name,health,maxHealth,animated) {//Prototype SampleBar(*,,,) Name Req example var AnotherBar = new Healthbar('anotherbar');
	self = this; //alias this
	this.name = name;//name after the element
	this.animated = typeof animated !== 'undefined' ? animated : false;//set to animated, if not passed, set to false
	this.health = typeof health !== 'undefined' ? health: 0;//initialize this with a value of 0
	this.maxHealth = typeof maxHealth !== 'undefined' ? maxHealth: 100;//initialize this with a value of 100
	this.targethealth = 0;//i should eliminate this in the future
	this.barIncrement = 5;//maxHealth/100;//default health increment for a bar of 100 is 1
	this.fillspeed = 10;//10ms is an ideal fill speed
}
//using prototypes conserves memory by avoiding duplicated variables
HealthBar.prototype.setHealth = function(newhealth){
	if(between(newhealth, 0, this.maxHealth)){
	this.health = newhealth; //set health to new value
	this.Update(); //update the visible component of the class
	}//don't exceed max or go below none.
};//semicolons needed for inside or prototype functions

HealthBar.prototype.addHealth = function(newhealth){
		if(between((this.health + newhealth), 0, this.maxHealth)){
		this.health += newhealth;
		this.Update();
		}//otherwise cannot add or remove anymore health, so we'll attempt to get as close as possible
		else if(newhealth > 0)
		{
			this.health = this.maxHealth;
			this.Update();

		}//just set to max health, we can go no higher and we want to add more
		else if(newhealth < 0)
		{
			this.health = 0;//set to 0, we can go no lower
			this.Update();
		}
};

HealthBar.prototype.Update = function() {
	if(this.health <= 100)
	{ document.getElementById(this.name).style.width =  this.health.toString().concat("%");} //for bars under 101 health
	else
	{document.getElementById(this.name).style.width = ((this.health/this.maxHealth) * 100).toString().concat("%");}//else convert to percent
};

HealthBar.prototype.Heal = function(fillto, speed, increment) {
self = this;
this.barIncrement = typeof increment !== 'undefined' ? increment : this.barIncrement; //update the value if passed, otherwise retain
this.fillspeed = typeof speed !== 'undefined' ? speed : this.fillspeed; //update the value if passed, otherwise retain
this.targethealth = fillto;//set bar new value storage variable
setInterval.call(self, self.callFill , speed);

};//run a timer to fill health to the new level
HealthBar.prototype.callFill = function() {
this.fillHealth();
};
HealthBar.prototype.fillHealth = function() {
self = this;
if(this.targethealth > this.health){this.setHealth(this.health+this.barIncrement);}//if target is higher, add 1 health
else if(this.targethealth < this.health){this.setHealth(this.health-this.barIncrement);}//if target is lower, remove 1 health
	if(this.targethealth == this.health){
		clearInterval.call(self,self.callFill, speed);
		this.barIncrement = this.maxHealth/100;//clear heal increment as well
	}//when target reached stop
};
function between(x, min, max) {
  return x >= min && x <= max;//make checking ranges more simple
}
</script>
</head>
<body>
<input onkeypress = "healthBar(event);"/>
<button class="pure-button button-green" onclick = "anotherBar.addHealth(10);">Add Health</button>
<button class="pure-button button-green" onclick = "anotherBar.Heal(100);">Heal Health</button>
<button class="pure-button button-red" onclick = "anotherBar.addHealth(-10);">Remove Health</button>
<div class="healthbar" style="float: center; width: 50%;">
<span id="anotherbarspan" style="width: 0%"></span><!--initial value of nothing, set to value on load-->
</div>
<script>
//call after page loaded
var anotherBar = new HealthBar('anotherbarspan');//initialize the object, must be different than the span id
anotherBar.setHealth(55);//set the health value
</script>
</body>
</html>