var formaatSelIMG = new Image();
formaatSelIMG.src = "images/tick.png";

var imgLoader = new Image();
imgLoader.src = "img/ajax-loader.gif";


// getFields:
// -- fieldType: the type of element to search for (div, input, table, etc...)
// -- fieldHolder: the container to search for the elements (document, body, or any other id of an element)
// -- fieldMatch: every found element must match this string in its id or it will be discarded
function getFields(fieldType, fieldHolder, fieldMatch)
{
	var inpList = $(fieldHolder).getElementsByTagName(fieldType);

	var tagList = new Array();
	var pattern = new RegExp(fieldMatch, 'i');

	for(i = 0, j = 0; i < inpList.length; i++){
		if ( pattern.test(inpList[i].id) )
		{
			tagList[j] = inpList[i];
			j++;
		}
	}

	return tagList;
}

function openTags()
{
	tagList = getFields("div", "tagHolder", "langHolder_");
	for (i = 0; i < tagList.length; i++ )
	{
		tagList[i].style.display = 'block';
	}
}

function closeTags()
{
	tagList = getFields("div", "tagHolder", "langHolder_");
	for (i = 0; i < tagList.length; i++ )
	{
		tagList[i].style.display = 'none';
	}
}

function deleteTag(i)
{
	tagArea = $('tagHolder');
	tag = $('tag_'+i);
	tagDel = tagArea.removeChild(tag);
}

function addTranslation(groupList, groupListId, currentGroup)
{
	tagArea = $('tagHolder');

	i = 0;
	while ($('tag_'+i))
	{
		i++;
	}

	var newTag = document.createElement('div'); //create new holder element
	var newTagHTML = "";

	newTag.setAttribute("id","tag_"+i); // set id of new element
	
	newTagHTML += "<table border='0' cellspacing='0' cellpadding='0' width='100%'>";
	newTagHTML += "<tr>";
	newTagHTML += "<td width='45' class='columgrey' valign='top' onClick='showTranslation(\""+i+"\");' colspan='2'>+ <b>NEW</b></td>";
	newTagHTML += "<td width='180' class='columgrey' valign='top'><input type='text' name='lang["+i+"][code]' style='border: solid 1px black; width: 100px;'></td>";
	newTagHTML += "<td width='150' class='columgrey' valign='top'>";
	newTagHTML += "	<select name='lang["+i+"][group]' style='border: solid 1px black; width: 100px;'>";
	for(j = 0; j < groupList.length; j++)
	{
		newTagHTML += "	<option value='"+groupListId[j]+"' "+((currentGroup == groupListId[j]) ? "selected" : "")+">"+groupList[j]+"</option>";
	}
	newTagHTML += "	</select>";
	newTagHTML += "</td>";
	newTagHTML += "<td width='120' class='columgrey' valign='top'></td>";
	newTagHTML += "<td class='columgrey' align='right'><input type='button' value='delete' onClick='deleteTag(\""+i+"\");' style='border: solid 1px black; width: 100px;'></td>";
	newTagHTML += "</tr>";
	newTagHTML += "<tr>";
	newTagHTML += "<td></td>";
	newTagHTML += "<td colspan='5' style='height:1px; padding: 0px; padding-bottom: 0px;' id='row_"+i+"'>";
	newTagHTML += "<div id='langHolder_"+i+"' style='background-color: #FFFFFF; display: none; border: solid 4px #e0e0e0; padding: 3px; border-top: none;'>";

	newTagHTML += "	<table border='0' cellspacing='0' cellpadding='2' class='lang_text' width='100%'>";
	newTagHTML += "	<tr><td valign='top' align='left'>";
	newTagHTML += "		<table border='0' cellspacing='0' cellpadding='2' class='lang_text'>";
	newTagHTML += "		<tr><td>";
	newTagHTML += "			<table border='0' cellspacing='0' cellpadding='2'>";
	newTagHTML += "			<tr><td>Nederlands: </td></tr>";
	newTagHTML += "			<tr><td><textarea name='lang["+i+"][nl]' style='border: solid 1px black; width: 350px; height: 50px;' style='border: solid 1px black; width: 100px;'></textarea></td></tr>";
	newTagHTML += "			</table>";
	newTagHTML += "		</td>";
	newTagHTML += "		<td>";
	newTagHTML += "			<table border='0' cellspacing='0' cellpadding='2'>";
	newTagHTML += "			<tr><td>English: </td></tr>";
	newTagHTML += "			<tr><td><textarea name='lang["+i+"][en]' style='border: solid 1px black; width: 350px; height: 50px;' style='border: solid 1px black; width: 100px;'></textarea></td></tr>";
	newTagHTML += "			</table>";
	newTagHTML += "		</td></tr>";
	newTagHTML += "		</table>";
	newTagHTML += "	</td></tr>";
	newTagHTML += "	<tr><td valign='top' align='left'>";
	newTagHTML += "		<table border='0' cellspacing='0' cellpadding='2' class='lang_text'>";
	newTagHTML += "		<tr><td>";
	newTagHTML += "			<table border='0' cellspacing='0' cellpadding='2'>";
	newTagHTML += "			<tr><td>Fran&ccedil;ais: </td></tr>";
	newTagHTML += "			<tr><td><textarea name='lang["+i+"][fr]' style='border: solid 1px black; width: 350px; height: 50px;' style='border: solid 1px black; width: 100px;'></textarea></td></tr>";
	newTagHTML += "			</table>";
	newTagHTML += "		</td>";
	newTagHTML += "		<td>";
	newTagHTML += "			<table border='0' cellspacing='0' cellpadding='2'>";
	newTagHTML += "			<tr><td>Deutsh: </td></tr>";
	newTagHTML += "			<tr><td><textarea name='lang["+i+"][de]' style='border: solid 1px black; width: 350px; height: 50px;' style='border: solid 1px black; width: 100px;'></textarea></td></tr>";
	newTagHTML += "			</table>";
	newTagHTML += "		</td></tr>";
	newTagHTML += "		</table>";
	newTagHTML += "	</td></tr>";
	newTagHTML += "	</table>";
	newTagHTML += "</div>";
	newTagHTML += "</td>";
	newTagHTML += "</tr>";
	newTagHTML += "</table>";

	// apply real html
	newTag.innerHTML = newTagHTML;

	// put new element in text field
	tagArea.appendChild(newTag);
}

function showTranslation(i)
{
	var holder = $('langHolder_'+i).style;
	holder.display = (holder.display == 'none') ? 'block' : 'none'; 
	$('row_'+i).style.paddingBottom = (holder.display == 'block') ? '12px' : '0px';
}

function selectFormaat(i)
{
	var formaat = $('formaat_'+i);
	var formaatRow = $('formaatRow_'+i);
	var formaatIMG = $('formaatIMG_'+i);
	var formaatNew = $('formaatSelect');
	var formaatSelectDiv = $('formaatSel');
	var formaatSubmitDiv = $('formaatSub');
	
	var formaatList = getElementsByClassName('selectArea', 'div', 'formaat');
	var formaatRowList = getElementsByClassName('selectArea', 'tr', 'formaatRow');
	var formaatIMGList = getElementsByClassName('selectArea', 'img', 'formaatIMG');
	
	for (j=0;j<formaatList.length;j++)
	{
		var formaatOld = formaatList[j];
		if(formaatOld.style.color == 'red')
		{
			formaatOld.style.color = 'black';
		}
	}

	for (j=0;j<formaatRowList.length;j++)
	{
		var formaatOld = formaatRowList[j];
		formaatOld.style.background = '#ffffff';
	}

	for (j=0;j<formaatIMGList.length;j++)
	{
		var formaatOld = formaatIMGList[j];
		//alert(formaatOld.src);
		if(formaatOld.style.visibility != 'hidden')
		{
			formaatOld.style.visibility = 'hidden';
		}
		
	}

	formaat.style.color = 'red';
	formaatRow.style.background = '#e5e1d7';
	formaatIMG.style.visibility = 'visible';
	formaatNew.value = i;
}

function showPrice (price, amount)
{
	$('aantalHolder').innerHTML = (price * amount);
	$('aantalTop').innerHTML = (price * amount);
	$('aantalTotal').innerHTML = (price * amount + 15);
}

var browserCheck = new RegExp('Microsoft', 'i'); // fuck microsoft and their stupid rules
var justAdded = false;

if(browserCheck.test(navigator.appName))
{
	var app = "ie";
}
else
{
	var app = "moz";
}

function getPos(evt)
{
	if(app == "ie")
	{
		newY = evt.y;
		newX = evt.x;
	}
	else
	{
		newY = evt.pageY;
		newX = evt.pageX;
	}
}

function createHover(evt, accImg)
{
	getPos(evt);

	newHover = document.createElement('div');
	newHover.setAttribute('id', 'imgHover');

	newHover.style.position = 'absolute';
	newHover.style.padding = '2px';

	newHover.style.top = newY+20+'px';
	newHover.style.left = newX+12+'px';
	newHover.style.background = '#FFAA44';
	newHover.style.display = 'block';

	newHover.innerHTML = '<img src="'+accImg+'" width="300" height="300">';

	document.body.appendChild(newHover);

	//alert($('imgHover').style.top);
}

function moveHover(evt)
{
	getPos(evt);

	$('imgHover').style.top = newY+20+'px';
	$('imgHover').style.left = newX+12+'px';
}

function removeHover()
{
	if($('imgHover'))
	{
		document.body.removeChild($('imgHover'));
	}
}

// use $ instead of getElementById
function $(obj) {
	if (arguments.length > 1)
	{
		for (var i = 0, objects = []; i < arguments.length; i++)
		{
			if(document.getElementById(arguments[i]) !== null)
			{
				objects.push($(arguments[i]));
			}
		}
		return objects;
	}

	if (typeof obj == 'string')
	{
		newObj = document.getElementById(obj);
	}
	return newObj;
}

function popitup(url) {
	newwindow=window.open(url,'name','height=600,width=450');
	if (window.focus) {newwindow.focus()}
	return false;
}

function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : $(oElm).getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/-/g, "\-");
	var oRegExp = new RegExp("(^|\s)" + strClassName + "(\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}

function changeFormatColorIn(formatElement)
{
	if(rgbConvert(formatElement.style.background) == 'e5e1d7')
	{
		formatElement.style.background='#e5e1d7';
	}
	else
	{
		formatElement.style.background='#fbf6ea';
	}
	
}

function changeFormatColorOut(formatElement)
{
	//alert(formatElement.style.background);
	if(rgbConvert(formatElement.style.background) == 'e5e1d7')
	{
		formatElement.style.background='#e5e1d7';
	}
	else
	{
		formatElement.style.background='#ffffff';
	}
}

function rgbConvert(currentColor)
{

	if(app == "ie")
	{
		return currentColor.substring(1);
	}
	else
	{
		var colorRule = /(rgb\()([0-9]{3})(, )([0-9]{3})(, )([0-9]{3})(\))/i;
		var colorIndex = colorRule.exec(currentColor);
		
		var colorRed = parseInt(colorIndex[6]);
		var colorGreen = parseInt(colorIndex[4]);
		var colorBlue = parseInt(colorIndex[2]);

		var decColor = colorRed + 256 * colorGreen + 65536 * colorBlue;

		return decColor.toString(16);
	}
}

function showProgress()
{
	if(app == "ie")
	{
		//alert(document.style.cursor);
		document.body.style.cursor = "url(hourglas_ani.ani)";
	}
	else
	{
		$('progress').style.visibility = 'visible';
		document.body.style.cursor = 'wait';
	}
}