/******************************************************************************
@owner: SVSi
@author: Arthur Johnson
@function: Initialize Button Editor HTML/Utilities
@openButtonEditor
@closeButtonEditor
@addUserButton
@initButtonEditor
*******************************************************************************/
var itemEditor = {};

var fabricCanvas1 = false;
var fabricCanvas2 = false;
	
function openItemEditor(opts){

	if (undef(opts.item)) return;
	var item = opts.hasOwnProperty('item') ? opts.item : false;
		
	itemEditor.open = true;
	itemEditor.item = item;
	itemEditor.tempitem = {};
	itemEditor.tempitem.core = {};
	itemEditor.tempitem.core.scripts = ['',''];
	if (item.core.scripts[0]) itemEditor.tempitem.core.scripts[0] = item.core.scripts[0];
	if (item.core.scripts[1]) itemEditor.tempitem.core.scripts[1] = item.core.scripts[1];
	itemEditor.tempitem.core.conditional = '';
	if (item.core.conditional) itemEditor.tempitem.core.conditional = item.core.conditional;
	itemEditor.state = 0;
	itemEditor.cssfilter = 'hue-rotate(0deg) saturate(1)';
	
	if (opts.tolibrary) itemEditor.tolibrary = true;
	else itemEditor.tolibrary = false;
	
	$(itemEditor.pane).stop().fadeIn();
	
	var preview = document.getElementById('item-preview');
	var previewarea = document.getElementById('item-preview-panel');
	var canvas = document.getElementById('fabric-canvas');
	var canvaswrapper = document.getElementById('canvas-wrapper');
	
	//preview.innerHTML = '';
	canvaswrapper.style.display = 'none';
	
	if (pb.selected && pb.selectedtype == 'button'){
	
		var thisbutton = pb.selected;
		var preview = document.getElementById('item-preview');
		
		$('#item-name-input').val(thisbutton.id);

		preview.style.backgroundImage = thisbutton.style.backgroundImage;
		preview.style.backgroundSize = '100% 100%';
		
	}
	
	$('#item-width-input-button').click(function(){
		
		$(preview).width($('#item-width-input').val());
		
		preview.style.left = (parseInt($(previewarea).outerWidth())/2) - (parseInt($(preview).outerWidth())/2) + 'px';
		preview.style.top = (parseInt($(previewarea).outerHeight())/2) - (parseInt($(preview).outerHeight())/2) + 'px';
		
		itemEditor.tempitem.states[itemEditor.state].images[0] = fabricCanvas1.toDataURL('image/png');
		itemEditor.tempitem.states[itemEditor.state].imageobj = fabricCanvas1.toJSON();
		
		fabricCanvas1.clear();
		
		canvaswrapper.style.position = 'absolute';
		canvaswrapper.style.top = preview.style.top;
		canvaswrapper.style.left = preview.style.left;
		
		fabricCanvas1.setWidth($(preview).outerWidth());
		fabricCanvas1.setHeight($(preview).outerHeight());
		
		var imgElement = document.createElement('img');
		imgElement.src = itemEditor.tempitem.states[itemEditor.state].images[0];
		imgElement.width = $(preview).outerWidth();
		imgElement.height = $(preview).outerHeight();
		var imgInstance = new fabric.Image(imgElement, {
			left: 0,
			top: 0,
			angle: 0,
			opacity: 1
		});
		fabricCanvas1.add(imgInstance);
		fabricCanvas1.renderAll();
		
	});
	$('#item-height-input-button').click(function(){
		
		$(preview).height($('#item-height-input').val());
		
		preview.style.left = (parseInt($(previewarea).outerWidth())/2) - (parseInt($(preview).outerWidth())/2) + 'px';
		preview.style.top = (parseInt($(previewarea).outerHeight())/2) - (parseInt($(preview).outerHeight())/2) + 'px';
		
		itemEditor.tempitem.states[itemEditor.state].images[0] = fabricCanvas1.toDataURL('image/png');
		itemEditor.tempitem.states[itemEditor.state].imageobj = fabricCanvas1.toJSON();
		
		fabricCanvas1.clear();
		
		canvaswrapper.style.position = 'absolute';
		canvaswrapper.style.top = preview.style.top;
		canvaswrapper.style.left = preview.style.left;
		
		fabricCanvas1.setWidth($(preview).outerWidth());
		fabricCanvas1.setHeight($(preview).outerHeight());
		
		var imgElement = document.createElement('img');
		imgElement.src = itemEditor.tempitem.states[itemEditor.state].images[0];
		imgElement.width = $(preview).outerWidth();
		imgElement.height = $(preview).outerHeight();
		var imgInstance = new fabric.Image(imgElement, {
			left: 0,
			top: 0,
			angle: 0,
			opacity: 1
		});
		fabricCanvas1.add(imgInstance);
		fabricCanvas1.renderAll();

	});
	$('#item-border-size').keyup(function(){
	
		$(preview).css({'border': $(this).val() + 'px solid black'});
		$('#item-preview').css('borderColor', $('#borderColorSelector div').css('backgroundColor'));
		
		preview.style.left = (parseInt($(previewarea).outerWidth())/2) - (parseInt($(preview).outerWidth())/2) + 'px';
		preview.style.top = (parseInt($(previewarea).outerHeight())/2) - (parseInt($(preview).outerHeight())/2) + 'px';
	
	});
	
	if (item instanceof Button){
	
		$('#item-label-input').val(stripHTML(item.textnode.innerHTML));
		$('#item-width-input').val(parseInt(item.element.style.width));
		$('#item-height-input').val(parseInt(item.element.style.height));
		
		$('#item-editor-titlebar').html(stripHTML(item.core.id));
		$('#state-buttons').show();
		$('#item-script').show();
		$('#item-conditional').show();
		$('#item-border').show();
		$('#item-boxshadow').show();
		
		$('#item-editor-autoresize').hide();
		
		$('#item-basics-container').css({height: '0px'});
		$('#item-script-container').css({height: '0px'});
		$('#item-conditional-container').css({height: '0px'});
		$('#item-border-container').css({height: '0px'});
		$('#item-boxshadow-container').css({height: '0px'});
		$('#item-textshadow-container').css({height: '0px'});
		
		preview.style.cssText = item.element.style.cssText;
		preview.style.backgroundImage = item.core.states[0].bgimage;
		preview.style.backgroundSize = '100% 100%';
		preview.style.width = $(item.element).width() + 'px';
		preview.style.height = $(item.element).height() + 'px';
		preview.style.position = 'absolute';
		preview.style.left = (parseInt($(previewarea).outerWidth())/2) - (parseInt($(preview).outerWidth())/2) + 'px';
		preview.style.top = (parseInt($(previewarea).outerHeight())/2) - (parseInt($(preview).outerHeight())/2) + 'px';

		itemEditor.state = 0;
		itemEditor.tempitem.states = deepCopy(item.core.states);
		itemEditor.tempitem.scripts = deepCopy(item.core.scripts);
		itemEditor.tempitem.conditional = item.core.conditional;
		
		if (itemEditor.tempitem.conditional && itemEditor.tempitem.conditional != ''){
			$('#conditionalarea').val(itemEditor.tempitem.conditional);
			$('#maintextarea').val(itemEditor.tempitem.conditional);
		}
		else $('#conditionalarea').val('//if ([127.0.0.1].property == value)\n//	this.state = active\n//else\n//	this.state = inactive');

		$('#touchpanelkey-select').val(item.core.touchpanelkey);
		switch (item.core.touchpanelkey){
			case false: default:
				$('#touchpanelkey-radio1').prop('checked', false);
				$('#touchpanelkey-radio2').prop('checked', false);
				$('#touchpanelkey-radio3').prop('checked', false);
				$('#touchpanelkey-radio4').prop('checked', false);
				$('#touchpanelkey-radio5').prop('checked', false);
				$('#touchpanelkey-radio6').prop('checked', false);
				$('#touchpanelkey-radio7').prop('checked', false);
				$('#touchpanelkey-radio8').prop('checked', false);
				break;
			case 1:
				$('#touchpanelkey-radio1').prop('checked', true);
				$('#touchpanelkey-radio2').prop('checked', false);
				$('#touchpanelkey-radio3').prop('checked', false);
				$('#touchpanelkey-radio4').prop('checked', false);
				$('#touchpanelkey-radio5').prop('checked', false);
				$('#touchpanelkey-radio6').prop('checked', false);
				$('#touchpanelkey-radio7').prop('checked', false);
				$('#touchpanelkey-radio8').prop('checked', false);
				break;
			case 2:
				$('#touchpanelkey-radio1').prop('checked', false);
				$('#touchpanelkey-radio2').prop('checked', true);
				$('#touchpanelkey-radio3').prop('checked', false);
				$('#touchpanelkey-radio4').prop('checked', false);
				$('#touchpanelkey-radio5').prop('checked', false);
				$('#touchpanelkey-radio6').prop('checked', false);
				$('#touchpanelkey-radio7').prop('checked', false);
				$('#touchpanelkey-radio8').prop('checked', false);
				break;
			case 3:
				$('#touchpanelkey-radio1').prop('checked', false);
				$('#touchpanelkey-radio2').prop('checked', false);
				$('#touchpanelkey-radio3').prop('checked', true);
				$('#touchpanelkey-radio4').prop('checked', false);
				$('#touchpanelkey-radio5').prop('checked', false);
				$('#touchpanelkey-radio6').prop('checked', false);
				$('#touchpanelkey-radio7').prop('checked', false);
				$('#touchpanelkey-radio8').prop('checked', false);
				break;
			case 4:
				$('#touchpanelkey-radio1').prop('checked', false);
				$('#touchpanelkey-radio2').prop('checked', false);
				$('#touchpanelkey-radio3').prop('checked', false);
				$('#touchpanelkey-radio4').prop('checked', true);
				$('#touchpanelkey-radio5').prop('checked', false);
				$('#touchpanelkey-radio6').prop('checked', false);
				$('#touchpanelkey-radio7').prop('checked', false);
				$('#touchpanelkey-radio8').prop('checked', false);
				break;
			case 5:
				$('#touchpanelkey-radio1').prop('checked', false);
				$('#touchpanelkey-radio2').prop('checked', false);
				$('#touchpanelkey-radio3').prop('checked', false);
				$('#touchpanelkey-radio4').prop('checked', false);
				$('#touchpanelkey-radio5').prop('checked', true);
				$('#touchpanelkey-radio6').prop('checked', false);
				$('#touchpanelkey-radio7').prop('checked', false);
				$('#touchpanelkey-radio8').prop('checked', false);
				break;
			case 6:
				$('#touchpanelkey-radio1').prop('checked', false);
				$('#touchpanelkey-radio2').prop('checked', false);
				$('#touchpanelkey-radio3').prop('checked', false);
				$('#touchpanelkey-radio4').prop('checked', false);
				$('#touchpanelkey-radio5').prop('checked', false);
				$('#touchpanelkey-radio6').prop('checked', true);
				$('#touchpanelkey-radio7').prop('checked', false);
				$('#touchpanelkey-radio8').prop('checked', false);
				break;
			case 7:
				$('#touchpanelkey-radio1').prop('checked', false);
				$('#touchpanelkey-radio2').prop('checked', false);
				$('#touchpanelkey-radio3').prop('checked', false);
				$('#touchpanelkey-radio4').prop('checked', false);
				$('#touchpanelkey-radio5').prop('checked', false);
				$('#touchpanelkey-radio6').prop('checked', false);
				$('#touchpanelkey-radio7').prop('checked', true);
				$('#touchpanelkey-radio8').prop('checked', false);
				break;
			case 8:
				$('#touchpanelkey-radio1').prop('checked', false);
				$('#touchpanelkey-radio2').prop('checked', false);
				$('#touchpanelkey-radio3').prop('checked', false);
				$('#touchpanelkey-radio4').prop('checked', false);
				$('#touchpanelkey-radio5').prop('checked', false);
				$('#touchpanelkey-radio6').prop('checked', false);
				$('#touchpanelkey-radio7').prop('checked', false);
				$('#touchpanelkey-radio8').prop('checked', true);
				break;
		}
		
	}
	
	preview.style.outline = '1px dotted grey';
	preview.style.zIndex = '49999';
	
	canvaswrapper.style.position = 'absolute';
	canvaswrapper.style.top = preview.style.top;
	canvaswrapper.style.left = preview.style.left;

	if (!fabricCanvas1){
	
		canvas.width = $(preview).outerWidth();
		canvas.height = $(preview).outerHeight();
		
		fabricCanvas1 = new fabric.Canvas('fabric-canvas', {
			isDrawingMode: true
		});

		fabric.Object.prototype.transparentCorners = false;
		
		var drawingModeEl = $('#drawing-mode')[0],
			  drawingOptionsEl = $('#drawing-mode-options')[0],
			  drawingColorEl = $('#drawing-color')[0],
			  drawingShadowColorEl = $('#drawing-shadow-color')[0],
			  drawingLineWidthEl = $('#drawing-line-width')[0],
			  drawingShadowWidth = $('#drawing-shadow-width')[0],
			  drawingShadowOffset = $('#drawing-shadow-offset')[0],
			  clearEl = $('#clear-canvas')[0];

		clearEl.onclick = function() { fabricCanvas1.clear().renderAll(); };

		drawingModeEl.onclick = function(){
			fabricCanvas1.isDrawingMode = !fabricCanvas1.isDrawingMode;
			if (fabricCanvas1.isDrawingMode){
				drawingModeEl.innerHTML = 'Cancel drawing mode';
				drawingOptionsEl.style.display = '';
			}
			else {
				drawingModeEl.innerHTML = 'Enter drawing mode';
				drawingOptionsEl.style.display = 'none';
			}
		};

		if (fabric.PatternBrush){
			var vLinePatternBrush = new fabric.PatternBrush(fabricCanvas1);
			vLinePatternBrush.getPatternSrc = function() {

				var patternCanvas = fabric.document.createElement('canvas');
				patternCanvas.width = patternCanvas.height = 10;
				var ctx = patternCanvas.getContext('2d');

				ctx.strokeStyle = this.color;
				ctx.lineWidth = 5;
				ctx.beginPath();
				ctx.moveTo(0, 5);
				ctx.lineTo(10, 5);
				ctx.closePath();
				ctx.stroke();

				return patternCanvas;
			};

			var hLinePatternBrush = new fabric.PatternBrush(fabricCanvas1);
			hLinePatternBrush.getPatternSrc = function() {

				var patternCanvas = fabric.document.createElement('canvas');
				patternCanvas.width = patternCanvas.height = 10;
				var ctx = patternCanvas.getContext('2d');

				ctx.strokeStyle = this.color;
				ctx.lineWidth = 5;
				ctx.beginPath();
				ctx.moveTo(5, 0);
				ctx.lineTo(5, 10);
				ctx.closePath();
				ctx.stroke();

				return patternCanvas;
			};

			var squarePatternBrush = new fabric.PatternBrush(fabricCanvas1);
			squarePatternBrush.getPatternSrc = function() {

					var squareWidth = 10, squareDistance = 2;

					var patternCanvas = fabric.document.createElement('canvas');
					patternCanvas.width = patternCanvas.height = squareWidth + squareDistance;
					var ctx = patternCanvas.getContext('2d');

					ctx.fillStyle = this.color;
					ctx.fillRect(0, 0, squareWidth, squareWidth);

					return patternCanvas;
					
			};

			var diamondPatternBrush = new fabric.PatternBrush(fabricCanvas1);
			diamondPatternBrush.getPatternSrc = function() {

				var squareWidth = 10, squareDistance = 5;
				var patternCanvas = fabric.document.createElement('canvas');
				var rect = new fabric.Rect({
					width: squareWidth,
					height: squareWidth,
					angle: 45,
					fill: this.color
				});

				var canvasWidth = rect.getBoundingRectWidth();

				patternCanvas.width = patternCanvas.height = canvasWidth + squareDistance;
				rect.set({ left: canvasWidth / 2, top: canvasWidth / 2 });
	
				var ctx = patternCanvas.getContext('2d');
				rect.render(ctx);

				return patternCanvas;
			};

			var texturePatternBrush = new fabric.PatternBrush(fabricCanvas1);
			
		}

		$('#drawing-mode-selector')[0].onchange = function() {

			if (this.value === 'hline') {
				fabricCanvas1.freeDrawingBrush = vLinePatternBrush;
			}
			else if (this.value === 'vline') {
				fabricCanvas1.freeDrawingBrush = hLinePatternBrush;
			}
			else if (this.value === 'square') {
				fabricCanvas1.freeDrawingBrush = squarePatternBrush;
			}
			else if (this.value === 'diamond') {
				fabricCanvas1.freeDrawingBrush = diamondPatternBrush;
			}
			else if (this.value === 'texture') {
				fabricCanvas1.freeDrawingBrush = texturePatternBrush;
			}
			else {
				fabricCanvas1.freeDrawingBrush = new fabric[this.value + 'Brush'](fabricCanvas1);
			}

			if (fabricCanvas1.freeDrawingBrush) {
				fabricCanvas1.freeDrawingBrush.color = drawingColorEl.value;
				fabricCanvas1.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
				fabricCanvas1.freeDrawingBrush.shadowBlur = parseInt(drawingShadowWidth.value, 10) || 0;
			}
		};

		drawingColorEl.onchange = function() {
			fabricCanvas1.freeDrawingBrush.color = this.value;
		};
		drawingShadowColorEl.onchange = function() {
			fabricCanvas1.freeDrawingBrush.shadowColor = this.value;
		};
		drawingLineWidthEl.onchange = function() {
			fabricCanvas1.freeDrawingBrush.width = parseInt(this.value, 10) || 1;
			this.previousSibling.innerHTML = this.value;
		};
		drawingShadowWidth.onchange = function() {
			fabricCanvas1.freeDrawingBrush.shadowBlur = 20;//parseInt(this.value, 10) || 0;
			this.previousSibling.innerHTML = this.value;
		};
		drawingShadowOffset.onchange = function() {
			fabricCanvas1.freeDrawingBrush.shadowOffsetX =
			fabricCanvas1.freeDrawingBrush.shadowOffsetY = 20;//parseInt(this.value, 10) || 0;
			this.previousSibling.innerHTML = this.value;
		};

		if (fabricCanvas1.freeDrawingBrush) {
			fabricCanvas1.freeDrawingBrush.color = drawingColorEl.value;
			fabricCanvas1.freeDrawingBrush.width = parseInt(drawingLineWidthEl.value, 10) || 1;
			fabricCanvas1.freeDrawingBrush.shadowBlur = 20;
		}
	}
	else {
		fabricCanvas1.setWidth($(preview).outerWidth());
		fabricCanvas1.setHeight($(preview).outerHeight());
	}
	
	$('#item-label-input').change(function(){
		pb.labelchanged = true;
	});
	
	//$("#border-tl-px").prop("checked", true);
	$("#border-tl-px").click();

	$('#item-basics').click();
	
	fabricCanvas1.clear();
	
	setUpItemState(0);
	$('.itemeditor-state-button').css({background: '#333', color: '#bbb'});
	$('#itemeditor-state1-button').css({background: '#bbb', color: '#333'});
	$('.itemeditor-state-button').data('active', false);
	$('#itemeditor-state1-button').data('active', true);
	
	console.log(itemEditor.tempitem);
	
}

function setUpItemState(){

	var previewarea = document.getElementById('item-preview-panel');
	var preview = document.getElementById('item-preview');
	
	fabricCanvas1.isDrawingMode = true;
	fabricCanvas1.deactivateAll();
	
	if (fabricCanvas1.isDrawingMode){
		$('#drawing-mode')[0].innerHTML = 'Cancel drawing mode';
		$('#drawing-mode-options')[0].style.display = '';
	}
	else {
		$('#drawing-mode')[0].innerHTML = 'Enter drawing mode';
		$('#drawing-mode-options')[0].style.display = 'none';
	}
	
	$('#active-state-button').css({'background-color': 'white'});
	$('#inactive-state-button').css({'background-color': 'darkgrey'});

	if (itemEditor.tempitem.states[0] && itemEditor.tempitem.states[0].images[0]){
	
		var imgElement = document.createElement('img');
		imgElement.src = itemEditor.tempitem.states[0].images[0];
		imgElement.width = $(preview).outerWidth();
		imgElement.height = $(preview).outerHeight();
		var imgInstance = new fabric.Image(imgElement, {
			left: 0,
			top: 0,
			angle: 0,
			opacity: 1
		});
		
		fabricCanvas1.add(imgInstance);
		fabricCanvas1.renderAll();
		
	}

}

function setTempItemState(index){

	var previewarea = document.getElementById('item-preview-panel');
	var preview = document.getElementById('item-preview');
	var svgarea = document.getElementById('workarea');
	
	fabricCanvas1.isDrawingMode = true;
	fabricCanvas1.deactivateAll();
	if (fabricCanvas1.isDrawingMode){
		$('#drawing-mode')[0].innerHTML = 'Cancel drawing mode';
		$('#drawing-mode-options')[0].style.display = '';
	}
	else {
		$('#drawing-mode')[0].innerHTML = 'Enter drawing mode';
		$('#drawing-mode-options')[0].style.display = 'none';
	}
	
	if (index === 0 && itemEditor.state === 1){
		
		$('#active-state-button').css({'background-color': 'white'});
		$('#inactive-state-button').css({'background-color': 'darkgrey'});

		itemEditor.tempitem.states[1].image = fabricCanvas1.toDataURL('image/png');
		fabricCanvas1.clear();
		
		if (itemEditor.tempitem.states[0].images[0]) {
			var imgElement = document.createElement('img');
			imgElement.src = itemEditor.tempitem.states[0].images[0];
			imgElement.width = $(preview).outerWidth();
			imgElement.height = $(preview).outerHeight();
			var imgInstance = new fabric.Image(imgElement, {
				left: 0,
				top: 0,
				angle: 0,
				opacity: 1
			});
			fabricCanvas1.add(imgInstance);
			fabricCanvas1.renderAll();
		}

	}
	if (index === 1 && itemEditor.state === 0){
	
		$('#inactive-state-button').css({'background-color': 'white'});
		$('#active-state-button').css({'background-color': 'darkgrey'});
		
		itemEditor.tempitem.states[0].image = fabricCanvas1.toDataURL('image/png');
		fabricCanvas1.clear();
		
		if (itemEditor.tempitem.states[1].images[0]){
			var imgElement = document.createElement('img');
			imgElement.src = itemEditor.tempitem.states[1].images[0];
			imgElement.width = $(preview).outerWidth();
			imgElement.height = $(preview).outerHeight();
			var imgInstance = new fabric.Image(imgElement, {
				left: 0,
				top: 0,
				angle: 0,
				opacity: 1
			});
			fabricCanvas1.add(imgInstance);
			fabricCanvas1.renderAll();
		}

	}
	
	if (!undef(index)) itemEditor.state = index;
	
	preview.style.backgroundImage = itemEditor.tempitem.states[itemEditor.state].bgimage;
	
}

function closeItemEditor(prompt){

	var prompt = false;
	
	if (prompt){
	
		pb.openDialog({
			title: 'Close without saving?',
			content: '',
			onConfirm: function(){
				$(itemEditor.pane).fadeOut();
			}
		});
	
	}
	
	closeTextEditor();
	
	$(itemEditor.pane).fadeOut();
	
}


function saveItem(tolibrary){

	var previewarea = document.getElementById('item-preview-panel');
	var preview = document.getElementById('item-preview');
	
	closeTextEditor(true);
	
	fabricCanvas1.isDrawingMode = true;
	fabricCanvas1.deactivateAll();
	if (fabricCanvas1.isDrawingMode){
		$('#drawing-mode')[0].innerHTML = 'Cancel drawing mode';
		$('#drawing-mode-options')[0].style.display = '';
	}
	else {
		$('#drawing-mode')[0].innerHTML = 'Enter drawing mode';
		$('#drawing-mode-options')[0].style.display = 'none';
	}
	itemEditor.tempitem.states[itemEditor.state].images[0] = fabricCanvas1.toDataURL('image/png');
	
	var savebutton = itemEditor.item;
	
	savebutton.element.style.borderRadius = preview.style.borderRadius;
	savebutton.element.style.borderTopLeftRadius = preview.style.borderTopLeftRadius;
	savebutton.element.style.borderTopRightRadius = preview.style.borderTopRightRadius;
	savebutton.element.style.borderBottomLeftRadius = preview.style.borderBottomLeftRadius;
	savebutton.element.style.borderBottomRightRadius = preview.style.borderBottomRightRadius;
	savebutton.element.style.border = preview.style.border;
	savebutton.element.style.width = preview.style.width;
	savebutton.element.style.height = preview.style.height;
	savebutton.core.basewidth = parseInt(preview.style.width);
	savebutton.core.baseheight = parseInt(preview.style.height);
	savebutton.core.states = deepCopy(itemEditor.tempitem.states);
	savebutton.core.scripts = deepCopy(itemEditor.tempitem.core.scripts);
	savebutton.core.conditional = itemEditor.tempitem.core.conditional;
	savebutton.element.style.boxShadow = preview.style.boxShadow;
	savebutton.element.style.backgroundColor = preview.style.backgroundColor;
	savebutton.element.style.background = preview.style.background;
	savebutton.element.style.backgroundImage = preview.style.backgroundImage;
	savebutton.element.style['-webkit-filter'] = preview.style['-webkit-filter'];
	savebutton.element.style.backgroundSize = "100% 100%";
	
	if (!undef(itemEditor.tempitem.touchpanelkey))
		savebutton.core.touchpanelkey = itemEditor.tempitem.touchpanelkey;
	itemEditor.tempitem.touchpanelkey = false;

	console.log('save', itemEditor.tempitem);
	if (itemEditor.tolibrary) addUserButton(savebutton)
	savebutton.setState(1);

	closeItemEditor(false);
	
}

function addUserButton(button){
	
	if (undef(button)){
		
		var newstates = deepCopy(itemEditor.tempitem.states);
		
		if (itemEditor.item){
			var ttext = itemEditor.item.textnode.innerHTML;
			var ttextoffsetx = itemEditor.item.textoffsetx ? itemEditor.item.textoffsetx : 0;
			var ttextoffsety = itemEditor.item.textoffsety ? itemEditor.item.textoffsety : 0;
		}
		else {
			var ttext = 'text';
			var ttextoffsetx = 0;
			var ttextoffsety = 0;
		}
		
		var newbutton = new Button({
			states: newstates,
			draggable: true,
			text: ttext,
			textoffsetx: ttextoffsetx,
			textoffsety: ttextoffsety,
			textstyle: itemEditor.item.textnode.style.cssText,
			basewidth: parseInt(document.getElementById('item-preview').style.width),
			baseheight: parseInt(document.getElementById('item-preview').style.height),
			scripts: itemEditor.tempitem.scripts,
			conditional: itemEditor.tempitem.conditional,
			extrastyle: document.getElementById('item-preview').style.cssText,
			isuserbutton: true
		});
		
		$('#User\\ Buttons').append(newbutton.element);
		newbutton.draggable = true;
		newbutton.element.style.cssText += 'background-size: 100% 100%; position: relative; margin: 4px; display: inline-block;';
		newbutton.element.className = 'draggable cloneable';

		newbutton.textnode.style.zIndex = '10000000';
		
		var previewarea = document.getElementById('item-preview-panel');
		var preview = document.getElementById('item-preview');

		newbutton.setState();
		
		newbutton.element.style.width = newbutton.element.style.height = '80px';
		newbutton.element.style.margin = '4px';
		document.getElementById('item-preview').style.outline = 'invert none medium';
		newbutton.element.style.cssText += document.getElementById('item-preview').style.cssText;
		newbutton.element.style.cssText += 'position: relative; float: left; background-size: 100% 100%;\
			left: 0; top: 0; outline: invert none medium; margin: 4px; border-size: 0px;';
		
		if (!undef(itemEditor.tempitem.touchpanelkey)) newbutton.touchpanelkey = itemEditor.tempitem.touchpanelkey;
		itemEditor.tempitem.touchpanelkey = false;
		
		newbutton.element.style.boxShadow = preview.style.boxShadow;
		
		delete itemEditor.tempitem;
		closeItemEditor(false);
		
	}
	else {
		
		var newbutton = button.clone({type: 'user'});
	
		$('#User\\ Buttons').append(newbutton.element);
		newbutton.draggable = true;
		newbutton.element.style.cssText += 'left: 0; top: 0; background-size: 100% 100%; position: relative; margin: 5px; display: inline-block;';
		newbutton.element.className = 'draggable cloneable';
		
		tweencss({object: $( newbutton.element )[0], time: 0, props: {scale: 1}, to: {scale: 1}});
	
	}
	
	//pb.buttons['user'].push(newbutton);
	newbutton.panel = false;
	
	$('#button-library-select').val('User Buttons');
	pb.setButtonLibrary();
	
}

function addTemplatePanel(){
	
	var newstates = deepCopy(itemEditor.tempitem.states);
	
	var newpanel = new Panel({
		states: newstates,
		style: document.getElementById('item-preview').style.cssText,
		type: 'template',
		autoresize: itemEditor.autoresize
	});
	
	for (var i=0; i<itemEditor.buttons.length; i++){
		var tbutton = itemEditor.buttons[i].clone();
		$(tbutton.element).removeClass('outlined').removeClass('first');
		$(tbutton.element).addClass('item_child');
		tbutton.basewidth = parseInt(itemEditor.buttons[i].element.style.width);
		tbutton.baseheight = parseInt(itemEditor.buttons[i].element.style.height);
		tbutton.basetop = parseInt(itemEditor.buttons[i].element.style.top);
		tbutton.baseleft = parseInt(itemEditor.buttons[i].element.style.left);
		tbutton.textnode.style.display = 'none';
		newpanel.addChild(tbutton);		
	}
	
	for (var i=0; i<itemEditor.widgets.length; i++){
		var twidget = itemEditor.widgets[i].clone();
		$(twidget.element).removeClass('outlined').removeClass('first');
		$(twidget.element).addClass('item_child');
		twidget.basewidth = parseInt(itemEditor.widgets[i].element.style.width);
		twidget.baseheight = parseInt(itemEditor.widgets[i].element.style.height);
		twidget.basetop = parseInt(itemEditor.widgets[i].element.style.top);
		twidget.baseleft = parseInt(itemEditor.widgets[i].element.style.left);
		newpanel.addChild(twidget);		
	}
	
	newpanel.element.style.transform = "scale(1,1)"; 
	newpanel.element.style.webkitTransform = "scale(1,1)";
	newpanel.element.style.mozTransform = "scale(1,1)";
	newpanel.element.style.msTransform = "scale(1,1)";
	
	newpanel.resize(80,80);
	
	$('#templatesGrid').append(newpanel.element);
	newpanel.draggable = true;
	newpanel.element.style.cssText += ' background-size: 100% 100%; position: relative; margin: 5px; display: inline-block;';
	newpanel.element.className += 'draggable cloneable';
	
	var previewarea = document.getElementById('item-preview-panel');
	var preview = document.getElementById('item-preview');
	
	newpanel.element.style.width = newpanel.element.style.height = '80px';
	newpanel.element.style.margin = '4px';
	document.getElementById('item-preview').style.outline = 'invert none medium';
	newpanel.element.style.cssText += document.getElementById('item-preview').style.cssText;
	newpanel.element.style.cssText += 'position: relative; float: left; background-size: 100% 100%; width: 80px;\
		height: 80px; left: 0; top: 0; outline: invert none medium; margin: 4px; border-size: 0px;';
	
	$(newpanel.element).removeClass('selectables');
	
	closeItemEditor();
	
	//pb.usertemplates.push(newpanel);
	
}

function addTemplateFromPanel(panel){
	
	var oldbuttonids = []; var oldwidgetids = [];
	var newbuttonids = []; var newwidgetids = [];
	
	for (var pk=0; pk<panel.buttons.length; pk++){
		oldbuttonids.push(panel.buttons[pk].element.id);
	}
	for (var pk=0; pk<panel.widgets.length; pk++){
		oldwidgetids.push(panel.widgets[pk].element.id);
	}
	
	var newpanel = panel.clone({type: 'template', autoinsert: true});
	
	for (var pk=0; pk<newpanel.buttons.length; pk++){
		newbuttonids.push(newpanel.buttons[pk].element.id);
	}
	for (var pk=0; pk<newpanel.widgets.length; pk++){
		newwidgetids.push(newpanel.widgets[pk].element.id);
	}
	
	for (var pk=0; pk<newpanel.buttons.length; pk++){
		if (newpanel.buttons[pk].scripts){
			for (var jk=0; jk<newpanel.buttons[pk].scripts.length; jk++){
				for (var pj=0; pj<oldbuttonids.length; pj++){
					newpanel.buttons[pk].scripts[jk] = 
						newpanel.buttons[pk].scripts[jk].replaceAll(oldbuttonids[pj], newbuttonids[pj]);
				}
			}
		}
	}
	for (var pk=0; pk<newpanel.widgets.length; pk++){
		if (newpanel.widgets[pk].scripts){
			for (var jk=0; jk<newpanel.widgets[pk].scripts.length; jk++){
				for (var pj=0; pj<oldwidgetids.length; pj++){
					newpanel.widgets[pk].scripts[jk] = 
						newpanel.widgets[pk].scripts[jk].replaceAll(oldwidgetids[pj], newwidgetids[pj]);
				}
			}
		}
	}
	
	for (var i=0; i<newpanel.buttons.length; i++){
		var tbutton = newpanel.buttons[i];
		$(tbutton.element).removeClass('outlined').removeClass('first');
		$(tbutton.element).addClass('item_child');
		tbutton.basewidth = parseInt(newpanel.buttons[i].element.style.width);
		tbutton.baseheight = parseInt(newpanel.buttons[i].element.style.height);
		tbutton.basetop = parseInt(newpanel.buttons[i].element.style.top);
		tbutton.baseleft = parseInt(newpanel.buttons[i].element.style.left);
	}
	for (var i=0; i<newpanel.widgets.length; i++){
		var twidget = newpanel.widgets[i];
		$(twidget.element).removeClass('outlined').removeClass('first');
		$(twidget.element).addClass('item_child');
		twidget.basewidth = parseInt(newpanel.widgets[i].element.style.width);
		twidget.baseheight = parseInt(newpanel.widgets[i].element.style.height);
		twidget.basetop = parseInt(newpanel.widgets[i].element.style.top);
		twidget.baseleft = parseInt(newpanel.widgets[i].element.style.left);
		twidget.element.style.display = 'none';
	}
	
	newpanel.element.style.transform = "scale(1,1)";
	newpanel.element.style.webkitTransform = "scale(1,1)";
	newpanel.element.style.mozTransform = "scale(1,1)";
	newpanel.element.style.msTransform = "scale(1,1)";

	newpanel.resize(80,80);
	
	$('#templatesGrid').append(newpanel.element);
	newpanel.element.style.cssText += ' background-size: 100% 100%; position: relative; margin: 5px; display: inline-block;';
	newpanel.element.className += ' draggable cloneable';
	
	newpanel.element.style.width = newpanel.element.style.height = '80px';
	newpanel.element.style.margin = '4px';
	newpanel.element.style.cssText += 'position: relative; float: left; background-size: 100% 100%; width: 80px;\
		height: 80px; left: 0; top: 0; outline: invert none medium; margin: 4px; border-size: 0px;';
	
	newpanel.core.style = newpanel.element.style.cssText;
	newpanel.basewidth = parseFloat(panel.element.style.width);
	newpanel.baseheight = parseFloat(panel.element.style.height);
	
}

function savePanel(){

	var previewarea = document.getElementById('item-preview-panel');
	var preview = document.getElementById('item-preview');
	var svgarea = document.getElementById('workarea');
	
	var newstates = deepCopy(itemEditor.tempitem.states);

	savepanel = pb.project.currentpanel;
	
	$('#panel-props-width').val($(preview).innerWidth());
	$('#panel-props-height').val($(preview).innerHeight());
	
	savepanel.resize(parseInt(preview.style.width), parseInt(preview.style.height));
	
	savepanel.states = newstates;

	savepanel.setState();
	
	if (itemEditor.autoresize){
		$('#panel-props-autoresize').prop('checked', true);
		savepanel.autoresize = true;
	}
	else{
		$('#panel-props-autoresize').prop('checked', false);
		savepanel.autoresize = false;
	}

	closeItemEditor(false);
	
}

function saveScript(text, index){
	itemEditor.tempitem.scripts[index] = text;
}

function saveConditional(text){
	itemEditor.tempitem.conditional = text;
}


function initItemEditor(){

	itemEditor.pane = document.createElement('div');
	$(itemEditor.pane).css({
		display: 'none',
		'z-index': 5000000,
		position: 'absolute',
		top: '0px',
		left: '0px',
		width: '100%',
		height: '100%',
		background: '#111'
	});
	itemEditor.pane.id = 'item_editor';
	itemEditor.pane.innerHTML = '\
		<div id="texteditor-topoptions" style="z-index: 90; position: absolute; left: 3%; top: 2%;\
					font-size: 24px; height: 25px; width: 20%;">\
			<div id="itemeditor-state1-button" type="button" class="itemeditor-state-button"\
				onmouseover="$(this).css({background: \'#bbb\', color: \'#333\'});"\
				onmouseout="if ($(this).data(\'active\') != true && $(this).data(\'active\') != \'true\')\
					$(this).css({background: \'#333\', color: \'#bbb\'});"\
				data-active="true"\
				style="position: absolute; left: 0%; top: 0%; width: 31%; height: 100%;\
					background: #bbb; color: #333; font-size: 1.15vw; border-radius: 25px;\
					cursor: pointer; line-height: 25px; text-align: center;">State 1</div>\
			<div id="itemeditor-state2-button" type="button" class="itemeditor-state-button"\
				onmouseover="$(this).css({background: \'#bbb\', color: \'#333\'});"\
				onmouseout="if ($(this).data(\'active\') != true && $(this).data(\'active\') != \'true\') \
					$(this).css({background: \'#333\', color: \'#bbb\'});"\
				data-active="false"\
				style="position: absolute; left: 33%; top: 0%; width: 31%; height: 100%;\
					background: #333; color: #bbb; font-size: 1.15vw; border-radius: 25px;\
					cursor: pointer; line-height: 25px; text-align: center;">State 2</div>\
		</div>\
		\
		<div id="color_picker" class="noselect" style="z-index: 500001;"></div>\
		\
		<div style="position: absolute; width: 28%; height: calc(100% - 45px); left: 72%;\
			top: 0px; border-right: 1px solid black; overflow-x: hidden;\
			overflow-y: auto; background: black;" class="tools_item layerD noselect">\
		\
		<div id="item-script" class="" style="height: 40px;\
			color: white; text-align: center; line-height: 2.5em;\
			cursor: pointer; background: #222; border-left: 1px solid #444;\
			border-bottom: 1px solid #444;"><b>&nbsp;&nbsp;Script/Conditional</b></div>\
		\
		<div id="item-script-container" class="item-options noselect" style="height: 0px;\
			overflow: hidden; background: #444; color: white; text-align: center;">\
			<div>&nbsp;&nbsp;Script:</div>\
			<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden;\
				border-top: 1px solid #555; border-bottom: 1px solid #555;">\
				<button type="button" onclick=""\
					style="margin-top: 4px; margin-right: 15px;">State 1</button>\
				<button type="button" onclick=""\
					style="margin-top: 4px; margin-left: 15px;">State 2</button>\
			</div>\
			<div class="noselect">&nbsp;&nbsp;Conditional:</div>\
			<div style="width: 100%; overflow: auto; overflow-x: hidden;\
				border-top: 1px solid #555; border-bottom: 1px solid #555;">\
				<button type="button" onclick="createConditionalEditor(saveConditional, 0);"\
					style="margin-top: 4px; margin-left: 0px;">View</button>\
			</div>\
		</div>\
		\
		<div id="item-basics" class="item-options-labels noselect"\
			style="height: 40px; color: white; text-align: center; line-height: 2.5em;\
			background: #222; border-left: 1px solid #444;\
			border-bottom: 1px solid #444; cursor: pointer;"><b>&nbsp;&nbsp;Basic</b></div>\
		\
		<div id="item-basics-container" class="item-options noselect" style="height: 0px;\
			overflow: hidden; background: #444; color: white; text-align: center;">\
			<!--<div style="padding-left: 0px;">&nbsp;&nbsp;Button Text:</div>\
			<div class="noselect" style="padding-left: 0px; width:100%; overflow: auto;\
				overflow-x: hidden; border-top: 1px solid #555; border-bottom: 1px solid #555;">\
						<input type="text" name="buttontext" id="item-label-input">\
			</div>-->\
			<div>&nbsp;&nbsp;Width:</div>\
			<div class="noselect" style="width: 100%; overflow: auto; overflow-x: hidden;\
				border-top: 1px solid #555; border-bottom: 1px solid #555;">\
				<input type="text" name="buttonwidth" id="item-width-input">\
				<input type="button" value="Update" id="item-width-input-button" />\
			</div>\
			<div>&nbsp;&nbsp;Height:</div>\
			<div class="noselect" style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555;">\
				<input type="text" name="buttonheight" id="item-height-input">\
				<input type="button" value="Update" id="item-height-input-button" />\
			</div>\
			<div>&nbsp;&nbsp;Hue:</div>\
			<div class="noselect" style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555; height: 35px; text-align: center;">\
				<div style="width: 100%; display: inline; text-align: center;">\
					<div id="hue-slider" style="display: block; width: 60%; margin-left: 20%; margin-top: 5px;"></div>\
				</div>\
			</div>\
			<div>&nbsp;&nbsp;Saturation:</div>\
			<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555; height: 35px; text-align: center;">\
				<div style="width: 100%; display: inline; text-align: center;">\
					<div id="sat-slider" style="display: block; width: 60%; margin-left: 20%; margin-top: 5px;"></div>\
				</div>\
			</div>\
			<div style="border-bottom: 1px solid #555; height: 60px;">&nbsp;&nbsp;Background Color:\
				<div style="height: 40px; text-align: center;">\
					<input id="ie-bgColorSelector" class="color {pickerFaceColor:\'#111\'}" style=""\
						onchange="document.getElementById(\'item-preview\').style.backgroundColor = \'#\'+this.color">\
					<img id="ie-remove-bgcolor" src="images/icons/delete3.png"\
						onclick="document.getElementById(\'item-preview\').style.backgroundColor = \'rgba(0,0,0,0)\';"\
						title="Remove Background Color" style="cursor: pointer; width: 25px; height: 25px;\
						position: relative; top: 6px;" />\
				</div>\
			</div>\
			<div style="overflow-x: hidden;">\
				&nbsp;&nbsp;Background Image:<br />&nbsp;\
				<input type="file" id="fileInput" style="margin-top: 5px; border: none; vertical-align: top;">\
				<img id="item-remove-bg" src="images/icons/delete3.png"\
					onclick="document.getElementById(\'item-preview\').style.backgroundImage = \'none\';\
					itemEditor.tempitem.states[itemEditor.state].bgimage = \'none\';"\
					title="Remove Background" style="cursor: pointer; width: 25px; height: 25px;\
					padding-top: 4px;" />\
			</div>\
			<div id="fileDisplayArea" style="overflow-x: hidden;"></div>\
		</div>\
		\
		<div id="item-border" class="item-options-labels noselect"\
			style="height: 40px; color: white; text-align: center; line-height: 2.5em;\
			background: #222; cursor: pointer; border-left: 1px solid #444;\
			border-bottom: 1px solid #444;"><b>&nbsp;&nbsp;Border</b></div>\
		<div id="item-border-container" class="item-options noselect"\
			style="height: 0px; overflow: hidden; background: #444; color: white; text-align: center;">\
			<div>&nbsp;&nbsp;Border-Size:</div>\
			<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555;">\
						<input type="text" name="templateheight" id="item-border-size" value="0">\
			</div>\
			<div style="border-bottom: 1px solid grey; height: 60px;">&nbsp;&nbsp;Border Color:\
				<br />\
				<div id="borderColorSelector" class="colorSelector" title="Border Color" style="margin-left: 10px;"><div style="background-color: #000000"></div></div>\
				<!--<img id="item-remove-bordercolor" src="images/icons/delete3.png" onclick="document.getElementById(\'item-preview\').style.backgroundColor = \'transparent\'; $(\'#bgColorSelector div\').css(\'backgroundColor\', \'#caccca\');" title="Remove Background Color" style="cursor: pointer; width: 25px; height: 25px; padding-top: 4px;" />-->\
				<!--<div id="borderColorSelector" class="colorSelector" title="Border Color" style=""><div style="background-color: #caccca"></div></div>\
				<div id="boxshadowColorSelector" class="colorSelector" title="Box Shadow Color" style=""><div style="background-color: #caccca"></div></div>\
				<div id="textshadowColorSelector" class="colorSelector" title="Text Shadow Color" style=""><div style="background-color: #caccca"></div></div>-->\
				<div style="height: 40px; text-align: center;">\
					<input id="ie-borderColorSelector" class="color {pickerFaceColor:\'#111\'}" style=""\
						onchange="document.getElementById(\'item-preview\').style.borderColor = \'#\'+this.color">\
					<img id="ie-remove-bordercolor" src="images/icons/delete3.png"\
						onclick="document.getElementById(\'item-preview\').style.borderColor = \'rgba(0,0,0,0)\';"\
						title="Remove Border Color" style="cursor: pointer; width: 25px; height: 25px;\
						position: relative; top: 6px;" />\
				</div>\
				<br />\
			</div>\
			<div>&nbsp;&nbsp;Border-Radius Top-Left:</div>\
			<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555;height:50px;">\
				<div style="width: 100%; display: block; position: relative;">\
					<div style="position: absolute; left: calc(20% - 45px); top: 5px; display: block; width: 45px;">\
						<input type="radio" id="border-tl-px" name="border-tl" checked value="px" /> px<br><input type="radio" id="border-tl-pc" name="border-tl" value="pc" /> %</div>\
					<div style="display: inline-block; width: 60%; top: 7px;">\
						<input type="text" class="item-border-radius" style="display: inline-block; position: relative; top: 13px;"\
							name="" id="item-border-radius-tl" value="0" \>\
						<div id="tl-slider" style="display: none; width: 60%; position: relative; top: 13px;"></div>\
					</div>\
					<br>\
				</div>\
			</div>\
			<div>&nbsp;&nbsp;Border-Radius Top-Right:</div>\
			<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555;height:50px;">\
				<div style="width: 100%; display: block; position: relative;">\
					<div style="position: absolute; left: calc(20% - 45px); top: 5px; display: block; width: 45px;">\
						<input type="radio" id="border-tl-px" name="border-tr" checked value="px" /> px<br><input type="radio" id="border-tr-pc" name="border-tr" value="pc" /> %</div>\
					<div style="display: inline-block; width: 60%; top: 7px;">\
						<input type="text" class="item-border-radius" style="display: inline-block; position: relative; top: 13px;"\
							name="" id="item-border-radius-tr" value="0" \>\
						<div id="tr-slider" style="display: none; width: 60%; position: relative; top: 13px;"></div>\
					</div>\
					<br>\
				</div>\
			</div>\
			<div>&nbsp;&nbsp;Border-Radius Bottom-Left:</div>\
			<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555;height:50px;">\
				<div style="width: 100%; display: block; position: relative;">\
					<div style="position: absolute; left: calc(20% - 45px); top: 5px; display: block; width: 45px;">\
						<input type="radio" id="border-bl-px" name="border-bl" checked value="px" /> px<br><input type="radio" id="border-bl-pc" name="border-bl" value="pc" /> %</div>\
					<div style="display: inline-block; width: 60%; top: 7px;">\
						<input type="text" class="item-border-radius" style="display: inline-block; position: relative; top: 13px;"\
							name="" id="item-border-radius-bl" value="0" \>\
						<div id="bl-slider" style="display: none; width: 60%; position: relative; top: 13px;"></div>\
					</div>\
					<br>\
				</div>\
			</div>\
			<div>&nbsp;&nbsp;Border-Radius Bottom-Right:</div>\
			<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555;height:50px;">\
				<div style="width: 100%; display: block; position: relative;">\
					<div style="position: absolute; left: calc(20% - 45px); top: 5px; display: block; width: 45px;">\
						<input type="radio" id="border-br-px" name="border-br" checked value="px" /> px<br><input type="radio" id="border-br-pc" name="border-br" value="pc" /> %</div>\
					<div style="display: inline-block; width: 60%; top: 7px;">\
						<input type="text" class="item-border-radius" style="display: inline-block; position: relative; top: 13px;"\
							name="" id="item-border-radius-br" value="0" \>\
						<div id="br-slider" style="display: none; width: 60%; position: relative; top: 13px;"></div>\
					</div>\
					<br>\
				</div>\
			</div>\
		</div>\
		\
		<div id="item-textshadow" class="item-options-labels noselect"\
			style="display: none; height: 40px; color: white; text-align: center; line-height: 2.5em;\
			cursor: pointer; background: #222; border-left: 1px solid #444;\
			border-bottom: 1px solid #444;"><b>&nbsp;&nbsp;Text Shadow</b></div>\
		<div id="item-textshadow-container" class="item-options noselect" style="display: none;\
			height: 0px; overflow: hidden; background: #444; color: white;">\
			<div style="padding-left: 0px;">&nbsp;&nbsp;<input id="text-shadow" type="checkbox" name="textshadow" value="textshadow">\
				&nbsp;&nbsp;Text Shadow</div>\
			<div>&nbsp;&nbsp;Vertical Position:</div>\
				<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555;">\
					<input type="text" name="textshadowvp" id="text-shadow-vp-input">\
			</div>\
			<div>&nbsp;&nbsp;Horizontal Position:</div>\
				<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555;">\
					<input type="text" name="textshadowhp" id="text-shadow-hp-input">\
			</div>\
			<div>&nbsp;&nbsp;Blur Radius:</div>\
				<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555; border-bottom: 1px solid #555;">\
					<input type="text" name="textshadowbr" id="text-shadow-br-input">\
			</div>\
		</div>\
		\
		<div id="item-boxshadow" class="item-options-labels noselect" style="height: 40px;\
			color: white; text-align: center; line-height: 2.5em; cursor: pointer;\
			background: #222; border-left: 1px solid #444;\
			border-bottom: 1px solid #444;"><b>&nbsp;&nbsp;Box Shadow</b></div>\
		<div id="item-boxshadow-container" class="item-options noselect"\
			style="height: 0px; overflow: hidden; background: #444; color: white; text-align: center;">\
			<div style="padding-left: 0px;">&nbsp;&nbsp;<input id="box-shadow" type="checkbox" name="boxshadow" value="boxshadow">\
				&nbsp;&nbsp;Box Shadow</div>\
			<div style="padding-left: 0px;">&nbsp;&nbsp;<input id="box-shadow-inset" type="checkbox" name="boxshadowinset" value="boxshadowinset">\
				&nbsp;&nbsp;Inset</div>\
			<div style="border-bottom: 1px solid grey; height: 60px;">&nbsp;&nbsp;Box Shadow Color:\
				<br />\
				<div style="height: 40px; text-align: center;">\
					<input id="ie-boxshadowColorSelector" class="color {pickerFaceColor:\'#111\'}" style="">\
					<img id="ie-remove-boxshadowcolor" src="images/icons/delete3.png"\
						title="Remove Box-Shadow Color" style="cursor: pointer; width: 25px; height: 25px;\
						position: relative; top: 6px;" />\
				</div>\
			</div>\
			<div>&nbsp;&nbsp;Vertical Position:</div>\
				<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555;\
					border-bottom: 1px solid #555;">\
					<input type="text" name="boxshadowvp" value="5" id="box-shadow-vp-input">\
			</div>\
			<div>&nbsp;&nbsp;Horizontal Position:</div>\
				<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555;\
					border-bottom: 1px solid #555;">\
					<input type="text" name="boxshadowhp" value="5" id="box-shadow-hp-input">\
			</div>\
			<div>&nbsp;&nbsp;Blur Radius:</div>\
				<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555;\
					border-bottom: 1px solid #555;">\
					<input type="text" name="boxshadowbr" value="5" id="box-shadow-br-input">\
			</div>\
			<div>&nbsp;&nbsp;Spread Radius:</div>\
				<div style="width:100%;overflow:auto;overflow-x:hidden;border-top: 1px solid #555;\
					border-bottom: 1px solid #555;">\
					<input type="text" name="boxshadowsr" value="5" id="box-shadow-sr-input">\
			</div>\
		</div>\
		\
		<div id="item-icon" class="item-options-labels noselect" style="height: 40px;\
			color: white; text-align: center; line-height: 2.5em; cursor: pointer;\
			background: #222; border-left: 1px solid #444;\
			border-bottom: 1px solid #444;"><b>&nbsp;&nbsp;Icon</b></div>\
		<div id="item-icon-container" class="item-options noselect"\
			style="height: 0px; overflow: hidden; background: #444; color: white; text-align: center;">\
			<div style="padding-left: 0px;">&nbsp;&nbsp;<input id="icon-checkbox" type="checkbox" name="boxshadow" value="boxshadow">\
				&nbsp;&nbsp;Icon</div>\
			<div style="overflow-x: hidden;">\
				&nbsp;&nbsp;Icon Image:<br />&nbsp;\
				<input type="file" id="iconFileInput" style="margin-top: 5px; border: none; vertical-align: top;">\
				<img id="item-remove-icon" src="images/icons/delete3.png"\
					onclick="document.getElementById(\'item-preview-icon\').style.backgroundImage = \'none\';\
					itemEditor.item.core.iconimage = false;" title="Remove Background" style="cursor: pointer; width: 25px; height: 25px;\
					padding-top: 4px;" />\
			</div>\
			<div>&nbsp;&nbsp;Vertical Position:</div>\
				<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 1px solid #555;\
					border-bottom: 1px solid #555;">\
					<input type="text" value="5" id="icon-vp-input">\
			</div>\
			<div>&nbsp;&nbsp;Horizontal Position:</div>\
				<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 1px solid #555;\
					border-bottom: 1px solid #555;">\
					<input type="text" value="5" id="icon-hp-input">\
			</div>\
			<div>&nbsp;&nbsp;Width:</div>\
				<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 1px solid #555;\
					border-bottom: 1px solid #555;">\
					<input type="text" value="5" id="icon-w-input">\
			</div>\
			<div>&nbsp;&nbsp;Height:</div>\
				<div style="width: 100%; overflow: auto; overflow-x: hidden; border-top: 1px solid #555;\
					border-bottom: 1px solid #555;">\
					<input type="text" value="5" id="icon-h-input">\
			</div>\
		</div>\
		\
		<div id="item-drawingtools" class="item-options-labels noselect"\
			style="display: block; height: 40px; color: white; text-align: center; line-height: 2.5em;\
			cursor: pointer; background: #222; border-left: 1px solid #444;\
			border-bottom: 1px solid #444;"><b>&nbsp;&nbsp;Drawing Tools</b></div>\
		<div id="item-drawingtools-container" class="item-options noselect"\
			style="display: block; height: 0px; overflow: hidden; background: #444; color: white;">\
			<div style="display: inline-block; margin-left: 10px">\
				<br /><button id="drawing-mode" class="btn btn-info">Cancel drawing mode</button><br>\
				<button id="clear-canvas" class="btn btn-info">Clear</button><br>\
				\
				<div id="drawing-mode-options">\
					<label for="drawing-mode-selector">Mode:</label>\
					<select id="drawing-mode-selector">\
						<option>Pencil</option>\
						<option>Circle</option>\
						<option>Spray</option>\
						<option>Pattern</option>\
						<option>hline</option>\
						<option>vline</option>\
						<option>square</option>\
						<option>diamond</option>\
						<option>texture</option>\
					</select><br>\
					\
					<label for="drawing-line-width">Line width:</label>\
					<span class="info">30</span><input type="range" value="30" min="0" max="150" id="drawing-line-width"><br>\
					\
					<label for="drawing-color">Line color:</label>\
					<input type="color" value="#005E7A" id="drawing-color"><br>\
					\
					<label for="drawing-shadow-color">Shadow color:</label>\
					<input type="color" value="#005E7A" id="drawing-shadow-color"><br>\
					\
					<label for="drawing-shadow-width">Shadow width:</label>\
					<span class="info">0</span><input type="range" value="0" min="0" max="50" id="drawing-shadow-width"><br>\
					\
					<label for="drawing-shadow-offset">Shadow offset:</label>\
					<span class="info">0</span><input type="range" value="0" min="0" max="50" id="drawing-shadow-offset"><br>\
				</div><br />&nbsp;\
			</div>\
		</div>\
		\
		<div id="item-touchpanelkey" class="item-options-labels noselect"\
			style="display: block; height: 40px; color: white; text-align: center; line-height: 2.5em;\
			cursor: pointer; background: #222; border-left: 1px solid #444;\
			border-bottom: 1px solid #444;"><b>&nbsp;&nbsp;Touch Panel Key</b></div>\
		<div id="item-touchpanelkey-container" class="item-options noselect"\
			style="display: block; height: 0px; overflow: hidden; background: #444; color: white;\
			text-align: center; position: relative;">\
			Touch Panel Key:<br /><hr>\
			<!--&nbsp;&nbsp;&nbsp;&nbsp;<select id="touchpanelkey-select">\
				<option id="touchpanelkey-none" value="false">None</option>\
				<option id="touchpanelkey-1" value="1">1</option>\
				<option id="touchpanelkey-2" value="2">2</option>\
				<option id="touchpanelkey-3" value="3">3</option>\
				<option id="touchpanelkey-4" value="4">4</option>\
				<option id="touchpanelkey-5" value="5">5</option>\
				<option id="touchpanelkey-6" value="6">6</option>\
				<option id="touchpanelkey-7" value="7">7</option>\
				<option id="touchpanelkey-8" value="8">8</option>\
			</select><br />&nbsp;-->\
			<img src="images/ntouch/ntouchkeys.png" />\
			<div style="position: absolute; top: 70px; left: 7px;">1 <input type="radio" id="touchpanelkey-radio1"></div>\
			<div style="position: absolute; top: 100px; left: 7px;">2 <input type="radio" id="touchpanelkey-radio2"></div>\
			<div style="position: absolute; top: 130px; left: 7px;">3 <input type="radio" id="touchpanelkey-radio3"></div>\
			<div style="position: absolute; top: 160px; left: 7px;">4 <input type="radio" id="touchpanelkey-radio4"></div>\
			<div style="position: absolute; top: 70px; right: 7px;">5 <input type="radio" id="touchpanelkey-radio5"></div>\
			<div style="position: absolute; top: 100px; right: 7px;">6 <input type="radio" id="touchpanelkey-radio6"></div>\
			<div style="position: absolute; top: 130px; right: 7px;">7 <input type="radio" id="touchpanelkey-radio7"></div>\
			<div style="position: absolute; top: 160px; right: 7px;">8 <input type="radio" id="touchpanelkey-radio8"></div>\
		</div>\
		</div>\
		<div id="item-editor-titlebar" style="color: white; position: absolute; text-align: center;\
			left: 0%; top: 0%; width: 72%; height: 10%; font-size: 140%; line-height: 220%;"></div>\
		\
		<div id="item-preview-panel" class="checkerboard noselect"\
				style="position: absolute; left: 7%; top: 10%; width: 58%;\
				height: 80%; overflow: hidden; background-color: grey;">\
			<div id="canvas-wrapper"><canvas id="fabric-canvas"\
				style="border: none; position: absolute; left: 0px; top: 0px;\
				z-index: 50000 !important;"></canvas></div>\
			<div class="noselect" id="state-buttons" style="text-align: center;"></div>\
			<div id="item-preview" style="width: 65%; border: 1px solid grey;\
				position: absolute; height: 60%; background-color: transparent;\
				top: 0; left: 0; bottom: 0; right: 0; z-index: 100; overflow: visible;">\
				<div id="item-preview-icon" style="position: absolute; left: 30%; top: 0%;\
					width: 40%; height: 40%;">\
				</div>\
			</div>\
		</div>\
		\
		<div id="ie-save" class="noselect" onclick="saveItem();"\
			style="height: 45px; color: white; text-align: center; line-height: 2.5em;\
			background: #222; cursor: pointer; border-left: 1px solid #444; z-index: 500;\
			border-top: 1px solid #444; width: 14%; position: absolute; left: 72%; bottom: 0%;"><b>Save</b></div>\
		<div id="ie-cancel" class="noselect" onclick="closeItemEditor(true);"\
			style="height: 45px; color: white; text-align: center; line-height: 2.5em;\
			background: #222; cursor: pointer; border-left: 1px solid #444; z-index: 500;\
			border-top: 1px solid #444; width: 14%; position: absolute; left: 86%; bottom: 0%;"><b>Cancel</b></div>\
		';
	
	$('#thebody').append(itemEditor.pane);
	
	$('.itemeditor-state-button').css({background: '#333', color: '#bbb'});
	$('#itemeditor-state1-button').css({background: '#bbb', color: '#333'});
	$('.itemeditor-state-button').data('active', false);
	$('#itemeditor-state1-button').data('active', true);
	
	$('#itemeditor-state1-button')[0].onclick = function(){
	
		setTempItemState(0);
		
		$('.itemeditor-state-button').css({background: '#333', color: '#bbb'});
		$(this).css({background: '#bbb', color: '#333'});
		$('.itemeditor-state-button').data('active', false);
		$(this).data('active', true);
		
	}
	$('#itemeditor-state2-button')[0].onclick = function(){
	
		setTempItemState(1);
		
		$('.itemeditor-state-button').css({background: '#333', color: '#bbb'});
		$(this).css({background: '#bbb', color: '#333'});
		$('.itemeditor-state-button').data('active', false);
		$(this).data('active', true);
		
	}
	
	$('#item-script')[0].onclick = function(){
		for (var i=0; i<$('.item-options').length; i++){
			tweencss({object: $( '.item-options' )[i], time: 0.2,
				props: {height: parseInt($( '.item-options' )[i].style.height)}, to: {height: 0}});
		}
		openTextEditor({item: itemEditor.tempitem, mode: 'editor'});
	};
	
	var fileInput = document.getElementById('fileInput');
	var iconFileInput = document.getElementById('iconFileInput');
	var preview = document.getElementById('item-preview');
	
	iconFileInput.addEventListener('change', function(e) {
	
		if (standalone){
			console.log('sio-fio image file upload');
			if (pb.project.puid) var puid = pb.project.puid;
			else var puid = false;
			siofio.uploadFile(fileInput.files[0], {command: 'image', puid: puid}, function(data){
				// data.file, data.response, data.success
				var preview = document.getElementById('item-preview-icon');
				if (!pb.project.puid) pb.project.puid = data.response.puid;
				preview.style.backgroundImage = 'url("file:///' + data.response.filepath.replaceAll('\\','/') + '")';
				preview.style.backgroundSize = '100% 100%';
				itemEditor.item.core.iconimage = data;
			});
			return;
		}
	
		var file = iconFileInput.files[0];
		var imageType = /image.*/;

		var fd = new FormData();
		fd.append("image", file);
		
		var opts = {
			command: 'write_image',
			width: parseInt(preview.style.width),
			height: parseInt(preview.style.height)
		};
		
		if (pb.project.puid) opts.puid = pb.project.puid;
		
		fd.append("opts", JSON.stringify(opts));
		
		server({formdata: fd, callback: function(data){
			var tstr = data;
			var fstr = tstr.substring(tstr.indexOf('projects/')+9, tstr.indexOf('/images/'));
			var preview = document.getElementById('item-preview-icon');
			pb.project.puid = fstr;
			
			preview.style.backgroundImage = 'url('+data+')';
			preview.style.backgroundSize = '100% 100%';
			itemEditor.item.core.iconimage = data;
		}});
		
	});

	fileInput.addEventListener('change', function(e) {
	
		if (standalone){
			console.log('sio-fio image file upload');
			if (pb.project.puid) var puid = pb.project.puid;
			else var puid = false;
			siofio.uploadFile(fileInput.files[0], {command: 'image', puid: puid}, function(data){
				// data.file, data.response, data.success
				if (!pb.project.puid) pb.project.puid = data.response.puid;
				preview.style.backgroundImage = 'url("file:///' + data.response.filepath.replaceAll('\\','/') + '")';
				preview.style.backgroundSize = '100% 100%';
				itemEditor.tempitem.states[itemEditor.state].bgimage = 'url("file:///' + data.response.filepath.replaceAll('\\','/') + '")';
				var found = false;
				for (var i=0; i<pb.assets['user'].length; i++){
					if (pb.assets['user'][i].core.data == data) found = true;
				}
				if (!found){
					var newasset = new Asset({data: data});
					newasset.element.style.backgroundImage = 'url("file:///' + data.response.filepath.replaceAll('\\','/') + '")';
					newasset.element.style.backgroundSize = '100% 100%';
					newasset.element.className += ' cloneable draggable';
					$('#assets-images-pane-list').append(newasset.element);
				}
			});
			return;
		}
	
		var file = fileInput.files[0];
		var imageType = /image.*/;

		var fd = new FormData();
		fd.append("image", file);
		
		var opts = {
			command: 'write_image',
			width: parseInt(preview.style.width),
			height: parseInt(preview.style.height)
		};
		
		if (pb.project.puid) opts.puid = pb.project.puid;
		
		fd.append("opts", JSON.stringify(opts));
		
		server({formdata: fd, callback: function(data){
			var tstr = data;
			var fstr = tstr.substring(tstr.indexOf('projects/')+9, tstr.indexOf('/images/'));
			pb.project.puid = fstr;
			
			preview.style.backgroundImage = 'url('+data+')';
			preview.style.backgroundSize = '100% 100%';
			itemEditor.tempitem.states[itemEditor.state].bgimage = 'url('+data+')';
			
			var found = false;
			for (var i=0; i<pb.assets['user'].length; i++){
				if (pb.assets['user'][i].core.data == data) found = true;
			}
			
			if (!found){
				var newasset = new Asset({data: data});
				newasset.element.style.backgroundImage = 'url(' + data + ')';
				newasset.element.style.backgroundSize = '100% 100%';
				newasset.element.className += ' cloneable draggable';
				$('#assets-images-pane-list').append(newasset.element);
			}
		}});
		
	});
	
	$('#active-state-button').click(function(){
		setTempItemState(0);
	});
	$('#inactive-state-button').click(function(){
		setTempItemState(1);
	});
	
	$('#canvasBackground').css({display: 'none'});
	$('.item-options-labels').click(function(e){
		var check = false;
		if (this.id != "item-script"){
			closeTextEditor(true);
		}
		if ($('#'+this.id+'-container').height() == $('#'+this.id+'-container')[0].scrollHeight)
			check = true;
		for (var i=0; i<$('.item-options').length; i++){
			tweencss({object: $( '.item-options' )[i], time: 0.1,
				props: {height: parseInt($( '.item-options' )[i].style.height)}, to: {height: 0}});
		}
		if (!check) tweencss({object: $('#'+this.id+'-container')[0], time: 0.6,
			props: {height: parseInt($('#'+this.id+'-container')[0].style.height)},
				to: {height: $('#'+this.id+'-container')[0].scrollHeight}});
	});
	
	$('#text-shadow').change(function(){
		if ($('#text-shadow').is(':checked')){
			pb.tempbutton.textnode.style.textShadow = 
				$('#text-shadow-hp-input').val()+"px "+
				$('#text-shadow-vp-input').val()+"px "+
				$('#text-shadow-br-input').val()+"px #ff0000";
		}
		else pb.tempbutton.textnode.style.textShadow="none";
	});
	$('#text-shadow-vp-input').keyup(function(){
		if ($('#text-shadow').is(':checked')){
			pb.tempbutton.textnode.style.textShadow = 
				$('#text-shadow-hp-input').val()+"px "+
				$('#text-shadow-vp-input').val()+"px "+
				$('#text-shadow-br-input').val()+"px #ff0000";
		}
	});
	$('#text-shadow-hp-input').keyup(function(){
		if ($('#text-shadow').is(':checked')){
			pb.tempbutton.textnode.style.textShadow = 
				$('#text-shadow-hp-input').val()+"px "+
				$('#text-shadow-vp-input').val()+"px "+
				$('#text-shadow-br-input').val()+"px #ff0000";
		}
	});
	$('#text-shadow-br-input').keyup(function(){
		if ($('#text-shadow').is(':checked')){
			pb.tempbutton.textnode.style.textShadow = 
				$('#text-shadow-hp-input').val()+"px "+
				$('#text-shadow-vp-input').val()+"px "+
				$('#text-shadow-br-input').val()+"px #ff0000";
		}
	});
	
	$('#box-shadow').change(function(){
		if ($('#box-shadow-inset').is(':checked')) var inset = 'inset ';
		else var inset = '';
		var hex = '#'+$('#ie-boxshadowColorSelector').val();
		if ($('#box-shadow').is(':checked')){
			preview.style.boxShadow = inset+
			$('#box-shadow-hp-input').val()+"px "+
			$('#box-shadow-vp-input').val()+"px "+
			$('#box-shadow-br-input').val()+"px "+
			$('#box-shadow-sr-input').val()+"px "+hex;
		}
		else preview.style.boxShadow="none";
	});
	$('#box-shadow-inset').change(function(){
		if ($('#box-shadow-inset').is(':checked')) var inset = 'inset ';
		else var inset = '';
		var hex = '#'+$('#ie-boxshadowColorSelector').val();
		if ($('#box-shadow').is(':checked')){
			preview.style.boxShadow = inset+
			$('#box-shadow-hp-input').val()+"px "+
			$('#box-shadow-vp-input').val()+"px "+
			$('#box-shadow-br-input').val()+"px "+
			$('#box-shadow-sr-input').val()+"px "+hex;
		}
		else preview.style.boxShadow="none";
	});
	$('#box-shadow-vp-input').keyup(function(){
		if ($('#box-shadow-inset').is(':checked')) var inset = 'inset ';
		else var inset = '';
		var hex = '#'+$('#ie-boxshadowColorSelector').val();
		if ($('#box-shadow').is(':checked')){
			preview.style.boxShadow = inset+
			$('#box-shadow-hp-input').val()+"px "+
			$('#box-shadow-vp-input').val()+"px "+
			$('#box-shadow-br-input').val()+"px "+
			$('#box-shadow-sr-input').val()+"px "+hex;		}
	});
	$('#box-shadow-hp-input').keyup(function(){
		if ($('#box-shadow-inset').is(':checked')) var inset = 'inset ';
		else var inset = '';
		var hex = '#'+$('#ie-boxshadowColorSelector').val();
		if ($('#box-shadow').is(':checked')){
			preview.style.boxShadow = inset+
			$('#box-shadow-hp-input').val()+"px "+
			$('#box-shadow-vp-input').val()+"px "+
			$('#box-shadow-br-input').val()+"px "+
			$('#box-shadow-sr-input').val()+"px "+hex;		}
	});
	$('#box-shadow-br-input').keyup(function(){
		if ($('#box-shadow-inset').is(':checked')) var inset = 'inset ';
		else var inset = '';
		var hex = '#'+$('#ie-boxshadowColorSelector').val();
		if ($('#box-shadow').is(':checked')){
			preview.style.boxShadow = inset+
			$('#box-shadow-hp-input').val()+"px "+
			$('#box-shadow-vp-input').val()+"px "+
			$('#box-shadow-br-input').val()+"px "+
			$('#box-shadow-sr-input').val()+"px "+hex;		}
	});
	$('#box-shadow-sr-input').keyup(function(){
		if ($('#box-shadow-inset').is(':checked')) var inset = 'inset ';
		else var inset = '';
		var hex = '#'+$('#ie-boxshadowColorSelector').val();
		if ($('#box-shadow').is(':checked')){
			preview.style.boxShadow = inset+
			$('#box-shadow-hp-input').val()+"px "+
			$('#box-shadow-vp-input').val()+"px "+
			$('#box-shadow-br-input').val()+"px "+
			$('#box-shadow-sr-input').val()+"px "+hex;		}
	});
	$('#ie-boxshadowColorSelector').change(function(){
		if ($('#box-shadow-inset').is(':checked')) var inset = 'inset ';
		else var inset = '';
		var hex = '#'+$('#ie-boxshadowColorSelector').val();
		if ($('#box-shadow').is(':checked')){
			preview.style.boxShadow = inset+
			$('#box-shadow-hp-input').val()+"px "+
			$('#box-shadow-vp-input').val()+"px "+
			$('#box-shadow-br-input').val()+"px "+
			$('#box-shadow-sr-input').val()+"px "+hex;		}
	});
	
	$('#touchpanelkey-select').change(function(){
		itemEditor.tempitem.touchpanelkey = parseInt(this.value);
	});
	
	$('#touchpanelkey-radio1')[0].onmousedown = function(e){
		e.preventDefault();
		itemEditor.tempitem.touchpanelkey = 1;
		$('#touchpanelkey-radio2').prop('checked', false);
		$('#touchpanelkey-radio3').prop('checked', false);
		$('#touchpanelkey-radio4').prop('checked', false);
		$('#touchpanelkey-radio5').prop('checked', false);
		$('#touchpanelkey-radio6').prop('checked', false);
		$('#touchpanelkey-radio7').prop('checked', false);
		$('#touchpanelkey-radio8').prop('checked', false);
	};
	$('#touchpanelkey-radio1')[0].onmouseup = function(e){
		if ($('#touchpanelkey-radio1').prop('checked')){
			setTimeout(function(){$('#touchpanelkey-radio1').prop('checked', false);}, 100);
			itemEditor.tempitem.touchpanelkey = false;
		}
	}
	$('#touchpanelkey-radio2')[0].onmousedown = function(e){
		e.preventDefault();
		itemEditor.tempitem.touchpanelkey = 2;
		$('#touchpanelkey-radio1').prop('checked', false);
		$('#touchpanelkey-radio3').prop('checked', false);
		$('#touchpanelkey-radio4').prop('checked', false);
		$('#touchpanelkey-radio5').prop('checked', false);
		$('#touchpanelkey-radio6').prop('checked', false);
		$('#touchpanelkey-radio7').prop('checked', false);
		$('#touchpanelkey-radio8').prop('checked', false);
	};
	$('#touchpanelkey-radio2')[0].onmouseup = function(e){
		if ($('#touchpanelkey-radio2').prop('checked')){
			setTimeout(function(){$('#touchpanelkey-radio2').prop('checked', false);}, 100);
			itemEditor.tempitem.touchpanelkey = false;
		}
	}
	$('#touchpanelkey-radio3')[0].onmousedown = function(e){
		e.preventDefault();
		itemEditor.tempitem.touchpanelkey = 3;
		$('#touchpanelkey-radio1').prop('checked', false);
		$('#touchpanelkey-radio2').prop('checked', false);
		$('#touchpanelkey-radio4').prop('checked', false);
		$('#touchpanelkey-radio5').prop('checked', false);
		$('#touchpanelkey-radio6').prop('checked', false);
		$('#touchpanelkey-radio7').prop('checked', false);
		$('#touchpanelkey-radio8').prop('checked', false);
	};
	$('#touchpanelkey-radio3')[0].onmouseup = function(e){
		if ($('#touchpanelkey-radio3').prop('checked')){
			setTimeout(function(){$('#touchpanelkey-radio3').prop('checked', false);}, 100);
			itemEditor.tempitem.touchpanelkey = false;
		}
	}
	$('#touchpanelkey-radio4')[0].onmousedown = function(e){
		e.preventDefault();
		itemEditor.tempitem.touchpanelkey = 4;
		$('#touchpanelkey-radio1').prop('checked', false);
		$('#touchpanelkey-radio2').prop('checked', false);
		$('#touchpanelkey-radio3').prop('checked', false);
		$('#touchpanelkey-radio5').prop('checked', false);
		$('#touchpanelkey-radio6').prop('checked', false);
		$('#touchpanelkey-radio7').prop('checked', false);
		$('#touchpanelkey-radio8').prop('checked', false);
	};
	$('#touchpanelkey-radio4')[0].onmouseup = function(e){
		if ($('#touchpanelkey-radio4').prop('checked')){
			setTimeout(function(){$('#touchpanelkey-radio4').prop('checked', false);}, 100);
			itemEditor.tempitem.touchpanelkey = false;
		}
	}
	$('#touchpanelkey-radio5')[0].onmousedown = function(e){
		e.preventDefault();
		itemEditor.tempitem.touchpanelkey = 5;
		$('#touchpanelkey-radio1').prop('checked', false);
		$('#touchpanelkey-radio2').prop('checked', false);
		$('#touchpanelkey-radio3').prop('checked', false);
		$('#touchpanelkey-radio4').prop('checked', false);
		$('#touchpanelkey-radio6').prop('checked', false);
		$('#touchpanelkey-radio7').prop('checked', false);
		$('#touchpanelkey-radio8').prop('checked', false);
	};
	$('#touchpanelkey-radio5')[0].onmouseup = function(e){
		if ($('#touchpanelkey-radio5').prop('checked')){
			setTimeout(function(){$('#touchpanelkey-radio5').prop('checked', false);}, 100);
			itemEditor.tempitem.touchpanelkey = false;
		}
	}
	$('#touchpanelkey-radio6')[0].onmousedown = function(e){
		e.preventDefault();
		itemEditor.tempitem.touchpanelkey = 6;
		$('#touchpanelkey-radio1').prop('checked', false);
		$('#touchpanelkey-radio2').prop('checked', false);
		$('#touchpanelkey-radio3').prop('checked', false);
		$('#touchpanelkey-radio4').prop('checked', false);
		$('#touchpanelkey-radio5').prop('checked', false);
		$('#touchpanelkey-radio7').prop('checked', false);
		$('#touchpanelkey-radio8').prop('checked', false);
	};
	$('#touchpanelkey-radio6')[0].onmouseup = function(e){
		if ($('#touchpanelkey-radio6').prop('checked')){
			setTimeout(function(){$('#touchpanelkey-radio6').prop('checked', false);}, 100);
			itemEditor.tempitem.touchpanelkey = false;
		}
	}
	$('#touchpanelkey-radio7')[0].onmousedown = function(e){
		e.preventDefault();
		itemEditor.tempitem.touchpanelkey = 7;
		$('#touchpanelkey-radio1').prop('checked', false);
		$('#touchpanelkey-radio2').prop('checked', false);
		$('#touchpanelkey-radio3').prop('checked', false);
		$('#touchpanelkey-radio4').prop('checked', false);
		$('#touchpanelkey-radio5').prop('checked', false);
		$('#touchpanelkey-radio6').prop('checked', false);
		$('#touchpanelkey-radio8').prop('checked', false);
	};
	$('#touchpanelkey-radio7')[0].onmouseup = function(e){
		if ($('#touchpanelkey-radio7').prop('checked')){
			setTimeout(function(){$('#touchpanelkey-radio7').prop('checked', false);}, 100);
			itemEditor.tempitem.touchpanelkey = false;
		}
	}
	$('#touchpanelkey-radio8')[0].onmousedown = function(e){
		e.preventDefault();
		itemEditor.tempitem.touchpanelkey = 8;
		$('#touchpanelkey-radio1').prop('checked', false);
		$('#touchpanelkey-radio2').prop('checked', false);
		$('#touchpanelkey-radio3').prop('checked', false);
		$('#touchpanelkey-radio4').prop('checked', false);
		$('#touchpanelkey-radio5').prop('checked', false);
		$('#touchpanelkey-radio6').prop('checked', false);
		$('#touchpanelkey-radio7').prop('checked', false);
	};
	$('#touchpanelkey-radio8')[0].onmouseup = function(e){
		if ($('#touchpanelkey-radio8').prop('checked')){
			setTimeout(function(){$('#touchpanelkey-radio8').prop('checked', false);}, 100);
			itemEditor.tempitem.touchpanelkey = false;
		}
	}
	
	$("input[name='border-tl']").change(function(e){
		if (this.value == 'px'){
			$('#item-border-radius-tl').show();
			$('#tl-slider').hide();
			var preview = document.getElementById('item-preview');
			var tlradius = $('#item-border-radius-tl').val();
			tweencss({object: preview, time: 1, units: 'px',
				props: {borderTopLeftRadius: parseInt(preview.style.borderTopLeftRadius)},
				to: {borderTopLeftRadius: tlradius}});
		}
		else {
			$('#item-border-radius-tl').hide();
			$('#tl-slider').show();
			$('#tl-slider').css({display: 'inline-block'});
			var preview = document.getElementById('item-preview');
			pb.tlradius = $('#tl-slider').slider("option", "value");
			tweencss({object: preview, time: 1, units: '%',
				props: {borderTopLeftRadius: parseInt(preview.style.borderTopLeftRadius)},
				to: {borderTopLeftRadius: tlradius}});
		}
	});
	
	$("input[name='border-tr']").change(function(e){
		if (this.value == 'px') {
			$('#item-border-radius-tr').show();
			$('#tr-slider').hide();
			var preview = document.getElementById('item-preview');
			var trradius = $('#item-border-radius-tr').val();
			tweencss({object: preview, time: 1,
				props: {borderTopRightRadius: parseInt(preview.style.borderTopRightRadius)},
				to: {borderTopRightRadius: trradius}});
		}
		else {
			$('#item-border-radius-tr').hide();
			$('#tr-slider').show();
			$('#tr-slider').css({display: 'inline-block'});
			var preview = document.getElementById('item-preview');
			pb.trradius = $('#tr-slider').slider("option", "value");
			tweencss({object: preview, time: 1, units: '%',
				props: {borderTopRightRadius: parseInt(preview.style.borderTopRightRadius)},
				to: {borderTopRightRadius: trradius}});
		}
	});
	
	$("input[name='border-bl']").change(function(e){
		if (this.value == 'px') {
			$('#item-border-radius-bl').show();
			$('#bl-slider').hide();
			var preview = document.getElementById('item-preview');
			var blradius = $('#item-border-radius-bl').val();
			tweencss({object: preview, time: 1,
				props: {borderBottomLeftRadius: parseInt(preview.style.borderBottomLeftRadius)},
				to: {borderBottomLeftRadius: blradius}});
		}
		else {
			$('#item-border-radius-bl').hide();
			$('#bl-slider').show();
			$('#bl-slider').css({display: 'inline-block'});
			var preview = document.getElementById('item-preview');
			pb.blradius = $('#bl-slider').slider("option", "value");
			tweencss({object: preview, time: 1, units: '%',
				props: {borderBottomLeftRadius: parseInt(preview.style.borderBottomLeftRadius)},
				to: {borderBottomLeftRadius: blradius}});
		}
	});
	
	$("input[name='border-br']").change(function(e){
		if (this.value == 'px') {
			$('#item-border-radius-br').show();
			$('#br-slider').hide();
			var preview = document.getElementById('item-preview');
			var brradius = $('#item-border-radius-br').val();
			tweencss({object: preview, time: 1,
				props: {borderBottomRightRadius: parseInt(preview.style.borderBottomRightRadius)},
				to: {borderBottomRightRadius: brradius}});
		}
		else {
			$('#item-border-radius-br').hide();
			$('#br-slider').show();
			$('#br-slider').css({display: 'inline-block'});
			var preview = document.getElementById('item-preview');
			pb.brradius = $('#br-slider').slider("option", "value");
			tweencss({object: preview, time: 1, units: '%',
				props: {borderBottomRightRadius: parseInt(preview.style.borderBottomRightRadius)},
				to: {borderBottomRightRadius: brradius}});
		}
	});
	
	$( "#tl-slider" ).slider({
		value:0,
		min: 0,
		max: 100,
		step: 1,
		slide: function(event, ui) {
			var preview = document.getElementById('item-preview');
			pb.tlradius = $('#tl-slider').slider("option", "value");
			tweencss({object: preview, time: 1, units: '%',
				props: {borderTopLeftRadius: parseInt(preview.style.borderTopLeftRadius)},
				to: {borderTopLeftRadius: pb.tlradius}});
		}
	});
	
	$("#tr-slider").slider({
		value:0,
		min: 0,
		max: 100,
		step: 1,
		slide: function( event, ui ) {
			var preview = document.getElementById('item-preview');
			pb.trradius = $('#tr-slider').slider("option", "value");	
			tweencss({object: preview, time: 1, units: '%',
				props: {borderTopRightRadius: parseInt(preview.style.borderTopRightRadius)},
				to: {borderTopRightRadius: pb.trradius}});
		}
	});
	
	$("#bl-slider").slider({
		value:0,
		min: 0,
		max: 100,
		step: 1,
		slide: function( event, ui ) {
			var preview = document.getElementById('item-preview');
			pb.blradius = $('#bl-slider').slider("option", "value");
			tweencss({object: preview, time: 1, units: '%',
				props: {borderBottomLeftRadius: parseInt(preview.style.borderBottomLeftRadius)},
				to: {borderBottomLeftRadius: pb.blradius}});
		}
	});
	
	$("#br-slider").slider({
		value:0,
		min: 0,
		max: 100,
		step: 1,
		slide: function( event, ui ) {
			var preview = document.getElementById('item-preview');
			pb.brradius = $('#br-slider').slider("option", "value");
			tweencss({object: preview, time: 1, units: '%',
				props: {borderBottomRightRadius: parseInt(preview.style.borderBottomRightRadius)},
				to: {borderBottomRightRadius: pb.brradius}});
		}
	});
	
	$("#hue-slider").slider({
		value:0,
		min: 0,
		max: 100,
		step: 1,
		slide: function( event, ui ) {
			var preview = document.getElementById('item-preview');
			var tval = (parseInt($('#hue-slider').slider("option", "value"))*3.6)+'deg';
			if (undef(itemEditor.cssfilter)) itemEditor.cssfilter = 'hue-rotate(0deg) saturate(1)';
			var tstr = itemEditor.cssfilter.substring(nindexOf(itemEditor.cssfilter, '(', 1)+1, nindexOf(itemEditor.cssfilter, ')', 1));
			itemEditor.cssfilter = itemEditor.cssfilter.replace(tstr,tval);
			$(preview).css({'-webkit-filter': itemEditor.cssfilter});
			console.log(itemEditor.cssfilter);
		}
	});
	
	$("#sat-slider").slider({
		value:0,
		min: 0,
		max: 100,
		step: 1,
		slide: function( event, ui ) {
			var preview = document.getElementById('item-preview');
			var tval = (parseInt($('#sat-slider').slider("option", "value"))*2)+'%';
			if (undef(itemEditor.cssfilter)) itemEditor.cssfilter = 'hue-rotate(0deg) saturate(1)';
			var tstr = itemEditor.cssfilter.substring(nindexOf(itemEditor.cssfilter, '(', 2)+1, nindexOf(itemEditor.cssfilter, ')', 2));
			itemEditor.cssfilter = itemEditor.cssfilter.replace(tstr,tval);
			$(preview).css({'-webkit-filter': itemEditor.cssfilter});
			console.log(itemEditor.cssfilter);
		}
	});
	
	$('#item-border-radius-tl').keyup(function(){
		var preview = document.getElementById('item-preview');
		var tlradius = $('#item-border-radius-tl').val();
		tweencss({object: preview, time: 1,
				props: {borderTopLeftRadius: parseInt(preview.style.borderTopLeftRadius)},
				to: {borderTopLeftRadius: tlradius}});
	});
	$('#item-border-radius-tr').keyup(function(){
		var preview = document.getElementById('item-preview');
		var trradius = $('#item-border-radius-tr').val();
		tweencss({object: preview, time: 1,
				props: {borderTopRightRadius: parseInt(preview.style.borderTopRightRadius)},
				to: {borderTopRightRadius: trradius}});
	});
	$('#item-border-radius-bl').keyup(function(){
		var preview = document.getElementById('item-preview');
		var blradius = $('#item-border-radius-bl').val();
		tweencss({object: preview, time: 1,
				props: {borderBottomLeftRadius: parseInt(preview.style.borderBottomLeftRadius)},
				to: {borderBottomLeftRadius: blradius}});
	});
	$('#item-border-radius-br').keyup(function(){
		var preview = document.getElementById('item-preview');
		var brradius = $('#item-border-radius-br').val();
		tweencss({object: preview, time: 1,
				props: {borderBottomRightRadius: parseInt(preview.style.borderBottomRightRadius)}, 
				to: {borderBottomRightRadius: brradius}});
	});

}