<style type="text/css">

    #n2-admin {
        margin: 0 !important;
    }

    .n2-form-tab {
        margin: 0;
        border: 0;
    }

    body,
    .n2-form-tab {
        background-color: #e9edf0;
    }

    .n2-ss-device-zoomer {
        position: absolute;
        left: 50%;
        top: 5px;
        margin-left: -140px;
        z-index: 10;
    }

    <?php N2Platform::adminHideCSS(); ?>
</style>

<?php

$externals = N2SmartSliderSettings::get('external-css-files');
if (!empty($externals)) {
    $externals = explode("\n", $externals);
    foreach ($externals AS $external) {
        echo "<link rel='stylesheet' href='" . $external . "' type='text/css' media='all' />";
    }
}

N2JS::addFirstCode("
    if(window.parent != window){
        parentDocument = window.parent.N2Classes.$(window.parent.document);
        $(window).on('keydown keyup keypress', function(e){
            if(e.keyCode == 27){
                parentDocument.trigger(e);
            }
        });
    }

    var container = $('.n2-ss-container-device'),
        autoHeight = function(){
                var minHeight = $(window).height() - container.offset().top ;
                container.css('height', 'auto');
                if(container.height() < minHeight){
                    container.height(minHeight);
                }
        };

    autoHeight();
    $(window).on('resize', autoHeight);
    $('.n2-ss-slider').on('SliderResize', autoHeight);
    
    N2R('#' + $('.n2-ss-slider').attr('id'), $.proxy(function ($, slider) {
        slider.startedDeferred.done(function(slider){
            slider.ready(autoHeight);
        });
    }));
        
    $('.n2-lb-header').each(function () {
        var bar = $(this);
        bar.fixTo(bar.parent(), {
            top: 0
        });
    });
");

?>
<div class="n2-lb-header">
    <div class="n2-modal-simple-header n2-h2"><?php n2_e('Preview'); ?></div>

    <div class="n2-ss-device-zoomer">
        <div id="n2-ss-devices" class="n2-ss-devices-compact">
            <div class="n2-controls-panel n2-table n2-table-auto">
                <div class="n2-tr">
                </div>
            </div>
        </div>
        <div id="n2-ss-zoom">
            <div class="n2-ss-slider-zoom-container">
                <i class="n2-i n2-i-minus"></i>
                <i class="n2-i n2-i-plus"></i>

                <div class="n2-ss-slider-zoom-bg"></div>

                <div class="n2-ss-slider-zoom-1"></div>

                <div id="n2-ss-slider-zoom"></div>
            </div>
        </div>
    </div>
</div>


    <div class="n2-ss-container-device">
        <?php
        echo $slider;
        ?>
    </div>

    <div class="n2-clear"></div>
<?php
if (!N2Base::getApplication('smartslider')->storage->get('free', 'subscribeOnImport')) {
    ?>
    <div class="n2-ss-preview-subscribe">
        <div class="n2-ss-preview-subscribe-close"></div>
        <form>
            <div class="n2-input-button"><input id="EMAIL" name="EMAIL" value="<?php echo N2Platform::getUserEmail(); ?>" type="email"><a href="#" class="n2-button n2-button-normal n2-button-l n2-radius-s n2-button-green n2-uc n2-h4">SIGNUP</a></div>
            <input type="hidden" name="<?php echo strtoupper(N2Platform::getPlatform()); ?>" value="Yes"/>
            <input type="hidden" name="SOURCE" value="Smart Slider 3"/>
        </form>
    </div>
    <script type="text/javascript">
        N2R('documentReady', function ($) {
            var subscribe = $('.n2-ss-preview-subscribe'),
                form = subscribe.find('form').on('submit', function (e) {
                    e.preventDefault();
                    button.trigger('click');
                }),
                button = form.find('.n2-button-green'),
                hideSubscriptionForm = function () {
                    subscribe.removeClass('n2-active');
                    N2Classes.AjaxHelper.ajax({
                        type: "GET",
                        url: N2Classes.AjaxHelper.makeAjaxUrl('<?php echo $this->appType->router->createAjaxUrl(array('settings/subscribed')); ?>'),
                        dataType: 'json'
                    });
                };

            button.on('click', $.proxy(function (e) {
                e.preventDefault();
                N2Classes.AjaxHelper.ajax({
                    type: "POST",
                    url: "//secure.nextendweb.com/mailchimp/subscribe.php",
                    data: form.serialize(),
                    dataType: 'json'
                }).done($.proxy(function (response) {
                    hideSubscriptionForm();
                }, this));
            }, this));

            subscribe.find('.n2-ss-preview-subscribe-close').on('click', $.proxy(function (e) {
                e.preventDefault();
                hideSubscriptionForm();
            }, this));

            setTimeout(function () {
                subscribe.addClass('n2-active');
            }, 3000);
        });
</script>
    <?php
}