

function numpad(){	
	
	var twidget = new Widget({
		style: 'margin: 4px; float: left; width: 100px; height: 100px; position: relative; z-index: 1000000;', 
		className: 'draggable cloneable',
		set: 'numpad'
	});
	twidget.draggable = true;
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad1a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad1b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 0%; top: 0%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '1'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad2a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad2b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 33%; top: 0%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '2'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;',
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad3a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad3b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 66%; top: 0%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '3'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad4a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad4b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 0%; top: 21%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '4'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad5a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad5b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 33%; top: 21%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '5'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad6a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad6b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 66%; top: 21%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '6'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;',
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad7a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad7b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 0%; top: 42%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '7'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad8a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad8b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 33%; top: 42%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '8'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad9a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad9b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 66%; top: 42%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '9'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypadaa.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypadab.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 0%; top: 63%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '*'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypad0a.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypad0b.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 33%; top: 63%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '0'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 31%; height: 19%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '<div style="width: 100%; height: 100%;" class="item_child">\
			<img src="images/widgets/keypadna.png" class="item_child" style="width: 100%; height: 100%;" />\
			<img src="images/widgets/keypadnb.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
		</div>';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 66%; top: 63%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		$(this.element.lastChild.children[0]).hide();
		$(this.element.lastChild.children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val(
			$(this.widget.parts[12].element.children[0].children[0]).val() + '#'
		);
		$(this.widget.parts[12].element.children[0].children[0]).scrollLeft(
			$(this.widget.parts[12].element.children[0].children[0]).width()
		);
	};
	tpart.hoverout = function(){
		$(this.element.lastChild.children[1]).hide();
		$(this.element.lastChild.children[0]).show();
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 58%; height: 15%; left: 0%; top: 84%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '\
		<div style="width: 100%; height: 100%;" class="item_child">\
			<input id="" type="text" class="" disabled="true" name="" style="width: 100%; height: 86%; background: black; color: #DDDDFF;">\
		</div>';
	tpart.responsive = true;
	tpart.moving = noop; tpart.drop = noop;
	tpart.init = function(){
		this.ontopanel();
	}
	tpart.click = noop;
	tpart.clickup = tpart.hoverout = noop;
	tpart.resize = function(){
		this.element.children[0].children[0].style.fontSize = ($(this.element).height()*0.68) + 'px';
	};
	tpart.ontopanel = function(){
		if (isworkingpanel) {
			this.setupinterval = setInterval(function(){
					if (this.element &&
					this.element.children[0] &&
					this.element.children[0].children[0]){
						$(this.element.children[0].children[0]).prop('disabled',false);
						clearInterval(this.setupinterval);
					}
				}.bind(this), 200);
		}
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 16%; height: 14%; left: 64%; top: 85%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '\
			<div class="item_child" style="width: 100%; height: 100%;">\
				<img src="images/widgets/keypadxa.png" class="item_child" style="width: 100%; height: 100%;" />\
				<img src="images/widgets/keypadxb.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
			</div>\
		';
	tpart.responsive = true;
	tpart.moving = noop; tpart.drop = noop;
	tpart.init = noop;
	tpart.click = function(){
		$(this.element.children[0].children[0]).hide();
		$(this.element.children[0].children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.children[0].children[1]).hide();
		$(this.element.children[0].children[0]).show();
		$(this.widget.parts[12].element.children[0].children[0]).val('');
	};
	tpart.hoverout = function(){
		$(this.element.children[0].children[1]).hide();
		$(this.element.children[0].children[0]).show();
	};
	tpart.resize = noop;
	tpart.ontopanel = noop;
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 16%; height: 14%; left: 81%; top: 85%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '\
			<div class="item_child" style="width: 100%; height: 100%;">\
				<img src="images/widgets/keypadea.png" class="item_child" style="width: 100%; height: 100%;" />\
				<img src="images/widgets/keypadeb.png" class="item_child" style="display: none; width: 100%; height: 100%;" />\
			</div>\
		';
	tpart.responsive = true;
	tpart.moving = noop; 
	tpart.drop = noop;
	tpart.init = noop;
	tpart.click = function(){
		$(this.element.children[0].children[0]).hide();
		$(this.element.children[0].children[1]).show();
	}
	tpart.clickup = function(){
		$(this.element.children[0].children[1]).hide();
		$(this.element.children[0].children[0]).show();
		
		if (this.widget.script){
			var tscript = this.widget.script.split('this.value').join($(this.widget.parts[12].element.children[0].children[0]).val());
			//sendScript(tscript);
			evalScript(tscript, this, 'script');
		}
	};
	tpart.hoverout = function(){
		$(this.element.children[0].children[1]).hide();
		$(this.element.children[0].children[0]).show();
	};
	tpart.resize = noop;
	tpart.ontopanel = noop;
	twidget.addPart(tpart);
	
	return twidget;
}