

function imagewidget(){	
	
	var twidget = new Widget({
		style: 'margin: 4px; float: left; width: 80px; height: 80px; position: relative; z-index: 1000000;', 
		className: 'draggable cloneable', 
		set: 'image',
		id: 'Default-Widget-14',
		init: function(){
			if (activepanel){
				var self = this;
				this.setImage = function(url){
					self.parts[0].element.style.background = 'url(projects/'+project.puid+'/'+url+')';
					self.parts[0].element.style.backgroundSize = '100% 100%';
				}
			}
		},
		ontopanel: function(){
			if (!activepanel){
				this.parts[0].ontopanel();
				this.doubleclick = function(){
					pb.openDialog({
						confirm: false,
						//title:'Edit this widget:', 
						content:'<div style="margin: 15px;">Select a new image for the widget\'s background: <br><input id="widget_bg" style="width: 84px;" value="" type="file"/></div>', 
						style: {
							'border-radius': '15px',
							height: '120px',
							width: '430px'
						},
						init: function(){
							var fileInput = document.getElementById('widget_bg');
							fileInput.addEventListener('change', function(e) {
								var file = fileInput.files[0];
								var imageType = /image.*/;
								if (file.type.match(imageType)) {
									/*var reader = new FileReader();
									reader.onload = function(e) {
										//fileDisplayArea.innerHTML = "";
										pb.tempvar1 = reader.result;
										if (pb.tempvar1) pb.getItemById($('.outlined')[0].id).parts[0].element.style.background = 'url('+pb.tempvar1+')';
										if (pb.tempvar1) pb.getItemById($('.outlined')[0].id).parts[0].element.style.backgroundSize = '100% 100%';
										pb.closeDialog();
									}
									reader.readAsDataURL(file);*/
									if (pb.project && pb.project.core && pb.project.core.puid) var puid = pb.project.core.puid; else var puid = false; 
									sendFile(file, {command: 'image', puid: puid}, function(opts){
										//if (!pb.project.core.puid) pb.project.core.puid = opts.puid;
										//$('#assets-props-images').click();
										pb.getItemById($('.outlined')[0].id).parts[0].element.style.background = 'url('+opts.filename+')';
										pb.getItemById($('.outlined')[0].id).parts[0].element.style.backgroundSize = '100% 100%';
										pb.closeDialog();
									});
								} else alert("File not supported!");
							});
						},
					});
				};
			}
		}
	});
	
	var tpart = new WidgetPart({
		widget: twidget,
		style: 'position: absolute; left: 0%; top: 0%; z-index: 100000; width: 100%; height: 100%;\
			background-size: 100% 100%; background-image: url(images/widgets/imagebg.png);',
		className: 'item_child',
		elementHTML: '<div class="item_child" style="cursor: default; position: absolute;\
			left: 22px; top: 33px; font-family: Time; color: black; font-size: 20px;">Image</div>',
		ontopanel: function(){
			var drop = this.element;
			this.element.innerHTML = '';
			this.element.style.backgroundSize = '100% 100%';
	  
			addEventHandler(drop, 'dragover', cancelEvent);
			addEventHandler(drop, 'dragenter', cancelEvent);
			addEventHandler(drop, 'drop', function (e) {
				  e = e || window.event;   
				  if (e.preventDefault) e.preventDefault();
				  
				  var dt    = e.dataTransfer;
				  var files = dt.files;
				  for (var i=0; i<files.length; i++) {
					var file = files[i];
					
					if (pb.project && pb.project.core && pb.project.core.puid) var puid = pb.project.core.puid; else var puid = false; 
					sendFile(file, {command: 'image', puid: puid}, function(opts){
						//if (!pb.project.core.puid) pb.project.core.puid = opts.puid;
						//$('#assets-props-images').click();
						pb.getItemById($('.outlined')[0].id).parts[0].element.style.background = 'url('+opts.filename+')';
						pb.getItemById($('.outlined')[0].id).parts[0].element.style.backgroundSize = '100% 100%';
						pb.closeDialog();
					});
					
					
					/*var reader = new FileReader();
					  
					reader.readAsDataURL(file);
					addEventHandler(reader, 'loadend', function(e, file) {
						var bin = this.result; 
						drop.style.backgroundImage = 'url(' + bin + ')';
						drop.style.backgroundSize = '100% 100%';
					}.bindToEventHandler(file));*/
				  }
				  
				  
				  
				  return false;
			});
		}
	});
	twidget.addPart(tpart);
	
	return twidget;
}