

function hlist(){	
	
	var twidget = new Widget({
		style: 'margin: 4px; float: left; width: 100px; height: 100px; position: relative; display: block; z-index: 1000000;', 
		className: 'draggable cloneable',
		set: 'hlist',
		id: 'Default-Widget-11'
	});
	twidget.core.vars.unittype = 'encoders';
	twidget.core.vars.finalunitlist = [];
	twidget.init = function(){
	
		if (this.ontopanel && isworkingpanel) this.ontopanel();
		
		$.get("/php_includes/EchoAllUnitsTX.php", {},
			function(data){
				this.txunitlist = objToArray(json_decode(data));
			}.bind(this));
		$.get("/php_includes/EchoAllUnitsRX.php", {},
			function(data){
				this.rxunitlist = objToArray(json_decode(data));
			}.bind(this));
		$.get("/php_includes/EchoAllUnitsDVR.php", {},
			function(data){
				this.dvrunitlist = objToArray(json_decode(data));
			}.bind(this));
			
		/*this.txunitlist = [{ipaddr: '127.0.0.1', nickname: 'testtx1'},{ipaddr: '127.0.0.2', nickname: 'testtx2'},
			{ipaddr: '127.0.0.3', nickname: 'testtx3'},{ipaddr: '127.0.0.4', nickname: 'testtx4'},{ipaddr: '127.0.0.5', nickname: 'testtx5'},
			{ipaddr: '127.0.0.6', nickname: 'testtx8'},{ipaddr: '127.0.0.7', nickname: 'testtx7'},{ipaddr: '127.0.0.8', nickname: 'testtx6'},
			{ipaddr: '127.0.0.9', nickname: 'testtx9'},{ipaddr: '127.0.0.13', nickname: 'testtx10'},{ipaddr: '127.0.0.10', nickname: 'testtx11'},
			{ipaddr: '127.0.0.11', nickname: 'testtx14'},{ipaddr: '127.0.0.12', nickname: 'testtx13'},{ipaddr: '127.0.0.14', nickname: 'testtx12'},
			{ipaddr: '127.0.0.15', nickname: 'testtx15'}];
		this.rxunitlist = [{ipaddr: '127.0.0.2', nickname: 'testrx'}];
		this.dvrunitlist = [{ipaddr: '127.0.0.3', nickname: 'testdvr'}];*/
		
	}
	twidget.ontopanel = function(){
		if (isworkingpanel) this.parts[0].ontopanel();
		else {
			
		}
	}
		
	twidget.draggable = true;
	
	var tpart = new WidgetPart({
		widget: twidget,
		style: 'position: absolute; z-index: 1000000;',
		className: 'item_child movable'
	});
	tpart.downoffset = 0;
	tpart.element.innerHTML = '<div class="item_child" style="cursor: default; font-size: 22px; width: 100%; height: 100%; font-family: time; color: white; text-align: center;">'+
		'<br>Horizontal<br>Unit List</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'overflow-y: auto; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; background: rgba(0,0,0,0.5);';
	tpart.moving = noop;
	tpart.drop = noop;
	tpart.ontopanel = function(){
	
		if (!activepanel){	
			this.widget.dblclick = function(){
				//console.log(this);
				
					pb.openDialog({
						title: '<span style="font-size: 21px;">Widget Properties:</span>',
						content: '<br>Select a List Type:<br>\
									<select id="widget-unit-type-select">\
										<option value="encoders">Encoders</option>\
										<option value="decoders">Decoders</option>\
										<option value="dvrs">DVRs</option>\
									</select><br><br>\
									Units:<br>\
									<div id="widget-unit-list" style="width: 645px; height: 250px; background: grey; overflow-y: scroll;"></div>\
									<input value="Check All" type="button" id="check-all-unit-list" style="position: absolute; left: 4px; top: 360px;" />\
									<input value="Uncheck All" type="button" id="uncheck-all-unit-list" style="position: absolute; left: 80px; top: 360px;" />',
						width: '700',
						height: '500',
						yesorno: true,
						init: function(){
						
							switch (this.core.vars.unittype){
							
								case 'encoders':
									var ulist = this.txunitlist;
									this.unittype = 'encoders';
									$('#widget-unit-type-select').val('encoders');
									break;
								case 'decoders':
									var ulist = this.rxunitlist;
									this.unittype = 'decoders';
									$('#widget-unit-type-select').val('decoders');
									break;
								case 'dvrs':
									var ulist = this.dvrunitlist;
									this.unittype = 'dvrs';
									$('#widget-unit-type-select').val('dvrs');
									break;
								default:
								
									break;
							
							}
						
							var str = '';
							
							for (var i=0; i<ulist.length; i++){
							
								if (ulist[i].CommExpired !== '0') var tsr = ' color: red !important;';
								else tsr = '';
								
								str += '<div style="display: inline-block; '+tsr+'"><input type="checkbox" class="unitlist-checkbox" id="'+ulist[i].ipaddr+'_checkbox" />&nbsp;'+
									ulist[i].nickname+'</div><br>';
								
							}
							$('#widget-unit-list')[0].innerHTML = str;
							for (var i=0; i<this.core.vars.finalunitlist.length; i++){
								for (var j=0; j<$('.unitlist-checkbox').length; j++){
									if ((this.core.vars.finalunitlist[i].ipaddr+'_checkbox') == $('.unitlist-checkbox')[j].id){
										$($('.unitlist-checkbox')[j]).prop('checked', true);
									}
								}
							}
							
							$('#check-all-unit-list').click(function(){
								$('.unitlist-checkbox').prop('checked', true);
							});
							
							$('#uncheck-all-unit-list').click(function(){
								$('.unitlist-checkbox').prop('checked', false);
							});
							
							$('#widget-unit-type-select')[0].onchange = function(){
							
								if ($('#widget-unit-type-select')[0].value == 'encoders'){
								
									var str = '';
									for (var i=0; i<this.txunitlist.length; i++){
									
										if (this.txunitlist[i].CommExpired !== '0') var tsr = ' color: red !important;';
										else tsr = '';
										
										str += '<div style="display: inline-block; '+tsr+'"><input type="checkbox" class="unitlist-checkbox" id="'+this.txunitlist[i].ipaddr+'_checkbox" />&nbsp;'+
											this.txunitlist[i].nickname+'</div><br>'

									}
									$('#widget-unit-list')[0].innerHTML = str;
									
									this.unittype = 'encoders';
								
								}
								else if ($('#widget-unit-type-select')[0].value == 'decoders'){
								
									var str = '';
									for (var i=0; i<this.rxunitlist.length; i++){
											
										if (this.rxunitlist[i].CommExpired !== '0') var tsr = ' color: red !important;';
										else tsr = '';
										
										str += '<div style="display: inline-block; '+tsr+'"><input type="checkbox" class="unitlist-checkbox" id="'+this.rxunitlist[i].ipaddr+'_checkbox" />&nbsp;'+
											this.rxunitlist[i].nickname+'</div><br>'

									}
									$('#widget-unit-list')[0].innerHTML = str;
									
									this.unittype = 'decoders';
								
								}
								else if ($('#widget-unit-type-select')[0].value == 'dvrs'){
								
									var str = '';
									for (var i=0; i<this.dvrunitlist.length; i++){
									
										if (this.dvrunitlist[i].CommExpired !== '0') var tsr = ' color: red !important;';
										else tsr = '';
										
										str += '<div style="display: inline-block; '+tsr+'"><input type="checkbox" class="unitlist-checkbox" id="'+this.dvrunitlist[i].ipaddr+'_checkbox" />&nbsp;'+
											this.dvrunitlist[i].nickname+'</div><br>'
				
									}
									$('#widget-unit-list')[0].innerHTML = str;
									
									this.unittype = 'dvrs';
								
								}
							
							}.bind(this);
							
							
							
						}.bind(this),
						confirmcommand: function(){
							
							if (this.unittype == 'encoders'){
								var ulist = this.txunitlist;
							}
							else if (this.unittype == 'decoders'){
								var ulist = this.rxunitlist;
							}
							else if (this.unittype == 'dvrs'){
								var ulist = this.dvrunitlist;
							}
							
							var tulist = [];
							for (var pk=0; pk<ulist.length; pk++){
								if ($(document.getElementById(ulist[pk].ipaddr+'_checkbox')).prop('checked')) tulist.push(ulist[pk]);
								
							}

							this.core.vars.unittype = this.unittype;
							this.core.vars.finalunitlist = tulist;
							
						}.bind(this)
					
					});
				
				
				
			}.bind(this.widget);
		
		}
		else{

			this.element.innerHTML = '<div style="overflow-y: hidden; overflow-x: scroll; height: calc(100% + 16px);"></div>';
			
			this.element.style.height = '100%';
			this.element.style.top = '0%';
			this.widget.parts[0].element.style.display = 'block';
			this.widget.parts[1].element.style.display = 'none';
			this.widget.parts[0].element.style.overflowY = 'hidden';
			
			this.widget.unitlist = this.widget.core.vars.finalunitlist;
			
			var eletable = document.createElement('table');
			eletable.style.height = '100%';//'calc(100% - 15px)';
			var elerow = document.createElement('tr');
			$(eletable).append(elerow);
			
			for (var unitind=0; unitind<this.widget.unitlist.length; unitind++){
			
				var eletd = document.createElement('td');
				
				eletd.style.minWidth = '200px';
				eletd.style.height = '100%';
				eletd.style.verticalAlign = 'middle';
				eletd.style.textAlign = 'center';
				eletd.style.color = 'white';
				eletd.style.fontFamily = 'time';
				eletd.style.fontSize = '1.5em';
				eletd.style.className = this.widget.id+'-unit-list-item unselectable';
			
				var ip = this.widget.unitlist[unitind].ipaddr;
				
				$(eletd).append(this.widget.unitlist[unitind].nickname);
				
				eletd.onclick = function(eletd, ip){
				
					//console.log(ip);
				
					if (eletd.style.backgroundColor == '' || eletd.style.backgroundColor == 'none'){
						eletd.style.backgroundColor = 'white';
						eletd.style.color = 'black';
					}
					else {
						eletd.style.backgroundColor = '';
						eletd.style.color = 'white';
					}
					
				}.bind(this, eletd, ip);

				$(elerow).append(eletd);
				
			}
			
			$(this.element.children[0]).append(eletable);
		
		}
	
	}
	twidget.addPart(tpart);
	
	var tpart2 = new WidgetPart({
		widget: twidget, 
		style: 'display: none; color: white; position: absolute; left: 0%; top: 0%; height: 100%; width: 100%; z-index: 999999; font-size: 100%; background: rgba(0,0,0,0.5);', 
		className: 'item_child'
	});
	tpart2.element.innerHTML = '';
	tpart2.responsive = false;
	twidget.addPart(tpart2);
	
	return twidget;
}