

function hslider(){	
	
	var twidget = new Widget({
		style: 'margin: 4px; float: left; width: 100px; height: 100px; position: relative; display: block; z-index: 1000000;', 
		className: 'draggable cloneable',
		set: 'hslider'
	});
		
	twidget.draggable = true;
	
	var tpart = new WidgetPart({
		widget: twidget,
		style: 'position: absolute; z-index: 1000000;',
		className: 'movable'
	});
	tpart.downoffset = 0;
	tpart.element.innerHTML = '<img class="item_child" src="images/widgets/slidercirc.png" style="width: 100%; height: 100%;" />';
	tpart.responsive = true;
	tpart.element.style.cssText += 'position: absolute; left: 41%; top: 41%; height: 18%; width: 18%;';
	tpart.moving = function(event){
		event.preventDefault();
		
		var newpos = (pb.mouse.vectortodown.x) + this.downoffset;
		var distance = ($(this.widget.element).outerWidth()*0.77)/2;
		if (newpos < -distance) newpos = -distance;
		if (newpos > distance) newpos = distance;
		$(this.element).css({'margin-left': newpos + 'px'});
	};
	tpart.drop = function(){
		if (this.widget.script){
			var tscript = this.widget.script.split('this.value').join(parseInt(this.element.style.marginLeft));
			evalScript(tscript, this, 'script');
			//TweenMax.to(this.element, 1, {marginLeft: 0+'px', ease: Elastic.easeOut});
		}
		this.downoffset = parseInt($(this.element).css('margin-left'));
	}
	tpart.element.className = 'movable';
	twidget.addPart(tpart);
	
	var tpart2 = new WidgetPart({
		widget: twidget, 
		style: 'position: absolute; z-index: 999999;', 
		className: 'item_child'
	});
	tpart2.element.innerHTML = '<img class="item_child" src="images/widgets/hsliderback.png" style="width: 100%; height: 100%;" />';
	tpart2.responsive = false;
	tpart2.element.style.cssText += 'position: absolute; left: 0px; top: 32%; height: 36%; width: 100%;';
	twidget.addPart(tpart2);
	
	return twidget;
}