var MS_TITLE = 0;
var MS_FROMY = 1;
var MS_FROMM = 2;
var MS_FROMD = 3;
var MS_TOY   = 4;
var MS_TOM   = 5;
var MS_TOD   = 6;
var MS_WEEKS = 7;
var MS_NOTES = 8;
var MS_DONE  = 9;
var MS_CMPN  = 10;

var milestones_progress = [
  ['Schematic Design',                   2007,  1,  2, 2007,  3, 13, 10, 
   '', true,  'Completed on 2007/3/22'],
  ['Owner\'s Review',                    2007,  3, 13, 2007,  3, 27,  2, 
   '', false, ''],
  ['Design Development',                 2007,  3, 27, 2007,  6, 19, 12, 
   'Preliminary site plan to begin and submit to P.G. County', false],
  ['Owner\'s Review',                    2007,  6, 19, 2007,  7,  3,  2, 
   '', false, ''],
  ['Construction Documents',             2007,  7,  3, 2007, 10, 23, 16, 
   '', false, ''],
  ['Owner\'s Review',                    2007, 10, 23, 2007, 11,  6,  2, 
   'Building permit filing', false],
  ['Bidding and Negotiation',            2007, 11,  6, 2007, 12,  4,  4, 
   '', false, ''],
  ['Construction Contract Finalization', 2007, 12,  4, 2008,  1,  2,  4, 
   '', false, ''],
  ['Construction',                       2008,  2,  4, 2008, 12, 15, 45, 
   'Optimistically estimated', false, '']
];
var milestones_last_updated = [ 2007, 3, 22 ];

function progresstable(id, h, progress, scaled) {
  var oDiv = document.getElementById(id);
  if (!oDiv) return;
  var total_weeks = 0;
  if (scaled) {
    for (i = 0; i < progress.length; i++) {
      total_weeks += progress[i][MS_WEEKS];
    }
  }
  var current_milestone = 0;
  var html = [];
  html.push('<table style="border:1px solid lightgrey">');
  for (var i = 0; i < progress.length; i++) {
    html.push('<tr><td valign="top" style="height:');
    html.push( (scaled? Math.ceil(progress[i][MS_WEEKS]/total_weeks*h) : '50') );
    html.push('px" class="');
    html.push( (progress[i][MS_DONE]? 'timeline-reached' : 'timeline-notreach') );
    html.push('">');
    html.push(progress[i][MS_TITLE]);
    html.push('</td><td valign="top" class="timeline-dates">');
    html.push( milestone_fromdate(progress[i]) );
    html.push(' - ');
    html.push( milestone_todate(progress[i]) );
    html.push('</td><td valign="top" class="timeline-notes">');
    html.push(progress[i][MS_NOTES]);
    if ( progress[i][MS_CMPN] != '' ) {
      html.push('<div id="timeline-completion-notes">');
      html.push(progress[i][MS_CMPN]);
      html.push('</div>');
    }
    html.push('</td></tr>');
  }
  html.push('</table>');
  oDiv.innerHTML = html.join('');
  oDiv = document.getElementById('timelinelastupdated');
  if (oDiv) {
    oDiv.innerHTML = 'Updated on '+milestones_lastupdateddate();
  }
}

function milestones(id, bar_w, bar_h, progress) {
  var oDiv = document.getElementById(id);
  if (!oDiv) return;
  var total_weeks = 0;
  for (i = 0; i < progress.length; i++) {
    total_weeks += progress[i][MS_WEEKS];
  }
  var current_milestone = 0;
  var html = [];
  html.push('<div style="margin:0.5em;padding:0;white-space:nowrap">');
  for (i = 0; i < progress.length; i++) {
    html.push('<span style="width:');
    html.push(Math.ceil(progress[i][MS_WEEKS]/total_weeks*bar_w));
    html.push('px;height:');
    html.push(bar_h);
    html.push('px" class="');
    html.push( (progress[i][MS_DONE]? 'milestone-reached' : 'milestone-notreach') );
    html.push('" onclick="milestone_details(\'');
    html.push(id);
    html.push('\',');
    html.push(i);
    html.push(')" title="');
    html.push(progress[i][MS_TITLE]);
    html.push('">&nbsp;</span>');
    if ( progress[i][MS_DONE] ) current_milestone = i;
  }
  html.push('</div><div id="');
  html.push(id);
  html.push('-details" style="margin:0.5em;padding:5px"></div>');
  oDiv.innerHTML = html.join('');
  oDiv.childNodes[1].style.width = bar_w + 'px';
  
  milestone_details(id, current_milestone);
}

function milestone_fromdate(progress) {
  return progress[MS_FROMM]+'/'+progress[MS_FROMD]+'/'+progress[MS_FROMY];
}

function milestone_todate(progress) {
  return progress[MS_TOM]+'/'+progress[MS_TOD]+'/'+progress[MS_TOY];
}

function milestones_lastupdateddate() {
  return milestones_last_updated[1]+'/'+milestones_last_updated[2]+'/'+milestones_last_updated[0];
}

function milestone_details(id, i) {
  var oDiv = document.getElementById(id+'-details');
  if (!oDiv ) return;
  var html = [];
  html.push('<div id="milestone-title">');
  html.push(milestones_progress[i][MS_TITLE]);
  html.push('</div><div id="milestone-dates">');
  html.push( milestone_fromdate(milestones_progress[i]) );
  html.push('-');
  html.push( milestone_todate(milestones_progress[i]) );
  html.push(' (');
  html.push( milestones_progress[i][MS_WEEKS] );
  html.push(' weeks)</div><div id="milestone-notes">');
  html.push(milestones_progress[i][MS_NOTES]);
  html.push('&nbsp;</div>');
  if ( milestones_progress[i][MS_CMPN] != '' ) {
    html.push('<div id="milestone-completion-notes">');
    html.push(milestones_progress[i][MS_CMPN]);
    html.push('</div>');
  }
  oDiv.innerHTML = html.join('');
}

function progressbar(id, min, max, value, minText, maxText, valueText, link, linkTooltip, size) {
  var oDiv = document.getElementById(id);
  if (!oDiv) return;
  var html = '<div id="'+id+'-graphics">';
  if ( link ) html += '<a href="' + link + '" title="' + linkTooltip + '">';
  var imgH = 300;
  var imgW = 100;
  html += '<img id="'+id+'-graphics" src="thermometer.gif" hspace="0" ' +
    'vspace="0" border="0" height="'+(imgH*size/100)+'" width="'+(imgW*size/100)+'" alt="'+linkTooltip+'"/>';
  if ( link ) html += '</a>';
  html += '</div><div id="'+id+'-progress"></div>';
  html += '</div><div id="'+id+'-min"></div>';
  html += '</div><div id="'+id+'-max"></div>';
  html += '</div><div id="'+id+'-value"></div>';
  oDiv.innerHTML = html;
  var img = document.getElementById(id+'-graphics');
  oDiv.style.position = 'relative';
  oDiv.style.backgroundColor = '#990000';
  var oImg = oDiv.childNodes[0];
  var oProgress = oDiv.childNodes[1];
  var oMin = oDiv.childNodes[2];
  var oMax = oDiv.childNodes[3];
  var oValue = oDiv.childNodes[4];
  oImg.style.position = 'absolute';
  oImg.style.top = '0px';
  oImg.style.left = '0px';
  oImg.style.zIndex = 3;
  oProgress.style.fontSize = 0;
  oProgress.style.width = (imgW*size/100)+'px';
  oProgress.style.height = calculate_progressbar(min, max, value, size) + 'px';
  oProgress.style.backgroundColor = '#444444';
  oProgress.style.position = 'absolute';
  oProgress.style.top = '0px';
  oProgress.style.left = '0px';
  oProgress.style.zIndex = 2;
  oMin.style.position = 'absolute';
  oMin.style.top = (240*size/100)+'px';
  oMin.style.left = (80*size/100)+'px';
  oMin.style.zIndex = 4;
  oMin.style.fontSize = (Math.ceil(12*size/100))+'pt';
  oMin.innerHTML = minText;
  oMax.style.position = 'absolute';
  oMax.style.top = (10*size/100)+'px';
  oMax.style.left = (80*size/100)+'px';
  oMax.style.zIndex = 4;
  oMax.style.fontSize = (Math.ceil(12*size/100))+'pt';
  oMax.innerHTML = maxText;
  oValue.style.position = 'absolute';
  oValue.style.left = (80*size/100)+'px';
  oValue.style.zIndex = 4;
  oValue.style.fontSize = (Math.ceil(12*size/100))+'pt';
  oValue.style.backgroundColor = '#ffff99';
  oValue.innerHTML = valueText;
  oValue.style.top = (parseInt(oProgress.style.height) - (parseInt(oValue.offsetHeight)/2))+'px';
  oDiv.style.width = (imgW*size/100)+'px';
  oDiv.style.height = (imgH*size/100)+'px';
}

function calculate_progressbar(min, max, value,size) {
  var minH = 252 * size / 100;
  var maxH = 9 * size / 100;

  return parseInt((minH - maxH) * (1 - ((value - min)/(max - min))) + maxH);
}