$(function () {
  var thumbnail = $('#thumbnail li a');
  thumbnail.click(function(event){
    event.preventDefault();
    var clickHref = $(this).attr('href');
    $('<img>').attr('src', clickHref).bind('load', function(){
      var htmlElement = $('html');

      var htmlHeight = htmlElement.height();
      var htmlWidth = htmlElement.width();
      htmlElement.css('height', htmlHeight + 'px');
      htmlElement.css('width', htmlWidth + 'px');

      htmlElement.css(function(){

//        width: htmlWidth + 'px'
//        height: htmlHeight + 'px'
      });
      
     // 'height', htmlHeight + 'px');
      
      var originalImageSize = this.naturalWidth;
      $('body').append('<div id="hmsnBox"><div id="hmsnBoxOuter" style="height: ' + htmlHeight + 'px;"></div><p id="hmsnBoxInner" style="width: ' + originalImageSize + 'px"><img src="' + clickHref + '" alt="" /><span id="hmsnBoxClose">Close</span></p></div>');  
      $('#hmsnBoxClose').click(function(){
        $('#hmsnBox').remove();
      });
    });
  });
});