<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="sitemesh"
	uri="http://www.opensymphony.com/sitemesh/decorator"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="cui" tagdir="/WEB-INF/tags"%>
<%@ page import="java.lang.Integer"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />

<%
com.cesgroup.cesmonitor.service.LoginUser user=com.cesgroup.cesmonitor.common.Util.getLoginUser();
 Integer myUserId = null;
if(null!=user){
	myUserId = user.getUserid();
}
%>
<script>var myUserId = "<%= myUserId %>"</script>

<link rel="stylesheet" type="text/css"
	href="${ctx}/styles/jquery-ui.css" />
<div class="header-title-nobg table com-head">
	<div>
		<h1>快速访问配置</h1>
		<ul>
			<li>
				<button type="button" id="chartOverviewSetting" class="quickConf"
					title="配置" onclick="chartOverviewConfig();">创建快速访问配置</button>
			</li>
		</ul>
	</div>
	<div class="borderClass"></div>
</div>

<div class="article" id="main-content">
	<table class="list-table">
		<thead>
			<tr>
				<th class="cell-width"><input type="checkbox"
					required="required" id="all_groups" name="all_groups" value="1">
				</th>
				<th style="width: 30%">快速访问组</th>
				<th>图形</th>
			</tr>
		</thead>
		<tbody id="main-group">
			<tr>
				<!-- <td>
						<input type="checkbox" id="groups_7" name="groups[7]" value="7">
					</td> -->
				<td></td>
				<td></td>
			</tr>
		</tbody>
	</table>
	<div class="action-buttons">
		<div class="paging-btn-container">
			<div class="table-stats">
				显示 已自动发现的 <span id="totalNum"></span> 条数据
			</div>
		</div>
	</div>
	<div id="action_buttons" class="action-buttons">
		<span id="selected_count" class="selected-item-count">0 选择</span>
		<button type="submit" disabled="disabled" name="action"
			id="deletedSure" class="btn-alt btn-border"
			onclick="javascript:return del();">删除</button>
	</div>
</div>
<div class="article" id="main-config1" style="display: none">
	<div id="tabs"
		class="table-forms-container ui-tabs ui-widget ui-widget-content ui-corner-all"
		style="visibility: visible;">
		<div id="conditionTab" aria-labelledby="tab_conditionTab"
			class="ui-tabs-panel ui-widget-content ui-corner-bottom"
			role="tabpanel" aria-expanded="false" aria-hidden="true"
			style="display: block;">
			<ul class="table-forms">
				<li>
					<div class="table-forms-td-left">
						<label>快速访问组</label>
					</div>
					<div class="table-forms-td-right">
						<input id="fastgroup" type="text" placeholder="一监狱"
							maxlength="255" style="width: 270px;">
					</div>
				</li>
				<li>

					<div class="table-forms-td-left">
						<label>快速访问图形</label>
					</div>
					<div class="table-forms-td-right">
						<div class="table-forms-separator" style="min-width: 900px;">
							<table id="conditionTable" style="width: 100%;">
								<thead>
									<tr>
										<th>图形名称</th>
										<th>主机群组</th>
										<th>主机</th>
										<th>图形</th>
									</tr>
								</thead>
								<tbody id="addHtml1">
									<tr id="conditions_0">
										<td class="nowrap">
											<button type="button" name="remove" class="btn-link remove"
												onclick="removeGraph2(this)">移除</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</li>
				<li>
					<div class="table-forms-td-left">
						<label>新的快速访问图形</label>
					</div>
					<div class="table-forms-td-right">
						<div class="table-forms-separator" style="min-width: 900px;">
							<table style="width: 100%;">
								<tbody>
									<tr>
										<td colspan="1"><select id="hostGroup" name="hostGroup"
											" autocomplete="off">
												<option value="0" selected="selected">请选择主机群组</option>
										</select>
											<div class="form-input-margin"></div> <select id="selectHost"
											name="selectHost" autocomplete="off">
												<option value="0" selected="selected">请选择主机</option>
										</select>
											<div class="form-input-margin"></div> <select
											id="selectPicture" name="selectPicture" autocomplete="off">
												<option value="0" selected="selected">请选择图形</option>
										</select>
											<div class="form-input-margin"></div> <input type="text"
											id="new_condition_value" name="new_condition[value]"
											placeholder="请在此输入快速访问图形名称" maxlength="255"
											style="width: 270px;"></td>
									</tr>
									<tr>
										<td>
											<button type="button" class="btn-link" id="addItem1"
												onclick="saveGraph()">添加</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</li>
			</ul>
			<ul class="table-forms">
				<li>
					<div class="table-forms-td-left"></div>
					<div class="table-forms-td-right tfoot-buttons">

						<button type="button" id="updateGroup" name="updateGroup"
							value="更新" onclick="updateGroup()">更新</button>
						<button type="submit" id="delete" name="delete" value="删除"
							onclick="deleteGroup()">删除</button>
						<button type="button" id="cancel" name="cancel"
							onclick="javascript: return redirect('?cancel=1');"
							class="btn-alt btn-border">取消</button>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<div class="article" id="main-config2" style="display: none">
	<div id="tabs"
		class="table-forms-container ui-tabs ui-widget ui-widget-content ui-corner-all"
		style="visibility: visible;">
		<div id="conditionTab" aria-labelledby="tab_conditionTab"
			class="ui-tabs-panel ui-widget-content ui-corner-bottom"
			role="tabpanel" aria-expanded="false" aria-hidden="true"
			style="display: block;">
			<ul class="table-forms">
				<li>
					<div class="table-forms-td-left">
						<label>快速访问组</label>
					</div>
					<div class="table-forms-td-right">
						<input id="fastgroup2" type="text" required="required"
							maxlength="255" style="width: 270px;">
					</div>
				</li>
				<li>

					<div class="table-forms-td-left">
						<label>快速访问图形</label>
					</div>
					<div class="table-forms-td-right">
						<div class="table-forms-separator" style="min-width: 900px;">
							<table id="conditionTable" style="width: 100%;">
								<thead>
									<tr>
										<th>图形名称</th>
										<th>主机群组</th>
										<th>主机</th>
										<th>图形</th>
									</tr>
								</thead>
								<tbody id="addItem2">
									<tr id="conditions_0">
										<td><span></span></td>
										<td><span></span></td>
										<td><span></span></td>
										<td><span></span></td>
										<td class="nowrap">
											<!--  <button type="button" id="remove" name="remove" class="btn-link" onclick="removeGraph2()">移除</button> -->
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</li>
				<li>
					<div class="table-forms-td-left">
						<label>新的快速访问图形</label>
					</div>
					<div class="table-forms-td-right">
						<div class="table-forms-separator" style="min-width: 540px;">
							<table style="width: 100%;">
								<tbody>
									<tr>
										<td colspan="1"><select id="hostGroup2"
											name="new_condition[conditiontype]" autocomplete="off">

												<option value="0" selected="selected">请选择主机群组</option>
										</select>
											<div class="form-input-margin"></div> <select
											id="selectHost2" name="new_condition[operator]"
											autocomplete="off">
												<option value="0" selected="selected">请选择主机</option>
										</select>
											<div class="form-input-margin"></div> <select
											id="selectPicture2" name="new_condition[operator]"
											autocomplete="off">
												<option value="0" selected="selected">请选择图形</option>
										</select>
											<div class="form-input-margin"></div> <input type="text"
											id="new_condition_value2" name="new_condition[value]"
											placeholder="请在此输入快速访问图形名称" maxlength="255"
											style="width: 270px;"></td>
									</tr>
									<tr>
										<td>
											<button type="button" class="btn-link" onclick="add2()">添加</button>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</li>
			</ul>
			<ul class="table-forms">
				<li>
					<div class="table-forms-td-left"></div>
					<div class="table-forms-td-right tfoot-buttons">
						<button type="submit" id="add" name="add" value="提交"
							onclick="mySubmit()">提交</button>
						<button type="button" id="cancel" name="cancel"
							onclick="javascript: return redirect('?cancel=1');"
							class="btn-alt btn-border">取消</button>
					</div>
				</li>
			</ul>
		</div>
	</div>
</div>
<script src="${ctx}/js/vendors/jquery-ui.js"></script>
<script>
	var graphArray = new Array();
	var removeArray = new Array();
	var oldData = new Array();
	MMenu.def_label = 'network';
	var myGroupId,groupAll,tb,cbs,cbsLen,isChecked;
	var thisUserId = myUserId;
	 jQuery( "#dialog-modal" ).dialog({
	      height: 140,
	      modal: true
	    });
	 jQuery.ajax({
			  method: "get",
			  url: "${ctx}/quickaccess/findFastGroupGraphByUserId.json",
			  data : {
  				userId : thisUserId,
  			  },
			  success:function(data) {
				   var html='';
				   if(data.length!=0){
					   for(var i=0;i<data.length;i++){
						   var htmlInner="";
						   for(var j=0;j<data[i].graphName.length;j++){
						       htmlInner += '<span>'+data[i].graphName[j]+'</span>&nbsp;&nbsp;&nbsp;';
						     }
						  html += '<tr><td><input type="checkbox" id="groups_'+i+'" name="groups['+i+']" value="'+data[i].groupId+'"></td>'+
						        '<td><a id='+data[i].groupId+' onClick="quickConfig(this.id,this.innerHTML);">'+data[i].groupName+'</a></td>'+
							     '<td class="graphName">'+htmlInner+'</td></tr>';
					   }
				   }else{
					   html='<tr class="nothing-to-show"><td colspan="4">未发现数据</td></tr>';
				   }
				  jQuery('#main-group').html(html);
				//多选删除 
					     groupAll=jQuery("#all_groups");
					 	 tb=jQuery("#main-group");
					     cbs=tb.find("input[type=checkbox]");
					     cbsLen=cbs.length;
					     jQuery("#totalNum").html(cbsLen);
					     //点击全选全不选
					     groupAll.click(function(){
							 isChecked=jQuery(this).prop("checked");
							 console.log(isChecked)
							 if (isChecked) {
					             cbs.prop("checked", true);
					             jQuery("#deletedSure").removeAttr("disabled");
					         } else {
					             cbs.prop("checked", false);
					             jQuery("#deletedSure").attr("disabled","disabled");
					         }
							 jQuery("#selected_count").html(cbsLen+' 选择');
						 });
					     //点击某一个 
					     cbs.on('click',function(){
							 var $selCheckBox = tb.find(":checkbox:checked");
							 if ($selCheckBox.length === cbsLen) {
								 groupAll.prop("checked", true);
					         } else {
					        	 groupAll.prop("checked", false);
					         }
							 if($selCheckBox.length == 0){
								 jQuery("#deletedSure").attr("disabled","disabled");
							 }else{
								 jQuery("#deletedSure").removeAttr("disabled");
							 }
							 jQuery("#selected_count").html($selCheckBox.length+' 选择');
						 })
			  },
			  error:function(err){
				  alert(err);
			  }
		  });
	 //点击批量删除确认键
	 
	 function del() {
	var msg = "确定删除";
	if (confirm(msg)==true){
			 var inputIds=[];
			 if(isChecked){
				 cbs.each(function(i,ele){
					  inputIds.push(jQuery(cbs[i]).val());
				 })
				 
			 }else{
				 var selCheckBox = tb.find(":checkbox:checked");
				 selCheckBox.each(function(i,ele){
					  inputIds.push(jQuery(selCheckBox[i]).val());
				 })
			 }
			 var myinputIds = inputIds.toString();
			 jQuery.ajax({
	 			  method: "get",
	 			  url: "${ctx}/quickaccess/deleteByFastGroupId.json",
	 			  data:{
	 				 fastGroupGraphIds:myinputIds
	 			  },
	 			  success:function(data) {
	 					if(isChecked){
	 						jQuery('#main-group').html('<tr class="nothing-to-show"><td colspan="4">未发现数据</td></tr>');
	 					}else{
	 						inputIds.each(function(item){
	 							jQuery("#"+item).parents('tr').remove();
	 						})
	 					}
	 			  }
	 		  });

			 jQuery("#selected_count").html(0+' 选择');
	}else{
	 return; 
	}
	}

	   var selectData=0;
	   //点击快速访问组的每一项 
	   function quickConfig(ele,name){
	            myGroupId = ele;
		        console.log(ele,name)
	    		jQuery('#main-content').css('display',"none");
	    		jQuery('#main-config1').css('display',"block");
	    		jQuery('#main-config2').css('display',"none");
	    		jQuery('#chartOverviewSetting').css('display',"none");
	    		jQuery('#fastgroup').val(name)
	    		jQuery.ajax({
		  			  method: "get",
		  			  url: "${ctx}/quickaccess/getGraphsByFastGroupId.json",
		  			  data:{
		  				FastGroupId:ele
		  			  },
		  			  success:function(data) {
		  					var addHtml='';
		  				 for(var k=0;k<data.length;k++){	
		  					addHtml+='<tr id="'+data[k].id+'"><td><span>'+data[k].name+'</span></td>'+
		  					                                 '<td><span>'+data[k].groupname+'</span></td>'+
		  					                                 '<td><span>'+data[k].hostname+'</span></td>'+
		  					                                 '<td><span>'+data[k].graphname+'</span></td>'+
		  					                                 '<td class="nowrap">'+
		  					                                 '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph(this)">移除</button></tr>' ;
		  				 }
		  				 
		  				  jQuery('#addHtml1').html(addHtml);
		  				  //console.log(jQuery('#addHtml1'))
		  				  oldData = data;
		  			  },
		  			  error:function(err){
		  				  alert(err);
		  			  }
		  		  });
	    		jQuery.ajax({
	  			  method: "get",
	  			  url: "${ctx}/quickaccess/listHostGroupsWithHosts.json",
	  			  data:null,
	  			  success:function(data) {
	  				   var html='',html1='';
	  					html ='<option selected="selected">选择主机组</option>';
	  				   for(var i=0;i<data.length;i++){
	  					  html += '<option data-value="'+data[i].groupid+'">'+data[i].name+'</option>';
	  				   }
	  				   html1 ='<option selected="selected">选择主机</option>'; 
		  				  for(var j=0;j<data[0].hosts.length;j++){
		  						 html1 += '<option data-value="'+data[0].hosts[j].hostid+'">'+data[0].hosts[j].name+'</option>';
		  					  }
  					  jQuery('#selectHost').html(html1);
	  				  jQuery('#hostGroup').html(html);
	  				  selectData=data;
	  			  }
	  		  });
	    		
	    };
	    //点击快速访问配置按钮 
	   function chartOverviewConfig(){
				 jQuery('#main-content').css('display',"none");
		   		jQuery('#main-config1').css('display',"none");
		   		jQuery('#chartOverviewSetting').css('display',"none");
		   		jQuery('#main-config2').css('display',"block");
		   		//url: "${ctx}/cesmonitor/quickaccess/findGraphByHostId.json?hostId=10246",
		   		jQuery.ajax({
		  			  method: "get",
		  			  url: "${ctx}/quickaccess/listHostGroupsWithHosts.json",
		  			  data:null,
		  			  success:function(data) {
		  				   var html='',html1='';  	
	  				       html ='<option selected="selected">选择主机组</option>';
		  				   for(var i=0;i<data.length;i++){
		  					  html += '<option data-value="'+data[i].groupid+'">'+data[i].name+'</option>';

		  				   }
		  				      html1 ='<option selected="selected">选择主机</option>';
			  				  /* for(var j=0;j<data[0].hosts.length;j++){
			  						 html1 += '<option data-value="'+data[0].hosts[j].hostid+'">'+data[0].hosts[j].name+'</option>';
			  					  } */
	  					  jQuery('#selectHost2').html(html1);
		  				  jQuery('#hostGroup2').html(html);
		  				  selectData=data;
		  			  }
		  		  });
		   		
	   };
	   	
	   jQuery("#hostGroup").change(function() {
   		var group = jQuery("#hostGroup").val();  //获取群组下拉菜单的值 
        for(var i=0;i<selectData.length;i++){
           	if(group==selectData[i].name){
           		var html='';
           		html ='<option selected="selected">请选择主机</option>';
           		for(var j=0;j<selectData[i].hosts.length;j++){
           			html += '<option data-value="'+selectData[i].hosts[j].hostid+'">'+selectData[i].hosts[j].name+'</option>';
           		}
           		
           	}
           }
        jQuery("#selectHost").html(html);
   	});
	   
	   jQuery("#hostGroup2").change(function() {
	   		var group = jQuery("#hostGroup2").val();  //获取群组下拉菜单的值 
	        for(var i=0;i<selectData.length;i++){
	           	if(group==selectData[i].name){
	           		var html='';
	           		html ='<option selected="selected">请选择主机</option>';
	           		for(var j=0;j<selectData[i].hosts.length;j++){
	           			html += '<option data-value="'+selectData[i].hosts[j].hostid+'">'+selectData[i].hosts[j].name+'</option>';
	           		}	
	           	}
	        }
	        jQuery("#selectHost2").html(html);
        	jQuery("#selectPicture2").html('<option>请选择图形</option>');
	   	});
	   
	   
	   jQuery("#selectHost").change(function(event) {
   		var group = jQuery("#selectHost").val();  //获取主机组下拉菜单的值
   		var hostId = jQuery("#selectHost").find("option:selected").attr('data-value');
   		//var hostId = '10647';
   			jQuery.ajax({
           		type:'post',
           		url:"${ctx}/quickaccess/findGraphByHostId.json", //请求查询所有主机的url
           		data : {
    				hostId : hostId,

    			},
           		success:function(data){     			
                    if(data.length!=0){
                    	var html='';
	           			for(var i=0;i<data.length;i++){
	           				html += '<option data-value="'+data[i].graphid+'">'+data[i].name+'</option>';
	           		    }
	           			jQuery("#selectPicture").html(html);
                    }else{
                    	html='<option>无数据</option>';
                    	jQuery("#selectPicture").html(html);
                    }
           	    }
           	});
    	});
	   
	   jQuery("#selectHost2").change(function() {
	   		var group = jQuery("#selectHost2").val();  //获取主机组下拉菜单的值
	   		
	   		var hostId = jQuery("#selectHost2").find("option:selected").attr('data-value');
	   			jQuery.ajax({
	           		type:'post',
	           		url:"${ctx}/quickaccess/findGraphByHostId.json", //请求查询所有主机的url
	    			data : {
	    				hostId : hostId,
	    			},
	           		success:function(data){
	           			
                        if(data.length!=0){
                        	var html='';
    	           			for(var i=0;i<data.length;i++){
    	           				
    	           				html += '<option data-value="'+data[i].graphid+'">'+data[i].name+'</option>';
    	           		    }
    	           			jQuery("#selectPicture2").html(html);
                        }else{
                        	html='<option>无数据</option>';
                        	jQuery("#selectPicture2").html(html);
                        }
	           			
	           	    }
	           	});
	    	}); 
	  jQuery('#addItem').click(function(){
		  var item0=jQuery('#new_condition_value').val();
		  var item1=jQuery("#hostGroup").val();
		  var item2=jQuery("#selectHost").val();
		  var item3=jQuery("#selectPicture").val();
		  var addHtml='<tr id="conditions_0"><td><span>'+item0+'</span></td><td><span>'+item1+'</span></td><td><span>'+item2+'</span></td><td><span>'+item3+'</span></td><td class="nowrap"><button type="button" name="remove" class="btn-link remove">移除</button></tr>'
		  jQuery('#addHtml1').append(addHtml);
	  });
	  jQuery("#addHtml1").on("click",".remove",function(){
		 var ele = this.parentNode.parentNode;
		  ele.parentNode.removeChild(ele);
	  })
	  
	function saveGraph(){
			  var uuid = getUuid();
			  uuid = uuid.replace(/-/g,'')		  
			  var fastGroupName = jQuery("#fastgroup").val();

			  if("选择主机组" == jQuery("#hostGroup").find("option:selected").val()){
				  alert("请选择主机组");
				  return;
			  } 
			  if("请选择主机" == jQuery("#selectHost").find("option:selected").val()){
				  alert("请选择主机");
				  return;
			  } 
			  if("0" == jQuery("#selectPicture").find("option:selected").val()){
				  alert("请选择图形");
				  return;
			  } 
			  
			  var userId = thisUserId;
			  var graphName = jQuery("#new_condition_value").val();
			  if(graphName == ""){
				  alert("请输入快速访问图形名称");
				  return;
			  }
			  var groupId = jQuery("#hostGroup").find("option:selected").attr('data-value');
			  var myGroupName = jQuery("#hostGroup").find("option:selected").val();
			  var hostId  = jQuery("#selectHost").find("option:selected").attr('data-value'); 
			  var graphId = jQuery("#selectPicture").find("option:selected").attr('data-value');
			  var hostName = jQuery("#selectHost").find("option:selected").val();
			  var selectGraphName = jQuery("#selectPicture").find("option:selected").attr('data-value');
			  var myGraphname = jQuery("#selectPicture").find("option:selected").val()
			  
			  var flag = validateGraph(graphId);
			  if(flag == "1"){
				  alert("该图形已存在");
				  return;
			  }
			  
			  for(var i=0;i<oldData.length;i++){
				  if(oldData[0].graphname == myGraphname){
					  alert("该图形已存在");
					  return;
				  }
			  }

			  graphArray.push({id: uuid, fastGroupName: fastGroupName, userId:userId, graphName:graphName, groupId:groupId, hostId:hostId, graphId:graphId});
			  var graphArrayStr = graphArray.toString();

			  
			  var id = uuid;
			  var name = graphName;
			  var groupname = myGroupName;
			  var hostname = hostName;
			  var graphname = myGraphname;
			  var addHtml = "";
			  addHtml ='<tr id="'+id+'"><td><span>'+name+'</span></td>'+
              '<td><span>'+groupname+'</span></td>'+
              '<td><span>'+hostname+'</span></td>'+
              '<td><span>'+graphname+'</span></td>'+
              '<td class="nowrap">'+
              '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph(this)">移除</button></tr>' ;
              jQuery('#addHtml1').append(addHtml);


		  var fastGroupName = jQuery("#fastgroup").val();
		  var userId = thisUserId;
		  var graphName = jQuery("#new_condition_value").val();
		  var groupId = jQuery("#hostGroup").find("option:selected").attr('data-value');
		  var hostId  = jQuery("#selectHost").find("option:selected").attr('data-value'); 
		  var graphId = jQuery("#selectPicture").find("option:selected").attr('data-value');

}
	  
	  function getUuid() {
		    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
		        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
		        return v.toString(16);
		    });
		}
	  
	  function validateGraph(graphId){
		  var flag = 0;
			for(var i = 0; i < graphArray.length; i++){	
				if(graphArray[i].graphId == graphId){
					flag = 1;
				}
			}
			return flag;
	  }
	  
		function add2(){

			  var uuid = getUuid();
			  uuid = uuid.replace(/-/g,'')		  
 			  var fastGroupName = jQuery("#fastgroup2").val();
 			  
 			 if("选择主机组" == jQuery("#hostGroup2").find("option:selected").val()){
				  alert("请选择主机组");
				  return;
			  } 
			  if("请选择主机" == jQuery("#selectHost2").find("option:selected").val()){
				  alert("请选择主机");
				  return;
			  } 
			  if("0" == jQuery("#selectPicture2").find("option:selected").val()){
				  alert("请选择图形");
				  return;
			  } 
			  var userId = thisUserId;
			  var graphName = jQuery("#new_condition_value2").val();
			  if(graphName == ""){
				  alert("请输入快速访问图形名称");
				  return;
			  }
			  var groupId = jQuery("#hostGroup2").find("option:selected").attr('data-value');
			  var myGroupName = jQuery("#hostGroup2").find("option:selected").val();
			  var hostId  = jQuery("#selectHost2").find("option:selected").attr('data-value'); 
			  var graphId = jQuery("#selectPicture2").find("option:selected").attr('data-value');
			  var hostName = jQuery("#selectHost2").find("option:selected").val();
			  var selectGraphName = jQuery("#selectPicture2").find("option:selected").attr('data-value');
			  var myGraphname = jQuery("#selectPicture2").find("option:selected").val()
			  
			  
			  var flag = validateGraph(graphId);
			  if(flag == "1"){
				  alert("该图形已存在");
				  return;
			  }
			  
			  graphArray.push({id: uuid, userId:userId, graphName:graphName, groupId:groupId, hostId:hostId, graphId:graphId});
			  var graphArrayStr = graphArray.toString();

			  
			  var id = uuid;
			  var name = graphName;
			  var groupname = myGroupName;
			  var hostname = hostName;
			  var graphname = myGraphname;
			  var addHtml = "";
			  addHtml ='<tr id="'+id+'"><td><span>'+name+'</span></td>'+
                '<td><span>'+groupname+'</span></td>'+
                '<td><span>'+hostname+'</span></td>'+
                '<td><span>'+graphname+'</span></td>'+
                '<td class="nowrap">'+
                '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph2(this)">移除</button></tr>' ;
                jQuery('#addItem2').append(addHtml);
	}
		
		  jQuery("#addItem2").on("click",".remove",function(){
			//  debugger
				 var ele = this.parentNode.parentNode;
				  ele.parentNode.removeChild(ele);
			  })
		
	function mySubmit(){
			  var fastGroupName = jQuery("#fastgroup2").val();
 			  if(fastGroupName == ""){
				  alert("请输入快速访问组名");
				  return;
			  } 
			  var userId = thisUserId;
			  var graphName = jQuery("#new_condition_value2").val();
			  if(graphName == ""){
				  alert("请输入快速访问图形名称");
				  return;
			  }
	

		var fastGroupName = jQuery("#fastgroup2").val();
		   if(fastGroupName == ""){
			  alert("请输入快速访问组名");
			  return;
		  }
		graphArray.push({fastGroupName: fastGroupName});
		var graphArrayStr = graphArray.toJSON();
		graphArrayStr = graphArrayStr.toString();
			jQuery.ajax({
		      method: "POST",
			  url: "${ctx}/quickaccess/saveQuickAccessList.json",
	          data:{
	        	  	graphArrays:graphArrayStr,
		  		  },
			  success:function(data){

	     	    } 
		  }); 

		   return redirect('?cancel=1');
		}
	  
		function  removeGraph2(obj){

			
			var tempGraphArray = new Array();
			var fastGroupGraphId = obj.parentElement.parentElement.id;
			Array.prototype.push.apply(graphArray, tempGraphArray);

			var ArrayPos;
			for(var i = 0; i < graphArray.length; i++){	
				if(graphArray[i].id == fastGroupGraphId){
					ArrayPos = i;
				}
				if(graphArray[i].id != fastGroupGraphId){
					
					tempGraphArray[i] = graphArray[i]
				}
			}

				for(var i = 0;i < tempGraphArray.length;i++){
					if(i == ArrayPos){
						
					}else if(i > ArrayPos){
						tempGraphArray[i-1] = tempGraphArray[i];
					}else {
						tempGraphArray[i] = tempGraphArray[i];
					}
					
				}
				var myLength = graphArray.length;

	
			graphArray.clear();
			if(undefined != ArrayPos){
				if(ArrayPos != myLength-1){
					for(var i = 0;i<tempGraphArray.length-1;i++){
		
						graphArray[i] = tempGraphArray[i];
					}
				}else{
					for(var i = 0;i<tempGraphArray.length;i++){
						
						graphArray[i] = tempGraphArray[i];
					}
				}
			}
			
	}
		
		function  removeGraph(obj){
			var tempGraphArray = new Array();
			var fastGroupGraphId = obj.parentElement.parentElement.id;
			Array.prototype.push.apply(graphArray, tempGraphArray);
			var ArrayPos;
			for(var i = 0; i < graphArray.length; i++){
				if(graphArray[i].id == fastGroupGraphId){
					ArrayPos = i;
				}
				if(graphArray[i].id != fastGroupGraphId){
					
					tempGraphArray[i] = graphArray[i]
				}
			}
			if(undefined != ArrayPos){

				for(var i = 0;i < tempGraphArray.length;i++){
					if(i == ArrayPos){
						
					}else if(i > ArrayPos){
						tempGraphArray[i-1] = tempGraphArray[i];
					}else {
						tempGraphArray[i] = tempGraphArray[i];
					}
				}
				var myLength = graphArray.length;
				graphArray.clear();
				
				if(undefined != ArrayPos){
					if(ArrayPos != myLength-1){
						for(var i = 0;i<tempGraphArray.length-1;i++){
			
							graphArray[i] = tempGraphArray[i];
						}
					}else{
						for(var i = 0;i<tempGraphArray.length;i++){
							
							graphArray[i] = tempGraphArray[i];
						}
					}
				}

			} else {
				removeArray.push({id: fastGroupGraphId});
			}

			
			  jQuery("#addItem").on("click",".remove",function(){
					 var ele = this.parentNode.parentNode;
					  ele.parentNode.removeChild(ele);
				  })
			var fastGroupGraphId = obj.parentElement.parentElement.id	  
	}
		
		function refreshGraphs2(){		
			var myGraphId = jQuery("#hostGroup").find("option:selected").attr('data-value');		
		  	jQuery.ajax({
		  		  method: "POST",
		  		  async: false,
		  		  url: "${ctx}/quickaccess/getGraphsByFastGroupId.json",
		  		  data:{
		  			FastGroupId:myGroupId
		  		  },
	  			  success:function(data) {
	  					var addHtml='';
	  				 for(var k=0;k<data.length;k++){
	  					
	  					addHtml+='<tr id="'+data[k].id+'"><td><span>'+data[k].name+'</span></td>'+
	  					                                 '<td><span>'+data[k].groupname+'</span></td>'+
	  					                                 '<td><span>'+data[k].hostname+'</span></td>'+
	  					                                 '<td><span>'+data[k].graphname+'</span></td>'+
	  					                                 '<td class="nowrap">'+
	  					                                 '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph2(this)">移除</button></tr>' ;
	  				 }
	  				 
	  				  jQuery('#addItem2').html(addHtml);
	  				oldData = data;
	  			  },  
		  	  });
		}
		
		function refreshGraphs(){
			var myGraphId = jQuery("#hostGroup").find("option:selected").attr('data-value');		
		  	jQuery.ajax({
		  		  method: "POST",
		  		  url: "${ctx}/quickaccess/getGraphsByFastGroupId.json",
		  		  data:{
		  			FastGroupId:myGroupId
		  		  },
	  			  success:function(data) {
	  					var addHtml='';
	  				 for(var k=0;k<data.length;k++){
	  					
	  					addHtml+='<tr id="'+data[k].id+'"><td><span>'+data[k].name+'</span></td>'+
	  					                                 '<td><span>'+data[k].groupname+'</span></td>'+
	  					                                 '<td><span>'+data[k].hostname+'</span></td>'+
	  					                                 '<td><span>'+data[k].graphname+'</span></td>'+
	  					                                 '<td class="nowrap">'+
	  					                                 '<button type="button" name="remove" class="btn-link remove" onclick="removeGraph(this)">移除</button></tr>' ;
	  				 }
	  				  jQuery('#addHtml1').html(addHtml);
	  				oldData = data;
	  			  } 
		  	  });	
		}
		function  deleteGroup(){
		  	jQuery.ajax({
		  		  method: "POST",
		  		  url: "${ctx}/quickaccess/deleteQuickAccess.json",
		  		  data:{
		  			fastGroupId:myGroupId
			  		  },
		  		  
		  	  });
			return redirect('?cancel=1');
	}
		
 		function updateGroup(){
			  var fastGroupName = jQuery("#fastgroup").val();
 			  if(fastGroupName == ""){
				  alert("请输入快速访问组名");
				  return;
			  } 
			  var userId = thisUserId;
		if(graphArray.length > 0 ){
			var graphArrayStr = graphArray.toJSON();
			graphArrayStr = graphArrayStr.toString();
				jQuery.ajax({
			      method: "POST",
		  	      async: false,
				  url: "${ctx}/quickaccess/saveQuickAccessList.json",
		          data:{
		        	  	graphArrays:graphArrayStr,
			  		  },
				  success:function(data){

		     	    } 
			  }); 
		}

			if(removeArray.length > 0){
				var deleteQuickAccessGraphList = removeArray.toJSON();
				  jQuery.ajax({
		  		  method: "POST",
		  	      async: false,
		  		  url: "${ctx}/quickaccess/deleteQuickAccessGraphList.json",
		  		  data:{
		  			fastGroupGraphIds:deleteQuickAccessGraphList
		  		  }
		  		  
		  	  });
			}

		   return redirect('?cancel=1');
	} 	
	</script>