var headerImages = [
  'bay_bridge.jpg',
  'beach.jpg',
  'bird.jpg',
  'boat.jpg',
  'gg_bridge.jpg',
  'gg_bridge_haze.jpg',
  'skyline.jpg',
  'twin_peak.jpg'
];

var Y = YUI().use('*');

Y.on('domready', function() {

  /* On Safari, for some reason, the DOM isn't quite ready which
   * causes us to calculate the wrong regions for the menu items,
   * messing up the layout.  Adding a short delay fixes this. */
  Y.later(0, null, function() {

    var headerImageIndex = Math.floor(Math.random() * headerImages.length);
    var headerStyle = 'url(headers/' + headerImages[headerImageIndex] + ')';
    Y.one('#header').setStyle('backgroundImage', headerStyle);

    /* make the rightmost menu section fill the space */
    var imageRightEdge = Y.one('#header').get('region').right;
    var rightFillerEl = Y.one('#menuRightFiller');
    var rightFillerRegion = rightFillerEl.get('region');
    rightFillerEl.setStyle(
        'width', (imageRightEdge - rightFillerRegion.left) + 'px');

    /* highlight the current page and make the link inactive */
    var currentMenuItem = Y.one('#' + currentPage + 'Link');
    currentMenuItem.addClass('current').removeClass('link');
    var currentLink = currentMenuItem.one('a');
    Y.on('click', function(e) { e.halt(); }, currentLink);

    /* make the menu visible */
    Y.one('#menu').setStyle('visibility', 'visible');

    /* style hacks for IE6: (1) use a gif instead of a transparent png
     * and (2) shrink the footer */
    if (Y.UA.ie == 6) {
      Y.all('.menuItem').setStyle(
          'backgroundImage', 'url(ui_elements/menu_background_ie6.gif)');
      Y.one('.menuItem.current').setStyle('backgroundImage', 'none');
      Y.one('#footer').setStyle('lineHeight', '0');
    }

  });
});