function iTag( i ) {
	var q = Array(
		"Voer de persoon in die je wilt citeren.",
		"Voel de URL in van de link.",
		"Voer de kleur in die de tekst moet krijgen.",
		"quote",
		"url",
		"color"
	), x = prompt( q[i] + " (niet vereist)" );

	if(x)
		return "[" + q[i+3] + "=" + x + "]";
	else
		return "[" + q[i+3] + "]";
}

function insertText( a, b ) {
	var el = document.replyForm.reply, txt = el.value, start = el.selectionStart, end = el.selectionEnd, pos, sel = txt.substring(start,end);
	el.value = txt.substring(0,start) + (a?a:"") + sel + (b?b:"") + txt.substring(end,txt.length);
	el.focus();
	pos = txt.substring(0,start).length + (a?a.length:!sel?b.length:0);
	el.setSelectionRange(pos, pos+sel.length);
}

function tagPopup(el) {
	
	// first change the popup tags for the correct width
	$('.startTagPopup').attr("innerHTML", "[" + el.getAttribute("tag") + "]");
	$('.endTagPopup').attr("innerHTML", "[/" + el.getAttribute("tag") + "]");
	
	// then make them visible, else they got no width;
	$('.startTagPopup').attr("style", "display: block;");
	$('.endTagPopup').attr("style", "display: block;");
	
	// then calculate their new width and desired position
	$('.startTagPopup').attr("style", "display: block; left: " + ( $(el).offset().left - $('.startTagPopup').attr("offsetWidth") + 1 ) + "px; top: " + $(el).attr("offsetTop") + "px;");
	$('.endTagPopup').attr("style", "display: block; left: " + ( $(el).offset().left + el.offsetWidth - 1 ) + "px; top: " + $(el).attr("offsetTop") + "px;");

}

function tagPopdown() {

	if($('.startTagPopup').attr("mouseover") == "false")
		$('.startTagPopup').attr("style", "display: none;");
	if($('.endTagPopup').attr("mouseover") == "false")
		$('.endTagPopup').attr("style", "display: none;");
		
}

$(document).ready(function(){
	
	var tagsTags = new Array( "b", "i", "u", "s", "color", "quote", "code", "ignore" );
	var tagsHTML = new Array( "<b>bold</b>", "<i>italic</i>", "<u>underlined</u>", "<s>striped</s>", '<font color="#0744c0">c</font><font color="#2b3aa3">o</font><font color="#503186">l</font><font color="#74276a">o</font><font color="#991e4d">r</font><br>', "quote", "code", "ignore");
	
	for( var i = 0; i < tagsTags.length; i++ ) {
		$('.tagList').append('<div class="tag" tag="' + tagsTags[i] + '" onclick="insertText(\'[' + tagsTags[i] + ']\', \'[/' + tagsTags[i] + ']\');" onmouseout="tagPopdown()" onmouseover="tagPopup(this);">' + tagsHTML[i] + '</div>');
	}
	
	$popupAttrs = 'mouseover="false" onmouseover="this.style.display = \'block\'; this.mouseover = true;" onmouseout="this.style.display = \'none\'; this.mouseover = \'false\';"';
	$('body').append('<div class="startTagPopup" onclick="insertText(this.innerHTML);" ' + $popupAttrs + '></div>')
	$('body').append('<div class="endTagPopup" onclick="insertText(0, this.innerHTML);" ' + $popupAttrs + '></div>')
	
});

function getSelText()
{
	if (window.getSelection)
		return window.getSelection();
	else if (document.getSelection)
		return document.getSelection();
	else if (document.selection)
		return document.selection.createRange().text;
	else
		return '';
}

function quote(id) {
	insertText( '[quote=' + document.getElementById("reply_" + id).name + ']' + ( getSelText() == '' ? document.getElementById("reply_" + id).value : getSelText() ) + '[/quote]' );
}