Button = function(name, parentDiv, w, h) {
	this.states = { 'up': 0, 'over': 1, 'down': 2, 'disabled': 3 };
	this.behaviors = {'button' : 0, 'checkbox' : 1, 'radio' : 2 };
	this.positions = { 'absolute' : 0, 'relative': 1 };
	
	this.parentArray = null;
	this.name = name;
	this.checked = false;
	
	this.handlersEvent = new Object();
	this.backgroundImage = null;
	
	this.allowUncheckRadio = false;
	
	// Html elements
	this.html = new Object();
	this.html.div = document.createElement('div');
	this.setParentDiv(parentDiv);	
	
	this.html.divEvents = document.createElement('div');
	this.html.div.appendChild(this.html.divEvents);
	this.html.divCaption = document.createElement('div');
	this.html.div.appendChild(this.html.divCaption);
	this.html.divBackground = document.createElement('div');
	this.html.div.appendChild(this.html.divBackground);	
	//this.html.div.style.position = 'absolute';
	this.html.divEvents.style.position = this.html.divCaption.style.position = this.html.divBackground.style.position = 'absolute';
	this.html.divCaption.style.whiteSpace = 'nowrap';
	this.html.divCaption.style.overflow = 'hidden';
	
	
	this.html.div.style.overflow = 'hidden';
	
	this.html.divEvents.style.left = this.html.divCaption.style.left = this.html.divBackground.style.left = '0px';
	this.html.divEvents.style.top  = this.html.divCaption.style.top  = this.html.divBackground.style.top  = '0px';
	this.html.divEvents.style.zIndex = 10;
	this.html.divCaption.style.zIndex = 5;
	this.html.divBackground.style.zIndex = 1;
	this.html.divBackground.style.fontSize = '1px';
	
	if (oBrowserSniffer.isMsie == true) {
		this.setOpacity(this.html.divEvents, 0);
		setTimeout(this.name + '.html.divEvents.style.backgroundColor = "yellow"; ', 50);
	}

	this.html.divEvents.userData = new Object(); this.userData = this.html.divEvents.userData;
	this.userData = this.html.divEvents.userData;
	this.userData.name = this.name;
	this.html.divEvents.userData.button = this;
	
	this.behavior = this.behaviors.button;
	this.htmlObj = { 'caption' : this.html.divCaption, 'background' : this.html.div };
	
	// Init
	this.setPositionType('absolute');
	this.setSize(w, h);
	this.setFontSize(10);
	this.setState('up');
	this.setEvents();
	
	this.eventTarget = this.html.divEvents;
	this.oComponent = new component(this.name + '.oComponent', this);
}

Button.prototype = {
	setParentArray : function(parentArray) { 
		this.parentArray 	= parentArray;
		this.behavior		= this.behaviors.radio;
	
	},
	
	setBehavior : function(behavior) { 
		if (this.behaviors[behavior] == null) { return; }
		this.behavior = this.behaviors[behavior];
	},
	
	setEvents : function() { 
		this.html.divEvents.onmouseover = function(e) { var oTmp = eval(this.userData.name); oTmp.onEvent(e, 'over'); };						
		this.html.divEvents.onmouseout 	= function(e) { var oTmp = eval(this.userData.name); oTmp.onEvent(e, 'out'); };						
		this.html.divEvents.onmousedown	= function(e) { var oTmp = eval(this.userData.name); oTmp.onEvent(e, 'down');  };
		this.html.divEvents.onmouseup	= function(e) { var oTmp = eval(this.userData.name); oTmp.onEvent(e, 'up'); };
		this.html.divEvents.onmousemove	= function(e) { var oTmp = eval(this.userData.name); oTmp.onEvent(e, 'mousemove'); };
		this.html.divEvents.onclick	= function(e) { var oTmp = eval(this.userData.name); oTmp.onEvent(e, 'click'); };
		this.html.divEvents.ondblclick	= function(e) { var oTmp = eval(this.userData.name); oTmp.onEvent(e, 'dblclick'); };
	},
	
	setParentDiv : function(parentDiv) {
		try {
			if (this.html.div.parentNode)
				this.html.div.parentNode.removeChild(this.html.div);
		} catch(e) { };
		this.html.parentDiv = parentDiv;
		if (this.html.parentDiv == null) { this.html.parentDiv = document.body; }
		this.html.parentDiv.appendChild(this.html.div); 		
	},
	
	setSize : function(w, h) {
		this.w = w;
		this.h = h;
		this.html.div.style.width  = this.html.divEvents.style.width  = this.html.divBackground.style.width  = this.w + 'px';
		this.html.div.style.height = this.html.divEvents.style.height = this.h + 'px';
		this.html.divCaption.style.width = this.w + 'px';
		this.html.divBackground.style.height = (this.h * 4) + 'px';
		if (this.html.divShadow != null) {  this.setShadow(); }
	},
	
	getSize : function() {
		return {height: this.h, width: this.w};
	},

	setPosition : function(x, y) {
		this.x = x; this.y = y;
		setPositionAbsoluteTop(this.html.div, this.y);		
		this.html.div.style.left = this.x + 'px';
	},

	getPosition : function() {
		return {x: this.x, y: this.y};
	},

	setImage : function(url) {
		this.backgroundImage = url;
		
		if (this.backgroundImage.substr(this.backgroundImage.length - 3, 3).toLowerCase() == 'png') {
			this.setBackgroundPng(this.html.divBackground, this.backgroundImage);
		}
		else {
			this.html.divBackground.style.background = "url('" + this.backgroundImage + "')";
		}
		this.html.divBackground.style.top = '0px';
	},

	setCaption : function(text) {
		this.text = text; this.caption = this.text;
		this.html.divCaption.innerHTML = this.text;
		this.html.divCaption.style.textAlign = 'center';
		this.html.divCaption.style.verticalAlign = 'middle';
		if (this.html.divCaption.offsetHeight != 0 && !isNaN(this.html.divCaption.offsetHeight)) {
			this.html.divCaption.style.top = parseInt(((this.h - this.html.divCaption.offsetHeight) / 2 ), 10) + 'px';
		}
		else { //HACK! vertical align no work			
			this.html.divCaption.style.top = parseInt(((this.h - this.fontSize) / 2 ), 10) + 'px';
		}
	},

	setFontSize : function(size) {
		this.fontSize = size;
		this.html.divCaption.style.fontSize = this.fontSize + 'px';
	},

	setState : function(state) {
		if (this.states[state] == null) { return; }
	
		this.state = this.states[state];
		
		if (this.backgroundImage != null) {
			var offsetY = -this.h * this.states[state];
			this.html.divBackground.style.top = offsetY + 'px';
		}
		
		this.applyCss(state, this.htmlObj.background);
		this.applyCss(state, this.htmlObj.caption);
		
		if (this.html.divShadow != null) {  this.setShadow(); }
	},

	getState : function() {
		for (var prop in this.states) {
			if (this.states[prop] == this.state) return prop;
		}
	},
	
	
	onEvent : function(e, sEvent){
		if (!e) e = normalizeEvent(window.event);
		
		if (this.state == this.states.disabled) {
			if ((sEvent == 'over' || sEvent == 'out')  && this.oToolTip != null) { //For ToolTipText
				this.setExtarEvents(e, sEvent);
			}
			return;
		}
		
		var eventName = sEvent;
		
		switch (this.behavior) {
			case this.behaviors.radio:
				if (this.allowUncheckRadio == true) {
					if (sEvent == 'click') { this.setChecked(!this.checked); }
					if (this.checked == true) { sEvent = 'down'; }
					if (sEvent == 'click' && this.checked == false) { sEvent = 'over';  }
				}
				else {
					if (sEvent == 'click') { this.unCheckedForArray(); this.setChecked(true); }
					if (this.checked == true) { this.setStateForArray('up'); sEvent = 'down'; }
				}
				break;
			case this.behaviors.checkbox:
				if (sEvent == 'click') { this.setChecked(!this.checked); }
				if (this.checked == true) { sEvent = 'down'; }
				if (sEvent == 'click' && this.checked == false) { sEvent = 'over';  }
				break;
			case this.behaviors.button:
				if (sEvent == 'up') { sEvent = 'over'; }
				break;
		}
		
		if (sEvent == 'out') { sEvent = 'up'; }
		
		this.setState(sEvent);
		this.setExtarEvents(e, eventName);
	},
	
	setStateForArray : function(sEvent) {	
		for(var i=0;i<this.parentArray.length; i++) {
			if (this.parentArray[i].state != this.states.disabled && this.parentArray[i].checked == false) {
				this.parentArray[i].setState(sEvent);
			}
		}
	},
	
	unCheckedForArray : function() {
		if (this.behavior != this.behaviors.radio) { return; }
		for(var i=0;i<this.parentArray.length; i++) {
			if (this.parentArray[i].state != this.states.disabled) {
				this.parentArray[i].setChecked(false);
			}
		}
	},
	
	getButtonOnArray : function(FieldName, FieldValue) {
		if (this.behavior != this.behaviors.radio) { return; }
		for(var i=0;i<this.parentArray.length; i++) {
			if (this.parentArray[i].userData[FieldName] == FieldValue) {
				return this.parentArray[i];
			}
		}
		return null;
	},

	getCheckedButtonOnArray : function() {
		if (this.behavior != this.behaviors.radio) { return; }
		for(var i=0;i<this.parentArray.length; i++) {
			if (this.parentArray[i].getChecked() == true) {
				return this.parentArray[i];
			}
		}
		return null;
	},

	setChecked : function(bValue) {
		this.checked = bValue;
		if (bValue == true && this.parentArray != null) {
			if (this.behavior == this.behaviors.radio) {
				this.unCheckedForArray();
				this.checked = bValue;
				this.setStateForArray('up'); 
			}
			this.parentArray["lastChecked"] = this; 
		}
		if (bValue == true) { this.setState('down'); }
	},
	
	getChecked : function() {
		return this.checked;
	},	
	
	setPositionType : function(position) {
		if (this.positions[position] == null) { return; }
		this.position = this.positions[position];

		switch (this.position) {
			case this.positions.absolute:
				this.html.div.style.position = 'absolute';
				break;
			case this.positions.relative:
				this.html.div.style.position = 'relative';
				this.html.div.style.display  = 'block';
				break;
		}
	},
	
	setVisibility : function(bValue) {
		this.html.div.style.display = (bValue == false ? 'none' : 'block');
	},

	setLabel : function(sCaption, w, h, lblPositions){
		if (this.oLabel == null) {
			this.oLabel = new Label(this.name + '.oLabel', this.html.parentDiv, w, h, sCaption, this );
		} 
		else {
			this.oLabel.setSize(w, h);
			this.oLabel.setCaption(sCaption);
		}
		this.oLabel.setParentObjPosition(lblPositions);
		
		return this.oLabel;
	},
	
	setToolTip : function(sCaption) {
		if (this.oToolTip == null) {
			this.oToolTip = new ToolTip(this.name + '.oToolTip', this.html.div, sCaption, this);
			this.setEventHandler('over', 'show', this.oToolTip);
			this.setEventHandler('out', 'hidden', this.oToolTip);
		}
		else {
			this.oToolTip.setCaption(sCaption);
		}
		return this.oToolTip;
	},

	setShadow : function(x, y, shadowColor) {
		if (this.html.divShadow == null) {
			this.shadowX = 1; this.shadowY = 1; this.shadowColor = 'gray';
			this.html.divShadow = document.createElement('div');
			this.html.div.appendChild(this.html.divShadow);
		}
		
		if (x != null) { this.shadowX = x; }
		if (y != null) { this.shadowY = y; }
		if (shadowColor != null) { this.shadowColor = shadowColor; }

		
		this.html.divShadow.style.position = 'absolute';
		this.html.divShadow.style.overflow = 'hidden';
		this.html.divShadow.style.whiteSpace = 'nowrap';
		this.html.divShadow.innerHTML = this.text;
		this.html.divShadow.style.color = this.shadowColor;
		this.html.divShadow.style.textAlign = this.html.divCaption.style.textAlign;
		this.html.divShadow.style.verticalAlign = this.html.divCaption.style.verticalAlign;
		this.html.divShadow.style.fontSize = this.html.divCaption.style.fontSize;
		this.html.divShadow.style.fontFamily = this.html.divCaption.style.fontFamily;
		this.html.divShadow.style.fontWeight = this.html.divCaption.style.fontWeight;
		this.html.divShadow.style.zIndex = 4;

		this.html.divShadow.style.width = parseInt(this.html.divCaption.style.width, 10) + 'px';
		this.html.divShadow.style.left = (parseInt(this.html.divCaption.style.left, 10) + this.shadowX) + 'px';
		this.html.divShadow.style.top = (parseInt(this.html.divCaption.style.top, 10) + this.shadowY) + 'px';
	}, 
	
	setCss : function(sProperty, oValues, htmlObj) {
		//if (this.states[state] == null) { return; }
		if (htmlObj != null && this.htmlObj[htmlObj] == null) { return; }
		
		if (htmlObj == null) {
			switch (sProperty) {
				case "color": case "fontSize": case "fontFamily": case "fontWeight":
					htmlObj = this.html.divCaption; 
					break;
				case "border": case "backgroundColor": case "cursor":
					htmlObj = this.html.div; 
					break;
				default:
					alert('ERROR'); return;
			}
		}
		else { htmlObj = this.htmlObj[htmlObj]; }
		
	
		aStates = new Array('up', 'over', 'down', 'disabled');
		for (var i=0; i<aStates.length; i++) {
			if (htmlObj.css == null) { htmlObj.css = new Array(); }
			if (htmlObj.css[aStates[i]] == null) { htmlObj.css[aStates[i]] = new Array(); }
			if (oValues[aStates[i]] != null) {
				oCss = new Object();
				oCss["sProperty"] = sProperty; oCss["sValue"] = oValues[aStates[i]];
				htmlObj.css[aStates[i]].push(oCss);
			}
		}
		
	},
	
	applyCss : function(state, htmlObj) {
		if (htmlObj.css == null) { return; }
		if (htmlObj.css[state] == null) {
			state = 'up';
			if (htmlObj.css[state] == null) { return; }
		}
		
		for (var i = 0; i < htmlObj.css[state].length; i++) {
			var sProperty = htmlObj.css[state][i]["sProperty"];
			var sValue = htmlObj.css[state][i]["sValue"];
			htmlObj.style[sProperty] = sValue;
		}
	},
	
	setBackgroundPng : function(oDiv, sImgPath) {
		if (oBrowserSniffer.isMsie == true) {
			oDiv.style.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=image src=\'' + sImgPath + '\')';
			oDiv.style.background = '';
		}
		else {
			oDiv.style.background = 'url(' + sImgPath + ') no-repeat';
		}
	},

	setOpacity: function(Obj, iOpacity){
		if (oBrowserSniffer.isMsie == true) {
			Obj.style.filter = 'alpha(opacity=' + iOpacity + ')';
		} else if (oBrowserSniffer.isNetscape == true && oBrowserSniffer.isMac == true) {
			Obj.style.MozOpacity = (iOpacity/100);
		} else {
			Obj.style.opacity = (iOpacity/100);
		}
	}
}