<%
if(config.ssl&&config.ssl.port&&data.protocol==='https'){
    data.port=config.ssl.port
}else{
    data.port=config.port
}
data.url = baseUrl
if(data.addon && data.addon.indexOf('relative')>-1){
    data.url=''
}
%>
<% include blocks/header-title.ejs %>
<% include blocks/header-meta.ejs %>
<% include blocks/header-favicon.ejs %>
<link rel="stylesheet" href="<%=data.url%>/libs/css/font-awesome.min.css">
<link rel="stylesheet" href="<%=data.url%>/libs/css/bootstrap.min.css">
<link rel="stylesheet" href="<%-data.url%>/libs/css/daterangepicker.css">
<link rel="stylesheet" href="<%-data.url%>/libs/css/dash2.basic.css">
<link rel="stylesheet" href="<%-data.url%>/libs/css/dash2.forms.css">
<link rel="stylesheet" href="<%-data.url%>/libs/css/dash2.darktheme.css">
<link rel="stylesheet" href="<%-data.url%>/libs/css/bootstrap-slider.min.css">


<div id="timelapsejpeg" class="standalone dark">
    <div class="modal-body text-center" style="padding-top:0;padding-bottom:0;">
        <div class="row">
            <div class="col-md-4">
                <div class="fieldHolder text-left">
                    <div class="form-group text-center">
                        <%
                            var logoImageLink
                            if(config.logoLocation76x76.indexOf('//') === -1){
                                logoImageLink = window.libURL + config.logoLocation76x76
                            }else{
                                logoImageLink = config.logoLocation76x76
                            }
                        %>
                        <img src="<%- logoImageLink %>" style="<%- config.logoLocation76x76Style %>">
                    </div>
                    <div class="form-group">
                      <label><div><span><%-lang['Monitor']%></span></div>
                          <div><select class="form-control dark monitors_list"></select></div>
                      </label>
                    </div>
                    <div class="form-group">
                        <label><div><span><%-lang['Date']%></span></div>
                            <div><input type="text" id="timelapsejpeg_date" class="form-control" value="" /></div>
                        </label>
                    </div>
                    <div class="form-group">
                        <input id="timelapseJpegFps" data-slider-id='timelapseJpegFps' type="text"
                         data-slider-min="1" data-slider-max="30" data-slider-step="1" data-slider-value="30" value="30"/>
                    </div>
                    <div class="form-group">
                        <!-- <div class="btn-group"> -->
                            <!-- <a class="btn btn-primary download_mp4"><%-lang['Build']%></a> -->
                            <a class="btn btn-danger btn-block download_mp4"><%-lang['Download']%></a>
                        <!-- </div> -->
                    </div>
                </div>
                <div class="">
                </div>
                <div class="frameIcons row scroll-style-6"></div>
            </div>
            <div class="col-md-8 frameStripContainer contained">
                <div class="playBackView"><img></div>
                <div class="liveStreamView"></div>
                <!-- <div class="frames"></div>
                <div class="frameStripPreview"></div>
                <div class="frameStrip"></div> -->
            </div>
        </div>
    </div>
</div>


<script src="<%=data.url%>/libs/js/jquery.min.js"></script>
<script src="<%=data.url%>/libs/js/jquery-ui.min.js"></script>
<script>$.ccio = {mon:{}}</script>
<script src="<%-data.url%>/libs/js/moment-with-locales.min.js"></script>
<script src="<%-data.url%>/libs/js/daterangepicker.js"></script>
<script src="<%-data.url%>/libs/js/bootstrap-slider.min.js"></script>
<script src="<%-data.url%>/libs/js/dash2.init.js"></script>
<link rel="stylesheet" href="<%-data.url%>/libs/css/dash2.timelapse.jpeg.css">
<script src="<%-data.url%>/libs/js/dash2.timelapse.jpeg.js"></script>
<script>
var data = <%- JSON.stringify(data) %>
var $user = <%- JSON.stringify($user) %>
var lang = <%- JSON.stringify(lang) %>
var languageChoice = "<%- config.language || 'en' %>".replace('_','-').toLowerCase()
moment.locale(languageChoice)
$user.auth_token = data.auth
$(document).ready(function(){
    $.timelapseJpeg.pointer = data.url + '/'
    $.timelapseJpeg.fieldHolderCssHeightModifier = 50
    $.timelapseJpeg.monitors.find('.monitor').remove()
    $.getJSON(data.url+'/'+$user.auth_token+'/monitor/'+$user.ke,function(d){
        if(d instanceof Array){
            $.each(d,function(n,monitor){
                $.ccio.mon[monitor.ke + monitor.mid + $user.auth_token] = monitor
            })
        }else{
            $.ccio.mon[d.ke + d.mid + $user.auth_token] = d
        }
        $.each($.ccio.mon,function(n,v){
            $.timelapseJpeg.monitors.append('<option class="monitor" value="'+v.mid+'">'+v.name+'</option>')
        })
        $.timelapseJpeg.monitors.find('.monitor').prop('selected',false)
        // if(monitor.mid !== ''){
        //     $.timelapseJpeg.monitors.find('.monitor[value="'+e.mid+'"]')
        // }
        // $.timelapseJpeg.datepicker.val($.timelapseJpeg.baseDate)
        $.timelapseJpeg.selectedStartDate = moment().utc().subtract(2, 'days').format('YYYY-MM-DD')
        $.timelapseJpeg.selectedEndDate = moment().utc().add(1, 'days').format('YYYY-MM-DD')
        $.timelapseJpeg.draw($.timelapseJpeg.selectedStartDate,$.timelapseJpeg.selectedEndDate)
    })
})
</script>
