/******************************************************************************
@owner: SVSi
@author: Arthur Johnson (ajohnson@svsiav.com)
@function: Panel Class
@Panel
*******************************************************************************/

//*************  PANEL CLASS  ***************//

	function Panel(opts){
		
		if (undef(opts)) opts = {};
		
		if (undef(pb.panelindex)) pb.panelindex = 0;
		
	//**************************** CORE ******************************//
		if (opts.hasOwnProperty('core')){
			
			this.core = opts.core;
			
			if (undef(opts.copyid)) this.core.id = pb.uniqueId('Panel-'+(pb.panelindex++));
			//else this.core.id = pb.uniqueId(this.core.id);
			
			if (!undef(opts.type)) this.core.type = opts.type;
			
		}
		else {
		
			this.core = {};
			
			this.core.id = opts.hasOwnProperty('id') ? opts.id : pb.uniqueId('Panel-'+(pb.panelindex++));
			this.core.name = opts.hasOwnProperty('name') ? opts.name : this.core.id;
			this.core.type = opts.hasOwnProperty('type') ? opts.type : 'panel';
			this.core.scale = opts.hasOwnProperty('scale') ? opts.scale : 1;			
			this.core.scripts = opts.hasOwnProperty('scripts') ? opts.scripts : [];
			this.core.conditional = opts.hasOwnProperty('conditional') ? opts.conditional : false;
			this.core.elementHTML = opts.hasOwnProperty('elementHTML') ? opts.elementHTML : '';
			this.core.style = opts.hasOwnProperty('style') ? opts.style : 'background-color: #FFFFFF;';
			this.core.basewidth = opts.hasOwnProperty('basewidth') ? opts.basewidth : 80;
			this.core.baseheight = opts.hasOwnProperty('baseheight') ? opts.baseheight : 80;
			this.core.basetop = opts.hasOwnProperty('basetop') ? opts.basetop : 0;
			this.core.baseleft = opts.hasOwnProperty('baseleft') ? opts.baseleft : 0;			
			this.core.draggedoffsetx = opts.hasOwnProperty('draggedoffsetx') ? opts.draggedoffsetx : 0;
			this.core.draggedoffsety = opts.hasOwnProperty('draggedoffsety') ? opts.draggedoffsety : 0;	
			this.core.states = opts.hasOwnProperty('states') ? opts.states : [{images: []},{images: []}];
			this.core.currentstate = opts.hasOwnProperty('currentstate') ? opts.currentstate : 0;
			this.core.updating = opts.hasOwnProperty('updating') ? opts.updating : false;
			this.core.update = opts.hasOwnProperty('update') ? opts.update : noop;
			this.core.responsive = opts.hasOwnProperty('responsive') ? opts.responsive : false;
			this.core.draggable = opts.hasOwnProperty('draggable') ? opts.draggable : false;
			this.core.clonable = opts.hasOwnProperty('clonable') ? opts.clonable : false;
			this.core.autoresize = opts.hasOwnProperty('autoresize') ? opts.autoresize : false;
			this.core.debugging = opts.hasOwnProperty('debugging') ? opts.debugging : false;
			this.core.defaultpanel = opts.hasOwnProperty('defaultpanel') ? opts.defaultpanel : false;
			this.core.autoinsert = opts.hasOwnProperty('autoinsert') ? opts.autoinsert : true;
			
		}
	
	//*************************** ELEMENT ****************************//
		this.element = document.createElement('div');
		this.element.style.cssText += this.core.style;
		this.element.id = this.core.id;
		
	//*************************** CHILDREN ****************************//
		this.buttons = opts.hasOwnProperty('buttons') ? opts.buttons : [];
		this.widgets = opts.hasOwnProperty('widgets') ? opts.widgets : [];
		this.subpanels = opts.hasOwnProperty('subpanels') ? opts.subpanels : [];

	//**************************** INIT ******************************//
		if (this.core.type == 'panel') this.core.type = 'panels';
		if (this.core.type == 'template') this.core.type = 'templates';
		if (undef(this.core.autoinsert)) this.core.autoinsert = true;
		if (this.core.autoinsert) pb.user[this.core.type].push(this);
		
		this.core.previouslocation = {top: this.element.style.top, left: this.element.style.left};
		
	}
	//************************** PROTOTYPE **************************//
	Panel.prototype = {
		getWidth: function(){
			return parseInt(this.element.style.width);
		},
		getHeight: function(){
			return parseInt(this.element.style.height);
		},
		destroy: function(){
			removeFromArray(pb.user.panels, this);
			removeFromArray(pb.user.templates, this);
			$(this.element).remove();
		},
		remove: function(opts){
			this.panel.removeChild(this);
		},
		scaleTo: function(s){
			this.scale = s;
			$(this.element).css('transform', 'scale('+s+','+s+')');
			$(this.element).css('-webkit-transform', 'scale('+s+','+s+')');
			$(this.element).css('-moz-transform', 'scale('+s+','+s+')');
			$(this.element).css('-ms-transform', 'scale('+s+','+s+')');
		},
		clone: function(opts){
		
			if (undef(opts)) opts = {};
			
			var newcore = deepCopy(this.core);
			
			var extrastyle = opts.hasOwnProperty('extrastyle') ? opts.extrastyle : '';
			
			//this.core.style = this.element.style.cssText + extrastyle;
			newcore.style = this.element.style.cssText + extrastyle;
			//if (opts.hasOwnProperty('extrastyle')) newcore.style = this.element.style.cssText + opts.extrastyle;
			
			if (opts.hasOwnProperty('id')) newcore.id = opts.id;
			if (opts.hasOwnProperty('type')) newcore.type = opts.type;
			if (opts.hasOwnProperty('basewidth')) newcore.basewidth = opts.basewidth;
			if (opts.hasOwnProperty('baseheight')) newcore.baseheight = opts.baseheight;
			if (opts.hasOwnProperty('basetop')) newcore.basetop = opts.basetop;
			if (opts.hasOwnProperty('baseleft')) newcore.baseleft = opts.baseleft;
			if (opts.hasOwnProperty('autoinsert')) newcore.autoinsert = opts.autoinsert;

			var newpanel = new Panel({
				core: newcore
			});
			
			newpanel.element.style.cssText += 'background-size: 100% 100%; margin: 0px;';
			
			var id_pairs = [];
			
			for (var i=0; i<this.buttons.length; i++){
				var id1 = this.buttons[i].core.id;
				var tbutton = this.buttons[i].clone();
				var id2 = tbutton.core.id;
				id_pairs.push([id1, id2]);
				tbutton.panel = newpanel;
				$(tbutton.element).addClass('draggable');
				newpanel.addChild(tbutton);
				tbutton.textnode.style.display = 'none';
			}
			for (var i=0; i<this.widgets.length; i++){
				var id1 = this.widgets[i].core.id;
				var twidget = this.widgets[i].clone();
				var id2 = twidget.core.id;
				id_pairs.push([id1, id2]);
				twidget.panel = newpanel;
				$(twidget.element).addClass('draggable');
				newpanel.addChild(twidget);
				//twidget.element.className = twidget.element.className
				twidget.element.className = twidget.element.className.replace(/cloneable/g, '');
				twidget.element.className = twidget.element.className.replace(/clonable/g, '');
			}
			
			console.log('idpairs', id_pairs, this.subpanels);
			
			if (this.subpanels){
				newpanel.subpanels = [];
				for (var i=0; i<this.subpanels.length; i++){
					var subpanel = this.subpanels[i]; var newchildlist = [];
					//var newsubpanel = subpanel.clone(); 
					var newsubpanel = new SubPanel({core: window.clone(subpanel.core), panel: newpanel});
					
					newsubpanel.children = [];
					
					newpanel.subpanels.push(newsubpanel);
					
					if (subpanel.children) 
					for (var j=0; j<subpanel.children.length; j++){
						var child = subpanel.children[j];
						for (var k=0; k<id_pairs.length; k++){
							//console.log('look at', child, id_pairs[k][0]);
							if (child === id_pairs[k][0]){
								newchildlist.push(id_pairs[k][1]);
							}
						}
					}
					
					newsubpanel.children = newchildlist;
				}
			}
			
			//console.log('children lists', subpanel.children, newsubpanel.children);
			//console.log('id pairs', id_pairs);
			//console.log('newpanel subpanels', newpanel.subpanels);
			
			return newpanel;
			
		},
		copy: function(opts){
		
			if (undef(opts)) return;
			if (undef(opts.panel)) return;
			
			var panel = opts.hasOwnProperty('panel') ? opts.panel : false;
			var extrastyle = opts.hasOwnProperty('extrastyle') ? opts.extrastyle : '';
			var copyid = opts.hasOwnProperty('copyid') ? opts.copyid : false;
			
			this.core = deepCopy(panel.core);
			this.element.className = panel.element.className;
			this.element.style.cssText = panel.element.style.cssText + extrastyle;
			
			if (copyid){
				this.element.id = panel.element.id;
				this.core.id = panel.element.id;
			}
			
		},
		click: function(){
			
			if (pb.currentpanel){
			
				if (this.core.type == 'templates'){				
					$('.templatelibraryselected').removeClass('templatelibraryselected');
					$(this.element).addClass('templatelibraryselected');
				}
			
			}
		
			if (pb.project.textEditing){
			
				if (pb.project.textEditing.core.text)
					pb.project.textEditing.core.text = 
					$(pb.project.textEditing.textnode)[0].innerHTML;
				
				for(k in CKEDITOR.instances){
					var instance = CKEDITOR.instances[k];
					instance.destroy();
				}
				
				if (pb.project.textEditing.textnode) {
					$(pb.project.textEditing.textnode).attr('contenteditable', 'false');
					$(pb.project.textEditing.textnode).blur();
					$(pb.project.textEditing.textnode).addClass('item_child');
					allDescendantsAddClass(pb.project.textEditing.textnode, 'ck_edit');
					$(pb.project.textEditing.textnode).children().addClass( 'ck_edit' );
				}
				else{
					$(pb.project.textEditing.element).attr('contenteditable', 'false');
					$(pb.project.textEditing.element).blur();
					$(pb.project.textEditing.element).addClass('item_child');
					if (pb.project.textEditing.element) 
						allDescendantsAddClass(pb.project.textEditing.element, 'ck_edit');
					$(pb.project.textEditing.element).children().addClass( 'ck_edit' );
				}
				pb.project.textEditing = false;
				
			}
			
			//$('.first').removeClass('first');
			//$('.outlined').removeClass('outlined');
			
			//$('#panel-props-label').click();
			
		},
		dragging: function(offx, offy){
		
			this.element.style.zIndex = 24000;
			this.element.style.position = 'absolute';
			
			//console.log('dragging', this);

			var elebounds = this.element.getBoundingClientRect();
			var s = pb.currentpanel.core.scale;
			var doffsetx = -this.core.draggedoffsetx;
			var doffsety = -this.core.draggedoffsety;
			var oy = 0;
			var ox = 0;
			
			//if (!this.panel){
				doffsetx = doffsetx*s;
				doffsety = doffsety*s;
			//}
			
			this.element.style.left = ox + (doffsetx + pb.mouse.x) - ($(this.element).outerWidth()*(1-s)/2) + 'px';			
			this.element.style.top = oy + (doffsety + pb.mouse.y) - ($(this.element).outerHeight()*(1-s)/2) + 'px';

		},
		drop: function(panel_onto){
		
			if (panel_onto || (pb.currentpanel && pb.mouse.isOverElement(pb.currentpanel.element) &&
					!pb.mouse.isOverElement(document.getElementById('tools-panel')))){
				
				console.log('applytemplate');
				
				pb.openDialog({
					content: '<div style="margin: 0px !important;">Replace current panel with this template?</div>',
					style: {height: '120px'},
					onConfirm: function(){
								
						var self = this;
						
						//var 
						
						var npanel = self.clone({autoinsert: false, id: pb.currentpanel.id});
			///console.log('cloning template...', npanel);
						$(npanel.element).addClass('selectables');
						var cparent = pb.currentpanel.element.parentNode;
						var twidth = parseInt(pb.currentpanel.element.style.width);
						var theight = parseInt(pb.currentpanel.element.style.height);
						$(pb.currentpanel.element).append(npanel.element);
						npanel.element.style.left = '0px';
						npanel.element.style.top = '0px';
						$(pb.currentpanel.element).remove();
						$(cparent).append(npanel.element);
						npanel.resize(twidth, theight);
						npanel.scaleTo(pb.currentpanel.core.scale);
						npanel.element.style.margin = 'none';
						npanel.element.style.marginTop = pb.currentpanel.element.style.marginTop;
						npanel.element.style.marginLeft = pb.currentpanel.element.style.marginLeft;
						
						var oldid = pb.currentpanel.element.id;
						var ind = pb.user.panels.indexOf(pb.currentpanel);
						pb.currentpanel.element.id = '';
						pb.currentpanel.core.id = '';
						pb.user.panels.splice(ind, 1, npanel);
						pb.currentpanel = npanel;
						npanel.core.type = 'panel';
						npanel.core.id = oldid;
						npanel.element.id = oldid;
						
						$('#'+oldid+'_label')[0].onclick = function(){
							pb.switchToPanel(this);
						}.bind(npanel);
						$('#'+oldid+'_label')[0].innerHTML = npanel.core.name;
						$('#panel-name-input').val(npanel.core.name);
						
						//npanel.element.className = 'clonable draggable';
						
						//console.log('dropping...subpanels?', this.subpanels);
						if (npanel.subpanels){
							//npanel.subpanels = [];
							for (var k=0; k<npanel.subpanels.length; k++){
								//var oldsubpanel = this.subpanels[k]; var subpanel = new SubPanel();
								var subpanel = npanel.subpanels[k];
								/*for (var l=0; l<oldsubpanel.children.length; l++){
									subpanel.children.push(oldsubpanel.children[l]);
								}
								var tid = subpanel.core.id;
								subpanel.core = deepCopy(oldsubpanel.core);
								subpanel.core.id = tid;*/
								//npanel.subpanels.push(subpanel);
								
								//$(subpanel.element).height($(oldsubpanel.element).height());
								
								//subpanel.makeDraggable(); 
								
								subpanel.element.className += ' draggable ';
								
								subpanel.panel = npanel;
								//subpanel.panel.addChild(subpanel);
								if (subpanel.element) npanel.element.appendChild(subpanel.element);
								
								subpanel.core.responsive = true;
								
								console.log('subpanel-', subpanel);
								
								subpanel.makeResizable();
								
								subpanel.element.style.width = subpanel.core.actualwidth + 'px';
								subpanel.element.style.height = subpanel.core.actualheight + 'px';
								subpanel.element.style.top = subpanel.core.top + 'px';
								subpanel.element.style.left = subpanel.core.left + 'px';
								
								//for (
								
								
								//subpanel.core.left = parseFloat(subpanel.element.style.left);
								//subpanel.core.top = parseFloat(subpanel.element.style.top);
									
								//tweencss({ object: subpanel.element, time: 0, props: {scale: 1.0}, to: {scale: 1.0} });
								
								//subpanel.core.previouslocation = {top: subpanel.element.style.top, left: subpanel.element.style.left};
								
								//npanel.addChild(subpanel);
							}
						}
						for (var k=0; k<npanel.subpanels.length; k++){
							for (var l=0; l<npanel.subpanels[k].children.length; l++){
								var npanelchild = npanel.subpanels[k].children[l];
								for (var m=0; m<this.subpanels.length; m++){
									for (var n=0; n<this.subpanels[m].children.length; n++){
										var thispanelchild = this.subpanels[m].children[n];
										//if (npanelchild
									}
								}
							}
						}
						//console.log('npanel subpanels', npanel);
						for (var k=0;k<npanel.buttons.length;k++){
							npanel.buttons[k].element.style.width = self.buttons[k].basewidth + 'px';
							npanel.buttons[k].element.style.height = self.buttons[k].baseheight + 'px';
							npanel.buttons[k].element.style.top = self.buttons[k].basetop + 'px';
							npanel.buttons[k].element.style.left = self.buttons[k].baseleft + 'px';
							$(npanel.buttons[k].element).removeClass('item_child');
							npanel.buttons[k].textnode.style.display = 'block';
							npanel.buttons[k].makeResizable();
							npanel.buttons[k].panel = npanel;					
							npanel.buttons[k].container = npanel.element;	
							npanel.buttons[k].element.className = npanel.buttons[k].element.className.replaceAll('clonable', '');
							npanel.buttons[k].element.className = npanel.buttons[k].element.className.replaceAll('cloneable', '');
						}
						for (var k=0;k<npanel.widgets.length;k++){
							npanel.widgets[k].element.style.width = self.widgets[k].basewidth + 'px';
							npanel.widgets[k].element.style.height = self.widgets[k].baseheight + 'px';
							npanel.widgets[k].element.style.top = self.widgets[k].basetop + 'px';
							npanel.widgets[k].element.style.left = self.widgets[k].baseleft + 'px';
							$(npanel.widgets[k].element).removeClass('item_child');
							npanel.widgets[k].makeResizable();
							npanel.widgets[k].panel = npanel;					
							npanel.widgets[k].container = npanel.element;
							npanel.widgets[k].element.className = npanel.widgets[k].element.className.replaceAll('clonable', '');
							npanel.widgets[k].element.className = npanel.widgets[k].element.className.replaceAll('cloneable', '');
							npanel.widgets[k].element.style.display = 'block';
							if (npanel.widgets[k].parts && npanel.widgets[k].parts[0]) npanel.widgets[k].parts[0].element.style.backgroundSize = '100% 100%';
						}
						
						//pb.setCurrentProjectTree();
						if (!panel_onto) this.destroy();
						pb.closeDialog();
						$('#fit-button').click();
						
					}.bind(this),
					onCancel: function(){
						if (!panel_onto) this.destroy();
						pb.closeDialog();
					}.bind(this)
				});
				
			}
			else this.destroy();
			
		},
		doubleclick: function(){
		
			if (this.panel && document.elementFromPoint(pb.mouse.x, pb.mouse.y) != this.textnode)
				openItemEditor(pb.getItemById(this.id), true, true);
				
			if (pb.project.textEditing){
			
				if (pb.project.textEditing.text) 
					pb.project.textEditing.text = $(pb.project.textEditing.textnode)[0].innerHTML;
				
				for(k in CKEDITOR.instances){
					var instance = CKEDITOR.instances[k];
					instance.destroy();
				}
				
				if (pb.project.textEditing.textnode) {
					$(pb.project.textEditing.textnode).attr('contenteditable', 'false');
					$(pb.project.textEditing.textnode).blur();
					$(pb.project.textEditing.textnode).addClass('item_child');
					allDescendantsAddClass(pb.project.textEditing.textnode, 'ck_edit');
					$(pb.project.textEditing.textnode).children().addClass( 'ck_edit' );
				}
				else{
					$(pb.project.textEditing.element).attr('contenteditable', 'false');
					$(pb.project.textEditing.element).blur();
					$(pb.project.textEditing.element).addClass('item_child');
					if (pb.project.textEditing.element) 
						allDescendantsAddClass(pb.project.textEditing.element, 'ck_edit');
					$(pb.project.textEditing.element).children().addClass( 'ck_edit' );
				}
				
				pb.project.textEditing = false;
				
			}
		},
		clickup: noop,
		hoverin: noop,
		hoverout: noop,
		constrain: function(){
		
			var bbox = pb.currentpanel.element.getBoundingClientRect();
			var elebox = this.element.getBoundingClientRect();
			var ox = 0; var oy = 0;
		
			if (elebox.left < bbox.left) this.element.style.left = '0px';
			if (elebox.top < bbox.top) this.element.style.top = '0px';
			if (elebox.right > bbox.right) this.element.style.left =
				$(pb.currentpanel.element).outerWidth()
				- $(this.element).outerWidth() + ox + 'px';
			if (elebox.bottom > bbox.bottom) this.element.style.top =
				$(pb.currentpanel.element).outerHeight()
				- $(this.element).outerHeight() + oy + 'px';
				
		},
		setStyle: function(s){
			if (this.element) this.element.style.cssText = s;
			this.states[this.currentstate].style = s;
		},
		setLeft: function(l){
			if (this.element) this.element.style.left = l + 'px';
			this.left = l;
		},
		setTop: function(t){
			if (this.element) this.element.style.top = t + 'px';
			this.left = t;
		},
		setPosition: function(l,t){
			if (this.element) this.element.style.left = l + 'px';
			if (this.element) this.element.style.top = t + 'px';
			this.left = l;
			this.top = t;
		},
		setWidth: function(w){
			if (this.element) this.element.style.width = w + 'px';
			this.actualwidth = w;
		},
		setHeight: function(h){
			if (this.element) this.element.style.height = h + 'px';
			this.actualheight = h;
		},
		setSize: function(w, h){
			if (this.element) this.element.style.width = w + 'px';
			if (this.element) this.element.style.height = h + 'px';
			this.actualwidth = w;
			this.actualheight = h;
		},
		setPositionCenter: function(x,y){
			if (this.element){
				this.element.style.left = (x - $(this.element).outerWidth()/2) + 'px';
				this.element.style.top = (y - $(this.element).outerHeight()/2) + 'px';
			}
			this.left = parseFloat(this.element.style.left);
			this.top = parseFloat(this.element.style.top);
		},
		getPositionCenter: function(){
			var result = {};
			result.x = parseFloat(this.element.style.left) + ($(this.element).outerWidth()/2);
			result.y = parseFloat(this.element.style.top) + ($(this.element).outerHeight()/2);
			return result;
		},
		getWidthToHeight: function(){
			return this.width/this.height;
		},
		getHeightToWidth: function(){
			return this.height/this.width;
		},
		getActualWidth: function(){
			return parseFloat(this.element.style.width);
		},
		getActualHeight: function(){
			return parseFloat(this.element.style.width);
		},
		restore: function(){
			this.panel.addChild(this);
			this.library.push(this);
		},
		makeDraggable: function(opts){
		
			if (undef(opts)) opts = {};
		
			var appendTo = opts.hasOwnProperty('appendTo') ? opts.appendTo : 'body';
			var helper = opts.hasOwnProperty('helper') ? opts.helper : 'clone';
			var start = opts.hasOwnProperty('start') ? opts.start : noop;
			var drag = opts.hasOwnProperty('drag') ? opts.drag : noop;
			var stop = opts.hasOwnProperty('stop') ? opts.stop : noop;
			var grid = opts.hasOwnProperty('grid') ? opts.grid : [1, 1];
			var containment = opts.hasOwnProperty('containment') ? opts.containment : 'document';
		
			$(this.element).draggable({
				appendTo: appendTo,
				helper: helper,
				start: start,
				drag: drag,
				stop: stop,
				grid: grid,
				containment: containment
			});
			
		},
		resize: function(width, height, recursive){
			if (undef(width)) var width = parseFloat(this.element.style.width);
			if (undef(height)) var height = parseFloat(this.element.style.height);
			
			var owidth = this.element.style.width.replace('px','');
			var oheight = this.element.style.height.replace('px','');
			if (width == owidth && height == oheight) return;
			var percentofoldwidth = width/owidth;
			var percentofoldheight = height/oheight;
			
			for (var i=0; i<this.buttons.length; i++){
				if (activepanel) allChildren(this.buttons[i].textnode, function(node){
					if (node && node.style){
						if (node === this.textnode && node.style.fontSize == "") node.style.fontSize = '14px';
						if (!!node.style.fontSize){
							if (undef(node.originalFontSize)) node.originalFontSize = parseFloat(node.style.fontSize);
							var ratio = $(this.element).outerHeight() / this.core.baseheight;
							node.style.fontSize = (node.originalFontSize * ratio) + 'px';
						} else console.log('empty', node);
					}
				}.bind(this.buttons[i]));
				this.buttons[i].element.style.left = (this.buttons[i].element.style.left.replace('px','') * percentofoldwidth) + 'px';
				this.buttons[i].element.style.top = (this.buttons[i].element.style.top.replace('px','') * percentofoldheight) + 'px';
				this.buttons[i].element.style.width = (this.buttons[i].element.style.width.replace('px','') * percentofoldwidth) + 'px';
				this.buttons[i].element.style.height = (this.buttons[i].element.style.height.replace('px','') * percentofoldheight) + 'px';
				//$(this.buttons[i].element).trigger('resize');
				/*var theight = ($(this.buttons[i].element).outerHeight()/2)
					- ($(this.buttons[i].textnode).outerHeight()/2);
					
				var textheightratio = $(this.buttons[i].element).outerHeight() / this.buttons[i].core.baseheight;
					console.log(this.buttons[i].core.textheight, textheightratio);
				$(this.buttons[i].textnode).css({
					top: theight + 'px',
					'font-size': this.buttons[i].core.textheight * textheightratio + 'px'
				});*/
				
				/*allChildren(this.buttons[i].textnode, function(node){
					if (node && node.style){
						if (node === this.textnode && node.style.fontSize == "") node.style.fontSize = '14px';
						if (!!node.style.fontSize){
							if (undef(node.originalFontSize)) node.originalFontSize = parseFloat(node.style.fontSize);
							var ratio = $(this.element).outerHeight() / this.core.baseheight;
							node.style.fontSize = (node.originalFontSize * ratio) + 'px';
						} else console.log('empty', node);
					}
				}.bind(this.buttons[i]));*/
				this.buttons[i].centerText();
				this.buttons[i].core.actualwidth = parseFloat(this.buttons[i].element.style.width);
				this.buttons[i].core.actualheight = parseFloat(this.buttons[i].element.style.height);
			}
			for (var i=0; i<this.widgets.length; i++){
				this.widgets[i].element.style.left = (this.widgets[i].element.style.left.replace('px','') * percentofoldwidth) + 'px';
				this.widgets[i].element.style.top = (this.widgets[i].element.style.top.replace('px','') * percentofoldheight) + 'px';
				this.widgets[i].element.style.width = (this.widgets[i].element.style.width.replace('px','') * percentofoldwidth) + 'px';
				this.widgets[i].element.style.height = (this.widgets[i].element.style.height.replace('px','') * percentofoldheight) + 'px';
				if (this.widgets[i].aspectratio) this.widgets[i].element.style.height = this.widgets[i].element.style.width;
				//$(this.widgets[i].element).trigger("resize");
				if (this.widgets[i].resize) this.widgets[i].resize();
			}
			this.element.style.width = width + 'px';
			this.element.style.height = height + 'px';

		},
		addChild: function(child){ 
		//console.log('adding child', child);
			if (child instanceof Button){
				this.buttons.push(child);
			}
			if (child instanceof Widget){
				this.widgets.push(child);
			}
			if (child instanceof SubPanel){
				if (!this.subpanels) this.subpanels = []; this.subpanels.push(child);
			}
		
			if (child.element) this.element.appendChild(child.element);
			child.panel = this;
			
		},
		removeChild: function(child){
		
			if (child instanceof Button){
				removeFromArray(this.buttons, child);
			}
			if (child instanceof Widget){
				removeFromArray(this.widgets, child);
			}
			if (child instanceof SubPanel){
				removeFromArray(this.subpanels, child);
			}
		
			if (child.element) $(child.element).remove();
			
			//pb.setCurrentProjectTree();
			if (pb.updateTree) pb.updateTree();
		},
		getChildByName: function(name){
			for (var i = 0; i < this.children.length; i++){
				if (this.children[i].name === name) return this.children[i];
			}
			return null;
		},
		getChildById: function(id){
			for (var i = 0; i < this.children.length; i++){
				if (this.children[i].id === id) return this.children[i];
			}
			return null;
		},
		getChildrenByClass: function(classname){
			var children = [];
			
			for (var i = 0; i < this.children.length; i++){
				var classlist = this.children[i].className.split(' ');
				if (arrayContains(classlist, classname)) children.push(this.children[i]);
			}
			if (children.length > 0) return children;
			else return null;
		},
		makeResizable: function(){
			$(this.element).resizable({
				autoHide: true,
				containment: 'parent', 
				handles: 'n, e, s, w, se, sw, nw, ne',
				resize: function (e, ui) {	
				
					var s = pb.currentpanel.scale;
					var bbox = pb.currentpanel.element.getBoundingClientRect();
					var elebox = this.element.getBoundingClientRect();
					
					var changeWidth = ui.size.width - ui.originalSize.width;
					
					var newWidth = ui.originalSize.width + changeWidth/s;
				 
					var changeHeight = ui.size.height - ui.originalSize.height;
					var newHeight = ui.originalSize.height + changeHeight/s; 
					
					this.element.style.width = newWidth+'px';
					this.element.style.height = newHeight+'px';
					
					var oldtop = this.element.style.top;
	
					if(ui.handle == 'w' || ui.handle == 'nw' || ui.handle == 'sw'){
						  this.element.style.left = ((pb.mouse.x - bbox.left)/s) + 'px';
					}
					if(ui.handle == 'n' || ui.handle == 'nw' || ui.handle == 'ne'){
						  this.element.style.top = ((pb.mouse.y - bbox.top)/s) + 'px';
					}
					
					var elebox = this.element.getBoundingClientRect();
					if (elebox.right >= bbox.right)
						this.element.style.width = newWidth - ((elebox.right - bbox.right)/s) + 'px';
					if (elebox.bottom >= bbox.bottom)
						this.element.style.height = newHeight - ((elebox.bottom - bbox.bottom)/s) + 'px';
					if (elebox.top <= bbox.top){
						if (this._lastsizey) this.element.style.height = this._lastsizey;
						this.element.style.top = '0px';
					}
					if (elebox.left <= bbox.left){
						if (this._lastsizex) this.element.style.width = this._lastsizex;
						this.element.style.left = '0px';
					}
				
					var theight = ($(this.element).outerHeight()/2)
						- ($(this.textnode).outerHeight()/2);
					$(this.textnode).css('top', theight + 'px');
					
					this._lastsizex = this.element.style.width;
					this._lastsizey = this.element.style.height;
					this._lastleft = this.element.style.left;
					this._lasttop = this.element.style.top;
					
				}.bind(this),
				start: function(e, ui) {
					this.action = new Action({
						type: 'size',
						items: [this],
						oldvalues: [{width: this.element.style.width, height: this.element.style.height}]
					});
				}.bind(this),
				stop: function(e, ui) {
					this.action.newvalues = [{width: this.element.style.width, height: this.element.style.height}];
					pb.saveaction(this.action);
				}.bind(this)
			}); 	
		}
	}
//**************  END PANEL  ****************//