function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
function setValue(id, value) {
document.getElementById(id).value = value;
}
function regular(){
setVisibility('contextuallinkspreview', 'none');
setVisibility('contextuallink1', 'none');
setVisibility('contextuallink2', 'none');
setVisibility('contextuallink3', 'none');
setVisibility('contextualtitle1', 'none');
setVisibility('contextualtitle2', 'none');
setVisibility('contextualtitle3', 'none');
setVisibility('contextualdescription1', 'none');
setVisibility('contextualdescription2', 'none');
setVisibility('contextualdescription3', 'none');
setVisibility('contextualdescription4', 'none');

setValue('URL1', '');
setValue('URL2', '');
setValue('URL3', '');
setValue('TITLE1', '');
setValue('TITLE2', '');
setValue('TITLE3', '');
setValue('DESCRIPTION1', '');
setValue('DESCRIPTION2', '');
setValue('DESCRIPTION3', '');
setValue('DESCRIPTION4', '');
setValue('contextual-description', '');
}
function featured(){
setVisibility('contextuallinkspreview', '');
setVisibility('contextuallink1', '');
setVisibility('contextuallink2', '');
setVisibility('contextuallink3', '');
setVisibility('contextualtitle1', '');
setVisibility('contextualtitle2', '');
setVisibility('contextualtitle3', '');
setVisibility('contextualdescription1', '');
setVisibility('contextualdescription2', '');
setVisibility('contextualdescription3', '');
setVisibility('contextualdescription4', '');
}
function reciprocal(){
setVisibility('contextuallinkspreview', 'none');
setVisibility('contextuallink1', 'none');
setVisibility('contextuallink2', 'none');
setVisibility('contextuallink3', 'none');
setVisibility('contextualtitle1', 'none');
setVisibility('contextualtitle2', 'none');
setVisibility('contextualtitle3', 'none');
setVisibility('contextualdescription1', 'none');
setVisibility('contextualdescription2', 'none');
setVisibility('contextualdescription3', 'none');
setVisibility('contextualdescription4', 'none');

setValue('URL1', 'none');
setValue('URL2', 'none');
setValue('URL3', 'none');
setValue('TITLE1', 'none');
setValue('TITLE2', 'none');
setValue('TITLE3', 'none');
setValue('DESCRIPTION1', 'none');
setValue('DESCRIPTION2', 'none');
setValue('DESCRIPTION3', 'none');
setValue('DESCRIPTION4', 'none');
setValue('contextual-description', '');
}


function $(id) {
    return document.getElementById(id) ;
}
function updatePreview() {
    var result = "";

	var part1 = "";
	if ($('DESCRIPTION1').value.length > 0) {
        part1 = $('DESCRIPTION1').value;
    }
	
    var part2 = "";
    if ($('TITLE1').value.length > 0) {
        part2 = " <a href=\"" + $('URL1').value +
       "\" target=\"_blank\">" + $('TITLE1').value + "</a> ";
    }
	
    var part3 = "";
   if ($('DESCRIPTION2').value.length > 0) {
        part3 = $('DESCRIPTION2').value;
    }	

    var part4 = "";
    if ($('TITLE2').value.length > 0) {
        part4 = " <a href=\"" + $('URL2').value +
       "\" target=\"_blank\">" + $('TITLE2').value + "</a> ";
    }

	var part5 = "";
	if ($('DESCRIPTION3').value.length > 0) {
        part5 = $('DESCRIPTION3').value;
    }

    var part6 = "";
    if ($('TITLE3').value.length > 0) {
        part6 = " <a href=\"" + $('URL3').value +
        "\" target=\"_blank\">" + $('TITLE3').value + "</a> ";
    }
	
   var part7 = "";
        if ($('DESCRIPTION4').value.length > 0) {
        part7 = $('DESCRIPTION4').value;
    }	
	
    part8 = "";
   if (part1.length > 0 || part2.length > 0 || 
       part3.length > 0 || part4.length > 0 || 
       part5.length > 0 || part6.length > 0 || 
       part7.length > 0) {
  	part8 = ".";
   }


   result =  part1 + part2 + part3 + part4 +
               part5 + part6 + part7 + part8;

    $('contextual-description').innerHTML = result;
}



function updateField(fieldName, onKeyUp) {
    var elem = $(fieldName) ;
    elem.onkeyup = onKeyUp ;
    elem.onclick = onKeyUp ;
}

function updateContextualPreview() {

    var triggerUpdate = 
          function()  { updatePreview();  } ;

    for(var i=1;i<4;i++) {
        updateField("URL"+i, triggerUpdate) ;
        updateField("TITLE"+i, triggerUpdate) ;
        updateField("DESCRIPTION"+i, triggerUpdate) ;
    }
    updateField("DESCRIPTION"+4, triggerUpdate) ;
}