

function dpad(){	
	
	var twidget = new Widget({
		style: 'margin: 4px; float: left; width: 100px; height: 100px; position: relative; z-index: 1000000;', 
		className: 'draggable cloneable',
		set: 'dpad',
		id: 'Default-Widget-8'
	});
	twidget.draggable = true;
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 33%; height: 33%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '\
		<img style="width: 100%; height: 100%;"\
			src="images/widgets/arrowkeysl1.png" class="item_child" />\
		<img style="width: 100%; height: 100%; display: none;"\
			src="images/widgets/arrowkeysl2.png" class="item_child" />';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 0%; top: 33%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		this.element.children[0].style.display = "none";
		this.element.children[1].style.display = "block";
		TweenMax.to($( this.element ), 0.08, {scaleX:1.14, scaleY: 1.14, onComplete: function(){
			TweenMax.to($( this.element ), 0.08, {scaleX:1.0, scaleY: 1.0});
		}.bind(this)});
	}
	tpart.clickup = tpart.hoverout = function(){
		this.element.children[1].style.display = "none";
		this.element.children[0].style.display = "block";
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 33%; height: 33%;',
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '\
		<img style="width: 100%; height: 100%;"\
			src="images/widgets/arrowkeysu1.png" class="item_child" />\
		<img style="width: 100%; height: 100%; display: none;"\
			src="images/widgets/arrowkeysu2.png" class="item_child" />';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 33%; top: 0%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		this.element.children[0].style.display = "none";
		this.element.children[1].style.display = "block";
		TweenMax.to($( this.element ), 0.08, {scaleX:1.14, scaleY: 1.14, onComplete: function(){
			TweenMax.to($( this.element ), 0.08, {scaleX:1.0, scaleY: 1.0});
		}.bind(this)});
		//TweenMax.to($( this.element ), 0.08, {scaleX:1.22, scaleY: 1.22});
	}
	tpart.clickup = tpart.hoverout = function(){
		this.element.children[1].style.display = "none";
		this.element.children[0].style.display = "block";
		//TweenMax.to($( this.element ), 0.08, {scaleX:1, scaleY: 1});
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 33%; height: 33%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '\
		<img style="width: 100%; height: 100%;"\
			src="images/widgets/arrowkeysr1.png" class="item_child" />\
		<img style="width: 100%; height: 100%; display: none;"\
			src="images/widgets/arrowkeysr2.png" class="item_child" />';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 66%; top: 33%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		this.element.children[0].style.display = "none";
		this.element.children[1].style.display = "block";
		TweenMax.to($( this.element ), 0.08, {scaleX:1.14, scaleY: 1.14, onComplete: function(){
			TweenMax.to($( this.element ), 0.08, {scaleX:1.0, scaleY: 1.0});
		}.bind(this)});
		//TweenMax.to($( this.element ), 0.08, {scaleX:1.22, scaleY: 1.22});
	}
	tpart.clickup = tpart.hoverout = function(){
		this.element.children[1].style.display = "none";
		this.element.children[0].style.display = "block";
		//TweenMax.to($( this.element ), 0.08, {scaleX:1, scaleY: 1});
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 33%; height: 33%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '\
		<img style="width: 100%; height: 100%;"\
			src="images/widgets/arrowkeysd1.png" class="item_child" />\
		<img style="width: 100%; height: 100%; display: none;"\
			src="images/widgets/arrowkeysd2.png" class="item_child" />';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 33%; top: 66%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		this.element.children[0].style.display = "none";
		this.element.children[1].style.display = "block";
		TweenMax.to($( this.element ), 0.08, {scaleX:1.14, scaleY: 1.14, onComplete: function(){
			TweenMax.to($( this.element ), 0.08, {scaleX:1.0, scaleY: 1.0});
		}.bind(this)});
	}
	tpart.clickup = tpart.hoverout = function(){
		this.element.children[1].style.display = "none";
		this.element.children[0].style.display = "block";
	};
	twidget.addPart(tpart);
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 1000000; width: 33%; height: 33%;', 
		className: 'movable item_child'
	});
	tpart.element.innerHTML = '\
		<img style="width: 100%; height: 100%;"\
			src="images/widgets/arrowkeysc1.png" class="item_child" />\
		<img style="width: 100%; height: 100%; display: none;"\
			src="images/widgets/arrowkeysc2.png" class="item_child" />';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 33%; top: 33%;';
	tpart.moving = noop; tpart.drop = noop;
	tpart.click = function(){
		this.element.children[0].style.display = "none";
		this.element.children[1].style.display = "block";
		TweenMax.to($( this.element ), 0.08, {scaleX:1.14, scaleY: 1.14, onComplete: function(){
			TweenMax.to($( this.element ), 0.08, {scaleX:1.0, scaleY: 1.0});
		}.bind(this)});
	}
	tpart.clickup = tpart.hoverout = function(){
		this.element.children[1].style.display = "none";
		this.element.children[0].style.display = "block";
	};
	twidget.addPart(tpart);
	
	return twidget;
}