/*   simple-gallery.js

     by bradc for Highsite galley.tmpl simple gallery on 10-16-2010
     
     requires: simple-gallery.css and optional simple-gallery-custom.css
     
     paste into head of head.tmpl:
     <script src="/xm_js/simple-gallery.js" type="text/javascript"></script>
     <link rel="stylesheet" href="/xm_js/simple-gallery.css" type="text/css" media="screen" />
     <link rel="stylesheet" href="/xm_client/simple-gallery-custom.css" type="text/css" media="screen" />
     
     html must include divs: gallery (where the images go), enlargement and coverup
*/
      $(function() {
      
         $('#gallery img').click(function(event) {
            event.preventDefault();
            var image = $(this).attr("src");
            var title = $(this).attr("alt");
            var toenlarge = new Image();
            toenlarge.src = image;
            var w = toenlarge.width;
            var h = toenlarge.height;
            var wh = $(window).height(); 
            var ww = $(window).width();
            var l = parseInt((ww-w)/2);
            var t = parseInt((wh-h)/2);
            $('#enlargement').css({'width':w,'height':h,'top':t,'left':l});
            $('#coverup').css({'visibility':'visible'});
            $('#enlargement').fadeIn('fast');
            $('#enlargement').html('<img src="'+image+'" /><div id="title"><p>'+title+'</p></div><div id="close"></div>');
            $('#title').css({'width':w});
         });
         
         $('#enlargement').click(function(event) {
            event.preventDefault();
            $('#enlargement').fadeOut('fast');
            $('#coverup').css({'visibility':'hidden'});
         });
      });