function CreateGallery()
{
  $('.gallery').click(function()
  {
    var Start = $(this).attr('alt').substr(0, $(this).attr('alt').indexOf('|'));
    var Name = $(this).attr('alt').substr($(this).attr('alt').indexOf('|') + 1);

      var Overlay = $('<div></div>').appendTo(document.body).addClass('overlay').css({
        'opacity': 0,
        'height': $(document).height(),
        'width': $(window).width(),
        'z-index': 1
      }).animate({ 'opacity': 0.7 }, 200);
      
    var Div = $('<div id="popup_slide"><table><tr><td style="width: 23px; height: 23px; background-image: url(\'content/images/gallery/gallery_01.png\')"></td>' +
                '<td style="background-image: url(\'content/images/gallery/gallery_02.png\'); background-repeat: repeat-x"></td>' +
                '<td style="width: 23px; background-image: url(\'content/images/gallery/gallery_04.png\'); text-align: center">' +
                '<a href="#" class="close"><img src="content/images/cross_shadow.png"/></a></td></tr>' +
                '<tr><td style="background-image: url(\'content/images/gallery/gallery_05.png\')"></td>' +
                '<td style="background-color: #fff4e3; text-align: right; font-size: 1.2em; padding-right: 5px"><strong>' + Name + 
                '</strong><br/><div id="slide_show">' + $('#gallery_images').html() + '</div>' +
                '<div style="text-align: center"><div style="display: inline; float: left">' + 
                '<a href="javascript: void(0);"><img src="content/images/gallery/gallery_10.png" id="prev"/></a></div>' +
                '<div style="display: inline"><a href="javascript: void(0);" id="slide"><img src="content/images/gallery/gallery_13.png"/></a></div>' +
                '<div style="display: inline; float: right">' + 
                '<a href="javascript: void(0);" id="next"><img src="content/images/gallery/gallery_15.png"/></a></div></div>' +
                '</td><td style="background-image: url(\'content/images/gallery/gallery_05.png\')"></td></tr>' +
                '<tr><td style="height: 23px; background-image: url(\'content/images/gallery/gallery_01.png\')"></td>' +
                '<td style="background-image: url(\'content/images/gallery/gallery_02.png\'); background-repeat: repeat-x"></td>' +
                '<td style="background-image: url(\'content/images/gallery/gallery_04.png\')"></td></tr>' +
                '</table></div>').appendTo('body');

    var Img = $('#slide_show > img:first');
    var Ratio = Img.height()/Img.width();
    
    var MaxHeight = $('body').height() - 150;
    if (Img.height() < $('body').height() - 150)
    {
      MaxHeight = Img.height();
    }
    
    var MaxWidth = MaxHeight/Ratio;

    Div.find('#slide_show').cycle(
    {
      fx: 'scrollHorz', 
      prev: '#prev',
      next: '#next',
      timeout: 4000,
      startingSlide: Start,
      height: MaxHeight,
      width: MaxWidth,
      fit: true,
      containerResize: false,
      after: function()
      {
        Div.find('strong').text($(this).attr('alt').substr($(this).attr('alt').indexOf('|') + 1));
      }
    }).cycle('pause');
    
    var Playing = false;
    Div.find('#slide').click(function()
    {
      if (Playing)
      {
        $(this).children('img').attr('src', 'content/images/gallery/gallery_13.png');
        Div.find('#slide_show').cycle('pause');
      }
      else
      {
        $(this).children('img').attr('src', 'content/images/gallery/gallery_14.png');
        Div.find('#slide_show').cycle('resume', true);
      }
      
      Playing = !Playing;
    });
      
    Div.css({
      'z-index': 1,
      'position': 'absolute',
      'left': 0,
      'top': 0,
      'opacity': '0',
      'width': Div.find('#slide_show').width() + 50,
      'height': Div.find('#slide_show').height() + 150
    });
    
    Div.find('table, td, tr').css('padding', '0px');
    Div.find('table, td, tr').css('border-collapse', 'collapse');
    Div.find('table, td, tr').css('border-spacing', '0px');
    
    Div.animate({
      'left': ($('body').width() - Div.width())/2,
      'top': $(document).scrollTop() + ($('body').height() - Div.height())/2,
      'opacity': '1'
    }, 200);

    var CloseAction = function()
    {
      Overlay.animate({ opacity: 'hide' }, 200, 'linear', function() { $(this).remove(); });
      Div.fadeOut(100, function(){
        Div.remove();
      });
      
      return false;
    };
    
    Div.find('.close').click(CloseAction);
    $().mousedown(function(e)
    {
      if ($(e.target).parents('#popup_slide').length == 0 && $(this).attr('id') != '#popup_slide')
      {
        CloseAction(e);
      }
    });
    
    $(document).bind('keydown', function(e)
    {
      if (e.keyCode == 27)
      {
        Div.fadeOut(100, function(){
          Div.remove();
        });
      }
    });
  });
}
