var ua = navigator.userAgent.toLowerCase();
var ie = (navigator.userAgent.indexOf('MSIE') != -1); 
var moz = (navigator.userAgent.indexOf( 'Gecko' ) != -1);
var isGecko = (ua.indexOf("gecko") != -1);


function lavEditor(bredde,hojde,navn,tekst){
	//Styles
	var menuFarve = '#0d90b8';
	var tekstFarve = '#FFFFFF';
	var editorBaggrund = '#FFFFFF';
	//Slut
	document.writeln('<table width="' + bredde + '" height="' + hojde + '" border="0" cellspacing="0" cellpadding="0">');
	document.writeln('<tr>');
	document.writeln('<td height="20" align="left" valign="middle" style="width:' + bredde + '; height: 20px; background-color:' + menuFarve + '; border-bottom: 2px ' + tekstFarve + ' dotted;">');
	document.writeln('<span id="link" onClick="egenskab(\'bold\', null)"><img src="iconer/Fed.jpg" alt="Fed" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'italic\', null)"><img src="iconer/kursiv.jpg" alt="Kursiv" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'underline\', null)"><img src="iconer/understeg.jpg" alt="Understreget" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'justifyleft\', null)"><img src="iconer/venstre.jpg" alt="Venstrejuster" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'justifycenter\', null)"><img src="iconer/centrer.jpg" alt="Centrer" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'justifyright\', null)"><img src="iconer/hojre.jpg" alt="Højrejuster" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'insertorderedlist\', null)"><img src="iconer/talopstilling.jpg" alt="Numerisk Opstilling" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'insertunorderedlist\', null)"><img src="iconer/punktopstilling.jpg" alt="Punktopstilling" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'outdent\', null)"><img src="iconer/outdent.gif" alt="Ryk tilbage" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'indent\', null)"><img src="iconer/indent.gif" alt="Ryk ind" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'inserthorizontalrule\', null)"><img src="iconer/horizontalrule.jpg" alt="Streg" width="20" height="20"></span>');
	document.writeln('<span id="link"  onClick="openWindow(\'billede.php\',500,500);"><img src="iconer/billede.gif" alt="Indsæt billeder"></span>');
	document.writeln('<span id="link"  onClick="openWindow(\'tabel.htm\',250,100);""><img src="iconer/table.gif" alt="Indsæt link"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'undo\', null)"><img src="iconer/fortryd.jpg" alt="Fortryd" width="20" height="20"></span>');
	document.writeln('<span id="link" onClick="egenskab(\'redo\', null)"><img src="iconer/gentag.jpg" alt="Gentag" width="20" height="20"></span>');
	document.writeln('<textarea id="save" name="save" style="display: none;"></textarea>');
	document.writeln('<input type="image" name="gem" src="iconer/gem.jpg" border="0" id="save" onClick="gemmer(this.form)">');
  	document.writeln('<span id="link" onClick="ViewContent();"><img src="iconer/Preview.jpg" alt="Preview" width="20" height="20"></span>');
	document.writeln('</td></tr><tr><td style="background-color:' + menuFarve + ';">');
	document.writeln('<select name="skrifttype" id="skrifttype" onchange="egenskab(\'fontname\',this.value,this.id);">');
	document.writeln('<option value="" SELECTED>Skrifttype</option>');
	document.writeln('<option value="Verdana">Verdana</option>');
	document.writeln('<option value="Times New Roman">Times New Roman</option>');
	document.writeln('<option value="Courier">Courier</option>');
	document.writeln('<option value="Georgia">Georgia</option>');
	document.writeln('<option value="Arial">Arial</option>');
	document.writeln('<option value="Trebuchet MS">Trebuchet</option>');
	document.writeln('</select>');
	document.writeln('<select name="skriftstorrelse" id="skriftstorellse" onchange="egenskab(\'fontsize\',this.value,this.id);">');
	document.writeln('<option value="" id="start" SELECTED>Skriftstørrelse</option>');
	document.writeln('<option value="1">Meget Lille</option>');
	document.writeln('<option value="2">Lille</option>');
	document.writeln('<option value="3">Mellem</option>');
	document.writeln('<option value="4">Mellemstor</option>');
	document.writeln('<option value="5">Stor</option>');
	document.writeln('<option value="6">Meget Stor</option>');
	document.writeln('</select>');
	document.writeln('<select name="format" id="format" unselectable="on" onchange="formatTekst(\'<\' + this.value + \'>\',\'</\' + this.value + \'>\',this.id);">');
	document.writeln('<option value="" SELECTED>Format</option>');
	document.writeln('<option value="h1">Overskrift 1</option>');
	document.writeln('<option value="h2">Overskrift 2</option>');
	document.writeln('<option value="h3">Brødtekst</option>');
	document.writeln('</select>');
	document.writeln('</td></tr><tr><td width="100%" height="100%" align="left" valign="top" bgcolor="#FFFFFF">');
   
	document.writeln('<iframe name="' + navn + '" id="' + navn + '" frameborder="0" style=" width: 100%; height: 100%; background-color:' + editorBaggrund + ';" src="edit.htm" OnLoad="runEvent()"></iframe>');
    
	document.writeln('</td></tr>');
	document.writeln('<td height="20" align="center" valign="middle" style="background-color:' + menuFarve + '; color:' + tekstFarve + '; font-family: Arial, Helvetica, sans-serif; font-size: 10px;">Wysiwyg Editor af Tonni K. Hansen - Lightbulb designs</td>');
	document.writeln('</tr></table>');

	
	init(navn,tekst);
}

function init(navn,tekst){
	
	var frameHtml = "<html>\n";
	frameHtml += "<head>\n";
	var cssFile = "style.css";
	if (cssFile.length > 0) {
		frameHtml += "<link media=\"all\" type=\"text/css\" href=\"" + cssFile + "\" rel=\"stylesheet\">\n";
	} else {
		frameHtml += "<style>\n";
		frameHtml += "body {\n";
		frameHtml += "	margin: 0px;\n";
		frameHtml += "	padding: 0px;\n";
		frameHtml += "}\n";
		frameHtml += "table{border:1px black solid;}\n";
		frameHtml += "</style>\n";
	}
	frameHtml += "<style title=\"table borders\">"
	+ "table, td, th {border : 1px dashed lightgrey; font-size: 11px;} \n"
         + "</style>\n";
	frameHtml += "</head>\n";
	frameHtml += "<body style=\"background-color:#ffffff;\">\n";
	frameHtml += tekst + "\n";
	frameHtml += "</body>\n";
	frameHtml += "</html>";
	
	if (ie) {
		var oRTE = frames[navn].document;
		oRTE.open();
		oRTE.write(frameHtml);
		oRTE.close();
		oRTE.designMode = "On";
	} else {
		if(moz) {
			document.getElementById(navn).contentDocument.designMode = "on";
			try {
				var oRTE = document.getElementById(navn).contentWindow.document;
				oRTE.open();
				oRTE.write(frameHtml);
				oRTE.close();
				if (moz) {
					oRTE.addEventListener("keypress", kb_handler, true);
				}
			} catch (e) {
				alert("Kunne ikke loade");
			}
		} else {
			if (moz) {
				setTimeout("init('" + navn + "', '" + tekst + ");", 10);
			} else {
				return false;
			}
		}
	}
	frames.editBox.document.onkeydown = function() {
	if (frames.editBox.event.keyCode == 13) {
      selRange = frames.editBox.document.selection.createRange();
      selRange.pasteHTML('<br>');
      selRange.select();
    }
  }

}
function farve(){
var colors = ['#FFFFFF','#FFCCCC','#FFCC99','#FFFF99','#FFFFCC','#99FF99','#99FFFF','#CCFFFF',
              '#CCCCFF','#FFCCFF','#CCCCCC','#FF6666','#FF9966','#FFFF66','#FFFF33','#66FF99',
              '#33FFFF','#66FFFF','#9999FF','#FF99FF','#C0C0C0','#FF0000','#FF9900','#FFCC66',
              '#FFFF00','#33FF33','#66CCCC','#33CCFF','#6666CC','#CC66CC','#999999','#CC0000',
              '#FF6600','#FFCC33','#FFCC00','#33CC00','#00CCCC','#3366FF','#6633FF','#CC33CC',
              '#666666','#990000','#CC6600','#CC9933','#999900','#009900','#339999','#3333FF',
              '#6600CC','#993399','#333333','#660000','#993300','#996633','#666600','#006600',
              '#336666','#000099','#333399','#663366','#000000','#330000','#663300','#663333',
              '#333300','#003300','#003333','#000066','#330099','#330033'];
	      fhtml = '<table width="100%" cellspacing="0" cellpadding="0"><tr>';	  
	      for(var i=0;i<colors.length;i++) {
		      if(i%10 == 0) {
			      fhtml += "</tr><tr>"
		      }
		      fhtml += '<td><input type="button" id="farveknap" onclick="egenskab(\'forecolor\',\'#' + colors[i] + '\');" style="background-color:' + colors[i] + ';"></td>';
	      }
	      fhtml += '</tr></table>';	
	      document.write(fhtml);
	
}
function egenskab(funktion, attribut, id){
	if(ie) {
	editBox.document.focus();
	editBox.document.execCommand(funktion, false, attribut); 
		if(id){
			document.getElementById(id).selectedIndex = 0;
		}
	editBox.document.focus();	
	}  
	else {
	document.getElementById("editBox").contentWindow.focus();
	document.getElementById("editBox").contentDocument.execCommand(funktion, false, attribut);
		if(id){
			document.getElementById(id).selectedIndex = 0;
		}
	document.getElementById("editBox").contentWindow.focus();	
	}
}

function gemmer(form) {
	var tekst = document.getElementById("save");
	var editor = document.getElementById("editBox").contentWindow.document.body;
	tekst.value = editor.innerHTML;
}


function insertLink(http) {
	if (document.getElementById('linkBox').value == '' || document.getElementById('linkBox').value == 'http://') {
	    var blok=document.getElementById('fejl_link').style;
	    blok.display="block";
	    document.fejl_link.focus();
	}
	else {
	if(ie) {
		var selText = editBox.document.selection.createRange();
		if (selText.text != '') {
		editBox.document.selection.createRange().pasteHTML('<a href="'+ http +'">' + selText.text + '</a>');
		var blok=document.getElementById('fejl_link').style;
		blok.display="none";
		document.getElementById('linkBox').value = 'http://';
		editbox.document.focus();
		}
		else {
		var blok=document.getElementById('fejl_link').style;
		blok.display="none";
		document.getElementById('linkBox').value = 'http://';
		document.getElementById("editBox").contentWindow.focus();
		}
	
	}
	else {
		var editor = document.getElementById("editBox").contentWindow;
		var selection = editor.getSelection();
		var selText = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
		document.getElementById('editBox').contentDocument.execCommand('insertHTML', false, '<a href="'+ http +'" onclick="klik(this.id);" id="linket">' + selText + '</a>');
		var blok=document.getElementById('fejl_link').style;
		blok.display="none";
		document.getElementById('linkBox').value = 'http://';
		document.getElementById("editBox").contentWindow.focus();

	}
	}
}
function insertDiv(tekst) {
	if(ie) {
	var selText = editBox.document.selection.createRange();
	editBox.document.selection.createRange().pasteHTML('<div style="position:absolute; left: 10px; top: 10px;">' + tekst + '</div>');

	}
	else {
	var editor = document.getElementById("editBox").contentWindow;
	var selection = editor.getSelection();
	var selText = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
	document.getElementById("editBox").contentWindow.focus();
	document.getElementById('editBox').contentDocument.execCommand('insertHTML', false, '<div style="position:absolute; left: 10px; top: 10px;">' + tekst + '</div>');
	}
}
function formatTekst(begynd,slut,id) {
	if(ie) {
	var selText = editBox.document.selection.createRange();
	editBox.document.selection.createRange().pasteHTML(begynd + selText.text+ slut);
	document.getElementById(id).selectedIndex = 0;
	}
	else {
	var editor = document.getElementById("editBox").contentWindow;
	var selection = editor.getSelection();
	var selText = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
	document.getElementById("editBox").contentWindow.focus();
	document.getElementById('editBox').contentDocument.execCommand('insertHTML', false, begynd + selText + slut);
	document.getElementById(id).selectedIndex = 0;
	}
}
function indsaetTabel(raekker,kolloner,bredde,hojde) {
	
	var html = '<table cellpadding="0" cellspacing="2" width="' + bredde + '" height="' + hojde + '">';
	for (var rows = 0; rows < raekker; rows++) {
		html += "<tr>\n";
		for (cols = 0; cols < kolloner; cols++) {
			html += "<td valign=\"top\">&nbsp;</td>";
		}
		html+= "</tr>";
	}
	html += "</table>";
	
	if(ie) {
	var selText = editBox.document.selection.createRange();
		editBox.document.selection.createRange().pasteHTML(html);
	}
	else {
	var editor = document.getElementById("editBox").contentWindow;
	var selection = editor.getSelection();
	var selText = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
	document.getElementById("editBox").contentWindow.focus();
	document.getElementById("editBox").contentDocument.execCommand('insertHTML', false, html);
	}
}
function indsaetBillede(navn,bredde,hojde,justering){
	if(ie) {
		var selText = editBox.document.selection.createRange();
		editBox.document.selection.createRange().pasteHTML('<img width="' + bredde + '" height="' + hojde + '" src="webbilleder/' + navn + '" align="' + justering + '">');

	}
	else {
	var editor = document.getElementById("editBox").contentWindow;
	var selection = editor.getSelection();
	var selText = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
	document.getElementById("editBox").contentWindow.focus();
	document.getElementById('editBox').contentDocument.execCommand('insertHTML', false,'<img width="' + bredde + '" height="' + hojde + '" src="webbilleder/' + navn + '" align="' + justering + '">');
	}
}
function openWindow(navn,bredde,hojde){
		var screenWidth = screen.width;
		var screenHeight = screen.height;
		var toppen = (screenHeight / 2)-(hojde / 2);
		var siden = (screenWidth / 2) - (bredde / 2);
		window.open(navn,'mitvindue','width=' + bredde + ',height=' + hojde + ',left=' + siden + ',top=' + toppen + ',toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,copyhistory=yes,resizable=no');
	
}

function runEvent(){
if(document.attachEvent){
editBox.document.attachEvent('onclick', function(){setTagName();});
editBox.document.attachEvent('onkeyup', function(){setTagName();});
} else if(document.addEventListener) {
document.getElementById('editBox').contentWindow.document.addEventListener('click', function(){setTagName();}, false);
document.getElementById('editBox').contentWindow.document.addEventListener('keyup', function(){setTagName();}, false);
}
}

//kør funktionen med: OnLoad="runEvent()"
/*
function runEvent(){
if(document.attachEvent){
editBox.document.attachEvent('onmousedown',function(){setTagName()});
} else if(document.addEventListener) {
document.getElementById('editBox').contentWindow.document.addEventListener('mousedown',function(){setTagName()},false);
}
}
*/
function setTagName() {
	
	if(ie){
		var srcElm = editBox.event.srcElement;
		if(srcElm.tagName == 'H1'){
			document.getElementById('format').selectedIndex = 1;
		}
		else if(srcElm.tagName == 'H2'){
			document.getElementById('format').selectedIndex = 2;
		}
		else if(srcElm.tagName == 'H3'){
			document.getElementById('format').selectedIndex = 3;
		}
		else {
			document.getElementById('format').selectedIndex = 0;
		}
	}
	else{
		var srcElm = document.getElementById('editBox').contentWindow.e.target;
		//var srcElm = document.getElementById('editBox').contentWindow.event.srcElement;
		//var test = document.getElementById('editBox').contentWindow.getParentElement();
		alert(srcElm);
	}
}

function kb_handler(evt) {
	var rte = evt.target.id;
	if (evt.keyCode == 13) {
		var key = String.fromCharCode(evt.charCode).toLowerCase();
		var selText = editBox.document.selection.createRange();
		editBox.document.selection.createRange().pasteHTML('<br>');
	}
	if (evt.ctrlKey) {
		var key = String.fromCharCode(evt.charCode).toLowerCase();
		var cmd = '';
		switch (key) {
			case 'b': cmd = "bold"; break;
			case 'i': cmd = "italic"; break;
			case 'u': cmd = "underline"; break;
		};
		if (cmd) {
			egenskab(cmd, null);
			
			evt.preventDefault();
			evt.stopPropagation();
		}
 	}
}