var myMenuItems = 
  [
   {
     title : 'Intro',
     contentUrl : '/content/intro.html' ,
     content : null
   },
   {
     title : 'Photos',
     contentUrl : '/content/photos.html' ,
     content : null
   },
   {
     title : 'C.V.',
     contentUrl : '/content/cv.html' ,
     content : null
   },
   {
     title : 'About',
     contentUrl : '/content/about.html' ,
     content : null
     //content : '<h2>About</h2><p>Here is some cool stuff about me!</p>'
   }
  ];

function setAllWrapperHeight() {
  $('#allWrapper').css('height','0px');
  $('#allWrapper').css('height',$.getDocHeight()+'px');
}

var contentPane = new ContentPane();  
var menu = new Menu(contentPane);

function loadContent() {
  for (var i=0; i<myMenuItems.length; i++) {
    menu.newItem(
      {
        title : myMenuItems[i].title ,
        contentUrl : myMenuItems[i].contentUrl ,
        content : myMenuItems[i].content ,
        parentElement : $('#allWrapper')[0] ,
        rBoxType : 'white40'
      }
    );
  }
}

// IE7 will crash on this, hence the browser check:
if (navigator.appVersion.indexOf('MSIE')<0) {
  $(window).resize(function(){
    setAllWrapperHeight();
  });
}

$(document).ready(function(){
  $('body').append('<div id="allWrapper"></div>');
  loadContent();
  $('#allWrapper').append('<div id="menuContentSeparator"></div>');
  contentPane.init({menuItemNo:0, parentElement:$('#allWrapper')[0]});
  $('.menuItem').wrapAll('<div id="menuItemWrapper"></div>');
  
  setAllWrapperHeight();
  $(contentPane.contentElement).bind('newContent',function(){
    setAllWrapperHeight();
  });
});