<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.n2(window.parent.document);
        $(window).on('keydown keyup keypress', function(e){
            if(e.keyCode == 27){
                parentDocument.trigger(e);
            }
        });
    }

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

    autoHeight();
    n2(window).on('resize', autoHeight);
    n2('.n2-ss-slider').on('SliderResize', autoHeight);
    window[n2('.n2-ss-slider').attr('id')].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 class="n2-expert" id="n2-ss-lock">
                    <i class="n2-i n2-i-unlock"></i>
                </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">
n2(document).ready(function ($) {
    var subscribe = $('.n2-ss-preview-subscribe'),
        form = subscribe.find('form'),
        button = form.find('.n2-button-green');
    form.on('submit', function (e) {
        e.preventDefault();
        button.trigger('click');
    }),
        hideSubscriptionForm = function () {
            subscribe.removeClass('n2-active');
            NextendAjaxHelper.ajax({
                type: "GET",
                url: NextendAjaxHelper.makeAjaxUrl('<?php echo $this->appType->router->createAjaxUrl(array('settings/subscribed')); ?>'),
                dataType: 'json'
            });
        };

    button.on('click', $.proxy(function (e) {
        e.preventDefault();
        NextendAjaxHelper.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
}
