@{
    ViewBag.Title = "北京空飘物";
}

@section styles {
    <link href="~/Content/thirds/leaflet-velocity/leaflet-velocity.min.css" rel="stylesheet" />
    <link href="~/Content/thirds/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet" />
    <link href="~/Content/thirds/leaflet.draw-0.4.14/leaflet.draw.css" rel="stylesheet" />
}

<div class="main">
    <div class="map" id="map"></div>
    @*<div class="switch particle-switch" id="particle-switch">
            风场粒子<a href="javascript:;"></a>
        </div>*@
    @*<div class="control-btns">
            <a id="select-point-button" class="select-point btn">鼠标选点...</a>
            <a id="mark-button" class="info-mark btn">信息点标绘...</a>
            <a id="draw-button" class="draw btn">画线...</a>
            <a id="clear-button" class="clear-btn btn">清除...</a>
        </div>
        <div class="switch switch-on label-switch" id="label-switch">
            时间标签<a href="javascript:;"></a>
        </div>*@
    @*<a id="capture-button" class="export btn">导出图片...</a>
        <a id="download-button" href="~/Content/thirds/niuniu-capture/CaptureInstall.exe" class="export btn" style="display:none;" title="安装成功后，手动刷新本页面">安装插件...</a>*@
    <span class="latlng"></span>

    <div class="control-btn-groups">
        <div class="control-item">
            <span title="鼠标选点" class="icon" name="cursor-select" index="0">
                <img src="~/Content/images/control-select.png" />
            </span>
            <span class="text" id="select-point-button">鼠标选点...</span>
        </div>
        <div class="control-item">
            <span title="信息点标绘" class="icon" name="point-mark" index="1">
                <img src="~/Content/images/control-mark.png" />
            </span>
            <span class="text" id="mark-button">信息点标绘...</span>
        </div>
        <div class="control-item">
            <span title="画线" class="icon" name="draw-line" index="2">
                <img src="~/Content/images/control-draw-line.png" />
            </span>
            <span class="text" id="draw-button">画线...</span>
        </div>
        <div class="control-item control-clear-item">
            <span title="清除" class="icon" name="clear" index="3">
                <img src="~/Content/images/control-clear.png" />
            </span>
            <span class="text" id="clear-button">清除...</span>
        </div>
        <div class="control-item control-tag-item">
            <span title="时间标签" class="icon" name="tag" index="4">
                <img src="~/Content/images/control-tag.png" />
            </span>
            <span class="text" id="label-switch">时间标签...</span>
        </div>
        <div class="control-item">
            <span title="经纬度转换" class="icon" name="switch" index="5">
                <img src="~/Content/images/icon-switch.png" />
            </span>
            <span class="text" id="switch-button">经纬度转换...</span>
        </div>
        <div class="control-item">
            <span title="导出图片" class="icon" name="export" index="6">
                <img src="~/Content/images/control-export.png" />
            </span>
            <span class="text" id="capture-button">导出图片...</span>
            <a id="download-button" href="~/Content/thirds/niuniu-capture/CaptureInstall.exe" class="text" title="安装成功后，手动刷新本页面">安装插件...</a>
        </div>
    </div>
</div>

<div class="right">
    <div class="right-title clearfix">
        <a href="javascript:;" class="active" id="real-time">实时</a>
        <a href="javascript:;" id="history-time">历史</a>
    </div>
    <div class="right-content">
        @{
            Html.RenderPartial("Controls/RealtimeTabPage");
            Html.RenderPartial("Controls/HistoryTabPage");
        }
    </div>
</div>

<div class="shrink" id="shrink"></div>

<div class="bg"></div>

<div class="dialog dialog-select-point" id="dialog-select-point">
    <div class="dialog-content">
        <div class="dialog-title">
            <h2>鼠标点选</h2>
        </div>
        <a href="javascript:;" class="close-dialog" id="close-select-point-dialog"></a>
        <div class="item">
            <div class="col">
                <label>经度:</label>
                <input type="text" id="lng" placeholder="请输入经度" />
                <span class="copy-btn" id="copy-longitude"></span>
            </div>
            <div class="col">
                <label>纬度:</label>
                <input type="text" id="lat" placeholder="请输入纬度" />
                <span class="copy-btn" id="copy-latitude"></span>
            </div>
        </div>
        <div class="line"></div>
        <div class="dialog-btn-group fr">
            <button class="btn dialog-btn" id="dialog-select-point-cancel">关闭</button>
        </div>
    </div>
</div>

<div class="dialog dialog-lat-lng-switch" id="dialog-lat-lng-switch">
    <div class="dialog-content">
        <div class="dialog-title">
            <h2>经纬度转换</h2>
        </div>
        <a href="javascript:;" class="close-dialog" id="close-lat-lng-switch-dialog"></a>
        <div class="item">
            <div class="col">
                <label>度:</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" id="first-degree" placeholder="0至180" />
                <p class="tip degree-tip">请输入正确的值。</p>
            </div>
            <div class="col">
                <label>分:</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" id="first-minute" placeholder="0至60" />
                <p class="tip">请输入正确的值。</p>
            </div>
            <div class="col">
                <label>秒:</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" id="first-second" placeholder="0至60" />
                <p class="tip">请输入正确的值。</p>
            </div>
            <div class="col">
                <span class="switch-btn" id="first-switch-btn"></span>
            </div>
            <div class="col">
                <label>小数:</label>
                <input type="text" id="first-decimal" class="readnoly decimal" readonly="readonly" />
            </div>
            <div class="col">
                <span class="copy-btn" id="first-copy-btn"></span>
            </div>
        </div>
        <div class="item">
            <div class="col">
                <label>小数:</label>
                <input type="text" onkeyup="this.value=this.value.replace(/[^\d.]/g,'');" id="second-decimal" class="decimal" placeholder="0至180" />
                <p class="tip">请输入正确的值。</p>
            </div>
            <div class="col">
                <span class="switch-btn" id="second-switch-btn"></span>
            </div>
            <div class="col">
                <label>度:</label>
                <input type="text" id="second-degree" class="readnoly" readonly="readonly" />
            </div>
            <div class="col">
                <label>分:</label>
                <input type="text" id="second-minute" class="readnoly" readonly="readonly" />
            </div>
            <div class="col">
                <label>秒:</label>
                <input type="text" id="second-second" class="readnoly" readonly="readonly" />
            </div>
            <div class="col">
                <span class="copy-btn" id="second-copy-btn"></span>
            </div>
            <input class="hide-text" id="hide-text" />
        </div>
        <div class="line"></div>
        <div class="dialog-btn-group fr">
            <button class="btn dialog-btn" id="dialog-lat-lng-switch-cancel">关闭</button>
        </div>
    </div>
</div>

<div class="dialog dialog-info-point" id="dialog-info-point">
    <div class="dialog-content">
        <div class="dialog-title">
            <h2>添加信息点</h2>
        </div>
        <a href="javascript:;" class="close-dialog" id="close-info-dialog"></a>
        <div class="item">
            <label>标题:</label>
            <input type="text" id="title" class="easyui-textbox" prompt="请输入标题" />
        </div>
        <div class="icon-view clearfix">
            <div class="icon-col active fl" name="1.png">
                <img src="~/Content/images/markers/1.png" />
            </div>
            <div class="icon-col fl" name="2.png">
                <img src="~/Content/images/markers/2.png" />
            </div>
            <div class="icon-col fl" name="3.png">
                <img src="~/Content/images/markers/3.png" />
            </div>
            <div class="icon-col fl" name="4.png">
                <img src="~/Content/images/markers/4.png" />
            </div>
            <div class="icon-col fl" name="5.png">
                <img src="~/Content/images/markers/5.png" />
            </div>
            <div class="icon-col fl" name="6.png">
                <img src="~/Content/images/markers/6.png" />
            </div>
            <div class="icon-col fl" name="7.png">
                <img src="~/Content/images/markers/7.png" />
            </div>
            <div class="icon-col fl" name="8.png">
                <img src="~/Content/images/markers/8.png" />
            </div>
        </div>
        <div class="line"></div>
        <div class="dialog-btn-group fr">
            <button class="btn dialog-btn dialog-sure-btn" id="dialog-info-point-sure">确定</button>
            <button class="btn dialog-btn" id="dialog-info-point-cancel">取消</button>
        </div>
    </div>
</div>

<div class="dialog dialog-manage">
    <div class="dialog-content">
        <div class="dialog-title">
            <h2>标签管理</h2>
        </div>
        <a href="javascript:;" class="close-dialog" id="dialog-close"></a>
        <div class="dialog-block param-text param-label clearfix">
            <div class="param-input fl">
                <input type="text" id="label">
            </div>
            <button class="btn" id="dialog-add-label">添加标签</button>
        </div>
        <div class="line"></div>
        <div class="dialog-block label-list clearfix" id="dialog-label-list">
            <h2 class="dialog-no-tags" style="display: none;">暂无标签</h2>
        </div>
    </div>
</div>

<div class="dialog dialog-delete">
    <div class="dialog-content">
        <div class="dialog-title">
            <h2>确认删除</h2>
        </div>
        <a href="javascript:;" class="close-dialog" id="delete-dialog-close"></a>
        <div class="dialog-clear clearfix">
            <h2>确定删除释放时间为的任务吗？</h2>
            <div class="line"></div>
            <div class="dialog-btn-group fr">
                <button class="btn dialog-btn dialog-sure-btn" id="dialog-sure">确定</button>
                <button class="btn dialog-btn" id="dialog-cancel">取消</button>
            </div>
        </div>
    </div>
</div>

<div class="shade">
    <div class="load">
        正在计算任务(编号:<span id="task-id-span"></span>)，请稍后...
        <div class="load-animate">
            <div class="animate"></div>
            <div class="animate"></div>
            <div class="animate"></div>
        </div>
    </div>
</div>

@section scripts {
    <script src="~/Content/thirds/leaflet-velocity/leaflet-velocity.min.js"></script>
    <script src="~/Content/thirds/leaflet.draw-0.4.14/leaflet.draw.js"></script>
    <script src="~/Content/thirds/turf.min.js"></script>
    <script src="~/Content/thirds/niuniu-capture/niuniucapture.js"></script>
    <script src="~/Content/thirds/niuniu-capture/capturewrapper.js"></script>
    <script src="~/Content/thirds/niuniu-capture/jquery.json-2.3.min.js"></script>
    <script src="~/Content/thirds/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="~/Content/thirds/bootstrap-fileinput/js/locales/zh.js"></script>

    <script src="~/Content/scripts/beijing/history-panel.js"></script>
    <script src="~/Content/scripts/beijing/realtime-panel.js"></script>
    <script src="~/Content/scripts/beijing/result-list.js"></script>
    <script src="~/Content/scripts/beijing/play-control.js"></script>
    <script src="~/Content/scripts/beijing/info-point.js"></script>
    <script src="~/Content/scripts/beijing/select-point.js"></script>
    <script src="~/Content/scripts/beijing/lat-lng-switch.js"></script>
    <script src="~/Content/scripts/beijing/map.js"></script>
    <script src="~/Content/scripts/beijing/app.js"></script>
}