var count = 0;
      var heading = new Array(5);
      heading[1] = 0;
      heading[2] = 0;
      var Dom = {
        get: function(el) {
          if (typeof el === 'string') {
            return document.getElementById(el);
          } else {
            return el;
          }
        },
        add: function(el, dest) {
          var el = this.get(el);
          var dest = this.get(dest);
//	  alert('adding el to dest');
          dest.appendChild(el);
        },
	/* basic addit function */
	addit: function(txt, dest) {
	  var i = 0;
	  var newel = document.createElement('span');
	  newel.innerHTML = txt + '<br /><input type="hidden" name="'+dest+'" value="'+txt+'">';
	  Dom.add(newel, dest);
	  i ++;
	},
	/* addit1: add - version A */
	/* show the text - set the variable */
	addit1: function(txt, dest) {
		if (txt.charAt(0) == '-') { // Anything starting with '-' is a comment/title/section heading
			return;
		}
		  var newel_control = document.createElement('span');
		  newel_control.innerHTML = '<font color="red">[delete]</font>&nbsp;';
		  Dom.add(newel_control, dest);
		var newel = document.createElement('span');
//		alert('add new span element with: '+txt+' to dest: '+dest);
//		newel.innerHTML = txt + '<br /><input type="hidden" name="'+dest+'" value="'+txt+'">';

		newel.innerHTML =
		  txt + '<input type="hidden" name="'+dest+'" value="'+txt+'">' + '<br />';
		Dom.add(newel, dest);
		Event.add(newel_control, 'click', function(e) { Dom.remove(this); Dom.remove(newel) }); 
	},
	/* addit2: add - version B */
	/* show the text + other elements + set the variable */

	addit2: function(txt, dest) {
//	  var count = 0;
	  var newel_control = document.createElement('span');
	  newel_control.innerHTML = '[delete]';
	  Dom.add(newel_control, dest);
	  var newel = document.createElement('span');
//	  alert('add new span element with: '+txt+' to dest: '+dest);
//	  newel.innerHTML = txt + '<br /><input type="hidden" name="'+dest+'" value="'+txt+'">';

	  newel.innerHTML =
		  txt + '<input type="hidden" name="'+dest+'" value="'+txt+'">' +
		  '&nbsp;' +
		  '<span style="background-color: lightblue; align: right">' +
		  'Training completed: ' +
		  '&nbsp;' +
		  'Yes<input type="radio" name="training_'+count+'" value="Yes">' +
		  'No<input type="radio" name="training_'+count+'" value="No">' +
		  '<input type="text" class="date" name="startdate_'+count+'"></input>' +
		  '<input type="text" class="date" name="enddate_'+count+'"></input>' +
		  '</span>' +
		  '<br />';

	  Dom.add(newel, dest);
	  Event.add(newel, 'click', function(e) { Dom.remove(this); });
	  set_start_date("startdate_"+count);
	  count ++;
//	  i ++;
	},
	// addit3 -- attempt same thing as addit2 but using a table for formatting
	// ok. now that we got proof of concept...we are changing this and in case it gets confusing I will explain
	// it now.
	// 	the parameter passed will be the prefix tag for that GROUP of access responsibility requests.
	// 	eg. zzzaccess_X {where X is a unique number for that group (actually, it's just a row number ... at the group level)}
	// 	Then, since we want each variable to be unique, we will concat the prefix tag with the current row tag as
	// 	maintained internally here.
	// 		Eg. the finally set of data for a particular row will a set something like:
	// 			zzzaccess_1_2_responsibilty
	// 			zzzaccess_1_2_training_mm
	// 			zzzaccess_1_2_training_yy
	// 			zzzaccess_1_2_startdate
	// 			zzzaccess_1_2_enddate
	// 		where in this case, we can see that the is the first "group" and the second "row" generated by addit()
	
//	addit3: function(txt, dest) 
	addit3: function(txt, group) {
		if (txt.charAt(0) == '-') { // Anything starting with '-' is a comment/title/section heading
			return;
		}
	  var dest = 'DOM' + group;
	  var prefix = 'zzzaccess_' + group + '_' + count + '_';
	if (heading[group] == 0) {
		  var newel_heading = document.createElement('span');
		  newel_heading.innerHTML = "<table border='1' width='100%'><tr><th align='left' width='55%'>Responsibility</th><th align='left' width='20%'>Training Completed<br />(if applicable)</th><th width='25%' align='left'>Start Date-End Date</th></tr></table>";
		  Dom.add(newel_heading, dest);

		heading[group] = 1;
	}
	  var newel_control = document.createElement('span');
	  newel_control.innerHTML = '<font color="red">[delete]</font>&nbsp;';
	  Dom.add(newel_control, dest);
	var newel = document.createElement('span');
	newel.innerHTML = "";
	  newel.innerHTML += '<input type="hidden" name="rlist" value="'+group+'_'+count+'">';

	  newel.innerHTML += "<table width='100%' id=\"resp\"><tr><td width='55%'>" +
		txt + '<input type="hidden" name="'+prefix+"responsibility"+'" value="'+txt+'">' +
	  "</td><td width='20%'>" + 
		'<input id="resp" type="text" class="mymm" maxlength="2" name="'+prefix+'training_mm" title="MM">' +
		'/' +
		'<input id="resp" type="text" class="myyy" maxlength="2" name="'+prefix+'training_yy" title="YY">' +
		'&nbsp;(MM/YY)' +
	  "</td><td width='25%'>" +
		'<input id="resp" type="text" class="mydate" name="'+prefix+'startdate" title="DD-MMM-YYYY"></input>' +
		'-' +
		'<input id="resp" type="text" class="mydate" name="'+prefix+'enddate" title="DD-MMM-YYYY"></input>' +
	  "</td></tr></table>";

	  Dom.add(newel, dest);
	  Event.add(newel_control, 'click', function(e) { set_as_deleted(prefix+'responsibility'); Dom.remove(this); Dom.remove(newel); }); 
//	  Event.add(newel_control, 'click', function(e) { Dom.remove(this); Dom.remove(newel); }); 
	  set_start_date(prefix+"startdate");
	  count ++;
	},
 	resetGroupCount: function() {
	  count = 0;
	},
	remove: function(el) {
		var el = this.get(el);
		el.parentNode.removeChild(el);
	}
      };

	var Event = {
		add: function() {
			if (window.addEventListener) {
				return function(el, type, fn) {
				Dom.get(el).addEventListener(type, fn, false);
				};
			} else if (window.attachEvent) {
				return function(el, type, fn) {
					var f = function() {
						fn.call(Dom.get(el), window.event);
					};
					Dom.get(el).attachEvent('on' + type, f);
				};
			}
		}()
	};

var formPath = 'window.document.forms[0].';
function set_start_date(el) {
    // set the default start date to today's date
    var month = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
    var nowDate = new Date();
    nowDate = nowDate.getDate() + "-" + month[nowDate.getMonth()] + "-" + nowDate.getFullYear();
    var l_start_date = eval(formPath + el );

    l_start_date.value = nowDate;
};

function set_as_deleted(el) {
	var field = eval(formPath + el);
	field.value = "deleted";
};