function generateNewElement(portletContext, namespace) {
  var referenceElement = portletContext.one('.reference-target-page');
  clonedReferenceElement = referenceElement.clone();
  clonedReferenceElement.one('label').setAttribute('for', 'targetpage');
  clonedReferenceElement.one('select').setAttrs({
    'id': namespace + 'targetpage',
    'name': 'targetpage',
  });
  return clonedReferenceElement;
}

function toggleElementVisibility(elementId, show) {
  if (show) {
    document.getElementById(elementId).style.display = 'block';
  }
  else {
    document.getElementById(elementId).style.display = 'none';
  }
}

function validation(namespace) {
  var A = AUI().use('aui-node');
  var targetPortlets = A.all('#' + namespace + 'targetpage');
  var targetPages = [];
  var x = 0;
  var isSamePage;
  var isInvalidPage;

  targetPortlets.each(function(val) {
    targetPages[x] = val.val();
    x++;
  });
  if (targetPages.length > 0) {
    for (i = 0; i < targetPages.length; i++) {
      isInvalidPage = targetPages[i] === -1;
      toggleElementVisibility('invalid-select', isInvalidPage);
      if (isInvalidPage) {
        return;
      }

      for (j = i + 1; j < targetPages.length; j++) {
        isSamePage = (targetPages[i] === targetPages[j]) && (i !== j);
        toggleElementVisibility('same-page', isSamePage);
        if (isSamePage) {
          return;
        }
      }
    }
  }
  else {
    toggleElementVisibility('invalid-select', false);
    toggleElementVisibility('same-page', false);
  }
  return targetPages;
}

function addOptions(namespace) {
  AUI().use('aui-node', function(A) {
    var portlet = A.one('#' + namespace);
    var newElement = generateNewElement(portlet, namespace);
    portlet.one('.optionsList').append(newElement.show());
  });
}

function submitOptions(namespace) {
  AUI().use('aui-node', function(A) {
    var form = A.one('#' + namespace + 'fm');
    var targetPages = validation(namespace);
    var targetPageElement;

    if (!targetPages) {
      return;
    }
    targetPageElement = A.one('#' + namespace + 'targetpagearray');
    targetPageElement.set('value', targetPages);
    form.submit();
  });
}

function removeOptions(namespace) {
  AUI().use('aui-node', function(A) {
    var targetPortlets = A.all('#' + namespace + 'targetpage');
    targetPortlets.last().ancestor().remove();
    validation(namespace);
  });
}