

function vlist(){	
	
	var twidget = new Widget({
		style: 'margin: 4px; float: left; width: 100px; height: 100px; position: relative; display: block; z-index: 1000000;', 
		className: 'draggable cloneable',
		set: 'vlist',
		id: 'Default-Widget-10'
	});
	twidget.core.vars.unittype = 'encoders';
	/*twidget.click = function(){
		$('.widget-list-item').css({backgroundColor: 'rgba(0,0,0,0.0)', color: 'white'});
		$('.widget-list-item').removeClass('widget-list-selected');
	}*/
	twidget.init = function(){
		if (this.ontopanel && isworkingpanel) this.ontopanel();
	}
	twidget.ontopanel = function(){
		if (isworkingpanel) this.parts[0].ontopanel();
	}
	
		
	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>Vertical<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.element.innerHTML = '<div></div>';
			this.element.style.height = '90%';
			this.element.style.top = '10%';
			this.widget.parts[1].element.innerHTML = 'Select a List Type:<br><select>\
												<option value="encoders">Encoders</option>\
												<option value="decoders">Decoders</option>\
												<option value="dvrs">DVRs</option>\
												</select>';
			//this.widget.parts[1].element.style.fontSize = (0.18*parseInt($(this.widget.element).css('height')))+'px';
			this.widget.parts[0].element.style.display = 'none';
			this.widget.parts[1].element.style.display = 'block';
			this.widget.core.vars.unittype = 'encoders';
			
			//console.log(this.widget.parts[1].element.children[1]);
			this.widget.parts[1].element.children[1].onchange = 
				function unitTypeChange(){

					var ele = this.parts[1].element.children[1];
					var tstr = ele.options[ele.selectedIndex].value;
					//console.log(tstr);
					this.core.vars.unittype = tstr;

				}.bind(this.widget);
			//unitTypeChange;//.call(null, this.widget, this.widget.parts[1].element.children[1]);
			//$(this.widget.parts[1].element).change(function(e){
				//this.widget.core.vars.unittype = e.target;
				//console.log(e);
			//}.bind(this));
		}
		else{
			console.log('hm: ', this.widget.core.vars.unittype);
			switch (this.widget.core.vars.unittype){
				case 'encoders':
					console.log('encoders true');
					this.element.innerHTML = '<div></div>';
					$.get("/php_includes/EchoAllUnitsTX.php", {},
						function(data){
							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.unitlist = objToArray(jsonDeserialize(data));
							
							console.log(this.widget.unitlist);
							for (var unitind=0; unitind<this.widget.unitlist.length; unitind++){
							
								var ele = document.createElement('div');
								var macele = document.createElement('div');
								macele.style.display = 'none';
								macele.innerHTML = this.widget.unitlist[unitind].ipaddr;
								ele.style.color = 'white';
								ele.style.minHeight = '2.6em';//(100/this.widget.dvrlist.length) + '%';
								ele.innerHTML = this.widget.unitlist[unitind].nickname;
								//ele.className = 'item_child';
								
								ele.className = ''+this.widget.id+'-unit-list-item';
								ele.style.border = '1px solid darkgrey';
								ele.onclick = function(){
									$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-list-item').css({backgroundColor: 'rgba(0,0,0,0.0)', color: 'white'});
									$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-list-item').removeClass(''+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected');
									this.style.backgroundColor = 'white';
									this.style.color = 'black';
									$(this).addClass(''+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected');
									//pb.getItemById(this.parentNode.parentNode.id).widget.core.vars.dvrmac =
										//$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected')[0].children[0].innerHTML;
									pb.getItemById(this.parentNode.parentNode.id).widget.value =
										$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected')[0].children[0].innerHTML;
									console.log(pb.getItemById(this.parentNode.parentNode.id).widget.value);
									//console.log(pb.getItemById(this.parentNode.parentNode.id).widget.core.vars.dvrmac);
								}.bind(ele);
					
								$(this.element.children[0]).append(ele);
								$(ele).append(macele);
								
							}
						}.bind(this));
					break;
				case 'decoders':
					
					this.element.innerHTML = '<div></div>';
					$.get("/php_includes/EchoAllUnitsRX.php", {},
						function(data){
							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.unitlist = objToArray(jsonDeserialize(data));
							
							console.log(this.widget.unitlist);
							for (var unitind=0; unitind<this.widget.unitlist.length; unitind++){
							
								var ele = document.createElement('div');
								var macele = document.createElement('div');
								macele.style.display = 'none';
								macele.innerHTML = this.widget.unitlist[unitind].ipaddr;
								ele.style.color = 'white';
								ele.style.minHeight = '2.6em';//(100/this.widget.dvrlist.length) + '%';
								ele.innerHTML = this.widget.unitlist[unitind].nickname;
								//ele.className = 'item_child';
								
								ele.className = ''+this.widget.id+'-unit-list-item';
								ele.style.border = '1px solid darkgrey';
								ele.onclick = function(){
									$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-list-item').css({backgroundColor: 'rgba(0,0,0,0.0)', color: 'white'});
									$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-list-item').removeClass(''+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected');
									this.style.backgroundColor = 'white';
									this.style.color = 'black';
									$(this).addClass(''+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected');
									//pb.getItemById(this.parentNode.parentNode.id).widget.core.vars.dvrmac =
										//$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected')[0].children[0].innerHTML;
									pb.getItemById(this.parentNode.parentNode.id).widget.value = 
										$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected')[0].children[0].innerHTML;
									console.log(pb.getItemById(this.parentNode.parentNode.id).widget.value);
									//console.log(pb.getItemById(this.parentNode.parentNode.id).widget.core.vars.dvrmac);
								}.bind(ele);
					
								$(this.element.children[0]).append(ele);
								$(ele).append(macele);
								
							}
						}.bind(this));
					break;
				case 'dvrs':
					
					this.element.innerHTML = '<div></div>';
					$.get("/php_includes/EchoAllUnitsDVR.php", {},
						function(data){
							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.unitlist = objToArray(jsonDeserialize(data));
							
							console.log(this.widget.unitlist);
							for (var unitind=0; unitind<this.widget.unitlist.length; unitind++){
							
								var ele = document.createElement('div');
								var macele = document.createElement('div');
								macele.style.display = 'none';
								macele.innerHTML = this.widget.unitlist[unitind].ipaddr;
								ele.style.color = 'white';
								ele.style.minHeight = '2.6em';//(100/this.widget.dvrlist.length) + '%';
								ele.innerHTML = this.widget.unitlist[unitind].nickname;
								//ele.className = 'item_child';
								
								ele.className = ''+this.widget.id+'-unit-list-item';
								ele.style.border = '1px solid darkgrey';
								ele.onclick = function(){
									$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-list-item').css({backgroundColor: 'rgba(0,0,0,0.0)', color: 'white'});
									$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-list-item').removeClass(''+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected');
									this.style.backgroundColor = 'white';
									this.style.color = 'black';
									$(this).addClass(''+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected');
									//pb.getItemById(this.parentNode.parentNode.id).widget.core.vars.dvrmac =
										//$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected')[0].children[0].innerHTML;
									pb.getItemById(this.parentNode.parentNode.id).widget.value = 
										$('.'+pb.getItemById(this.parentNode.parentNode.id).widget.id+'-unit-selected')[0].children[0].innerHTML;
									console.log(pb.getItemById(this.parentNode.parentNode.id).widget.value);
									//console.log(pb.getItemById(this.parentNode.parentNode.id).widget.core.vars.dvrmac);
								}.bind(ele);
					
								$(this.element.children[0]).append(ele);
								$(ele).append(macele);
								
							}
						}.bind(this));
					break;
				default:
					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.element.innerHTML = '<div></div>';
					break;
			}
			
		}
	
	}
	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;
}