// Marg Menu!

var menuItems = [
  ['About', 'about.html'],
  ['Interaction', 'interaction.html'],
  ['Design', 'design.html'],
  ['Freelance', 'freelance.html'],
  ['Resume', 'resume.html'],
  ['Contact', 'contact.html']
];

var isInsideMenu = false;
var menuCloseDelay = 650;
var arrowUpImage = 'images/arrow_up.gif';
var arrowDownImage = 'images/arrow_down.gif';
preloadMenuImages();

function initMargMenu(visible)
{
  writeMenuHtml();
  
  var menu = document.getElementById('main_menu');
  var menuBg = document.getElementById('main_menu_bg');
  
  for (var i = 0; i < menu.rows.length; i++) {
    menu.rows[i].style.display   = visible ? '' : 'none';
    menuBg.rows[i].style.display = visible ? '' : 'none';
    menu.rows[i].onmouseover = function() { setMenuItemHighlight(this, true);  isInsideMenu = true;  }
    menu.rows[i].onmouseout  = function() { setMenuItemHighlight(this, false); isInsideMenu = false; closeMenuAfterLeaving(); }
  }
    
  var menuButton = document.getElementById('main_menu_button');
  menuButton.src = visible ? arrowUpImage : arrowDownImage;
  menuButton.onmouseover = function() { isInsideMenu = true; setMenuVisible(true); }
  menuButton.onmouseout = function()  { isInsideMenu = false; closeMenuAfterLeaving(); }
  
  var menuButtonBg = document.getElementById('main_menu_button_bg');
  menuButtonBg.onmouseover = menuButton.onmouseover;
  menuButtonBg.onmouseout = menuButton.onmouseout;
}


function preloadMenuImages()
{
  var img = new Image();
  img.src = arrowUpImage;
  img.src = arrowDownImage;
}


function writeMenuHtml()
{
  var html =
    '<table id="main_menu_button_bg">' +
      '<tr><td>&nbsp;</td></tr>' +
    '</table>'+
    '<img id="main_menu_button" src="images/arrow_up.gif" />' + 
    '<table id="main_menu_bg" cellspacing="0">';
    
  for (var i = 0; i < menuItems.length; i++) {
    html += '<tr><td>&nbsp;</td></tr>';
  }
  
  html +=
    '</table>' +
    '<table id="main_menu" cellspacing="0">';

  for (var i = 0; i < menuItems.length; i++) {
    html += '<tr onclick="location.href=\'' + menuItems[i][1] + '\';"><td>' +
            menuItems[i][0] + '</td></tr>';
  }

  html += '</table>';
  
  document.write(html);
}


function writeFooterHtml()
{
  var html = 
    '<div id="footer_links">' +
    '<a href="http://www.ebay.com">eBay!</a> | ' +
    '<a href="http://www.cmu.edu/">Carnegie Mellon University</a> | ' +
    '<a href="http://www.hcii.cmu.edu/Academics/Masters/masters.html">Masters in Human-Computer Interaction</a> | ' +
    '<a href="http://www.design.cmu.edu/show_program.php?s=1&t=3">BFA in Communication Design</a> | ' +
    '<a href="resume.html">RESUME</a> | ' +
    '<a href="contact.html">Contact</a>' +
  '</div>';
  document.write(html);
}


function setMenuVisible(visibility)
{
  document.getElementById('main_menu_button').src = visibility ? arrowUpImage : arrowDownImage;
  setTimeout('setMenuRowVisible(0, ' + visibility + ')', 20);
}


function setMenuRowVisible(rowNum, visibility)
{
  var menu = document.getElementById('main_menu');
  var menuBg = document.getElementById('main_menu_bg');
  
  if (menu.rows[rowNum]) {
    var newSetting = visibility ? '' : 'none';
    menu.rows[rowNum].style.display = newSetting;
    menuBg.rows[rowNum].style.display = newSetting;      
    setTimeout('setMenuRowVisible(' + (rowNum+1) + ', ' + visibility + ')', 20);
  }  
}


function setMenuItemHighlight(item, highlight)
{
  item.style.background = highlight ? '#f8f7ef' : '';
}


function closeMenuAfterLeaving()
{
  setTimeout('if (!isInsideMenu) { setMenuVisible(false); }', menuCloseDelay);
}