var EditableCSS = Class.create({
	actionFile: 'plasticbriqFramework/actions/_css_actions.php',
	fieldId: null,
	cssId: null,
	formId: null,
	undoManager: null,

	initialize: function(fieldId,cssId) {
		this.fieldId = fieldId;
		this.cssId = cssId;
		
		document.observe('ws:css_changed',function(event){ if ((event.memo.fieldId==fieldId)||(event.memo.cssId==cssId)){ editableCSSManager.editable(cssId).saveCss(); } });
	},
	
	setUndoManager: function(undoManager){
		this.undoManager = undoManager;
	},
	
	getUndoManager: function(){
		return this.undoManager;
	},
	
	saveCss: function(){
	
		parameters = this.serialize(this.fieldId);
		parameters.id = this.cssId;
		parameters.command = 'saveCss';
		parameters.style = system.getCurrentStyle();
		
		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.');
				}
			}
		});	
	},
	
	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('color',callback,undoCallback));
		}
		else {
			this.performAdjustToContent(value);
		}
	},
	
	performAdjustToContent: function(){
		$(this.fieldId).style.width = '';
		$(this.fieldId).style.height = '';
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.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);
			this.undoManager.pushCommand(new CallbackCommand('color',callback,undoCallback));
		}
		else {
			this.performSetColor(value);
		}
	},
	
	performSetColor: function(value){
		$(this.fieldId).style.color = value;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,color: value });
	},
	
	getColor: function(){
		return this.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',{ cssId: this.cssId,fieldId: this.fieldId,fontFamily: value });
	},
	
	getFontFamily: function(){
		return 	$(this.fieldId).style.fontFamily;
	},
	
	
	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',{ 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';
			}
		}
		
		$(this.fieldId).style.textAlign = value;
		document.fire('ws:css_changed',{ 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',{ 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',{ cssId: this.cssId,fieldId: this.fieldId,lineHeight: value });
	},
	
	getLineHeight: function(){
		return 	$(this.fieldId).style.lineHeight;
	},
	
	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',{ 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',{ cssId: this.cssId,fieldId: this.fieldId,fontStyle: value })
	},
	
	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',{ cssId: this.cssId,fieldId: this.fieldId,fontWeight: value })
	},
	
	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);
			this.undoManager.pushCommand(new CallbackCommand('backgroundcolor',callback,undoCallback));
		}
		else {
			this.performSetBackgroundColor(value);
		}
	},
	
	performSetBackgroundColor : function(value){
		$(this.fieldId).style.backgroundColor = value;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,backgroundColor: value });
	},
	
	getBackgroundColor: function(){
		return this.rgbConvert($(this.fieldId).style.backgroundColor);
	},
	
	setBackgroundImage : function(value,imageId){
		value = 'url(' + value + ')';
		if (this.undoManager){
			var oldBackgroundImage = $(this.fieldId).style.backgroundImage;
			var oldBackgroundImageId = $(this.fieldId).style.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).style.backgroundImageId = imageId;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,backgroundImage: value,backgroundImageId: imageId });
	},
	
	getBackgroundImage: function(){
		return 	$(this.fieldId).style.backgroundImage;
	},
	
	getBackgroundImageId: function(){
		return 	$(this.fieldId).style.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',{ 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',{ cssId: this.cssId,fieldId: this.fieldId,backgroundPosition: value });
	},
	
	getBackgroundPosition: function(){
		return 	$(this.fieldId).style.backgroundPosition;
	},
	
	performSetBackgroundPositionX : function(value){
		
		if ($(this.fieldId).style.backgroundPosition==""){
			$(this.fieldId).style.backgroundPosition = value;
		}
		else {
			var positions = $(this.fieldId).style.backgroundPosition.split(" ");
			$(this.fieldId).style.backgroundPosition = value + 'pt ' + positions[1];
		}		

		document.fire('ws:css_changed',{ 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.fieldId).style.backgroundPosition==""){
			$(this.fieldId).style.backgroundPosition = "0pt " + value + 'pt';
		}
		else {
			var positions = $(this.fieldId).style.backgroundPosition.split(" ");
			$(this.fieldId).style.backgroundPosition = positions[0] + ' ' + value + 'pt';
		}
		
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,backgroundPositionY: value });
	},
	
	getBackgroundPositionY: function(){
		var positions = $(this.fieldId).style.backgroundPosition.split(" ");
		return 	positions[1];
	},

	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',{ 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){
		$(this.fieldId).style.position = value;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,position: value });
	},
	
	getPosition: function(){
		return 	$(this.fieldId).style.position;
	},	
	
	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;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,display: value });
	},
	
	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',{ 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',{ 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',{ 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',{ 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',{ 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){
		$(this.fieldId).style.top = value;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,top: value });
	},
	
	getTop: function(){
		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',{ cssId: this.cssId,fieldId: this.fieldId,bottom: value });
	},
	
	getBottom: function(){
		return 	$(this.fieldId).style.bottom;
	},
	

	setMaxWidth : function(value){
		$(this.fieldId).style.maxWidth = value;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,maxWidth: value });
	},
	
	getMaxWidth: function(){
		return 	$(this.fieldId).style.maxWidth;
	},

	setMaxHeight : function(value){
		$(this.fieldId).style.maxHeight = value;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,maxHeight: value });
	},
	
	getMaxHeight: function(){
		return 	$(this.fieldId).style.maxHeight;
	},

	setMinWidth : function(value){
		$(this.fieldId).style.minWidth = value;
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,minWidth: value });
	},
	
	getMinWidth: function(){
		return 	$(this.fieldId).style.minWidth;
	},

	setMinHeight : function(value){
		$(this.fieldId).style.minHeight = value;
		document.fire('ws:css_changed',{ 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',{ cssId: this.cssId,fieldId: this.fieldId,overflow: value });
	},
	
	getOverflow: function(){
		return 	$(this.fieldId).style.overflow;
	},
	
	
	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',{ cssId: this.cssId,fieldId: this.fieldId,zIndex: value });
	},
	
	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',{ 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).offsetWidth;
			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;

		if (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;
				
		value = this.appendPixels(value);
		if (!originalValue || (originalValue=="")){
			value = "";
			$(this.fieldId).style.width = 'auto';
		}
		else {
			$(this.fieldId).style.width = value;
		}
		
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,width: value });
	},
	
	getWidth: function(){
		return 	$(this.fieldId).offsetWidth;
	},

	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){
		
		originalValue = value;
		
		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;
		value = this.appendPixels(value);
		
		if (!originalValue || (originalValue=="")){
			value = "";
			$(this.fieldId).style.height = 'auto';
		}
		else {
			$(this.fieldId).style.height = value;
		}
		
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,height: value });
	},
	
	performSetSize: function(width,height){
		this.performSetWidth(width);
		this.performSetHeight(height);
	},
	
	getHeight: function(){
		return 	$(this.fieldId).offsetHeight;
	},
	
	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',{ 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',{ 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',{ 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',{ 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',{ cssId: cssId,fieldId: fieldId }); };
			this.undoManager.pushCommand(new CallbackCommand('paddingLeft',callback,undoCallback));
		}
		else {
			this.performSetPaddingLeft(value);
		}
	},

	performSetPaddingLeft : function(value){
		var field = $(this.fieldId);
		
		value = parseInt(value);
		if (isNaN(value)){
			value = 0;
		}
		
		//if (field.style.width){
			var totalWidth = parseInt(field.offsetWidth);
			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;
			}

			//var totalWidth = oldWidth + paddingLeft + paddingRight;
			var newWidth = totalWidth - value - paddingRight;
			if (newWidth) {
				field.style.width = newWidth + 'px';
			}			
		//}
		
		field.style.paddingLeft = parseInt(value) + 'px';
		document.fire('ws:css_changed',{ 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',{ cssId: cssId,fieldId: fieldId }); };
			this.undoManager.pushCommand(new CallbackCommand('paddingRight',callback,undoCallback));
		}
		else {
			this.performSetPaddingRight(value);
		}
	},

	performSetPaddingRight : function(value){
		var field = $(this.fieldId);
		
		value = parseInt(value);
		if (isNaN(value)){
			value = 0;
		}
		
		//if (field.style.width){
			var totalWidth = parseInt(field.offsetWidth);
			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;
			}

			//var totalWidth = oldWidth + paddingLeft + paddingRight;
			var newWidth = totalWidth - value - paddingLeft;
			if (newWidth) {
				field.style.width = newWidth + 'px';
			}			
		//}
		
		field.style.paddingRight = parseInt(value) + 'px';
		document.fire('ws:css_changed',{ 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',{ cssId: cssId,fieldId: fieldId }); };
			this.undoManager.pushCommand(new CallbackCommand('paddingTop',callback,undoCallback));
		}
		else {
			this.performSetPaddingTop(value);
		}
	},

	performSetPaddingTop : function(value){
		var field = $(this.fieldId);
		
		value = parseInt(value);
		if (isNaN(value)){
			value = 0;
		}
		
		//if (field.style.width){
			var totalHeight = parseInt(field.offsetHeight);
			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;
			}

			//var totalWidth = oldWidth + paddingLeft + paddingRight;
			var newHeight = totalHeight - value - paddingBottom;
			if (newHeight) {
				field.style.height = newHeight + 'px';
			}			
		//}
		
		field.style.paddingTop = parseInt(value) + 'px';
		document.fire('ws:css_changed',{ 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',{ cssId: cssId,fieldId: fieldId }); };
			this.undoManager.pushCommand(new CallbackCommand('paddingBottom',callback,undoCallback));
		}
		else {
			this.performSetPaddingBottom(value);
		}
	},

	performSetPaddingBottom : function(value){
		var field = $(this.fieldId);
		
		value = parseInt(value);
		if (isNaN(value)){
			value = 0;
		}
		
		//if (field.style.width){
			var totalHeight = parseInt(field.offsetHeight);
			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;
			}

			//var totalWidth = oldWidth + paddingLeft + paddingRight;
			var newHeight = totalHeight - value - paddingTop;
			if (newHeight) {
				field.style.height = newHeight + 'px';
			}			
		//}
		
		field.style.paddingBottom = parseInt(value) + 'px';
		document.fire('ws:css_changed',{ cssId: this.cssId,fieldId: this.fieldId,paddingBottom: value });
	},
	
	getPaddingBottom: function(){
		return 	$(this.fieldId).style.paddingBottom;
	},
	
	setBorderLeftColor : function(value){
		if (this.undoManager){
			var oldValue = this.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',{ cssId: this.cssId,fieldId: this.fieldId,borderLeftColor: value });
	},
	
	getBorderLeftColor: function(){
		return 	this.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',{ 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',{ cssId: this.cssId,fieldId: this.fieldId,borderLeftWidth: value });
	},
	
	getBorderLeftWidth: function(){
		return 	parseInt($(this.fieldId).style.borderLeftWidth);
	},
	
	setBorderRightColor : function(value){
		if (this.undoManager){
			var oldValue = this.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',{ cssId: this.cssId,fieldId: this.fieldId,borderRightColor: value });
	},
	
	getBorderRightColor: function(){
		return 	this.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',{ 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',{ cssId: this.cssId,fieldId: this.fieldId,borderRightWidth: value });
	},
	
	getBorderRightWidth: function(){
		return 	parseInt($(this.fieldId).style.borderRightWidth);
	},
	
	setBorderTopColor : function(value){
		if (this.undoManager){
			var oldValue = this.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',{ cssId: this.cssId,fieldId: this.fieldId,borderTopColor: value });
	},
	
	getBorderTopColor: function(){
		return 	this.rgbConvert($(this.fieldId).style.borderTopColor);
	},
	
	setBorderTopStyle : function(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',{ cssId: this.cssId,fieldId: this.fieldId,borderTopStyle: value });
	},
	
	getBorderTopStyle: function(){
		return 	$(this.fieldId).style.borderTopStyle;
	},
	
	setBorderTopWidth : function(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',{ cssId: this.cssId,fieldId: this.fieldId,borderTopWidth: value });
	},
	
	getBorderTopWidth: function(){
		return parseInt($(this.fieldId).style.borderTopWidth);
	},
	
	setBorderBottomColor : function(value){
		if (this.undoManager){
			var oldValue = this.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',{ cssId: this.cssId,fieldId: this.fieldId,borderBottomColor: value });
	},
	
	getBorderBottomColor: function(){
		return 	this.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',{ 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',{ cssId: this.cssId,fieldId: this.fieldId,borderBottomWidth: value });
	},
	
	getBorderBottomWidth: function(){
		return 	parseInt($(this.fieldId).style.borderBottomWidth);
	},
	
	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(){
		
		var node = $(this.fieldId);
		var nodeStyle = node.style;
		
		var parameters = new Object();
		
		//parameters['leftPos'] = nodeStyle.offset
		
		// Text
		if (nodeStyle.color){
			parameters['color'] =  this.rgbConvert(nodeStyle.color);
		}

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

		if (nodeStyle.fontVariant){
			parameters['fontVariant'] = nodeStyle.fontVariant;
		}
		
		if (nodeStyle.fontStyle){
			parameters['fontStyle'] = nodeStyle.fontStyle;
		}
		
		if (nodeStyle.fontWeight){
			parameters['fontWeight'] = nodeStyle.fontWeight;
		}
		
		if (nodeStyle.fontVariant){
			parameters['fontVariant'] = nodeStyle.fontVariant;
		}		
				
		// Fondo
		if (nodeStyle.backgroundColor){
			parameters['backgroundColor'] = this.rgbConvert(nodeStyle.backgroundColor);
		}
		
		if (nodeStyle.backgroundImage){
			parameters['backgroundImage'] = nodeStyle.backgroundImage;
		}
		
		if (nodeStyle.backgroundImageId){
			parameters['backgroundImageId'] = nodeStyle.backgroundImageId;
		}
		
		if (nodeStyle.backgroundAttachment){
			parameters['backgroundAttachment'] = nodeStyle.backgroundAttachment;
		}
		
		if (nodeStyle.backgroundPosition){
			var positions = $(this.fieldId).style.backgroundPosition.split(" ");
			parameters['backgroundPositionX'] = positions[0];
			parameters['backgroundPositionY'] = positions[1];
		}
		
		if (nodeStyle.backgroundRepeat){
			parameters['backgroundRepeat'] = nodeStyle.backgroundRepeat;
		}
		
		
		// Posición
		//if (nodeStyle.position){
			parameters['position'] = nodeStyle.position;
		//}
		
		//if (nodeStyle.display){
			parameters['display'] = nodeStyle.display;
		//}
		
		//if (nodeStyle.styleFloat){
			parameters['styleFloat'] = nodeStyle.styleFloat;
	//	}
		
	//	if (nodeStyle.cssFloat){
			parameters['cssFloat'] = nodeStyle.cssFloat;
	//	}
		
	//	if (nodeStyle.clear){
			parameters['clear'] = nodeStyle.clear;
	//	}
		
	//	if (nodeStyle.left){
			parameters['leftPos'] = nodeStyle.left;
	//	}
		
	//	if (nodeStyle.right){
			parameters['rightPos'] = nodeStyle.right;
	//	}
		
	//	if (nodeStyle.top){
			parameters['topPos'] = nodeStyle.top;
	//	}
		
	//	if (nodeStyle.bottom){
			parameters['bottomPos'] = nodeStyle.bottom;
	//	}
		
	//	if (nodeStyle.maxWidth){
			parameters['maxWidth'] = nodeStyle.maxWidth;
	//	}
		
	//	if (nodeStyle.maxHeight){
			parameters['maxHeight'] = nodeStyle.maxHeight;
	//	}
		
	//	if (nodeStyle.minWidth){
			parameters['minWidth'] = nodeStyle.minWidth;
	//	}
		
	//	if (nodeStyle.minHeight){
			parameters['minHeight'] = nodeStyle.minHeight;
	//	}
		

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

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

EditableCSS.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(""));
};

var CSSEditor = Class.create({

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

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

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

		if (formField.textAlign){
			Event.observe($(formId).textAlign,'ws:change',function(){ editableCSSManager.editable(cssId).setTextAlign($(formId).textAlign.value); });
		}
		
		if (formField.fontFamily){
			Event.observe($(formId).fontFamily,'change',function(){ editableCSSManager.editable(cssId).setFontFamily($(formId).fontFamily.options[$(formId).fontFamily.selectedIndex].value); });
		}
		
		if (formField.fontWeight){		
			Event.observe($(formId).fontWeight,'ws:change',function(){ editableCSSManager.editable(cssId).setFontWeight($(formId).fontWeight.value); });
		}
		
		if (formField.fontStyle){
			Event.observe($(formId).fontStyle,'ws:change',function(){ editableCSSManager.editable(cssId).setFontStyle($(formId).fontStyle.value); });
		}
		
		if (formField.textDecoration){
			Event.observe($(formId).textDecoration,'ws:change',function(){ editableCSSManager.editable(cssId).setTextDecoration($(formId).textDecoration.value); });
		}

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

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

		if (formField.height){
			Event.observe($(formId).height,'change',function(){ editableCSSManager.editable(cssId).setHeight($(formId).height.value); });
		}

		if (formField.leftPos){
			Event.observe($(formId).leftPos,'change',function(){ formUtils.cssMeasureChecker($(formId).leftPos,true); editableCSSManager.editable(cssId).setLeft($(formId).leftPos.value); });
		}
		
		if (formField.topPos){
			Event.observe($(formId).topPos,'change',function(){ formUtils.cssMeasureChecker($(formId).topPos,true); editableCSSManager.editable(cssId).setTop($(formId).topPos.value); });
		}
		
		if (formField.overflow){
			Event.observe($(formId).overflow,'change',function(){ editableCSSManager.editable(cssId).setOverflow($(formId).overflow.options[$(formId).overflow.selectedIndex].value); });
		}
		
		if (formField.paddingLeft){
			Event.observe($(formId).paddingLeft,'change',function(){ editableCSSManager.editable(cssId).setPaddingLeft($(formId).paddingLeft.value); });
		}
		
		if (formField.paddingRight){
			Event.observe($(formId).paddingRight,'change',function(){ editableCSSManager.editable(cssId).setPaddingRight($(formId).paddingRight.value); });
		}
		
		if (formField.paddingTop){
			Event.observe($(formId).paddingTop,'change',function(){ editableCSSManager.editable(cssId).setPaddingTop($(formId).paddingTop.value); });
		}
		
		if (formField.paddingBottom){
			Event.observe($(formId).paddingBottom,'change',function(){ editableCSSManager.editable(cssId).setPaddingBottom($(formId).paddingBottom.value); });
		}
		
		if (formField.backgroundColor){
			Event.observe($(formId).backgroundColor,'change',function(){ if ($(formId)) { editableCSSManager.editable(cssId).setBackgroundColor($(formId).backgroundColor.value); } });
		}
		
		if (formField.backgroundImage){
			Event.observe($(formId).backgroundImage,'ws:change',function(){ 			
				new Ajax.Request(system.getLibraryPath() + "plasticbriqFramework/actions/_image_picker_actions.php",{
					method:'post',
					parameters:{ command: 'getImageUrl',imageId:$(formId).backgroundImage.value,style: system.getCurrentStyle() },
					onSuccess: function(transport) {
						editableCSSManager.editable(cssId).setBackgroundImage(transport.responseText,$(formId).backgroundImage.value);
						//editableCSSManager.editable(cssId).setBackgroundImageId($(formId).backgroundImage.value);
					}
				});		
			});
		}
			
		if (formField.backgroundPositionX){
			Event.observe($(formId).backgroundPositionX,'change',function(){ editableCSSManager.editable(cssId).setBackgroundPositionX($(formId).backgroundPositionX.value); });
		}
		
		if (formField.backgroundPositionY){
			Event.observe($(formId).backgroundPositionY,'change',function(){ editableCSSManager.editable(cssId).setBackgroundPositionY($(formId).backgroundPositionY.value); });
		}
		
		if (formField.backgroundRepeat){
			Event.observe($(formId).backgroundRepeat,'change',function(){ editableCSSManager.editable(cssId).setBackgroundRepeat($(formId).backgroundRepeat.options[$(formId).backgroundRepeat.selectedIndex].value); });
		}
		
		if (formField.leftBorderColor){
			Event.observe($(formId).leftBorderColor,'change',function(){ editableCSSManager.editable(cssId).setBorderLeftColor($(formId).leftBorderColor.value); });
		}
		
		if (formField.leftBorderStyle){
			Event.observe($(formId).leftBorderStyle,'change',function(){ editableCSSManager.editable(cssId).setBorderLeftStyle($(formId).leftBorderStyle.options[$(formId).leftBorderStyle.selectedIndex].value); });
		}
		
		if (formField.leftBorderWidth){
			Event.observe($(formId).leftBorderWidth,'change',function(){ editableCSSManager.editable(cssId).setBorderLeftWidth($(formId).leftBorderWidth.value); });
		}

		if (formField.rightBorderColor){
			Event.observe($(formId).rightBorderColor,'change',function(){ editableCSSManager.editable(cssId).setBorderRightColor($(formId).rightBorderColor.value); });
		}
		
		if (formField.rightBorderStyle){
			Event.observe($(formId).rightBorderStyle,'change',function(){ editableCSSManager.editable(cssId).setBorderRightStyle($(formId).rightBorderStyle.options[$(formId).rightBorderStyle.selectedIndex].value); });
		}
		
		if (formField.rightBorderWidth){
			Event.observe($(formId).rightBorderWidth,'change',function(){ editableCSSManager.editable(cssId).setBorderRightWidth($(formId).rightBorderWidth.value); });
		}
		
		if (formField.topBorderColor){
			Event.observe($(formId).topBorderColor,'change',function(){ editableCSSManager.editable(cssId).setBorderTopColor($(formId).topBorderColor.value); });
		}
		
		if (formField.topBorderStyle){
			Event.observe($(formId).topBorderStyle,'change',function(){ editableCSSManager.editable(cssId).setBorderTopStyle($(formId).topBorderStyle.options[$(formId).topBorderStyle.selectedIndex].value); });
		}
		
		if (formField.topBorderWidth){
			Event.observe($(formId).topBorderWidth,'change',function(){ editableCSSManager.editable(cssId).setBorderTopWidth($(formId).topBorderWidth.value); });
		}
		
		if (formField.bottomBorderColor){
			Event.observe($(formId).bottomBorderColor,'change',function(){ editableCSSManager.editable(cssId).setBorderBottomColor($(formId).bottomBorderColor.value); });
		}
		
		if (formField.bottomBorderStyle){
			Event.observe($(formId).bottomBorderStyle,'change',function(){ editableCSSManager.editable(cssId).setBorderBottomStyle($(formId).bottomBorderStyle.options[$(formId).bottomBorderStyle.selectedIndex].value); });
		}
		
		if (formField.bottomBorderWidth){
			Event.observe($(formId).bottomBorderWidth,'change',function(){ editableCSSManager.editable(cssId).setBorderBottomWidth($(formId).bottomBorderWidth.value); });
		}
		
		
		Event.observe(document,'ws:css_changed',function (event){ if (cssEditorManager.cssEditor(event.memo.cssId)) { cssEditorManager.cssEditor(event.memo.cssId).updateEditor(event);} });
	},
	
	
	updateEditor: function(event){
		
		var form = $(this.formId);
		
		if (!form) return;
		
		var value = editableCSSManager.editable(this.editable.cssId).getColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}

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

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

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


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

		value = editableCSSManager.editable(this.editable.cssId).getTextDecoration();
		if (value){
			if (form.textDecoration) form.textDecoration.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getLineHeight();
		if (value){
			if (form.lineHeight) form.lineHeight.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getWidth();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.width) form.width.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getHeight();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.height) form.height.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getLeft();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.leftPos) form.leftPos.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getTop();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.topPos) form.topPos.value = value;
		}

		value = editableCSSManager.editable(this.editable.cssId).getOverflow();
		if (value){
			if (form.overflow) form.overflow.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getPaddingLeft();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.paddingLeft) form.paddingLeft.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getPaddingRight();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.paddingRight) form.paddingRight.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getPaddingTop();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.paddingTop) form.paddingTop.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getPaddingBottom();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.paddingBottom) form.paddingBottom.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBackgroundColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.backgroundColor) form.backgroundColor.color.fromString(value);
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBackgroundImage();
		if (value){
			if (form.backgroundImage) form.backgroundImage.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBackgroundPositionX();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.backgroundPositionX) form.backgroundPositionX.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBackgroundPositionY();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.backgroundPositionY) form.backgroundPositionY.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBackgroundRepeat();
		if (value){
			if (form.backgroundRepeat) form.backgroundRepeat.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBorderLeftColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.leftBorderColor) form.leftBorderColor.color.fromString(value);
		}		
		value = editableCSSManager.editable(this.editable.cssId).getBorderLeftStyle();
		if (value){
			if (form.leftBorderStyle) form.leftBorderStyle.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBorderLeftWidth();
		if (value){
			if (form.leftBorderWidth) form.leftBorderWidth.value = value;
		}

		value = editableCSSManager.editable(this.editable.cssId).getBorderRightColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.rightBorderColor) form.rightBorderColor.color.fromString(value);
		}		
		value = editableCSSManager.editable(this.editable.cssId).getBorderRightStyle();
		if (value){
			if (form.rightBorderStyle) form.rightBorderStyle.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBorderRightWidth();
		if (value){
			if (form.rightBorderWidth) form.rightBorderWidth.value = value;
		}

		value = editableCSSManager.editable(this.editable.cssId).getBorderTopColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.topBorderColor) form.topBorderColor.color.fromString(value);
		}		
		value = editableCSSManager.editable(this.editable.cssId).getBorderTopStyle();
		if (value){
			if (form.topBorderStyle) form.topBorderStyle.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBorderTopWidth();
		if (value){
			if (form.topBorderWidth) form.topBorderWidth.value = value;
		}

		value = editableCSSManager.editable(this.editable.cssId).getBorderBottomColor();
		if (value){
			if (value[0]=='#'){
				value = value.substr(1);
			}
			
			if (form.bottomBorderColor) form.bottomBorderColor.color.fromString(value);
		}
				
		value = editableCSSManager.editable(this.editable.cssId).getBorderBottomStyle();
		if (value){
			if (form.bottomBorderStyle) form.bottomBorderStyle.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getBorderBottomWidth();
		if (value){
			if (form.bottomBorderWidth) form.bottomBorderWidth.value = value;
		}

		
	}
	
});

var EditableCSSManager = new Class.create({
	
	editables: new Object(),
	
	initialize: function(){
	},
	
	addEditable: function(fieldId,cssId){
		this.removeEditable(cssId);
		this.editables[cssId] = new EditableCSS(fieldId,cssId);
	},
	
	editable: function(id){
		return this.editables[id];
	},
	
	removeEditable: function(id){
		if (this.editables[id]){
			delete this.editables[id];			
		}
		this.editables[id] = null;	
	}	
});

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]){
			delete this.cssEditors[id];			
		}
		this.cssEditors[id] = null;	
	}	
});

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.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.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 = this.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.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.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;
			
		}
	}
});


var CSSInternalStyle = new Class.create({
	id: null,
	fieldId: null,
	cssRule: null,
	
	observeMethod: null,
	
	initialize: function(id,fieldId,cssRule){
		this.id = id;
		this.fieldId = fieldId;
		this.cssRule = cssRule;
		var obj = this;
		var callInsert = this.insert.bind(this);
		this.observeMethod = function (event) { 
			if (event.memo.fieldId==obj.fieldId){ 
				callInsert();
			}
		};
		
		document.observe('ws:css_changed',this.observeMethod);
		
		callInsert();
	},
	
	finish: function(){
		document.stopObserving('ws:css_changed',this.observeMethod);
	},
	
	insert: function(){

		var styleNode = $(this.id);
		if (!styleNode){
			
			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);
			}
		}
		
		//newStyle.addRule(this.cssRule, this.serialize());
		if (system.Browser.IE){
			styleNode.cssText = this.cssRule + "{\n " + this.serialize() + " \n}";
		}
		else if (system.Browser.Safari){
			styleNode.innerText = this.cssRule + "{\n " + this.serialize() + " \n}";
		}
		else {
			styleNode.update(this.cssRule + "{\n " + this.serialize() + " \n}");			
		}

	},
	
	serialize: function(){
		
		var node = $(this.fieldId);
		
		if (!node) return;
		
		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.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.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: " + $(this.fieldId).style.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.zIndex){
				rawStyle = rawStyle + "z-index: " + nodeStyle.zIndex + ";";
		}
		
		if (nodeStyle.verticalAlign){
				rawStyle = rawStyle +  "vertical-align: " + nodeStyle.verticalAlign + ";";
		}
		

	// Dimensiones
	if (nodeStyle.width){
		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;		
		
	}
	
});