var EditableCSS = Class.create({
	actionFile: 'plasticbriqFramework/actions/_css_actions.php',
	fieldId: null,
	cssId: null,
	formId: null,
	undoManager: null,
	cssRule: null,
	
	observeMethod: null,
	
	displayChanged: null,
	
	topFixedOffset: 0,
	backgroundYOffset: 0,
	bordersEqual: false,
	
	incrementalStyle: false,

	initialize: function(fieldId,cssId,cssRule,dontObserve) {
		this.fieldId = fieldId;
		this.cssId = cssId;
		
		if (cssRule){
			this.cssRule = cssRule;
		}
		
		var editable = this;
		
		this.observeMethod = function(event){ 
			if ((event.memo.fieldId==fieldId)||(event.memo.cssId==cssId)){ 
				if (editableCSSManager.editable(cssId)){
					editable.saveCss();
				}
			} 
		};
		
		//if (editableCSSManager.editable(this.cssId)){
			document.observe('ws:css_changed',this.observeMethod);
			document.observe('ws:zIndex_changed',this.observeMethod);			
		//}
		
		
		this.displayChanged = false;
	},
	
	finish: function(){
		if (editableCSSManager.editable(this.cssId)){
			document.stopObserving('ws:css_changed',this.observeMethod);
		}
	},
	
	setUndoManager: function(undoManager){
		this.undoManager = undoManager;
	},
	
	getUndoManager: function(){
		return this.undoManager;
	},
	
	loadCss: function(){
		parameters = { fieldId: this.fieldId,cssId: this.cssId };
		parameters.command = 'loadCss';
		parameters.style = system.getCurrentStyle();
		
		var fieldId = this.fieldId;
		var cssId = this.cssId;
		var obj = this;
		
		new Ajax.Request(system.getLibraryPath() + this.actionFile,{
			method:'post',
			parameters:parameters,
			onSuccess: function(transport) {
				pb.core.console.log('css loaded. Changing field style');
				$(fieldId).setAttribute('style',transport.responseText);
				document.fire('ws:css_changed',{ sender: obj,cssId: cssId,fieldId: fieldId });
			}
		});
	},
	
	resetCss: function() {
		// pb.core.console.log('reset css');
		parameters = { fieldId: this.fieldId,cssId: this.cssId };
		parameters.command = 'resetCss';
		parameters.style = system.getCurrentStyle();
		
		var fieldId = this.fieldId;
		var cssId = this.cssId;
		var obj = this;
		
		new Ajax.Request(system.getLibraryPath() + this.actionFile,{
			method:'post',
			parameters:parameters,
			onSuccess: function(transport) {
				if (transport.responseText=='OK'){
					pb.core.console.log('clearing style');
					$(fieldId).setAttribute('style','');
					document.fire('ws:css_changed',{ sender: obj,cssId: cssId,fieldId: fieldId });	
					document.fire('ws:css_reseted',{ sender: obj,cssId: cssId,fieldId: fieldId });
				}
			}
		});
	},
	
	
	saveCss: function(){
		this.performSaveCss();
		// if (editableCSSManager.editable(this.cssId)) {
		// 	pb.core.submissionManager.run('save_css_' + this.cssId, 'if (editableCSSManager.editable(' + this.cssId + ')) editableCSSManager.editable(' + this.cssId + ').performSaveCss();',300);
		// }
		// else this.performSaveCss();
	},
	
	performSaveCss: function(){

		var field = $(this.fieldId);
		if (field) field.fire('ws:before_css_serialize',{ editable: this,cssId: this.cssId });
		
		// pb.core.console.log('serialize ' + this.fieldId);
		parameters = this.serialize();
		
		if (field) field.fire('ws:after_css_serialize',{ editable: this,cssId: this.cssId });
		
		parameters.id = this.cssId;
		parameters.command = 'saveCss';
		parameters.style = system.getCurrentStyle();
		
		var obj = this;
		
		var task = new pb_core_AjaxTask('saveCss' + this.cssId);
		task.run(system.getLibraryPath() + this.actionFile,parameters,function(transport) {
			if (transport.responseText!='OK'){
				// TODO Mostrar error
				errorManager.setError('Error: the style couldn\'t be saved. Please try again or contact with your web provider.');
			}
			else {
				if (obj.displayChanged) {
					document.fire('ws:css_display_changed',{ sender: obj,cssId: obj.cssId,fieldId: obj.fieldId });
					obj.displayChanged = false;
				}
			}});
		
		// new Ajax.Request(system.getLibraryPath() + this.actionFile,{
		// 		method:'post',
		// 		parameters:parameters,
		// 		onSuccess: function(transport) {
		// 			if (transport.responseText!='OK'){
		// 				// TODO Mostrar error
		// 				errorManager.setError('Error: the style couldn\'t be saved. Please try again or contact with your web provider.');
		// 			}
		// 			else {
		// 				if (obj.displayChanged) {
		// 					document.fire('ws:css_display_changed',{ sender: obj,cssId: obj.cssId,fieldId: obj.fieldId });
		// 					obj.displayChanged = false;
		// 				}
		// 			}
		// 		}
		// 	});		
	},
	
	appendPixels: function(value){
	
		var result = String(value).trim();
		if (parseInt(result)==result) {
			result = result + 'px';
		}
		return result;
	},
	
	adjustToContent: function(){
		if (this.undoManager){
			var oldWidth = $(this.fieldId).offsetWidth;
			var oldHeight = $(this.fieldId).offsetHeight;
			var callback = this.performAdjustToContent.bind(this);
			var obj = this;
			var undoCallback = this.performSetSize.bind(obj,oldWidth,oldHeight);
			this.undoManager.pushCommand(new CallbackCommand('size',callback,undoCallback));
		}
		else {
			this.performAdjustToContent();
		}
	},
	
	performAdjustToContent: function(){

		$(this.fieldId).style.width = '';
		$(this.fieldId).style.height = '';
		
		if (($(this.fieldId).style.position=='absolute') || ($(this.fieldId).style.position=='relative')) {
			var field = $(this.fieldId);
			setTimeout(function (){ 
				if (field.offsetWidth>0) field.style.width = field.offsetWidth; 
				if (field.offsetHeight>0) field.style.height = field.offsetHeight;
				},10);
			// $(this.fieldId).style.width = $(this.fieldId).offsetWidth + 'px';
			// 			$(this.fieldId).style.height = $(this.fieldId).offsetHeight + 'px';
		}
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	adjustToImage: function(){
		if (this.undoManager){
			var oldWidth = $(this.fieldId).offsetWidth;
			var oldHeight = $(this.fieldId).offsetHeight;
			var callback = this.performAdjustToImage.bind(this);
			var obj = this;
			var undoCallback = this.performSetSize.bind(obj,oldWidth,oldHeight);
			this.undoManager.pushCommand(new CallbackCommand('size',callback,undoCallback));
		}
		else {
			this.performAdjustToImage();
		}
	},
	
	performAdjustToImage: function(){
		if (!$(this.fieldId).style.backgroundImage){
			$(this.fieldId).style.width = '';
			$(this.fieldId).style.height = '';
			document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
		}
		else {
			var image = new Image();
			var imageUrl = $(this.fieldId).style.backgroundImage;
			image.src = imageUrl.substring(4,imageUrl.length-1);
			cssId = this.cssId;
			fieldId = this.fieldId;

			if (image.width==0){
				$(this.fieldId).style.width = '';
			}
			else {
				
				var paddingLeft = parseInt($(this.fieldId).style.paddingLeft);
				var paddingRight = parseInt($(this.fieldId).style.paddingRight);
				if (isNaN(paddingLeft)){
					paddingLeft = 0;
				}

				if (isNaN(paddingRight)){
					paddingRight = 0;
				}
				
				$(this.fieldId).style.width = (image.width - paddingLeft - paddingRight) + 'px';				
			}

			if (image.height==0){
				$(this.fieldId).style.height = '';
			}
			else {
				var paddingTop = parseInt($(this.fieldId).style.paddingTop);
				var paddingBottom = parseInt($(this.fieldId).style.paddingBottom);
				
				if (isNaN(paddingTop)){
					paddingTop = 0;
				}
				
				if (isNaN(paddingBottom)) {
					paddingBottom = 0;
				}

				$(this.fieldId).style.height = (image.height - paddingTop -paddingBottom) + 'px';
			}
			
			document.fire('ws:css_changed',{ sender: this,cssId: cssId,fieldId: fieldId });
		}			
	},
	
	setColor : function(value){
		if (this.undoManager){
			var oldColor = $(this.fieldId).style.color;
			var callback = this.performSetColor.bind(this,value);
			var undoCallback = this.performSetColor.bind(this,oldColor);
			
			var obj = this;
			var fun = function () { obj.undoManager.appendCommand(new CallbackCommand('color',callback,undoCallback)) };
			
			pb.core.submissionManager.run('append_set_color' + this.cssId,fun,200);
		}

		this.performSetColor(value);

	},
	
	performSetColor: function(value) {
		value = pb.core.cssUtils.fixColorValue(value);
		$(this.fieldId).style.color = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,color: value });
	},
	
	getColor: function(){
		return EditableCSS.RGBConvert($(this.fieldId).style.color);
	},
	
	setFontFamily : function(value){
		if (this.undoManager){
			var oldFontFamily = $(this.fieldId).style.fontFamily;
			var callback = this.performSetFontFamily.bind(this,value);
			var undoCallback = this.performSetFontFamily.bind(this,oldFontFamily);
			this.undoManager.pushCommand(new CallbackCommand('fontfamily',callback,undoCallback));
		}
		else {
			this.performSetFontFamily(value);
		}
	},
	
	performSetFontFamily : function(value){
		$(this.fieldId).style.fontFamily = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,fontFamily: value });
		document.fire('ws:css_size_may_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	setTextIndent : function(value){
		if (this.undoManager){
			var oldTextIndent = $(this.fieldId).style.textIndent;
			var callback = this.performSetTextIndent.bind(this,value);
			var undoCallback = this.performSetTextIndent.bind(this,oldTextIndent);
			this.undoManager.pushCommand(new CallbackCommand('textindent',callback,undoCallback));
		}
		else {
			this.performSetTextIndent(value);
		}
	},

	performSetTextIndent : function(value){
		// if (value!=0) {
		// 	if (this.getTextAlign()==2) {
		// 		value = '10000px'; // Si está alineado a la derecha para ocultar el texto hay que hacerlo así en vez de ser negativo -> NO! sale el scroll horizontal
		// 	}
		// }

		$(this.fieldId).style.textIndent = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId, textIndent: value });
	},
	
	getFontFamily: function(){
		return 	$(this.fieldId).style.fontFamily;
	},
	
	getTextIndent: function() {
		return $(this.fieldId).style.textIndent;
	},
	
	setFontSize : function(value){
		if (this.undoManager){
			var oldFontSize = $(this.fieldId).style.fontSize;
			var callback = this.performSetFontSize.bind(this,value);
			var undoCallback = this.performSetFontSize.bind(this,oldFontSize);
			this.undoManager.pushCommand(new CallbackCommand('fontsize',callback,undoCallback));
		}
		else {
			this.performSetFontSize(value);
		}
	},
	
	performSetFontSize : function(value){
		value = this.appendPixels(value);
		$(this.fieldId).style.fontSize = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,fontSize: value });
		document.fire('ws:css_size_may_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,fontSize: value });
	},
	
	getFontSize: function(){
		return 	$(this.fieldId).style.fontSize;
	},
	
	
	setTextAlign : function(value){
		if (this.undoManager){
			var oldTextAlign = $(this.fieldId).style.textAlign;
			var callback = this.performSetTextAlign.bind(this,value);
			var undoCallback = this.performSetTextAlign.bind(this,oldTextAlign);
			this.undoManager.pushCommand(new CallbackCommand('textalign',callback,undoCallback));
		}
		else {
			this.performSetTextAlign(value);
		}
	},
	
	performSetTextAlign : function(value){
		
		if (value=='0' || parseInt(value)){
			if (value=='0'){
				value = 'left';
			}
			else if (value=='1'){
				value = 'center';				
			}
			else if (value=='2'){
				value = 'right';
			}
			else {
				value = 'justify';
			}
		}
		
		$(this.fieldId).style.textAlign = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,textAlign: value });
	},
	
	getTextAlign: function(){
		var value = $(this.fieldId).style.color;
		if (value=='left'){
			return 0;
		}
		else if (value=='center'){
			return 1;
		}
		
		return 2;
	},
	
	
	setTextDecoration : function(value){
		if (this.undoManager){
			var oldTextDecoration = $(this.fieldId).style.textDecoration;
			var callback = this.performSetTextDecoration.bind(this,value);
			var undoCallback = this.performSetTextDecoration.bind(this,oldTextDecoration);
			this.undoManager.pushCommand(new CallbackCommand('textdecoration',callback,undoCallback));
		}
		else {
			this.performSetTextDecoration(value);
		}
	},	
	
	performSetTextDecoration : function(value){
		$(this.fieldId).style.textDecoration = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,textDecoration: value });
	},
	
	getTextDecoration: function(){
		return 	$(this.fieldId).style.textDecoration;
	},
	
	setLineHeight : function(value){
		if (this.undoManager){
			var oldLineHeight = $(this.fieldId).style.lineHeight;
			var callback = this.performSetLineHeight.bind(this,value);
			var undoCallback = this.performSetLineHeight.bind(this,oldLineHeight);
			this.undoManager.pushCommand(new CallbackCommand('lineheight',callback,undoCallback));
		}
		else {
			this.performSetLineHeight(value);
		}
	},
	
	performSetLineHeight : function(value){
		$(this.fieldId).style.lineHeight = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,lineHeight: value });
	},
	
	getLineHeight: function(){
		return 	$(this.fieldId).style.lineHeight;
	},

	setLetterSpacing : function(value){
		if (this.undoManager){
			var oldLetterSpacing = $(this.fieldId).style.letterSpacing;
			var callback = this.performSetLetterSpacing.bind(this,value);
			var undoCallback = this.performSetLetterSpacing.bind(this,oldLetterSpacing);
			this.undoManager.pushCommand(new CallbackCommand('letterSpacing',callback,undoCallback));
		}
		else {
			this.performSetLetterSpacing(value);
		}
	},
	
	performSetLetterSpacing : function(value){
		$(this.fieldId).style.letterSpacing = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,letterSpacing: value });
	},
	
	getLetterSpacing: function(){
		return 	$(this.fieldId).style.letterSpacing;
	},

	
	setFontVariant : function(value){
		if (this.undoManager){
			var oldFontVariant = $(this.fieldId).style.fontVariant;
			var callback = this.performSetFontVariant.bind(this,value);
			var undoCallback = this.performSetFontVariant.bind(this,oldFontVariant);
			this.undoManager.pushCommand(new CallbackCommand('fontvariant',callback,undoCallback));
		}
		else {
			this.performSetFontVariant(value);
		}
	},
	
	performSetFontVariant : function(value){
		$(this.fieldId).style.fontVariant = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,fontVariant: value });
	},
	
	getFontVariant: function(){
		return 	$(this.fieldId).style.fontVariant;
	},
	
	setFontStyle : function(value){
		if (this.undoManager){
			var oldFontStyle = $(this.fieldId).style.fontStyle;
			var callback = this.performSetFontStyle.bind(this,value);
			var undoCallback = this.performSetFontStyle.bind(this,oldFontStyle);
			this.undoManager.pushCommand(new CallbackCommand('fontstyle',callback,undoCallback));
		}
		else {
			this.performSetFontStyle(value);
		}
	},
	
	performSetFontStyle : function(value){
		$(this.fieldId).style.fontStyle = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,fontStyle: value });
		document.fire('ws:css_size_may_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	getFontStyle: function(){
		return 	$(this.fieldId).style.fontStyle;
	},
	
	setFontWeight : function(value){
		if (this.undoManager){
			var oldFontWeight = $(this.fieldId).style.fontWeight;
			var callback = this.performSetFontWeight.bind(this,value);
			var undoCallback = this.performSetFontWeight.bind(this,oldFontWeight);
			this.undoManager.pushCommand(new CallbackCommand('fontweight',callback,undoCallback));
		}
		else {
			this.performSetFontWeight(value);
		}
	},
	
	performSetFontWeight : function(value){
		$(this.fieldId).style.fontWeight = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,fontWeight: value });
		document.fire('ws:css_size_may_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	getFontWeight: function(){
		return $(this.fieldId).style.fontWeight;
	},
	
	setBackgroundColor : function(value){
		if (this.undoManager){
			var oldBackgroundColor = $(this.fieldId).style.backgroundColor;
			var callback = this.performSetBackgroundColor.bind(this,value);
			var undoCallback = this.performSetBackgroundColor.bind(this,oldBackgroundColor);
			
			var obj = this;
			var fun = function () { obj.undoManager.appendCommand(new CallbackCommand('backgroundColor',callback,undoCallback)) };
			
			pb.core.submissionManager.run('set_background_color' + this.cssId,fun,200);
		}

		this.performSetBackgroundColor(value);
	},
	
	performSetBackgroundColor : function(value) {
		value = pb.core.cssUtils.fixColorValue(value);
		$(this.fieldId).style.backgroundColor = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,backgroundColor: value });
	},
	
	getBackgroundColor: function(){
		return EditableCSS.RGBConvert($(this.fieldId).style.backgroundColor);
	},
	
	setBackgroundImage : function(value,imageId){
		if (value) value = 'url(' + value + ')';
		else value = '';
		if (this.undoManager){
			var oldBackgroundImage = $(this.fieldId).style.backgroundImage;
			var oldBackgroundImageId = $(this.fieldId).backgroundImageId;
			var callback = this.performSetBackgroundImage.bind(this,value,imageId);
			var undoCallback = this.performSetBackgroundImage.bind(this,oldBackgroundImage,oldBackgroundImageId);
			this.undoManager.pushCommand(new CallbackCommand('backgroundimage',callback,undoCallback));
		}
		else {
			this.performSetBackgroundImage(value,imageId);
		}
	},

	performSetBackgroundImage : function(value,imageId){
		$(this.fieldId).style.backgroundImage = value;
		$(this.fieldId).backgroundImageId = imageId;
		this.performSetBackgroundPositionX(0);
		this.performSetBackgroundPositionY(0);
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,backgroundImage: value,backgroundImageId: imageId });
	},
	
	getBackgroundImage: function(){
		return 	$(this.fieldId).style.backgroundImage;
	},
	
	getBackgroundImageId: function(){
		return 	$(this.fieldId).backgroundImageId;
	},
	
	/*setBackgroundImageId : function(value){
		if (this.undoManager){
			var oldBackgroundImageId = $(this.fieldId).style.backgroundImageId;
			var callback = this.performSetBackgroundImageId.bind(this,value);
			var undoCallback = this.performSetBackgroundImageId.bind(this,oldBackgroundImageId);
			this.undoManager.pushCommand(new CallbackCommand('backgroundimageid',callback,undoCallback));
		}
		else {
			this.performSetBackgroundImageId(value);
		}
	},

	performSetBackgroundImageId : function(value){
		$(this.fieldId).style.backgroundImageId = value;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,backgroundImageId: value });
	},*/
	
	setBackgroundAttachment : function(value){
		if (this.undoManager){
			var oldBackgroundAttachment = $(this.fieldId).style.backgroundAttachment;
			var callback = this.performSetBackgroundAttachment.bind(this,value);
			var undoCallback = this.performSetBackgroundAttachment.bind(this,oldBackgroundAttachment);
			this.undoManager.pushCommand(new CallbackCommand('backgroundattachment',callback,undoCallback));
		}
		else {
			this.performSetBackgroundAttachment(value);
		}
	},

	performSetBackgroundAttachment : function(value){
		$(this.fieldId).style.backgroundAttachment = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,backgroundAttachment: value });
	},
	
	getBackgroundAttachment: function(){
		return 	$(this.fieldId).style.backgroundAttachment;
	},
	
	setBackgroundPositionX: function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.backgroundPosition;
			var callback = this.performSetBackgroundPositionX.bind(this,value);
			var undoCallback = this.performSetBackgroundPosition.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('backgroundpositionx',callback,undoCallback));
		}
		else {
			this.performSetBackgroundPositionX(value);
		}
	},
	
	performSetBackgroundPosition : function(value){
		$(this.fieldId).style.backgroundPosition = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,backgroundPosition: value });
	},
	
	getBackgroundPosition: function(){
		var positions = $(this.fieldId).style.backgroundPosition.split(" ");
		if (positions[1] && this.getBackgroundAttachment()=='fixed') {
			positions[1] = pb.core.cssUtils.addCSSUnit(parseInt(positions[1]) - parseInt(this.backgroundYOffset));
			return positions[0] + ' ' + positions[1];
		}
		return $(this.fieldId).style.backgroundPosition;
	},
	
	performSetBackgroundPositionX : function(value){

		if (value=="") value='0pt';
		
		if (pb.core.cssUtils.getCSSUnit(value)=='' && value!='auto') value = value + 'px';

		if ($(this.fieldId).style.backgroundPosition==""){
			$(this.fieldId).style.backgroundPosition = value + " 0pt";
		}
		else {
			var positions = $(this.fieldId).style.backgroundPosition.split(" ");
			$(this.fieldId).style.backgroundPosition = value + ' ' + positions[1];
		}		

		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,backgroundPositionX: value });
	},
	
	getBackgroundPositionX: function(){
		var positions = $(this.fieldId).style.backgroundPosition.split(" ");
		return positions[0];
	},
	
	setBackgroundPositionY : function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.backgroundPosition;
			var callback = this.performSetBackgroundPositionY.bind(this,value);
			var undoCallback = this.performSetBackgroundPosition.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('backgroundpositiony',callback,undoCallback));
		}
		else {
			this.performSetBackgroundPositionY(value);
		}
	},
	
	performSetBackgroundPositionY : function(value) {
		
		if (this.getBackgroundAttachment()=='fixed') {
			value = pb.core.cssUtils.addCSSUnit(parseInt(value) + parseInt(this.backgroundYOffset));
		}
		
		if (value=="") value='0pt';
		if (pb.core.cssUtils.getCSSUnit(value)=='' && value!='auto') value = value + 'px';
		
		if ($(this.fieldId).style.backgroundPosition==""){
			$(this.fieldId).style.backgroundPosition = "0pt " + value;
		}
		else {
			var positions = $(this.fieldId).style.backgroundPosition.split(" ");
			$(this.fieldId).style.backgroundPosition = positions[0] + ' ' + value;
		}
		
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,backgroundPositionY: value });
	},
	
	getBackgroundPositionY: function() {
		var positions = $(this.fieldId).style.backgroundPosition.split(" ");
		if (positions[1]) {
			if (this.getBackgroundAttachment()=='fixed') return pb.core.cssUtils.addCSSUnit(parseInt(positions[1]) - parseInt(this.backgroundYOffset));
			else return positions[1];
		}
		return '';
	},

	setBackgroundRepeat : function(value){
		if (this.undoManager){
			var oldBackgroundRepeat = $(this.fieldId).style.backgroundRepeat;
			var callback = this.performSetBackgroundRepeat.bind(this,value);
			var undoCallback = this.performSetBackgroundRepeat.bind(this,oldBackgroundRepeat);
			this.undoManager.pushCommand(new CallbackCommand('backgroundrepeat',callback,undoCallback));
		}
		else {
			this.performSetBackgroundRepeat(value);
		}
	},

	performSetBackgroundRepeat : function(value){
		$(this.fieldId).style.backgroundRepeat = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,backgroundRepeat: value });
	},
	
	getBackgroundRepeat: function(){
		return 	$(this.fieldId).style.backgroundRepeat;
	},
	
	
	setPosition : function(value){
		if (this.undoManager){
			var oldPosition = $(this.fieldId).style.position;
			var callback = this.performSetPosition.bind(this,value);
			var undoCallback = this.performSetPosition.bind(this,oldPosition);
			this.undoManager.pushCommand(new CallbackCommand('position',callback,undoCallback));
		}
		else {
			this.performSetPosition(value);
		}
	},

	performSetPosition : function(value){
		var node = $(this.fieldId);

		var info = pb.core.itemInfoManager.get('css',this.fieldId);
		if (!info) {
			info = new Object();
			pb.core.itemInfoManager.add('css',info,this.fieldId);
		}
		
		info.position = value;
		
		if (value!='fixed') {
			node.setAttribute('anchorLeft','');
			node.setAttribute('anchorTop','');
		}
					
		if (value=='absolute') {
			
			$('mainWebsiteContainer').appendChild(node.remove());
			
			var parentOffset = node.parentNode.cumulativeOffset();
			var parentScrollOffset = node.parentNode.cumulativeScrollOffset();
			var offset = node.cumulativeOffset();
			var scrollOffset = node.cumulativeScrollOffset();
			
			var windowScrolls = pb.core.browserWindow.getScrolls();
			
			var top = -parentOffset[1]-parentScrollOffset[1]+offset[1]+scrollOffset[1]+windowScrolls[1];
			top += 'px';
			var left = -parentOffset[0]-parentScrollOffset[0]+offset[0]+scrollOffset[0]+windowScrolls[0];
			left += 'px';
			
			if (parseInt(left)<0) left = 0;
			if (parseInt(top)<0) top = 0;
			
			node.style.position = 'absolute';
			node.style.left = left;
			node.style.top = top;
		}	
		else if (value=='fixed') {
			
			$('mainWebsiteContainer').appendChild(node.remove());
			
			var offset = node.cumulativeOffset();
			var scrollOffset = node.cumulativeScrollOffset();
			
			var top = (offset[1] - scrollOffset[1]) + 'px';
			var left = (offset[0] - scrollOffset[0]) + 'px';
			
			if (parseInt(left)<0) left = 0;
			if (parseInt(top)<this.topFixedOffset) top = 0 + parseInt(this.topFixedOffset);
			
			node.style.left = left;
			node.style.top = top;
			node.style.position = 'fixed';
		}
		else if (value=='center') {
			$('externalRelativeContainer').appendChild(node.remove());
			var w = this.getWidth($('externalRelativeContainer'));
			var nodeW = this.getWidth(node);
			
			var left = ((w/2)-(nodeW/2)) + 'px';
			if (parseInt(left)<0) left = 0;
			if (parseInt(node.style.top)<0) node.style.top = 0;
			
			node.style.left = left;
			node.style.position = 'absolute';
		}
		else if (value=='pageContainer') {
			$('PageContainerAnchor').appendChild(node.remove());
			node.style.left = 0;
			node.style.top = 0;
			node.style.bottom = 'auto';
			node.style.right = 'auto';
			node.style.position = 'absolute';
		}
		else {
			node.style.position = value;	
			node.setAttribute('anchorLeft','');
			node.setAttribute('anchorTop','');
		}

		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,position: value });
		document.fire('ws:css_position_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,position: value });
	},
	
	getPosition: function(){
		var itemInfo = pb.core.itemInfoManager.get('css',this.fieldId);
		if (itemInfo) return itemInfo.position;
		else return pb.core.cssUtils.getPosition($(this.fieldId));
	},
	
	setAnchorLeft: function(value){
		if (this.undoManager){
			var oldAnchorLeft = $(this.fieldId).getAttribute('anchorLeft');
			var callback = this.performSetAnchorLeft.bind(this,value);
			var undoCallback = this.performSetAnchorLeft.bind(this,oldAnchorLeft);
			this.undoManager.pushCommand(new CallbackCommand('anchorLeft',callback,undoCallback));
		}
		else {
			this.performSetAnchorLeft(value);
		}
	},
	
	performSetAnchorLeft: function(value){
		var oldAnchor = $(this.fieldId).getAttribute('anchorLeft');
		
		if (oldAnchor='center'){
			$(this.fieldId).style.marginLeft = '';
		}
		
		$(this.fieldId).setAttribute('anchorLeft',value);
		//pb.core.console.log('anchor left ' + $(this.fieldId).getAttribute('anchorLeft'));
		if (value=='left'){
				var rightPos = parseInt($(this.fieldId).style.right);
				if ($(this.fieldId).style.right){
					var leftPos = pb.core.cssUtils.calculateLeftPosFromRight($(this.fieldId));
					//var leftPos = $(this.fieldId).offsetLeft + 'px';
					//pb.core.console.log('setAnchorLeft window_width' + pb.core.browserWindow.getWidth() + ' ' +  leftPos);
					$(this.fieldId).style.right = '';
					this.performSetLeft(leftPos);
				}
		}
		else if (value=='right'){
			// if ($(this.fieldId).style.position=='fixed'){
				var leftPos = $(this.fieldId).offsetLeft;
				if (leftPos){
					var rightPos = (pb.core.browserWindow.getWidth() - leftPos - $(this.fieldId).offsetWidth) + 'px';
					//pb.core.console.log('setAnchorRight winwidth ' + pb.core.browserWindow.getWidth() +' left ' + leftPos + ' width ' + $(this.fieldId).offsetWidth + ' right ' + rightPos);
					$(this.fieldId).style.left = '';
					this.performSetRight(rightPos);
				}					
			// }			
		}
		else if (value=='center'){
			$(this.fieldId).style.left = '50%';
			$(this.fieldId).style.right = '';
			$(this.fieldId).style.marginLeft = parseInt(-pb.core.cssUtils.getWidth($(this.fieldId))/2) + 'px';
		}
		else {
			if (!$(this.fieldId).style.left){
				$(this.fieldId).style.left = pb.core.cssUtils.calculateLeftPosFromRight($(this.fieldId));
			}
			$(this.fieldId).style.right = pb.core.cssUtils.calculateRightPosFromLeft($(this.fieldId));
			$(this.fieldId).style.width = '';
		}
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
		document.fire('ws:anchor_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	setAnchorTop: function(value){
		if (this.undoManager){
			var oldAnchorTop = $(this.fieldId).getAttribute('anchorTop');
			var callback = this.performSetAnchorTop.bind(this,value);
			var undoCallback = this.performSetAnchorTop.bind(this,oldAnchorTop);
			this.undoManager.pushCommand(new CallbackCommand('anchorTop',callback,undoCallback));
		}
		else {
			this.performSetAnchorTop(value);
		}
	},
	
	performSetAnchorTop: function(value){
		$(this.fieldId).setAttribute('anchorTop',value);
		//pb.core.console.log('anchor top ' + $(this.fieldId).getAttribute('anchorTop'));
		if (value=='top'){
			// if ($(this.fieldId).style.position=='fixed'){
				$(this.fieldId).style.height = $(this.fieldId).offsetHeight + 'px';
				var bottomPos = parseInt($(this.fieldId).style.bottom);
				if (bottomPos){
					var topPos = (pb.core.browserWindow.getHeight() - bottomPos - $(this.fieldId).offsetHeight) + 'px';
					//pb.core.console.log('setAnchorTop window_width' + pb.core.browserWindow.getHeight() + ' ' +  topPos);
					$(this.fieldId).style.bottom = '';
					
					this.performSetTop(topPos);
				}
			// }
		}
		else if (value=='bottom') {
			// if ($(this.fieldId).style.position=='fixed'){
				$(this.fieldId).style.height = $(this.fieldId).offsetHeight + 'px';
				var topPos = $(this.fieldId).offsetTop;
				if (topPos){
					var bottomPos = (pb.core.browserWindow.getHeight() - topPos - $(this.fieldId).offsetHeight) + 'px';
					//pb.core.console.log('setAnchorbottom pos ' + bottomPos);
					$(this.fieldId).style.top = '';
					this.performSetBottom(bottomPos);
				}					
			// }			
		}
		else if (value=='center'){
			$(this.fieldId).style.height = $(this.fieldId).offsetHeight + 'px';
			$(this.fieldId).style.top = '50%';
			$(this.fieldId).style.bottom = '';
			$(this.fieldId).style.marginTop = parseInt(-pb.core.cssUtils.getHeight($(this.fieldId))/2) + 'px';
		}
		else { // both
			if (!$(this.fieldId).style.top){
				$(this.fieldId).style.top = pb.core.cssUtils.calculateTopPosFromBottom($(this.fieldId));
			}
			$(this.fieldId).style.bottom = pb.core.cssUtils.calculateBottomPosFromTop($(this.fieldId));
			$(this.fieldId).style.height = '';
		}
		
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
		document.fire('ws:anchor_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	setAlignment : function(value){
		if (this.undoManager){
			
			var oldAlignment = this.getAlignment();
			
			var callback = this.performSetAlignment.bind(this,value);
			var undoCallback = this.performSetAlignment.bind(this,oldAlignment);
			this.undoManager.pushCommand(new CallbackCommand('alignment',callback,undoCallback));
		}
		else {
			this.performSetAlignment(value);
		}
		
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
		document.fire('ws:css_alignment_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	getAlignment: function() {
		var oldAlignment = '';
		if ($(this.fieldId).descendantOf('externalRelativeContainer')) {  // Hace falta para diseñar el menú. Se mete en un contenedor y ese es al que le cambiamos la alineación
			oldAlignment = 'center';
		}
		else {
			oldAlignment = 'free';
		}
		return oldAlignment;
	},
	
	performSetAlignment: function(value) {
		
		pb.core.cssUtils.setAlignment($(this.fieldId),value);

		// var oldAlignment = this.getAlignment();
		// if (oldAlignment===value) return;
		// 
		// if (value=='center') {
		// 	$('externalRelativeContainer').appendChild($(this.fieldId).remove());
		// 	
		// 	var w = pb.core.cssUtils.getWidth($('externalRelativeContainer'));
		// 	var nodeW = pb.core.cssUtils.getWidth($(this.fieldId));
		// 	
		// 	this.performSetLeft(((w/2)-(nodeW/2)) + 'px');
		// }
		// else {
		// 	$('mainWebsiteContainer').appendChild($(this.fieldId).remove());
		// }
	},
	
	toggleDisplay: function(){
		if (this.undoManager){
			var callback = this.performToggleDisplay.bind(this);
			var obj = this;
			var undoCallback = this.performToggleDisplay.bind(obj);
			this.undoManager.pushCommand(new CallbackCommand('toggle',callback,undoCallback));
		}
		else {
			this.performToggleDisplay();
		}
	},
	
	performToggleDisplay: function(){

		if ($(this.fieldId).style.display=='none'){
			$(this.fieldId).style.display = 'block';
			this.performSetOpacity('1');
		}
		else {
			$(this.fieldId).style.display = 'none';
			this.performSetOpacity('0');
		}

		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
		this.displayChanged = true;
	},
	
	setDisplay : function(value){
		if (this.undoManager){
			var oldDisplay = $(this.fieldId).style.display;
			var callback = this.performSetDisplay.bind(this,value);
			var undoCallback = this.performSetDisplay.bind(this,oldDisplay);
			this.undoManager.pushCommand(new CallbackCommand('display',callback,undoCallback));
		}
		else {
			this.performSetDisplay(value);
		}
	},

	performSetDisplay : function(value){
		$(this.fieldId).style.display = value;
		if (value=='none') this.performSetOpacity(0);
		else this.performSetOpacity(1);
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,display: value });
		this.displayChanged = true;
	},
	
	getDisplay: function(){
		return 	$(this.fieldId).style.display;
	},
	
	setStyleFloat : function(value){
		if (this.undoManager){
			var oldStyleFloat = $(this.fieldId).style.styleFloat;
			var callback = this.performSetStyleFloat.bind(this,value);
			var undoCallback = this.performSetStyleFloat.bind(this,oldStyleFloat);
			this.undoManager.pushCommand(new CallbackCommand('stylefloat',callback,undoCallback));
		}
		else {
			this.performSetStyleFloat(value);
		}
	},

	performSetStyleFloat : function(value){
		$(this.fieldId).style.styleFloat = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,styleFloat: value });
	},
	
	getStyleFloat: function(){
		return 	$(this.fieldId).style.styleFloat;
	},
	
	setCssFloat : function(value){
		if (this.undoManager){
			var oldCssFloat = $(this.fieldId).style.cssFloat;
			var callback = this.performSetCssFloat.bind(this,value);
			var undoCallback = this.performSetCssFloat.bind(this,oldCssFloat);
			this.undoManager.pushCommand(new CallbackCommand('cssfloat',callback,undoCallback));
		}
		else {
			this.performSetCssFloat(value);
		}
	},

	performSetCssFloat : function(value){
		$(this.fieldId).style.cssFloat = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,cssFloat: value });
	},
	
	getCssFloat: function(){
		return 	$(this.fieldId).style.cssFloat;
	},
	
	setClear : function(value){
		if (this.undoManager){
			var oldClear = $(this.fieldId).style.clear;
			var callback = this.performSetClear.bind(this,value);
			var undoCallback = this.performSetClear.bind(this,oldClear);
			this.undoManager.pushCommand(new CallbackCommand('clear',callback,undoCallback));
		}
		else {
			this.performSetClear(value);
		}
	},

	performSetClear : function(value){
		$(this.fieldId).style.clear = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,clear: value });
	},
	
	getClear: function(){
		return 	$(this.fieldId).style.clear;
	},
	
	setLeft : function(value){
		if (this.undoManager){
			var oldLeft = $(this.fieldId).style.left;
			var callback = this.performSetLeft.bind(this,value);
			var undoCallback = this.performSetLeft.bind(this,oldLeft);
			
			this.undoManager.pushCommand(new CallbackCommand('left',callback,undoCallback));
		}
		else {
			this.performSetLeft(value);
		}
	},

	performSetLeft : function(value){
		$(this.fieldId).style.left = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,left: value });
	},
	
	getLeft: function(){
		return 	$(this.fieldId).style.left;
	},
	
	setRight : function(value){
		if (this.undoManager){
			var oldRight = $(this.fieldId).style.right;
			var callback = this.performSetRight.bind(this,value);
			var undoCallback = this.performSetRight.bind(this,oldRight);
			this.undoManager.pushCommand(new CallbackCommand('right',callback,undoCallback));
		}
		else {
			this.performSetRight(value);
		}
	},

	performSetRight : function(value){
		$(this.fieldId).style.right = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,right: value });
	},
	
	getRight: function(){
		return 	$(this.fieldId).style.right;
	},
	
	
	setTop : function(value){
		if (this.undoManager){
			var oldTop = $(this.fieldId).style.top;
			var callback = this.performSetTop.bind(this,value);
			var undoCallback = this.performSetTop.bind(this,oldTop);
			this.undoManager.pushCommand(new CallbackCommand('top',callback,undoCallback));
		}
		else {
			this.performSetTop(value);
		}
	},

	performSetTop : function(value) {
		
		if ($(this.fieldId).style.position=='fixed') {
			value = parseInt(value) + parseInt(this.topFixedOffset);
		}
		
		$(this.fieldId).style.top = pb.core.cssUtils.addCSSUnit(value);
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,top: value });
	},
	
	getTop: function(){
		if ($(this.fieldId).style.position=='fixed') {
			return ((parseInt($(this.fieldId).style.top) - parseInt(this.topFixedOffset)) + 'px');
		}
		return 	$(this.fieldId).style.top;
	},
	
	
	setBottom : function(value){
		if (this.undoManager){
			var oldBottom = $(this.fieldId).style.bottom;
			var callback = this.performSetBottom.bind(this,value);
			var undoCallback = this.performSetBottom.bind(this,oldBottom);
			this.undoManager.pushCommand(new CallbackCommand('bottom',callback,undoCallback));
		}
		else {
			this.performSetBottom(value);
		}
	},

	performSetBottom : function(value){
		$(this.fieldId).style.bottom = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,bottom: value });
	},
	
	getBottom: function(){
		return 	$(this.fieldId).style.bottom;
	},
	

	setMaxWidth : function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.maxWidth;
			var callback = this.performSetMaxWidth.bind(this,value);
			var undoCallback = this.performSetMaxWidth.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('maxWidth',callback,undoCallback));
		}
		else {
			this.performSetMaxWidth(value);
		}
	},


	performSetMaxWidth : function(value){
		$(this.fieldId).style.maxWidth = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,maxWidth: value });
	},
	
	getMaxWidth: function(){
		return 	$(this.fieldId).style.maxWidth;
	},
	
	setMaxHeight : function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.maxHeight;
			var callback = this.performSetMaxHeight.bind(this,value);
			var undoCallback = this.performSetMaxHeight.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('maxHeight',callback,undoCallback));
		}
		else {
			this.performSetMaxHeight(value);
		}
	},

	performSetMaxHeight : function(value){
		$(this.fieldId).style.maxHeight = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,maxHeight: value });
	},
	
	getMaxHeight: function(){
		return 	$(this.fieldId).style.maxHeight;
	},
	
	setMinWidth : function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.minWidth;
			var callback = this.performSetMinWidth.bind(this,value);
			var undoCallback = this.performSetMinWidth.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('minWidth',callback,undoCallback));
		}
		else {
			this.performSetMinWidth(value);
		}
	},

	performSetMinWidth : function(value){
		$(this.fieldId).style.minWidth = this.appendPixels(value);
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,minWidth: value });
	},
	
	getMinWidth: function(){
		return 	$(this.fieldId).style.minWidth;
	},
	
	setMinHeight : function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.minHeight;
			var callback = this.performSetMinHeight.bind(this,value);
			var undoCallback = this.performSetMinHeight.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('minHeight',callback,undoCallback));
		}
		else {
			this.performSetMinHeight(value);
		}
	},

	performSetMinHeight : function(value){
		$(this.fieldId).style.minHeight = this.appendPixels(value);
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,minHeight: value });
	},
	
	getMinHeight: function(){
		return 	$(this.fieldId).style.minHeight;
	},
	
	setOverflow : function(value){
		if (this.undoManager){
			var oldOverflow = $(this.fieldId).style.overflow;
			var callback = this.performSetOverflow.bind(this,value);
			var undoCallback = this.performSetOverflow.bind(this,oldOverflow);
			this.undoManager.pushCommand(new CallbackCommand('overflow',callback,undoCallback));
		}
		else {
			this.performSetOverflow(value);
		}
	},
	
	performSetOverflow : function(value){
		$(this.fieldId).style.overflow = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,overflow: value });
	},
	
	getOverflow: function(){
		return 	$(this.fieldId).style.overflow;
	},

	setCursor : function(value){
		if (this.undoManager){
			var oldCursor = $(this.fieldId).style.cursor;
			var callback = this.performSetCursor.bind(this,value);
			var undoCallback = this.performSetCursor.bind(this,oldCursor);
			this.undoManager.pushCommand(new CallbackCommand('cursor',callback,undoCallback));
		}
		else {
			this.performSetCursor(value);
		}
	},
	
	performSetCursor : function(value){
		//if (system.Browser.Firefox && value=='hand'){
		//	value = 'pointer';
		//}
		if (value=='hand') {
			$(this.fieldId).style.cursor = 'pointer'; // Primero pointer y luego hand, para que funcione en todos los navegadores
		}
		
		$(this.fieldId).style.cursor = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,cursor: value });
	},
	
	getCursor: function(){
		return 	$(this.fieldId).style.cursor;
	},	
	
	setZIndex : function(value){
		if (this.undoManager){
			var oldZIndex = $(this.fieldId).style.zIndex;
			var callback = this.performSetZIndex.bind(this,value);
			var undoCallback = this.performSetZIndex.bind(this,oldZIndex);
			this.undoManager.pushCommand(new CallbackCommand('zIndex',callback,undoCallback));
		}
		else {
			this.performSetZIndex(value);
		}
	},

	performSetZIndex : function(value){
		$(this.fieldId).style.zIndex = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,zIndex: value });
		document.fire('ws:zindex_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	getZIndex: function(){
		return 	$(this.fieldId).style.zIndex;
	},
	
	
	setVerticalAlign : function(value){
		if (this.undoManager){
			var oldVerticalAlign = $(this.fieldId).style.verticalAlign;
			var callback = this.performSetVerticalAlign.bind(this,value);
			var undoCallback = this.performSetVerticalAlign.bind(this,oldVerticalAlign);
			this.undoManager.pushCommand(new CallbackCommand('verticalalign',callback,undoCallback));
		}
		else {
			this.performSetVerticalAlign(value);
		}
	},
	

	performSetVerticalAlign : function(value){
		$(this.fieldId).style.verticalAlign = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,verticalAlign: value });
	},
	
	getVerticalAlign: function(){
		return 	$(this.fieldId).style.verticalAlign;
	},
	
	setWidth : function(value){
		if (this.undoManager){
			var oldWidth = $(this.fieldId).style.width;
			var callback = this.performSetWidth.bind(this,value);
			var undoCallback = this.performSetWidth.bind(this,oldWidth);
			this.undoManager.pushCommand(new CallbackCommand('width',callback,undoCallback));
		}
		else {
			this.performSetWidth(value);
		}
	},

	performSetWidth : function(value){

		var originalValue = value;
		
		var unit = pb.core.cssUtils.getCSSUnit(value);

		if (unit=='px' || unit=='') {
			if (parseInt(value)<0) value = 0;

			var field = $(this.fieldId);
			var paddingLeft = parseInt(field.style.paddingLeft);
			var paddingRight = parseInt(field.style.paddingRight);

			if (isNaN(paddingLeft)){
				paddingLeft = 0;
			}

			if (isNaN(paddingRight)){
				paddingRight = 0;
			}

			value = parseInt(value) - paddingLeft - paddingRight;

			if (value<0) value = 0;

			value = this.appendPixels(value);			
		}
		
		if (!originalValue || (originalValue=="")){
			value = "";
			$(this.fieldId).style.width = 'auto';
		}
		else {
			$(this.fieldId).style.width = value;
		}
		
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,width: value });
	},
	
	getWidth: function(){
		
		var field = $(this.fieldId);
		
		if (field.style.width==='') return '';
		
		return (parseInt(field.style.width)||0)+(parseInt(field.style.paddingRight)||0)+(parseInt(field.style.paddingLeft)||0);
		//return pb.core.cssUtils.getWidth($(this.fieldId));//(parseInt($(this.fieldId).style.width)||'');
	},

	setHeight : function(value){
		if (this.undoManager){
			var oldHeight = $(this.fieldId).offsetHeight;
			var callback = this.performSetHeight.bind(this,value);
			var undoCallback = this.performSetHeight.bind(this,oldHeight);
			this.undoManager.pushCommand(new CallbackCommand('height',callback,undoCallback));
		}
		else {
			this.performSetHeight(value);
		}
	},
	
	performSetHeight : function(value){
		var originalValue = value;

		if (parseInt(value)<0) value = 0;
		
		var field = $(this.fieldId);
		var paddingTop = parseInt(field.style.paddingTop);
		var paddingBottom = parseInt(field.style.paddingBottom);
				
		if (isNaN(paddingTop)){
			paddingTop = 0;
		}

		if (isNaN(paddingBottom)){
			paddingBottom = 0;
		}
		
		value = parseInt(value) - paddingTop - paddingBottom;
		
		if (value<0) value = 0;
		
		value = this.appendPixels(value);
		if (!originalValue || (originalValue=="")){
			value = "";
			$(this.fieldId).style.height = '';
		}
		else {
			$(this.fieldId).style.height = value;
		}
		
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,height: value });
	},
	
	performSetSize: function(width,height){
		this.performSetWidth(width);
		this.performSetHeight(height);
	},
	
	getHeight: function(){
		
		var field = $(this.fieldId);

		if (field.style.height==='') return '';
		
		return (parseInt(field.style.height)||0)+(parseInt(field.style.paddingTop)||0)+(parseInt(field.style.paddingBottom)||0);
		//return pb.core.cssUtils.getHeight($(this.fieldId));//(parseInt($(this.fieldId).style.width)||'');
		//return 	(parseInt($(this.fieldId).style.height)||'');
	},
	
	setMarginLeft : function(value){
		if (this.undoManager){
			var oldMarginLeft = $(this.fieldId).style.marginLeft;
			var callback = this.performSetMarginLeft.bind(this,value);
			var undoCallback = this.performSetMarginLeft.bind(this,oldMarginLeft);
			this.undoManager.pushCommand(new CallbackCommand('marginleft',callback,undoCallback));
		}
		else {
			this.performSetMarginLeft(value);
		}
	},

	performSetMarginLeft : function(value){
		$(this.fieldId).style.marginLeft = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,marginLeft: value });
	},
	
	getMarginLeft: function(){
		return 	$(this.fieldId).style.marginLeft;
	},
	
	setMarginRight : function(value){
		if (this.undoManager){
			var oldMarginRight = $(this.fieldId).style.marginRight;
			var callback = this.performSetMarginRight.bind(this,value);
			var undoCallback = this.performSetMarginRight.bind(this,oldMarginRight);
			this.undoManager.pushCommand(new CallbackCommand('marginright',callback,undoCallback));
		}
		else {
			this.performSetMarginRight(value);
		}
	},

	performSetMarginRight : function(value){
		$(this.fieldId).style.marginRight = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,marginRight: value });
	},
	
	getMarginRight: function(){
		return 	$(this.fieldId).style.marginRight;
	},
	
	setMarginTop : function(value){
		if (this.undoManager){
			var oldMarginTop = $(this.fieldId).style.marginTop;
			var callback = this.performSetMarginTop.bind(this,value);
			var undoCallback = this.performSetMarginTop.bind(this,oldMarginTop);
			this.undoManager.pushCommand(new CallbackCommand('margintop',callback,undoCallback));
		}
		else {
			this.performSetMarginTop(value);
		}
	},

	performSetMarginTop : function(value){
		$(this.fieldId).style.marginTop = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,marginTop: value });
	},
	
	getMarginTop: function(){
		return 	$(this.fieldId).style.marginTop;
	},
	
	setMarginBottom : function(value){
		if (this.undoManager){
			var oldMarginBottom = $(this.fieldId).style.marginBottom;
			var callback = this.performSetMarginBottom.bind(this,value);
			var undoCallback = this.performSetMarginBottom.bind(this,oldMarginBottom);
			this.undoManager.pushCommand(new CallbackCommand('marginbottom',callback,undoCallback));
		}
		else {
			this.performSetMarginBottom(value);
		}
	},

	performSetMarginBottom : function(value){
		$(this.fieldId).style.marginBottom = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,marginBottom: value });
	},
	
	getMarginBottom: function(){
		return 	$(this.fieldId).style.marginBottom;
	},
	
	setPaddingLeft : function(value){
		if (this.undoManager){
			var oldLeft = $(this.fieldId).style.paddingLeft;
			var oldWidth = $(this.fieldId).style.width;
			var callback = this.performSetPaddingLeft.bind(this,value);
			var field = $(this.fieldId);
			var cssId = this.cssId;
			var fieldId = this.fieldId;
			var undoCallback = function () { field.style.paddingLeft = oldLeft;field.style.width = oldWidth; document.fire('ws:css_changed',{ sender: this,cssId: cssId,fieldId: fieldId }); };
			this.undoManager.pushCommand(new CallbackCommand('paddingLeft',callback,undoCallback));
		}
		else {
			this.performSetPaddingLeft(value);
		}
	},

	performSetPaddingLeft : function(value){
		var field = $(this.fieldId);
		var originalValue = value;
		value = parseInt(value);
		if (isNaN(value)){
			value = 0;
		}
		
		//if (field.style.width){
			var totalWidth = this.getWidth();
			
			var paddingLeft = parseInt(field.style.paddingLeft);
			var paddingRight = parseInt(field.style.paddingRight);

			if (isNaN(totalWidth)){
				totalWidth = 0;
			}

			if (isNaN(paddingLeft)){
				paddingLeft = 0;
			}

			if (isNaN(paddingRight)){
				paddingRight = 0;
			}

			if (totalWidth!==''){
				var newWidth = totalWidth - value - paddingRight;
				if (newWidth) {
					field.style.width = newWidth + 'px';
				}				
			}
		
		if (originalValue=='')	field.style.paddingLeft = '';
		else field.style.paddingLeft = parseInt(value) + 'px';

		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,paddingLeft: value });
	},
	
	getPaddingLeft: function(){
		return 	$(this.fieldId).style.paddingLeft;
	},

	setPaddingRight : function(value){
		if (this.undoManager){
			var oldRight = $(this.fieldId).style.paddingRight;
			var oldWidth = $(this.fieldId).style.width;
			var callback = this.performSetPaddingRight.bind(this,value);
			var field = $(this.fieldId);
			var cssId = this.cssId;
			var fieldId = this.fieldId;
			var undoCallback = function () { field.style.paddingRight = oldRight;field.style.width = oldWidth; document.fire('ws:css_changed',{ sender: this,cssId: cssId,fieldId: fieldId }); };
			this.undoManager.pushCommand(new CallbackCommand('paddingRight',callback,undoCallback));
		}
		else {
			this.performSetPaddingRight(value);
		}
	},

	performSetPaddingRight : function(value){
		var field = $(this.fieldId);
		var originalValue = value;
		value = parseInt(value);
		if (isNaN(value)){
			value = 0;
		}
		
		//if (field.style.width){
			var totalWidth = this.getWidth();
			var paddingLeft = parseInt(field.style.paddingLeft);
			var paddingRight = parseInt(field.style.paddingRight);

			if (isNaN(totalWidth)){
				totalWidth = 0;
			}

			if (isNaN(paddingLeft)){
				paddingLeft = 0;
			}

			if (isNaN(paddingRight)){
				paddingRight = 0;
			}

			if (totalWidth!==''){
				var newWidth = totalWidth - value - paddingLeft;
				if (newWidth) {
					field.style.width = newWidth + 'px';
				}			
			}
		
		if (originalValue=='')	field.style.paddingRight = '';
		else field.style.paddingRight = parseInt(value) + 'px';

		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,paddingRight: value });
	},
	
	getPaddingRight: function(){
		return 	$(this.fieldId).style.paddingRight;
	},
	
	setPaddingTop : function(value){
		if (this.undoManager){
			var oldTop = $(this.fieldId).style.paddingTop;
			var oldHeight = $(this.fieldId).style.height;
			var callback = this.performSetPaddingTop.bind(this,value);
			var field = $(this.fieldId);
			var cssId = this.cssId;
			var fieldId = this.fieldId;
			var undoCallback = function () { field.style.paddingTop = oldTop;field.style.height = oldHeight; document.fire('ws:css_changed',{ sender: this,cssId: cssId,fieldId: fieldId }); };
			this.undoManager.pushCommand(new CallbackCommand('paddingTop',callback,undoCallback));
		}
		else {
			this.performSetPaddingTop(value);
		}
	},

	performSetPaddingTop : function(value){
		var field = $(this.fieldId);
		var originalValue = value;
		value = parseInt(value);
		if (isNaN(value)){
			value = 0;
		}
		
		//if (field.style.width){
			var totalHeight = this.getHeight();
			var paddingTop = parseInt(field.style.paddingTop);
			var paddingBottom = parseInt(field.style.paddingBottom);

			if (isNaN(totalHeight)){
				totalHeight = 0;
			}

			if (isNaN(paddingTop)){
				paddingTop = 0;
			}

			if (isNaN(paddingBottom)){
				paddingBottom = 0;
			}

			if (totalHeight!==''){
				var newHeight = totalHeight - value - paddingBottom;
				if (newHeight) {
					field.style.height = newHeight + 'px';
				}			
			}
		
		if (originalValue=='')	field.style.paddingTop = '';
		else field.style.paddingTop = parseInt(value) + 'px';

		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,paddingTop: value });
	},
	
	getPaddingTop: function(){
		return 	$(this.fieldId).style.paddingTop;
	},

	setPaddingBottom : function(value){
		if (this.undoManager){
			var oldBottom = $(this.fieldId).style.paddingBottom;
			var oldHeight = $(this.fieldId).style.height;
			var callback = this.performSetPaddingBottom.bind(this,value);
			var field = $(this.fieldId);
			var cssId = this.cssId;
			var fieldId = this.fieldId;
			var undoCallback = function () { field.style.paddingBottom = oldBottom;field.style.height = oldHeight; document.fire('ws:css_changed',{ sender: this,cssId: cssId,fieldId: fieldId }); };
			this.undoManager.pushCommand(new CallbackCommand('paddingBottom',callback,undoCallback));
		}
		else {
			this.performSetPaddingBottom(value);
		}
	},

	performSetPaddingBottom : function(value){
		var field = $(this.fieldId);
		var originalValue = value;
		value = parseInt(value);
		if (isNaN(value)){
			value = 0;
		}
		
		//if (field.style.width){
			var totalHeight = this.getHeight();
			var paddingTop = parseInt(field.style.paddingTop);
			var paddingBottom = parseInt(field.style.paddingBottom);

			if (isNaN(totalHeight)){
				totalHeight = 0;
			}

			if (isNaN(paddingTop)){
				paddingTop = 0;
			}

			if (isNaN(paddingBottom)){
				paddingBottom = 0;
			}

			if (totalHeight!==''){
				var newHeight = totalHeight - value - paddingTop;
				if (newHeight) {
					field.style.height = newHeight + 'px';
				}			
			}
		
		if (originalValue=='')	field.style.paddingBottom = '';
		else field.style.paddingBottom = parseInt(value) + 'px';
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,paddingBottom: value });
	},
	
	getPaddingBottom: function(){
		return 	$(this.fieldId).style.paddingBottom;
	},
	
	setBordersEqual: function(value) {
		this.bordersEqual = value;
		
	},
	
	setBorderColor: function(value) {
		if (this.undoManager){
			var left = EditableCSS.RGBConvert($(this.fieldId).style.borderLeftColor);
			var right = EditableCSS.RGBConvert($(this.fieldId).style.borderRightColor);
			var top = EditableCSS.RGBConvert($(this.fieldId).style.borderTopColor);
			var bottom = EditableCSS.RGBConvert($(this.fieldId).style.borderBottomColor);
			var callback = this.performSetBorderColor.bind(this,value);
			var undoCallback = function () { 
				this.performSetBorderLeftColor.bind(this,left);
				this.performSetBorderRightColor.bind(this,right);
				this.performSetBorderTopColor.bind(this,top);
				this.performSetBorderBottomColor.bind(this,bottom); }
			this.undoManager.pushCommand(new CallbackCommand('bordercolor',callback,undoCallback));
		}
		else {
			this.performSetBorderColor(value);
		}
	},
	
	performSetBorderColor: function(value) {
		this.performSetBorderLeftColor(value);
		this.performSetBorderRightColor(value);
		this.performSetBorderTopColor(value);
		this.performSetBorderBottomColor(value);
	},
	
	setBorderStyle: function(value) {
		if (this.undoManager){
			var left = $(this.fieldId).style.borderLeftStyle;
			var right = $(this.fieldId).style.borderRightStyle;
			var top = $(this.fieldId).style.borderTopStyle;
			var bottom = $(this.fieldId).style.borderBottomStyle;
			var callback = this.performSetBorderStyle.bind(this,value);
			var undoCallback = function () { 
				this.performSetBorderLeftStyle.bind(this,left);
				this.performSetBorderRightStyle.bind(this,right);
				this.performSetBorderTopStyle.bind(this,top);
				this.performSetBorderBottomStyle.bind(this,bottom);
			}
			this.undoManager.pushCommand(new CallbackCommand('borderleftstyle',callback,undoCallback));
		}
		else {
			this.performSetBorderStyle(value);
		}
	},
	
	performSetBorderStyle: function(value) {
		this.performSetBorderLeftStyle(value);
		this.performSetBorderRightStyle(value);
		this.performSetBorderTopStyle(value);
		this.performSetBorderBottomStyle(value);
	},
	
	setBorderLeftWidth : function(value){
		value = pb.core.cssUtils.addPx(value);
		if (this.undoManager){
			var left = $(this.fieldId).style.borderLeftWidth;
			var right = $(this.fieldId).style.borderRightWidth;
			var top = $(this.fieldId).style.borderTopWidth;
			var bottom = $(this.fieldId).style.borderBottomWidth;
			var callback = this.performSetBorderWidth.bind(this,value);
			var undoCallback = function () { 
				this.performSetBorderLeftWidth.bind(this,left);
				this.performSetBorderRightWidth.bind(this,right);
				this.performSetBorderTopWidth.bind(this,top);
				this.performSetBorderBottomWidth.bind(this,bottom);
			}
			this.undoManager.pushCommand(new CallbackCommand('borderwidth',callback,undoCallback));
		}
		else {
			this.performSetBorderWidth(value);
		}
	},

	performSetBorderWidth : function(value){
		this.performSetBorderLeftWidth(value);
		this.performSetBorderRightWidth(value);
		this.performSetBorderTopWidth(value);
		this.performSetBorderBottomWidth(value);
	},
		
	setBorderLeftColor : function(value){
		if (this.undoManager){
			var oldValue = EditableCSS.RGBConvert($(this.fieldId).style.borderLeftColor);
			var callback = this.performSetBorderLeftColor.bind(this,value);
			var undoCallback = this.performSetBorderLeftColor.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('borderleftcolor',callback,undoCallback));
		}
		else {
			this.performSetBorderLeftColor(value);
		}
	},

	performSetBorderLeftColor : function(value){
		$(this.fieldId).style.borderLeftColor = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderLeftColor: value });
	},
	
	getBorderLeftColor: function(){
		return 	EditableCSS.RGBConvert($(this.fieldId).style.borderLeftColor);
	},
	
	setBorderLeftStyle : function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.borderLeftStyle;
			var callback = this.performSetBorderLeftStyle.bind(this,value);
			var undoCallback = this.performSetBorderLeftStyle.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('borderleftstyle',callback,undoCallback));
		}
		else {
			this.performSetBorderLeftStyle(value);
		}
	},
	
	performSetBorderLeftStyle : function(value){
		$(this.fieldId).style.borderLeftStyle = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderLeftStyle: value });
	},
	
	getBorderLeftStyle: function(){
		return 	$(this.fieldId).style.borderLeftStyle;
	},
	
	setBorderLeftWidth : function(value){
		value = value + 'px';
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.borderLeftWidth;
			var callback = this.performSetBorderLeftWidth.bind(this,value);
			var undoCallback = this.performSetBorderLeftWidth.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('borderleftwidth',callback,undoCallback));
		}
		else {
			this.performSetBorderLeftWidth(value);
		}
	},

	performSetBorderLeftWidth : function(value){
		$(this.fieldId).style.borderLeftWidth = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderLeftWidth: value });
	},
	
	getBorderLeftWidth: function(){
		return 	parseInt($(this.fieldId).style.borderLeftWidth);
	},
	
	setBorderRightColor : function(value){
		if (this.undoManager){
			var oldValue = EditableCSS.RGBConvert($(this.fieldId).style.borderRightColor);
			var callback = this.performSetBorderRightColor.bind(this,value);
			var undoCallback = this.performSetBorderRightColor.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('borderrightcolor',callback,undoCallback));
		}
		else {
			this.performSetBorderRightColor(value);
		}
	},

	performSetBorderRightColor : function(value){
		$(this.fieldId).style.borderRightColor = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderRightColor: value });
	},
	
	getBorderRightColor: function(){
		return 	EditableCSS.RGBConvert($(this.fieldId).style.borderRightColor);
	},
	
	setBorderRightStyle : function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.borderRightStyle;
			var callback = this.performSetBorderRightStyle.bind(this,value);
			var undoCallback = this.performSetBorderRightStyle.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('borderrightstyle',callback,undoCallback));
		}
		else {
			this.performSetBorderRightStyle(value);
		}
	},

	performSetBorderRightStyle : function(value){
		$(this.fieldId).style.borderRightStyle = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderRightStyle: value });
	},
	
	getBorderRightStyle: function(){
		return 	$(this.fieldId).style.borderRightStyle;
	},

	setBorderRightWidth : function(value){
		value = value + 'px';
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.borderRightWidth;
			var callback = this.performSetBorderRightWidth.bind(this,value);
			var undoCallback = this.performSetBorderRightWidth.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('borderrightwidth',callback,undoCallback));
		}
		else {
			this.performSetBorderRightWidth(value);
		}
	},

	performSetBorderRightWidth : function(value){
		$(this.fieldId).style.borderRightWidth = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderRightWidth: value });
	},
	
	getBorderRightWidth: function(){
		return 	parseInt($(this.fieldId).style.borderRightWidth);
	},
	
	setBorderTopColor : function(value){
		if (this.undoManager){
			var oldValue = EditableCSS.RGBConvert($(this.fieldId).style.borderTopColor);
			var callback = this.performSetBorderTopColor.bind(this,value);
			var undoCallback = this.performSetBorderTopColor.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('bordertopcolor',callback,undoCallback));
		}
		else {
			this.performSetBorderTopColor(value);
		}
	},

	performSetBorderTopColor : function(value){
		$(this.fieldId).style.borderTopColor = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderTopColor: value });
	},
	
	getBorderTopColor: function(){
		return 	EditableCSS.RGBConvert($(this.fieldId).style.borderTopColor);
	},
	
	setBorderTopStyle : function(value){
		// pb.core.console.log('setBorderTopStyle ' + value);
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.borderTopStyle;
			var callback = this.performSetBorderTopStyle.bind(this,value);
			var undoCallback = this.performSetBorderTopStyle.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('bordertopstyle',callback,undoCallback));
		}
		else {
			this.performSetBorderTopStyle(value);
		}
	},

	performSetBorderTopStyle : function(value){
		$(this.fieldId).style.borderTopStyle = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderTopStyle: value });
	},
	
	getBorderTopStyle: function(){
		return 	$(this.fieldId).style.borderTopStyle;
	},
	
	setBorderTopWidth : function(value){
		// pb.core.console.log('setBorderTopWidth ' + value);
		value = value + 'px';
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.borderTopWidth;
			var callback = this.performSetBorderTopWidth.bind(this,value);
			var undoCallback = this.performSetBorderTopWidth.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('bordertopwidth',callback,undoCallback));
		}
		else {
			this.performSetBorderTopWidth(value);
		}
	},

	performSetBorderTopWidth : function(value){
		$(this.fieldId).style.borderTopWidth = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderTopWidth: value });
	},
	
	getBorderTopWidth: function(){
		return parseInt($(this.fieldId).style.borderTopWidth);
	},
	
	setBorderBottomColor : function(value){
		if (this.undoManager){
			var oldValue = EditableCSS.RGBConvert($(this.fieldId).style.borderBottomColor);
			var callback = this.performSetBorderBottomColor.bind(this,value);
			var undoCallback = this.performSetBorderBottomColor.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('borderbottomcolor',callback,undoCallback));
		}
		else {
			this.performSetBorderBottomColor(value);
		}
	},

	performSetBorderBottomColor : function(value){
		$(this.fieldId).style.borderBottomColor = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderBottomColor: value });
	},
	
	getBorderBottomColor: function(){
		return 	EditableCSS.RGBConvert($(this.fieldId).style.borderBottomColor);
	},
	
	setBorderBottomStyle : function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.borderBottomStyle;
			var callback = this.performSetBorderBottomStyle.bind(this,value);
			var undoCallback = this.performSetBorderBottomStyle.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('borderbottomstyle',callback,undoCallback));
		}
		else {
			this.performSetBorderBottomStyle(value);
		}
	},
	
	performSetBorderBottomStyle : function(value){
		$(this.fieldId).style.borderBottomStyle = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderBottomStyle: value });
	},
	
	getBorderBottomStyle: function(){
		return 	$(this.fieldId).style.borderBottomStyle;
	},
	
	setBorderBottomWidth : function(value){
		value = value + 'px';
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.borderBottomWidth;
			var callback = this.performSetBorderBottomWidth.bind(this,value);
			var undoCallback = this.performSetBorderBottomWidth.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('borderbottomwidth',callback,undoCallback));
		}
		else {
			this.performSetBorderBottomWidth(value);
		}
	},

	performSetBorderBottomWidth : function(value){
		$(this.fieldId).style.borderBottomWidth = value;
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,borderBottomWidth: value });
	},
	
	getBorderBottomWidth: function(){
		return 	parseInt($(this.fieldId).style.borderBottomWidth);
	},
	
	setOpacity : function(value){
		if (this.undoManager){
			var oldValue = $(this.fieldId).style.opacity;
			var callback = this.performSetOpacity.bind(this,value);
			var undoCallback = this.performSetOpacity.bind(this,oldValue);
			this.undoManager.pushCommand(new CallbackCommand('opacity',callback,undoCallback));
		}
		else {
			this.performSetOpacity(value);
		}
	},

	
	performSetOpacity : function(value){
		value = new String(value);
		value = value.replace(',','.');
		$(this.fieldId).style.opacity = value;
		if (value==0) $(this.fieldId).style.display = 'none';
		else $(this.fieldId).style.display = 'block';
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,opacity: value });
	},
	
	getOpacity: function(){
		return 	$(this.fieldId).style.opacity;
	},
	
	rgbConvert: function (str) {
		
		if (str=="") return "";
		
		str = str.replace(/rgb\(|\)/g, "").split(",");
		str[0] = parseInt(str[0], 10).toString(16).toLowerCase();
		str[1] = parseInt(str[1], 10).toString(16).toLowerCase();
		str[2] = parseInt(str[2], 10).toString(16).toLowerCase();
		str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
		str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
		str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
		
		return ('#' + str.join(""));
	},
		
	serialize: function() {
		return this.performSerialize($(this.fieldId));
	},
		
	performSerialize: function(node,prefix){
		
		var nodeStyle = node.style;
		
		var cssInfo = pb.core.itemInfoManager.get('css',this.fieldId);
		
		var parameters = new Object();
		
		if (!prefix) prefix = '';
		
		//parameters['leftPos'] = nodeStyle.offset
		
		// Text
		if (nodeStyle.color){
			parameters[prefix + 'color'] =  EditableCSS.RGBConvert(nodeStyle.color);
		}

		if (nodeStyle.fontFamily){
			parameters[prefix + 'fontFamily'] = nodeStyle.fontFamily;
		}
		
		if (nodeStyle.textIndent) {
			parameters[prefix + 'textIndent'] = nodeStyle.textIndent;
		}
		
		if (nodeStyle.fontSize){
			parameters[prefix + 'fontSize'] = nodeStyle.fontSize;
		}
		
		if (nodeStyle.textAlign){
			parameters[prefix + 'textAlign'] = nodeStyle.textAlign;
		}
		
		if (nodeStyle.textDecoration){
			parameters[prefix + 'textDecoration'] = nodeStyle.textDecoration;
		}
		
		if (nodeStyle.lineHeight){
			parameters[prefix + 'lineHeight'] = nodeStyle.lineHeight;
		}

		if (nodeStyle.letterSpacing){
			parameters[prefix + 'letterSpacing'] = nodeStyle.letterSpacing;
		}

		if (nodeStyle.fontVariant){
			parameters[prefix + 'fontVariant'] = nodeStyle.fontVariant;
		}
		
		if (nodeStyle.fontStyle){
			parameters[prefix + 'fontStyle'] = nodeStyle.fontStyle;
		}
		
		if (nodeStyle.fontWeight){
			parameters[prefix + 'fontWeight'] = nodeStyle.fontWeight;
		}
		
		if (nodeStyle.fontVariant){
			parameters[prefix + 'fontVariant'] = nodeStyle.fontVariant;
		}		
				
		// Fondo
		if (nodeStyle.backgroundColor){
			parameters[prefix + 'backgroundColor'] = EditableCSS.RGBConvert(nodeStyle.backgroundColor);
		}
		
		//if (nodeStyle.backgroundImage){
			parameters[prefix + 'backgroundImage'] = nodeStyle.backgroundImage;
		//}
		
		//if (nodeStyle.backgroundImageId){
			parameters[prefix + 'backgroundImageId'] = node.backgroundImageId;
		//}
		
		if (nodeStyle.backgroundAttachment){
			parameters[prefix + 'backgroundAttachment'] = nodeStyle.backgroundAttachment;
		}
		
		if (nodeStyle.backgroundPosition){
			var positions = $(this.fieldId).style.backgroundPosition.split(" ");
			parameters[prefix + 'backgroundPositionX'] = positions[0];
				
			if (positions[1]==undefined) parameters[prefix + 'backgroundPositionY'] = '';
			else {
				if (pb.core.cssUtils.getCSSUnit(positions[1])=='px') {
					if (nodeStyle.backgroundAttachment=='fixed') {
						parameters[prefix + 'backgroundPositionY'] = pb.core.cssUtils.addCSSUnit(parseInt(positions[1]) - parseInt(this.backgroundYOffset));					
					}
					else {
						parameters[prefix + 'backgroundPositionY'] = positions[1];
					}
				}
				else {
					parameters[prefix + 'backgroundPositionY'] = positions[1];
				}
			}
		}
		
		if (nodeStyle.backgroundRepeat){
			parameters[prefix + 'backgroundRepeat'] = nodeStyle.backgroundRepeat;
		}
		
		
		// Posición
		if (cssInfo) parameters[prefix + 'position'] = cssInfo.position;
		else parameters[prefix + 'position'] = pb.core.cssUtils.getPosition(node);
		
		if (node.descendantOf('externalRelativeContainer')) {  // Hace falta para diseñar el menú. Se mete en un contenedor y ese es al que le cambiamos la alineación
			parameters[prefix + 'alignment'] = 'center';
		}
		else {
			parameters[prefix + 'alignment'] = 'free';
		}
		
		//if (nodeStyle.display){
			parameters[prefix + 'display'] = nodeStyle.display;
		//}
		
		//if (nodeStyle.styleFloat){
			parameters[prefix + 'styleFloat'] = nodeStyle.styleFloat;
	//	}
		
	//	if (nodeStyle.cssFloat){
			parameters[prefix + 'cssFloat'] = nodeStyle.cssFloat;
	//	}
		
	//	if (nodeStyle.clear){
			parameters[prefix + 'clear'] = nodeStyle.clear;
	//	}
		
	//	if (nodeStyle.left){
			parameters[prefix + 'leftPos'] = nodeStyle.left;
	//	}
		
	//	if (nodeStyle.right){
			parameters[prefix + 'rightPos'] = nodeStyle.right;
	//	}
		
	//	if (nodeStyle.top){
		if (nodeStyle.position=='fixed') {
			parameters[prefix + 'topPos'] = ((parseInt($(this.fieldId).style.top) - this.topFixedOffset) + 'px');
		}
		else {
			parameters[prefix + 'topPos'] = nodeStyle.top;
		}
			
	//	}
		
	//	if (nodeStyle.bottom){
			parameters[prefix + 'bottomPos'] = nodeStyle.bottom;
	//	}
		
	//	if (nodeStyle.maxWidth){
			parameters[prefix + 'maxWidth'] = nodeStyle.maxWidth;
	//	}
		
	//	if (nodeStyle.maxHeight){
			parameters[prefix + 'maxHeight'] = nodeStyle.maxHeight;
	//	}
		
	//	if (nodeStyle.minWidth){
			parameters[prefix + 'minWidth'] = nodeStyle.minWidth;
	//	}
		
	//	if (nodeStyle.minHeight){
			parameters[prefix + 'minHeight'] = nodeStyle.minHeight;
	//	}
		

	//	if (nodeStyle.overflow){
			parameters[prefix + 'overflow'] = nodeStyle.overflow;
			
			parameters[prefix + 'cursor'] = nodeStyle.cursor;
	//	}
		
	//	if (nodeStyle.zIndex){
			parameters[prefix + 'zIndex'] = nodeStyle.zIndex;
	//	}
		
	//	if (nodeStyle.verticalAlign){
			parameters[prefix + 'verticalAlign'] = nodeStyle.verticalAlign;
	//	}

		// Dimensiones
		//if (nodeStyle.width){
			parameters[prefix + 'width'] = nodeStyle.width;
		//}
		
		//if (nodeStyle.height){
			parameters[prefix + 'height'] = nodeStyle.height;
		//}
		
	//	if (nodeStyle.marginLeft){
			parameters[prefix + 'marginLeft'] = nodeStyle.marginLeft;
	//	}
		
	//	if (nodeStyle.marginRight){
			parameters[prefix + 'marginRight'] = nodeStyle.marginRight;
	//	}
		
	//	if (nodeStyle.marginTop){
			parameters[prefix + 'marginTop'] = nodeStyle.marginTop;
	//	}
		
	//	if (nodeStyle.marginBottom){
			parameters[prefix + 'marginBottom'] = nodeStyle.marginBottom;
	//	}
		
	//	if (nodeStyle.paddingLeft){
			parameters[prefix + 'paddingLeft'] = nodeStyle.paddingLeft;
	//	}
		
	//	if (nodeStyle.paddingRight){
			parameters[prefix + 'paddingRight'] = nodeStyle.paddingRight;
	//	}
		
	//	if (nodeStyle.paddingTop){
			parameters[prefix + 'paddingTop'] = nodeStyle.paddingTop;
	//	}
		
	//	if (nodeStyle.paddingBottom){
			parameters[prefix + 'paddingBottom'] = nodeStyle.paddingBottom;
	//	}
		
		// Borde
		
			parameters[prefix + 'bordersEqual'] = this.bordersEqual;
		
	//	if (nodeStyle.borderLeftColor){
			parameters[prefix + 'borderLeftColor'] = EditableCSS.RGBConvert(nodeStyle.borderLeftColor);
	//	}
		
	//	if (nodeStyle.borderLeftStyle){
			parameters[prefix + 'borderLeftStyle'] = nodeStyle.borderLeftStyle;
	//	}
		
	//	if (nodeStyle.borderLeftWidth){
			parameters[prefix + 'borderLeftWidth'] = nodeStyle.borderLeftWidth;
	//	}
		
	//	if (nodeStyle.borderRightColor){
			parameters[prefix + 'borderRightColor'] = EditableCSS.RGBConvert(nodeStyle.borderRightColor);
	//	}
		
	//	if (nodeStyle.borderRightStyle){
			parameters[prefix + 'borderRightStyle'] = nodeStyle.borderRightStyle;
	//	}
		
	//	if (nodeStyle.borderRightWidth){
			parameters[prefix + 'borderRightWidth'] = nodeStyle.borderRightWidth;
	//	}
		
	//	if (nodeStyle.borderTopColor){
			parameters[prefix + 'borderTopColor'] = EditableCSS.RGBConvert(nodeStyle.borderTopColor);
	//	}
		 
	//	if (nodeStyle.borderTopStyle){
			parameters[prefix + 'borderTopStyle'] = nodeStyle.borderTopStyle;
	//	}
		
	//	if (nodeStyle.borderTopWidth){
			parameters[prefix + 'borderTopWidth'] = nodeStyle.borderTopWidth;
	//	}
		
	//	if (nodeStyle.borderBottomColor){
			parameters[prefix + 'borderBottomColor'] = EditableCSS.RGBConvert(nodeStyle.borderBottomColor);
	//	}
		
	//	if (nodeStyle.borderBottomStyle){
			parameters[prefix + 'borderBottomStyle'] = nodeStyle.borderBottomStyle;
	//	}
		
	//	if (nodeStyle.borderBottomWidth){
			parameters[prefix + 'borderBottomWidth'] = nodeStyle.borderBottomWidth;
	//	}

		parameters[prefix + 'anchorLeft'] = node.getAttribute('anchorLeft');
		parameters[prefix + 'anchorTop'] = node.getAttribute('anchorTop');
	
		parameters[prefix + 'opacity'] = nodeStyle.opacity;
	
		
		return parameters;
	}
	
});

EditableCSS.RGBConvert = function (str) {		
	if (str=="") return "";
	
	str = str.replace(/rgb\(|\)/g, "").split(",");
	
	if (isNaN(parseInt(str[0], 10))) return "";
	if (isNaN(parseInt(str[1], 10))) return "";
	if (isNaN(parseInt(str[2], 10))) return "";
		
	str[0] = parseInt(str[0], 10).toString(16).toLowerCase();
	str[1] = parseInt(str[1], 10).toString(16).toLowerCase();
	str[2] = parseInt(str[2], 10).toString(16).toLowerCase();
	str[0] = (str[0].length == 1) ? '0' + str[0] : str[0];
	str[1] = (str[1].length == 1) ? '0' + str[1] : str[1];
	str[2] = (str[2].length == 1) ? '0' + str[2] : str[2];
	
	return ('#' + str.join(""));
};

var CSSEditor = Class.create({

	actionFile: 'plasticbriqFramework/actions/_css_actions.php',
	editable: null,
	formId: null,
	
	observeMethod: null,

	initialize: function(formId,editable) {
		this.formId = formId;
		this.editable = editable;
		var cssId = editable.cssId;
		var formField = $(formId);
		
		if (formField.adjust){
			Event.observe(formField.adjust,'click',function(){ editableCSSManager.editable(cssId).adjustToContent(); });			
		}
		
		if (formField.adjustToImage){
			Event.observe(formField.adjustToImage,'click',function(){ editableCSSManager.editable(cssId).adjustToImage(); });
		}

		if (formField.color){
			Event.observe(formField.color,'change',function(){ if (formField) { editableCSSManager.editable(cssId).setColor(formField.color.value); } });
			Event.observe(formField.color,'ws:change',function(){ if (formField) { editableCSSManager.editable(cssId).setColor(formField.color.value); } });
		}
		
		if (formField.fontSize){
			Event.observe(formField.fontSize,'change',function(){ editableCSSManager.editable(cssId).setFontSize(formField.fontSize.value); });
			Event.observe(formField.fontSize,'ws:change',function(){ editableCSSManager.editable(cssId).setFontSize(formField.fontSize.value); });
		}

		if (formField.textAlign){
			Event.observe(formField.textAlign,'ws:change',function(){ editableCSSManager.editable(cssId).setTextAlign(formField.textAlign.value); });
		}
		
		if (formField.fontFamily){
			Event.observe(formField.fontFamily,'change',function(){ editableCSSManager.editable(cssId).setFontFamily(formField.fontFamily.options[formField.fontFamily.selectedIndex].value);});
		}

		if (formField.textIndent) {
			Event.observe(formField.textIndent,'change',function(){ 
				editableCSSManager.editable(cssId).setTextIndent(formField.textIndent.options[formField.textIndent.selectedIndex].value);
			});
		}
		
		if (formField.fontWeight){		
			Event.observe(formField.fontWeight,'ws:change',function(){ editableCSSManager.editable(cssId).setFontWeight(formField.fontWeight.value); });
		}
		
		if (formField.fontStyle){
			Event.observe(formField.fontStyle,'ws:change',function(){ editableCSSManager.editable(cssId).setFontStyle(formField.fontStyle.value); });
		}
		
		if (formField.textDecoration){
			Event.observe(formField.textDecoration,'ws:change',function(){ editableCSSManager.editable(cssId).setTextDecoration(formField.textDecoration.value); });
		}

		if (formField.lineHeight){
			Event.observe(formField.lineHeight,'change',function(){ editableCSSManager.editable(cssId).setLineHeight(formField.lineHeight.value); });
		}

		if (formField.letterSpacing){
			Event.observe(formField.letterSpacing,'change',function(){ editableCSSManager.editable(cssId).setLetterSpacing(formField.letterSpacing.value); });
		}

		if (formField.width){		
			Event.observe(formField.width,'change',function(){ editableCSSManager.editable(cssId).setWidth(formField.width.value); });
			Event.observe(formField.width,'ws:change',function(){ editableCSSManager.editable(cssId).setWidth(formField.width.value); });
		}

		if (formField.height){
			Event.observe(formField.height,'change',function(){ editableCSSManager.editable(cssId).setHeight(formField.height.value); });
			Event.observe(formField.height,'ws:change',function(){ editableCSSManager.editable(cssId).setHeight(formField.height.value); });
		}
		
		if (formField.minWidth){		
			Event.observe(formField.minWidth,'change',function(){ editableCSSManager.editable(cssId).setMinWidth(formField.minWidth.value); });
			Event.observe(formField.minWidth,'ws:change',function(){ editableCSSManager.editable(cssId).setMinWidth(formField.minWidth.value); });
		}

		if (formField.minHeight){
			Event.observe(formField.minHeight,'change',function(){ editableCSSManager.editable(cssId).setMinHeight(formField.minHeight.value); });
			Event.observe(formField.minHeight,'ws:change',function(){ editableCSSManager.editable(cssId).setMinHeight(formField.minHeight.value); });
		}
		
		if (formField.maxWidth){		
			Event.observe(formField.maxWidth,'change',function(){ editableCSSManager.editable(cssId).setMaxWidth(formField.maxWidth.value); });
			Event.observe(formField.maxWidth,'ws:change',function(){ editableCSSManager.editable(cssId).setMaxWidth(formField.maxWidth.value); });
		}

		if (formField.maxHeight){
			Event.observe(formField.maxHeight,'change',function(){ editableCSSManager.editable(cssId).setMaxHeight(formField.maxHeight.value); });
			Event.observe(formField.maxHeight,'ws:change',function(){ editableCSSManager.editable(cssId).setMaxHeight(formField.maxHeight.value); });
		}
		
		if (formField.zIndex){
			Event.observe(formField.zIndex,'change',function(){ editableCSSManager.editable(cssId).setZIndex(formField.zIndex.options[formField.zIndex.selectedIndex].value);});
		}

		if (formField.leftPos){
			Event.observe(formField.leftPos,'change',function(){ 
				formUtils.cssMeasureChecker(formField.leftPos,true,true);
				editableCSSManager.editable(cssId).setLeft(formField.leftPos.value);
			 });

			Event.observe(formField.leftPos,'ws:change',function(){ 
				formUtils.cssMeasureChecker(formField.leftPos,true,true);
				editableCSSManager.editable(cssId).setLeft(formField.leftPos.value);
			 });	
		}
		
		if (formField.rightPos){
			Event.observe(formField.rightPos,'change',function(){ 
				formUtils.cssMeasureChecker(formField.rightPos,true,true);
				editableCSSManager.editable(cssId).setRight(formField.rightPos.value);
			 });	
			Event.observe(formField.rightPos,'ws:change',function(){ 
				formUtils.cssMeasureChecker(formField.rightPos,true,true);
				editableCSSManager.editable(cssId).setRight(formField.rightPos.value);
			 });
		}
		
		if (formField.topPos){
			Event.observe(formField.topPos,'change',function(){ 
				formUtils.cssMeasureChecker(formField.topPos,true,true);
				editableCSSManager.editable(cssId).setTop(formField.topPos.value);				
			 });
			Event.observe(formField.topPos,'ws:change',function(){ 
				formUtils.cssMeasureChecker(formField.topPos,true,true);
				editableCSSManager.editable(cssId).setTop(formField.topPos.value);				
			 });
		}
		
		if (formField.bottomPos){
			Event.observe(formField.bottomPos,'change',function(){ 
				formUtils.cssMeasureChecker(formField.bottomPos,true,true);
				editableCSSManager.editable(cssId).setBottom(formField.bottomPos.value);				
			 });
			Event.observe(formField.bottomPos,'ws:change',function(){ 
				formUtils.cssMeasureChecker(formField.bottomPos,true,true);
				editableCSSManager.editable(cssId).setBottom(formField.bottomPos.value);				
			 });
		}
		
		
		if (formField.overflow){
			Event.observe(formField.overflow,'change',function(){ editableCSSManager.editable(cssId).setOverflow(formField.overflow.options[formField.overflow.selectedIndex].value); });
		}

		if (formField.cursor){
			Event.observe(formField.cursor,'change',function(){ editableCSSManager.editable(cssId).setCursor(formField.cursor.options[formField.cursor.selectedIndex].value); });
		}
		
		if (formField.showHide){
			Event.observe(formField.showHide,'click',function(){ editableCSSManager.editable(cssId).toggleDisplay(); });			
		}

		
		if (formField.position){
			Event.observe(formField.position,'change',function() {
				var selectedOption = formField.position.options[formField.position.selectedIndex].value;
				if (selectedOption=='fixed'){
					$(formId + '_AnchorOptions').show();
					//if ($(formId + '_alignmentOptions')) $(formId + '_alignmentOptions').hide();
				}
				else {
					// pb.core.console.log('position changed new option ' + selectedOption);
					$(formId + '_AnchorOptions').hide();
					//if ($(formId + '_alignmentOptions')) $(formId + '_alignmentOptions').show();
					var leftField = $('leftPos');
					var rightField = $('rightPos');
					var topField = $('topPos');
					var bottomField = $('bottomPos');
					
					if (leftField) leftField.parentNode.show();
					if (rightField) rightField.parentNode.hide();
					if (topField) topField.parentNode.show();
					if (bottomField) bottomField.parentNode.hide();						
				}
				
				editableCSSManager.editable(cssId).setPosition(formField.position.options[formField.position.selectedIndex].value); 
			});
		}
		
		if (formField.alignment){
			Event.observe(formField.alignment,'change',function(){
				editableCSSManager.editable(cssId).setAlignment(formField.alignment.options[formField.alignment.selectedIndex].value); 
			});
		}
		
		if (formField.anchorLeft){
			Event.observe(formField.anchorLeft,'change',function(){
				var value = formField.anchorLeft.options[formField.anchorLeft.selectedIndex].value;
				var leftField = $('leftPos');
				var rightField = $('rightPos');
				if (value=='both'){
					leftField.parentNode.show();
					rightField.parentNode.show();
				}
				else if (value=='right'){
					leftField.parentNode.hide();
					rightField.parentNode.show();					
				}
				else if (value=='center'){
					leftField.parentNode.hide();
					rightField.parentNode.hide();					
				}
				else {
					leftField.parentNode.show();
					rightField.parentNode.hide();
				}
				editableCSSManager.editable(cssId).setAnchorLeft(value); });
		}
		
		if (formField.anchorTop){
			Event.observe(formField.anchorTop,'change',function(){
				var value = formField.anchorTop.options[formField.anchorTop.selectedIndex].value;
				var topField = $('topPos');
				var bottomField = $('bottomPos');
				if (value=='both'){
					topField.parentNode.show();
					bottomField.parentNode.show();
				}
				else if (value=='bottom'){
					topField.parentNode.hide();
					bottomField.parentNode.show();					
				}
				else if (value=='center'){
					topField.parentNode.hide();
					bottomField.parentNode.hide();					
				}
				else {
					topField.parentNode.show();
					bottomField.parentNode.hide();
				}
				editableCSSManager.editable(cssId).setAnchorTop(formField.anchorTop.options[formField.anchorTop.selectedIndex].value); });
		}
		
		if (formField.paddingLeft){
			Event.observe(formField.paddingLeft,'change',function(){ editableCSSManager.editable(cssId).setPaddingLeft(formField.paddingLeft.value); });
			Event.observe(formField.paddingLeft,'ws:change',function(){ editableCSSManager.editable(cssId).setPaddingLeft(formField.paddingLeft.value); });
		}
		
		if (formField.paddingRight){
			Event.observe(formField.paddingRight,'change',function(){ editableCSSManager.editable(cssId).setPaddingRight(formField.paddingRight.value); });
			Event.observe(formField.paddingRight,'ws:change',function(){ editableCSSManager.editable(cssId).setPaddingRight(formField.paddingRight.value); });
		}
		
		if (formField.paddingTop){
			Event.observe(formField.paddingTop,'change',function(){ editableCSSManager.editable(cssId).setPaddingTop(formField.paddingTop.value); });
			Event.observe(formField.paddingTop,'ws:change',function(){ editableCSSManager.editable(cssId).setPaddingTop(formField.paddingTop.value); });
		}
		
		if (formField.paddingBottom){
			Event.observe(formField.paddingBottom,'change',function(){ editableCSSManager.editable(cssId).setPaddingBottom(formField.paddingBottom.value); });
			Event.observe(formField.paddingBottom,'ws:change',function(){ editableCSSManager.editable(cssId).setPaddingBottom(formField.paddingBottom.value); });
		}
		
		
		if (formField.marginLeft){
			Event.observe(formField.marginLeft,'change',function(){ formUtils.cssMeasureChecker(formField.marginLeft,true);  editableCSSManager.editable(cssId).setMarginLeft(formField.marginLeft.value); });
			Event.observe(formField.marginLeft,'ws:change',function(){ formUtils.cssMeasureChecker(formField.marginLeft,true);  editableCSSManager.editable(cssId).setMarginLeft(formField.marginLeft.value); });
		}
		
		if (formField.marginRight){
			Event.observe(formField.marginRight,'change',function(){ formUtils.cssMeasureChecker(formField.marginRight,true);  editableCSSManager.editable(cssId).setMarginRight(formField.marginRight.value); });
			Event.observe(formField.marginRight,'ws:change',function(){ formUtils.cssMeasureChecker(formField.marginRight,true);  editableCSSManager.editable(cssId).setMarginRight(formField.marginRight.value); });
		}
		
		if (formField.marginTop){
			Event.observe(formField.marginTop,'change',function(){ formUtils.cssMeasureChecker(formField.marginTop,true); editableCSSManager.editable(cssId).setMarginTop(formField.marginTop.value); });
			Event.observe(formField.marginTop,'ws:change',function(){ formUtils.cssMeasureChecker(formField.marginTop,true); editableCSSManager.editable(cssId).setMarginTop(formField.marginTop.value); });
		}
		
		if (formField.marginBottom){
			Event.observe(formField.marginBottom,'change',function(){ formUtils.cssMeasureChecker(formField.marginBottom,true); editableCSSManager.editable(cssId).setMarginBottom(formField.marginBottom.value); });
			Event.observe(formField.marginBottom,'ws:change',function(){ formUtils.cssMeasureChecker(formField.marginBottom,true); editableCSSManager.editable(cssId).setMarginBottom(formField.marginBottom.value); });
		}
		
		if (formField.backgroundColor) {
			Event.observe(formField.backgroundColor,'change',function(){ if (formField) { editableCSSManager.editable(cssId).setBackgroundColor(formField.backgroundColor.value); } });
			Event.observe(formField.backgroundColor,'ws:change',function(){ if (formField) { editableCSSManager.editable(cssId).setBackgroundColor(formField.backgroundColor.value); } });
		}
		
		if (formField.backgroundImage) {
			Event.observe(formField.backgroundImageId,'ws:change',function(){ 			
				new Ajax.Request(system.getLibraryPath() + "plasticbriqFramework/actions/_image_picker_actions.php",{
					method:'post',
					parameters:{ command: 'getImageUrl',imageId:formField.backgroundImageId.value,style: system.getCurrentStyle() },
					onSuccess: function(transport) {
						formField.backgroundImage = transport.responseText;
						editableCSSManager.editable(cssId).setBackgroundImage(transport.responseText,formField.backgroundImageId.value);
						//editableCSSManager.editable(cssId).setBackgroundImageId(formField.backgroundImage.value);
					}
				});		
			});
		}
			
		if (formField.backgroundPositionX){
			Event.observe(formField.backgroundPositionX,'change',function(){ editableCSSManager.editable(cssId).setBackgroundPositionX(formField.backgroundPositionX.value); });
		}
		
		if (formField.backgroundPositionY){
			Event.observe(formField.backgroundPositionY,'change',function(){ editableCSSManager.editable(cssId).setBackgroundPositionY(formField.backgroundPositionY.value); });
		}
		
		if (formField.backgroundRepeat){
			Event.observe(formField.backgroundRepeat,'change',function(){ editableCSSManager.editable(cssId).setBackgroundRepeat(formField.backgroundRepeat.options[formField.backgroundRepeat.selectedIndex].value); });
		}
		
		if (formField.backgroundAttachment){
			Event.observe(formField.backgroundAttachment,'change',function(){ editableCSSManager.editable(cssId).setBackgroundAttachment(formField.backgroundAttachment.options[formField.backgroundAttachment.selectedIndex].value); });
		}
		
		if (formField.bordersEqual) {
			Event.observe(formField.bordersEqual,'change',function() {
				if (formField.bordersEqual.getValue()=='true') {
					$('simpleBorders').show();$('complexBorders').hide();
						editableCSSManager.editable(cssId).performSetBorderColor(formField.borderColor.value);
						editableCSSManager.editable(cssId).performSetBorderStyle(formField.borderStyle.getValue());
						editableCSSManager.editable(cssId).performSetBorderWidth(formField.borderWidth.value);
				}
				else {
					$('simpleBorders').hide();$('complexBorders').show();
					editableCSSManager.editable(cssId).performSetBorderLeftColor(formField.borderLeftColor.value);
					editableCSSManager.editable(cssId).performSetBorderLeftStyle(formField.borderLeftStyle.getValue());
					editableCSSManager.editable(cssId).performSetBorderLeftWidth(formField.borderLeftWidth.value);
					editableCSSManager.editable(cssId).performSetBorderRightColor(formField.borderRightColor.value);
					editableCSSManager.editable(cssId).performSetBorderRightStyle(formField.borderRightStyle.getValue());
					editableCSSManager.editable(cssId).performSetBorderRightWidth(formField.borderRightWidth.value);
					editableCSSManager.editable(cssId).performSetBorderTopColor(formField.borderTopColor.value);
					editableCSSManager.editable(cssId).performSetBorderTopStyle(formField.borderTopStyle.getValue());
					editableCSSManager.editable(cssId).performSetBorderTopWidth(formField.borderTopWidth.value);
					editableCSSManager.editable(cssId).performSetBorderBottomColor(formField.borderBottomColor.value);
					editableCSSManager.editable(cssId).performSetBorderBottomStyle(formField.borderBottomStyle.getValue());
					editableCSSManager.editable(cssId).performSetBorderBottomWidth(formField.borderBottomWidth.value);
				}
				
				editableCSSManager.editable(cssId).setBordersEqual(formField.bordersEqual.getValue());
			});
		}

		if (formField.borderColor){
			Event.observe(formField.borderColor,'change',function(){ editableCSSManager.editable(cssId).setBorderColor(formField.borderColor.value); });
		}
		
		if (formField.borderStyle){
			Event.observe(formField.borderStyle,'change',function(){ editableCSSManager.editable(cssId).setBorderStyle(formField.borderStyle.getValue()); });
		}
		
		if (formField.borderWidth){
			Event.observe(formField.borderWidth,'change',function(){ editableCSSManager.editable(cssId).setBorderWidth(formField.borderWidth.value); });
			Event.observe(formField.borderWidth,'ws:change',function(){ editableCSSManager.editable(cssId).setBorderWidth(formField.borderWidth.value); });
		}
		
		
		if (formField.borderLeftColor){
			Event.observe(formField.borderLeftColor,'change',function(){ editableCSSManager.editable(cssId).setBorderLeftColor(formField.borderLeftColor.value); });
		}
		
		if (formField.borderLeftStyle){
			Event.observe(formField.borderLeftStyle,'change',function(){ editableCSSManager.editable(cssId).setBorderLeftStyle(formField.borderLeftStyle.options[formField.borderLeftStyle.selectedIndex].value); });
		}
		
		if (formField.borderLeftWidth){
			Event.observe(formField.borderLeftWidth,'change',function(){ editableCSSManager.editable(cssId).setBorderLeftWidth(formField.borderLeftWidth.value); });
			Event.observe(formField.borderLeftWidth,'ws:change',function(){ editableCSSManager.editable(cssId).setBorderLeftWidth(formField.borderLeftWidth.value); });
		}

		if (formField.borderRightColor){
			Event.observe(formField.borderRightColor,'change',function(){ editableCSSManager.editable(cssId).setBorderRightColor(formField.borderRightColor.value); });
		}
		
		if (formField.borderRightStyle){
			Event.observe(formField.borderRightStyle,'change',function(){ editableCSSManager.editable(cssId).setBorderRightStyle(formField.borderRightStyle.options[formField.borderRightStyle.selectedIndex].value); });
		}
		
		if (formField.borderRightWidth){
			Event.observe(formField.borderRightWidth,'change',function(){ editableCSSManager.editable(cssId).setBorderRightWidth(formField.borderRightWidth.value); });
			Event.observe(formField.borderRightWidth,'ws:change',function(){ editableCSSManager.editable(cssId).setBorderRightWidth(formField.borderRightWidth.value); });
		}
		
		if (formField.borderTopColor){
			Event.observe(formField.borderTopColor,'change',function(){ editableCSSManager.editable(cssId).setBorderTopColor(formField.borderTopColor.value); });
		}
		
		if (formField.borderTopStyle){
			Event.observe(formField.borderTopStyle,'change',function(){ editableCSSManager.editable(cssId).setBorderTopStyle(formField.borderTopStyle.options[formField.borderTopStyle.selectedIndex].value); });
		}
		
		if (formField.borderTopWidth){
			Event.observe(formField.borderTopWidth,'change',function(){ editableCSSManager.editable(cssId).setBorderTopWidth(formField.borderTopWidth.value); });
			Event.observe(formField.borderTopWidth,'ws:change',function(){ editableCSSManager.editable(cssId).setBorderTopWidth(formField.borderTopWidth.value); });
		}
		
		if (formField.borderBottomColor){
			Event.observe(formField.borderBottomColor,'change',function(){ editableCSSManager.editable(cssId).setBorderBottomColor(formField.borderBottomColor.value); });
		}
		
		if (formField.borderBottomStyle){
			Event.observe(formField.borderBottomStyle,'change',function(){ editableCSSManager.editable(cssId).setBorderBottomStyle(formField.borderBottomStyle.options[formField.borderBottomStyle.selectedIndex].value); });
		}
		
		if (formField.borderBottomWidth){
			Event.observe(formField.borderBottomWidth,'change',function(){ editableCSSManager.editable(cssId).setBorderBottomWidth(formField.borderBottomWidth.value); });
			Event.observe(formField.borderBottomWidth,'ws:change',function(){ editableCSSManager.editable(cssId).setBorderBottomWidth(formField.borderBottomWidth.value); });
		}
		
		if (formField.opacity){
			Event.observe(formField.opacity,'change',function(){ editableCSSManager.editable(cssId).setOpacity(formField.opacity.value); });
			Event.observe(formField.opacity,'ws:change',function(){ editableCSSManager.editable(cssId).setOpacity(formField.opacity.value); });
		}
		
		var editor = this;
		this.observeMethod = function (event){ 
				// pb.core.console.log('Mirando si actualizar editor con cssid: ' + editor.editable.cssId + ' con cambios en ' + event.memo.cssId);
				if ( (editor.editable.cssId == event.memo.cssId) || (editor.editable.fieldId == event.memo.fieldId) ) {
					pb.core.console.log('Actualizando css editor para el cssid: ' + event.memo.cssId);
					editor.updateEditor();
				}
			};

		Event.observe(document,'ws:css_changed',this.observeMethod);
		this.updateEditor();
	},
	
	finish: function(){
		editableCSSManager.editable(this.editable.cssId).finish();		
		editableCSSManager.removeEditable(this.editable.cssId);
		Event.stopObserving(document,'ws:css_changed',this.observeMethod);
	},
	
	
	updateEditor: function(){
		
		// pb.core.console.log('update editor ' + this.editable.fieldId);
				
		var form = $(this.formId);
		
		if (!form) return;
		if (!this.editable) return;
		
		var value = this.editable.getColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}

			if (form.color) form.color.color.fromString(value);
		}

		value = this.editable.getFontSize();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.fontSize) form.fontSize.value = value;
		}	

		value = this.editable.getTextAlign();
		if (value){
			if (form.textAlign) form.textAlign.value = value;
		}	
		
		value = this.editable.getFontFamily();
		if (value){
			if (form.fontFamily) form.fontFamily.value = value;
		}	
	
		value = this.editable.getTextIndent();
		if (value) {
			if (form.textIndent) form.textIndent.value = value;
		}
		
		value = this.editable.getFontWeight();
		if (value){
			if (form.fontWeight) form.fontWeight.value = value;
		}


		value = this.editable.getFontStyle();
		if (value){
			if (form.fontStyle) form.fontStyle.value = value;
		}

		value = this.editable.getTextDecoration();
		if (value){
			if (form.textDecoration) form.textDecoration.value = value;
		}
		
		value = this.editable.getLineHeight();
		if (value){
			if (form.lineHeight) form.lineHeight.value = value;
		}

		value = this.editable.getLetterSpacing();
		if (value){
			if (form.letterSpacing) form.letterSpacing.value = value;
		}
		
		value = this.editable.getWidth();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.width) form.width.value = value;
		}
		
		value = this.editable.getHeight();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.height) form.height.value = value;
		}
		
		value = this.editable.getLeft();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.leftPos) form.leftPos.value = value;
		}
		
		value = this.editable.getTop();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.topPos) form.topPos.value = value;
		}
		
		value = this.editable.getDisplay();
		if (value){
			if ($('showHide')) {
				if (value=='none') $('showHide').value = localizedString.get('Show');
				else $('showHide').value = localizedString.get('Hide');
			}
		}

		value = this.editable.getOverflow();
		if (value){
			if (form.overflow) form.overflow.value = value;
		}

		value = this.editable.getCursor();
		if (value){
			if (form.cursor) form.cursor.value = value;
		}
		
		value = this.editable.getOpacity();
		if (form.opacity) form.opacity.value = value;

		value = this.editable.getPosition();
		pb.core.console.log('node position ' + value);
		if (value){
			if (form.position) form.position.value = value;
		}
		
		value = this.editable.getPaddingLeft();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.paddingLeft) form.paddingLeft.value = value;
		}
		
		value = this.editable.getPaddingRight();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.paddingRight) form.paddingRight.value = value;
		}
		
		value = this.editable.getPaddingTop();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.paddingTop) form.paddingTop.value = value;
		}
		
		value = this.editable.getPaddingBottom();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.paddingBottom) form.paddingBottom.value = value;
		}
		
		value = this.editable.getMarginLeft();
		if (value){
			var parsedValue = parseInt(value);
			if (isNaN(parsedValue)){
				parsedValue = value;
			}
			if (form.marginLeft) form.marginLeft.value = value;
		}
		
		value = this.editable.getMarginRight();
		if (value){
			var parsedValue = parseInt(value);
			if (isNaN(parsedValue)){
				parsedValue = value;
			}
			if (form.marginRight) form.marginRight.value = value;
		}
		
		value = this.editable.getMarginTop();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.marginTop) form.marginTop.value = value;
		}
		
		value = this.editable.getMarginBottom();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			
			if (form.marginBottom) form.marginBottom.value = value;
			
		}
		
		value = this.editable.getBackgroundColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.backgroundColor) form.backgroundColor.color.fromString(value);
		}
		
		value = this.editable.getBackgroundImage();
		if (value){
			//if (form.backgroundImage) form.backgroundImage.value = value;
		}
		
		value = this.editable.getBackgroundPositionX();
		//if (value){
			// value = parseInt(value);
			// 		if (isNaN(value)){
			// 			value = "";
			// 		}
			if (form.backgroundPositionX) form.backgroundPositionX.value = value;
		//}
		
		value = this.editable.getBackgroundPositionY();
		//if (value){
			// value = parseInt(value);
			// 		if (isNaN(value)){
			// 			value = "";
			// 		}
			if (form.backgroundPositionY) form.backgroundPositionY.value = value;
		//}
		
		value = this.editable.getBackgroundRepeat();
		if (value){
			if (form.backgroundRepeat) form.backgroundRepeat.value = value;
		}
		
		value = this.editable.getBorderLeftColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.borderLeftColor) form.borderLeftColor.color.fromString(value);
		}		
		value = this.editable.getBorderLeftStyle();
		if (value){
			if (form.borderLeftStyle) form.borderLeftStyle.value = value;
		}
		
		value = this.editable.getBorderLeftWidth();
		if (value){
			if (form.borderLeftWidth) form.borderLeftWidth.value = value;
		}

		value = this.editable.getBorderRightColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.borderRightColor) form.borderRightColor.color.fromString(value);
		}		
		value = this.editable.getBorderRightStyle();
		if (value){
			if (form.borderRightStyle) form.borderRightStyle.value = value;
		}
		
		value = this.editable.getBorderRightWidth();
		if (value){
			if (form.borderRightWidth) form.borderRightWidth.value = value;
		}

		value = this.editable.getBorderTopColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.borderTopColor) form.borderTopColor.color.fromString(value);
		}		
		value = this.editable.getBorderTopStyle();
		if (value){
			if (form.borderTopStyle) form.borderTopStyle.value = value;
		}
		
		value = this.editable.getBorderTopWidth();
		if (value){
			if (form.borderTopWidth) form.borderTopWidth.value = value;
		}

		value = this.editable.getBorderBottomColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.borderBottomColor) form.borderBottomColor.color.fromString(value);
		}
				
		value = this.editable.getBorderBottomStyle();
		if (value){
			if (form.borderBottomStyle) form.borderBottomStyle.value = value;
		}
		
		value = this.editable.getBorderBottomWidth();
		if (value){
			if (form.borderBottomWidth) form.borderBottomWidth.value = value;
		}

		
	}
	
});


var CompositeEditableCSS = Class.create(EditableCSS,{

	baseFieldId: null,
	
	initialize: function($super,fieldId,baseFieldId,cssId,cssRule,dontObserve) {
		this.baseFieldId = baseFieldId;
		$super(fieldId,cssId,cssRule,dontObserve);
	},
	
	// performAdjustToContent: function(value) {
	// 	if (value=='') this.performSetSize('','');
	// 	else $super(value);
	// },
	
	serialize: function($super) {
		var params = $super();
		
		if (!this.incrementalStyle) return params;
		
		//params.baseStyle = $(this.baseFieldId).getAttribute('style');
		params['base'] = 'true';
		
		var baseStyleParams = this.performSerialize($(this.baseFieldId),'base_');
		return Object.extend(params,baseStyleParams);
	},
	
	resetCss: function($super) {
		$(this.fieldId).setAttribute('style','');
		var cloner = new CSSStyleCloner(this.baseFieldId,'#' + this.fieldId);
		cloner.cloneStyle();
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	performSetColor: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.color); 
		else $super(value);
	},
	
	performSetFontFamily: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.fontFamily); 
		else $super(value);
	},
	
	performSetTextIndent: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.textIndent);
		else $super(value);
	},
	
	performSetFontSize: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.fontSize); 
		else $super(value);
	},
	
	performSetTextAlign: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.textAlign); 
		else $super(value);
	},
	
	performSetTextDecoration: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.textDecoration); 
		else $super(value);
	},
	
	performSetLineHeight: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.lineHeight); 
		else $super(value);
	},
	
	performSetLetterSpacing: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.letterSpacing); 
		else $super(value);
	},
	
	performSetFontVariant: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.fontVariant); 
		else $super(value);
	},
	
	performSetFontStyle: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.fontStyle); 
		else $super(value);
	},
	
	performSetFontWeight: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.fontWeight); 
		else $super(value);
	},
	
	performSetBackgroundColor: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.backgroundColor); 
		else $super(value);
	},
	
	performSetBackgroundImage: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.backgroundImage); 
		else $super(value);
	},
	
	performSetBackgroundAttachment: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.backgroundAttachment); 
		else $super(value);
	},
	
	performSetBackgroundPosition: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.backgroundPosition); 
		else $super(value);
	},
	
	performSetBackgroundPositionX: function($super,value){
		// if (value=='') $super($(this.baseFieldId).style.back); 
		// else $super(value);
	},
	
	performSetBackgroundPositionY: function($super,value){
		// if (value=='') $super($(this.baseFieldId).style.); 
		// else $super(value);
	},
	
	performSetBackgroundRepeat: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.backgroundRepeat); 
		else $super(value);
	},
	
	performSetPosition: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.position); 
		else $super(value);
	},
	
	performSetAnchorLeft: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.anchorLeft); 
		else $super(value);
	},
	
	performSetAnchorTop: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.anchorTop); 
		else $super(value);
	},
		
	performSetStyleFloat: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.styleFloat); 
		else $super(value);
	},
	
	performSetCssFloat: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.cssFloat); 
		else $super(value);
	},
	
	performSetLeft: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.left); 
		else $super(value);
	},
	
	performSetRight: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.right); 
		else $super(value);
	},
	
	performSetTop: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.top); 
		else $super(value);
	},
	
	performSetBottom: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.bottom); 
		else $super(value);
	},
	
	setMaxWidth: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.maxWidth); 
		else $super(value);
	},
	
	setMaxHeight: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.maxHeight); 
		else $super(value);
	},
	
	setMinWidth: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.minWidth); 
		else $super(value);
	},
	
	setMinHeight: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.minHeight); 
		else $super(value);
	},
	
	setOverflow: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.overflow); 
		else $super(value);
	},
	
	performSetCursor: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.cursor); 
		else $super(value);
	},
	
	performSetWidth: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.width); 
		else $super(value);
	},
	
	performSetHeight: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.height); 
		else $super(value);
	},
	
	performSetSize: function($super,width,height){
		if (value=='') $super($(this.baseFieldId).style.width,$(this.baseFieldId).style.height); 
		else $super(width,height);
	},
	
	performSetMarginLeft: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.marginLeft); 
		else $super(value);
	},
	
	performSetMarginRight: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.marginRight); 
		else $super(value);
	},
	
	performSetMarginTop: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.marginTop); 
		else $super(value);
	},
	
	performSetMarginBottom: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.marginBottom); 
		else $super(value);
	},
	
	performSetPaddingLeft: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.paddingLeft); 
		else $super(value);
	},
	
	performSetPaddingRight: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.paddingRight); 
		else $super(value);
	},
	
	performSetPaddingTop: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.paddingTop); 
		else $super(value);
	},
	
	performSetPaddingBottom: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.paddingBottom); 
		else $super(value);
	},
	
	performSetBorderLeftColor: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderLeftColor); 
		else $super(value);
	},
	
	performSetBorderLeftStyle: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderLeftStyle); 
		else $super(value);
	},
	
	performSetBorderLeftWidth: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderLeftWidth); 
		else $super(value);
	},
	
	performSetBorderRightColor: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderRightColor); 
		else $super(value);
	},
	
	performSetBorderRightStyle: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderRightStyle); 
		else $super(value);
	},
	
	performSetBorderRightWidth: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderRightWidth); 
		else $super(value);
	},
	
	performSetBorderTopColor: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderTopColor); 
		else $super(value);
	},
	
	performSetBorderTopStyle: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderTopStyle); 
		else $super(value);
	},
	
	performSetBorderTopWidth: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderTopWidth); 
		else $super(value);
	},
	
	performSetBorderBottomColor: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderBottomColor); 
		else $super(value);
	},
	
	performSetBorderBottomStyle: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderBottomStyle); 
		else $super(value);
	},
	
	performSetBorderBottomWidth: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.borderBottomWidth); 
		else $super(value);
	},
	
	performSetOpacity: function($super,value){
		if (value=='') $super($(this.baseFieldId).style.opacity); 
		else $super(value);
	}

});


var EditableCSSManager = new Class.create({
	
	editables: new Object(),
	
	initialize: function(){
	},
	
	addCompositeEditable: function(fieldId,baseFieldId,cssId,replace){
		if (replace) {
			this.removeEditable(cssId);
		}

		if (!this.editables[cssId]) {
			this.editables[cssId] = new CompositeEditableCSS(fieldId,baseFieldId,cssId);
		}
		
		document.fire('ws:editablecss_added',{ id: cssId });
		return this.editables[cssId];
	},
	
	addEditable: function(fieldId,cssId,replace){
		if (replace) {
			this.removeEditable(cssId);
		}

		if (!this.editables[cssId]) {
			this.editables[cssId] = new EditableCSS(fieldId,cssId);
		}
		
		document.fire('ws:editablecss_added', { id: cssId });
		
		return this.editables[cssId];
	},
	
	editable: function(id){
		return this.editables[id];
	},
	
	removeEditable: function(id){
		if (this.editables[id]){
			this.editables[id].finish();
			delete this.editables[id];
		}
		this.editables[id] = null;	
	},
	
	removeAll: function(){
		for (var index in this.editables){
			this.removeEditable(index);
		}
	}
	
});

var editableCSSManager = new EditableCSSManager();


var CSSEditorManager = new Class.create({
	
	cssEditors: new Object(),
	
	initialize: function(){
	},
	
	addCSSEditor: function(formId,editable){
		this.removeCSSEditor(editable.cssId);
		this.cssEditors[editable.cssId] = new CSSEditor(formId,editable);
	},
	
	cssEditor: function(id){
		return this.cssEditors[id];
	},
	
	removeCSSEditor: function(id){
		if (this.cssEditors[id]){
			//this.cssEditors[id].finish();
			delete this.cssEditors[id];		
		}
		this.cssEditors[id] = null;	
	},
	
	removeAllCSSEditors: function(){
		for (var index in this.cssEditors){
			this.removeCSSEditor(index);
		}
	}
});

var cssEditorManager = new CSSEditorManager();

var CSSStyleCloner = new Class.create({
	fieldId: null,
	cssRule: null,
	
	initialize: function(fieldId,cssRule){
		this.fieldId = fieldId;
		this.cssRule = cssRule;
		var obj = this;
		var callClone = this.cloneStyle.bind(this);
		document.observe('ws:css_changed',function (event) { 
			if (event.memo.fieldId==obj.fieldId){ 
				callClone();
			}
		});
	},
	
	cloneStyle: function(){
		var nodes = $$(this.cssRule);
		var nodeStyle = $(this.fieldId).style;
		for (var i=0;i<nodes.length;i++){
			// for (var p in s) {
			// 				try {
			// 					nodes[i].style[p] = e2.style[p]
			// 				}
			// 				catch(e){
			// 				}
			// 			}
			
			//nodes[i].style.cssText = $(this.fieldId).style.cssText;
			if (nodeStyle.color){
				nodes[i].style.color = nodeStyle.color;
			}

			if (nodeStyle.fontFamily){
				nodes[i].style.fontFamily = nodeStyle.fontFamily;
			}
			
			if (nodeStyle.textIndent) {
				nodes[i].style.textIndent = nodeStyle.textIndent;
			}

			if (nodeStyle.fontSize){
				nodes[i].style.fontSize = nodeStyle.fontSize;
			}

			if (nodeStyle.textAlign){
				nodes[i].style.textAlign = nodeStyle.textAlign;
			}

			if (nodeStyle.textDecoration){
				nodes[i].style.textDecoration = nodeStyle.textDecoration;
			}

			if (nodeStyle.lineHeight){
				nodes[i].style.lineHeight = nodeStyle.lineHeight;
			}

			if (nodeStyle.letterSpacing){
				nodes[i].style.letterSpacing = nodeStyle.letterSpacing;
			}

			if (nodeStyle.fontVariant){
				nodes[i].style.fontVariant = nodeStyle.fontVariant;
			}

			if (nodeStyle.fontStyle){
				nodes[i].style.fontStyle = nodeStyle.fontStyle;
			}

			if (nodeStyle.fontWeight){
				nodes[i].style.fontWeight = nodeStyle.fontWeight;
			}

			if (nodeStyle.fontVariant){
				nodes[i].style.fontVariant = nodeStyle.fontVariant;
			}		

			// Fondo
			if (nodeStyle.backgroundColor){
				nodes[i].style.backgroundColor = EditableCSS.RGBConvert(nodeStyle.backgroundColor);
			}

			if (nodeStyle.backgroundImage){
				nodes[i].style.backgroundImage = nodeStyle.backgroundImage;
			}

			if (nodeStyle.backgroundImageId){
				nodes[i].style.backgroundImageId = nodeStyle.backgroundImageId;
			}

			if (nodeStyle.backgroundAttachment){
				nodes[i].style.backgroundAttachment = nodeStyle.backgroundAttachment;
			}

			if (nodeStyle.backgroundPosition){
				nodes[i].style.backgroundPosition = $(this.fieldId).style.backgroundPosition;
			}

			if (nodeStyle.backgroundRepeat){
				nodes[i].style.backgroundRepeat = nodeStyle.backgroundRepeat;
			}


			// Posición
			nodes[i].style.position = nodeStyle.position;

			nodes[i].style.display = nodeStyle.display;

			nodes[i].style.opacity = nodeStyle.opacity;

			nodes[i].style.styleFloat = nodeStyle.styleFloat;

			nodes[i].style.cssFloat = nodeStyle.cssFloat;

			nodes[i].style.clear = nodeStyle.clear;

			nodes[i].style.left = nodeStyle.left;

			nodes[i].style.right = nodeStyle.right;

			nodes[i].style.top = nodeStyle.top;

			nodes[i].style.bottom = nodeStyle.bottom;

			nodes[i].style.maxWidth = nodeStyle.maxWidth;

			nodes[i].style.maxHeight = nodeStyle.maxHeight;

			nodes[i].style.minWidth = nodeStyle.minWidth;

			nodes[i].style.minHeight = nodeStyle.minHeight;

			nodes[i].style.overflow = nodeStyle.overflow;

			nodes[i].style.cursor = nodeStyle.cursor;

			nodes[i].style.zIndex = nodeStyle.zIndex;

			nodes[i].style.verticalAlign = nodeStyle.verticalAlign;


			// Dimensiones
			nodes[i].style.width = nodeStyle.width;
			nodes[i].style.height = nodeStyle.height;
			nodes[i].style.marginLeft = nodeStyle.marginLeft;
			nodes[i].style.marginRight = nodeStyle.marginRight;
			nodes[i].style.marginTop = nodeStyle.marginTop;
			nodes[i].style.marginBottom = nodeStyle.marginBottom;
			nodes[i].style.paddingLeft = nodeStyle.paddingLeft;
			nodes[i].style.paddingRight = nodeStyle.paddingRight;
			nodes[i].style.paddingTop = nodeStyle.paddingTop;
			nodes[i].style.paddingBottom = nodeStyle.paddingBottom;

			// Borde
			nodes[i].style.borderLeftColor = nodeStyle.borderLeftColor;
			nodes[i].style.borderLeftStyle = nodeStyle.borderLeftStyle;
			nodes[i].style.borderLeftWidth = nodeStyle.borderLeftWidth;
			nodes[i].style.borderRightColor = nodeStyle.borderRightColor;
			nodes[i].style.borderRightStyle = nodeStyle.borderRightStyle;
			nodes[i].style.borderRightWidth = nodeStyle.borderRightWidth;
			nodes[i].style.borderTopColor = nodeStyle.borderTopColor;
			nodes[i].style.borderTopStyle = nodeStyle.borderTopStyle;
			nodes[i].style.borderTopWidth = nodeStyle.borderTopWidth;
			nodes[i].style.borderBottomColor = nodeStyle.borderBottomColor;
			nodes[i].style.borderBottomStyle = nodeStyle.borderBottomStyle;
			nodes[i].style.borderBottomWidth = nodeStyle.borderBottomWidth;
			
		}
	}
});

function getCSSRule(ruleName, deleteFlag) {               // Return requested style obejct
   ruleName=ruleName.toLowerCase();                       // Convert test string to lower case.
   if (document.styleSheets) {                            // If browser can play with stylesheets
      for (var i=0; i<document.styleSheets.length; i++) { // For each stylesheet
         var styleSheet=document.styleSheets[i];          // Get the current Stylesheet
         var ii=0;                                        // Initialize subCounter.
         var cssRule=false;                               // Initialize cssRule. 
         do {                                             // For each rule in stylesheet
            if (styleSheet.cssRules) {                    // Browser uses cssRules?
               cssRule = styleSheet.cssRules[ii];         // Yes --Mozilla Style
            } else {                                      // Browser usses rules?
               cssRule = styleSheet.rules[ii];            // Yes IE style. 
            }                                             // End IE check.
            if (cssRule)  {                               // If we found a rule...
               if (cssRule.selectorText.toLowerCase()==ruleName) { //  match ruleName?
                  if (deleteFlag=='delete') {             // Yes.  Are we deleteing?
                     if (styleSheet.cssRules) {           // Yes, deleting...
                        styleSheet.deleteRule(ii);        // Delete rule, Moz Style
                     } else {                             // Still deleting.
                        styleSheet.removeRule(ii);        // Delete rule IE style.
                     }                                    // End IE check.
                     return true;                         // return true, class deleted.
                  } else {                                // found and not deleting.
                     return cssRule;                      // return the style object.
                  }                                       // End delete Check
               }                                          // End found rule name
            }                                             // end found cssRule
            ii++;                                         // Increment sub-counter
         } while (cssRule)                                // end While loop
      }                                                   // end For loop
   }                                                      // end styleSheet ability check
   return false;                                          // we found NOTHING!
};                                                         // end getCSSRule 

function killCSSRule(ruleName) {                          // Delete a CSS rule   
   return getCSSRule(ruleName,'delete');                  // just call getCSSRule w/delete flag.
};                                                        // end killCSSRule

function addCSSRule(ruleName) {                           // Create a new css rule
   if (document.styleSheets) {                            // Can browser do styleSheets?
      if (!getCSSRule(ruleName)) {                        // if rule doesn't exist...
         if (document.styleSheets[0].addRule) {           // Browser is IE?
            document.styleSheets[0].addRule(ruleName, null,0);      // Yes, add IE style
         } else {                                         // Browser is IE?
            document.styleSheets[0].insertRule(ruleName+' { }', 0); // Yes, add Moz style.
         }                                                // End browser check
      }                                                   // End already exist check.
   }                                                      // End browser ability check.
   return getCSSRule(ruleName);                           // return rule we just created.
};

var CSSInternalStyle = new Class.create({
	id: null,
	fieldIdArray: null,
	cssRuleArray: null,
	
	observeMethod: null,
	
	initialize: function(id,fieldIdArray,cssRuleArray){
		this.id = id;
		this.fieldIdArray = fieldIdArray;
		this.cssRuleArray = cssRuleArray;
		var obj = this;
		var callInsert = this.insert.bind(this);
		this.observeMethod = function (event) {
			for (i=0;i<obj.fieldIdArray.length;i++) {
				if (event.memo.fieldId==obj.fieldIdArray[i]) { 
					pb.core.submissionManager.run('cssinternalstyle'+id,callInsert,20);
					break;
				}				
			}
		};
		
		document.observe('ws:css_changed',this.observeMethod);
		
		callInsert();
	},
	
	finish: function(){
		document.stopObserving('ws:css_changed',this.observeMethod);
	},
	
	insert: function(){

		var styleNode = $(this.id);
		
		// Borrar el que hubiera
		//killCSSRule(this.cssRule);
		
		if (styleNode) styleNode.remove();
		
		// Añadir uno nuevo	
		
		if (system.Browser.IE) {
			styleNode = document.createStyleSheet();
			styleNode.id = this.id;
 			} else {	
			styleNode = new Element('style',{ id: this.id,type: "text/css" });
		
			var head = $$("head")[0];
			if (!head){
				head = new Element('head');
				document.body.insert({'before': head});
			}
			
			head.appendChild(styleNode);
		}
		
		// Actualizar el contenido del nuevo estilo
		result = '';
		for (i=0;i<this.fieldIdArray.length;i++) {
			result += this.cssRuleArray[i] + "{\n " + this.serialize($(this.fieldIdArray[i])) + " \n}\n";
		}


		if (system.Browser.IE){
			styleNode.cssText = result;
		}
		else if (system.Browser.Safari){
			styleNode.innerText = result;
		}
		else {
			styleNode.update(result);
		}			

	},
	
	serialize: function(node){
		
		if (!node) return null;
		
		var nodeStyle = node.style;
		
		var rawStyle = '';
		
		// Text
		if (nodeStyle.color){
			rawStyle = rawStyle + "color: " + EditableCSS.RGBConvert(nodeStyle.color) + ";";
		}

		if (nodeStyle.fontFamily){
			rawStyle = rawStyle + "font-family: " + nodeStyle.fontFamily + ";";
		}
		
		if (nodeStyle.textIndent) {
			rawStyle = rawStyle + "text-indent:" + nodeStyle.textIndent + ";";
		}
		
		if (nodeStyle.fontSize){
			rawStyle = rawStyle + "font-size: " + nodeStyle.fontSize + ";";
		}
		
		if (nodeStyle.textAlign){
			rawStyle = rawStyle + "text-align: " + nodeStyle.textAlign + ";";
		}
		
		if (nodeStyle.textDecoration){
			rawStyle = rawStyle + "text-decoration: " + nodeStyle.textDecoration + ";";
		}
		
		if (nodeStyle.lineHeight){
			rawStyle = rawStyle + "line-height: " + nodeStyle.lineHeight + ";";
		}

		if (nodeStyle.letterSpacing){
			rawStyle = rawStyle + "letter-spacing: " + nodeStyle.letterSpacing + ";";
		}		

		if (nodeStyle.fontVariant){
			rawStyle = rawStyle + "font-variant: " + nodeStyle.fontVariant + ";";
		}
		
		if (nodeStyle.fontStyle){
			rawStyle = rawStyle + "font-style: " + nodeStyle.fontStyle + ";";
		}
		
		if (nodeStyle.fontWeight){
			rawStyle = rawStyle + "font-weight: " + nodeStyle.fontWeight + ";";
		}
						
		// Fondo
		if (nodeStyle.backgroundColor){
			rawStyle = rawStyle + "background-color: " + EditableCSS.RGBConvert(nodeStyle.backgroundColor) + ";";
		}
		
		if (nodeStyle.backgroundImage){
			rawStyle = rawStyle + "background-image: " + nodeStyle.backgroundImage + ";";
		}
				
		if (nodeStyle.backgroundAttachment){
			rawStyle = rawStyle + "background-attachment: " + nodeStyle.backgroundAttachment + ";";
		}
		
		if (nodeStyle.backgroundPosition){
			rawStyle = rawStyle + "background-position: " + nodeStyle.backgroundPosition + ";";
		}
		
		if (nodeStyle.backgroundRepeat){
			rawStyle = rawStyle + "background-repeat: " + nodeStyle.backgroundRepeat + ";";
		}
		
		
		// Posición
		if (nodeStyle.position){
			rawStyle = rawStyle + "position: " + nodeStyle.position + ";";
		}
			
		
		if (nodeStyle.display){
			rawStyle = rawStyle + "display: " + nodeStyle.display + ";";
		}
		
			// rawStyle = rawStyle + ": " + nodeStyle.styleFloat;
			// 
			// rawStyle = rawStyle + nodeStyle.cssFloat;

		if (nodeStyle.clear){
			rawStyle = rawStyle + "clear: " + nodeStyle.clear + ";";
		}
			

		if (nodeStyle.left){
			rawStyle = rawStyle + "left: " + nodeStyle.left + ";";
		}
		
		if (nodeStyle.right){
			rawStyle = rawStyle + "right: " + nodeStyle.right + ";";
		}
		
		if (nodeStyle.top){
				rawStyle = rawStyle + "top: " + nodeStyle.top + ";";
		}
		
		if (nodeStyle.bottom){
				rawStyle = rawStyle + "bottom: " + nodeStyle.bottom + ";";
		}
		
		if (nodeStyle.maxWidth){
				rawStyle = rawStyle + "max-width: " + nodeStyle.maxWidth + ";";
		}
		
		if (nodeStyle.maxHeight){
				rawStyle = rawStyle + "max-height: " + nodeStyle.maxHeight + ";";
		}
		
		if (nodeStyle.minWidth){
				rawStyle = rawStyle + "min-width: " + nodeStyle.minWidth + ";";
		}
		
		if (nodeStyle.minHeight){
				rawStyle = rawStyle + "min-height: " + nodeStyle.minHeight + ";";
		}
		

		if (nodeStyle.overflow){
				rawStyle = rawStyle + "overflow: " + nodeStyle.overflow + ";";
		}

		if (nodeStyle.cursor){
				rawStyle = rawStyle + "cursor: " + nodeStyle.cursor + ";";
		}
		
		if (nodeStyle.zIndex){
				rawStyle = rawStyle + "z-index: " + nodeStyle.zIndex + ";";
		}
		
		if (nodeStyle.verticalAlign){
				rawStyle = rawStyle +  "vertical-align: " + nodeStyle.verticalAlign + ";";
		}
		

	// Dimensiones
	if (nodeStyle.width){
		if ((nodeStyle.width=="") && (node.offsetWidth>0)) {
			rawStyle = rawStyle + "width: " +  node.offsetWidth + ";";
		}
		else {
			rawStyle = rawStyle + "width: " +  nodeStyle.width + ";";			
		}

	}
		
	if (nodeStyle.height){
		rawStyle = rawStyle + "height: " +  nodeStyle.height + ";";
	}
		
	if (nodeStyle.marginLeft){
			rawStyle = rawStyle + "margin-left: " +  nodeStyle.marginLeft + ";";
	}
		
	if (nodeStyle.marginRight){
			rawStyle = rawStyle + "margin-right: " +  nodeStyle.marginRight + ";";
	}
		
	if (nodeStyle.marginTop){
			rawStyle = rawStyle + "margin-top: " +  nodeStyle.marginTop + ";";
	}
		
	if (nodeStyle.marginBottom){
			rawStyle = rawStyle + "margin-bottom: " +  nodeStyle.marginBottom + ";";
	}
		
	if (nodeStyle.paddingLeft){
			rawStyle = rawStyle + "padding-left: " +  nodeStyle.paddingLeft + ";";
	}
		
	if (nodeStyle.paddingRight){
			rawStyle = rawStyle + "padding-right: " +  nodeStyle.paddingRight + ";";
	}
		
	if (nodeStyle.paddingTop){
			rawStyle = rawStyle + "padding-top: " +  nodeStyle.paddingTop + ";";
	}
		
	if (nodeStyle.paddingBottom){
			rawStyle = rawStyle + "padding-bottom: " +  nodeStyle.paddingBottom + ";";
	}
		
		// Borde
	if (nodeStyle.borderLeftColor){
			rawStyle = rawStyle + "border-left-color: " +  EditableCSS.RGBConvert(nodeStyle.borderLeftColor) + ";";
	}
		
	if (nodeStyle.borderLeftStyle){
			rawStyle = rawStyle + "border-left-style: " + nodeStyle.borderLeftStyle + ";";
	}
		
	if (nodeStyle.borderLeftWidth){
			rawStyle = rawStyle + "border-left-width: " +  nodeStyle.borderLeftWidth + ";";
	}
		
	if (nodeStyle.borderRightColor){
			rawStyle = rawStyle + "border-right-color: " +  EditableCSS.RGBConvert(nodeStyle.borderRightColor) + ";";
	}
		
	if (nodeStyle.borderRightStyle){
			rawStyle = rawStyle + "border-right-style: " +  nodeStyle.borderRightStyle + ";";
	}
		
	if (nodeStyle.borderRightWidth){
			rawStyle = rawStyle + "border-right-width: " +  nodeStyle.borderRightWidth + ";";
	}
		
	if (nodeStyle.borderTopColor){
			rawStyle = rawStyle + "border-top-color: " +  EditableCSS.RGBConvert(nodeStyle.borderTopColor) + ";";
	}
		
	if (nodeStyle.borderTopStyle){
			rawStyle = rawStyle + "border-top-style: " +  nodeStyle.borderTopStyle + ";";
	}
		
	if (nodeStyle.borderTopWidth){
			rawStyle = rawStyle + "border-top-width: " +  nodeStyle.borderTopWidth + ";";
	}
		
	if (nodeStyle.borderBottomColor){
			rawStyle = rawStyle + "border-bottom-color: " +  EditableCSS.RGBConvert(nodeStyle.borderBottomColor) + ";";
	}
		
	if (nodeStyle.borderBottomStyle){
			rawStyle = rawStyle + "border-bottom-style: " +  nodeStyle.borderBottomStyle + ";";
	}
		
	if (nodeStyle.borderBottomWidth){
			rawStyle = rawStyle + "border-bottom-width: " +  nodeStyle.borderBottomWidth + ";";
	}
		
		return rawStyle;		
		
	}
	
});


var pb_css_FavoriteCSSEditor = Class.create({

	id: null,
	actionFile: 'plasticbriqFramework/actions/_favorite_css_actions.php',
	selectedStyle: null,
	fieldId: null,

	initialize: function(id){
		this.id = id;
	},
	
	add: function(containerId) {
		
		if (!this.fieldId) return;
		
		var editable = new EditableCSS(this.fieldId);
		params = editable.serialize();
		params.editorId = containerId;
		params.fieldId = this.fieldId;
	
		pb.core.activityMonitor.addTask(new pb_core_Task('add_favorite','Adding Favorite'));
	
		pb.core.actions.executeAndPutResultIntoContainer(pb.core.system.getLibraryPath() + this.actionFile,'add',params,containerId,true,false,'add_favorite');	
		
		// Se debería guardar el estilo css como el nuevo estilo, y al aplicar guardar el css antiguo como un favorito que sea estilo anterior		
	},
	
	load: function(){
		if (!this.selectedStyle || !this.fieldId) return;
		
		var cssId = $(this.selectedStyle.id + '_cssId').innerHTML;
		
		var editable = new EditableCSS(this.fieldId,cssId);
		if (editable) {
			editable.loadCss();
			document.fire('ws:load_css');
			document.fire('ws:css_changed',{ fieldId: this.fieldId });
		}
	},
	
	save: function(){
		if (!this.selectedStyle || !this.fieldId) return;
		 
		var cssId = $(this.selectedStyle.id + '_cssId').innerHTML;
		
		var editable = new EditableCSS(this.fieldId,cssId);
		if (editable) editable.performSaveCss();
	},
	
	remove: function(containerId){
		
		if (!this.selectedStyle || !this.fieldId) return;
		
		pb.core.activityMonitor.addTask(new pb_core_Task('remove_favorite','Removing Favorite'));
		
		// id es css_favorite_
		var id = this.selectedStyle.id.substr(13);
		
		pb.core.actions.executeAndPutResultIntoContainer(pb.core.system.getLibraryPath() + this.actionFile,'remove',{ id: id,editorId: containerId , fieldId: this.fieldId },containerId,true,false,'remove_favorite');
	},
	
	saveName: function(id,value){
		pb.core.actions.execute(pb.core.system.getLibraryPath() + this.actionFile,'saveName',{ id: id,value:value },
			function(responseText) {
				if (responseText!='OK'){
					// Mostrar mensaje de error
				}
			});
	},
	
	select: function(id,nodeId){
		if (this.selectedStyle){
			this.selectedStyle.style.backgroundColor = 'transparent';
		}
		
		this.selectedStyle = $(nodeId);
		this.selectedStyle.style.backgroundColor = '#525252';
	}
	
}); // pb_css_FavoriteCSSEditor


var favoriteCSSEditor = new pb_css_FavoriteCSSEditor();


var pb_core_ItemActionsEditor = Class.create({

	actionFile: 'plasticbriqFramework/actions/_css_actions.php',

	add: function(fieldId,actionsId,containerId,templateId,eventName,siteId){
				
		pb.core.activityMonitor.addTask(new pb_core_Task('add_action','Adding Action'));
		
		pb.core.actions.executeAndPutResultIntoContainer(pb.core.system.getLibraryPath() + this.actionFile,'addAction',{ actionsId: actionsId,fieldId: fieldId, editorId: containerId, templateId: templateId,eventName: eventName, siteId: siteId },containerId,true,false,'add_action');

	},
	
	remove: function(fieldId,actionsId,actionId,templateId,containerId,siteId){
		pb.core.activityMonitor.addTask(new pb_core_Task('remove_action','Remove Action'));
		
		pb.core.actions.executeAndPutResultIntoContainer(pb.core.system.getLibraryPath() + this.actionFile,'removeAction',{ actionsId: actionsId,fieldId: fieldId, editorId: containerId, templateId: templateId,actionId: actionId, siteId: siteId },containerId,true,false,'remove_action');
	},
	
	changeActionType: function(actionId,templateId,newType){
		var containerId = 'action_' + actionId + '_actionParameters';

		pb.core.activityMonitor.addTask(new pb_core_Task('load_action_parameters','Changing Action Type'));
		
		pb.core.actions.executeAndPutResultIntoContainer(pb.core.system.getLibraryPath() + this.actionFile,'changeActionType',{ siteId: system.getSiteId(),actionId: actionId, actionType: newType, templateId: templateId },containerId,true,false,'load_action_parameters');
	},
	
 	saveActionParameters: function(actionId,formId) {
		
		var params = Form.serializeElements($(formId).select('input,textarea,select'),true);
		
		params.actionId = actionId;
		
		pb.core.actions.execute(system.getLibraryPath() + this.actionFile,'saveActionParameters',params);
	},
	
	saveActionsOrder: function(id,sortable){		
		var event = sortable.id.substring(15);
		
		//pb.core.console.log(event);
		
		this.performSaveActionsOrder(event,id);
	},
	
	performSaveActionsOrder: function(event,id){

		var actionIds = new Array();		
		$$('#itemActionList_' + event + ' .itemActionField').each(function(item,index){			
			actionIds.push(item.id.substring(16));
		},this);
		
		actionIds = actionIds.join(',');
		
		pb.core.actions.execute(system.getLibraryPath() + this.actionFile,'saveActionsOrder',{ id:id,actionIds: actionIds,event: event });
	}
	
}); // pb_core_ItemActionsEditor

var itemActionsEditor = new pb_core_ItemActionsEditor();