var calendar_objs = new Array(0);

function addDateElement() {
  var ni = document.getElementById('listing_dates');
  var numi = document.getElementById('num_ld');

  if ( !numi ) {
    return;
  }  

  var num = (document.getElementById('num_ld').value -1)+ 2;
  numi.value = num;
  var newdiv = document.createElement('div');
  var divIdName = 'ld'+num;

  // Set the element names so it is easy to add to the innerHTML
  var start_id = divIdName + '_start';
  var end_id = divIdName + '_end';
  var start_id_span = start_id + '_span';
  var end_id_span = end_id + '_span';
  var cal_start_name = divIdName + '_cal_start';
  var cal_end_name = divIdName + '_cal_end';
  var start_num = calendar_objs.length;
  var end_num = start_num+1;

  newdiv.setAttribute('id',divIdName);
  newdiv.innerHTML = ' <a href=\"javascript:;\" onClick=\"removeElement(&quot;' + divIdName + '&quot;)\">Remove</a>&nbsp&nbsp' +
    ' <span id=\"' + start_id_span + '\">Start Date:</span> <input maxlength=\"10\" size=\"10\" id=\"' + start_id + '\" name=\"' + start_id + '\" type=\"textfield\" /> ' +
    ' <input type=\"button\" value=\"Calendar\" onclick=\"calendar_objs[' + start_num + '].toggle()\" />&nbsp&nbsp' +
    ' <span id=\"' + end_id_span + '\">End Date:</span> <input maxlength=\"10\" size=\"10\" id=\"' + end_id + '\" name=\"' + end_id + '\" type=\"textfield\" /> ' +
    ' <input type=\"button\" value=\"Calendar\" onclick=\"calendar_objs[' + end_num + '].toggle()\" />';
  ni.appendChild(newdiv);

  calendar_objs.push( new Epoch( cal_start_name,'popup',document.getElementById(start_id)) );
  calendar_objs.push( new Epoch( cal_end_name,'popup',document.getElementById(end_id)) );
}

function addImageElement(num,type,val) {
  var ni = document.getElementById('listing_images');

  if ( !ni ) {
    return;
  }

  var divIdName = 'listing_pic_div_'+num;
  var img_id = 'listing_pic_'+num;
  var checkDiv = document.getElementById(divIdName);
  var newdiv;
  if ( checkDiv ) {
    newdiv = checkDiv;
  } else {
    newdiv = document.createElement('div');
  }

  newdiv.setAttribute('id',divIdName);

  if ( type == 'file' ) {
    newdiv.innerHTML = '<input type=\"file\" size=\"50\" maxlength=\"255\" accept=\"image/*\" name=\"' + img_id + '\" id=\"' + img_id + '" />';
  } else if ( type == 'text' ) {
    newdiv.innerHTML = ' <a href=\"javascript:;\" onClick=\"clearElement(&quot;' + divIdName + '&quot;)\">Remove</a>&nbsp&nbsp' +
      '<input type=\"text\" size=\"50\" maxlength=\"255\" name=\"' + img_id + '_val\" id=\"' + img_id + '" value=\"' + val + '\" />' + 
      '<input type=\"hidden\" name=\"' + img_id + '\" value=\"' + val + '\" />';
  } else {
    return -1;
  }

  if ( newdiv != checkDiv ) {
    ni.appendChild(newdiv);
  }
}

function removeElement(divNum) {
  var olddiv = document.getElementById(divNum);

  if ( olddiv.parentNode.id == 'listing_dates' ) {
    var num = divNum.substring(2);
    calendar_objs.splice(num,num+1);
  }

  olddiv.parentNode.removeChild(olddiv);
}

function clearElement(elName) {
  var num = elName.substring(16);
  addImageElement(num,'file','');  
}