var contentDivs = Array("creative","areas","technical",
		"education","cc","lma","uotf","ii","om","tp","ex","alt","bof","fsc","ae");
var remarks = new Object();
var originals = new Object();
var hovered = '';
var editBox = '';  // html to show to edit remark
var addBox = '';   // .. to add remark
var remarkBox = '';
var editInProgress = false;
var letterIsOut = true;

$(document).ready(function() {
    for ( var i=0; i<contentDivs.length; i++)
    { var id = contentDivs[i];
      var div = $('#'+id);
      originals[id] = div.html();
      remarks[id] = '';
      div.hover( function (event) 
	{ 
	   hoverFunction( event, this.id);
	});
     }      
     editBox = $('#xxxxxRemarkEdit').html();
     addBox = $('#xxxxxRemarkAdd').html();
  });

function hoverFunction( event, id)
{
  if ( hovered == id)
    return;  // why to repeat
  if ( editInProgress)
    return;
  if ( letterIsOut)
    return;
  resetHovers();
  hovered = id;
  var div = $('#' + id);
  var action = ( remarks[ id] == '') ? 'Add' : 'Edit';
  var topstyle = attribute("style",'top:' + (div.offset().top + div.height() -56) + 'px ');
  div.html( div.html() + '<div ' + attribute("class", "remarkButton") + topstyle + '>' 
			+ '<a ' + attribute("href","JavaScript:editRemark('" + id + "')") + '>'
			+ action + '<br>Note</a></div>'
			+ '<div' + attribute("class","question") + topstyle + '><a ' 
					+ attribute("href","JavaScript:flipDearH(" + (div.offset().top - 150)  +  ")") 
					+ '>?</a></div>'
			);
}

function resetHovers()
{
  for ( var i=0; i< contentDivs.length; i++)
  {
    drawRemark( contentDivs[i]);
  }
  hovered = '';
}

function editRemark( id)  // grab the "template" and fill in the id 
{
  editInProgress = true;
  closeDear();
  var div=$('#' + id);
  var editBoxThis = (remarks[id] == '') ? addBox : editBox;
  editBoxThis = editBoxThis.replace('xxyydontdothis', remarks[id]);
  editBoxThis = editBoxThis.replace('xxxxx',id,"g");
  editBoxThis = editBoxThis.replace('xxxxx',id,"g");
  editBoxThis = editBoxThis.replace('xxxxx',id,"g");
  editBoxThis = editBoxThis.replace('xxxxx',id,"g");
  editBoxThis = editBoxThis.replace('yyyyy',id,"g");
  editBoxThis = editBoxThis.replace('yyyyy',id,"g");
  div.html( originals[id] + editBoxThis);
  document.getElementById( id + "Textarea").focus();
}

function drawRemark( id)
{
	var div=$('#' + id);
	var remarkTxt = '';
	if ( remarks[id] != '')
		remarkTxt = '<div class="remark">' + remarks[id] + '</div>';
	div.html( originals[id] + remarkTxt);
	editInProgress = false;
	hovered = '';
}

function saveRemark(id)
{
	var remark = document.getElementById(id + 'Textarea').value;
	if ( remark == '')
		alert('Your note is empty.');
	remarks[id] = remark;
	drawRemark(id);
}

function deleteRemark(id)
{
	remarks[id] = '';
	drawRemark(id);
}

function adjustLetterShadow()
{
	$('#noprintLetterShadow').height($('#noprintLetter').height());
}

function closeDear()
{
	$('#noprintLetterShadow').hide();
	$('#noprintLetter').hide();
	letterIsOut = false;
}


function flipDearH( toppx)
{
	if (letterIsOut)
		closeDear()
	else
		openDearH( toppx);
}

function openDearH(toppx)
{
	$('#noprintLetterShadow').css({'top' : toppx});
	$('#noprintLetter').css({'top': (toppx - 10)});
	openDear();
}

function openDear()
{
	$('#noprintLetterShadow').show();
	$('#noprintLetter').show();
	letterIsOut = true;
}

function toggleDiv( divId)
{
  $('#'+divId).toggle('slow');
}

function openAll()  // all work history divs that is
{
  $('#joblist div').show('slow');
}

function attribute( name, value)
{
  return ' ' + name + '="' + value + '" ';
}


// printer friendly

function pf()
{
  if ( editInProgress)
  {
    alert('Please, finish your note editing first');
    return;
  }
  resetHovers();
  var pf = window.open('', 'pf',"width=780,height=750,toolbar=yes,menubar=yes,scrollbars=yes");
  var cont= $('#wrapInner').html();
  pf.document.open();
  pf.document.write('<link rel="stylesheet" type="text/css" href="css/styles.css" />');
  pf.document.write('<div id="printed" style="font-family:verdana,arial;font-size:0.8em">');
  pf.document.write(cont);
  pf.document.write('</div>');
  pf.document.close();
  var divs=pf.document.getElementsByTagName('div');
  setVisibility(divs);
  var spans=pf.document.getElementsByTagName('span');
  setVisibility(spans);
  var ps = pf.document.getElementsByTagName('p');
  setVisibility(ps);
}

function setVisibility( divs) // helper for printer friendly
{
  for ( var i=0; i<divs.length; i++)
  {
    divs[i].style.display = '';
    var id=divs[i].id;
    if ( id)
    {
      if ( id.indexOf('noprint') == 0)  // the id indicates that they shouldn't be included
        divs[i].style.display = 'none';
    }
  }
}