$().ready(function(){
    $('#preview').click(function(){
        var varWindow = $(window);
        $('body').css('overflow','hidden');

        var previewTransparency = $('<div class="blkPreviewTransparency"></div>');
        var previewWrapper = $('<div style="display: none;" class="blkPreviewWrapper"><div style="position:relative;"><a href="/contact/"><img src="/images/adPreview.jpg" title="Our Kickin Deal" alt="Our Monthly Ad"></a><p class="previewButton closeButton"><a>Close X</a></p><p class="previewButton printButton"><a href="/images/New_Year_Ad.jpg">View Printable Version</a></p></div></div>');

        $('#wrapper').after(previewTransparency);
        $('#wrapper').after(previewWrapper);


        previewTransparency.click(function(event) {
            if($(event.target).is('.blkPreviewTransparency')) {
                previewWrapper.slideUp(350, function(){
                    previewWrapper.remove();
                    previewTransparency.remove();
                    $('body').css('overflow','auto');
                });
                
            }
        });

        $('.closeButton').click(function(event) {
                previewWrapper.slideUp(350, function(){
                    previewWrapper.remove();
                    previewTransparency.remove();
                    $('body').css('overflow','auto');
                });
                
        });
        var leftMargin = (varWindow.width() / 2) - (previewWrapper.width() / 2);
        var topMargin = (varWindow.height() / 2) - (previewWrapper.height() / 2) + varWindow.scrollTop();

        varWindow.resize(function(event) {
        leftMargin = (varWindow.width() / 2) - (previewWrapper.width() / 2);
        topMargin = (varWindow.height() / 2) - (previewWrapper.height() / 2) + varWindow.scrollTop();
            previewWrapper.css({'top': topMargin, 'left': leftMargin});
            $('.jFormerModalTransparency').width(varWindow.width()).height(varWindow.height());
        });
        


        


        previewTransparency.width(varWindow.width()).height(varWindow.height()*1.1).css('top', varWindow.scrollTop());
        previewWrapper.css({'top': topMargin, 'left': leftMargin});

        previewWrapper.show(450, function(){
            leftMargin = (varWindow.width() / 2) - (previewWrapper.width() / 2);
            topMargin = (varWindow.height() / 2) - (previewWrapper.height() / 2) + varWindow.scrollTop();

            previewWrapper.css({
                'top': topMargin,
                'left': leftMargin
            });
        });
        
        

        
    });
});