function focusOnElement(elementId){
	document.getelementById(elementId).focus();
}

function hideDiv(elementId) {
	document.getElementById(elementId).style.display='none';
	}
		
function showDiv(elementId) {
	document.getElementById(elementId).style.display='';
	}
				
function clearValue(elementId) {
	document.getElementById(elementId).value='';
	}
	
function enable(elementId) {
	document.getElementById(elementId).className='inputData';
}

function checkBox(elementId){
	document.getElementById(elementId).checked=true;
}

function unCheckBox(elementId){
	document.getElementById(elementId).checked=false;
}

function showAlertCheckBox(checkBoxId, alertBubbleId, modalId, bubbleId, formId){
	var scnWid,scnHei;
	if (self.innerHeight) // all except Explorer
	{
		scnWid = self.innerWidth;
		scnHei = self.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight)
		// Explorer 6 Strict Mode
	{
		scnWid = document.documentElement.clientWidth;
		scnHei = document.documentElement.clientHeight;
	}
	else if (document.body) // other Explorers
	{
		scnWid = document.body.clientWidth;
		scnHei = document.body.clientHeight;
	}
	document.getElementById(modalId).style.height = scnHei;
	
	if(document.getElementById(checkBoxId).checked==false){
		showAlertDiv(alertBubbleId, modalId);
		showDiv(bubbleId);
	}else if(document.getElementById(checkBoxId).checked==true){
		ubpSelectAddOns(formId);
	}
}

function superToolTipClose(){
	var revealeded = document.getElementsByClassName('revealed');
	var revealedSuperToolTips = document.getElementsByClassName('layerRevealed');
	if (revealeded) {
		for (var i = 0; i < revealeded.length; i++) {
			revealeded[i].className='concealed';
			revealeded[i].parentNode.parentNode.className = 'superToolTip';
			revealedSuperToolTips[i].className = 'superToolTip';
		}
    } 
}
function getPageSizeWithScroll(){
	if (window.innerHeight && window.scrollMaxY) { // Firefox
		yWithScroll = window.innerHeight + window.scrollMaxY;
		xWithScroll = window.innerWidth + window.scrollMaxX;
	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
		yWithScroll = document.body.scrollHeight;
		xWithScroll = document.body.scrollWidth;
	} else { // works in Explorer 6 Strict, Mozilla (not FF) and Safari
		yWithScroll = document.body.offsetHeight;
		xWithScroll = document.body.offsetWidth;
	}
	arrayPageSizeWithScroll = new Array(xWithScroll,yWithScroll);
	return arrayPageSizeWithScroll;
}                                  
function setModalDimensions(modalId) {
	var arrayPageSize = getPageSizeWithScroll();
	if (window.innerHeight && window.scrollMaxY) {
		document.getElementById(modalId).style.width = (arrayPageSize[0] + 10) + 'px';
	} else {
		document.getElementById(modalId).style.width = (arrayPageSize[0] + 25) + 'px';
	}
	document.getElementById(modalId).style.height = (arrayPageSize[1] + 145) + 'px';       
	var selects = document.getElementsByTagName("select");
	for (i = 0; i != selects.length; i++) { selects[i].style.visibility = "hidden"; }
}
function showAlertDiv(elementId, modalId){
	var mId = modalId;
	setModalDimensions(mId);
	document.getElementById(elementId).style.display = "block";
}

/* The Edit Name function(s) below is an IMPLEMENTATION PROTOTYPE to emulate what would occur in Editing a name */
		/* The Development team can adopt or rewrite as they see fit. Its end result shall be in Developments own .js file independent from the UXD-provided ubp.js */

		/*
		Fundamentally, how the Ajax would function for “Edit name” is briefly summarized below:

		1. onclick event:
			a. Pass arguments that contain info server needs to process name change, such as current name 
			     i. Currently has just one, "currentName" (i.e. "Ed Madigan")
			    ii. Feel free to extend as needed 
			b. Replace current <p> element's innerHTML with a <form> element (note: this is not a show/hide script where the input and save button are already in HTML)
			     i. Last comment in ubp_editName function details this output.
			    ii. This new <form> element’s innerHTML contains the input text file and Save button.
			d. Backward degradability:
				 i. The value of href attribute would refresh entire page with input field and save button in place of the item clicked...
				ii. ...but when JS enabled, it intercepts that onclick event, returns false on the href value, and runs the function outlined above.
		2. onsubmit event of form, two things occur simultaneously:
			a. Resurrect previous <p> element with new name populated – just redrawing that piece, no page refresh.
			     i. "currentName" argument updated with "newName"
			b. Post form’s new info to server transparently.
		*/
		
		ubp_editName = function(currentName,thisElement) {
		  // Prepare HTML to replace paragraph with form
			var inputHTML =  '<form onsubmit="ubp_editNameSubmit(this);return false;" name="editName" action="/whatever_page_will_process_this_post.jsp" method="post">';
			    inputHTML +=    '<label for="editName-' + currentName + '" class="offCharts">Edit name</label>';
			    inputHTML +=    '<input type="text" name="editName-' + currentName + '" value="' + currentName + '" id="editName-' + currentName + '" class="editInput" onfocus="this.select()" />';
			    inputHTML +=    '<input type="submit" value="Save" class="textSubmit" />';
			    inputHTML += '</form>';
		  // Replace paragraph content with inputHTML
			thisElement.parentNode.innerHTML = inputHTML; 
		      /* In this case, the'parentNode' is '<p class="phoneGroup-phoneIDinfo">'
		           ...so the parentNode's new HTML would be...
		           <p class="phoneGroup-phoneIDinfo">
		             <form....
		                <label....
		                <input type="text"....
		                <input type="submit"....
		             </form....
		           </p>
              */

		  //Submit form and display new name inline
			ubp_editNameSubmit = function(thisElement) {
              // Store the new name.
				var newNameValue = document.getElementById("editName-" + currentName).value; 
			
              // Resurrect the initial paragraph content and update ubp_editName() function's argument.
				thisElement.parentNode.innerHTML = newNameValue + ' | <a href="PATH_TO_THIS_PAGE_WITH_THIS_PARAGRAPH_CONTENT_REFRESHED_WITH_EDIT_FIELD_SHOWN" onclick="ubp_editName(\'' + newNameValue +'\',this);return false;">Edit name</a>';
				
              // Do Ajax...
				alert('Run function here to connect by xmlhttprequest and submit the new name....\n\n "' + newNameValue + '"\n\n Note that the new name is now redrawn in its place.');
			}
		}

		/* The Edit Name function(s) below is an IMPLEMENTATION PROTOTYPE to emulate what would occur in Editing a name */
		/* The Development team can adopt or rewrite as they see fit. Its end result shall be in Developments own .js file independent from the UXD-provided ubp.js */

		/*
		Fundamentally, how the Ajax would function for “Edit name” is briefly summarized below:

		1. onclick event:
			a. Pass arguments that contain info server needs to process name change, such as current name 
			     i. "currentName" (Default suggested value of input)
			    ii. "thisElement"
			   iii. "phoneNumber"
			b. Replace current <h3> element's innerHTML with a <form> element (note: this is not a show/hide script where the input and save button are already in HTML)
			     i. Last comment in ubp_editNameExtended function details this output.
			    ii. This new <form> element's innerHTML contains the input text file and Save & Cancel buttons.
			d. Backwards degradability:
				 i. The value of href attribute would refresh entire page with input field and save button in place of the item clicked...
				ii. ...but when JS enabled, it intercepts that onclick event, returns false on the href value, and runs the function outlined above.
		2. onsubmit event of form, two things occur simultaneously:
			a. Resurrect previous <h3> element with new name populated – just redrawing that piece, no page refresh.
			     i. arguments updated
			b. Post form's new info to server transparently.
		*/
		
		ubp_editNameExtended = function(currentName,thisElement,phoneNumber) {
			
		  // Store existing HTML for cancel function
		  	var preexistingHTML = thisElement.parentNode.parentNode.parentNode.innerHTML;
		  // Prepare HTML to replace paragraph with form
			thisElement.parentNode.parentNode.className = 'phoneGroup-phoneID'; 
			var inputHTML =  '<div class="editNameBlock">';
			    inputHTML +=    '<form onsubmit="ubp_editNameSubmit(this,false);return false;" name="editName" action="/whatever_page_will_process_this_post.jsp" method="post">';
			    inputHTML +=      '<label for="editName-' + currentName + '" class="offCharts">Edit name</label>';
			    inputHTML +=      '<input type="text" name="editName-' + currentName + '" value="' + currentName + '" id="editName-' + currentName + '" class="editInput" onfocus="this.select()" />';
			    inputHTML +=      '<input type="image" src="../ui/images/bt-save.gif" value="Save" class="editButton-save" />';
			    inputHTML +=      '<img src="../ui/images/bt-cancel.gif" title="Cancel" alt="Cancel" class="editButton-close" onclick="ubp_editNameSubmit(this.parentNode,true);" />';
			    inputHTML +=    '</form>';
			    inputHTML += '</div>';
			    inputHTML += '<p class="phoneGroup-phoneIDinfo icoPhone">' + phoneNumber +'</p>';
		  // Replace paragraph content with inputHTML
			thisElement.parentNode.parentNode.innerHTML = inputHTML; 
		      /* In this case, the 'parentNode' is '<h3 class="phoneGroup-phoneID">'
		           ...so its new HTML would be...
					<h3 class="phoneGroup-phoneID">
						<div class="editNameBlock">
							<form....
								<label....
								<input....
								<input....
								<img....
							</form>
						</div>
						<p>....
					</h3>
              */
		  //Submit form and display new name inline
			ubp_editNameSubmit = function(thisElement,revert) {
			  // If canceling  
				if (!revert) {
					
	              // Store the new name.
					var newNameValue = document.getElementById("editName-" + currentName).value; 
					function addslashes(str) { str = str.replace(/\'/g,'\\\''); return str; } // Adds backslashes to single-quotes e.g. "Steven's Phone" becomes "Steven\'s Phone"
			
	              // Resurrect the initial paragraph content and update ubp_editName() function's argument.
					thisElement.parentNode.parentNode.innerHTML = newNameValue + ' <i>| <a href="PATH_TO_THIS_PAGE_WITH_THIS_PARAGRAPH_CONTENT_REFRESHED_WITH_EDIT_FIELD_SHOWN" onclick="ubp_editNameExtended(\'' + addslashes(newNameValue) +'\',this,\'' + phoneNumber + '\');return false;">Edit name</a></i><p class="phoneGroup-phoneIDinfo icoPhone">' + phoneNumber +'</p>';
				
	              // Do Ajax...
					//alert('Run function here to connect by xmlhttprequest and submit the new name....\n\n "' + newNameValue + '"');

				} else {
					thisElement.parentNode.parentNode.parentNode.innerHTML = preexistingHTML;
				}
			}
		}

function toggleUpgradePhone(whichPhone) {
	var liItem = document.getElementById(whichPhone);
	toggleBlind(whichPhone + '_Options');
	if (liItem.className == 'phoneGroup-special') { 
		setTimeout(function() {
			liItem.className = 'phoneGroup-special blindsDown'; 
		}, 200);
	}
	else if (liItem.className == 'phoneGroup-special messaged' || liItem.className == 'phoneGroup-special messaged blindsUp') { 
		setTimeout(function() {
			liItem.className = 'phoneGroup-special messaged blindsDown'; 
		}, 200);
	}
	else if (liItem.className == 'phoneGroup-special messaged blindsDown') { 
		setTimeout(function() {
			liItem.className = 'phoneGroup-special messaged blindsUp'; 
		}, 450);
	}
	else { 
		setTimeout(function() {
			liItem.className = 'phoneGroup-special'; 
		}, 450);
	}                           
}
/* <BlindDownUp> */
	var sliderHeight = "";
	var divToSlide = "";
	var fullSlideHeight = "";
	var sliderSpeed=15;  // Time between frames.  10 is really fast. 100 is really slow.
	var sliderAccel=1.8; // Acceleration frames.  From "many" 1.1 to a "few" fast 3.	
function blindingDown(height) {
	if (height<=fullSlideHeight) {
		document.getElementById(divToSlide).style.height = height+'px';
		if (height<(fullSlideHeight/2)) { sliderHeight=Math.round(height*sliderAccel)+1; }
		else { sliderHeight=fullSlideHeight-Math.round((fullSlideHeight-height)/sliderAccel)+1; }
		setTimeout("blindingDown(sliderHeight)",sliderSpeed);
	}
	else {
		document.getElementById(divToSlide).style.height = "auto";	
		sliderHeight="";			
		divToSlide="";
		fullSlideHeight="";
	}
}
function blindDown(objId) {
	if (document.getElementById(objId).style.display != 'none') { return; }
	document.getElementById(objId).style.overflow = 'hidden';	
	document.getElementById(objId).style.height = '1px';		
	document.getElementById(objId).style.display = '';		
	fullSlideHeight=document.getElementById(objId).scrollHeight;		
	divToSlide=objId;											
	blindingDown(1);												
	return;
}
function blindingUp(height) {	
	document.getElementById(divToSlide).style.height = height+'px';	
	if (height>0) {												
		if (height>(fullSlideHeight/2)) { sliderHeight=Math.round(fullSlideHeight-(fullSlideHeight*sliderAccel)+(height*sliderAccel))-1; if (sliderHeight<(fullSlideHeight/2)) { sliderHeight=Math.round(fullSlideHeight/2)-1; } }
		else { sliderHeight=Math.round(height/sliderAccel)-1; }
		setTimeout("blindingUp(sliderHeight)",sliderSpeed);			
	}
	else { document.getElementById(divToSlide).style.display = 'none'; sliderHeight=""; divToSlide=""; fullSlideHeight=""; }
}
function blindUp(objId) {
	if (document.getElementById(objId).style.display == 'none') { return; }
	document.getElementById(objId).style.overflow = 'hidden';	
	fullSlideHeight=document.getElementById(objId).scrollHeight;		
	if (!fullSlideHeight) { fullSlideHeight=document.getElementById(objId).offsetHeight; }
	fullSlideHeight-=10;												
	divToSlide=objId;											
	blindingUp(fullSlideHeight-1);									
	return;
}
function toggleBlind(objname){ if(document.getElementById(objname).style.display == "none") { blindDown(objname); } else{ blindUp(objname); } }
/* </BlindDownUp> */
/* The Add/Remove function(s) below is an IMPLEMENTATION PROTOTYPE meant to guide and emulate what would occur via Ajax when editing Add-ons */
/* If a complete page-refresh approach is to be taken, the Ajax portion can be ignored - though the ubpSelectAddOns() should probably still be used */
/* The Development team can adopt or rewrite as they see fit. Its end result shall be in Development's OWN .JS FILE INDEPENDENT FROM THE UXD-PROVIDED ubp.js */

ubpSelectAddOns = function(thisFormID) {
	// Make button active (visually) and no longer disabled
	var thisForm = document.getElementById(thisFormID);
	var thisFormSubmitButton = document.getElementById(thisFormID + '_button')
	thisFormSubmitButton.className = 'addOnSubmit-enabled';
	thisFormSubmitButton.disabled = false;

	// Create functions here to track selections/deselections
}

ubp_submitAddons = function(thisFormID){
	alert('Open a connection to server and submit transparently');
	var thisForm = document.getElementById(thisFormID);
	var theFirstElement = thisForm.getElementsByTagName('table')[0];

	alert('Now append a confirmation notice');
	var confirmationNotice = document.createElement('p');
	confirmationNotice.innerHTML = 'Your changes are reflected below, but may not be visible on subsequent visits to the website for the next few hours.'
	thisForm.insertBefore(confirmationNotice,theFirstElement);

	alert('Now append disclaimer text');
	var confirmationDisclaimer = document.createElement('p');                       
	confirmationDisclaimer.className = "disclaim";
	confirmationDisclaimer.innerHTML = 'Any items you have added which impact your minutes or rates will only affect the bill from their effective date.'
	thisForm.appendChild(confirmationDisclaimer);

	alert('Now create function(s) here to remove nodes that were\nselected for removal and move added nodes to "current" table');
	// Your functions for removal and moving here. This should be some sort of combination of manipulating the DOM to remove and move existing child nodes

}