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

	initialize: function(fieldId,cssId,cssRule) {
		this.fieldId = fieldId;
		this.cssId = cssId;
		
		if (cssRule){
			this.cssRule = cssRule;
		}
		
		this.observeMethod = function(event){ 
			if ((event.memo.fieldId==fieldId)||(event.memo.cssId==cssId)){ 
				editableCSSManager.editable(cssId).saveCss(); 
			} 
		};
		
		document.observe('ws:css_changed',this.observeMethod);
	},
	
	finish: function(){
		document.stopObserving('ws:css_changed',this.observeMethod);
	},
	
	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('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);
			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',{ 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 });
	},
	
	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){
		$(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 });
	},
	
	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 });
	},
	
	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 });
	},
	
	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',{ 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 + ')';
		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',{ sender: this,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',{ 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(){
		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',{ 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.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',{ sender: this,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',{ 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){	
		if (value=='absolute') {
			var parentOffset = $(this.fieldId).parentNode.cumulativeOffset();
			var parentScrollOffset = $(this.fieldId).parentNode.cumulativeScrollOffset();
			var offset = $(this.fieldId).cumulativeOffset();
			var scrollOffset = $(this.fieldId).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';
			
			$(this.fieldId).style.position = 'absolute';
			$(this.fieldId).style.left = left;
			$(this.fieldId).style.top = top;
			//console.log('making absolute');
			$(this.fieldId).setAttribute('anchorLeft','');
			$(this.fieldId).setAttribute('anchorTop','');
			//$(this.fieldId).absolutize();
		}	
		else if (value=='fixed') {
			//console.log('setting position to fixed');
			var offset = $(this.fieldId).cumulativeOffset();
			var scrollOffset = $(this.fieldId).cumulativeScrollOffset();
			//console.log(offset);
			$(this.fieldId).style.left = (offset[0] + scrollOffset[0]) + 'px';
			$(this.fieldId).style.top = (offset[1] + scrollOffset[1]) + 'px';
			$(this.fieldId).style.position = value;
		}
		else {
			$(this.fieldId).style.position = value;	
			$(this.fieldId).setAttribute('anchorLeft','');
			$(this.fieldId).setAttribute('anchorTop','');
		}

		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,position: value });
	},
	
	getPosition: function(){
		return 	$(this.fieldId).style.position;
	},
	
	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);
		//console.log('anchor left ' + $(this.fieldId).getAttribute('anchorLeft'));
		if (value=='left'){
			// if ($(this.fieldId).style.position=='fixed'){
				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';
					//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';
					//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 });
	},
	
	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);
		//console.log('anchor top ' + $(this.fieldId).getAttribute('anchorTop'));
		if (value=='top'){
			// if ($(this.fieldId).style.position=='fixed'){
				var bottomPos = parseInt($(this.fieldId).style.bottom);
				if (bottomPos){
					var topPos = (pb.core.browserWindow.getHeight() - bottomPos - $(this.fieldId).offsetHeight) + 'px';
					//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'){
				var topPos = $(this.fieldId).offsetTop;
				if (topPos){
					var bottomPos = (pb.core.browserWindow.getHeight() - topPos - $(this.fieldId).offsetHeight) + 'px';
					//console.log('setAnchorbottom pos ' + bottomPos);
					$(this.fieldId).style.top = '';
					this.performSetBottom(bottomPos);
				}					
			// }			
		}
		else if (value=='center'){
			$(this.fieldId).style.top = '50%';
			$(this.fieldId).style.bottom = '';
			$(this.fieldId).style.marginTop = parseInt(-pb.core.cssUtils.getHeight($(this.fieldId))/2) + 'px';
		}
		else {
			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 });
	},
	
	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';
		}
		else {
			$(this.fieldId).style.display = 'none';
		}
		
		document.fire('ws:css_changed',{ sender: this,cssId: this.cssId,fieldId: this.fieldId });
	},
	
	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',{ sender: this,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',{ 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){
		$(this.fieldId).style.top = value;
		document.fire('ws:css_changed',{ sender: this,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',{ sender: this,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',{ sender: this,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',{ sender: this,cssId: this.cssId,fieldId: this.fieldId,maxHeight: value });
	},
	
	getMaxHeight: function(){
		return 	$(this.fieldId).style.maxHeight;
	},

	setMinWidth : 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){
		$(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';
		}
		$(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 });
	},
	
	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).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 (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;
				
		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;
		
		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;
	},
	
	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){
		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){
		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);
	},
	
	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'] =  EditableCSS.RGBConvert(nodeStyle.color);
		}

		if (nodeStyle.fontFamily){
			parameters['fontFamily'] = nodeStyle.fontFamily;
		}
		
		if (nodeStyle.textIndent) {
			parameters['textIndent'] = nodeStyle.textIndent;
		}
		
		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.letterSpacing){
			parameters['letterSpacing'] = nodeStyle.letterSpacing;
		}

		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'] = EditableCSS.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;
			
			parameters['cursor'] = nodeStyle.cursor;
	//	}
		
	//	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'] = EditableCSS.RGBConvert(nodeStyle.borderLeftColor);
	//	}
		
	//	if (nodeStyle.borderLeftStyle){
			parameters['borderLeftStyle'] = nodeStyle.borderLeftStyle;
	//	}
		
	//	if (nodeStyle.borderLeftWidth){
			parameters['borderLeftWidth'] = nodeStyle.borderLeftWidth;
	//	}
		
	//	if (nodeStyle.borderRightColor){
			parameters['borderRightColor'] = EditableCSS.RGBConvert(nodeStyle.borderRightColor);
	//	}
		
	//	if (nodeStyle.borderRightStyle){
			parameters['borderRightStyle'] = nodeStyle.borderRightStyle;
	//	}
		
	//	if (nodeStyle.borderRightWidth){
			parameters['borderRightWidth'] = nodeStyle.borderRightWidth;
	//	}
		
	//	if (nodeStyle.borderTopColor){
			parameters['borderTopColor'] = EditableCSS.RGBConvert(nodeStyle.borderTopColor);
	//	}
		 
	//	if (nodeStyle.borderTopStyle){
			parameters['borderTopStyle'] = nodeStyle.borderTopStyle;
	//	}
		
	//	if (nodeStyle.borderTopWidth){
			parameters['borderTopWidth'] = nodeStyle.borderTopWidth;
	//	}
		
	//	if (nodeStyle.borderBottomColor){
			parameters['borderBottomColor'] = EditableCSS.RGBConvert(nodeStyle.borderBottomColor);
	//	}
		
	//	if (nodeStyle.borderBottomStyle){
			parameters['borderBottomStyle'] = nodeStyle.borderBottomStyle;
	//	}
		
	//	if (nodeStyle.borderBottomWidth){
			parameters['borderBottomWidth'] = nodeStyle.borderBottomWidth;
	//	}

		parameters['anchorLeft'] = node.getAttribute('anchorLeft');
		parameters['anchorTop'] = node.getAttribute('anchorTop');
	
		
		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($(formId).adjust,'click',function(){ editableCSSManager.editable(cssId).adjustToContent(); });			
		}
		
		if (formField.adjustToImage){
			Event.observe($(formId).adjustToImage,'click',function(){ editableCSSManager.editable(cssId).adjustToImage(); });
		}

		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.textIndent) {
			Event.observe($(formId).textIndent,'change',function(){ editableCSSManager.editable(cssId).setTextIndent($(formId).textIndent.options[$(formId).textIndent.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.letterSpacing){
			Event.observe($(formId).letterSpacing,'change',function(){ editableCSSManager.editable(cssId).setLetterSpacing($(formId).letterSpacing.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.minWidth){		
			Event.observe($(formId).minWidth,'change',function(){ editableCSSManager.editable(cssId).setMinWidth($(formId).minWidth.value); });
		}

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

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

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

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

		
		if (formField.position){
			Event.observe($(formId).position,'change',function(){
				if ($(formId).position.options[$(formId).position.selectedIndex].value=='fixed'){
					$(formId + '_AnchorOptions').show();
				}
				else {
					$(formId + '_AnchorOptions').hide();					
				}
				
				editableCSSManager.editable(cssId).setPosition($(formId).position.options[$(formId).position.selectedIndex].value); 
			});
		}
		
		if (formField.anchorLeft){
			Event.observe($(formId).anchorLeft,'change',function(){
				var value = $(formId).anchorLeft.options[$(formId).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($(formId).anchorTop,'change',function(){
				var value = $(formId).anchorTop.options[$(formId).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($(formId).anchorTop.options[$(formId).anchorTop.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.marginLeft){
			Event.observe($(formId).marginLeft,'change',function(){ formUtils.cssMeasureChecker($(formId).marginLeft,true);  editableCSSManager.editable(cssId).setMarginLeft($(formId).marginLeft.value); });
		}
		
		if (formField.marginRight){
			Event.observe($(formId).marginRight,'change',function(){ formUtils.cssMeasureChecker($(formId).marginRight,true);  editableCSSManager.editable(cssId).setMarginRight($(formId).marginRight.value); });
		}
		
		if (formField.marginTop){
			Event.observe($(formId).marginTop,'change',function(){ formUtils.cssMeasureChecker($(formId).marginTop,true); editableCSSManager.editable(cssId).setMarginTop($(formId).marginTop.value); });
		}
		
		if (formField.marginBottom){
			Event.observe($(formId).marginBottom,'change',function(){ formUtils.cssMeasureChecker($(formId).marginBottom,true); editableCSSManager.editable(cssId).setMarginBottom($(formId).marginBottom.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); });
		}
		
		
		this.observeMethod = function (event){ 
				if (cssEditorManager.cssEditor(event.memo.cssId)) { 
					cssEditorManager.cssEditor(event.memo.cssId).updateEditor(event);
				}
			};

		Event.observe(document,'ws:css_changed',this.observeMethod);
		
	},
	
	finish: function(){
		editableCSSManager.editable(this.editable.cssId).finish();		
		editableCSSManager.removeEditable(this.editable.cssId);
		Event.stopObserving(document,'ws:css_changed',this.observeMethod);
	},
	
	
	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).getTextIndent();
		if (value) {
			if (form.textIndent) form.textIndent.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).getLetterSpacing();
		if (value){
			if (form.letterSpacing) form.letterSpacing.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).getCursor();
		if (value){
			if (form.cursor) form.cursor.value = value;
		}

		value = editableCSSManager.editable(this.editable.cssId).getPosition();
		if (value){
			if (form.position) form.position.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).getMarginLeft();
		if (value){
			var parsedValue = parseInt(value);
			if (isNaN(parsedValue)){
				parsedValue = value;
			}
			if (form.marginLeft) form.marginLeft.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getMarginRight();
		if (value){
			var parsedValue = parseInt(value);
			if (isNaN(parsedValue)){
				parsedValue = value;
			}
			if (form.marginRight) form.marginRight.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getMarginTop();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			if (form.marginTop) form.marginTop.value = value;
		}
		
		value = editableCSSManager.editable(this.editable.cssId).getMarginBottom();
		if (value){
			value = parseInt(value);
			if (isNaN(value)){
				value = "";
			}
			
			if (form.marginBottom) form.marginBottom.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,replace){
		if (replace) {
			this.removeEditable(cssId);
		}

		if (!this.editables[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]){
			//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.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,
	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);
		
		// 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

		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 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: " + $(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.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;		
		
	}
	
});