<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>
