<% content_for :side_bar do %>
  <%= render :partial => 'layouts/side_bar', :locals => {:link_name => t('site.settings'), :link_url => admin_site_site_info_path(@site), :icon => 'icons-cog', :side_bar_content => 'admin/sites/side_bar'} %>
<% end %>
<style type="text/css">
	.container{
	}

	#new_update_container{
		display: none;
	}

	#update_progress{
		margin: 0 auto;
		text-align: center;
	}

	#update_status{
		/*display: none;*/
	}

	#update_done{
		display: none;	
	}

	#update_failed{
		display: none;
	}

	.panel{
		/*max-height: 400px;*/
		border-radius: 5px;
		overflow: hidden;
		border: 1px solid #DFDFDF;
		background: #FFF;
		box-shadow: 0px 0px 10px #CCC;
	}

	.panel-heading{
		font-size: 16px;
		color: #666;
		padding: 10px 20px;

		background-color: #fafafa;
		background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
		background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
		background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
		background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
		*zoom: 1;
		border-bottom:  1px solid #DDD;
	}

	.table{
		margin: 0;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	}

	.pannel-body{
		max-height:  400px;
		overflow: scroll;
		overflow-x: hidden;
		overflow-y: hidden;
		padding: 15px;
	}

	.pannel-body:hover{
		overflow-y: scroll;
	}

	::-webkit-scrollbar {
		width: 5px;
	}
	::-webkit-scrollbar-track {
		background-color: #AAA;
	} 
	::-webkit-scrollbar-thumb {
		background-color: #666;
	}

	.break{
		border-left: 1px solid #FCFCFC;
		border-right: 1px solid #DDD;
		padding: 10px 0;
		margin: 0 15px;
	}
</style>
<div class="container">
	<div class="row-fluid">
		<div class="span6">
			<div  id="new_update_container">
				<div class="panel">
					<div class="panel-heading">
						<i class="icon-exclamation-sign"></i>
						<span class="break"></span>
						<span class="panel-title"><%= t("update_manager_.available_updates") %></span>
						<span id="num_new_updates" class="badge badge-important pull-right"></span>
					</div>
					<div class="pannel-body">
						<table class="table table-striped">
							<tbody id="new_update_table">
								
							</tbody>
						</table>
					</div>	
				</div>
				<div style="height: 55px;">
					<button id="update_btn" class="btn btn-primary pull-right"  style="margin: 10px;"><i class="icon-inbox icon-white"></i> <%= t("update_manager_.system_update") %></button>
				</div>
			</div>
			<div id="update_status">
				<div class="panel">
					<div class="panel-heading">
						<i class="icon-info-sign"></i>
						<span class="break"></span>
						<span class="panel-title"><%= t("update_manager_.update_status") %></span>
					</div>
					<div class="pannel-body">
						<div id="update_done" class="alert alert-success" style="font-size: 16px; text-align: center; margin: 0px;">
							<i class="icon-ok-sign">&nbsp;&nbsp;&nbsp;&nbsp;<%= t("update_manager_.update_done") %></i>
						</div>
						<div id="update_failed" class="alert alert-error" style="font-size: 16px; text-align: center; margin: 0px;">
							<i class="icon-remove">&nbsp;&nbsp;&nbsp;&nbsp;<%= t("update_manager_.update_faild") %></i>
						</div>
						<div id="update_progress">
							<img src="http://ridepal.com/images/homeimg/preloader_transparent.gif" width="50"><br/>
							<span id="progress_msg"></span>
						</div>
					</div>	
				</div>
				<div style="padding: 10px 0; height: 65px;">
					<button id="chech_update_btn" class="btn btn-small btn-inverse pull-right"><i class="icon-refresh icon-white"></i> <%= t("update_manager_.check_update") %></button>
				</div>
			</div>
		</div>
  		<div class="span6">
  			<div class="panel">
				<div class="panel-heading">
					<i class="icon-th-list"></i>
					<span class="break"></span>
					<span class="panel-title"><%= t("update_manager_.update_history") %></span>
					<span id="num_updates" class="badge badge-success pull-right"></span>
				</div>
				<div class="pannel-body" id="update-history-body">
					<table class="table table-striped">
						<tbody id="update_history_table">
							
						</tbody>
					</table>
				</div>
			</div>
  		</div>
	</div>
</div>
<script>
	var update_logs;
	var update_log_display;
	var new_updates;

	function get_update_history(){
		$.getJSON("<%= admin_site_get_update_history_path %>",function(data){
			update_logs = data;
			update_log_display = 0;
			$("#num_updates").text(update_logs.length);
			$("#update_history_table").html("");
			
			show_update_history();
		});
	}
	
	function show_update_history(){
		for(var i = 0; i<30; i++){
			var log = update_logs[update_log_display];
			update_log_display++;
			$("#update_history_table").append("<tr><td width=30%'>"+log[0]+"</td><td>"+log[1]+"</td></tr>");
			if((update_log_display+1)>update_logs.length) break;
		}
	}

	function check_updates(){
		$("#progress_msg").html("<strong><%= t("update_manager_.checking_update") %></strong>");
		$("#new_update_container").fadeOut(function(){
			$("#update_done").fadeOut(function(){
				$("#update_status").fadeIn(function(){
					$("#update_progress").fadeIn();
				});
			});
		});
		
		$.getJSON("<%= admin_site_check_updates_path %>",function(data){
			new_updates = data;
			show_new_updates();
		});
	}

	function show_new_updates(){
		if(new_updates.length){
			$("#num_new_updates").text(new_updates.length);
			$.each(new_updates,function(){
				$("#new_update_table").append("<tr><td>"+$(this)[0]+"</td><td>"+$(this)[1]+"</td></tr>");
			});
			$("#update_status").fadeOut(function(){$("#new_update_container").fadeIn();});
		}else{
			$("#update_progress").fadeOut(function(){$("#update_done").fadeIn();});
		}
	}

	$(document).ready(function(){
		check_updates();
		get_update_history();

		$("#chech_update_btn").click(check_updates);

		$("#update_btn").click(function(){
			$("#progress_msg").html("<strong><%= t("update_manager_.updating_orbit") %></strong>");
			$("#new_update_container").fadeOut(function(){
				$("#update_status").fadeIn();
			});
			$.get("<%= admin_site_update_orbit_path %>",function(result){
				if(result=="failed"){
					$("#chech_update_btn").hide();
					$("#update_progress").fadeOut(function(){$("#update_failed").fadeIn();});
				}else{
					$("#progress_msg").html("<strong><%= t("update_manager_.restart_server") %></strong>");
					$.get("<%= admin_site_restart_server_path %>",function(result){
						$("#update_progress").fadeOut(function(){$("#update_done").fadeIn();});
						$("#update_status").fadeIn();
						get_update_history();
					});
				}
			});
		});

		$("#update-history-body").scroll(function () {
			if((update_log_display+1)<update_logs.length){
				var scroll_pos =  ($("#update-history-body").scrollTop()+$("#update-history-body").height())/$("#update_history_table").height()*100;
				if(scroll_pos>90){
					show_update_history();
				}
			}
		});
	});
</script>