var theSelection = false;

var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version
var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));

var tagArray = ["B", "I", "U", "BIG", "SMALL", "ALIGN", "CENTER", "CODE", "PHP", "MAIL", "URL", "IMG", "QUOTE", "LIST", "IMAGE", "SAURUSID"]; //names are just for ease of management
var nameArray = ["B", "I", "U", "BIG", "SMALL", "ALIGN", "CENTER", "CODE", "PHP", "MAIL", "URL", "IMG", "QUOTE", "LIST", "IMAGE", "SAURUSID"]; 
var fontProps = ["#000000", "Arial, Helvetica, sans-serif", "14px", "left"];

var help=new Array()
help[0]="<h2>Introductie</h1>Dit script werkt met zogenaamde UBB codes. Deze worden ook op veel fora gebruikt en zijn daarom voor veel mensen wel bekend.<br> In de verchillende help pagina's kun je per opmaakcode wat uitleg vinden. Er zijn echter ook wat standaard regels:<br><ul><li>de preview heeft (bijna) altijd gelijk!</li><li>elke 'tag' die geopend wordt dient ook afgesloten te worden (uitzonderingen worden genoemd)</li><li>zorg er bij afbeeldingen voor dat ze een goed formaat hebben (gebruik geenbmp bestanden, geen onnodige grote foto's)</li><li>met preview aan kan de editor soms langsaam reageren</li></ul>";
help[1]="<h2>Vette tekst</h2>Hiervoor worden de <b>[b]</b> en [/b] tag gebruikt.<br> Er zijn drie opties om dit voorelkaar te krijgen:<ol><li>Eerst tekst typen, dan selecteren, dan op de Vet knop drukken</li><li>Eerst op de vet knop drukken en dan tussen de tags typen</li><li>De [b] en [/b] tags zelf typen</li></ol><br><hr>Voorbeeld:<blockquote>[b]Bold/Vet[/b]</blockquote><b>Vet</b>";
help[2]="<h2>Schuine tekst</h2>Hiervoor worden de <b>[i]</b> en [/i] tag gebruikt.<br> Er zijn drie opties om dit voorelkaar te krijgen:<ol><li>Eerst tekst typen, dan selecteren, dan op de Schuin knop drukken</li><li>Eerst op de Schuin knop drukken en dan tussen de tags typen</li><li>De [i] en [/i] tags zelf typen</li></ol><hr>Voorbeeld:<blockquote>[i]Italic/schuin[/i]</blockquote><i>Italic/schuin</i>";
help[3]="<h2>Onderstreepte tekst</h2>Hiervoor worden de <b>[u]</b> en [/u] tag gebruikt.<br> Er zijn drie opties om dit voorelkaar te krijgen:<ol><li>Eerst tekst typen, dan selecteren, dan op de Onderstreept knop drukken</li><li>Eerst op de Onderstreept knop drukken en dan tussen de tags typen</li><li>De [u] en [/u] tags zelf typen</li></ol><hr>Voorbeeld:<blockquote>[u]Onderstreept[/u]</blockquote><u>Onderstreept</u>";
help[4]="<h2>Doorgestreepte tekst</h2><i>Let op: geen menu-optie</i><br>Hiervoor wordt de <b>[strike]</b> en [/strike] tag gebruikt. <br><br>Dus type eerst [strike] vervolges de tekst die doorgestreept moet worden en tenstlotte [/strike].<br><hr>Voorbeeld:<blockquote>[strike]Doorgestreept[/strike]</blockquote><strike>Doorgestreept</strike>";
help[5]="<h2>Kopjes/headings</h2>Bij het schrijven van berichten/teksten is het soms handig om tussenkopjes of titels te plaatsen.<br> Hiervoor zijn er 2 niveaus: kop1 en kop2. Kop1 ziet er als volgt uit:<h1>Kop1</h1> en kop2 ziet er als volgt uit <h2>Kop2</h2>. De tag die je hiervoor kan gebruiken is [h1] en [h2]<br><hr>Voorbeeld:<blockquote>[h1]Titel van de pagina[/h1]<br>[h2]Paragraaf 1[/h2]<br>Overige tekst</blockquote><h1>Titel van de pagina</h1><h2>Paragraag 1</h2>overige tekst";
help[6]="<h2>Quotes</h2>Als je een tekst als quote weer wit geven is daarvoor de [quote] tag<br><hr>Voorbeeld:<blockquote>begin van de tekst[quote]Dit schreef ik niet, maar iemand anders[/quote]rest van de pagina</blockquote>begin van de tekst<blockquote style=\"border:1px dotted black\"><b>Quote:</b><p><i>Dit schreef ik niet, maar iemand anders</i></p></blockquote>rest van de pagina";
help[7]="<h2>Email-links</h2>Er zijn twee soorten e-mail links.<ol><li>het e-mail adres als tekst</li><li>een andere tekst</li></ol><b>Soort 1</b><br>De makkelijkste manier om dit voor elkaar te krijgen is gewoon het e-mail adres typen. Normaal gesproken wordt dit automatisch herkend en wordt er een link gevormd (check de preview!). Werkt dit niet gebruik dan de vogende tag:<br>[mail]mailadres[/mail]. Er kan ook worden gebruik van de email-knop.<br><br><hr>Voorbeeld:<blockquote>[mail]webmasters@msrvsaurus.nl[/mail]</blockquote><a href=mailto:webmasters@msrvsaurus.nl>webmasters@msrvsaurus.nl</a><br><br><b>Soort 2</b><br><br>Dit kan alleen door het gebruik van de mail tag. De manier van gebruik is als volgt:<br>[mail=mailadres]tekst[/mail]. Er kan ook gebruik worden gemaakt van de e-mail knop.<br><br>Voorbeeld:<blockquote>[mail=webmasters@msrvsaurus.nl]Mail de webmasters[/mail]</blockquote><br><a href=mailto:webmasters@msrvsaurus.nl>Mail de webmasters</a>";
help[8]="<h2>Externe-links</h2>Externe links zijn links naar andere websites, dus niet naar pagina's op de Saurus website.<br> Deze worden in een nieuw venster (of tabblad, afhankelijk van de browser) geopend zodat mensen makkelijk terug kunnen naar de Saurus website. Het gebruik van de url-tag is gelijk aan die van de e-mail taf, zie dan ook deze pagina.<hr>Voorbeeld:<blockquote>[url=http://www.nlroei.nl]de NLRoei site[/url]</blockquote><a href=http://www.nlroei targer=_new>de NLRoei site</a><hr><b>Let op:</b><br>Links beginnen met http:// en daarna pas www, anders zal het niet werken!";
help[9]="<h2>Interne-links</h2>Internet inks zijn links naar andere pagina's op de Saurus site.<br> Ze zullen openen op dezelfde pagina (dus geen nieuw venster/tabblad). De notatie is gelijk aan die van externe-links/email, zie hierover de help-pagina van e-mail.<br><hr>Voorbeeld:<blockquote>[link=content.php?main=2&sub=2]Over Saurus[/link]</blockquote><a href=http://dev.msrvsaurus.nl/nieuw/content.php?main=2&sub=2 target=_self>Over Saurus</a>";
help[10]="<h2>Afbeeldingen</h2>Voor het gebruik van afbeeldingen wordt de knop 'Afbeeldingen' aangeraden. Je krijgt vervoglens een pop-up waar je kunt kiezen welke afbeelding je wilt (of een nieuwe uploaden).<br><br>Let bij het uploaden er op dat dit in een logische map gebeurt, dan zijn afbeeldingen later weer terug te vinden.<br><br>In de pop-up zijn vervolgens allerlei eigenschappen van de afbeelding in te stellen. Ik denk dat de meeste wel voor zich spreken. De maximale breedte die de afbeelding uiteindelijk krijgt za de beschikbare breedte op de site zijn, zodat de lay-out niet verneukt wordt.<br><br>Het gebruik is als volgt:[img=<i>hoogte</i>,<i>breedte</i> align=<i>manier uitlijnen</i> alt=<i>beschrijving</i>]<i>url van afbeelding</i>[/img]<hr>Voorbeeld:<blockquote>[img=57,90 align=baseline alt=achtergrond.jpg]http://www.msrvsaurus.nl/images<br>/layout/achtergrond.jpg[/img]</blockquote><img src=http://www.msrvsaurus.nl/images/layout/achtergrond.jpg width=90 height=57 alt=achtergrond>";
help[11]="<h2>Bestanden</h2>Gebruik voor het toevoegen van bestanden aan een pagina de knop 'Bestanden'. Omdat ik denk dat de meeste functies wel voor zich spreken leg ik alleen de opties uit. <ul><li>Voeg Icoon toe -> een logo van het bestandsformaat voor de link</li><li>Het prullenbak logotje verwijdert de bestanden</li><li>In het veld URL wordt na het selecteren van een bestand automatisch de link toegevoegd</li><li>In het veld Titel kun je eventueel de titel/tekst van de link wijzigen</li></ul><b>Note:<br><br>Let er verder, net als bij de afbeeldingen, op dat bestanden in een logische directorie worden geupload.";
help[12]="<h2>Lijsten</h2>Er zijn 2 soorten lijst:<br> <ul><li>lijsten met bullets</li><li>lijsten met nummers</li></ul>Lijsten met bullets maak je met de tag [list] of [ul] lijsten met nummers maak je met de [ol] tag. De rest van deze help-pagina gaat over lijsten met nummers (met bullets werkt op dezelfde manier). Je moet eerste het begin van de lijst aangeven via de eerstgenoemde tag, vervolgens moet je voor elk item de tag [*] gebruiken.<br><hr>Voorbeeld:<blockquote>Tellen:<br>[ol][*]een<br>[*]twee<br>[*]drie<br>[/ol]</blockquote>Tellen:<ol><li>een</li><li>twee</li><li>drie</li></ol><br><b>Note:</b><br>De [*] tag hoeft niet afgesloten te worden.<br><br><b>Note 2:</b>Door het klikken op de knop 'Lijst' krijg je een begin van een bullet-lijst.<br><b>Note 2:</b> Voor de eerste [*] tag moet GEEN enter staan.";
help[13]="<h2>Horizontale lijnen</h2><i>Let op: geen menu-optie</i><br>Hiervoor wordt de <b>[hr]</b> tag gebruikt.<br><br><hr>Voorbeeld:<blockquote>tekst[hr]tekst</blockquote>tekst<hr>tekst<br><br><b>Note:</b><br>De [hr] tag hoeft niet afgesloten te worden.";
help[14]="<h2>Tabellen</h2>Het maken van tabellen is een precies zaakje. Het wordt aangeraden om altijd in de previes te controleren of het goed gegaan. Er zijn drie tags die gebruikt worden: <ol><li>[tablel] voor het beginnen van een tabel</li><li>[rij] voor het beginnen van een nieuwe rij</li><li>[cel] voor het beginnen van een nieuwe cel</li></ol> Al deze tags moeten ook gewoon afgesloten worden. Het stappenplan is als volgt: <ol><li>[tabel]</li><li>[rij]</li><li>[cel]informtie in deze cel[/cel]<br>Dit herhalen voor het aantal cellen dat je naast elkaar wilt hebben</li><li>[/rij]<br>Stap 2 tot er met 4 herhale voor het aantal rijen</li><li>[/tabel]</li></ol><br><hr>Voorbeeld:<br><blockquote>[tabel]<br>[rij]<br>[cel]abc[/cel]<br>[cel]def[/cel]<br>[/rij]<br>[rij]<br>[cel]ghi[/cel]<br>[cel]jkl[/cel]<br>[/rij]<br>[/tabel]</blockquote><table><tr><td>abc</td><td>def</td></tr><tr><td>ghi</td><td>jkl</td></tr></table><br><b>Note:</b><br>In plaats van tabel, rij en cel kunnen ook de gebruikelijke tags table, tr en td worden gebruikt<br><br><b>Note 2:</b><br>Indien je een lijntje om een cel heen wilt moet je ipv [cel] en [/cel] gebruik maken van [cel2] en [/cel2]";
help[15]="<h2>Links naar Sauri&euml;rs</h2>Indien je de naam van een Sauri&euml;r in een bericht wilt verwerken kun je deze het beste seleceteren uit de dropdown. Op deze manier voorkom je typefouten en wordt, indien iemand ingelogd is, een link naar het smoelenboek getoond.";
help[16]="<h2>Tekst uitlijnen</h2>TODO";
help[17]="<h2>Bekende problemen</h2><ul><li>Het uitlijnen van text is nog niet mogelijk</li><li>Links met daarin een spatie worden niet goed weergegeven in de preview, in de uiteindelijke versie wel</li><li>Hetzelfde probleem treedt op bij plaatjes met spaties in de naam</li><li>Bij het gebruik van de tag [saurusis] wordt in de preview nooit een link getoond</li><li>De preview functie update niet altijd even snel, gebruik dit vooral voor het uiteindelijke posten</li>";

for(var i=0; i < tagArray.length; i++)
{
	tagArray[i] = false;
}

var currentTimer = null;
var canGo = true;
var showPreview = false;

function updateDiv()
{
if ( showPreview == true)
  {
if( canGo == true )
	{
		var the_div = document.getElementById("the_div");
		var the_text = document.getElementById("the_text");
		var saveNow = document.getElementById("saveNow");
		
		try
		{
			var req = new XMLHttpRequest();
		}
		catch(e)
		{
			var req = new ActiveXObject("Microsoft.XMLHTTP"); //IE sucks, I dont know why i'm even adding anything ActiveX to my code, bleh...
		}
		
		text = the_text.value.replace(/&/g, "::S018_AMP::");
		req.open("POST", "editor/ubb.php", false);
		req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		req.send("bbcode=" +  (text) );
		the_div.innerHTML = stripslashes(req.responseText);
		saveNow.innerHTML = "<i>Bijgewerkt</i>";		
		canGo = false;
	}
	else
	{
		var saveNow = document.getElementById("saveNow");
		saveNow.innerHTML = "Preview over 5 seconde";
		var the_text = document.getElementById("the_text");
		the_text.removeAttribute("onKeyUp");
		currentTimer = setTimeout(setCanGo, 100);
		the_text.setAttribute("onKeyUp", "javascript:updateDiv();");
	}
	} // voor showpreview opie
}

function switchPreview()
{
  var the_div = document.getElementById("the_div");  
	var saveNow = document.getElementById("saveNow");
	var preview_button = document.getElementById("preview_button");
	
  if ( showPreview == false)	{
    the_div.style.display = "block";
    preview_button.innerHTML = "Preview uit";
    showPreview = true;
    setCanGo();
 } 
 else
 { 
   the_div.style.display = "none";
   saveNow.innerHTML = "<i>Uitgeschakeld</i>";
   preview_button.innerHTML = "Preview aan";
   showPreview = false;
   canGo = false;
 } 
}  
   
   
function saveNow()
{  
	var the_text = document.getElementById("the_text");
	var saveNow = document.getElementById("saveNow");
	saveNow.innerHTML = "<i>Updated</i>";
	setCanGo();
}  
   
function setCanGo()
{  
	saveNow.innerHTML = "<i>Updating..</i>";
	canGo = true;
	updateDiv();
	currentTimer = null;
}

function selectAll(field)
{
	  var field = document.getElementById(field);
	  field.focus();
	  field.select();
}

function addTag(openTag, closeTag, arrayPos)
{
	var the_text = document.getElementById("the_text");
	var storedHeight = the_text.scrollHeight;
	
	if( tagArray[ arrayPos ] == false )
	{
		switch(openTag)
		{
			
			case "[url=*]":
				var ans = prompt("Externe link (Moet beginnen met http:// !)", "http://");
				if( ans == null )
				{
					insertAtCursor(the_text, openTag.replace("=*", "") );
				}
				else
				{
					insertAtCursor(the_text, openTag.replace("*", ans) );
				}
				break;
			case "[mail=*]":
				var ans = prompt("E-mail adres", "");
				if( ans == null )
				{
					insertAtCursor(the_text, openTag.replace("=*", "") );
				}
				else
				{
					insertAtCursor(the_text, openTag.replace("*", ans) );
				}
				break;
			case "[list]":
			  insertAtCursor(the_text, openTag);
			  insertAtCursor(the_text, "[*]optie1");
			  insertAtCursor(the_text, "\r\n[*]optie2");
			  insertAtCursor(the_text, "\r\n[*]etc.\r\n"); 			  
			break;
			default:
				insertAtCursor(the_text, openTag);
		}
		
		insertAtCursor(the_text, closeTag);
	}
	else
	{
		insertAtCursor(the_text, closeTag);
		document.getElementById( nameArray[ arrayPos ] + "_button" ).innerHTML = document.getElementById( nameArray[ arrayPos ] + "_button" ).innerHTML.replace("*", "");
		tagArray[ arrayPos ] = false;
	}
	
	updateDiv();
	the_text.scrollTop = storedHeight;
	the_text.focus();
}




//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////
// function insertAtCursor written for PhpMyAdmin, which was released under the GPL v2.
// Therefore, this function is subject to the terms of the GPL v2.
// http://www.phpmyadmin.net/documentation/LICENSE
function insertAtCursor(myField, myValue)
{
	if( document.selection )
	{
		myField.focus();
		sel = document.selection.createRange();
		sel.text = myValue;
	}
	else if( myField.selectionStart || myField.selectionStart == '0' )
	{
		var startPos = myField.selectionStart;
		var endPos = myField.selectionEnd;
		myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
	}
	else
	{
		myField.value += myValue;
	}
}
//////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////

function mozWrap(txtarea, open, close)
{
	var selLength = txtarea.textLength;
	var selStart = txtarea.selectionStart;
	var selEnd = txtarea.selectionEnd;
	
	if( selEnd == 1 || selEnd == 2 )
	{
		selEnd = selLength;
	}
	
	var s1 = (txtarea.value).substring(0,selStart);
	var s2 = (txtarea.value).substring(selStart, selEnd)
	var s3 = (txtarea.value).substring(selEnd, selLength);
	txtarea.value = s1 + open + s2 + close + s3;
	return;
}

function addTagSelection(openTag, closeTag, arrayPos)
{
	var txtarea = document.getElementById("the_text");
	var storedHeight = txtarea.scrollHeight;
	
	if( (clientVer >= 4) && is_ie )
	{
		theSelection = document.selection.createRange().text;
		if (theSelection != '')
		{
			switch(openTag)
			{
				case "[color=*]":
					document.selection.createRange().text = openTag.replace("*", fontProps[0] ) + theSelection + closeTag;
					txtarea.focus();
					updateDiv();
					break;
				
				case "[size=*]":
					document.selection.createRange().text = openTag.replace("*", fontProps[2] ) + theSelection + closeTag;
					txtarea.focus();
					updateDiv();
					break;
				
				case "[align=*]":
					document.selection.createRange().text = openTag.replace("*", fontProps[3] ) + theSelection + closeTag;
					txtarea.focus();
					updateDiv();
					break;
				
				case "[font=*]":
					document.selection.createRange().text = openTag.replace("*", fontProps[1] ) + theSelection + closeTag;
					txtarea.focus();
					updateDiv();
					break;
				
				case "[url=*]":
					document.selection.createRange().text = openTag.replace("*", prompt("URL address (Cancel if hyperlink text is the same as URL)", "") ) + theSelection + closeTag;
					txtarea.focus();
					updateDiv();
					break;
						
				default:
					document.selection.createRange().text = openTag + theSelection + closeTag;
					txtarea.focus();
					updateDiv();
					break;
			}
			
			txtarea.scrollTop = storedHeight;
			return;
		}
	}
	else if( txtarea.selectionEnd && (txtarea.selectionEnd - txtarea.selectionStart > 0) )
	{
		switch(openTag)
		{
			case "[color=*]":
				mozWrap(txtarea, openTag.replace("*", fontProps[0] ), closeTag);
				txtarea.focus();
				updateDiv();
				break;
			
			case "[size=*]":
				mozWrap(txtarea, openTag.replace("*", fontProps[2] ), closeTag);
				txtarea.focus();
				updateDiv();
				break;
			
			case "[align=*]":
				mozWrap(txtarea, openTag.replace("*", fontProps[3] ), closeTag);
				txtarea.focus();
				updateDiv();
				break;
			
			case "[font=*]":
				mozWrap(txtarea, openTag.replace("*", fontProps[1] ), closeTag);
				txtarea.focus();
				updateDiv();
				break;
			
			case "[url=*]":
				mozWrap(txtarea, openTag.replace("*", prompt("URL address (Cancel if hyperlink text is the same as URL)", "") ), closeTag);
				txtarea.focus();
				updateDiv();
				break;
			
			case "[quote=*]":
				mozWrap(txtarea, openTag.replace("*", prompt("Name of quoted (Cancel if none)", "") ), closeTag);
				txtarea.focus();
				updateDiv();
				break;
			
			default:
				mozWrap(txtarea, openTag, closeTag);
				txtarea.focus();
				updateDiv();
				break;
		}
		
		txtarea.scrollTop = storedHeight;
		return;
	}
	
	addTag(openTag, closeTag, arrayPos);
}


// custom Thomas
function addTagSaurusid(openTag, closeTag, arrayPos)
{
	var the_text = document.getElementById("the_text");
	var storedHeight = the_text.scrollHeight;
	var saurus = document.getElementById("SAURUSID_button").value;
	insertAtCursor(the_text, openTag); 
  insertAtCursor(the_text, saurus);
	insertAtCursor(the_text, closeTag);
	updateDiv();
	the_text.scrollTop = storedHeight;
	the_text.focus();
}

function addTagPopup(openTag, closeTag,arrayPos)
{
	var the_text = document.getElementById("the_text");
	var storedHeight = the_text.scrollHeight;
	opener.document.forms['post'].username.value = selected_username;
	opener.focus();
	window.close();
}

// puur voor de help functie, NIET ubb
function UpdateHelp(x)
  {
  var help_select = help[x];
  var help_text = document.getElementById("ubbhelp");
	help_text.innerHTML = help_select;
}  


// begin image en file functies
function cancel()
  {
  //sluiten
  mywindow.close();
  }
  
function image() {
    var url = 'editor/pop_ups/insert_image.php';
    mywindow = open(url,'Image_Editor','resizable=no,width=600,height=480');
    mywindow.location.href = url;
    if (mywindow.opener == null) mywindow.opener = self;
}

function insert_image() {
    var the_text = document.getElementById("the_text");
    var plaatje_ubb = '[img=' + img_height + ',' + img_width + ' align=' +  img_align + ' alt=' + img_alt + ']' + img_url + '[/img]';   
    mywindow.close();
    insertAtCursor(the_text,plaatje_ubb);
    updateDiv();
}

  
function file() {
    var url = '/editor/pop_ups/InsertFile/filedialog.php';
    mywindow=open(url,'Bestanden_Toevoegen','resizable=no,width=650,height=450');
    mywindow.location.href = url;
    if (mywindow.opener == null) mywindow.opener = self;
}

function insert_file() {
    var the_text = document.getElementById("the_text");
    var bestand_ubb = '';
    bestand_ubb += '[file=' + bestand_url +']';
    if (bestand_addicon == true)
      {
      bestand_ubb += '[img alt=ico]' + bestand_icon + '[/img] ';
      }
    bestand_ubb += bestand_caption + '[/file]';
    if (bestand_addsize == true)
      {
      bestand_ubb += '[small] size:' + bestand_size + '[/small]';
      }
    if (bestand_adddate == true)
      {
      bestand_ubb += '[small] datum:' + bestand_date + '[/small]';
      }   
    mywindow.close();
    insertAtCursor(the_text,bestand_ubb);
    updateDiv();
}

function stripslashes(str) { // nodig voor wat problemen met slashes
str=str.replace(/\\'/g,'\'');
str=str.replace(/\\"/g,'"');
str=str.replace(/\\\\/g,'\\');
str=str.replace(/\\0/g,'\0');
return str;
}
