

function dial(){	
	
	var twidget = new Widget({
		style: 'margin: 4px; float: left; width: 100px; height: 100px; position: relative; z-index: 1000000;', 
		className: 'draggable cloneable',
		aspectratio: true, 
		set: 'dial',
		id: 'Default-Widget-6'
	});
	twidget.draggable = true;
	
	var tpart = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 100000; width: 100%; height: 100%;', 
		className: 'item_child movable'
	});
	tpart.element.innerHTML = '\
		<div style="width: 100%; height: 100%; opacity: 0.7;\
		background: url(images/widgets/knob-bg.png) 0 0;\
		background-size: 200% 100%;" class="item_child">\
			<div style="position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; opacity: 1.0;"\
				class="item_child">\
				<div style="position: absolute; left: 44%; top: 14%; width: 12%; height: 12%; opacity: 1.0;\
				background: url(images/widgets/knob.png) 0 0;\
				background-size: 200% 100%;" class="item_child">\
				</div>\
			</div>\
		</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.children[0].style.backgroundPosition = "100% 0";
		this.element.children[0].children[0].style.backgroundPosition = "100% 0";
		this.down = true;
	}
	tpart.hoverin = function(){
		this.element.children[0].style.opacity = 1.0;
	}
	tpart.clickup = function(){
		this.down = false;
		this.element.children[0].style.backgroundPosition = "0 0";
		this.element.children[0].children[0].style.backgroundPosition = "0 0";
		//TweenMax.to($( this.element.children[0].children[0] ), 0.5, {css: {rotation: 0}});
		if (this.widget.script){
			var tscript = this.widget.script.split('this.value').join(this.angle);
			evalScript(tscript, this, 'script');
		}
	};
	tpart.drop = function(){
		//TweenMax.to($( this.element.children[0].children[0] ), 0.5, {css: {rotation: 0}});
		this.down = false;
		this.element.children[0].style.opacity = 0.7;
		this.element.children[0].style.backgroundPosition = "0 0";
		this.element.children[0].children[0].style.backgroundPosition = "0 0";
		if (this.widget.script){
			var tscript = this.widget.script.split('this.value').join(this.angle);
			evalScript(tscript, this, 'script');
		}
	};
	tpart.hoverout = function(){
		if (this.down) return;
		this.element.children[0].style.opacity = 0.7;
		this.element.children[0].style.backgroundPosition = "0 0";
		this.element.children[0].children[0].style.backgroundPosition = "0 0";
	};
	tpart.update = function(){
		if (this.down) { 
			var elebox = this.element.getBoundingClientRect();
			var vtocenter = {x: pb.mouse.x - elebox.left - (elebox.right - elebox.left)/2, y: pb.mouse.y - elebox.top - (elebox.bottom - elebox.top)/2};
			var tangle = calcAngle(0, 0, vtocenter.x, vtocenter.y);
			
			if (undef(this.angle)) this.angle = 0;

			if (!((this.angle < 0 && tangle > 0 && -this.angle < 135 && tangle < 135) ||
				(this.angle > 0 && tangle < 0 && this.angle < 135 && -tangle < 135))){
				this.angle = tangle;
				//TweenMax.to($( this.element.children[0].children[0] ), 0, {css: {rotation: tangle}});
				tweencss({
						object: this.element.children[0].children[0],
						time: tangle,
						props: {rotationZ: this.angle},
						to: {rotationZ: tangle}
					});
				if (tangle<0) tangle = (180 - -tangle) + 180; 
				this.widget.value = (tangle / 360) * 100;
			}
		}
	};
	tpart.ontopanel = function(){
		//$( this.widget.element ).resizable( "option", "aspectRatio", true );
		if (isworkingpanel) this.element.onclick = this.click;
	}
	twidget.addPart(tpart);
	
	return twidget;
}