/*
 * show an image preview window
 */
function previewImage(imgSource) {

    var toggleElements = function(toggle) {
        jQuery('object').css('visibility', toggle);
        jQuery('embed').css('  xc visibility', toggle);
        jQuery('iframe').css('visibility', toggle);
    };

    toggleElements('hidden');

    jQuery('<div class="black-fade"></div>')
            .appendTo('body')
            .css({
                position : 'absolute',
                zIndex : '999',
                width : '100%',
                left: 0,
                top: 0,
                opacity : 0.6,
                height : jQuery(document).height() + 'px',
                backgroundColor: '#000000'
            })
            .fadeTo(0.6, 'normal', function() {
                jQuery('<img src="" class="preview-image" style="position:fixed; visibility:hidden; z-index:1000; top:35px; left:50%; border:#FFF solid 5px" />').appendTo('body');
                jQuery('.preview-image').load(function() {
                    var w = this.width;
                    var h = this.height;
                    var maxHeight = jQuery(window).height() - 100;
                    if(h > maxHeight) {                        
                         var diff = h - maxHeight;
                         w -= (diff / h) * w;
                         h -= diff;
                    }
                    jQuery(this)
                        .css({
                            width : '1px',
                            height : '1px',
                            visibility : 'visible'
                        })
                        .animate ({
                                'width' : w+'px',
                                'height' : h+'px',
                                'marginLeft' : '-'+(w / 2)+'px'
                            },
                            'normal',
                            'swing'
                        );
                })
                .get(0).src = imgSource;

                var removePreview = function() {
                    jQuery('.preview-image').animate({
                                'width' : '0px',
                                'height' : '0px',
                                'marginLeft' : '-5px'
                            },
                            'normal',
                            'swing',
                            function()
                            {
                                jQuery('.preview-image').fadeOut('normal', function(){
                                        jQuery(this).remove();
                                });
                                jQuery('.black-fade').fadeOut('normal', function() {
                                    jQuery(this).remove();
                                    toggleElements('visible');
                                });
                            }
                        );
                };

                jQuery('.preview-image').click(removePreview);
                jQuery('.black-fade').click(removePreview);
            });

    return false;
}