<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<title>LinkPi</title>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- Bootstrap -->
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet">
<link href="/vendor/switch/bootstrap-switch.css" rel="stylesheet">
<link href="/js/confirm/jquery-confirm.min.css" rel="stylesheet"/>
<link href="/vendor/slider/css/bootstrap-slider.min.css" rel="stylesheet" />
<link href="/vendor/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
<link href="/css/my.css" rel="stylesheet">
<link rel="stylesheet" id="langcss">

<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
<script src="/js/jquery-1.11.3.min.js"></script>
<script src="/js/jquery.jsonrpcclient.js"></script>
<script src="/js/jquery.cookie.js"></script>
<script src="/js/bootstrap.js"></script>
<script src="/js/global.js"></script>
<style>
.thumbnail {
    margin-bottom: 0px;
}
</style>
</head>
<body>
<div class="container-fluid main">
  <div class="row" id="preview">
    <div class="col-xs-4">
      <div class="thumbnail"> <img src="...">
        <div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
        <div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="thumbnail"> <img src="...">
        <div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
        <div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="thumbnail"> <img src="...">
        <div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
        <div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="thumbnail"> <img src="...">
        <div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
        <div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="thumbnail"> <img src="...">
        <div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
        <div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="thumbnail"> <img src="...">
        <div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
        <div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="thumbnail"> <img src="...">
        <div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
        <div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="thumbnail"> <img src="...">
        <div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
        <div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
      </div>
    </div>
    <div class="col-xs-4">
      <div class="thumbnail"> <img src="...">
        <div id="L" style="width:0; background-color:#88BB4A; height:5px;"></div>
        <div id="R" style="width:0; background-color:#88BB4A; height:5px;"></div>
      </div>
    </div>
  </div>
	<button id="reset" type="button" class="btn btn-warning">
								<cn>恢复出厂设置</cn>
								<en>Reset default</en>
							</button>
  <script>
	$( function () {
		navIndex( 0 );
		
			var first = true;
			function getVolume() {
				rpc( "enc.getVolume", null, function ( data ) {
					setTimeout(getVolume,200);
					for ( var i = 0; i < data.length && i<9; i++ ) {
						$( "#preview #L" ).eq( i ).css( "width", (data[i].L*100/96)+"%" );
						$( "#preview #R" ).eq( i ).css( "width", (data[i].R*100/96)+"%" );
					}
				} );
			}	

			function show() {
				rpc( "enc.snap", null, function ( ret ) {
					setTimeout(show,500);

				
					for ( var i = 0; i < 9; i++ ) {
						
							$( "#preview img" ).eq( i ).attr( "src", "/snap/snap" + i + ".jpg?rnd=" + Math.random() );
						
					}
				} );

			}
		
		var config;
			$.getJSON( "config/config.json", function ( data ) {
				config = data;
			} );
		
		$(".thumbnail").each(function(index,obj){
					$(obj).click(function(){
						config[config.length-1].output.src=index;
						config[config.length-1].srcA=[index];
						rpc( "enc.update", [ JSON.stringify( config, null, 2 ) ]);
					});
				});

		getVolume();
		show();

		$( "#reset" ).click( function ( e ) {
			func( "resetCfg" );
		});


	} );
</script> 
</div>
</body>
</html>