// JavaScript Document
<!--

//Ids
var main = null;
var contentDiv = null;
var contentDivId = "content";
var selectedId = "";
var formerSelectedId = "";
var toolbarId = "toolbar";
var editFormId = "editFormular";
var contentStoreId = "contentStore";
var contentHeightStoreId = "heightStore";
var popupId = 'popup';
var popupImgId = 'popupImage';

//Drag stuff
var dragMode = false;
var startMouseX = 0;
var startMouseY = 0;
var startTop = 0;
var startLeft = 0;
var bottomOffset = 30;	//Bottom space for auto in/de-crease 

//Resize stuff
var resizeInterval;

//Style
var selectedBorderStyle = '1px dashed #444444';
var imgBorder = '1px solid #444444';

//Toolbar
var b1; var b2; var b3; var b4; 	//Buttons for img and divs
var i1; var i2; 					//Buttons only for img
var d1; var d2; var d3; var d4; 	//Buttons only for divs
var d5; var d6; var d7; var d8;
var d9; var d10; var d11; var d12;
var d13; var d14;
var titleAddPopup = 'Popupfunktion hinzuf&uuml;gen';
var titleRemovePopup = 'Popupfunktion entfernen';


/* Methods *************************************************************************/

//Init stuff, add onClicklisteners
function initEditor(){
	contentDiv = document.getElementById(contentDivId);
	main = contentDiv.offsetParent;
	addOnClickListeners();
	
	//Init Toolbar Buttons
	b1 = document.getElementById('toolbarMove');
	b2 = document.getElementById('toolbarResizeInc');
	b3 = document.getElementById('toolbarResizeDec');
	b4 = document.getElementById('toolbarRemoveElement');
	
	i1 = document.getElementById('toolbarBorder');
	//i1.style.display = "inline";
	i2 = document.getElementById('toolbarSetClickable');
	
	d1 = document.getElementById('toolbarBold');
	d2 = document.getElementById('toolbarItalic');
	d3 = document.getElementById('toolbarHeader1');
	d4 = document.getElementById('toolbarHeader2');
	d5 = document.getElementById('toolbarHeader3');
	d6 = document.getElementById('toolbarJustifyLeft');
	d7 = document.getElementById('toolbarJustifyRight');
	d8 = document.getElementById('toolbarJustifyCenter');
	d9 = document.getElementById('toolbarJustifyFull');
	d10 = document.getElementById('toolbarLinkUrl'); //DONT CHANGE URL --> addLink() method
	d11 = document.getElementById('toolbarLink');
	d12 = document.getElementById('toolbarSetFirstLetter');
	d13 = document.getElementById('toolbarColor');
	d14 = document.getElementById('toolbarList');
}

/***********************************************************************************************************/
// Move and resize:	startDrag(), stopDrag(), doDrag(), startResize(), stopResize(), resize(),
//					increaseContentDiv(), decreaseContentDiv(), setToolbar()
/***********************************************************************************************************/
//1. Start drag
function startDrag(e){
	dragMode = true;
	var e = e || window.event;
	//If mousedown on move-button, get current absolute mouseposition
	//and current top and left values for selected element
	//startMouseX = e.clientX; + (document.documentElement.scrollLeft);
	//startMouseY = e.clientY + (document.documentElement.scrollTop);
	
	//Get position relative to body: body->main->contentDiv		!wegen position:relative
	startTop = main.offsetTop + contentDiv.offsetTop;	
	startLeft = main.offsetLeft + contentDiv.offsetLeft;
	//alert(contentDiv.offsetParent.offsetParent + ": " + startTop + " " + startLeft);
	//startTop = 0;
	//tartLeft = 0;
	document.body.style.cursor='move';

}

//2. Stop drag
function stopDrag(){
	if(dragMode){
		dragMode = false;
		document.body.style.cursor='default';
	}
}

//3. do drag
function doDrag(e){
	var e = e || window.event;
	var x = e.clientX; + (document.documentElement.scrollLeft);
	var y = e.clientY + (document.documentElement.scrollTop);
	
	if(selectedId == ""){
	 	return;
	}
	var selected = document.getElementById(selectedId);
	var borderRight = contentDiv.offsetWidth + main.offsetLeft + contentDiv.offsetLeft;
	var borderTop = contentDiv.offsetTop + main.offsetTop;
	var borderLeft = contentDiv.offsetLeft + main.offsetLeft;
	
	if(dragMode){
		setSelectedEditable(false);
		
		//Change cursor
		if(x >= borderRight || x <= borderLeft || y <= borderTop ){
			document.body.style.cursor='not-allowed';
		}else{
			document.body.style.cursor='move';
		}
		
		//X-Movement
		var newLeft = (x - startLeft);
		var maxLeft = contentDiv.offsetWidth - selected.offsetWidth;
		var minLeft = 0;
		if(newLeft >= minLeft && newLeft <= maxLeft){
			selected.style.left = newLeft + "px";
		}
		
		//Y-Movement
		var curTop = clearPx(selected.style.top);
		var newTop = (y - startTop);
		//If move up
		if(newTop < curTop){
			if(newTop > 0){
				selected.style.top = newTop + "px";	
				decreaseContentDiv();
			}
		}else{
		//If move down
			selected.style.top = newTop + "px";
			increaseContentDiv(selectedId);	
		}
		
		//Reposition toolbar
		setToolbar();
	}
}

/* Resize ************************************************************************/
//1. Start resize
function startResize(mode){
	if(mode == 0){
		resizeInterval = window.setInterval("resize(0)", 20);
	}
	if(mode == 1){
		resizeInterval = window.setInterval("resize(1)", 20);
	}
}

//2. Stop resize
function stopResize(){
	window.clearInterval(resizeInterval);
}

//3. Do resize
function resize(mode){
	var selected = document.getElementById(selectedId);
	var offSet = 2;
	if(selected.tagName == "DIV"){
		offSet = 6;
	}
	var width = selected.offsetWidth-offSet; //-2 because of border
	
	if(mode == 0){
		if((selected.offsetWidth+clearPx(selected.style.left)) < contentDiv.offsetWidth){
			width += 5;
			selected.style.width = width + "px";
			increaseContentDiv(selectedId);
		}
	}
	if(mode == 1){
		width -= 5;
		if(width > 10){
			selected.style.width = width + "px";
			decreaseContentDiv();
		}
	}
}


//Enlarge content container, if necessary
function increaseContentDiv(elId){
	var el = document.getElementById(elId);
	if(el != null){
		var maxBottomLine = contentDiv.offsetHeight;
		var elementBottomLine = clearPx(el.style.top) + el.offsetHeight + bottomOffset;	
		if(elementBottomLine > maxBottomLine){
			contentDiv.style.height = elementBottomLine+"px";
		}
	}
	
}
				
//Decrease content container height if possible
function decreaseContentDiv(){
	var childs = contentDiv.childNodes;
	var maxBottomLine = 0;
	//Run through childs and get highest bottomline value
	if(childs != null){
		for(var i=0; i<childs.length; i++){
			var c = childs[i];
			if(c.nodeType == 1){
				var bottomLine = c.offsetHeight + clearPx(c.style.top);
				if(bottomLine > maxBottomLine){
					maxBottomLine = bottomLine;
				}
			}
		}
	}
		
	var h = contentDiv.offsetHeight;
	if(h > (maxBottomLine + bottomOffset)){
		h = maxBottomLine + bottomOffset;
	}
	contentDiv.style.height = h+"px";	
}


//Position toolbar and select displayed buttons
function setToolbar(){
	var toolbar = document.getElementById(toolbarId);
	
	if(selectedId == ""){
		toolbar.style.display="none";
	}else{
		var selected = document.getElementById(selectedId);
		var selTop = clearPx(selected.style.top);
		var selLeft = clearPx(selected.style.left);
		
		if(selected.tagName == "IMG"){
			//b1.style.display = "inline";
			//b2.style.display = "inline";
			//b3.style.display = "inline";
			//b4.style.display = "inline";
			
			i1.style.display = "inline";
			i2.style.display = "inline";
			
			d1.style.display = "none";
			d2.style.display = "none";
			d3.style.display = "none";
			d4.style.display = "none";
			d5.style.display = "none";
			d6.style.display = "none";
			d7.style.display = "none";
			d8.style.display = "none";
			d9.style.display = "none";
			d10.style.display = "none";
			d11.style.display = "none";
			d12.style.display = "none";
			d13.style.display = "none";
			d14.style.display = "none";
			
		}else{
			//b1.style.display = "inline";
			//b2.style.display = "inline";
			//b3.style.display = "inline";
			//b4.style.display = "inline";
			
			i1.style.display = "none";
			i2.style.display = "none";
			
			d1.style.display = "inline";
			d2.style.display = "inline";
			d3.style.display = "inline";
			d4.style.display = "inline";
			d5.style.display = "inline";
			d6.style.display = "inline";
			d7.style.display = "inline";
			d8.style.display = "inline";
			d9.style.display = "inline";
			d10.style.display = "inline";
			d11.style.display = "inline";
			d12.style.display = "inline";
			d13.style.display = "inline";
			d14.style.display = "inline";
		}
		
		//if(selected.getAttribute('className') == 'clickable'){
		if(selected.className == 'clickable'){
			//i2.setAttribute('className', 'active');
			i2.className='active';
			i2.setAttribute('title', titleRemovePopup);
		}else{
			//i2.setAttribute('className', '');
			i2.className='';
			i2.setAttribute('title', titleAddPopup);
		}
		
		toolbar.style.display = "block";
		var h = toolbar.offsetHeight;
		toolbar.style.top = (selTop-h)+"px";
		toolbar.style.left = selLeft + "px";
	}
}

/***********************************************************************************************************/
// Add and remove: removeElement(), removeAll(), addDiv(), addImg()  
/***********************************************************************************************************/
//Remove selected element from DOM-tree
function removeElement(){
	if(selectedId != ""){
		var selected = document.getElementById(selectedId);
		setSelectedEditable(false);
		contentDiv.removeChild(selected);
		selectedId = "";
		setToolbar();
		resetIds();
		addOnClickListeners();
		decreaseContentDiv();
	}
}

//Remove all elements from DOM-tree
function removeAll(){
	var allImg = contentDiv.getElementsByTagName("IMG");
	var edits = contentDiv.getElementsByTagName("DIV");
	
	for(var i=allImg.length-1; i >= 0; i--){
		var img = allImg[i];
		contentDiv.removeChild(img);
	}
	
	for(var i=edits.length-1; i >= 0; i--){
		var e = edits[i];
		//var c = e.getAttribute('class');
		var c = e.className;
		if(c == null){
			c = "";
		}
		
		if(c.indexOf('editable') != -1){
			contentDiv.removeChild(e);
		}
	}
	selectedId = "";
	setToolbar();
	decreaseContentDiv();
}


//Add editable div, containing text
function addDiv(){
	var allDivs = contentDiv.getElementsByTagName('DIV');
	var divId = "div_" + allDivs.length;
	var div = document.createElement('DIV');
	div.setAttribute('id', divId);
	//div.setAttribute('className', 'editable');
	div.className='editable';
	//div.setAttribute('ondragenter', 'return false');
	//div.setAttribute('onDragleave', 'return false');
	//div.setAttribute('onFocus', 'test();');
	//div.setAttribute('onBlur', 'stopTest();');
	div.setAttribute('onKeyPress', 'increaseContentDiv(\''+divId+'\'); decreaseContentDiv();');
	div.setAttribute('onClick', 'setSelectedElement(\''+divId+'\'); setSelectedEditable(true);');
	div.style.top = "20px";
	div.style.left = "10px";
	div.style.width = "120px";
	div.innerHTML = "<p>Text eingeben...</p>";
	
	contentDiv.appendChild(div);
	setSelectedElement(div.getAttribute('id'));
	increaseContentDiv(divId);
}

//Add an image to the parent element
function addImg(imageSrc){
	var allImg = contentDiv.getElementsByTagName('IMG');
	var imgId = "img_" + allImg.length;
	var img = document.createElement('IMG');
	img.setAttribute('id', imgId);
	img.setAttribute('onClick', 'setSelectedElement(\''+imgId+'\'); ');
	img.src = imageSrc;
	img.style.top = "20px";
	img.style.left = "10px";
	img.style.width = "150px";
	
	contentDiv.appendChild(img);
	
	img.style.height = "auto";
	setSelectedElement(img.getAttribute('id'));
	
	//To enable prop scale in IE
	increaseContentDiv(imgId);
}


/***********************************************************************************************************/
// Format: changeColor(), addLink(), justify(), addBorder(), setFirstLetter(), format()  
/***********************************************************************************************************/
function changeColor(){
	var selector = document.getElementById(d13.id);
	var color = selector.value;
	selector.style.backgroundColor = color;
	format('forecolor', color);
	
}
function addLink(){
	//TODO globalize
	var selected = document.getElementById(selectedId);
	if(selected != null){
		var urlField = document.getElementById('toolbarLinkUrl');
		var url = urlField.value;
		
		if(selected.tagName == "IMG"){
			//OnClick verhindern --> class
			/*var wrapper = document.createElement('a');
			wrapper.href = url;
			wrapper.target = "_blank";
			wrapper.appendChild(selected.cloneNode(true));
			selected.parentNode.replaceChild(wrapper, selected);*/
			
			//format('createlink', url);			
		}else{
			format('createlink', url);
		}
	}
}

function justify(dir){
	var selected =  document.getElementById(selectedId);
	switch(dir){
		case 0:	//left
			selected.style.textAlign="";
			break;
		case 1:	//right
			selected.style.textAlign="right";
			break;
		case 2:	//center
			selected.style.textAlign="center";
			break
		case 3: //justify
			selected.style.textAlign="justify";
			break;
	}
}

//Add Border to imag
function addBorder(){
	var selected =  document.getElementById(selectedId);
	if(selected.tagName == "IMG"){
		if(selected.style.border == ""){
			selected.style.border = imgBorder;
		}else{
			selected.style.border = "";
		}
	}
	
}

function setFirstLetter(){
	var selected =  document.getElementById(selectedId);
	//TODO ONLY FOR DIV
	
	//var c = selected.getAttribute('className');
	var c = selected.className;
	if(c == null){
		c = "";
	}
	
	if(c.indexOf('capital') != -1){
		c = c.replace(/ capital/g, "");
	}else{
		c = c + " capital";
	}
	//selected.setAttribute('className', c);
	selected.className=c;
	
	
}

//Format text content
function format(command, parameter){
	if(selectedId == ""){
	 	return;
	}
	var selected = document.getElementById(selectedId);
	if(selected.tagName == "DIV"){
		selected.focus();
		var mode = "none";
		try {
			document.execCommand("styleWithCSS", false, true);
			mode = 0;
		} catch (e) {
			try {
				document.execCommand("useCSS", false, false); //Use CSS
				mode = 1;
			} catch (e) {
				try {
					document.execCommand("useCSS", 0, false); //Use CSS
					mode = 2;
				}
				catch (e) {
					try {
						document.execCommand('styleWithCSS', 0, true);
						mode = 3;
					}
					catch (e) {
						mode = "Not supported";
					}
				}
			}
		}
		
		//alert("StyleMode: " + mode);
		
		try{
			document.execCommand(command, false, parameter);
		}catch(e){
		}
	}
}


/***********************************************************************************************************/
// Helpers: addOnClickListeners(), removeOnClickListener(), setClickable(), setSelectedId(), 
//			setSelectedEditable(), clearPx(), resetIds(), save()
/***********************************************************************************************************/
//Add admin-onclick-listeners
function addOnClickListeners(){
	var imgs = contentDiv.getElementsByTagName("IMG");
	var edits = contentDiv.getElementsByTagName("DIV");
	for(var i=0; i<imgs.length; i++){
		var img = imgs[i];
		img.setAttribute('onClick', 'setSelectedElement(\''+img.id+'\');');
		img.removeAttribute('onMouseOver');
		img.removeAttribute('onMouseOut');
		
	}
	for(var i=0; i<edits.length; i++){
		var e = edits[i];
		//var c = e.getAttribute('className');
		var c= e.className;
		if(c == null){
			c = "";
		}
		
		if(c.indexOf('editable') != -1){
			e.setAttribute('onClick', 'setSelectedElement(\''+e.id+'\'); setSelectedEditable(true);');
			e.setAttribute('onKeyPress', 'increaseContentDiv(\''+e.id+'\'); decreaseContentDiv();');
		}
	}
}

//Remove admin-onclick-listeners, if IMG, add onclick-listeners
function removeOnClickListeners(){
	var imgs = contentDiv.getElementsByTagName("IMG");
	var edits = contentDiv.getElementsByTagName("DIV");
	for(var i=0; i<imgs.length; i++){
		var img = imgs[i];
		//if(img.getAttribute('className') == 'clickable'){
		if(img.className == 'clickable'){
			var src = img.src;
			var border = img.style.border;
			img.setAttribute('onClick', 'showPopup(\''+src+'\', \''+border+'\');');
			img.setAttribute('onMouseOver', 'document.body.style.cursor=\'pointer\';');
			img.setAttribute('onMouseOut', 'document.body.style.cursor=\'default\';');
		}else{
			img.removeAttribute('onClick');
		}
	}
	for(var i=0; i<edits.length; i++){
		var e = edits[i];
		//var c = e.getAttribute('className');
		var c=e.className;
		if(c == null){
			c = "";
		}
		if(c.indexOf('editable') != -1){
			e.removeAttribute('onClick');
			e.removeAttribute('onKeyPress');
		}
	}
}

function setClickable(){
	var selected = document.getElementById(selectedId);
	if(selected.tagName=="IMG"){
		//if(selected.getAttribute('className') == 'clickable'){
		if(selected.className=='clickable'){
			//i2.setAttribute('className', '');
			i2.className = '';
			i2.setAttribute('title', titleAddPopup);
			//selected.setAttribute('className', '');
			selected.className = '';
		}else{
			//i2.setAttribute('className', 'active');		
			i2.className = 'active';
			i2.setAttribute('title', titleRemovePopup);	
			//selected.setAttribute('className', 'clickable');
			selected.className='clickable';
		}
	}
}

function setSelectedElement(sId){
	formerSelectedId = selectedId;
	//Disable contenteditable for current selected
	var selected = document.getElementById(selectedId);
	if(selected != null && selected.tagName != "IMG"){
		setSelectedEditable(false);
	}
	
	//Set new selected
	selectedId = sId;
	if(selectedId != ""){
		selected = document.getElementById(selectedId);
		var formerSelected = document.getElementById(formerSelectedId);
		
		if(formerSelected != null && formerSelected.tagName != "IMG"){
			formerSelected.style.border = "";
		}
		if(selected != null && selected.tagName != "IMG"){
			selected.style.border = selectedBorderStyle;
			selected.focus();
		}
		setToolbar();
	}
	
}

function setSelectedEditable(bool){
	if(selectedId == ""){
	 	return;
	}
	var selected = document.getElementById(selectedId);
	
	if(bool && selected.tagName != "IMG"){
		selected.setAttribute('contentEditable','true');
	}else{
		selected.removeAttribute('contentEditable');
	}
	
	try{
		document.execCommand('enableObjectResizing', false, false );
	}catch(e){
	}
}

function clearPx(str){
	var result = parseInt(str.substring(0, str.length-2));
	return result;
}

//Set new ids to all img and divs to prevent id collisions
function resetIds(){
	var allImg = contentDiv.getElementsByTagName('IMG');
	var edits = contentDiv.getElementsByTagName("DIV");
	for(var i=0; i<allImg.length; i++){
		var img = allImg[i];
		var imgId = "img_" + i;
		img.setAttribute('id', imgId);
	}
	
	var counter = 0;
	for(var i=0; i<edits.length; i++){
		var e = edits[i];
		//var c = e.getAttribute('className');
		var c = e.className;
		if(c == null){
			c = "";
		}
		if(c.indexOf('editable') != -1){
			var eId = "div_" + counter;
			e.setAttribute('id', eId);
			counter++;
		}
	}
	
}

function showPopup(src, border){
	//Set image src
	var div = document.getElementById(popupId);
	var popupImg = document.getElementById(popupImgId);
	popupImg.src=src;			
	popupImg.style.border = border;
	div.style.display = 'block';
	document.body.style.cursor='pointer';
}
	
function hidePopup(){
	var div = document.getElementById(popupId);
	var popupImg = document.getElementById(popupImgId);
	div.style.display = 'none';
	document.body.style.cursor='default';
	popupImg.src="";			
}

//Set height of content-container
function setContentHeight(h){
	contentDiv = document.getElementById(contentDivId);
	contentDiv.style.height = h;
}

//Edit content and copy stuff into input to enable mysql-save
function save(){
	var selected = document.getElementById(selectedId);
	var editForm = document.getElementById(editFormId);
	var contentStore = document.getElementById(contentStoreId);
	var contentHeightStore = document.getElementById(contentHeightStoreId);
	
	//Set border of selected element to none
	if(selected != null && selected.tagName != "IMG"){
		selected.style.border = "";
	}
	
	//Remove toolbar
	var toolbar = document.getElementById(toolbarId);
	contentDiv.removeChild(toolbar);
	
	//Set selected element not editable, and remove onClick-Listener
	setSelectedEditable(false);
	removeOnClickListeners();
	
	//set ids from 0...x to prevent id collision on insert
	resetIds();
	
	var c = contentDiv.innerHTML;
			
	//Format content	
	c = escape(c);	
	
	c = c.replace(/%09/gi, "");					//Delete space- and br-signs
	c = c.replace(/%0a/gi, "");		
	/*c = c.replace(/%27/gi, "&apos;");			// '
	c = c.replace(/%91/gi, "&apos;");			// '
	c = c.replace(/%92/gi, "&apos;");			// '	
	c = c.replace(/%23/gi, "&num;");			// #*/
	c = c.replace(/%24/gi, "&dollar;");			// $			
	//c = c.replace(/%25/gi, "&percnt;");			// %			
	c = c.replace(/%A7/gi, "&sect;");			// §			
	c = c.replace(/%BA/gi, "&ordm;");			// °			
	c = c.replace(/%5E/gi, "&circ;");			// ^
	c = c.replace(/%C4/gi, "&Auml;");			// Ä
	c = c.replace(/%D6/gi, "&Ouml;");			// Ö
	c = c.replace(/%DC/gi, "&Uuml;");			// Ü
	c = c.replace(/%E4/gi, "&auml;");			// ä
	c = c.replace(/%F6/gi, "&ouml;");			// ö
	c = c.replace(/%FC/gi, "&uuml;");			// ü
	c = c.replace(/%DF/gi, "&szlig;");			// ß
	
	c = unescape(c);
	
	//alert(c);
	contentStore.value=c;
	contentHeightStore.value = contentDiv.style.height;
	
	//Submit form
	document.editFormular.submit();
}


-->