/////////////////////////////////////////////////////////////////////////////
//
// Gladiator Components
//
// http://www.gladiatorweb.com
//
// (c) 2006 by Edward H. Trager .  All Rights Reserved
//
// NAME: gladiatorFormComponent.js
//
// DESCRIPTION: Implements the following form components:
//
//              -> gFormComponent (base class)
//              -> gText
//              -> gDropDown
//              -> gDivider
//
// AUTHOR: Edward H. Trager
//
// LAST UPDATE: 2006.05.22
//
// NOTE: SEE "LICENSE" FILE FOR LICENSING TERMS
//
//////////////////////////////////////////////////////////////////////////////

//
// DEPENDENCY CHECKING:
//
if(typeof GLADIATOR_CORE_INCLUDED == 'undefined') alert('NOTE BENE: "gladiatorFormComponents.js" REQUIRES "gladiatorCore.js"!');

var GLADIATOR_FORM_COMPONENTS_INCLUDED=true;

//////////////////////////////////////////
//
// gFormComponent (Base class)
//
//////////////////////////////////////////
function gFormComponent(label,id,parentNode){
	
	var _label  = label;
	var _id     = id;
	
	// CREATE THE COMPONENT:
	var _thisComponent = document.createElementNS(NS.xhtml,"div");
	_thisComponent.setAttribute("class","formComponent");
	
	if(_label) {
		var _thisLabel = document.createElementNS(NS.xhtml,"div");
		_thisLabel.setAttribute("class","label");
		var _text      = document.createTextNode(label+":");
		_thisLabel.appendChild(_text);
		_thisComponent.appendChild(_thisLabel);
	}
	////////////////////////////////////////////////
	//
	// Add the component node to the DOM tree:
	// By default, add the component to the BODY element,
	// unless some other parentNode was supplied as
	// an argument to the constructor:
	//
	////////////////////////////////////////////////
	if(parentNode){
		parentNode.appendChild(_thisComponent);
		
	}else{
		// Using document.body.appendChild is convenient, but 
		// apparently it is not in the W3C standard ...
		// ==> document.body.appendChild(_thisWindow);
		// The W3C standards way to get the document body:
		var bodyRef = document.getElementsByTagName("body").item(0);
		bodyRef.appendChild(_thisComponent);
	}
	
	this.getNode = function(){
		
		return _thisComponent;
		
	}
	
	this.getId = function(){
		
		return _id;
		
	}
}

//////////////////////////////////////////
//
// gText: Simple text box
//
//////////////////////////////////////////
function gText(label,id,parentNode){
	
	var _parentComponent = new gFormComponent(label,id,parentNode);
	
	var _thisComponent = _parentComponent.getNode();
	var _textBox = document.createElementNS(NS.xhtml,"input");
	_textBox.id=id;
	_textBox.name=id;
	_textBox.setAttribute("class","tI");
	
	_thisComponent.appendChild(_textBox);
	
	this.getNode = function(){
		
		return _thisComponent;
		
	}
	
	this.setValue = function(value){
		_textBox.value = value;
	}
	
	this.getValue = function(){
		return _textBox.value;
	}
	
	this.addEventListener = function(eventType,eventMethod){
		_textBox.addEventListener(eventType,eventMethod,false);
	}
	
}

//////////////////////////////////////////
//
// gFormButton: Input button field
//
//////////////////////////////////////////
function gFormButton(label,id,parentNode){
	
	var _parentComponent = new gFormComponent("",id,parentNode);
	var _thisComponent = _parentComponent.getNode();
	var _button = document.createElementNS(NS.xhtml,"input");
	_button.type="button";
	_button.id=id;
	_button.name=id;
	_button.value=label;
	_button.setAttribute("class","gFormButton");
	
	_thisComponent.appendChild(_button);
	
	this.getNode = function(){
		
		return _thisComponent;
		
	}
	
	this.show = function(showIt){
		_show = showIt;
		if(_show){
			_thisComponent.style.display="block";
		}else{
			_thisComponent.style.display="none";
		}
	}
	
	
	this.enable = function(){
		_button.disabled = false;
	}
	
	this.disable = function(){
		_button.disabled = true;
	}
	
	this.addEventListener = function(eventName,eventHandler){
		_button.addEventListener(eventName,eventHandler,false);
	}
	
	this.changeLabel = function(label){
		_button.value=label;
	}
	
}

//////////////////////////////////////////
//
// gPassword: Input password field
//
//////////////////////////////////////////
function gPassword(label,id,parentNode){
	
	var _parentComponent = new gFormComponent(label,id,parentNode);
	
	var _thisComponent = _parentComponent.getNode();
	var _textBox = document.createElementNS(NS.xhtml,"input");
	_textBox.id=id;
	_textBox.name=id;
	_textBox.setAttribute("class","tI");
	_textBox.type="password";
	_thisComponent.appendChild(_textBox);
	
	this.getNode = function(){
		
		return _thisComponent;
		
	}
	
	this.setValue = function(value){
		_textBox.value = value;
	}
	
	this.getValue = function(){
		return _textBox.value;
	}
	
	this.addEventListener = function(eventType,eventMethod){
		_textBox.addEventListener(eventType,eventMethod,false);
	}
	
	
}

//////////////////////////////////////////
//
// gCheckBox: Simple checkbox
//
//////////////////////////////////////////
function gCheckBox(label,id,parentNode){
	
	var _parentComponent = new gFormComponent(label,id,parentNode);
	
	var _thisComponent = _parentComponent.getNode();
	var _checkBox = document.createElementNS(NS.xhtml,"input");
	_checkBox.id=id;
	_checkBox.name=id;
	_checkBox.type ="checkbox";
	//_textBox.setAttribute("class","tI");
	
	_thisComponent.appendChild(_checkBox);
	
	this.getNode = function(){
		
		return _thisComponent;
		
	}
	this.hide = function(){
		_thisComponent.style.display = "none";
	}
	
	this.show = function(){
		_thisComponent.style.display = "";
	}
	
	this.reset = function(){
		_checkBox.checked = false;
	}
	
	this.addEventListener = function(eventType,eventMethod){
		_checkBox.addEventListener(eventType,eventMethod,false);
	}
	
	this.isChecked = function(){
		
		if(_checkBox.checked) return true;
		return false;
		
	}
}


//////////////////////////////////////////
//
// gDropDown: 
//
//////////////////////////////////////////
function gDropDown(label,id,parentNode){
	
	var _parentComponent = new gFormComponent(label,id,parentNode);
	
	var _thisComponent = _parentComponent.getNode();
	
	var _dropDown = document.createElementNS(NS.xhtml,"select");
	_dropDown.setAttribute("class","tI");
	_dropDown.id=id;
	_dropDown.name=id;
	
	//_dropDown.addEventListener("change",foobar,false);
	
	_thisComponent.appendChild(_dropDown);
	
	////////////////////
	//
	// Private Methods
	//
	////////////////////
	
	//
	// DEBUGGING FUNCTION foobar():
	//
	//function foobar(){
	//	
	//	alert(_dropDown.value);
	//	alert(_dropDown.name);
	//	alert(_dropDown.id);
	//	
	//}
	
	////////////////////
	//
	// Public Methods
	//
	////////////////////
	
	//
	// getNode()
	//
	this.getNode = function(){
		
		return _thisComponent;
		
	}
	
	//
	// addSelection()
	//
	this.addSelection = function(value,label){
		
		var selection = document.createElementNS(NS.xhtml,"option");
		selection.value = value;
		var text = document.createTextNode(label);
		selection.appendChild(text);
		_dropDown.appendChild(selection);
		
	}
	
	this.addEventListener = function(eventType,eventMethod){
		_dropDown.addEventListener(eventType,eventMethod,false);
	}
	
	//
	// getSelectedText: get the text of the selected index
	//
	this.getSelectedText = function(){
		var index = _dropDown.selectedIndex;
		if(index != -1){
			return _dropDown.options[index].text;
		}else return ".";
	}
	
	//
	// setSelection: select the option with a given index
	//
	this.setSelection = function(index){
	if(index < _dropDown.options.length)
		_dropDown.selectedIndex = index;
	}
	
}


//
// Section Divider
//
function gDivider(label,id,parentNode){
	
	var _label  = label;
	var _id     = id;
	
	// CREATE THE COMPONENT:
	var _thisComponent = document.createElementNS(NS.xhtml,"div");
	_thisComponent.setAttribute("class","gDivider");
	
	var _thisLabel = document.createElementNS(NS.xhtml,"div");
	_thisLabel.setAttribute("class","label");
	var _text      = document.createTextNode(label);
	_thisLabel.appendChild(_text);
	_thisComponent.appendChild(_thisLabel);
	
	if(parentNode){
		parentNode.appendChild(_thisComponent);
	}else{
		var bodyRef = document.getElementsByTagName("body").item(0);
		bodyRef.appendChild(_thisComponent);
	}
	
	this.hide = function(){
		_thisComponent.style.display = "none";
	}
	
	this.show = function(){
		_thisComponent.style.display = "";
	}
	
}