// carddesign-2009-5.js 
// Copyright (C) 2007-2009 Selbstdenker AG 
// <jmb>

var SPCM = new Object();
SPCM.loadingImage = new Image();
SPCM.loadingImage.src = "/spi/img/loading.gif";

function stripPx(value) {
	if (value == "") return 0;
	return parseFloat(value.substring(0, value.length - 2));
}

function copyDimensions( src, dst ){
	dst.setStyle({
		width:src.style.width,
		height:src.style.height,
		left:src.style.left,
		top:src.style.top
	});
}

function extractDim( src ){
	var result = {};
	result.l = stripPx(src.style.left); 
	result.t = stripPx(src.style.top); 
	result.w = stripPx(src.style.width); 
	result.h = stripPx(src.style.height);
	return result;
}

function setDimStyle( dim, el ){
	el.setStyle({ top:dim.t+'px',left:dim.l+'px', width:dim.w+'px',height:dim.h+'px' });
}

function isMouseOverElement( ev , elementName ){		
	if ( null == ev ) return false;
	return Position.within( $(elementName),  Event.pointerX(ev), Event.pointerY(ev) );
}

function isBrowserIE(){
	return ( /MSIE/.test(navigator.userAgent) && !window.opera );
}

function isBrowserIEOrOpera(){
	return ( /MSIE/.test(navigator.userAgent) || window.opera );
}

function isBrowserIE6(){
	return ( Prototype.Browser.IE && (typeof window.XMLHttpRequest == "undefined"));
}
	
function submitToIFrame( iframeName, url ) {
	var iframe = $(iframeName);
	if ( !iframe ) return false;
	var doc;
	if (iframe.contentDocument) {
		// For NS6
    	doc = iframe.contentDocument; 
    } else if (iframe.contentWindow) {
    	// For IE5.5 and IE6
    	doc = iframe.contentWindow.document;
  	} else if (iframe.document) {
  		// For IE5
    	doc = iframe.document;
	} else {
    	return true;
    }
    doc.location.replace(url);
}

var senderlineArray = new Array();

var Senderline = Class.create({
	initialize: function( aWarpId, aDisplayId, anEmptyId, anEditId, aFormId, anInputId ) {   
		this.lastSubmittedText = "";
		this.wrapId = aWarpId;
		this.displayId = aDisplayId;
		this.emptyId = anEmptyId;
		this.editId = anEditId;
		this.formId = aFormId;
		this.updateVisibility();
		this.inputId = anInputId;
		Event.observe($(this.wrapId), 'mouseover', function(e){ this.handleOver(); return false; }.bind(this) );
		Event.observe($(this.inputId), 'mouseout', function(e){ this.submit(); return false; }.bind(this) );
		Event.observe($(this.inputId), 'blur', function(e){ this.submit(); return false; }.bind(this) );
		senderlineArray.push(this);
	},
	updateVisibility : function (){
		if ( $(this.displayId).innerHTML.length == 0 ){
			$(this.emptyId).show();
		 	$(this.displayId).hide();
		} else {
			$(this.emptyId).hide();
		 	$(this.displayId).show();
		}
 		$(this.editId).hide();
	},
	update : function() {
		var theDiv = $(this.displayId);
		var input = $(this.inputId);
		var parsedText = input.value.replace(/\n /g, "<BR>&nbsp;").replace(/\n/g, "<BR>").replace(/  /g, "&nbsp;&nbsp;");
		theDiv.innerHTML = parsedText;
		this.updateVisibility();
	},
	submit: function() {
		this.update();
		var input = $(this.inputId);
		if ( this.lastSubmittedText == input.value ) return;
		this.lastSubmittedText = input.value;
		document.forms[this.formId].submit();
	},
	handleOver : function(){
		$(this.displayId).hide();
		$(this.emptyId).hide();
		$(this.editId).show();
		if ( ( !selectedContentbox ) || !(selectedContentbox.isInEditMode) ){
			// document.forms[this.formId].senderLineInput.focus();		
			$(this.inputId).focus();		
		}
	},
	visible : function(){
		return $(this.editId).visible();
	}
});
	

// content boxes

// static definitions
var pixelPerInch = 60.0;

var templateboxArray = new Array();

var Templatebox = Class.create({
	calcAndSetToolsOffset : function(){
		var off1 = $("lowerDiv").cumulativeOffset();
		var off2 = $("mainarea").cumulativeOffset();
		this.toolsOffsetLeft = off1.left - off2.left;
		this.toolsOffsetTop  = off1.top - off2.top;
	},
	initialize: function( displayDiv, dropDiv, maxDropCount, dropCutDiv  ){
		this.displayDiv = Element.extend(displayDiv);
		this.dropDiv = Element.extend(dropDiv);
		this.id = dropDiv.id;

		this.left = stripPx(this.dropDiv.style.left); 
		this.width = this.dropDiv.getWidth(); 
		this.right =  this.left + this.width;
		this.top = stripPx(this.dropDiv.style.top); 
		this.height = this.dropDiv.getHeight();
		this.bottom =  this.top + this.height;

		this.cutL = this.left;
		this.cutW = this.width;
		this.cutT = this.top;
		this.cutH = this.height;
		
		if ( dropCutDiv ){ 
			this.dropCutDiv = Element.extend(dropCutDiv);
			var dim = extractDim(dropCutDiv);
			var h = dim.h;
			var w = dim.w;
			var l = dim.l;
			var t = dim.t;
			this.cutL = l;
			this.cutW = w;
			this.cutT = t;
			this.cutH = h;
			h -= 2;
			w -= 2;
			l -= 1;
			t -= 1;

			this.dropCutDiv.setStyle( { width:w+'px', height:h+'px', left:l+'px', top:t+'px' });
		} else {
			this.dropCutDiv = null;
		}

		// Doppelter Schnittrand (zur Sicherheit)
		var cutOffX = (this.cutL-this.left);
		var cutOffY = (this.cutT-this.top);

		/*
		this.textL = this.cutL + 2*cutOffX;
		this.textW = this.cutW - 3*cutOffX;
		this.textR = this.textL + this.textW;
		this.textT = this.cutT + cutOffY;
		this.textH = this.cutH - 2*cutOffY;
		this.textB = this.textT + this.textH; 
		*/

		this.textL = this.cutL + 3*cutOffX;
		this.textW = this.cutW - 5*cutOffX;
		this.textR = this.textL + this.textW;
		this.textT = this.cutT + 2*cutOffY;
		this.textH = this.cutH - 4*cutOffY;
		this.textB = this.textT + this.textH; 

		this.toolsOffsetLeft = 0;
		this.toolsOffsetTop  = 0;
		this.calcAndSetToolsOffset();

		// alert( "DIV: " + this.dropDiv.getWidth() + "," + this.dropDiv.getHeight() + "; " + width + "," + height );
		this.ratio = this.width / this.height;
		this.maxContentCount = maxDropCount;
		this.contentArray = new Array();
		templateboxArray.push(this);
	},
	isStamp : function(){
		return ( this.id == "stamp");
	},
	hasMaxContentCount : function(){
		if (!this.maxContentCount) return false;
		return (this.contentArray.length >= this.maxContentCount );
	},
		
	makeDropable : function(){
		var dropImageId = (this.dropCutDiv) ? this.dropCutDiv.id : this.dropDiv.id;
		var acceptArray = new Array();
		acceptArray.push("draggable_image");
		if ( !this.isStamp() ) acceptArray.push("draggable_text");
		Droppables.add(dropImageId,{accept: acceptArray,
			hoverclass: 'dragHere',
			onDrop: function(draggableElement,  droppableElement, event ) {
				this.dropHandler( dropImageId, draggableElement, droppableElement, event);
			}.bind(this)
		});
	},
	dropHandler : function( boxId, drag, drop, event){
		if ( drop.id.indexOf("_cut") > 0 ){
			var newId = drop.id.replace("_cut", "");
			drop = $(newId);
		}
		if ( !this.isStamp()  && this.hasMaxContentCount() ){
			isRevertEffectOn = true;	
			dropWasDenied = true;
			return false;
		}
		if ( drag.id == "newTextboxDragImage" ){
			isRevertEffectOn = false;	
			this.insertNewTextbox(); 
			return false;
		}

		offset = drag.cumulativeOffset();
		dropOffset = Position.cumulativeOffset(drop);
		offset[0] = offset[0] - dropOffset[0];				
		offset[1] = offset[1] - dropOffset[1];				

		if ( this.isStamp() || (!this.hasMaxContentCount()) ){
			isRevertEffectOn = false;
			this.submitDrop(offset[0], offset[1],drag.offsetWidth,drag.offsetHeight,drag);
		} else {
			isRevertEffectOn = true;
			dropWasDenied = true;
		}
		return false;	
	},
	submitDrop:function( offX, offY, w, h, drag ){
		if ( selectedContentbox && (selectedContentbox.isInEditMode) ){
			return false;
		}
		var url= dropImageUrl;
		if (drag){ 
			url += '&draggedImage=' + drag.id;
		} else {
			url += '&newHtmlBox=1';
		}
		url += '&droppedBox=' + this.id + '&offsetX=' + offX + '&offsetY=' + offY;
		if (w&&h) url+= '&width=' + w + '&height=' +h;
		submitToIFrame("statusFrame",url);
	},
	insertNewTextbox : function( ){
		if (this.hasMaxContentCount() ){
			alert( dropWasDeniedMessage );
			return false;	
		}

		var l = this.textL;
		var t = this.textT;
		var w = this.textW;
		var h = this.textH;
		// alert("insertNewTextbox w:" + w +"; h:" + h );
	 	
	 	if ( ( w == 216 ) && ( h == 316 ) ){ // RŸckseite A5
			l += 3; t += 3;
			w -= 3; h -= 6;	
		} else if ( ( w == 204 ) && ( h == 303 ) ){ // RŸckseite A6
			l += 6; t += 3;
			w -= 6; h -= 6;	
		} else {
			l += 3; t += 3;
			w -= 6; h -= 6;
		} 
		this.submitDrop(l,t,w,h,null);
		return false;
	}
	
});

Templatebox.findWithId = function( anId ){ 
	return templateboxArray.find( function(cb){ return (anId == cb.id) });
}

Templatebox.getEditable = function(){
	return templateboxArray.find( function(cb){ return !cb.isStamp(); });
}

Templatebox.addTextbox = function(){
	var tb = Templatebox.getEditable();
	if (!tb) return;
	tb.insertNewTextbox(); 
}

var FixContentbox = Class.create({
	initialize: function( withId, templateBox, config ){
	    this.config = config || { };
		// alert("constructor Contentbox: " + withId );
		if ( withId == null ) return;
		this.id = withId;
		this.tb = templateBox;
		this.tb.contentArray.push(this);
		
		this.width = this.config.width;
		this.height = this.config.height;
		this.left = 0;
		this.top = 0;

		this.imageSrc = this.config.imageSrc;
		this.lowResSrc = this.config.lowResSrc;
	
		this.image = null;
		this.imageDiv = null; // Element.extend(imageDiv);
		this.imageGrab = null;
		this.imageGrabDiv = null; // Element.extend(imageGrabDiv);
		this.imageDel = null; // Element.extend(imageGrabDiv);
		
		this.imgPreloader = new Image();
		this.isLoaded = false;
		this.createDOM();
	},
	
	dispose : function(){	
		this.tb.contentArray = this.tb.contentArray.without(this);
		// alert("dispose: " + this.id + "; " + this.image + ";" + this.imageDiv + ";" + this.imageGrab + ";" + this.imageGrabDiv );
		if (this.imageDel) this.imageDel.remove();
		if (this.imageGrab) this.imageGrab.remove();
		if (this.imageGrabDiv) this.imageGrabDiv.remove();
		if (this.image) this.image.remove();
		if (this.imageDiv) this.imageDiv.remove();
		if (this.tb.contentArray.length == 0){
			this.tb.displayDiv.addClassName('containsNoImage');
		} 
	},
	
	remove:function(){
		this.tb.contentArray = this.tb.contentArray.without(this);
		if (this.imageDel){
			this.imageDel.remove();
			this.imageDel=null;
		}
	 	Effect.Fade(this.imageDiv, {duration:0.5, afterFinish: function() { this.dispose() }.bind(this) });
		var url = removeImageUrl + '&removedImage=' + this.id + '&box=' + this.tb.id; 
		submitToIFrame("statusFrame",url);
	},

	createDOM:function(){
		var hadImage = false;
		if ( this.tb.contentArray.length > 1 ){
			var delFCB = this.tb.contentArray[0];
			delFCB.remove();
			hadImage=true;
		}
		this.tb.displayDiv.removeClassName('containsNoImage');

		var divId = 'imageX'+this.id+'Div';
		var imgId = 'image'+this.id;
		var aDiv = $(divId);
		var aImg = null;

		var marginTop = this.tb.height - this.height;

		if (aDiv){
			aImg = $(imgId);
		} else {
			aDiv = new Element( 'div',{id:divId});
			aDiv.setStyle({
				// zIndex:this.zIndex,
				position:'absolute', 
				top:'0px',left:'0px',
				width:this.tb.width+'px',height:this.tb.height+'px'
			});
		 	aImg =  new Element('img',{ 
				id:imgId,alt:"",
				width:this.width,height:this.height,
				src:this.lowResSrc,
				style:"margin-top:" + marginTop + "px"
			});
			aDiv.appendChild( aImg );
			this.tb.displayDiv.appendChild( aDiv );
			if (hadImage){
				aDiv.hide();
				new Effect.Appear( aDiv , { duration: 0.5 } );
			}
		}

		aImg.width=this.width;
		aImg.height=this.height;
		
		this.imageDiv = aDiv;
		this.image = aImg;
		// alert("NEW: th" + this.tb.height + " " + this.height + "->" + marginTop );
		aDiv = new Element('div',{ id:'imageX'+this.id+'GrabDiv','class':'imgcontainer' });
		aDiv.setStyle({
			position:'absolute',zIndex:1000,
			top:'0px',left:'0px',
			width:this.width+'px',height:this.height+'px'
		});
		aImg =  new Element('img',{ 
			id:"image"+this.id+"Grab",alt:"",
			// width:this.tb.width+"px",height:this.tb.height+"px",
			src:"/spi/img/1pxl.gif"
		});
		// needed for IE 
		aImg.width = this.tb.width;
		aImg.height = this.tb.height;

		// if ( marginTop > 0 ) aImg.setStyle( { "margin-top" : marginTop +"px" } );
		aDiv.appendChild(aImg);
		var delImg =  new Element('img',{ 
			id:"imageX"+this.id+"Del","class":"delimg",alt:FixContentbox.REMOVE_TEXT,title:FixContentbox.REMOVE_TEXT,
			src:"/spi/img/delimg.gif",
			style:"top:" + (this.tb.height-10) + "px;"
		});
		aDiv.appendChild(delImg);
		this.tb.dropDiv.appendChild(aDiv);

		this.imageGrab = aImg;
		this.imageGrabDiv = aDiv;
		this.imageDel = delImg;
		
		delImg.hide(); 

		Event.observe(this.imgPreloader, 'load', function() {
			this.image.src = this.imgPreloader.src;
			this.image.width=this.width;
			this.image.height=this.height;
			this.isLoaded = true;
			// new Effect.Highlight(this.image, { duration: 0.4 });
		}.bind(this) );
		Event.observe(this.imgPreloader, 'error', function() {
			this.isLoaded = true;
		}.bind(this) );
		this.imgPreloader.src = this.imageSrc;		
			
		Event.observe( this.imageGrabDiv, 'mouseover', function(ev){ 
			var el=this.imageDel;
			if (el) el.show(); 
		}.bind(this) );
		Event.observe( this.imageGrabDiv, 'mouseout', function(ev){ 
			var el=this.imageDel;
			if (el) el.hide(); 
		}.bind(this));
		Event.observe( this.imageDel, 'click', function(ev){ this.remove() }.bind(this));
				
		return this;
	}
});

FixContentbox.REMOVE_TEXT = "entfernen";

var contentboxArray = new Array();
// var maxContentboxCountOnPage = false;
var selectedContentbox = null;

var handleCornerArray = new Array();
var handleEdgeArray = new Array();
var handleHash = new Hash();

var toolDiv = null;
var toolFrontDiv = null;
var toolMaxsizeDiv = null;
var toolBackDiv = null;
var toolEditDiv = null;

var imageInfoDiv = null;

var dropWasDenied = false;
var dropWasDeniedMessage = "";
var isRevertEffectOn = true;

var removeContentUrl = "";
var dropContentUrl = "";

// static definitions
var PPI_WARN_RED = 100;	
var PPI_WARN_YELLOW = 180;	

var PPI_WARN_GREEN_TITLE = "Bildaufl&ouml;sung gut";
var PPI_WARN_YELLOW_TITLE = "Bildaufl&ouml;sung ausreichend";
var PPI_WARN_RED_TITLE = "Bildaufl&ouml;sung zu gering f&uuml;r Druck";

var Contentbox = Class.create();


Object.extend(Contentbox, {
	ListenerMouseMove:null,
	ListenerMouseUp:null,
	SubmitUrl:'',
	MAXIMIZE_MAX_FACTOR:2.1, 
	minimumWidthHeight:15,	
	magneticBorderRange:5,
	MIN_OVERLAP:5,
	MIN_TEXT_WIDTH:25,	
	MIN_TEXT_HEIGHT:15,	
	fixedRatio:true,
	cropToolBorderWidth:0,
	offsetSmallSquares:0,
	cursorMoveByAmount:1,
	BASE_FONT_SIZE_DEFAULT: 9,
	BASE_FONT_SIZE_ARRAY : [ 5,6,7,8,9,10,11,12,14,16,18,20,24,28,32,36,42,50,56,60,72,80,92,100,120,140,160,180,200,220 ]
});

Contentbox.prototype = {
	initialize: function( withId, templateBox, config ){
	    this.config = config || { };
	
		// alert("constructor Contentbox: " + withId );
		if ( withId == null ) return;

		this.id = withId;
		this.resizeType = "";

		this.tb = templateBox;
		this.tb.contentArray.push(this);
		
		this.dim = { 
			w:this.config.width,
			h:this.config.height,
			l:this.config.left,
			t:this.config.top
		};
		this.zIndex = this.config.zIndex;
		if ( (!this.config.imageSrc) || (this.config.imageSrc=='') ){
			this.imageSrc = null;
			this.lowResSrc = null;
			this.origWidth = this.dim.w;
			this.origHeight = this.dim.h; 
		} else {
			this.imageSrc = this.config.imageSrc;
			if ( ( !config.lowResSrc) || ( this.config.lowResSrc=='' ) ){
				this.lowResSrc = this.imageSrc;
			} else {
				this.lowResSrc = this.config.lowResSrc;
			}
			this.maximise = ( this.config.maximise ) ? true : false;
			this.origWidth = parseInt(this.config.origWidth);
			this.origHeight = parseInt(this.config.origHeight);
		}
		this.ratio = this.origWidth / this.origHeight;

		if (this.ratio < 1 ) {
			this.minWidth = Contentbox.minimumWidthHeight;
			this.minHeight = Math.round(this.minWidth / this.ratio);
		} else {
			this.minHeight = Contentbox.minimumWidthHeight;
			this.minWidth = Math.round(this.minHeight * this.ratio);
		}
			

		// this.boxWidth = this.tb.width;
		// this.boxHeight = this.tb.height;

		this.posX = 0;
		this.posY = 0;
		
		this.eventX=0;
		this.eventY=0;

		this.moveCounter = -1;
		this.resizeCounter = -1;
	
		this.image = null;
		this.imageDiv = null; // Element.extend(imageDiv);
		// this.imageDiv = $('image' + this.id + 'Div');
		this.imageGrab = null;
		this.imageGrabDiv = null; // Element.extend(imageGrabDiv);
		
		this.isSaved = true;
		this.isInEditMode = false;
		this.lastContent = null;
		this.lastBaseFontSize = Contentbox.BASE_FONT_SIZE_DEFAULT;
		
		this.imgPreloader = new Image();
		this.loadDiv = null;
		this.isLoaded = false;
		this.isAnimating = false;

		contentboxArray.push( this );
	},
	
	dispose : function(){
		if ( this == selectedContentbox ){
			selectedContentbox.updateToolboxVisibility( false );
			unselectAllImages();			
			selectedContentbox = null;
		}
		contentboxArray = contentboxArray.without( this );
		this.tb.contentArray = this.tb.contentArray.without(this);
		// alert("dispose: " + this.id + "; " + this.image + ";" + this.imageDiv + ";" + this.imageGrab + ";" + this.imageGrabDiv );
		if (this.image) this.image.remove();
		if (this.imageDiv) this.imageDiv.remove();
		if (this.imageGrab) this.imageGrab.remove();
		if (this.imageGrabDiv) this.imageGrabDiv.remove();
		if (contentboxArray.length == 0){
			this.tb.displayDiv.addClassName('containsNoImage');
		}
	},

	createDOM : function(){
		var aDiv = $('image' + this.id + 'Div');
		var aImg = null; 
		if (aDiv){
			aImg = $("image" + this.id );
		} else {
			aDiv = new Element( 'div',{ id:'image' + this.id + 'Div' });
			aDiv.setStyle({ zIndex:this.zIndex,position:'absolute' });
			setDimStyle( this.dim, aDiv );
			if ( this.isImage() ){		
				aImg =  new Element('img',{ 
					id:"image" + this.id,
					alt:"",width:this.dim.w,height:this.dim.h,
					src:this.lowResSrc
				});
				//aImg.width=config.width;
				//aImg.height=config.height;
				aDiv.appendChild( aImg );
			} else {
				aDiv.setStyle( {"fontSize":Contentbox.BASE_FONT_SIZE_DEFAULT +"px" } );
			}
			this.tb.displayDiv.appendChild( aDiv );
		} 
		this.imageDiv = aDiv;

		if ( this.isImage() ){		
			this.image = aImg;
						
			Event.observe(this.imgPreloader, 'load', function() {
				this.image.src = this.imgPreloader.src;
				//this.image.width=this.width;
				//this.image.height=this.height;
				this.isLoaded = true;
				// new Effect.Highlight(this.image, { duration: 0.4 });
			}.bind(this) );
			Event.observe(this.imgPreloader, 'error', function() {
				this.isLoaded = true;
			}.bind(this) );

			this.imgPreloader.src = this.imageSrc;			
			
			// new PeriodicalExecuter(function(pe) { Contentbox.preloadImageTask(pe,[self]); }, 0.5);

		} else {
			this.imageDiv.addClassName('textContentBox');
			this.image = null;
			this.lastContent = this.imageDiv.innerHTML;
			this.lastBaseFontSize = this.baseFontSizeFromDiv();
			this.isLoaded = true;
		}

				
		var aGrabDiv = new Element('div',{ id:'image'+this.id +'GrabDiv' });
		aGrabDiv.setStyle( { position:'absolute' });
		setDimStyle( this.dim,aGrabDiv );
		var aGrabImg =  new Element('img',{ src:"/spi/img/1pxl.gif",id:"image"+this.id+"Grab",alt:"",width:this.dim.w,height:this.dim.h });
		aGrabDiv.appendChild( aGrabImg );

		this.tb.dropDiv.appendChild( aGrabDiv );

		this.imageGrab = aGrabImg;
		this.imageGrabDiv = aGrabDiv;

		Event.observe( this.imageGrabDiv, 'mousedown',  function(e){ this.select(); }.bind(this) );
		Event.observe( this.imageGrabDiv, 'dblclick',  function(e){ 
			this.select(); 
			if (selectedContentbox){
				if ( selectedContentbox.isImage() ){
					selectedContentbox.resizeMax();
				} else {
					selectedContentbox.startEditText();
				}
				Event.stop(e);
			}
		}.bind(this));
		this.tb.displayDiv.removeClassName('containsNoImage');

	},

	isImage : function(){
		return ( null != this.imageSrc );
	},
	
	setZIndex : function( val ) {
		this.zIndex = val;
		if ( this.isImage() ){
			this.imageDiv.style.zIndex = val;
		} else {
			this.imageDiv.style.zIndex = ( (val*1) +500 );
		}
		this.imageGrabDiv.style.zIndex = ( (val*1) + 1000);
	},
	
	resizeMax : function() {
		var imageRatio = this.imageGrabDiv.getWidth() / this.imageGrabDiv.getHeight();
		var dim = extractDim(this.imageGrabDiv);
		var h = dim.h;
		var w = dim.w;
		var l = dim.l;
		var t = dim.t;

		if ( !this.isImage() ){
			l = this.tb.textL;
			t = this.tb.textT;
			w = this.tb.textW;
			h = this.tb.textH;
		} else {
			var boxRatio = this.tb.ratio;
			// alert( "resize: " + imageRatio +":" + boxRatio + ": " + this.tb.width + "," + this.tb.height + ': ' + this.imageGrabDiv.getWidth() +  "," + this.imageGrabDiv.getHeight() );

			// einpassen
			var wfac = this.tb.width/w;
			var hfac = this.tb.height/h;
			if ( ( (h*wfac)/this.tb.height ) < 0.66 ){
				w *= wfac;
				h *= wfac;
			} else if ( ( (w*hfac)/this.tb.width ) < 0.66 ){
				w *= hfac;
				h *= hfac;
			} else if (boxRatio > imageRatio) {
				w = this.tb.width;
				h = this.tb.width / imageRatio;
				var maxH = Contentbox.MAXIMIZE_MAX_FACTOR * this.tb.height;
				if ( h > maxH ){
					hfac = maxH/h;
					w *= hfac;
					h *= hfac;
				}
			} else {
				h = this.tb.height;
				w = this.tb.height * imageRatio;
				var maxW = Contentbox.MAXIMIZE_MAX_FACTOR * this.tb.width;
				if ( w > maxW ){
					wfac = maxW/w;
					w *= wfac;
					h *= wfac;
				}
			}
			w = Math.ceil(w);
			h = Math.ceil(h);
			l = ( this.tb.width - w ) / 2;
			t = ( this.tb.height - h ) / 2;
		}
		this.imageGrabDiv.setStyle( { width:w+'px', height:h+'px', left:l+'px', top:t+'px' });
		this.updateSizes(true);
		this.isSaved = false;
		this.submitMove();
	},
	
	bringToFront : function() {
		var foundContentbox = this;

		var maxZIndex = 500;

		if ( contentboxArray.length > 0 ){
			maxZIndex = this.zIndex;
			var currContentbox;
			for (var i = 0; i < contentboxArray.length; i++ ){
				currContentbox = contentboxArray[i];
				if ( this.id == currContentbox.id ){
					contentboxArray.splice(i,1);
					foundContentbox = currContentbox;
					contentboxArray.push(foundContentbox);
					break;
				}
			}
			if ( contentboxArray.length > 1 ){
				maxZIndex = contentboxArray[contentboxArray.length-2].zIndex;
				maxZIndex++;
			}
			foundContentbox.setZIndex(maxZIndex);
			foundContentbox.select();
			this.isSaved = false;
			foundContentbox.submitMove();
		}
	},
	
	bringToBack : function() {
		var foundContentbox = this;
		var minZIndex = 500;
		if ( contentboxArray.length > 0 ){
			minZIndex = this.zIndex;
			var currContentbox;
			for (var i = 0; i < contentboxArray.length; i++ ){
				currContentbox = contentboxArray[i];

				if ( this.id == currContentbox.id ){
					contentboxArray.splice(i,1);
					foundContentbox = currContentbox;
					contentboxArray.unshift(foundContentbox);
					break;
				}
			}
			if ( contentboxArray.length > 1 ){
				minZIndex = contentboxArray[1].zIndex;
				minZIndex = minZIndex-1;
			}
			foundContentbox.setZIndex(minZIndex);
			foundContentbox.select();
			this.isSaved = false;
			foundContentbox.submitMove();
		}
	},
	updateToolboxVisibility : function ( isVisible ){
		if ( isVisible && this.tb ){
			this.tb.calcAndSetToolsOffset();
			this.updateSizes();
		}
		[toolFrontDiv,toolBackDiv,toolEditDiv,imageInfoDiv].each( function(el){
			el.style.visibility = "hidden";
		});

		
		if ( !isVisible ){
			toolDiv.style.visibility = "hidden";
			toolMaxsizeDiv.style.visibility = "hidden";
			return;
		}
		
		if ( contentboxArray.length > 0 ){
			if ( contentboxArray.last().id !=  this.id ) toolFrontDiv.style.visibility = "visible";
			if ( contentboxArray.first().id !=  this.id ) toolBackDiv.style.visibility = "visible";
		}
		
		if ( this.isImage() ){
			// toolDiv.addClassName('imgToolboxDivWithoutEdit');
			toolDiv.setStyle( { width:'80px' } );
			toolEditDiv.hide();
			imageInfoDiv.style.visibility = "visible";
			this.imageDiv.setStyle( { border: "1px transparent"} );
		} else {
			// toolDiv.addClassName('imgToolboxDivWithEdit');
			toolDiv.setStyle( { width:'100px' } );
			toolEditDiv.show();
			toolEditDiv.style.visibility = "visible";
			this.imageDiv.setStyle( { border: "1px dashed #900" } );
		}
		toolDiv.style.visibility = "visible";
		toolMaxsizeDiv.style.visibility = "visible";
	
	},
	
	select : function() {
		if ( selectedContentbox && ( this.id == selectedContentbox.id ) && ( this.isInEditMode ) ) return false; 
		if ( selectedContentbox && selectedContentbox.isInEditMode ){
			saveAndExitEditText();
		}
		if ( ( null == selectedContentbox ) || ( this.id != selectedContentbox.id ) ){ 
			// alert("selectDiv 2: " + this.id );	
			unselectAllImages();	
			selectedContentbox = this;
			this.updateSizes();
			handleCornerArray.each( function(h){ h.show() });
			if ( !this.isImage() ){
				handleEdgeArray.each( function(h){ h.show() });
			}
		} 
		this.updateToolboxVisibility( true );
	},
	
	selectAndInitMove : function( ev ){
		this.select();
		// alert("Contentbox_doInitMove: " + this.id + "; " + selectedContentbox.id  );			
		// if ( this.id != selectedContentbox.id ) return;
		this.dim = extractDim(this.imageGrabDiv);
		this.eventX = ev.clientX;
		this.eventY = ev.clientY;		

		this.moveCounter = 0;
		Contentbox.initMoveListeners(this,false);
		ev.stop();
		return false;
	},

	doInitResize : function ( clientX, clientY ){
		if ( this.isAnimating ) return false;
		this.eventX = clientX;
		this.eventY = clientY;
		this.dim = extractDim(this.imageGrabDiv);
		this.resizeCounter = 0;
		Contentbox.initMoveListeners(this,true);
		return false;
	},

	handleMove : function(e) {	
		if ( !selectedContentbox ) return;
		if ( this.id != selectedContentbox.id ) return;
		if ( this.isInEditMode ) return;
		
		var newL = this.dim.l;
		var newW = this.dim.w;
		var newR = newL + newW;

		var newT = this.dim.t;
		var newH = this.dim.h;
		var newB = newT + newH;
								
		var deltaX = e.clientX - this.eventX;
		var deltaY = e.clientY - this.eventY;
		
		newL += deltaX;
		newT += deltaY;
			
		if ( !this.isImage() ){
			newL = limitToLT( this.tb.textL, newL );
			newT = limitToLT( this.tb.textT, newT );
			newR = newW + newL;
			newB = newH + newT;
			newR = limitToRB( this.tb.textR, newR );
			newB = limitToRB( this.tb.textB, newB );
		} else {
			newL = snapToEdge( this.tb.left, newL );
			newT = snapToEdge( this.tb.top, newT );
			newR = newW + newL;
			newB = newH + newT;
			newR = snapToEdge( this.tb.right, newR );
			newB = snapToEdge( this.tb.bottom, newB );
		}
				
		newL = newR - newW;
		newT = newB - newH;
		this.moveCounter++;
		
		this.checkAndSetPosAndSize( newL, newW, newT, newH );
		this.updateSizes();
		this.isSaved = false;
		e.stop();
	},

	handleResize : function(e) {	
		if ( !selectedContentbox ) return;
		if ( this.id != selectedContentbox.id ) return;
		if ( this.isInEditMode ) return;
		
		var newL = this.dim.l;
		var newW = this.dim.w;
		var newR = newL + newW;

		var newT = this.dim.t;
		var newH = this.dim.h;
		var newB = newT + newH;		
				
		var deltaX = e.clientX - this.eventX;
		var deltaY = e.clientY - this.eventY;
	
		if ( !this.isImage() ){
			if ( this.resizeType.indexOf('l') >= 0 ) {
				newL += deltaX;
				newL = limitToLT( this.tb.textL, newL );
				newW = newR - newL;
				if ( newW < Contentbox.MIN_TEXT_WIDTH ){
					newL += ( newW - Contentbox.MIN_TEXT_WIDTH );
					newW = Contentbox.MIN_TEXT_WIDTH;
				}
			}					
			if ( this.resizeType.indexOf('r') >= 0 ) {
				newR += deltaX;
				newR = limitToRB( this.tb.textR, newR );
				newW = newR - newL;
				if ( newW < Contentbox.MIN_TEXT_WIDTH ){
					newW = Contentbox.MIN_TEXT_WIDTH;
				}
			}
			if ( this.resizeType.indexOf('t') >= 0 ){
				newT += deltaY;
				newT = limitToLT( this.tb.textT, newT );
				newH = newB - newT; 
				if ( newH < Contentbox.MIN_TEXT_HEIGHT ){
					newT += ( newH - Contentbox.MIN_TEXT_HEIGHT );
					newH = Contentbox.MIN_TEXT_HEIGHT;
				}
			}
			if ( this.resizeType.indexOf('b') >= 0 ){
				newB += deltaY;
				newB = limitToRB( this.tb.textB, newB );
				newH = newB - newT;
				if ( newH < Contentbox.MIN_TEXT_HEIGHT ){
					newH = Contentbox.MIN_TEXT_HEIGHT;
				}
			}	
		} else {
			if ( this.resizeType=='tr' ){
				newT += deltaY;					
				// magnetisches Einrasten
				newR  = newL + ( newB - newT ) * this.ratio;
				var xOff = (this.tb.width-newR);
				newT = snapToBorder(xOff, newT, this.ratio );
				// minimale Groesse
				if ( (newB - newT) < this.minHeight ) newT = newB-this.minHeight;
				newT = Math.round(newT);
				newH = newB - newT;
				newW  = Math.round(newH * this.ratio); 
			}
			if (this.resizeType=='br') {
				newB += deltaY;
				// magnetisches Einrasten
				newR  = newL + ( newB - newT ) * this.ratio;
				var xOff = (this.tb.width-newR);
				var yOff = (this.tb.height-newB);
				yOff = snapToBorder(xOff, yOff, this.ratio );
				newH = this.tb.height - yOff -newT;
				if ( newH < this.minHeight ) newH = this.minHeight;
				newH = Math.round(newH);
				newW  = Math.round(newH * this.ratio); 
			}
			
			if (this.resizeType=='bl') {
				newB += deltaY;
				// magnetisches Einrasten
				newL  = newR - ( ( newB-newT ) * this.ratio );
				var yOff = (this.tb.height-newB);
				yOff = snapToBorder( newL, yOff, this.ratio );
				newH =	this.tb.height - yOff - newT;							
				if ( newH < this.minHeight ) newH = this.minHeight;
				newH = Math.round(newH);
				newW  = Math.round(newH * this.ratio); 
				newL  = newR - newW; 
			}
			
			if (this.resizeType=='tl') {
				newT += deltaY;					
				// magnetisches Einrasten
				newL  = newR - ( newB-newT ) * this.ratio;
				newT = snapToBorder( newL , newT, this.ratio );			
				// minimale Groesse
				if ( (newB - newT) < this.minHeight ) newT = newB-this.minHeight;
				newT = Math.round(newT);
				newH = newB - newT;
				newW  = Math.round(newH * this.ratio); 
				newL = newR - newW;
			}
		
		}
		this.resizeCounter++;
			
		this.checkAndSetPosAndSize( newL, newW, newT, newH );
		this.updateSizes();
		this.isSaved = false;
		e.stop();

	},

	moveImageWithCursor : function( ek ) {
		// alert("moveImageWithCursor: " + ek + "," +  this.isInEditMode );
		if ( this.isInEditMode ) return;
		
		var ma = Contentbox.cursorMoveByAmount; 
		var leftMove = 0;
		var topMove = 0;

		if (ek==Event.KEY_LEFT) leftMove = -ma;
		if (ek==Event.KEY_RIGHT) leftMove =  ma;
		if (ek==Event.KEY_UP) topMove  = -ma;
		if (ek==Event.KEY_DOWN) topMove  =  ma;
				
		if ( (topMove != 0) || (leftMove !=0) ){
			var dim = extractDim(this.imageGrabDiv);
			var l = dim.l;
			var t = dim.t;
			l += leftMove;
			t += topMove;
			
			this.checkAndSetPosAndSize( l, dim.w, t, dim.h );
			this.updateSizes();
			this.isSaved = false;
			this.submitMove( );
		}
		return false;
	},
	
	checkAndSetPosAndSize : function( l,w,t,h ){
		var b = t+h;
		var r = l+w;
		var ol = Contentbox.MIN_OVERLAP;
	 	if ( this.tb.top > (b-ol) ){
			b = this.tb.top+ol;
			t = b-h;
		}
		if ( this.tb.bottom < (t+ol) ) t = this.tb.bottom-ol;
		if ( this.tb.left > (r-ol) ){
			r = this.tb.left+ol;
			l = r-w;
		}
		if ( this.tb.right < (l+ol) ) l = this.tb.right-ol;
		setDimStyle( {l:l,t:t,h:h,w:w},this.imageGrabDiv );
	},
	
	updateSizes : function ( animate ) {
		var border = 1;
		var padding = 0;
		
		var dim = extractDim(this.imageGrabDiv);
		var l = dim.l;
		var t = dim.t;
		var w = dim.w;
		var h = dim.h;

		if ( animate ){
			
			if ( this.isImage() ) imageInfoDiv.hide();
			toolDiv.hide();				
			this.imageGrabDiv.hide();
			this.isAnimating=true;
			
			new Effect.Morph( this.imageDiv, {
				style: { width:w+"px", height:h+"px",left:l+"px",top:t+"px",border:"solid 2px red"  }, 
				afterUpdate:function(){ 
					copyDimensions( this.imageDiv, this.imageGrabDiv );
					this.updateSizes(false,true);
				}.bind(this),
				afterFinish:function(){
					this.isAnimating=false;
					this.updateSizes(false);
					toolDiv.show();
					if ( this.isImage() ) imageInfoDiv.show();
					this.imageGrabDiv.show();
				}.bind(this),
				duration:1
			});
			return;
		}
		
		if ( this.isImage() ){
			setDimStyle( dim,this.imageDiv );
			this.image.width = w;
			this.image.height = h;
		} else {
			this.imageDiv.setStyle( {left:(l-border)+"px",top:(t-border)+"px",width:(w-2*padding)+'px',height:(h-2*padding)+'px'});
		}

		l = l + this.tb.toolsOffsetLeft;
		t = t + this.tb.toolsOffsetTop;
		
		if ( !this.isAnimating ){
			setDimStyle( dim,this.imageGrab );
			toolDiv.setStyle( {left:l+"px",top:(t+h)+"px"});
		}
		
		handleHash.get("tl").setStyle({ left:(l-7)+"px",top:(t-7)+"px"});
		handleHash.get("tr").setStyle({ left:(l+w)+"px",top:(t-7)+"px"});
		handleHash.get("bl").setStyle({ left:(l-7)+"px",top:(t+h)+"px"});
		handleHash.get("br").setStyle({ left:(l+w)+"px",top:(t+h)+"px"});
		
		if ( this.isImage()){
			// var il = Math.max( (l+w-22),( l + toolDiv.getWidth() ) );
			if ( !this.isAnimating ){
				var il = Math.max( (l+w-22),( l + 82 ) );
			
				var scaleFactor = w / this.origWidth;
				var ppi = pixelPerInch / scaleFactor;

				var resIdx = 0;
				var infoText = "";
				if ( ppi < PPI_WARN_RED ){
					resIdx=0;
					infoText = PPI_WARN_RED_TITLE;
				} else if ( ppi < PPI_WARN_YELLOW ){
					resIdx=1;
					infoText = PPI_WARN_YELLOW_TITLE;
				} else {
					resIdx = 2;
					infoText = PPI_WARN_GREEN_TITLE;
				}
				imageInfoDiv.setStyle( { left:il+'px', top:(t+h)+'px', backgroundPosition:'0 -'+(resIdx*20)+'px' } );
				$("imageInfoImage").setAttribute('title', infoText);
			}
		} else {
			handleHash.get("l").setStyle({ left:(l-7)+"px",top:Math.round(t+h/2-3.5)+"px"});
			handleHash.get("r").setStyle({ left:(l+w)+"px",top:Math.round(t+h/2-3.5)+"px"});
			handleHash.get("b").setStyle({ left:Math.round(l+w/2-3.5)+"px",top:(t+h)+"px"});
			handleHash.get("t").setStyle({ left:Math.round(l+w/2-3.5)+"px",top:(t-7)+"px"});
		}
	},
	
	finishMove:function(e){
		Contentbox.stopMoveListeners();
		var hasChanged = ( this.resizeCounter > 0 ) || ( this.moveCounter > 0 );
		this.resizeCounter = -1;
		this.moveCounter = -1;
		if ( hasChanged ){
			this.dim = extractDim(selectedContentbox.imageGrabDiv);
			selectedContentbox.submitMove();
			Event.stop(e);
		}
	},
	
	submitMove : function() {
		if ( this.isInEditMode ) return;
		this.imageGrabDiv.setStyle( { cursor:null } );
		if ( this.isSaved ) return;
		this.isSaved=true;
		
		var dim = extractDim(this.imageGrabDiv);
		var url = Contentbox.SubmitUrl + "&xpos=" + dim.l + "&ypos=" + dim.t + "&width=" + dim.w + "&height=" + dim.h + "&box=" + this.id + "&zind=" + this.zIndex;
		// alert(url + " / " + $("statusFrame").src);
		submitToIFrame("statusFrame",url);
	},
	
	editorFrame : function(){
		var result = $$('iframe.webeditor_contenteditable')[0];
		if (!result) result = $$('iframe.webeditor_contenteditable_disabled')[0];
		if (!result) result = $('editorContentFrame');
		return result;
	},
	
	editorBody : function(){
		var b = this.editorFrame().contentWindow.document.body;
		return b;
	},
	
	baseFontSizeFromEditor : function(){
		var result = stripPx( Element.getStyle( this.editorBody() ,"font-size") );
		return result ? result : Contentbox.BASE_FONT_SIZE_DEFAULT;
	},

	baseFontSizeFromDiv : function(){
		var result = stripPx( Element.getStyle( this.imageDiv ,"font-size") );
		return result ? result : Contentbox.BASE_FONT_SIZE_DEFAULT;
	},
	
	setEditorBaseFontSize : function( size ){
		Element.setStyle( this.editorBody(), { "fontSize":size } );
	},
	
	changeBaseFontSize : function( up ){
		var size = this.baseFontSizeFromEditor();
		var arr = Contentbox.BASE_FONT_SIZE_ARRAY;
		if ( up ){
			size = arr.detect( function(e){ return (e > size); } );
			if ( !size ) size =  arr.max();
		} else {
			size = arr.reverse(false).detect( function(e){ return (e < size); } );
			if ( !size ) size =  arr.min();
		}
		var content = WebEditorGetContent();
		
		// alert( "BEFORE: " + content );
	 	content = content.replace(/(<\w+\s+[^>]*)style=["']([^>]*)(font-size:[^>;]+;)([^>]*)["']([^>]*>)/gi, "$1style=\"$2$4\"$5"); 
	 	content = content.replace(/(<font[^>]*)size=["']?([1-7])["']?([^>]*>)/gi, "$1$3"); 
	 	content = content.replace(/(<font[^>]*)class=["']?fontSize\d["']?([^>]*>)/gi, "$1$2"); 
	 	// content = content.replace(/<font\s*>(.*)<\/font>/gi, "$1"); 
	 	content = content.replace(/\n/gmi, " "); 
	 	content = content.replace(/<font\s*>(.*)<\/font>/gi, "$1"); 
	 	
		// alert( "AFTER: " + content );

		WebEditorSetContent( content );
		this.setEditorBaseFontSize(size);
	},
	
	startEditText : function(){
		if (this.isImage()) return;
		if (this.isInEditMode ) return;
		// hide controls
		
		$("textPlacementInfo").hide();
		$("savebtn").hide();
		$("buttonbar").show();
		
		handleHash.values().invoke('hide');
		
		this.updateToolboxVisibility( false );
	
		var dim = extractDim(this.imageGrabDiv);
		var w = dim.w;
		var h = dim.h;
		var l = dim.l;
		var t = dim.t;

		var fl = l+1;
		var ft = t+1;
		var fh = h-4;
		var fw = w-1;
		
		var frame = this.editorFrame();
		Element.extend(frame.parentNode).setStyle( { width : fw+'px', height:fh+'px', left:fl+'px', top:ft+'px', border:'none' } );
		frame.width = fw;
		frame.height = fh;

		var th = ($("webeditorToolbox").getHeight()+2);
		$("webeditorToolboxWrapper").setStyle( { height:'50px', overflow:'hidden', border:'1px solid black' } );
		$("webeditorToolbox").setStyle( { top:'0px' } );
		
		var content = this.imageDiv.innerHTML;
		if (content == "" ) content = " ";
		this.lastContent = content;
		var fontSize = this.baseFontSizeFromDiv();
		if (!fontSize){ 
			fontSize = Contentbox.BASE_FONT_SIZE_DEFAULT;
			this.setEditorBaseFontSize(fontSize);
		}
		this.lastBaseFontSize = fontSize;

		// frame.focus();
		this.imageDiv.update("");
		this.imageDiv.setStyle( { border: "1px solid #900" } );

		this.isInEditMode = true;

		WebEditorSetContent( content );
		Element.setStyle( this.editorBody(), { "fontSize":fontSize+"px" } );
		WebEditorFocus();

	},
	
	exitEditText : function( content, fontSize ){
		var frame = this.editorFrame();
		Element.extend(frame.parentNode).setStyle( { top : "-1000px" } );
		$("webeditorToolboxWrapper").setStyle( { height:'0px',  overflow:'hidden', border:'none' } );
		$("webeditorToolbox").setStyle( { top:'-1000px' } );

		$("buttonbar").hide();
		$("savebtn").show();
		$("textPlacementInfo").show();

		this.imageDiv.setStyle( { border: "1px dashed #900" } );
		this.isSaved=true;
		this.isInEditMode=false;
		
		this.imageDiv.innerHTML = content;
		this.imageDiv.setStyle( { "fontSize": fontSize +"px" } );
		// alert("exitEditText: " + this.imageDiv.inspect() );
		// alert("exitEditText: " + this.imageDiv.getStyle("fontSize") );
		if ( this.isLoaded ){
			handleHash.values().invoke('show');
			toolDiv.style.visibility = "visible";
			this.updateToolboxVisibility( true );
		}
	},
	

	saveEditText : function(content,fontSize){
		if (this.isImage()) return;
		if (!content) content= WebEditorGetContent();
		if (!fontSize) fontSize=this.baseFontSizeFromEditor();
    	// this.imageDiv.update( content );

		$('editorContentField').value=content;
		$('editorContentFontSizeField').value=fontSize;
		$('editorContentIdField').value=this.id;
		// alert("editorContentIdField" + $("editorContentIdField").value + "content" + $('editorContentField').value ); 
		$('editorContentField').form.submit();
		return [content,fontSize];
	},
	
	saveAndExitEditText : function(){
		if (this.isImage()) return;
		var savedVals = this.saveEditText();
		var content = savedVals[0]; 
		var fontSize = savedVals[1];
		this.lastContent=content;
		this.lastBaseFontSize = fontSize;
    	// this.imageDiv.update( content );
		
		var dim = extractDim(this.imageGrabDiv);
		var l = dim.w/2 -16;
		var t = dim.h/2 -16;
		
    	var loadDiv = "<div style='position:absolute; zIndex:1000; top:" + t +"px; left:" + l + "px; height:32px;width:32px;'>";
    	loadDiv += "<img src='" + SPCM.loadingImage.src + "' width=32 height=32>"
    	loadDiv += "</div>"
    	this.isLoaded = false;
   		this.exitEditText(loadDiv, fontSize);
	},
	
	setHtml : function( html ){
		if (this.isImage()) return;
		this.imageDiv.innerHTML = html;
		this.isLoaded = true;
		if ( this == selectedContentbox ){
			handleHash.values().invoke('show');
			toolDiv.style.visibility = "visible";
			this.updateToolboxVisibility( true );
		}
	},
	
	cancelEditText : function(){
		if (this.isImage()) return;
		this.saveEditText(this.lastContent,this.lastBaseFontSize);
		this.exitEditText(this.lastContent,this.lastBaseFontSize);
	},
	
 	lastContentIsEmpty:function(){
		return ( ( this.lastContent==null) || this.lastContent.blank() );
 	},

	remove : function(){
		var url = removeImageUrl + '&removedImage=' + this.id + '&box=' + this.tb.id; 
		this.updateToolboxVisibility( false );
		unselectAllImages();
		if ( this.isImage() || !this.lastContentIsEmpty() ){
			var fadeObj = ( this.image ) ? this.image : this.imageDiv;
			Effect.Fade(fadeObj, {duration:0.5, afterFinish: function() { this.dispose(); }.bind(this) });
		} else {
			this.dispose();
		}
		submitToIFrame("statusFrame",url);
	}
	
}


// BEGIN Contentbox Class methods
Object.extend(Contentbox, {

checkImageLoad:function(cb){
	if ( !cb.isImage() ) return;
	if ( cb.isLoaded ){
		if ( cb.loadDiv ){ 
			cb.loadDiv.remove();
			cb.loadDiv = null;
		}
		return true;
	} else if ( !cb.loadDiv && !cb.isAnimating ){
		cb.loadDiv = new Element('div',{ id: "load" + this.id +"Div"} ).setStyle( {
			// border:"1px solid red",
			position:"absolute", zIndex:1000, top:"50%", left:"50%", height:"32px", width:"32px", margin:"-16px 0px 0px -16px"
		});
		cb.loadDiv.appendChild(
			new Element('img',{ id:"load" + cb.id+"Img",  src:SPCM.loadingImage.src, width:32, height:32 } )
		);
		cb.imageDiv.appendChild( cb.loadDiv );
	}
	return false;
},

preloadImageTask:function( pe, cbArray ){
	var finished = true;
	cbArray.each( function(cb){
		finished = finished && Contentbox.checkImageLoad(cb);
	});
	if ( finished ) pe.stop();
},

makeNew:function( id, tbId, config ){
	var tb = Templatebox.findWithId(tbId);
	if (!tb) return null;
	var cb;
	if ( tb.isStamp() ){
		cb = new FixContentbox( id,tb,config ); 
		return;
		// return cb.createDOM();
	} else {
		cb = new Contentbox( id,tb,config ); 
		cb.createDOM();
		cb.setZIndex( config.zIndex );
	}

	new PeriodicalExecuter(function(pe) { Contentbox.preloadImageTask(pe,[cb] ); }, 0.5);
	unselectAllImages();

	if ( !tb.isStamp() ){
		cb.select();
		if (cb.maximise) cb.resizeMax();
		if (!cb.isImage() ){
			cb.startEditText();
		}
	}	

	// cb.imageGrabDiv.onmousedown=cb.selectAndInitMove;

	cb.imageGrabDiv.observe('mousedown', cb.selectAndInitMove.bindAsEventListener(cb) );
},

init:function( droppedImageId ){
	// alert("initArray: " + contentboxArray.length + "; droppedImageId" + droppedImageId );
	
	var droppedContentbox = null;
	// var cb;
	var lastZIndex = -1;

	var toSubmitArray = new Array();
	
	contentboxArray.each( function(cb){
		cb.createDOM();
		// alert("cb.zIndex: " + cb.zIndex );
		var currZIndex = cb.zIndex;
		if (!currZIndex){
			if ( lastZIndex < 0 ) lastZIndex = 499;
 			currZIndex = lastZIndex+1;
		}
		if ( currZIndex <= lastZIndex ){ 
			currZIndex = ( lastZIndex*1 ) + 1;
			cb.setZIndex( currZIndex );
			toSubmitArray.push(cb);
		} else {
			cb.setZIndex( currZIndex );
		}
		// alert("AFTER cb.zIndex: " + cb.zIndex );
		lastZIndex = currZIndex;
		if ( ( droppedImageId != "" ) && ( droppedImageId == cb.id ) ){
			droppedContentbox = cb;
		}
	});
	new PeriodicalExecuter(function(pe) { Contentbox.preloadImageTask(pe, contentboxArray.clone() ); }, 0.5);
	["tl","tr","bl","br","l","r","b","t"].each( function(id){
		var h = $("handle_" + id);
		if ( id.length == 1 ){
			handleEdgeArray.push(h);
		} else {
			handleCornerArray.push(h);
		} 
		handleHash.set(id,h);
		Event.observe(h, 'mousedown', Contentbox.initResize.bindAsEventListener(h) );
	});

	toolDiv = $("imageToolboxDiv");
	toolFrontDiv = $("imageToolboxFrontDiv");
	toolMaxsizeDiv = $("imageToolboxMaxSizeDiv");
	toolBackDiv = $("imageToolboxBackDiv");
	toolEditDiv = $("imageToolboxEditDiv");
	imageInfoDiv = $("imageInfoDiv");
	
	unselectAllImages();
	// window.onbeforeunload = saveEditorOnExit;

	if ( droppedContentbox ){
		droppedContentbox.select();
		if (droppedContentbox.maximise){
			droppedContentbox.resizeMax();
		}
	}
	contentboxArray.each( function(cb){
		cb.imageGrabDiv.observe('mousedown', cb.selectAndInitMove.bindAsEventListener(cb) );
	});
},

stopMoveListeners:function(){
	if ( this.ListenerMouseMove){
		Event.stopObserving(document.body, 'mousemove', this.ListenerMouseMove );	
	}
	if ( this.ListenerMouseUp){
		Event.stopObserving(document.body, 'mouseup', this.ListenerMouseUp );	
	}
},
initMoveListeners:function( cb, isResize ){
	this.stopMoveListeners();
	if (isResize){
		this.ListenerMouseMove = 	cb.handleResize.bindAsEventListener(cb);
	} else {
		this.ListenerMouseMove = 	cb.handleMove.bindAsEventListener(cb);
	}
	Event.observe(document.body, 'mousemove', this.ListenerMouseMove );
	this.ListenerMouseUp = cb.finishMove.bindAsEventListener(cb);
	Event.observe(document.body, 'mouseup', this.ListenerMouseUp );
},
initResize:function(e){
	var cb = selectedContentbox;
	if ( !cb ) return false;
	cb.resizeType = this.id.replace('handle_','');
	cb.doInitResize( e.clientX, e.clientY );
	e.stop();	
	return false;
},

WARN_CANCEL_EDIT:"Wollen Sie wirklich alle €nderungen im Text rŸckgŠngig machen?",

cancelEditText : function(){
	var cb = selectedContentbox;
	if (!cb) return;
	if (cb.isImage()) return;
	var content=WebEditorGetContent();
	if ( content != cb.lastContent ){ 
		var doDel = confirm(this.WARN_CANCEL_EDIT);
		if (!doDel) return;
	}
	cb.cancelEditText(content);
}

});
// END Contentbox class methods

function snapToBorder( xOffset, yOffset, ratio ) {
	var result = yOffset; 

	if ( Math.abs(xOffset) <= Contentbox.magneticBorderRange ){
		result -= ( 0.5 + xOffset / ratio );
		if ( (result > 0) && ( result <= Contentbox.magneticBorderRange ) ){
			result = 0;
		} 
	} else if (  Math.abs(result) <= Contentbox.magneticBorderRange ){
		result = 0;
		var newXOffset = xOffset - (yOffset-result) * ratio;
		// wenn drinnen, dann schauen ob Rand entstanden ist
		if ( ( newXOffset > 0 ) && ( newXOffset <= Contentbox.magneticBorderRange ) ){
			result = result - ( 0.5 + newXOffset / ratio );
		} 
	}
	return result;
}

function limitToLT( borderVal, newVal ) {
	var offset = newVal - borderVal;
	if ( offset < 0 ) return borderVal;
	return newVal;
}

function limitToRB( borderVal, newVal ) {
	var offset = borderVal - newVal;
	if ( offset < 0 ) return borderVal;
	return newVal;
}

function snapToEdge( borderVal, newVal ) {
	var offset = Math.abs( newVal - borderVal);
	if ( offset <= Contentbox.magneticBorderRange ) return borderVal;
	return newVal;
}


function unselectAllImages () {
	toolDiv.style.visibility = "hidden";
	handleHash.values().invoke('hide');
	contentboxArray.each( function(cb){ 
		if ( !cb.isImage() ) cb.imageDiv.setStyle( { border: "1px dashed #ccc" } );	
	});
}

function bringToFront () {
	if (!selectedContentbox) return;
	selectedContentbox.bringToFront();
}

function bringToBack () {
	if (!selectedContentbox) return;
	selectedContentbox.bringToBack();
}

function resizeMax () {
	if (!selectedContentbox) return;
	selectedContentbox.resizeMax();
}		

function startEditText(){
	if (!selectedContentbox) return;
	if (selectedContentbox.isImage()) return;
	selectedContentbox.startEditText();
}

function saveAndExitEditText(){
	if (!selectedContentbox) return;
	if (selectedContentbox.isImage()) return;
	selectedContentbox.saveAndExitEditText();
}

function cancelEvent(e){
	var el = e.element();
	var name = el.tagName;
	if (!name) return true;
	//alert(source.tagName);				
	if( (name=='INPUT') || (name=='TEXTAREA') ) return true;
	e.stop();
	return false;
}

SPCM.KeyEventArray = [ Event.KEY_DELETE, Event.KEY_LEFT,Event.KEY_UP,Event.KEY_RIGHT, Event.KEY_DOWN ];

function moveImageWithCursor(ev) {
	var selCb = selectedContentbox;
	if ( !selCb ) return true;
	if ( selCb.isInEditMode ) return true;
	var isSL = false;
	senderlineArray.each( function(sl){
		if ( sl.visible() ){
			isSL=true;
			return;
		}
	});
	if ( isSL ) return true;
	var ek= ev.which || ev.keyCode;
	if ( SPCM.KeyEventArray.indexOf(ek) < 0 ) return false;
	var el = ev.element();
	var tagName = el.tagName;
	if (!tagName || tagName.blank() ) return true;
	['INPUT','TEXTAREA','SELECT'].each( function(s){ if(s == tagName) return true; });

	if ( [ Event.KEY_DELETE ].indexOf(ek) >=0 ){
		selCb.remove();
		return false;
	}	
	// alert( isMouseOverElement( ev, selectedContentbox ) );
	ev.stop();
	return selCb.moveImageWithCursor( ek );	
}

      	
function afterFinishRevertHandler(){
	if ( dropWasDenied ){
		alert( dropWasDeniedMessage );
		dropWasDenied = false;
	}
}
 
function makeDragableImage( imageId ){
	Event.observe( imageId,'dblclick',  function(e){ 
		var tb = Templatebox.getEditable();
		if ( !tb ) return false;
		if (tb.hasMaxContentCount() ){
		// if (maxContentboxCountOnPage){ 
			alert( dropWasDeniedMessage );
			// Event.stop(e);
			return false;
		}
		var el = Event.element(e);
		
		var idx = contentboxArray.length;
		var l = 10 + ((idx*50) % ( tb.width - 50 ) );
		var t = 10 + ((idx*50) % ( tb.height - 50 ) );
		
		tb.submitDrop( l, t, null, null, $(imageId) );
		Event.stop(e);
		return false;
	});
	return new Draggable( imageId ,{
		ghosting:true, // true results in an error in IE 7
		revert: true, // function(){ return isRevertEffectOn; }, 
		reverteffect : function(element, top_offset, left_offset) {
			var dur = isRevertEffectOn ? Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2))*0.02 : 0;
			var effect = new Effect.Move(element, { 
				x: -left_offset, y: -top_offset, duration: dur, 
				queue: {scope:'_draggable', position:'end'}, 
				afterFinish:function(){ 
					if ( isBrowserIEOrOpera() ) $(imageId).setStyle( { position:"static" } )
					afterFinishRevertHandler(); 
				}
			});
		}
	});
}


var removeImageURL = "";

function imageRemoveHandler(){
	if ( selectedContentbox ) selectedContentbox.remove();
}

var removeUploadImageURL = "";

function removeUploadImage(id){
 	Effect.Fade(id, {duration:0.5, afterFinish: function() { 
 			Element.remove(	id + "_DIV" ); 
			updateTipps.defer();
 		} 
 	});
 	// Element.remove(	id + "_DIV" );
	var imgId = id.replace("draggableImage_","");
	var url = removeUploadImageURL + "&uploadImageId=" + imgId;
	submitToIFrame("statusFrame",url);
}

function initUploadedImage( id ){
	$(id +"_DIV").show();
	makeDragableImage( id );
	var delId = id  + 'Del';
	$(delId).hide(); 
	Event.observe(id, 'mouseover', function(e){ $(delId).show(); });
	Event.observe(id, 'mouseout', function(e){ 
		if (!isMouseOverElement(e,delId)) $(delId).hide(); 
	});
	Event.observe(delId, 'mouseout', function(e){ 
		if (!isMouseOverElement(e,id)) $(delId).hide(); 
	});
	Event.observe( delId,'click', function(e){ removeUploadImage( id ); });
}

function selectHighestTextbox(){
	for (var i=contentboxArray.length-1; i>=0; i-- ){
		cb = contentboxArray[i];
		if ( !cb.isImage() ){
			cb.select();
			return;
		}
	}
}

function getTextboxById( id ){
	for (var i=contentboxArray.length-1; i>=0; i-- ){
		cb = contentboxArray[i];
		if ( !cb.isImage() && cb.id == id ){
			return cb
		}
	}
	return null;
}


/*** Cliparts ***/

var ClipartCategory = Class.create();

ClipartCategory.allClipartArray = new Array();
ClipartCategory.clipartCategoryArray = new Array();
ClipartCategory.tdDisplayedArray = new Array();
ClipartCategory.selectedClipartCategory = null;

ClipartCategory.clipartDisplayRow = null;
ClipartCategory.slider = null;

ClipartCategory.batchSize = 4;
ClipartCategory.selectContentCategoryURL = "",


ClipartCategory.prototype = {
	initialize: function( extId ) {   
		//alert("constructor ClipartCategory: " + extId + ", " + text );
		this.extId = extId;
		// this.text = text;
		this.clipartArray = new Array();
		ClipartCategory.clipartCategoryArray.push( this );
		if ( !ClipartCategory.selectedClipartCategory ) ClipartCategory.selectedClipartCategory = extId;
		var isSelected = ( extId == ClipartCategory.selectedClipartCategory );
		// ClipartCategory.appendOption( extId, text, isSelected );
		//alert("constructor ClipartCategory: " + extId + ", " + text );
	},

	addClipart : function( withId, withImageUrl ){
		newClipart = new Clipart( withId,withImageUrl );
		this.clipartArray.push( newClipart );
		ClipartCategory.allClipartArray.push( newClipart );
	},
	addCliparts : function( idArray ){
		idArray.each( function( def ){ 
			if ( def && ( def.length == 3 ) ){ 
				var id = def[0];
				var url = "/spi/processedcliparts/" + id;
				if ( def[1] ){ 
					url += "_tiny_idx.";
				} else {
					url += "_tiny.";
				}
				url +=  def[2];
				this.addClipart(id,url);
			}
		}.bind(this) );
	}
}

ClipartCategory.scrollHorizontal = function(value, element, slider) {
	element.scrollLeft = Math.round(value/slider.maximum*(element.scrollWidth-element.offsetWidth));
}
	
/** Event handler for mouse wheel event. */
ClipartCategory.wheelHandler = function(event){
	if (!ClipartCategory.slider) return true;
	var delta = 0;
	if (event.wheelDelta) { /* IE/Opera. */
		delta = event.wheelDelta/120;
		if (window.opera) delta = -delta;
	} else if (event.detail) { 
		delta = -event.detail/3;
	}

	var count = selectedClipartArray().length;
	if ( count > 0 );
	delta /= count;
	if (delta) ClipartCategory.slider.setValueBy(-delta);

	if (event.preventDefault) event.preventDefault();
	event.returnValue = false;
}

ClipartCategory.initSlider = function( contentId, trackWrapId, trackId, handleId, handleLeftId, handleRightId ){
	var slider = ClipartCategory.slider;
	if ( slider ){
		ClipartCategory.slider = null;
		slider.dispose();
	}
	var ce = $(contentId);
	var sw = ce.scrollWidth;
	var ow = ce.offsetWidth;
	// alert("init:" + contentElem.scrollWidth + ", " + contentElem.offsetWidth );
	if ( true && sw > ow ) {
		// $(trackWrapId).show();
		$("clipartTrackHandle").show();
		var newW = (ow*ow/sw).toFixed();
		var rightW = $("clipartTrackHandleRight").getWidth();
		if ( newW < rightW * 2 ) newW = rightW*2;
		// alert( newW );
		$("clipartTrackHandle").setStyle( { width:newW+"px" } );
		var leftW = newW - rightW;
		$("clipartTrackHandleLeft").setStyle( {width:leftW+"px" } );
		$("clipartTrackHandleRight").setStyle( {left:leftW+"px" } );
		var slider = new Control.Slider( handleId , trackId, {
			onSlide:  function(v) { ClipartCategory.scrollHorizontal(v, ce, slider);  },
			onChange: function(v) { ClipartCategory.scrollHorizontal(v, ce, slider); }
		});
		slider.setEnabled();
		slider.setValue(0);
		ClipartCategory.slider = slider;
	} else {
		// $(trackWrapId).hide();
		$("clipartTrackHandle").hide();
	}
	var tipp = $("tippTextboxInsert");
	if ( tipp ){
		updateTipps( tipp.id );
	}
}

ClipartCategory.refreshSlider = function(){
	ClipartCategory.initSlider( 'clipartContent', 'clipartTrackWrap', 'clipartTrack', 'clipartTrackHandle' );
}

/*
ClipartCategory.appendOption = function( withId, withText, isSelected ){ 
	var optionElement = new Element("OPTION", { value:withId, selected:isSelected } );
	optionElement.update(withText);
	$("clipartCategorySelect").appendChild(optionElement);
}
*/

function selectedClipartArray(){
	var selCat = ClipartCategory.selectedClipartCategory;
	if ( selCat ){
		return selCat.clipartArray;
	}	
	return ClipartCategory.allClipartArray;
}

ClipartCategory.procCount = 0;
ClipartCategory.lastCount = 0;
ClipartCategory.scn = 0;


ClipartCategory.checkSlider = function( scn, len ){
	if ( scn != ClipartCategory.scn ) return false;
	
	var cnt = ClipartCategory.procCount;
	var lastCnt = ClipartCategory.lastCount;
	 ClipartCategory.lastCount = cnt;
	
	var row = ClipartCategory.clipartDisplayRow;
	if ( row && row.hasChildNodes() ){
		// console.log("checkSlider:" + cnt + "," + len );
	    if ( cnt != lastCnt ){
	    	/*
	    	row.select("img").each( function(img){
				makeDragableImage( img.id );
				if ( isBrowserIEOrOpera() ) img.setStyle( { position:"static" });
	    	});
	    	*/
	    	ClipartCategory.refreshSlider();
    	}
    	if ( cnt < len  ){
			setTimeout( function(){ ClipartCategory.checkSlider( scn, len ); }, 1000 );
    	}
	}
}

function insertCliparts( scn, showArray ){
	if ( scn != ClipartCategory.scn ) return false;
	// alert("insertCliparts");
	// ClipartCategory.imageProcessCount = 0;
	ClipartCategory.refreshSlider();
	if (!showArray) return;

	/*
		for ( i=0;i<showArray.length; ++i ){
			var clipart = showArray[i];
			clipart.makeTD( ClipartCategory.clipartDisplayRow, showArray.length );
		}
	*/
	var len = showArray.length;
	if ( len > ClipartCategory.batchSize ) len = ClipartCategory.batchSize;
	for ( i=0;i<len; ++i ){
		var clipart = showArray[i];
		clipart.makeTD( scn, ClipartCategory.clipartDisplayRow, showArray.length );
	}
	if ( showArray.length > ClipartCategory.batchSize )	{
		// setTimeout( function(){
		for ( i=len;i<showArray.length; ++i ){
			var clipart = showArray[i];
			clipart.makeTD( scn, ClipartCategory.clipartDisplayRow, showArray.length );
		}
		// }, 10 );
		setTimeout( function(){ ClipartCategory.checkSlider( scn, showArray.length ); }, 1000 );
	}

}

function showSelectedCliparts ( ){

	var scn = ClipartCategory.scn+1;
	ClipartCategory.scn = scn;
	ClipartCategory.procCount = 0;
	ClipartCategory.lastCount = 0;

	// console.log("showSelectedCliparts scn: " + scn + ": " + ClipartCategory.selectedClipartCategory.text );

	var showArray = selectedClipartArray();

	var row = ClipartCategory.clipartDisplayRow;
	if ( row && row.hasChildNodes() ){
	    while ( row.childNodes.length >= 1 ){
	    	var child = row.firstChild;
	    	if ( child.scn != scn ){
	        	row.removeChild( child );	        	
	        }
    	} 
	}
	insertCliparts.defer( scn, showArray );
	
	
}


function selectClipartCategory( byId ){
	var result = ClipartCategory.clipartCategoryArray.find( function(cc){
		return (cc.extId == byId);
	});
	ClipartCategory.selectedClipartCategory = result;
	showSelectedCliparts();
}


function clipartCategorySubmit(){
	var theId=0; 
	if ( null != ClipartCategory.selectedClipartCategory ){
		theId = ClipartCategory.selectedClipartCategory.extId;
	}
	var url = ClipartCategory.selectContentCategoryURL + "&contentCategoryId=" + theId;
	submitToIFrame("statusFrame",url);
	// return result;
}


function insertTDImage( scn, id, image, td, len ){
	if ( scn != ClipartCategory.scn ) return;
	if ( td.hasChildNodes() ) return;
	// img.src = image.src;
	// alert ("image: " + image + "src" + image.src + ":" + image.width + "," + image.height );
	
	var img = new Element('img', { id:id, src:image.src, width:image.width, height:image.height });
	img.addClassName('draggable_image');
	
	td.appendChild(img);
	
	makeDragableImage( id );
	if ( isBrowserIEOrOpera() ) img.setStyle( { position:"static" });
	img.style.zIndex =10000;
}

var clipartArray = new Array();

var Clipart = Class.create();
Clipart.tdId = 1;

// Clipart.imageHash = new Hash();

Clipart.prototype = {
	initialize: function( clipartPk, imageUrl ) {   
		// alert("constructor Clipart: " + clipartPk + ", " +  imageUrl );
		this.extId = "draggableClipart_" + clipartPk;
		this.imageUrl = imageUrl;
		clipartArray.push(this);
		this.td = null;
	},
	
	makeTD : function( scn, parentRow, len ){
		if ( scn != ClipartCategory.scn ) return;
		var td = this.td;
		if (!td){ 
			td = new Element('td');
			td.id = "TD_" + Clipart.tdId;
			td.scn = scn;
			Clipart.tdId++;
			this.td = td;
		}
		parentRow.appendChild( td );
		
		
		var img = new Image();
		img.onload = function(){
			if ( scn != ClipartCategory.scn ) return;
			ClipartCategory.procCount++;
			// console.log("onload: " + scn + "; cnt: " + cnt + "; hash: " + ClipartCategory.scn2procCount.get(scn) );
			insertTDImage(scn, this.extId,img,td,len);
		}.bind(this);
		img.onerror = function(){
			if ( scn != ClipartCategory.scn ) return;
			ClipartCategory.procCount++;
		}.bind(this);
		img.src = this.imageUrl;

	}	
}

function clipartById( anId ){ return clipartArray.find( function(c){ return (anId == c.extId) }); }


var ParseHtml = {
	scTagOpen:'<span class="wrapSpecialChar">',
	scTagClose:'</span>',
	scUnwrapRE:null,
	scWrapRE:null,
	fontSizeDecodeRE : /<font([^>]*)size=\"?([1-7])\"?([^>]*)>/gi,
	fontSizeEncodeRE : /<font([^>]*)class=\"?fontSize([1-7])\"?([^>]*)>/gi,
	isInitalised:false
};

ParseHtml.init = function(){
	if ( ParseHtml.isInitalised ) return;
	var wrapInFontArray=$w("harr crarr lArr uArr rArr dArr hArr hArr forall part exist empty nabla isin notin ni prod sum minus lowast radic prop infin ang and or cap cup int there4 sim cong asymp ne equiv le ge sub sup nsub sube supe oplus otimes perp sdot lceil rceil lfloor rfloor lang rang loz spades clubs hearts diams");
	var scWrapPat = '(&(' + wrapInFontArray[0];
	for (var i = 1, len = wrapInFontArray.length; i < len; ++i ){
		scWrapPat += "|";
		scWrapPat += wrapInFontArray[i];
	}
	scWrapPat += ");)"
	var scUnwrapPat = ParseHtml.scTagOpen + scWrapPat + ParseHtml.scTagClose;
	ParseHtml.scUnwrapRegex = new RegExp(scUnwrapPat, "gmi");
	ParseHtml.scWrapRegex = new RegExp(scWrapPat, "gmi");
	ParseHtml.isInitalised=true;
}


ParseHtml.decode = function( content ){
	ParseHtml.init();
	//alert("0: " + content);
 	content = content.replace(/<font([^>]*)size="\+0"([^>]*)>/gi, "<font$1$2>"); 
 	content = content.replace(/<font([^>]*)size="\-0"([^>]*)>/gi, "<font$1$2>"); 
 	content = content.replace(/<font\s*>/gi, "<font>"); 
	//alert("1: " + content);
	content = content.replace(ParseHtml.fontSizeDecodeRE, '<font$1class=\"fontSize$2\"$3>'); 
	//alert("2: " + content);
	
	content = content.replace(/<p\s+\/>/gi, '<p>&nbsp;</p>'); 
	content = content.replace(/<font\s+\/>/gi, ''); 
	//alert("3: " + content);
	
	// wrap special characters for BOLD printing
	content = content.replace(ParseHtml.scUnwrapRegex, '$1' ); 
	content = content.replace(ParseHtml.scWrapRegex, ParseHtml.scTagOpen + '$1' + ParseHtml.scTagClose ); 
	// Bugfix alignment in safari is written in body
	if ( selectedContentbox && !selectedContentbox.isImage() ){
		var editBody = selectedContentbox.editorBody();
		var align = Element.getStyle( editBody,"text-align");
		if ( ( align ) && ( align != "left" ) ){
			content = "<div style='text-align:"+align+";'>" + content + "</div>";
			Element.setStyle( editBody,"text-align",null);
		}
	}	
	//alert("4: " + content);
 	return content; 
} 


ParseHtml.encode = function(content) {
	ParseHtml.init();
 	content = content.replace( ParseHtml.fontSizeEncodeRE, '<font$1size=$2$3>'); 
	return content; 
}