/*******************************************************************************
 *
 *	JS UI Classes
 *
 *	o	SELECT Replacement Menu
 *	o	ABtn CSS Button
 *
 ******************************************************************************/


/***************************************************************************
 *	GENERAL FUNCTIONS
 */

//	Object.extend
//		From prototype.js
//		Used by ABtn
Object.extend = function(destination, source) {
  for (var property in source) {
    destination[property] = source[property];
  }
  return destination;
}


/***************************************************************************
 *	SELECT Replacement Menu
 *	
 *	This will replace any SELECT menus with a CSS-based one built on suckerfish dropdowns.
 *
 *	Use this to create pop-up menus that support the full CSS2 spec:
 *	o	Supports Optgroups (Not supported by IE6)
 *	o	Supports Disabled menu items (Still not supported as of Safari 2.0.4)
 *
 *	o	Modified to support groups
 *  o	Added restore selection by value rather than index
 *
 *  Based on http://easy-designs.net/articles/replaceSelect/
 *
 */


//	Find every SELECT in the page and replace them with the js selects
//	Called in hmap_mainPage.js.FinishedLoading()
function RSReplaceSelects() {
	var s = document.getElementsByTagName('select');
	for (var i=0; i<s.length; i++) {
		RSReplaceSelect(s[i]);
	}
}
function RSReplaceSelect(obj) {
	obj.className	+= ' replaced';							// This hides the original SELECT
	var ul			= document.createElement('ul');
	ul.className	= 'selectReplacement';
	var opts		= obj.options;
	var selectedOpt	= '';
	//	Get the currently selected value
	for (var i=0; i<opts.length; i++) {
		if (opts[i].selected) {
			selectedOpt = opts[i].value;
			break;
		}
	}
	//	Process Groups First
	var optgroups	= obj.getElementsByTagName('OPTGROUP');
	for (var i=0; i<optgroups.length; i++) {
		var li = document.createElement('li');
		var txt = document.createTextNode(optgroups[i].label);
		li.appendChild(txt);
		li.className = 'groupLabel';
		if (window.attachEvent) {
			li.onmouseover = function() {
				this.className += ' hover';
			}
			li.onmouseout = function() {
				this.className = this.className.replace(new RegExp(" hover\\b"), '');
			}
		}
		ul.appendChild(li);
	
		//	Process Options in each group
		var groupOpts = optgroups[i].getElementsByTagName('OPTION');
		for (var j=0; j<groupOpts.length; j++) {
			var li		= document.createElement('li');
			var txt		= document.createTextNode(groupOpts[j].text);
			li.appendChild(txt);
			li.selIndex	= groupOpts[j].index;
			li.selectID	= obj.id;
			//	Is it disabled?
			if (groupOpts[j].disabled) {
				//	Show as disabled, no onclick function
				li.className	+= ' disabled';
			} else {
				//	Allow select
				li.onclick	= function() {
					RSselectMe(this);
				}
			}
			//	Is it selected?
			if (groupOpts[j].value == selectedOpt) {
				li.className	= 'selected';
				li.onclick		= function() {
					this.parentNode.className += ' selectOpen';
					this.onclick	= function() {
						RSselectMe(this);
					}
				}
			}
			if (window.attachEvent) {
				li.onmouseover	= function() {
					this.className 	+= ' hover';
				}
				li.onmouseout	= function() {
					this.className	= this.className.replace(new RegExp(" hover\\b"), '');
				}
			}
			ul.appendChild( li );
		}
	}
//	obj.parentNode.appendChild(ul);				//	Use this alternate to show both at the same time
	obj.parentNode.insertBefore(ul,obj);
}
function RSselectMe(obj) {
	var lis = obj.parentNode.getElementsByTagName('li');
	for (var i=0; i<lis.length; i++) {
		if (lis[i] != obj) {
			if (lis[i].className!='groupLabel') {
				lis[i].className='';
				lis[i].onclick = function() {
					RSselectMe(this);
				}
			}
		} else {
			//	Select this item
			RSsetVal(obj.selectID, obj.selIndex);
			obj.className				='selected';
			obj.parentNode.className	= obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
			obj.onclick = function() {
				obj.parentNode.className += ' selectOpen';
				this.onclick = function() {
					RSselectMe(this);
				}
			}
		}
	}
}
function RSsetVal(objID, selIndex) {
	var obj = document.getElementById(objID);
	obj.selectedIndex = selIndex;
	obj.onchange();	//	Trigger the onchange event (otherwise it's not triggered, at least in FireFox)
}





/***************************************************************************
 *	ABtn
 *	
 *	A CSS-based button using <A HREF...>.
 *

	REQUIRES:
	o	Object.exstend method from prototype.js
	o	CSS definitions
		.RBtn {
			text-align:			center;
			padding:			2px 2px;
			margin:				0px;
			cursor:				pointer;
			font-size: 			9px;
			height:				1em;
			}
		.RBtn.up {
			background: #f2ecb5;
			border-top: 1px solid #e9d7a7;
			border-left:		1px solid #e9d7a7;
			border-right:		1px solid #aa8647;
			border-bottom: 1px solid #aa8647;
			color: #9d864d;
			text-decoration:	none;
			}
		.RBtn.down {
			background: #dabb6b;
			border-top:			1px solid #aa8647;
			border-left:		1px solid #aa8647;
			border-right:		1px solid #e9d7a7;
			border-bottom:		1px solid #e9d7a7;
			color:				#000;
			font-weight:		bold;
			text-decoration:	none;
			}
		.RBtn.up:hover {
			background-color: #ebdb98;
			}
		.RBtn.down:hover {
			background-color: #ebdb98;
			}
		.RBtn.disabled {
			background: #ddc;
			border-top: 1px solid #e9d7a7;
			border-left:		1px solid #e9d7a7;
			border-right:		1px solid #aa8647;
			border-bottom: 1px solid #aa8647;
			color: #bbb;
			text-decoration:	none;
			}
	
 	Use this to create buttons that support the full CSS2 spec:
 	o	Supports Disabled (Still not supported as of Safari 2.0.4)
 	o	Supports toggle on/off state

	EXAMPLE:
		var btn1 = ABtn.create();
		btn1.href = 'btn1.html';
		btn1.innerHTML = 'button 1';
		btn1.handleClick = function() { alert('clicked'); return false;}
		document.body.appendChild( btn1 );

	Display Characteristics
	o	up
	o	hover (up)
	o	down
	o	hover (down)
	o	disabled
	
	Toggle States
	o	on
	o	off
	
	Disabled
	o	true
	o	false
	
	ABtn Types
 	o	Toggle (stays on or off)
 	tbd	Normal (press and release)

 */


var ABtn = {
	
	create: function() {
		var anchor = document.createElement('a');
		ABtn.init( anchor )
		ABtn.attach( anchor );
		return anchor;
	},
	
	init: function ( el ) {
		el.state = 'off';
		el.type = 'toggle';
		el.disabled = false;
		el.className = 'ABtn up enabled';
		el.href = '#';
		el.innerHTML = 'undefined text';
	},
	
	attach: function( el ) {
		Object.extend( el, ABtn);
	},
	
	onclick: function() {
		//	This handles the state and display maintenance
		//	Then hands off execution to handleClick
		this.toggleState();
		this.updateDisplay();
		var returned = this.handleClick();
		return returned;
	},
	
	handleClick: function() {
		//	Override this function to create custom click handlers
		return false;
	},

	toggleState: function() {
		if (this.type == 'toggle') {
			this.state = (this.state == 'on') ? 'off' : 'on' ; 			
		}
	},

	updateDisplay: function() {
		//alert('updateDisplay ' + this.innerHTML);
		if (this.state == 'on') {
			this.className = this.className.replace(new RegExp(" up\\b"), ' down');
		} else {
			this.className = this.className.replace(new RegExp(" down\\b"), ' up');
		}
		if (this.disabled == true) {
			this.className = this.className.replace(new RegExp(" enabled\\b"), ' disabled');
		} else {
			this.className = this.className.replace(new RegExp(" disabled\\b"), ' enabled');
		}
	}
	
}