<!-----
	var src_rightImage = 'images/arrow_right.gif';
	var src_downImage = 'images/arrow_down.gif';
	var src_refreshSource = 'images/refresh.gif';
	var src_smallRightArrow = 'images/small_arrow.gif';
	
	var transparencyWhenDragging = true;
	var txt_editBox = 'edit';
	var txt_editBox_stop = 'stop edit';
	var txt_editLink = 'link toevoegen';
	var txt_editLink_stop = 'stop link toevoegen';
	var dragObjectBorderWidth = 1;	// Border size of your RSS boxes - used to determine width of dotted rectangle, kan niet betrouwbaar opgevraagd
	
	var pagesCatShown = -1;

	var boxType = new Array();	
	var boxMinHeight = 40;

	var boxIndex = 0;
	var dragableBoxesArray = new Array();
	var columnBoxesArray = new Array();
	var columnParentBox;
	
	var linkDrag = new Array();
	
	var ajaxObjects = new Array();	
	
	var dragType = false;
	var isDragging = false;
	var dragObject = false;

	var destinationObj = false;
	var oldDestinationObj = false;
	var dragObjectMiddle = 0;

	var uploadBegin = false;
	
	var mouse_x;
	var mouse_y;	
	var el_x;
	var el_y;
	var leftPos;
	var topPos;
	var posX;
	var posY;
	
	var rectangleDiv;
	var okToMove = true;
	var waitingToMove = false;

	var opera = navigator.userAgent.toLowerCase().indexOf('opera')>=0?true:false;
        var isIE = (!opera && navigator.userAgent.indexOf('MSIE') != -1)
	function popupWindow(url,name)
	{	
	    features="width=780,height=500,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,copyhistory=no,resizable=yes,left=40,top=80,screenX=10,screenY=100";
	    window.open(url,name,features);
	}

	// slide dingen
	var slide_slideSpeed = 10;	// Higher value = faster
	var slide_timer = 10;	// Lower value = faster
	
	var objectIdToSlideDown = false;
	var slide_activeId = false;
	function showHideContent(e,inputId)
	{
	    if(!inputId)inputId = this.id;
	    inputId = inputId + '';
	    var numericId = inputId.replace("slide_q","");//inputId.replace(/[^0-9]/g,'');
	    var answerDiv = document.getElementById('slide_a' + numericId);
	    if(!answerDiv){return;}
	    objectIdToSlideDown = false;

	    if(!answerDiv.style.display || answerDiv.style.display=='none'){
	
		if(slide_activeId &&  slide_activeId!=numericId){			
		    objectIdToSlideDown = numericId;
		    slideContent(slide_activeId,(slide_slideSpeed*-1));
		}else{
		    answerDiv.style.display='block';
		    answerDiv.style.visibility = 'visible';
		    slideContent(numericId,slide_slideSpeed);
		}
	    }else{
		slideContent(numericId,(slide_slideSpeed*-1));
		slide_activeId = false;
	    }	
	}
	function slideContent(inputId,direction)
	{
	    var obj =document.getElementById('slide_a' + inputId);
	    var contentObj = document.getElementById('slide_ac' + inputId);
	    height = obj.clientHeight;
	    height = height + direction;
	    rerunFunction = true;
	    if(height>contentObj.offsetHeight){
		height = contentObj.offsetHeight;
		rerunFunction = false;
	    }
	    if(height<=1){
		height = 1;
		rerunFunction = false;
	    }
	
	    obj.style.height = height + 'px';
	    var topPos = height - contentObj.offsetHeight;
	    if(topPos>0)topPos=0;
	    contentObj.style.top = topPos + 'px';
	    if(rerunFunction){
		setTimeout('slideContent("' + inputId + '",' + direction + ')',slide_timer);
	    }else{
		if(height<=1){
		    obj.style.display='none'; 
		    if(objectIdToSlideDown && objectIdToSlideDown!=inputId){
			document.getElementById('slide_a' + objectIdToSlideDown).style.display='block';
			document.getElementById('slide_a' + objectIdToSlideDown).style.visibility='visible';
			slideContent(objectIdToSlideDown,slide_slideSpeed);				
		    }
		}else{
		    slide_activeId = inputId;
		}
	    }
	}

/***********************************************
* Cool DHTML tooltip script II- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
    var offsetfromcursorX=12; //Customize x offset of tooltip
    var offsetfromcursorY=10; //Customize y offset of tooltip

    var offsetdivfrompointerX=10; //Customize x offset of tooltip DIV relative to pointer image
    var offsetdivfrompointerY=14; //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

    var tipObj;
    var pointerobj;

    var ie=document.all;
    var ns6=document.getElementById && !document.all;
    var enabletip=false;
//    if (ie||ns6)  // TODO : wtf is deze if ?

    function initTooltip()
    {
	tipobj=(document.all? document.all["dhtmltooltip"] : (document.getElementById? document.getElementById("dhtmltooltip") : ""));
	pointerobj=(document.all? document.all["dhtmlpointer"] : (document.getElementById? document.getElementById("dhtmlpointer") : ""));
    }
    
    function ietruebody(){
	return ((document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body);
    }

    function showTooltip(thetext, thewidth, thecolor){
	if (ns6||ie){
	    if (typeof thewidth!="undefined") {tipobj.style.width=thewidth+"px";}
	    if (typeof thecolor!="undefined" && thecolor!="") {tipobj.style.backgroundColor=thecolor;}
	    tipobj.innerHTML=thetext;
	    enabletip=true;
	    return false;
	}
    }

    function positiontip(e){
	if (enabletip && !isDragging){
	    // TODO: vreemde 'bug' waarbij window verpringt wanneer wordt overgegaan van een gewone tooltip naar een tooltip die naar boven staat
	    var nondefaultpos=false;
	    var curX=((ns6)?e.pageX : event.clientX+ietruebody().scrollLeft);
	    var curY=((ns6)?e.pageY : event.clientY+ietruebody().scrollTop);
	    //Find out how close the mouse is to the corner of the window
	    var winwidth=(ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20);
	    var winheight=(ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20);

	    var rightedge=(ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX);
	    var bottomedge=(ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY);

	    var leftedge=((offsetfromcursorX<0)? offsetfromcursorX*(-1) : -1000);

	    //if the horizontal distance isn't enough to accomodate the width of the context menu
    	    if (rightedge<tipobj.offsetWidth){
		//move the horizontal position of the menu to the left by it's width
		tipobj.style.left=curX-tipobj.offsetWidth+"px";
		nondefaultpos=true;
	    }
	    else if (curX<leftedge){tipobj.style.left="5px"}
	    else{
		//position the horizontal position of the menu where the mouse is positioned
		tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";
		pointerobj.style.left=curX+offsetfromcursorX+"px";
	    }

	    //same concept with the vertical position
	    if (bottomedge<tipobj.offsetHeight){
		tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";
		nondefaultpos=true;
	    }
	    else{
		tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";
		pointerobj.style.top=curY+offsetfromcursorY+"px";
	    }
	    tipobj.style.visibility="visible";
	    if (!nondefaultpos)
		pointerobj.style.visibility="visible";
	    else
		pointerobj.style.visibility="hidden";
	}
    }

    function hideTooltip()
    {
	if (ns6||ie)
	{
	    enabletip=false;
	    tipobj.innerHTML = "";
	    tipobj.style.visibility="hidden";
	    pointerobj.style.visibility="hidden";
	    tipobj.style.left="-1000px";
	    tipobj.style.backgroundColor='';
	    tipobj.style.width='';
	}
    }

	function addMenuItem(parentDiv, contentArray)
	{
	    // kan een menu-item zowel een container zijn als items bevatten? best wel
	    // hoe titel/link naar open-/dicht-klappen van container plaatsen?
	    for(var i = 0 ; i < contentArray.length ; i++)
	    {
//		if(contentArray[i][
		var div = document.createElement('DIV');
		if(typeof(contentArray[i]['containers']) != "undefined")
		{
		    // container, kan andere submenu's bevatten, eventueel een titel in de container?
		    for(var j = 0 ; j < contentArray[i]['containers'][j].length; j++)
		    {
			var container = document.createElement('DIV');
			if(typeof(contentArray[i]['containers'][j]['title']) != "undefined")
			{
			    var title = document.createElement('DIV');
			    title.innerHTML = contentArray[i]['title'];
			    container.appendChild(title);
			}
			addMenuItem(container, contentArray[i]['containers'][j]);
		    }
		}
		// dit zijn de items zelf
		if(typeof(contentArray[i]['items']) != "undefined")
		{
		    for(var j=0 ; j < contentArray[i]['items'].length; j++)
		    {
			// check of imageke hebben
			// 'link' naar createbox, _type_ moet gekend	
			
		    }
		}
		div.style.display = (showDiv?"block":"none");
		parentDiv.appendChild(div);
	    }
	}


	/*** begin cookie-functions ***/
	// Cookie Toolbox Javascript
	// For instructions on how to use these functions see "A Cookie Toolbox"
	// in the Javascript section of our site at http://www.felgall.com/
	var dbug = 0; 
	function init_array() {if (dbug) alert('init_cookie');  var ary = new Array(null); return ary;} 
	function set_cookie(name,value,expires) 
	{
	    // TODO: maak mogelijk om expires mee te geven
	    if (dbug) alert('set_cookie'); 
	    var expires = new Date();
	    expires.setDate(expires.getDate()+360); // 1 jaar verder
	    //document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires.toGMTString() + '; path=/';
	    document.cookie = name + '=' + escape(value) + '; expires=' + expires.toGMTString() + '; path=/';
	} 
	function get_cookie(name) 
	{
	    if (dbug) alert('get_cookie'); 
	    var dcookie = document.cookie; 
	    var cname = name + "="; var clen = dcookie.length; 
	    var cbegin = 0; 
	    while (cbegin < clen) 
	    {
		var vbegin = cbegin + cname.length;
		if (dcookie.substring(cbegin, vbegin) == cname) 
		{
		    var vend = dcookie.indexOf (";", vbegin); 
		    if (vend == -1) vend = clen; 
		    //dit is een kleine hack om spaties te hebben ipv +'en
		    //return decodeURIComponent(dcookie.substring(vbegin, vend)).replace(/%20/g," ");
		    return unescape(dcookie.substring(vbegin, vend));
		} 
		cbegin = dcookie.indexOf(" ", cbegin) + 1; 
		if (cbegin == 0) break;
	    } 
	    return null;
	} 
	function del_cookie(name) 
	{
	    if (dbug) alert('del_cookie');
	    document.cookie = name + '=' + '; expires=Thu, 01-Jan-70 00:00:01 GMT; path=/';
	} 
	/*** end cookie-functions ***/
        /*** Begin JSON ***/
	var JSON = function () {
	    var m = {
            '\b': '\\b',
            '\t': '\\t',
            '\n': '\\n',
            '\f': '\\f',
            '\r': '\\r',
            '"' : '\\"',
            '\\': '\\\\'
            },
	    s = {
    	        'boolean': function (x) {
        	    return String(x);
                },
	        number: function (x) {
    	            return isFinite(x) ? String(x) : 'null';
                },
	        string: function (x) {
    	            if (/["\\\x00-\x1f]/.test(x)) {
        	        x = x.replace(/([\x00-\x1f\\"])/g, function(a, b) {
            	            var c = m[b];
                	    if (c) {
                    	        return c;
                    	    }
                            c = b.charCodeAt();
	                    return '\\u00' +
    	                        Math.floor(c / 16).toString(16) +
        	                (c % 16).toString(16);
            	        });
                    }
	            return '"' + x + '"';
    		},
                object: function (x) {
	            if (x) {
    	                var a = [], b, f, i, l, v, fi;
        	        if (x instanceof Array) { // enkel objecten instanceof array bekijken, objecten niet
            	            a[0] = '{';
                	    for (i in x) {
                    	        v = x[i];
                                f = s[typeof v]; // ahv type wordt juiste functie gekozen, recursief want kan zichzelf kiezen
	                        if (f) {
    	                            v = f(v);
        	                    if (typeof v == 'string') {
            	                        if (b) {
                	                    a[a.length] = ',';
                    	                }
                        	        a[a.length] = "\""+i+"\" : "+v; // hackje: zelf keys toegevoegd
                            	        b = true;
                                    }
	                        }
    	                    }
        	            a[a.length] = '}';
            	        } else {
                	    return;
                        }
	                return a.join(''); // ; enkel na laatste object
    	            }
        	    return 'null';
                }
	    };
	    return {
		/* Stringify a JavaScript value, producing a JSON text. */
	        stringify: function (v) {
    		    var f = s[typeof v];
	            if (f) {
	                v = f(v);
	                if (typeof v == 'string') {
	                    return v;
	                }
	            }
	            return null;
	        },
		/* Parse a JSON text, producing a JavaScript value. It returns false if there is a syntax error. */
	        parse: function (text) {
	                return !(/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
	                        text.replace(/"(\\.|[^"\\])*"/g, ''))) &&
	                    eval("(" + text + ")"); /*** quote " om kleur in editor terug juist te krijgen :-) ***/
	        }
	    };
        }();
        /*** Einde van JSON ***/
	function initDragableBoxesScript()
	{
		createHelpObjects();
		initEvents();
		initBoxTypes();
		initTooltip();
		if(isLoggedIn == 1){createPersonalBoxes();}
		else{createDefaultBoxes();}
		if(document.forms.SEForm){document.forms.SEForm.SEText.focus();}
	}

	function initEvents()
	{
		// onmousedown is gedefinieerd bij headerdiv => moet niet checken op positie
		document.body.onmousemove = moveDragableElement;
		document.body.onmouseup = stopDrag;

		// tooltip positioning
		document.onmousemove=positiontip;

		// zorgen dat text niet geselecteerd wordt tijdens drag
		document.body.onselectstart = cancelSelectionEvent;
		document.body.ondragstart = cancelEvent;
	}
	
	function initBoxTypes()
	{
	    /***
	    * per type van box bijhouden wat de mogelijkheden zijn TODO: eventueel met een default werken?
	    * mogelijke eigenschappen zijn: 
		boxType[type]['supportEdit'] = true;
		boxType[type]['supportClose'] = true;
		boxType[type]['supportRefresh'] = true;
		boxType[type]['supportCollapse'] = true;
		boxType[type]['supportTitle'] = true;
		boxType[type]['supportFavicon'] = true;
	    ***/
	    boxType['IMG'] = new Array();
	    boxType['IMG']['supportEdit'] = true;
	    boxType['IMG']['supportClose'] = true;
	    boxType['IMG']['supportCollapse'] = true;
	    boxType['IMG']['supportTitle'] = true;

	    boxType['UPIMG'] = new Array();
	    boxType['UPIMG']['supportEdit'] = true;
	    boxType['UPIMG']['supportClose'] = true;
	    boxType['UPIMG']['supportCollapse'] = true;
	    boxType['UPIMG']['supportTitle'] = true;

	    boxType['RSS'] = new Array();
	    boxType['RSS']['supportEdit'] = true;
	    boxType['RSS']['supportClose'] = true;
	    boxType['RSS']['supportRefresh'] = true;
	    boxType['RSS']['supportCollapse'] = true;
	    boxType['RSS']['supportTitle'] = true;
	    boxType['RSS']['supportFavicon'] = true;

	    boxType['SEARCH'] = new Array();
	    boxType['SEARCH']['supportClose'] = true;
	    boxType['SEARCH']['supportTitle'] = true;
	    boxType['SEARCH']['supportCollapse'] = true;
	    boxType['SEARCH']['supportFavicon'] = true;

	    boxType['LINK'] = new Array();
	    boxType['LINK']['supportClose'] = true;
	    boxType['LINK']['supportTitle'] = true;
	    boxType['LINK']['supportCollapse'] = true;
	    
	    boxType['FAVORITES'] = new Array();
	    boxType['FAVORITES']['supportClose'] = true;
	    boxType['FAVORITES']['supportTitle'] = true;
	    boxType['FAVORITES']['supportEdit'] = true;
	    boxType['FAVORITES']['supportCollapse'] = true;

	    boxType['TOPPAGES'] = new Array();
	    boxType['TOPPAGES']['supportClose'] = true;
	    boxType['TOPPAGES']['supportCollapse'] = true;
	    boxType['TOPPAGES']['supportTitle'] = true;
	    boxType['TOPPAGES']['def_title'] = "Top 30";

	    boxType['SPOT'] = new Array();
	    boxType['SPOT']['supportClose'] = true;
	    boxType['SPOT']['supportCollapse'] = true;
	    boxType['SPOT']['supportTitle'] = true;
	    boxType['SPOT']['def_title'] = "In de kijker";

	    boxType['FLICKR'] = new Array();
	    boxType['FLICKR']['supportClose'] = true;
	    boxType['FLICKR']['supportCollapse'] = true;
	    boxType['FLICKR']['supportTitle'] = true;
	    boxType['FLICKR']['supportEdit'] = true;
	    boxType['FLICKR']['supportRefresh'] = true;
	    boxType['FLICKR']['supportFavicon'] = true;

	    boxType['NOTES'] = new Array();
	    boxType['NOTES']['supportClose'] = true;
	    boxType['NOTES']['supportCollapse'] = true;
	    boxType['NOTES']['supportTitle'] = true;
	    boxType['NOTES']['supportEdit'] = true;
	    boxType['NOTES']['def_title'] = "Nota's";

	    boxType['FEEDBACK'] = new Array();
	    boxType['FEEDBACK']['supportClose'] = true;
	    boxType['FEEDBACK']['supportCollapse'] = true;
	    boxType['FEEDBACK']['supportTitle'] = true;
	    boxType['FEEDBACK']['def_title'] = "Feedback";

	    boxType['FLASH'] = new Array();
	    boxType['FLASH']['supportClose'] = true;
	    boxType['FLASH']['supportCollapse'] = true;
	    boxType['FLASH']['supportTitle'] = true;
	    boxType['FLASH']['supportEdit'] = true;
    	}

	function saveBoxes()
	{
	    // met ajax op server opslaan van de boxes die in het document staan
	    if(isLoggedIn != 1){return false;}  // enkel saven voor geregistreerd & ingelogd, voor anderen hoeft deze functie niet uitgevoerd => feedback?
		var boxCounter = 0;
		var tempArray = new Array();
		for(var no=1;no<=numberOfColumns;no++)
		{
			var parentObj = document.getElementById('dragableBoxesColumn' + no);
			var priority = 0;
			for(var no2=0; parentObj.childNodes[no2]; no2++)
			{
			    var item = parentObj.childNodes[no2];
			    if(item.className == "dragableBox" && item.id!='rectangleDiv') // TODO: is dit nodig?
			    {
				var boxIndex = item.id.replace(/[^0-9]/g,'');
				if(dragableBoxesArray[boxIndex])
				{
				    dragableBoxesArray[boxIndex]['columnIndex'] = no; // voor de zekerheid column nog eens goedzetten, mss overbodig
				    if(pageType == "VAR")
				    {
					// alle info van de box posten
					tempArray[boxCounter] = dragableBoxesArray[boxIndex];
				    }
				    else if(pageType == "FAV")
				    {
					// enkel de kolom, priority en category-id posten, om volgorde te kunnen veranderen in tabel
					tempArray[boxCounter] = new Array();
					tempArray[boxCounter]['col'] = no - 1;
					tempArray[boxCounter]['priority'] = priority;
					tempArray[boxCounter]['cat_id'] = dragableBoxesArray[boxIndex]['cat_id'];
					priority++;
				    }
				    boxCounter++;
				}
			    }
			}
		}
		if(!tempArray){var tempArray = new Array();}
		var temp = JSON.stringify(tempArray);  // in tempArray zitten ze in de juiste volgorde, door stringify worden verwijzingen naar objecten als parent en obj verwijderd
		var ajaxIndex = ajaxObjects.length;

		ajaxObjects[ajaxIndex] = new sack();
		// showStatusBarMessage(numericId,'Loading data...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
		ajaxObjects[ajaxIndex].requestFile = 'func.php?task=saveBoxesSettings&pageType='+pageType+"&pageName="+pageName;	// Specifying which file to get (eigenlijk doet het een POST)
		ajaxObjects[ajaxIndex].setVar("boxesSettings",temp); // setvar voor dingen die te lang zijn om in de url te plaatsen
		ajaxObjects[ajaxIndex].onCompletion = function(){ ajaxObjects[ajaxIndex] = false; };	// Specify function that will be executed after file has been found (stop feedback?)
		ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function
	}

	function createPersonalBoxes()
	{
	    // met ajax string van server (uit db of file) halen
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    // showStatusBarMessage(numericId,'Loading data...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=getBoxesSettings&pageType='+pageType+"&pageName="+pageName;	// Specifying which file to get (eigenlijk doet het een POST)
	    ajaxObjects[ajaxIndex].onCompletion = function(){createPersonalBoxes2(ajaxIndex); ajaxObjects[ajaxIndex] = false;};	// Specify function that will be executed after file has been found (feedback?)
	    ajaxObjects[ajaxIndex].runAJAX();	// Execute AJAX function
	}

	function createPersonalBoxes2(ajaxIndex)
	{
	    // TODO: moet dit in js of in php? Als in php => aan createPersonalBoxes een argument meegeven: welke tab te laden.
	    var temp = ajaxObjects[ajaxIndex].response; // default response = "" kan geen kwaad
	    if(temp != "")
	    {
		    var tempArray = JSON.parse(temp);
		    for(var i = 0; typeof(tempArray[i])!="undefined"; i++) // nummering bij opslaan moet juist zijn.  for( var .. in ..) werkt niet omdat het niet herkend wordt als array
		    {
			var args = tempArray[i];
			if(typeof(args['type'])!="undefined"){var tmpIndex = createDragableBox(args, true);} // TODO: "if" mss niet nodig, enkel voor zekerheid?
		    }
	    }
	    else
	    {
		    createDefaultBoxes(); // er is geen record met home_settings gevonden voor deze correct ingelogde bezoeker
	    }
	}
	
	function showPagesCat(main_id)
	{
	    // een div tonen/verbergen met daarin de startpagina's die in een hoofdcategorie vallen
	    if(pagesCatShown == main_id)
	    {
		var div  = document.getElementById('showPagesCat');
		div.style.display = (div.style.display=="none"?"block":"none");
	    }
	    else
	    {
		var ajaxIndex = ajaxObjects.length;
		ajaxObjects[ajaxIndex] = new sack();
		// showStatusBarMessage(numericId,'Loading data...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
		ajaxObjects[ajaxIndex].requestFile = 'func.php?task=showPagesCat&main_id='+main_id;	// Specifying which file to get (eigenlijk doet het een POST)
		ajaxObjects[ajaxIndex].onCompletion = function(){showPagesCat2(ajaxIndex); ajaxObjects[ajaxIndex] = false;};	// Specify function that will be executed after file has been found (feedback?)
		ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function

	    }
	    pagesCatShown = main_id;
	    return false;
	}
	function showPagesCat2(ajaxIndex)
	{
	    var html = ajaxObjects[ajaxIndex].response;
	    var div  = document.getElementById('showPagesCat');
	    div.innerHTML = html;
	    div.style.display = "block";
	}

	function getColumnBoxesArray()
	{
	    // geeft array met boxjes per kolom gesorteerd (eerste in kolom/array staat bovenaan)
	    columnBoxesArray = new Array();
	    for(var no=1;no<=numberOfColumns;no++)
	    {
		columnBoxesArray[no] = new Array();
		parentObj = document.getElementById('dragableBoxesColumn' + no);
		// alle boxjes in de juiste kolom zetten
		for(var no2=0; parentObj.childNodes[no2]; no2++)
		{
	    	    if(parentObj.childNodes[no2].id!='rectangleDiv'){columnBoxesArray[no].push(parentObj.childNodes[no2]);} // TODO: "if" nodig?
		}
	    }
	}
	
	function closeDragableBox()
	{
	    var boxIndex = this.id.replace(/[^0-9]/g,'');
	    var type = dragableBoxesArray[boxIndex]['type'];
	    if(type =="NOTES")
	    {
		if(!confirm("Deze nota's worden definitief verwijderd")){return;}
		else{deleteNotes(boxIndex);}
	    }
	    else if(type == "FAVORITES")
	    {
		if(!confirm("Deze categorie en alle favorieten in de categorie worden definitief verwijderd")){return;}
		else{deleteCategory(boxIndex);}
	    }
	    var element = document.getElementById('dragableBox' + boxIndex);
	    element.parentNode.removeChild(element);
	    // verwijderen uit de array met alle boxes
	    // dragableBoxesArray.splice(boxIndex,1); // splice is fout want hernummert alles, dan komen id's van boxes niet meer overeen met index => op false zetten
	    dragableBoxesArray['boxIndex'] = false;
	    setTimeout('saveBoxes()',50);
	}

	function deleteCategory(boxIndex)
	{
	    // met ajax een box met favoriete links verwijderen
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=deleteCategory';	// Specifying which file to get (eigenlijk doet het een POST)
	    ajaxObjects[ajaxIndex].setVar("category_id",dragableBoxesArray[boxIndex]['cat_id']);
	    ajaxObjects[ajaxIndex].onCompletion = function(){ajaxObjects[ajaxIndex] = false;};	// Specify function that will be executed after file has been found (stop feedback?)
	    ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function
	}

	function deleteNotes(boxIndex)
	{
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    // showStatusBarMessage(numericId,'Loading data...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=deleteNotes';	// Specifying which file to get (eigenlijk doet het een POST)
	    ajaxObjects[ajaxIndex].setVar("notesId",dragableBoxesArray[boxIndex]['notesId']);
	    ajaxObjects[ajaxIndex].onCompletion = function(){ajaxObjects[ajaxIndex] = false;};	// Specify function that will be executed after file has been found (stop feedback?)
	    ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function
	}
	
	function getTopPos(inputObj)
	{
	  var returnValue = inputObj.offsetTop;
	  while((inputObj = inputObj.offsetParent) != null){
	  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetTop;
	  }
	  return returnValue;
	}

	function getBottomPos(inputObj)
	{
	    return getTopPos(inputObj)+inputObj.offsetHeight;
	}
	
	function getLeftPos(inputObj)
	{
	  var returnValue = inputObj.offsetLeft;
	  while((inputObj = inputObj.offsetParent) != null){
	  	if(inputObj.tagName!='HTML')returnValue += inputObj.offsetLeft;
	  }
	  return returnValue;
	}
	
	function refreshContent()
	{
	    showBoxContent(this.id.replace(/[^0-9]/g,''));
	}
	
	function editNewLinkContent(boxIndex)
	{
	    var numericId = (isNumeric(boxIndex)?boxIndex:this.id.replace(/[^0-9]/g,''));
	    if(isNumeric(boxIndex))
	    {
		var anchor = document.getElementById("addLinkEditLink"+numericId);
	    }
	    else
	    {
		var anchor = this;
	    }
	    var obj = document.getElementById('addLinkEdit' + numericId);
	    editBoxContent(numericId, obj, anchor, "link");
	    return false; // cancel van event
	}

	function editDragableBox(boxIndex)
	{
	    var numericId = (isNumeric(boxIndex)?boxIndex:this.id.replace(/[^0-9]/g,''));
	    if(isNumeric(boxIndex))
	    {
		var anchor = document.getElementById("dragableBoxEditLink"+numericId);
	    }
	    else
	    {
		var anchor = this;
	    }
	    var obj = document.getElementById('dragableBoxEdit' + numericId);
	    editBoxContent(numericId, obj, anchor, "box");
	    return false; // cancel van event
	}

	function editBoxContent(numericId, obj, anchor, type)
	{
	    if(obj.style.display=='none')
	    {
		if(type == "box")
		{
		    // TODO: ook voor type == LINK zou form pas hier moeten samengesteld worden
		    obj.innerHTML = getEditBoxForm("EDIT", numericId);
		}
		else if(type == "link")
		{
		    obj.innerHTML = getEditLinkForm("NEW", numericId);
		}
		// TODO: in geval van boxtype == NOTES, innerhtml vervangen door een textarea. Telkens onkeyrelease een save doen?? -> nee lijkt me
		// Eigenlijk zou dus een functie per type moeten gedefinieerd moeten kunnen worden. (een default die kan overruled worden)
		// "vervangen door", want kan textarea gewoon in form, enkel hidden zetten van content... :s (saveknop van form kan hergebruikt worden)
	    	obj.style.display='block';
	    	anchor.innerHTML = (type == "box"?txt_editBox_stop:txt_editLink_stop);
	    }
	    else
	    {
		//obj.innerHTML = ""; // TODO: "" of false? of niet resetten?
	    	obj.style.display='none';
	    	anchor.innerHTML = (type == "box"?txt_editBox:txt_editLink);
	    }
	}

	function getEditLinkForm(type, boxIndex, link, linkIndex)
	{
	    // type == "NEW" or "EDIT"
	    var linkId = (typeof(link)=="undefined"?0:link.ID);
	    var thisFormId = "f_"+boxIndex+"_"+linkId;

	    var content = '<form id="'+thisFormId+'">';
	    content += '<input type="hidden" name="type" value="'+type+'">';
	    content += '<input type="hidden" name="boxIndex" value="'+boxIndex+'">';		
	    if(type == "EDIT")
	    {
		content += '<input type="hidden" name="linkId" value="'+linkId+'">';
		content += '<input type="hidden" name="linkIndex" value="'+linkIndex+'">';
	    }

	    var url = (type == "EDIT"?link['URL']:"http://");
	    var title = (type == "EDIT"?link['TITLE']:"");
	    var description = (type == "EDIT"?link['DESCRIPTION']:"");
	    content += '<table id="table_'+thisFormId+'" cellpadding="1" cellspacing="1" width="100%">';
	    content += '<tr id="url_r'+thisFormId+'"><td>Url:</td><td align="right"><input type="text" name="url" value="'+url+'" size="24" maxlength="250" onFocus="this.className=\'\';"></td></tr>';
	    content += '<tr id="title_r'+thisFormId+'"><td>Titel:</td><td align="right"><input type="text" name="title" value="'+title+'" size="24" maxlength="28" onFocus="this.className=\'\';"></td></tr>';
	    content += '<tr id="description_r'+thisFormId+'"><td colspan="2">Beschrijving:<br><textArea name="description" rows="5" style="width:100%;" onFocus="this.className=\'\';">'+description+'</textarea></td></tr>';
	    content += '<tr><td colspan=2><input name="cancelButton" class="inputfield" type="button" ';
	    if(type == "EDIT"){
		content += 'onclick="showHideEditLinkDiv('+linkId+');return false;"';
	    }
	    else{
		content += 'onclick="return editNewLinkContent('+boxIndex+');" id="NewLinkBox'+boxIndex+'"';
	    }
	    content += ' value="annuleren">&nbsp;<input name="saveButton" class="inputfield" type="button" onclick="saveLink(this.form);return false;" value="bewaren"></td></tr>';
	    content += '</table></form>';

	    return content;
	}

	function deleteLink(linkId)
	{
	    // met ajax link verwijderen uit db, hier ook verwijderen 
	    if(!confirm("Deze link wordt definitief verwijderd")){return;} // TODO: evt titel vermelden in warning
	    else
	    {
		var ajaxIndex = ajaxObjects.length;
		ajaxObjects[ajaxIndex] = new sack();
		// showStatusBarMessage(numericId,'Loading data...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
		ajaxObjects[ajaxIndex].requestFile = 'func.php?task=deleteLink';// Specifying which file to get (eigenlijk doet het een POST)
		ajaxObjects[ajaxIndex].setVar("link_id",linkId);
		ajaxObjects[ajaxIndex].onCompletion = function(){ajaxObjects[ajaxIndex] = false;};// Specify function that will be executed after file has been found (stop feedback?)
		ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function
		var element = document.getElementById('dragableLink' + linkId);
		var boxIndex = element.parentNode.id.replace(/[^0-9]/g,'');
		element.parentNode.removeChild(element);
		// verwijderen uit de array met alle boxes
		for(linkIndex in dragableBoxesArray[boxIndex]['links'])
		{
	    	    if(dragableBoxesArray[boxIndex]['links'][linkIndex]['ID'] == linkId)
	    	    {
			dragableBoxesArray[boxIndex]['links'].splice(linkIndex,1); // verwijderen uit vorige box
			break;
		    }
		}
		setTimeout('saveBoxes()',50);
	    }
	}

	function showHideEditLinkDiv(linkId)
	{
	    var dragableLink = document.getElementById('dragableLink'+linkId);
	    if(dragableLink)
	    {
		// boxIndex.
		var boxIndex = dragableLink.parentNode.id.replace(/[^0-9]/g,''); // parentNode.id is dragableboxContent$boxID
		// key. TODO: kan deze for-lus vermeden worden?
		// TODO: fallback als iets foutgaat (['links'] bestaat niet of is geen array, ...)
		for(key in dragableBoxesArray[boxIndex]['links'])
		{
		    if(dragableBoxesArray[boxIndex]['links'][key]['ID'] == linkId){break;}
		}
		var link = dragableBoxesArray[boxIndex]['links'][key];
		var editDiv = document.getElementById('editLinkDiv'+linkId);
		if(editDiv)
		{
		    // editDiv weg, link terug default uiterlijk
		    dragableLink.className = "dragableLink";
		    editDiv.parentNode.removeChild(editDiv);
		}
		else
		{
		    // toevoegen van editDiv, link in titel-uiterlijk
		    // form in div stoppen, div tonen
		    dragableLink.className = "dragableLinkEdit";
		    var div = document.createElement('DIV');
		    div.id = 'editLinkDiv'+linkId;
		    div.className = "editLinkDiv";
		    div.innerHTML = getEditLinkForm("EDIT", boxIndex, link, key);
		    dragableLink.appendChild(div);
		}
	    }
	}

	function showFormError(rowId, message)
	{
	    var row = document.getElementById(rowId);
	    if(row)
	    {
	        var newRow = document.createElement('TR');
		var newTd = document.createElement('TD');
		newTd.colSpan = 2;
		newTd.innerHTML = message;
		newRow.appendChild(newTd);
	        newRow.className = 'formError';
	        row.parentNode.insertBefore(newRow, row.nextSibling); // If row.nextsibling is null, newRow is inserted at the end of the list of child nodes.
	    }
	}

	function saveLink(formObj)
	{
	    var type = formObj.type.value;

	    if(type == "NEW")
	    {
		var boxIndex = formObj.boxIndex.value;
	    }
	    else if(type == "EDIT")
	    {
		// boxindex en linkIndex opnieuw bepalen ahv linkId, want kan door drag veranderd zijn
		var linkId = formObj.linkId.value;
		dragableLink = document.getElementById("dragableLink"+linkId);
		var boxIndex = dragableLink.parentNode.id.replace(/[^0-9]/g,''); // parentNode.id is dragableboxContent$boxID
		formObj.boxIndex.value = boxIndex;
		// key. TODO: kan deze for-lus vermeden worden?
		for(key in dragableBoxesArray[boxIndex]['links'])
		{
		    if(dragableBoxesArray[boxIndex]['links'][key]['ID'] == linkId){break;}
		}
		formObj.linkIndex.value = key;
	    }

	    // controle input + feedback naar form
	    var errors = false;
	    // verwijder rows met errormessages
	    var table = document.getElementById('table_'+formObj.id);
	    var tableBody = false;
	    for(var i=0; table.childNodes[i] && !tableBody; i++)
	    {
		if(table.childNodes[i].tagName.toUpperCase() == "TBODY")
		{
		    tableBody = table.childNodes[i];
		    for(var j=0; tableBody.childNodes[j]; j++)
		    {
			if(tableBody.childNodes[j].className == "formError"){tableBody.removeChild(tableBody.childNodes[j]);j--;} // j-- want re-index bij remove
		    }
		}
	    }

	    // toevoegen row met errormessage waar nodig
	    if(formObj.url.value == ""||formObj.url.value == "http://")
	    {
		errors=true;
		showFormError("url_r"+formObj.id,"De url is niet geldig"); 
		formObj.url.className = "inputField_error";
	    }
	    if(formObj.title.value == "")
	    {
		errors=true;
		showFormError("title_r"+formObj.id,"Titel mag niet leeg zijn"); 
		formObj.title.className = "inputField_error";
	    }
	    
	    if(!errors)
	    {
    		// afhankelijk van type doorgeven aan addNewLink(boxIndex) en editLink(linkId, boxIndex, linkIndex) ?
		if(type == "NEW")
		{
		    addNewLink(formObj);
		}
		else if(type == "EDIT")
		{
		    editLink(formObj);
		}
	    }
	}
	
	function addNewLink(formObj)
	{
	    //  eerst met ajax aan de db toevoegen, zodat ID gekend is
	    var boxIndex = formObj.boxIndex.value;
	    formObj.saveButton.disabled = true;

	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    // showStatusBarMessage(numericId,'Loading data...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=addNewLink';	// Specifying which file to get (eigenlijk doet het een POST)
	    ajaxObjects[ajaxIndex].setVar("cat_id",dragableBoxesArray[boxIndex]['cat_id']);
	    ajaxObjects[ajaxIndex].setVar("url",formObj.url.value);
	    ajaxObjects[ajaxIndex].setVar("title",formObj.title.value);
	    ajaxObjects[ajaxIndex].setVar("description",formObj.description.value);
	    ajaxObjects[ajaxIndex].onCompletion = function(){addNewLink2(boxIndex,ajaxIndex, formObj.saveButton); ajaxObjects[ajaxIndex] = false; };	// Specify function that will be executed after file has been found (stop feedback?)
	    ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function
	}

	function addNewLink2(boxIndex, ajaxIndex, button)
	{
	    // TODO: wat als toevoegen niet lukt, feedback ?
	    button.disabled = false;

	    var temp = ajaxObjects[ajaxIndex].response; // default response = "" kan geen kwaad
	    if(temp != "")
	    {
		var newLink = JSON.parse(temp);
		if(typeof(newLink['link_id'])!="undefined")
		{
		    // nieuwe link zou onderaan moeten komen
		    // nieuwe link toegevoegd=> deze staat nog niet in de box => sortboxesvert bij showboxcontent kan niet
		    // dus appart eerst onderaan toevoegen aan div, div hoeft niet eens ingevuld!
		    var tempLinkDiv = document.createElement('DIV');
		    tempLinkDiv.id = "dragableLink"+newLink['link_id'];
		    var container = document.getElementById("dragableBoxContent"+boxIndex);
		    container.appendChild(tempLinkDiv);

		    // ok; link toevoegen aan dragableboxesArray
		    // TODO: inputfields leegmaken?
		    if(typeof(dragableBoxesArray[boxIndex]['links']) == "undefined"){dragableBoxesArray[boxIndex]['links'] = new Array();}
		    var linkIndex = dragableBoxesArray[boxIndex]['links'].length;
		    dragableBoxesArray[boxIndex]['links'][linkIndex] = new Array();
		    dragableBoxesArray[boxIndex]['links'][linkIndex]['ID'] = newLink['link_id'];
		    dragableBoxesArray[boxIndex]['links'][linkIndex]['TITLE'] = newLink['title'];
		    dragableBoxesArray[boxIndex]['links'][linkIndex]['DESCRIPTION'] = newLink['description'];
		    dragableBoxesArray[boxIndex]['links'][linkIndex]['URL'] = newLink['url'];
		    dragableBoxesArray[boxIndex]['links'][linkIndex]['obj'] = newLink['url'];

            	    showBoxContent(boxIndex);
		    // TODO: hier gebruik maken van meer algemene functies ?
		    var el = document.getElementById("addLinkEdit"+boxIndex);
		    if(el){el.style.display = "none";}
		    var anchor = document.getElementById("addLinkEditLink"+boxIndex);
	    	    anchor.innerHTML = txt_editLink;
		}
	    }
	}

	function editLink(formObj)
	{
	    var linkId = formObj.linkId.value;
	    var boxIndex = formObj.boxIndex.value;
	    var linkIndex = formObj.linkIndex.value;

	    formObj.saveButton.disabled = true;

	    //  eerst met ajax aan de db toevoegen, zodat ID gekend is
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    // showStatusBarMessage(numericId,'Saving link...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=editLink';	// Specifying which file to get (eigenlijk doet het een POST)
	    ajaxObjects[ajaxIndex].setVar("link_id",linkId);
	    ajaxObjects[ajaxIndex].setVar("url",formObj.url.value);
	    ajaxObjects[ajaxIndex].setVar("title",formObj.title.value);
	    ajaxObjects[ajaxIndex].setVar("description",formObj.description.value);
	    ajaxObjects[ajaxIndex].onCompletion = function(){editLink2(linkId,ajaxIndex, boxIndex, linkIndex, formObj.saveButton); ajaxObjects[ajaxIndex] = false; };	// Specify function that will be executed after file has been found (stop feedback?)
	    ajaxObjects[ajaxIndex].runAJAX();	// Execute AJAX function
	}

	function editLink2(linkId, ajaxIndex, boxIndex, linkIndex, button)
	{
	    // TODO: wat als editeren niet lukt, feedback ?
	    button.disabled = false;

	    var temp = ajaxObjects[ajaxIndex].response; // default response = "" kan geen kwaad
	    if(temp != "")
	    {
 		var editLink = JSON.parse(temp);
		if(typeof(editLink['link_id'])!="undefined")
		{
		    // ok; link-gegevens aanpassen in dragableboxesArray, box opnieuw tonen
		    if(typeof(dragableBoxesArray[boxIndex]['links']) == "undefined"){return;} // zou niet mogen kunnen
		    if(typeof(dragableBoxesArray[boxIndex]['links'][linkIndex]) == "undefined"){return;} // zou niet mogen kunnen

		    if(dragableBoxesArray[boxIndex]['links'][linkIndex]['ID'] == editLink['link_id']) // zou moeten, check niet echt nodig?
		    {
			dragableBoxesArray[boxIndex]['links'][linkIndex]['TITLE'] = editLink['title'];
			dragableBoxesArray[boxIndex]['links'][linkIndex]['DESCRIPTION'] = editLink['description'];
			dragableBoxesArray[boxIndex]['links'][linkIndex]['URL'] = editLink['url'];

            		showBoxContent(boxIndex); // heel box opnieuw tonen, kan nl volgorde veranderd zijn in alfabetische box
		    }
		}
	    }
	}

	function showStatusBarMessage(numericId,message)
	{
	    document.getElementById('dragableBoxStatusDiv' + numericId).innerHTML = message;
	}

	function showHideBoxContent()
	{
		var numericId = this.id.replace(/[^0-9]/g,'');
		var obj = document.getElementById('dragableBoxContent' + numericId);
		var displayStyle = (obj.style.display=='none'?'block':'none');
		obj.style.display = displayStyle;
		dragableBoxesArray[numericId]['collapse'] = displayStyle;
		this.src = (displayStyle=='none'?src_rightImage:src_downImage);
		if(pageType == "VAR"){setTimeout('saveBoxes()',50);}
		else if(pageType == "FAV"){saveFavoritesBox(numericId, "collapse");} // enkel deze categorie aanpassen in db
	}

	function mouseoverCollapseImg()
	{
		// open/toeklap-prentje laten zien, afhankelijk van display-status
		var id = this.id.replace(/[^0-9]/g,'');
		var obj = document.getElementById('dragableBoxContent' + id);
		this.src = obj.style.display=='none'?src_rightImage:src_downImage;
	}
	
	function mouseoutCollapseImg(e,obj)
	{
		// favicon/open/toeklap-prentje laten zien, afhankelijk van status en beschikbaarheid favicon
		if(!obj)obj=this;		
		var id = obj.id.replace(/[^0-9]/g,'');
		if(dragableBoxesArray[id]['favicon'])
		{
		    showFavicon(id);
		}
	}
	
	function mouseoverBoxHeader(e)
	{
	    if(!isDragging)
	    {
		var id = this.id.replace(/[^0-9]/g,'');

		document.getElementById('rightHeaderDiv' + id).style.display = 'inline';
		// this.className="dragableBoxHeader_hover"; // layout, ff weggedaan
	    }
	}
	function mouseoutBoxHeader(e,obj)
	{
		if(!obj)obj=this;		
		var id = obj.id.replace(/[^0-9]/g,'');
		document.getElementById('rightHeaderDiv' + id).style.display = 'none';
		// this.className="dragableBoxHeader"; // layout ff weggedaan
	}

	function getScrollY() 
	{
	    var scrOfY = 0;
	    if( typeof( window.pageYOffset ) == 'number' ) {
		//Netscape compliant
		scrOfY = window.pageYOffset;
	    } else if( document.body && document.body.scrollTop ) {
		//DOM compliant
		scrOfY = document.body.scrollTop;
	    } else if( document.documentElement && document.documentElement.scrollTop) {
		//IE6 standards compliant mode
	        scrOfY = document.documentElement.scrollTop;
	    }
	    return scrOfY;
	}

	function initDrag(e, link)
	{
	    if(isDragging){return;}
	    /*** initialize dragObject ***/
	    if(document.all)e = event;
	    if (e.target){ source = e.target;}
	    else if (e.srcElement){ source = e.srcElement;}
	    if (source.nodeType == 3){source = source.parentNode;}// defeat Safari bug
	    
	    // TODO: array met dragTypes
	    if(!link)
	    {
		// check dat op header geklikt is (div of span), maar niet op ander element (img, link, form...) in header
		var srclower = source.tagName.toLowerCase();
		if(srclower !='div' && srclower != 'span')return;

		dragType = "BOX";
		isDragging = true;

		var numericId = this.id.replace(/[^0-9]/g,'');
		dragObject = document.getElementById('dragableBox'+numericId);
		mouseoutBoxHeader(e,dragObject);
	    }
	    else
	    {
		dragType = "LINK";
		isDragging = true;

		linkDrag = new Array();
		var numericId = link.id.replace(/[^0-9]/g,'');
		dragObject = document.getElementById('dragableLink'+numericId);

		// boxindex en id van deze link bijhouden bij begin drag
		var boxIndex = dragObject.parentNode.id.replace(/[^0-9]/g,'');
		linkDrag['boxIndex'] = boxIndex;
		linkDrag['linkId'] = numericId;
	    }
	    // beginpositie muis
	    mouse_x = e.clientX;
	    mouse_y = e.clientY;
	    
	    el_x = getLeftPos(dragObject)/1;
	    el_y = getTopPos(dragObject)/1 - getScrollY();

	    // TODO: optimaliseer, overbodige weghalen
	    getColumnBoxesArray();
	    oldDestinationObj = false;
	    if(dragObject.style)
	    {
	        // TODO: stylen in stylesheet? hier enkel set className (of bij initdrag)?
	        dragObject.style.width = (dragObject.offsetWidth - (dragObjectBorderWidth*2)) + 'px';
	        dragObject.style.position = 'absolute';
    		dragObject.style.zIndex = '800';

		if(dragType == "LINK"){dragObject.className = "dragLink_move";}
		else if(dragType == "BOX")
		{
		    // dragObject.className = "dragableBox_move";
		    if(transparencyWhenDragging){
		        dragObject.style.filter = 'alpha(opacity=80)';
		        dragObject.style.opacity = '0.8';
		    }
		}
	    }
	    rectangleDiv.style.marginBottom = (dragType == "BOX"?"10px":"0px");
	    if(dragType == "BOX" && dragableBoxesArray[numericId].type == "FLASH"){rectangleDiv.style.height = dragObject.offsetHeight+"px"; }
	    else{rectangleDiv.innerHTML = dragObject.innerHTML;}
	    rectangleDiv.style.display='block';
	    if(dragObject.parentNode)
	    {
	        dragObject.parentNode.insertBefore(rectangleDiv,dragObject);
	    }
	    document.body.appendChild(dragObject);
	    dragObjectMiddle = Math.floor(dragObject.offsetWidth/2);

	    moveDragableElement(e); // eerste keer move hier expliciet!
	    return false;
	}

	function getMousePos(e)
	{
	    // check op browser niet zo mooi, maar nodig om scroll juist te interpreteren
	    if (!e) var e = window.event;
	    if (e.pageX || e.pageY)
	    {
		posX = e.pageX;
		posY = e.pageY;
	    }
	    else if (e.clientX || e.clientY)
	    {
	        posX = e.clientX;
	        posY = e.clientY;
	        if (isIE)
	        {
	            if (document.documentElement && document.documentElement.scrollTop)
		    {
		        posX += document.documentElement.scrollLeft;
		        posY += document.documentElement.scrollTop;
		    }
		    else
		    {
		        posX += document.body.scrollLeft;
			posY += document.body.scrollTop;
		    }
		}
	    }
	}
	
	function moveDragableElement(e){
		if(!isDragging || !dragObject){return;}

		getMousePos(e);

		// altijd dragObject op voorgrond verplaatsen
		dragObject.style.left = (posX - mouse_x + el_x) + 'px';
		dragObject.style.top = (el_y - mouse_y + posY) + 'px';

		// pas om de zoveel tijd rectanglediv op achtergrond verplaatsen
		// ('waitingToMove' wordt terug false bij begin moveRectangleDiv, 'oktomove' wordt terug true bij einde stopDrag)
		if(!okToMove){if(!waitingToMove){waitingToMove=true;setTimeout('moveRectangleDiv()',20);}}
		else{okToMove = false;moveRectangleDiv();}
	}

	function moveRectangleDiv()
	{
		// verplaatsen van de box op de achtergrond
		waitingToMove = false;

		// referentie bovenkant (Y-positie = topPos) en midden (X-positie = leftPos) van dragObject ipv positie muis
		if(dragType=="BOX"){leftPos = getLeftPos(dragObject) + dragObjectMiddle;}
		else{leftPos = getLeftPos(dragObject);}
		topPos = getTopPos(dragObject);

		destinationObj = false;
		var objFound = false;
		var colFound = false;
		var colNr = 1;
		
		// zoek kolom waar hij thuishoort
		for(var no=1;no<=numberOfColumns && !colFound;no++){
		    var obj = document.getElementById('dragableBoxesColumn' + no);
		    var left = getLeftPos(obj)/1;
		    var width = obj.offsetWidth;
		    if((leftPos>left || no==1) && (leftPos<=(left+width)||no==numberOfColumns)) 
		    {
		    	colNr = no;
			// als het een box is die gedragged wordt, hier columnIndex aanpassen van dragablebox
			if(dragType == "BOX")
			{
			    tmpIndex = dragObject.id.replace(/[^0-9]/g,'');
        		    dragableBoxesArray[tmpIndex]['columnIndex'] = colNr;
			}
		    	colFound=true;
		    	break;
		    }
		}
		
		// zoek juiste plaats ahv hoogte + verplaats
		var nrBoxes = columnBoxesArray[colNr].length;
		for(var no=0;no<nrBoxes && !objFound;no++)
		{
		    var thisBox = columnBoxesArray[colNr][no];

		    var tmpY = getTopPos(thisBox);
		    var tmpBottomY = getBottomPos(thisBox);
		    if(dragType == "BOX")
		    {
			if(topPos < tmpY) // als bv tmpY - 5 => pas als hij 5px boven de andere box komt, wordt hij erboven geplaatst
			{
			    // hij komt boven deze box, niet verder zoeken (de volgende in de rij staat lager)
			    destinationObj = thisBox;
			    if(oldDestinationObj != destinationObj) // enkel verplaatsen als het een nieuwe locatie is => als type==box herberekenen van kolom(men) met getColumnBoxes
			    {
				oldDestinationObj = destinationObj;
				destinationObj.parentNode.insertBefore(rectangleDiv,destinationObj);
				getColumnBoxesArray();
			    }
			    rectangleDiv.style.display = 'block';
			    objFound = true;
			    break;
			}
		    }
		    else if(dragType == "LINK")
		    {
			// check of hij 'op' een dragablebox staat 
			// toppos is van de link, tmpy van dragablebox
			var thisBoxId = thisBox.id.replace(/[^0-9]/g,'');

			if(topPos < tmpY) // zit boven deze box, verder zoeken heeft geen zin
			{
			    /*** TODO: wat als destinationobj nemen? 
				zou olddestinationobj moeten zijn, want als tot boven bovenste box gedragged...
				zeker dat olddestinationobj niet false is?
			    ***/
			    objFound = true;
			    destinationObj = oldDestinationObj;
			    break;
			}

			else if((topPos > tmpY) && (topPos < tmpBottomY) && (dragableBoxesArray[thisBoxId]['type'] == "FAVORITES"))
			{
			    // juiste dragablebox gevonden, ga al de links van deze link af
			    objFound = true;
			    var linkFound = false;
			    parentObj = document.getElementById('dragableBoxContent' + thisBoxId);
			    for(var no2=0; parentObj.childNodes[no2] && !linkFound; no2++)
			    {
				var thisLink = parentObj.childNodes[no2];
				if(thisLink.id != "rectangleDiv" && topPos < getTopPos(thisLink))
				{
				    // hij komt boven deze link, niet verder zoeken, de volgende staat lager
				    destinationObj = thisLink;
				    if(oldDestinationObj != destinationObj) // enkel verplaatsen als het een nieuwe locatie is
				    {
					oldDestinationObj = destinationObj;
					destinationObj.parentNode.insertBefore(rectangleDiv, destinationObj);
					if(linkDrag['boxIndex'] != thisBoxId){moveDragLinkBox(thisBoxId);}
				    }
				    rectangleDiv.style.display = 'block';
				    linkFound = true;
				    break;
				}
				
			    }
			    if(!linkFound)
			    {
				// onderaan toevoegen aan de (content)box
				destinationObj = document.getElementById('dragableBoxContent' + thisBoxId);
				if(oldDestinationObj != destinationObj)
				{
				    oldDestinationObj = destinationObj;
				    destinationObj.appendChild(rectangleDiv);
				    if(linkDrag['boxIndex'] != thisBoxId){moveDragLinkBox(thisBoxId);}
				}
				rectangleDiv.style.display = 'block';
			    }
			}
		    }
		}

		if((!objFound || !destinationObj) && dragType == "BOX")
		{
		    // toevoegen aan column
		    destinationObj = obj; // de laatst geselecteerde column
		    if(oldDestinationObj != destinationObj) // enkel verplaatsen als het een nieuwe locatie is
		    {
			oldDestinationObj = destinationObj;
			obj.appendChild(rectangleDiv);
			getColumnBoxesArray();
		    }
		    rectangleDiv.style.display='block';
		}
		if(!destinationObj && dragType == "LINK")
		{
		    destinationObj = oldDestinationObj; // TODO: is oldDestinationObj altijd goed ingevuld? Kan false zijn, wat dan beter nemen?
		}
	}

	function moveDragLinkBox(thisBoxId)
	{
	    // link in dragableboxesarray ook van plaats wisselen
	    var oldBoxIndex = linkDrag['boxIndex'];
	    for(linkIndex in dragableBoxesArray[oldBoxIndex]['links'])
	    {
	        if(dragableBoxesArray[oldBoxIndex]['links'][linkIndex]['ID'] == linkDrag['linkId'])
	        {
	    	    var tempLink = dragableBoxesArray[oldBoxIndex]['links'][linkIndex]; // de link
		    dragableBoxesArray[oldBoxIndex]['links'].splice(linkIndex,1); // verwijderen uit vorige box
		    if(typeof(dragableBoxesArray[thisBoxId]['links']) == "undefined")
		    {
			dragableBoxesArray[thisBoxId]['links'] = new Array();
		    }
		    dragableBoxesArray[thisBoxId]['links'].push(tempLink); // toevoegen onderaan nieuwe box
		    break;
		}
	    }
	    linkDrag['boxIndex'] = thisBoxId;
	}

	function stopDrag()
	{
	    okToMove=true;

	    if(!isDragging)
	    {
		dragObject = false;
		isDragging = false;
	    }
	    else
	    {
		isDragging = false;
		// de tijdelijke rectanglediv wegdoen, de echte box 'dragObject' in de plaats toevoegen
		if(dragType == "LINK"){dragObject.className = "dragLink";} // dwz: border weg
		else if(dragType == "BOX")
		{
		    // dragObject.className = "dragableBox";
		    if(transparencyWhenDragging){
			if(dragObject.style)dragObject.style.filter = null;
			if(dragObject.style)dragObject.style.opacity = null;
		    }
		}
		
		if(dragObject.style)
		{
		    dragObject.style.position = 'static';
		    dragObject.style.width = null;
		}

		rectangleDiv.style.display = 'none';
		rectangleDiv.innerHTML = "";
		rectangleDiv.style.height = "";

		if(destinationObj) // TODO: vreemde 2de voorwaarde weggedaan: " && destinationObj.id!=dragObject.id "
		{
		    var destinationIdPart = (dragType == "BOX"?"dragableBoxesColumn":"dragableBoxContent");
		    if(destinationObj.id.indexOf(destinationIdPart)>=0){
			destinationObj.appendChild(dragObject);
			if(dragType=="LINK"){linkDrag['destinationId'] = -1;}
		    }else{
			destinationObj.parentNode.insertBefore(dragObject,destinationObj);
			if(dragType=="LINK"){linkDrag['destinationId'] = destinationObj.id.replace(/[^0-9]/g,'');}
		    }
		}
		else
		{
		    // TODO: dit moet eleganter.. zou niet mogen uitgevoerd worden?
		    var dragObjectParent = dragObject.parentNode; // TODO: is dit ook voor dragLinks juist?
		    var dragObjectNextSibling = false;
		    if(dragObject.nextSibling){
	    		dragObjectNextSibling = dragObject.nextSibling;
	    		if(dragObjectNextSibling.tagName!='DIV')dragObjectNextSibling = dragObjectNextSibling.nextSibling;
		    }
		    
		    if(dragObjectNextSibling){
			dragObjectParent.insertBefore(dragObject,dragObjectNextSibling);
			if(dragType=="LINK"){linkDrag['destinationId'] = dragObjectNextSibling.id.replace(/[^0-9]/g,'');}
		    }else{
			dragObjectParent.appendChild(dragObject);
			if(dragType=="LINK"){linkDrag['destinationId'] = -1;}
		    }
		    // einde stuk "dit moet eleganter"
		}
		
		dragObject = false;
		dragObjectNextSibling = false;
		dragObjectParent = false;
		destinationObj = false;

		if(dragType == "BOX")
		{
		    setTimeout('saveBoxes()',50);
		}
		else if(dragType == "LINK")
		{
		    //  category, priority updaten in db (met ajax)
		    var boxIndex = linkDrag['boxIndex'];
		    if(dragableBoxesArray[boxIndex]['linkOrder'] == "ALFABETIC")
		    {
			dragableBoxesArray[boxIndex]['links'].sort(sortBoxesAlfab);
			showFavorites(boxIndex);
		    }
		    saveMoveLink(dragableBoxesArray[boxIndex]['cat_id'], linkDrag['linkId'], linkDrag['destinationId']);
		}
	    }
	}
	
	function saveMoveLink(category_id, link_id, destination_id)
	{
	    // een link is versleept, dus category_id updaten in db op server
	    // destination-id is id van de link waarboven hij geplaatst is, -1 als het onderaan de box is
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    // showStatusBarMessage(numericId,'Loading data...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=moveLink';	// Specifying which file to get (eigenlijk doet het een POST)
	    ajaxObjects[ajaxIndex].setVar("category_id",category_id);
	    ajaxObjects[ajaxIndex].setVar("link_id", link_id);
	    ajaxObjects[ajaxIndex].setVar("destination_id",destination_id);
	    ajaxObjects[ajaxIndex].onCompletion = function(){ajaxObjects[ajaxIndex] = false;};	// Specify function that will be executed after file has been found (feedback?)
	    ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function
	}
	
	function addBoxHeader(parentObj,type)
	{
		// dragableBoxheader bevat ook titleDiv (altijd zichtbaar) en editDiv (standaard hidden)
		var div = document.createElement('DIV');
		var className = 'dragableBoxHeader';
		div.className = className;
		div.style.cursor = 'move';
		div.id = 'dragableBoxHeader' + boxIndex;
		div.onmouseover = mouseoverBoxHeader;
		div.onmouseout = mouseoutBoxHeader;
		div.onmousedown = initDrag;
		parentObj.appendChild(div);
		
		// stukje dat altijd getoond wordt boven een box                
                var titleDiv = document.createElement('DIV');
                titleDiv.className = 'dragableBoxHeaderTitle';
                div.appendChild(titleDiv);
                
		// dingen die links moeten komen in een leftHeaderDiv
                var leftHeaderDiv = document.createElement('DIV');
                leftHeaderDiv.className = "leftHeaderDiv";
		leftHeaderDiv.id = 'leftHeaderDiv' + boxIndex;
		titleDiv.appendChild(leftHeaderDiv);

                // dingen die rechts moeten komen in een rightHeaderDiv
                var rightHeaderDiv = document.createElement('DIV');
		className = "rightHeaderDiv";
                rightHeaderDiv.className = className;
		rightHeaderDiv.id = 'rightHeaderDiv' + boxIndex;
                titleDiv.appendChild(rightHeaderDiv);

		if(boxType[type]['supportCollapse'])
		{
            	    // links prentje collapse/open
		    var image = document.createElement('IMG');
		    image.id = 'dragableBoxExpand' + boxIndex;	
		    image.src = (dragableBoxesArray[boxIndex]['collapse']=="none"?src_rightImage:src_downImage);
		    image.className = "expandImg";
		    image.onmousedown = showHideBoxContent;
		    image.onmouseover = mouseoverCollapseImg;
		    image.onmouseout = mouseoutCollapseImg;
		    leftHeaderDiv.appendChild(image);
		}
		
		if(boxType[type]['supportTitle'])
		{
            	    // titel
		    var textSpan = document.createElement('SPAN');
		    textSpan.id = 'dragableBoxHeader_txt' + boxIndex;
		    leftHeaderDiv.appendChild(textSpan);
		}

                if(boxType[type]['supportEdit'])
                {
        	    var editLink = document.createElement('A');
		    editLink.href = '#';
		    editLink.onclick = editDragableBox;
		    editLink.id = 'dragableBoxEditLink' + boxIndex;
		    editLink.innerHTML = txt_editBox;
		    editLink.className = 'dragableBoxEditLink';
		    editLink.style.cursor = 'pointer';
            	    rightHeaderDiv.appendChild(editLink);

		    var editBox = document.createElement('DIV');
		    editBox.style.clear='both';
		    editBox.id = 'dragableBoxEdit' + boxIndex;
		    editBox.style.display='none';
		    editBox.className = "editBox";		
		    div.appendChild(editBox);
                }
		
                if(boxType[type]['supportRefresh'])
                {
                    // refresh
		    var image = document.createElement('IMG');
		    image.src = src_refreshSource;
		    image.id = 'dragableBoxRefreshSource' + boxIndex;
		    image.className = "refreshImg";
		    image.onclick = refreshContent;
		    image.style.cursor = 'pointer';
		    rightHeaderDiv.appendChild(image);
                }
        	
		if(boxType[type]['supportClose'])
		{
            	    // kruisje
		    var closeLink = document.createElement('A');
		    closeLink.id = 'dragableBoxCloseLink' + boxIndex;
		    closeLink.href = '#';
		    closeLink.innerHTML = '<img src="images/close.gif" border=0>'; // TODO: of als child toevoegen?
		    closeLink.className = 'closeButton';
		    closeLink.style.cursor = 'pointer';
		    closeLink.onmousedown = closeDragableBox;
		    rightHeaderDiv.appendChild(closeLink);
		}

		if(boxType[type]['supportFavicon'])
		{
		    setFavicon(boxIndex);
		}		
                return div;
	}
        
	function saveFeedBox(formObj)
	{
		var boxIndex = formObj.boxIndex.value;
		
		var heightOfBox = (formObj.fixedHeight.checked?formObj.heightOfBox.value:0);
		var intervalObj = dragableBoxesArray[boxIndex]['intervalObj'];
		if(intervalObj)clearInterval(intervalObj);
		
		if(heightOfBox && heightOfBox>=boxMinHeight){
		    var contentObj = document.getElementById('dragableBoxContent' + boxIndex);
		    contentObj.style.height = heightOfBox + 'px';
		    // TODO: deze lijnen in commentaar zijn nutteloos?
		    //contentObj.setAttribute('heightOfBox',heightOfBox);
		    //contentObj.heightOfBox = heightOfBox;
		    if(document.all)contentObj.style.overflowY = 'auto';else contentObj.style.overflow='-moz-scrollbars-vertical;';
		    if(opera)contentObj.style.overflow='auto';
		}
		else if(dragableBoxesArray[boxIndex]['heightOfBox']>0)
		{
		    // scrollbars verwijderen als ze er staan
		    var contentObj = document.getElementById('dragableBoxContent' + boxIndex);
		    contentObj.style.height = 'auto';
		    if(document.all)contentObj.style.overflowY = '';else contentObj.style.overflow='';
		    if(opera)contentObj.style.overflow='';
		}
		// TODO : enkel als 'eigen title' aangevinkt staat, aanvinken => pas inputveld geven.
		dragableBoxesArray[boxIndex]['boxTitle'] = formObj.boxTitle.value;
		dragableBoxesArray[boxIndex]['rssUrl'] = formObj.rssUrl.value;
		dragableBoxesArray[boxIndex]['heightOfBox'] = heightOfBox;
		dragableBoxesArray[boxIndex]['maxRssItems'] = formObj.maxRssItems.value;
		dragableBoxesArray[boxIndex]['heightOfBox'] = heightOfBox;
		dragableBoxesArray[boxIndex]['minutesBeforeReload'] = formObj.minutesBeforeReload.value;
		
		if(dragableBoxesArray[boxIndex]['minutesBeforeReload'] && dragableBoxesArray[boxIndex]['minutesBeforeReload']>5){
			var tmpInterval = setInterval("showBoxContent(" + boxIndex + ")",(dragableBoxesArray[boxIndex]['minutesBeforeReload']*1000*60));	
			dragableBoxesArray[boxIndex]['intervalObj'] = tmpInterval;
		}
		showBoxContent(boxIndex);
		
		setTimeout('saveBoxes()',50);
	}

	function saveFavoritesBox(formObj, saveType)
	{
	    var boxIndex = (saveType=="collapse"?formObj:formObj.boxIndex.value); // TODO: maak dit mooier

	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    ajaxObjects[ajaxIndex].setVar("cat_id",dragableBoxesArray[boxIndex]['cat_id']);
	    if(saveType == "collapse")
	    {
		var saveFavType = "collapse";
		ajaxObjects[ajaxIndex].setVar("collapse",dragableBoxesArray[boxIndex]['collapse']);
	    }
	    else
	    {
		// TODO: save-button op disabled, andere feedback van saven?
		// TODO: na saven automatisch form-div display op none zetten? -> nee lijkt me van niet
		var saveFavType = "edit";
		var style = formObj.boxStyle.value;
		dragableBoxesArray[boxIndex]['boxTitle'] = formObj.boxTitle.value;
		dragableBoxesArray[boxIndex]['style'] = style;
		dragableBoxesArray[boxIndex]['linkOrder'] = formObj.boxLinkOrder.value;


		ajaxObjects[ajaxIndex].setVar("title",dragableBoxesArray[boxIndex]['boxTitle']);
		ajaxObjects[ajaxIndex].setVar("style",dragableBoxesArray[boxIndex]['style']);
		ajaxObjects[ajaxIndex].setVar("linkOrder",dragableBoxesArray[boxIndex]['linkOrder']);
	    }
	    // TODO: optimaliseren? bij showBoxContent worden ook de links opnieuw getoond, dat is mss niet nodig (maar kan geen kwaad)
	    showBoxContent(boxIndex);
	    // showStatusBarMessage(numericId,'Loading data...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=saveBoxesSettings&saveFavType='+saveFavType+'&pageType='+pageType+"&pageName="+pageName;	// Specifying which file to get (eigenlijk doet het een POST)
	    ajaxObjects[ajaxIndex].onCompletion = function(){ ajaxObjects[ajaxIndex] = false; };  // Specify function that will be executed after file has been found (stop feedback?)
	    ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function
	}
		
	function addBoxContentContainer(parentObj,heightOfBox)
	{
		var div = document.createElement('DIV');
		div.className = 'dragableBoxContent';
		if(opera)div.style.clear='none';
		div.id = 'dragableBoxContent' + boxIndex;
		if(dragableBoxesArray[boxIndex]['collapse'] == "none"){div.style.display = "none";}
		parentObj.appendChild(div);
		if(heightOfBox && heightOfBox/1>=boxMinHeight){
			div.style.height = heightOfBox + 'px';
			div.setAttribute('heightOfBox',heightOfBox);
			div.heightOfBox = heightOfBox;
			if(document.all)div.style.overflowY = 'auto';else div.style.overflow='-moz-scrollbars-vertical;';
			if(opera)div.style.overflow='auto';
		}
                return div;
	}
	
		
	function addBoxStatusBar(parentObj, type)
	{
		var div = document.createElement('DIV');
		div.className = 'dragableBoxStatusBar bg_default';
		parentObj.appendChild(div);
		if(type == "FAVORITES")
		{
        	    var editLink = document.createElement('A');
		    editLink.href = '#';
		    editLink.onclick = editNewLinkContent;
		    editLink.id = 'addLinkEditLink' + boxIndex;
		    editLink.innerHTML = txt_editLink;
		    editLink.className = 'uwLink';
		    editLink.display = "block";		// TODO: dit mag naar de css?
		    editLink.style.cursor = 'pointer';
		    div.appendChild(editLink);

		    var editBox = document.createElement('DIV');
		    // editBox.style.clear='both'; / /TODO: clear niet nodig ?
		    editBox.id = 'addLinkEdit' + boxIndex;
		    editBox.style.display='none';
		    editBox.className = "linkEditBox";
		    div.appendChild(editBox);
		}
		else
		{
		    var statusDiv = document.createElement('DIV');
		    statusDiv.className = 'dragableBoxStatusDiv';
		    statusDiv.id = 'dragableBoxStatusDiv' + boxIndex;		    
		    div.appendChild(statusDiv);
		}
                return div;
	}

	function createABox(columnIndex, rowIndex, heightOfBox)
	{
		boxIndex++;
		
		var rowIndex = (typeof(rowIndex)=="undefined"?"-1":rowIndex);
		var div = document.createElement('DIV');
		div.className = 'dragableBox';
		div.id = 'dragableBox' + boxIndex;
		
		var obj = document.getElementById('dragableBoxesColumn' + columnIndex);
		if(rowIndex == "-1")
		{
		    obj.appendChild(div);
		}
		else
		{
		    var subs = obj.getElementsByTagName('DIV');
		    if(subs.length>rowIndex){
			obj.insertBefore(div,subs[rowIndex]);
		    }else{
			obj.appendChild(div);
		    }
		}
		
		dragableBoxesArray[boxIndex] = new Array();
		dragableBoxesArray[boxIndex]['obj'] = div;
		
		return boxIndex;
	}
	
	function showRSSData(ajaxIndex,boxIndex)
	{
		var rssContent = ajaxObjects[ajaxIndex].response;

		rssContent = rssContent.replace(/<\S[^>]*>/g,""); // alle html er uithalen

		tokens = rssContent.split(/\n\n/g);
		
		var headerTokens = tokens[0].split(/\n/g);
		if(headerTokens[0]=='0'){
			headerTokens[1] = '';
			headerTokens[0] = 'Invalid source';
		}
		// zelf gekozen titel heeft voorrang
		// TODO: van andere boxjes wordt title geset bij showboxconten...
		var boxTitle = (dragableBoxesArray[boxIndex]['boxTitle'] ? dragableBoxesArray[boxIndex]['boxTitle'] : headerTokens[0]);
		document.getElementById('dragableBoxHeader_txt' + boxIndex).innerHTML = '<span>' + boxTitle + '&nbsp;<\/span><span class="rssNumberOfItems">(' + headerTokens[1] + ')<\/span>';	// title

		var thisColumnNr = dragableBoxesArray[boxIndex]['columnIndex'];
		var columnWidth =  document.getElementById('dragableBoxesColumn'+thisColumnNr).offsetWidth;

		var string = '<table border="0" align="center" cellpadding="0" cellspacing="0" class="rssTable">';
		for(var no=1;no<tokens.length;no++){	// Looping through RSS items
			var itemTokens = tokens[no].split(/##/g);

			itemTokens[2] = itemTokens[2].replace(/^\s*|\s*$/g,"");
			if(itemTokens[2] == "")
			{
			    itemTokens[2] = itemTokens[0];
			}
			itemTokens[2] = itemTokens[2].replace(/^\s*|\s*$/g,"");
			itemTokens[2] = itemTokens[2].replace(/`/g, '&acute;');
			itemTokens[2] = itemTokens[2].replace(/"/g, '&quot;'); //"
			itemTokens[2] = itemTokens[2].replace(/'/g, '&acute;'); //'

		    	// tijdelijke hack voor sporza-knoeiers
			// hoe algemener zonder dingen (cf. ftp e.d.) kapot te maken?
			if(itemTokens[3].substr(0,6) == 'sporza')
			{
			    itemTokens[3] = 'http://www.'+itemTokens[3];
			}

			var tooltip = " onMouseover=\"showTooltip('"+ itemTokens[2] +"', "+columnWidth+");\"; onMouseout=\"hideTooltip()\" ";
			string = string + '<tr><td valign="top"><img src="' + src_smallRightArrow + '" style="margin-top: 3px;"></td><td><div><a '+tooltip+' class="mdisc2 rssLink" href="' + itemTokens[3] + '" onclick="var w = window.open(this.href);return false;">' + itemTokens[0] +'<\/a></div><\/td><\/tr>';
		}
		string = string + '<\/table>';
		document.getElementById('dragableBoxContent' + boxIndex).innerHTML = string;
		showStatusBarMessage(boxIndex,'&nbsp;'); // &nbsp; nodig, anders flikker in IE

	}
		
	function cleanFaviconUrl(url)
	{
	  var lastIndex = url.lastIndexOf("/");
	  if (lastIndex!=(url.length-1) && lastIndex!=6) 
	  {
	    return url.substring(0, lastIndex);
	  } 
	  else 
	  {
	    if (lastIndex==(url.length-1)) 
	    {
		return url.substring(0, url.length-1);
	    } 
	    else 
	    {
		return url;
	    }
	  }
	}

	function getFaviconUrl(url) {
	    url = cleanFaviconUrl(url);  // TODO: nodig?
	    var regexp = "^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\\?([^#]*))?(#(.*))?$";
	    var r = url.match(new RegExp(regexp));
	    return (r[2] || (r[1] ? "" : null))+"://"+(r[4] || (r[3] ? "" : null));
	}

	function setFavicon(boxIndex)
	{
            var type = dragableBoxesArray[boxIndex]['type'];
	    if(boxType[type]['supportFavicon'])
	    {
		if(!faviconUrl && dragableBoxesArray[boxIndex]['rssUrl']){var faviconUrl = getFaviconUrl(dragableBoxesArray[boxIndex]['rssUrl']);}
	    }
	    if(faviconUrl)
	    {
		// check met ajax of favicon bestaat
		var ajaxIndex = ajaxObjects.length;
		ajaxObjects[ajaxIndex] = new sack();
		ajaxObjects[ajaxIndex].requestFile = 'func.php?task=testFavicon&url='+faviconUrl;
		ajaxObjects[ajaxIndex].onCompletion = function(){ saveFavicon(ajaxIndex,boxIndex); ajaxObjects[ajaxIndex] = false; };
		ajaxObjects[ajaxIndex].runAJAX();
	    }
	}

	function showFavicon(boxIndex)
	{
	    var url = dragableBoxesArray[boxIndex]['favicon'];
	    if(url != "")
	    {
		var image = document.getElementById('dragableBoxExpand' + boxIndex);
	        image.src = url;
	    }
	}

	function saveFavicon(ajaxIndex, boxIndex)
	{
	    var response = ajaxObjects[ajaxIndex].response;
	    dragableBoxesArray[boxIndex]['favicon'] = (response == "no"?"images/rss_small.gif": response);
	    showFavicon(boxIndex);
	}
	
	function createHelpObjects()
	{
		/* Creating rectangle div */
		rectangleDiv = document.createElement('DIV');
		rectangleDiv.id='rectangleDiv';
		rectangleDiv.style.display='none';
		document.body.appendChild(rectangleDiv);
	}
	
	function cancelSelectionEvent(e)
	{
		if(document.all)e = event;
		if (e.target) source = e.target;
			else if (e.srcElement) source = e.srcElement;
			if (source.nodeType == 3) // defeat Safari bug
				source = source.parentNode;
		if(source.tagName.toLowerCase()=='input')return true;
	}

	function cancelEvent()
	{
		return false;
	}
	
	function savePictureBox(formObj)
	{
	    var boxIndex = formObj.boxIndex.value;
	    var url = formObj.imgUrl.value +"?"+Math.round(10000*Math.random());
	    dragableBoxesArray[boxIndex]['boxTitle'] = formObj.boxTitle.value;
	    dragableBoxesArray[boxIndex]['imgUrl'] = url;
    	    showBoxContent(boxIndex);
	    setTimeout('saveBoxes()',50);
	}

	function saveFlashBox(formObj)
	{
	    var boxIndex = formObj.boxIndex.value;
	    dragableBoxesArray[boxIndex]['boxTitle'] = formObj.boxTitle.value;
	    dragableBoxesArray[boxIndex]['url'] = formObj.url.value;
    	    showBoxContent(boxIndex);
	    setTimeout('saveBoxes()',50);
	}

	function saveNotesBox(formObj, boxIndex)
	{
	    // formObj kan false zijn, als het over een nieuwe box gaat (boxIndex is dan wel ingevuld).
	    // bij nieuwe box wordt savenotesbox pas opgeroepen vanuit createdragablebox. (zodat array && notesId goed ingevuld)
	    // TODO: die volgorde is niet echt mooi (eerder .js voor gevorderden?)
	    if(typeof(formObj) != undefined && formObj != false)
	    {
		var boxIndex = formObj.boxIndex.value;
    		dragableBoxesArray[boxIndex]['boxTitle'] = formObj.boxTitle.value;
		setTimeout('saveBoxes()',50); // TODO: optimalisatie: heel saveboxes is overkill als enkel 1 titel aangepast wordt => een nieuwe functie saveboxtitle?
		var notes = formObj.notes.value;
	    }
	    else
	    {
		var notes = dragableBoxesArray[boxIndex]['notes'];
	    }
	    if(typeof(dragableBoxesArray[boxIndex]['notesId']) == "undefined")
	    {
		var notesId = "";
	    }
	    else
	    {
		var notesId = dragableBoxesArray[boxIndex]['notesId'];	    
	    }
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    ajaxObjects[ajaxIndex].setVar("notes",notes);
	    ajaxObjects[ajaxIndex].setVar("notesId", notesId);
	    // showStatusBarMessage(numericId,'Loading data...'); TODO: feedback dat er gesaved wordt? in een statusdivje rechtsboven met position absolute?
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=setNotes';	// Specifying which file to get (eigenlijk doet het een POST)
	    ajaxObjects[ajaxIndex].onCompletion = function(){showBoxContent(boxIndex); ajaxObjects[ajaxIndex] = false;};  // Specify function that will be executed after file has been found (stop feedback?)
	    ajaxObjects[ajaxIndex].runAJAX();		// Execute AJAX function
	}
	
	function saveFlickrBox(formObj)
	{
	    var boxIndex = formObj.boxIndex.value;

	    dragableBoxesArray[boxIndex]['boxTitle'] = formObj.boxTitle.value;
	    dragableBoxesArray[boxIndex]['tag'] = formObj.flickrTag.value;
	    showBoxContent(boxIndex);
	    setTimeout('saveBoxes()',50);
	}
	
        function showPicture(boxIndex)
        {
	    // TODO: oplossing zoeken voor max-width IE...
	    // if(isIE){var IEWidth = document.getElementById('dragableBoxContent' + boxIndex).clientWidth;}
    	    document.getElementById('dragableBoxContent' + boxIndex).innerHTML = "<div style='overflow:hidden'><center><img src='"+dragableBoxesArray[boxIndex]['imgUrl']+"' style='max-width:100%;"+(isIE?"width:100%;":"")+"'></center></div>";
        }
	
	function showLoginForm()
	{
	    document.getElementById('hideLoginForm').style.display = 'none';
	    document.getElementById('loginForm').style.display = 'block';
	    if(document.forms.loginForm){document.forms.loginForm.login.focus();}
	}
	function hideLoginForm()
	{
	    document.getElementById('loginForm').style.display = 'none';
	    document.getElementById('hideLoginForm').style.display = 'block';
	}

	function showSearch(boxIndex, SEIndex)
	{
	    var html = "<div><form id='SEForm' style='display:inline;margin:0px;' onSubmit='doSearch();return false;'>";
	    html += "<center><table cellspacing=0 cellpadding=0><tr valign='middle'><td><input id='SEText' value='"+(document.forms.SEForm?document.forms.SEForm.SEText.value:"")+"' type='text' maxlength='145' style='width:200px;'></td><td><input type='IMAGE' vspace=2 src='images/zoek.jpg'></td></tr></table></input></center>";
	    html += "</form></div>";
	    document.getElementById('dragableBoxContent' + boxIndex).innerHTML = html;
	    dragableBoxesArray[boxIndex]['favicon'] = '';
	    showFavicon(boxIndex);
	    // TODO: title hier ipv in showboxcontent?
	    document.getElementById('dragableBoxHeader_txt' + boxIndex).innerHTML = "zoek";
	    if(document.forms.SEForm){document.forms.SEForm.SEText.focus();} // TODO: dit werkt niet in IE ?
	}

	function doSearch(SEIndex) {
	    var url = "search.php?text=";
	    var query = escape(document.forms.SEForm.SEText.value);
	    query = query.replace(/^\s*|\s*$/g,"");
	    if(query == ""){return false;}
	    window.open(url+encodeURIComponent(query));
	    return false;
	}
	
	function showTopPages(boxIndex)
	{
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=getTopPages';
	    ajaxObjects[ajaxIndex].onCompletion = function(){ showTopPages2(ajaxIndex,boxIndex); ajaxObjects[ajaxIndex] = false; };
	    ajaxObjects[ajaxIndex].runAJAX();
	}

	function showTopPages2(ajaxIndex,boxIndex)
	{
	    document.getElementById('dragableBoxContent' + boxIndex).innerHTML = ajaxObjects[ajaxIndex].response;
	}

	function showSpot(boxIndex)
	{
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=getSpot';
	    ajaxObjects[ajaxIndex].onCompletion = function(){ showSpot2(ajaxIndex,boxIndex); ajaxObjects[ajaxIndex] = false; };
	    ajaxObjects[ajaxIndex].runAJAX();
	}

	function showSpot2(ajaxIndex, boxIndex)
	{
	    document.getElementById('dragableBoxContent' + boxIndex).innerHTML = ajaxObjects[ajaxIndex].response;
	}

	function showNotes(boxIndex)
	{
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=getNotes';
	    ajaxObjects[ajaxIndex].setVar("notesId", dragableBoxesArray[boxIndex]['notesId']);
	    ajaxObjects[ajaxIndex].onCompletion = function(){ showNotes2(ajaxIndex,boxIndex); ajaxObjects[ajaxIndex] = false;};
	    ajaxObjects[ajaxIndex].runAJAX();
	}

	function showNotes2(ajaxIndex, boxIndex)
	{
	    var response = ajaxObjects[ajaxIndex].response;
	    document.getElementById('dragableBoxContent' + boxIndex).innerHTML = "<div id='notes_"+boxIndex+"' class='notes mdisc2'>"+response+"</div>";
	}

	function showFlickr(boxIndex)
	{
	    var thisColumnNr = dragableBoxesArray[boxIndex]['columnIndex'];
	    var columnWidth = document.getElementById('dragableBoxesColumn'+thisColumnNr).offsetWidth;

	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=getFlickr';
            ajaxObjects[ajaxIndex].setVar("isIE",(isIE?"1":"O"));
	    ajaxObjects[ajaxIndex].setVar("columnWidth",columnWidth);
	    if(typeof(dragableBoxesArray[boxIndex]['tag'] != "undefined")){ajaxObjects[ajaxIndex].setVar("tag",dragableBoxesArray[boxIndex]['tag']);}
	    // TODO: eventueel userid
	    ajaxObjects[ajaxIndex].onCompletion = function(){ showFlickr2(ajaxIndex,boxIndex); ajaxObjects[ajaxIndex] = false; };
	    ajaxObjects[ajaxIndex].runAJAX();
	}

	function showFlickr2(ajaxIndex, boxIndex)
	{
	    var response = ajaxObjects[ajaxIndex].response;
	    document.getElementById('dragableBoxContent' + boxIndex).innerHTML = "<div style='overflow:hidden;'><center>"+response+"</center></div>";
	}

	function showFlash(boxIndex)
	{
	    var url = dragableBoxesArray[boxIndex]['url'];
	    var html = '<div style="overflow: hidden;" id="flashcontent'+boxIndex+'">Loading...</div>';
	    var parent = document.getElementById('dragableBoxContent' + boxIndex);
	    parent.innerHTML = html;
	    var fo = new SWFObject(url, "startpaginaSwf", "100%", "-1", "6");
	    fo.write("flashcontent"+boxIndex);
	}
    
	function showFeedback(boxIndex, address, message)
	{
	    //  toon een form waar bezoekers feedback te geven
	    if(!message){var message = "";}
	    if(!address){var address = "";}
	    var html = '<form><input type="hidden" name="boxIndex" value="'+boxIndex+'"><table width="100%" class="mdisc2">';
	    html += '<tr><td width="1%">Je&nbsp;mailadres:</td><td><input type="text" maxlength="50" style="width: 100%;" name="address" value="'+address+'"></td></tr>';
	    html += '<tr><td colspan=2>Boodschap&nbsp;:<textarea name="message" style="width: 100%;" rows=5>'+message+'</textarea></td></tr>';
	    html += '<tr><td colspan=2><input class="inputfield" type="button" name="button" onclick="sendFeedback(this.form)" value="verstuur"></td></tr></table></form>';
	    document.getElementById('dragableBoxContent' + boxIndex).innerHTML = html;
	}

	function sendFeedback(formObj)
	{
	    formObj.button.disabled = true;
	    // met ajax naar server
	    var boxIndex = formObj.boxIndex.value;
	    var address = formObj.address.value;
	    var message = formObj.message.value;
	    // TODO: check input (mailadres verplicht?)
	    var ajaxIndex = ajaxObjects.length;
	    ajaxObjects[ajaxIndex] = new sack();
	    ajaxObjects[ajaxIndex].requestFile = 'func.php?task=sendFeedback';	// Specifying which file to get
	    ajaxObjects[ajaxIndex].setVar("address", address);
	    ajaxObjects[ajaxIndex].setVar("message", message);
	    ajaxObjects[ajaxIndex].onCompletion = function(){ sendFeedback2(ajaxIndex, formObj); ajaxObjects[ajaxIndex] = false;};   	// Specify function that will be executed after file has been found
	    ajaxObjects[ajaxIndex].runAJAX();		                                                 	// Execute AJAX function
	}

	function sendFeedback2(ajaxIndex, formObj)
	{
	    formObj.button.disabled = false;
	    var boxIndex = formObj.boxIndex.value;
	    var response = ajaxObjects[ajaxIndex].response; // default response = "" kan geen kwaad
	    var success = false;
	    var errorMessage = "";
	    if(response != "")
	    {
 		var result = JSON.parse(response);
		if(result['error'] == 0 && typeof(result['error'] != "undefined"))
		{
		    success = true;
		}
		else
		{
		    errorMessage = result['foutstring'];
		}
	    }
	    if(success)
	    {
		document.getElementById('dragableBoxContent' + boxIndex).innerHTML = "<div style='overflow:hidden;'><center>Bedankt voor je bericht! Indien nodig nemen we contact met je op.</center></div>";
	    }
	    else
	    {
		showFeedback(boxIndex, formObj.address.value, formObj.message.value);
		var contentBox = document.getElementById('dragableBoxContent' + boxIndex);
		contentBox.innerHTML = "<div style='overflow:hidden;'><center>"+errorMessage+"</center></div>" + contentBox.innerHTML;
	    }
	}
 
	function sortBoxesVert(a,b)
	{
	    // sorteren van boven naar onder, dwz: eerste box staat bovenaan de kolom, en heeft kleinste y-waarde
	    return getTopPos(a['obj']) - getTopPos(b['obj']);
	}

	function sortBoxesAlfab(a,b)
	{
	    // alfabetisch sorteren volgens titel
	    var minLength = Math.min(a['TITLE'].length, b['TITLE'].length);
	    var aTitle = a['TITLE'].toLowerCase().substring(0, minLength);
	    var bTitle = b['TITLE'].toLowerCase().substring(0, minLength);
	    return (aTitle < bTitle?-1:1);
	}

	function showFavorites(boxIndex)
	{
	    var thisColumnNr = dragableBoxesArray[boxIndex]['columnIndex'];
	    var columnWidth = document.getElementById('dragableBoxesColumn'+thisColumnNr).offsetWidth;
	    var linkOrder = dragableBoxesArray[boxIndex]['linkOrder'];
	    // om te kunnen drag-droppen, per link een div nemen, en dan in elke div een table voor layout :s
	    var linkBox = document.getElementById('dragableBoxContent' + boxIndex);
	    // als linkBox al links bevat, deze in array juist sorteren volgens deze volgorde (worden immers nieuw getoond volgens volgorde array...)

	    if(linkBox.innerHTML != "")
	    {
		if(linkOrder == "FIXED"){dragableBoxesArray[boxIndex]['links'].sort(sortBoxesVert);}
		else if(linkOrder == "ALFABETIC"){dragableBoxesArray[boxIndex]['links'].sort(sortBoxesAlfab);}
	    }
	    linkBox.innerHTML = ""; // TODO: of bv false?

	    // in for-luske links afgaan
	    for(key in dragableBoxesArray[boxIndex]['links'])
	    {
		var link = dragableBoxesArray[boxIndex]['links'][key];
		

		var linkId = link['ID'];
		
		// description is htmlentities op toegepast? ook bij edit link?
		var description = link['DESCRIPTION'].replace(/^\s*|\s*$/g,"");
		if(description == "")
		{
		    var tooltip = "";
		}
		else
		{
		    description = description.replace(/`/g, '&acute;');
		    description = description.replace(/"/g, '&quot;'); //"
		    description = description.replace(/'/g, '&acute;'); //'
		    description = description.replace(/&#039;/g, '&acute;');
		    var tooltip = " onMouseover=\"showTooltip('"+description+"', "+columnWidth+");\" onMouseout=\"hideTooltip();\" ";
		}
 
		// img is een handle om de link te slepen
		var string = '<table width="100%" cellpadding=0 cellspacing=0 border=0 class="rssTable"><tr><td valign="top" style="padding-top:5px;width:1px;">';
		string += '<img class="linkDragHandle" id="linkHandle'+linkId+'" onmousedown="initDrag(event, this);return false;" src="' + src_smallRightArrow + '"></td>';
		string += '<td><div style="position:relative;"><a '+tooltip+' class="mdisc2 rssLink" href="' + link['URL'] + '" onclick="var w = window.open(this.href);return false;">' + link['TITLE'] +'<\/a>';
		string += '<div id="linkHandles'+linkId+'" class="editLinkHandles"><a href="#" onclick="showHideEditLinkDiv('+linkId+');return false;" class="mdisc">edit</a>&nbsp;<a href="#" onClick="deleteLink('+linkId+')"><img src="images/close.gif" border=0></a></div></div></td><\/tr></table>';
		var dragableLink = document.createElement('DIV');
		dragableLink.className = "dragableLink";
		dragableLink.id = "dragableLink"+linkId;
		dragableLink.innerHTML = string;
		dragableLink.onmouseover = showLinkHandles;
		dragableLink.onmouseout = hideLinkHandles;
		linkBox.appendChild(dragableLink);
		dragableBoxesArray[boxIndex]['links'][key]['obj'] = dragableLink;
	    }
	}

	function showLinkHandles()
	{
	    var linkId = this.id.replace(/[^0-9]/g,'');
	    document.getElementById('linkHandles'+linkId).style.display = 'block';
	}
	function hideLinkHandles()
	{
	    var linkId = this.id.replace(/[^0-9]/g,'');
	    document.getElementById('linkHandles'+linkId).style.display = 'none';
	}

	function initShowHideDivs(parent)
	{
	    // TODO: is dit beste timing? Menu wordt 'onclick' geladen, in principe kunnen dus ook dingen uit menu weggelaten worden omdat ze bv al op de pagina staan.

	    // eerste niveau van tree hier hardcoded, volgende niveau's ophalen met ajax ? (ajax want komt uit db / file op server?)
	    // ook eerste niveau via zelfde functie laten gaan als degene die met ajax opgehaald worden? => code op één plaats
	    parent.innerHTML = "<div class=\"dragableBoxHeader\"><div class=\"dragableBoxHeaderTitle\"><div class=\"leftHeaderDiv\" style=\"padding-left:5px;\">Inhoud toevoegen</div><div class=\"rightHeaderDiv\" style=\"display:inline;\"><a class=\"closeButton\" href=\"#\" onclick=\"showHideContentPanel();return false\">x</a></div></div></div>";

	    var contentDiv = document.createElement('DIV');
	    contentDiv.innerHTML = "<span></span>";
	    parent.appendChild(contentDiv);
/***
	    var parent = document.getElementById(parentId);
	    parent.innerHTML = "<div class=\"dragableBoxHeader\"><div class=\"dragableBoxHeaderTitle\"><div class=\"leftHeaderDiv\" style=\"padding-left:5px;\">Inhoud toevoegen</div><div class=\"rightHeaderDiv\" style=\"display:inline;\"><a class=\"closeButton\" href=\"#\" onclick=\"showHideContentPanel();return false\">x</a></div></div></div>";

	    var menu = new Array();
	    menu[0] = new Array();
	    menu[0]['slidetitle'] = "RSS-feed";
	    menu[0]['boxes'] = new Array();
	    menu[0]['boxes'][0] = new Array();
	    menu[0]['boxes'][0]['type'] = "RSS";
	    menu[0]['boxes'][0]['title'] = "Eigen RSS-feed";
	    menu[1] = new Array();
	    menu[1]['slidetitle'] = "Foto";
	    menu[1]['boxes'] = new Array();
	    menu[1]['boxes'][0] = new Array();
	    menu[1]['boxes'][0]['type'] = "IMG";
	    menu[1]['boxes'][0]['title'] = "Foto";
	    menu[1]['boxes'][1] = new Array();
	    menu[1]['boxes'][1]['type'] = "FLICKR";
	    menu[1]['boxes'][1]['title'] = "Flickr foto's";
	    menu[1]['boxes'][2] = new Array();
	    menu[1]['boxes'][2]['type'] = "UPIMG";
	    menu[1]['boxes'][2]['title'] = "Upload foto";
	    menu[2] = new Array();
	    menu[2]['slidetitle'] = "Andere boxjes";
	    menu[2]['boxes'] = new Array();
	    menu[2]['boxes'][0] = new Array();
	    menu[2]['boxes'][0]['type'] = "TOPPAGES";
	    menu[2]['boxes'][0]['title'] = "Top 30";
	    menu[2]['boxes'][1] = new Array();
	    menu[2]['boxes'][1]['type'] = "SEARCH";
	    menu[2]['boxes'][1]['title'] = "Zoekrobots";
	    menu[2]['boxes'][2] = new Array();
	    menu[2]['boxes'][2]['type'] = "SPOT";
	    menu[2]['boxes'][2]['title'] = "In de kijker";
	    menu[2]['boxes'][3] = new Array();
	    menu[2]['boxes'][3]['type'] = "NOTES";
	    menu[2]['boxes'][3]['title'] = "Nota's";
	    
	    for(var no=0;no<menu.length;no++){

		divCounter = no+1;

		var div = document.createElement('DIV');
		div.className = 'slideHeader';
		div.innerHTML = menu[no]['slidetitle'];
		div.onclick = showHideContent;
		div.id = 'slide_q'+parentId+divCounter;
		parent.appendChild(div);

		var div = document.createElement('DIV');
		div.className = 'slideBody';
		div.style.display='none';
		div.style.height='1px';
		div.id = 'slide_a'+parentId+divCounter;
		parent.appendChild(div);

		var contentDiv = document.createElement('DIV');
		div.appendChild(contentDiv);
		contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px'; 	
		contentDiv.className='slideContent';
		contentDiv.id = 'slide_ac' +parentId+ divCounter;
		for(var no2=0; no2<menu[no]['boxes'].length;no2++)
		{
		    contentDiv.innerHTML += "<div class='menuBox'><div>"+menu[no]['boxes'][no2]['title']+"</div>"+getEditBoxForm("NEW",menu[no]['boxes'][no2]['type'])+"</div>"; 
		}
	    }
***/
	}

	function showNewContent(anchor, type, args)
	{
	    /*
	    * Als in menu gekozen wordt voor nieuwe content, een pop-up-div tonen
	    * er is maar één pop-up-div
	    * afhankelijk van type een ander form hierin tonen
	    */
	    // check of div er al staat
	    var div = document.getElementById('newContentDiv');
	    // sluitknoppeke
	    div.innerHTML = "<div style='text-align: right;'><a href='#' onClick='hideNewContent();return false;'><img src='images/close.gif' border=0></a></div>";
	    div.innerHTML += getEditBoxForm('NEW', type, args);
	    // juiste positie en op show zetten
	    div.style.display = "block";
	    div.style.top = getTopPos(anchor) + "px";
	    div.style.left = getLeftPos(anchor) + anchor.offsetWidth + "px";
	    return false;
	}

	function hideNewContent()
	{
	    var el = document.getElementById('newContentDiv');
	    if(el){el.style.display = "none";el.innerHTML="";}
	}

	function showHideContentPanel()
	{
	    // TODO: naam van functie naar iets degelijkers
	    var panel = document.getElementById('contentPanel');
	    panel.innerHTML = "";
	    if(panel.style.display == "block")
	    {
		panel.style.display = "none";
	    }
	    else
	    {
		// met ajax van server halen
		// initShowHideDivs(panel);
		// showHideContent(false,"contentPanel1"); // is voor slide
		var menuHeader = document.createElement('DIV');
		menuHeader.className = "dragableBoxHeader";
		menuHeader.innerHTML = '<div class="dragableBoxHeaderTitle"><div class="leftHeaderDiv" style="padding-left:5px;">Menu</div><div class="rightHeaderDiv" style="display:inline;"><a class="closeButton" href="#" onclick="showHideContentPanel();return false"><img src="images/close.gif" border=0></a></div></div>';
		panel.appendChild(menuHeader);
		var menuDiv = document.createElement('DIV');
		menuDiv.id = "menuDiv";
		menuDiv.innerHTML = "Loading menu...";
		panel.appendChild(menuDiv);
		var newContentDiv = document.createElement('DIV');
		newContentDiv.id = "newContentDiv";
		panel.appendChild(newContentDiv);
		panel.style.display = "block"; // TODO: hier default content "loading"?
		var ajaxIndex = ajaxObjects.length;
		ajaxObjects[ajaxIndex] = new sack();
		ajaxObjects[ajaxIndex].requestFile = 'func.php?task=getMenu';
		ajaxObjects[ajaxIndex].setVar('type',pageType);	// Specifying which file to get
		ajaxObjects[ajaxIndex].onCompletion = function(){ showHideContentPanel2(ajaxIndex,menuDiv);ajaxObjects[ajaxIndex]=false; };        	// Specify function that will be executed after file has been found
		ajaxObjects[ajaxIndex].runAJAX();		                                                 	// Execute AJAX function

	    }
	    var link =  document.getElementById('addContentLink');
	    link.innerHTML = (panel.style.display == "block"?"Stop toevoegen":"Inhoud toevoegen");
	}

	function showHideContentPanel2(ajaxIndex, menuDiv)
	{
	    // TODO: catch error ?
	    menuDiv.innerHTML = ajaxObjects[ajaxIndex].response;
	}

	function showElementById(id, mode)
	{
	    var el = document.getElementById(id);
	    if(!mode){var mode = "block";}
	    if(el){el.style.display = mode;}
	}

	function showHideElementById(id, mode)
	{
	    var el = document.getElementById(id);
	    if(el)
	    {
		if(el.style.display == "none")
		{
		    if(!mode){var mode = "block";}
		    el.style.display = mode;
		}
		else{el.style.display = "none";}
	    }
	}	

	function hideElementById(id)
	{
	    var el = document.getElementById(id);
	    if(el){el.style.display = "none";}
	}

	function getEditBoxForm(editType, param, args)
	{
	    // TODO: ipv onclick verschillende functies: type als hidden meegeven(?) en dan in gemeenschappelijke functie editedBox beslissen wat er moet gebeuren ?
	    // verschillende html afhankelijk van type box
	    // editType = EDIT / NEW; param = boxIndex bij editType == EDIT , param = type bij editType == NEW
	    if(editType == "EDIT")
	    {
		var boxIndex = param;
		var type = dragableBoxesArray[boxIndex]['type'];
		var boxTitle = dragableBoxesArray[boxIndex]['boxTitle'];
	    }
	    else
	    { 
		var boxIndex = "";
		var type = param;
		var boxTitle = "";
	    }
	    var content = '<form method="POST" ';
	    if(type=='UPIMG'){content += 'ENCTYPE="multipart/form-data" target="'+editType+'_upframe_'+boxIndex+'" action="func.php?task=uploadImg"';}
	    else if(type=='UPLOADFAV'){content += 'ENCTYPE="multipart/form-data" target="'+editType+'_upframe_'+boxIndex+'" action="func.php?task=uploadFav"';}
	    else{ content += 'action="#"';}
	    content += ' >';
	    content += '<input type="hidden" name="type" value="'+type+'">';
	    content += '<input type="hidden" name="editType" value="'+editType+'">';
	    content += '<input type="hidden" name="boxIndex" value="'+boxIndex+'">';
	    content += '<table class="editTable" cellpadding="1" cellspacing="1" width="100%">';
	    if(type == "IMG")
	    {
		var imgUrlValue = (editType == "EDIT"?dragableBoxesArray[boxIndex]['imgUrl']:"http://");
		content += '<tr><td width="1%">Titel:<\/td><td><input type="text" name="boxTitle" value="' + (boxTitle?boxTitle:"") + '" size="20" maxlength="25"><\/td><\/tr>';
		content += '<tr><td>URL:<\/td><td><input type="text" name="imgUrl" value="' + imgUrlValue + '" size="20" maxlength="255"><\/td><\/tr>';
	    }
	    else if(type == "UPIMG")
	    {
		// "opgelet: slechts 1 img, wil je huidige image overschrijven? <= als er al een is (check in php?)
		content += '<iframe style="display:none;" name="'+editType+"_upframe_"+boxIndex+'" onload="handleUpload(this, this.parentNode.parentNode);"></iframe>';
		content += '<tr><td width="1%">Titel:<\/td><td><input type="text" name="boxTitle" value="' + (boxTitle?boxTitle:"") + '" size="20" maxlength="25"><\/td><\/tr>';
		content += '<tr><td colspan=2><input type="file" name="icon" /><input type="hidden" name="imgUrl" value="'+(editType=="EDIT"?dragableBoxesArray[boxIndex]['imgUrl']:"")+'"></td></tr>';
	    }
	    else if(type == "RSS")
	    {
		if(typeof(args) == "undefined")
		{
		    var rssUrlValue = (editType == "EDIT"?dragableBoxesArray[boxIndex]['rssUrl']:"http://");
		}
		else
		{
		    var rssUrlValue = args;
		}
		var maxRssItemsValue = (editType == "EDIT"?dragableBoxesArray[boxIndex]['maxRssItems']:5);
		var heightOfBoxValue = (editType == "EDIT"?dragableBoxesArray[boxIndex]['heightOfBox']:40);
		var minutesBeforeReloadValue = (editType == "EDIT"?dragableBoxesArray[boxIndex]['minutesBeforeReload']:10);

		var fixed_span_id = "fh_"+editType+param;

		content += '<tr><td width="1%">Titel:<\/td><td><input type="text" name="boxTitle" value="' + (boxTitle?boxTitle:"") + '" size="20" maxlength="25"><\/td><\/tr>';
		content += '<tr><td>URL:<\/td><td><input type="text" name="rssUrl" value="' + rssUrlValue + '" size="20" maxlength="255"><\/td><\/tr>';
		content += '<tr><td>Aantal items:<\/td><td width="30"><input type="text" name="maxRssItems" onblur="this.value = this.value.replace(/[^0-9]/g,\'\');if(!this.value)this.value=' + maxRssItemsValue + '" value="' + maxRssItemsValue + '" size="2" maxlength="2"><\/td><\/tr>';
		content += '<tr><td>Vaste&nbsp;hoogte:<\/td><td><input type="checkbox" '+(heightOfBoxValue>0 && editType=="EDIT"?"CHECKED":"")+' name="fixedHeight" onClick="if(this.checked){showElementById(\''+fixed_span_id+'\',\'inline\');}else{hideElementById(\''+fixed_span_id+'\');}">';
		content += '<div id="'+fixed_span_id+'" style="display:'+(heightOfBoxValue>0 && editType=="EDIT"?"inline":"none")+';"><input type="text" name="heightOfBox" onblur="this.value = this.value.replace(/[^0-9]/g,\'\');if(!this.value)this.value=' + heightOfBoxValue + ';if(this.value<boxMinHeight){this.value = boxMinHeight;}" value="' + heightOfBoxValue  + '" size="2" maxlength="3">pixels</div><\/td><\/tr><tr>';
		content += '<tr><td>Herlaad&nbsp;elke:<\/td><td width="30"><input type="text" name="minutesBeforeReload" onblur="this.value = this.value.replace(/[^0-9]/g,\'\');if(!this.value || this.value/1<5)this.value=' + minutesBeforeReloadValue + '" value="' + minutesBeforeReloadValue + '" size="2" maxlength="3">&nbsp;minuten<\/td><\/tr>';
	    }
	    else if(type == "FAVORITES")
	    {
		var style = (editType == "EDIT"?dragableBoxesArray[boxIndex]['style']:"");
		var linkOrder = (editType == "EDIT"?dragableBoxesArray[boxIndex]['linkOrder']:"");
		content += '<tr><td width="1%">Titel:</td><td><input type="text" name="boxTitle" value="'+ (boxTitle?boxTitle:"") +'" size="20" maxlength="50"></td></tr>';
		content += '<tr><td>Stijl:</td><td><select name="boxStyle">';
		content += '<OPTION value="grey" '+(style=="grey"?"SELECTED":"")+'>grijs';
		content += '<OPTION value="red" '+(style=="red"?"SELECTED":"")+'>rood';
		content += '<OPTION value="blue" '+(style=="blue"?"SELECTED":"")+'>blauw';
		content += '<OPTION value="yellow" '+(style=="yellow"?"SELECTED":"")+'>geel';
		content += '<OPTION value="beige" '+(style=="beige"?"SELECTED":"")+'>beige';
		content += '</select></td></tr>';
		content += '<tr><td>Volgorde:</td><td><select name="boxLinkOrder">';
		content += '<OPTION value="ALFABETIC" '+(linkOrder=="ALFABETIC"?"SELECTED":"")+'>alfabetisch';
		content += '<OPTION value="FIXED" '+(linkOrder=="FIXED"?"SELECTED":"")+'>handmatig';
		content += '</select></td></tr>';
	    }
	    else if(type == "FLICKR")
	    {
		var flickrTagValue = (editType == "EDIT"?dragableBoxesArray[boxIndex]['tag']:"colorful");
		content += '<tr><td width="1%">Titel:</td><td><input type="text" name="boxTitle" value="'+ (boxTitle?boxTitle:"") +'" size="20" maxlength="50"></td></tr>';
		content += '<tr><td>Tag:</td><td><input type="text" name="flickrTag" value="'+ flickrTagValue +'" size="20" maxlength="50"></td></tr>';
	    }
	    else if(type == "FLASH")
	    {
		if(typeof(args) == "undefined")
		{
		    var url = (editType == "EDIT"?dragableBoxesArray[boxIndex]['url']:"http://");
		}
		else
		{
		    var url = args;
		}

		content += '<tr><td width="1%">Titel:</td><td><input type="text" name="boxTitle" value="'+ (boxTitle?boxTitle:"") +'" size="20" maxlength="50"></td></tr>';
		content += '<tr><td>Url:</td><td><input type="text" name="url" value="'+ url +'" size="20" maxlength="150"></td></tr>';
	    }
	    else if(type == "NOTES")
	    {
		// TODO: DIRTY hier boxcontent evt op hidden zetten?
		if(editType == "EDIT")
		{
		    var notesValue = document.getElementById("notes_"+boxIndex).innerHTML;

		    notesValue = notesValue.replace(new RegExp(/\n/g),""); // anders dubbele \n in firefox
		    notesValue = notesValue.replace(new RegExp(/<br>/g),"\n");
		    notesValue = notesValue.replace(new RegExp(/<BR>/g),"\n");
		}
		else
		{
		    notesValue = "";
		}
		content += '<tr><td width="1%">Titel:</td><td><input type="text" name="boxTitle" value="'+ (boxTitle?boxTitle:"") +'" size="20" maxlength="50"></td></tr>';
		content += '<tr><td colspan="2"><textarea name="notes" rows="6" style="width:100%;">'+notesValue+'</textarea></td>';
	    } 
	    content += '<tr><td colspan=2><input type="button" class="inputfield" onClick="'+(editType=="EDIT"?'editDragableBox('+boxIndex+');':'hideNewContent();')+'return false;" value="annuleren" name="cancelButton">&nbsp;';
	    content += '<input type="button" class="inputfield" onclick="return saveBox(this.form);" value="'+(editType == "EDIT"?"bewaren":"voeg toe")+'" name="saveButton"></td></tr>';
	    content += '<\/table><\/form>';
	    return content;
	}

	function handleUpload(uploadFrame, formObj)
	{
	    // TODO: van deze functie gewoon doorgeven aan saveBox? hier dan extra vars toevoegen aan formObj alvorens door te geven ?
	    if(uploadBegin)
	    {
		var document = (uploadFrame.contentDocument) ? uploadFrame.contentDocument : uploadFrame.contentWindow.document;
		var content = document.body.innerHTML;
		uploadBegin = false;
		if(content != "")
		{
    		    // content = de output van de upload.
		    // hier de img-name terugkrijgen => tonen in box => verschil tussen edit en new
 		    var result = JSON.parse(content);
		    if(result['aantalfouten'] == 0 && typeof(result['aantalfouten'] != "undefined"))
		    {
			// wat als img al bestaat, en box wordt verwijderd => bij nieuwe box toevoegen optie geven "bestaande foto" ?
			// TODO: feedback bij errors...
			// TODO: proper opvangen als er geen foto gekozen is om te uploaden? wat als geen image gekozen bij editType NEW?
			while(formObj.tagName.toUpperCase() != "FORM" && formObj.parentNode) // voor ie nog een parentItem hoger
			{
			    formObj = formObj.parentNode;
			}
			var editType = formObj.editType.value;
			if(editType == "EDIT")
			{
			    if(result['imgUrl'] != "" && typeof(result['imgUrl']) != "undefined")
			    {
				formObj.imgUrl.value = result['imgUrl'];
			    }
			    savePictureBox(formObj);
			}
			else if(editType == "NEW")
			{
			    formObj.imgUrl.value = result['imgUrl'];
			    createNewBox(formObj);
			}
		    }
		}
	    }
	}

	function saveBox(formObj)
	{
	    var type = formObj.type.value;
	    if(type == "UPIMG"){uploadBegin = true;formObj.submit();return false;} // gewone POST uitvoeren naar hidden frame => gaat naar handleUpload()

	    if(formObj.editType.value == "EDIT")
	    {
		// per type een andere functie oproepen
		if(type == "IMG"){savePictureBox(formObj);}
		else if(type == "RSS"){saveFeedBox(formObj);}
		else if(type == "FAVORITES"){saveFavoritesBox(formObj);}
		else if(type == "FLICKR"){saveFlickrBox(formObj);}
		else if(type == "NOTES"){saveNotesBox(formObj);}
		else if(type == "FLASH"){saveFlashBox(formObj);}
		// form op hidden zetten
		if(formObj.boxIndex.value){editDragableBox(formObj.boxIndex.value);}
	    }
	    else
	    {
		createNewBox(formObj);
	    }
	    return false; // geen gewone post uitvoeren
	}

	function isNumeric(sText) 
	{
	    var ValidChars = "0123456789";
	    var Char;
	    var sText = ""+sText; // beetje vreemd, maar nodig om length van sText te kunnen nemen.
	    if(typeof(sText.length) == "undefined"){return false;}
	    for (i = 0; i < sText.length; i++) 
	    {
    		Char = sText.charAt(i);
    		if (ValidChars.indexOf(Char) == -1) {return false;}
	    }
	    return true;
	}

	function createNewBox(formObj)
	{
    	    // TODO: columnIndex kunnen kiezen / slepen bij create ?
	    // TODO: check kan samengenomen worden met savebox : gegevens uit form halen en checken. cf edit-link en nieuwe link
	    // TODO: check of deze box al bestaat? geldigheid url? Hoe feedback als niet goed?
            var args = new Array();
	    var type = formObj.type.value; // type uit form halen (hidden key)
            args['columnIndex'] = 1; // voorlopig steeds eerste kolom
	    args['rowIndex'] = 0; // voorlopig steeds bovenaan
            args['type'] = type;
	    if(type == "TOPPAGES")
	    {
		args['boxTitle'] = boxType['TOPPAGES']['def_title'];
	    }
	    else if(type == "RSS")
	    {
		var boxTitle = formObj.boxTitle.value;
		var url = formObj.rssUrl.value;
		var items = formObj.maxRssItems.value;
		var height = (formObj.fixedHeight.checked?formObj.heightOfBox.value:0);
		var reloadInterval = formObj.minutesBeforeReload.value;
		if(isNaN(height) || height/1<boxMinHeight)height = false;	
		if(isNaN(reloadInterval) || reloadInterval/1<5)reloadInterval = false;

                args['rssUrl'] = url;
                args['heightOfBox'] = height;
                args['maxRssItems'] = items;
                args['minutesBeforeReload'] = reloadInterval;
		args['boxTitle'] = boxTitle;
	    }
	    else if(type == "IMG" || type == "UPIMG")
	    {
                args['imgUrl'] = formObj.imgUrl.value;
		args['boxTitle'] = formObj.boxTitle.value;
	    }
	    else if(type == "FLICKR")
	    {
		args['boxTitle'] = formObj.boxTitle.value;
		args['tag'] = formObj.flickrTag.value;
	    }
	    else if(type == "SPOT")
	    {
		args['boxTitle'] = boxType['SPOT']['def_title'];
	    }
	    else if(type == "SEARCH")
	    {
		// evt default search-engine
	    }
	    else if(type == "NOTES")
	    {
		args['boxTitle'] = formObj.boxTitle.value;
		args['notes'] = formObj.notes.value;
		// zoek notesId: check hoeveel boxjes met type notes er al zijn? check welke nummer er vrij is?
		var notesIds = new Array();
		for(var key in dragableBoxesArray)
		{
		    if(dragableBoxesArray[key]['type'] == "NOTES")
		    {
			var tempId = dragableBoxesArray[key]['notesId'];
			notesIds[tempId] = "string";
		    }
		}
		idFound = false;
		for(var i=1; !idFound; i++)
		{
		    if(notesIds[i] != "string")
		    {
			idFound = true;
			args['notesId'] = i;
		    }
		}
	    }
	    else if(type == "FLASH")
	    {
		args['url'] = formObj.url.value;
		args['boxTitle'] = formObj.boxTitle.value;
	    }
	    else if(type == "FEEDBACK")
	    {
		args['boxTitle'] = boxType['FEEDBACK']['def_title'];
	    }
	    else if(type == "FAVORITES")
	    {
		// moet met ajax eerst een cat maken op server (oa ID nodig), dan pas args-array en createDragableBox
		var ajaxIndex = ajaxObjects.length;
		ajaxObjects[ajaxIndex] = new sack();
		ajaxObjects[ajaxIndex].requestFile = 'func.php?task=addNewCat';
		ajaxObjects[ajaxIndex].setVar('title',formObj.boxTitle.value);
		ajaxObjects[ajaxIndex].setVar('link_order',formObj.boxLinkOrder.value);
		ajaxObjects[ajaxIndex].setVar('style',formObj.boxStyle.value);
		ajaxObjects[ajaxIndex].onCompletion = function(){ createNewBox2(ajaxIndex,type); ajaxObjects[ajaxIndex] = false; }; 	// Specify function that will be executed after file has been found
		ajaxObjects[ajaxIndex].runAJAX();		                                                 	// Execute AJAX function
	    }
	    else
	    {
		// type niet geldig, return / exit / feedback ?
		alert("TODO: createNewBox type: "+type);
		return "";
	    }

	    if(type != "FAVORITES")
	    { // TODO: dit moet mooier. (voor type favorites moet eerst naar server...)
		args['newBox'] = "1";
        	createDragableBox(args,false);
		setTimeout('saveBoxes()',50);
		//hierzo: hide newboxcontent, is niet altijd nodig
		hideNewContent();
	    }
	}

	function createNewBox2(ajaxIndex, type)
	{
	    if(type == "FAVORITES")
	    {
		var response = ajaxObjects[ajaxIndex].response; // default response = "" kan geen kwaad
		var success = false;
		var errorMessage = "";
		if(response != "")
		{
 		    var result = JSON.parse(response);
		    if(result['aantalfouten'] == 0 && typeof(result['aantalfouten'] != "undefined"))
		    {
			args = new Array();
			args['type'] = type;
			args['rowIndex'] = 0;
			args['id'] = result['cat_id'];
			args['style'] = result['style'];
			args['boxTitle'] = result['title'];
			args['linkOrder'] = result['link_order'];
			args['link'] = new Array();
			args['newBox'] = "1";
			createDragableBox(args, false);
		    }
		    else{alert(result['message']);}
		}
		else
		{
		    alert("connectie met server mislukt, errorCode NC01");
		}
	    }
	    hideNewContent();
	    setTimeout('saveBoxes()',50);
	}

	function createDragableBox(args)
	{
            /*** 
            * in deze functie aanmaken van box
            * alle relevante argumenten/eigenschappen bijhouden in dragableBoxesArray 
            ***/
	    if(typeof(args['type']) == "undefined"){return false;}
	    var type = args['type'];
            var heightOfBox = (args['heightOfBox']?args['heightOfBox']:0);
            var columnIndex = (args['columnIndex']?args['columnIndex']:1);

	    var rowIndex = (typeof(args['rowIndex']) == "undefined"?"-1":args['rowIndex']); 	// als geen rowIndex => -1 => wordt onderaan gezet. rowIndex begint bij 0.
            var tmpIndex = createABox(columnIndex, rowIndex, heightOfBox); 	// tmpIndex is de index in array dragableBoxes
            var box = dragableBoxesArray[tmpIndex]['obj']; 		// dit is de box (DIV)
	    
            dragableBoxesArray[tmpIndex]['type'] = type;
            dragableBoxesArray[tmpIndex]['heightOfBox'] = heightOfBox;
            dragableBoxesArray[tmpIndex]['columnIndex'] = columnIndex;
	    dragableBoxesArray[tmpIndex]['boxTitle'] = (typeof(args['boxTitle'])!="undefined"?args['boxTitle']:"");
	    dragableBoxesArray[tmpIndex]['collapse'] = (typeof(args['collapse'])!="undefined"?args['collapse']:"");

            if(type == "IMG" || type == "UPIMG")
            {
	        dragableBoxesArray[tmpIndex]['imgUrl'] = (args['imgUrl']?args['imgUrl']:""); // TODO: default url, missing image ?
            }
            else if(type == "RSS")
            {
                var minutesBeforeReload = (args['minutesBeforeReload']?args['minutesBeforeReload']:'0');
		dragableBoxesArray[tmpIndex]['rssUrl'] = (args['rssUrl']?args['rssUrl']:"");
		dragableBoxesArray[tmpIndex]['maxRssItems'] = (args['maxRssItems']?args['maxRssItems']:50);
		dragableBoxesArray[tmpIndex]['minutesBeforeReload'] = minutesBeforeReload;
		var tmpInterval = false;
		if(minutesBeforeReload && minutesBeforeReload>0){
		    var tmpInterval = setInterval("showBoxContent(" + tmpIndex + ")",(minutesBeforeReload*1000*60));
		}
		dragableBoxesArray[tmpIndex]['intervalObj'] = tmpInterval;
            }
	    else if(type == "FAVORITES")
	    {
		dragableBoxesArray[tmpIndex]['cat_id'] = args['id'];
		dragableBoxesArray[tmpIndex]['links'] = args['link'];
		dragableBoxesArray[tmpIndex]['style'] = args['style'];
		dragableBoxesArray[tmpIndex]['linkOrder'] = args['linkOrder'];
	    }
	    else if(type == "FLICKR")
	    {
		dragableBoxesArray[tmpIndex]['tag'] = args['tag'];
	    }
	    else if(type == "FLASH")
	    {
		dragableBoxesArray[tmpIndex]['url'] = args['url'];
	    }
	    else if(type == "NOTES")
	    {
		dragableBoxesArray[tmpIndex]['notesId'] = (typeof(args['notesId'])!="undefined" && isNumeric(args['notesId'])?args['notesId']:"");
		dragableBoxesArray[tmpIndex]['notes'] = args['notes'];
	    }
	    
	    var headerDiv = addBoxHeader(box,type);
	    var contentDiv = addBoxContentContainer(box,heightOfBox);
	    var statusDiv = addBoxStatusBar(box, type);

	    if(type == "NOTES" && args["newBox"] == "1")
	    {
		// moet eerst gesaved worden op server vòòr showboxcontent. 
		// showBoxContent wordt opgeroepen vanuit savenotesbox
		saveNotesBox(false,tmpIndex);
	    }
	    else
	    {
		showBoxContent(tmpIndex);
	    }

            return tmpIndex;
	}
	
	function urlEncode(str) 
	{
	    str = escape(str);
	    str = str.replace('+', '%2B');
	    str = str.replace('%20', '+');
	    str = str.replace('*', '%2A');
	    str = str.replace('/', '%2F');
	    str = str.replace('@', '%40');
	    return str;
	}
	
	function urlDecode(str) 
	{
	    str = str.replace('+', ' ');
	    str = unescape(str);
	    return str;
	}
	
	function showBoxContent(boxIndex)
	{
	    // afhankelijk van type een functie de content aan de contentcontainer van de box laten toevoegen/invullen
	    var type = dragableBoxesArray[boxIndex]['type'];
	    // als type title support => boxtitle opzoeken en setten
	    // TODO: sommige types moeten eerst title opzoeken... Timing moet juist zijn
	    // TODO: per type zou in boxtypes op een of andere manier de juiste functie moeten opgegeven zijn die hier wordt opgeroepen? ('evaluate'?)
	    // TODO: bij addboxheader zou eigenlijk niet meer de titel + style geïnitialiseerd moeten worden ?
	    // unieke stukken code als bij bv type == RSS kunnen dan in de opgeroepen functie
	    if(boxType[type]['supportTitle'] && typeof(dragableBoxesArray[boxIndex]['boxTitle']) != undefined)
	    {
		var title = dragableBoxesArray[boxIndex]['boxTitle'];
		document.getElementById('dragableBoxHeader_txt' + boxIndex).innerHTML = (title?title:"");
	    }
	
	    var style = dragableBoxesArray[boxIndex]['style'];
	    if(typeof(style) == "undefined")
	    {
	        style= "default";
	    }
	    document.getElementById('dragableBoxHeader'+boxIndex).className = 'dragableBoxHeader bg_'+style;
	    document.getElementById('rightHeaderDiv'+boxIndex).className = 'rightHeaderDiv bg_'+style;

	    if(type == "IMG" || type == "UPIMG")
	    {
                showPicture(boxIndex);
	    }
	    else if(type == "RSS")
	    {
		if(!document.getElementById('dragableBoxContent' + boxIndex).innerHTML)
		{
		    document.getElementById('dragableBoxContent' + boxIndex).innerHTML = 'loading RSS data'; // TODO: beter hier de eerste keer, of onmiddellijk in statusbar?
		}
		else
		{
		    showStatusBarMessage(boxIndex,'Loading data...');
		}
		
		var ajaxIndex = ajaxObjects.length;
		ajaxObjects[ajaxIndex] = new sack();
		ajaxObjects[ajaxIndex].requestFile = 'readRSS.php?rssURL=' + urlEncode(dragableBoxesArray[boxIndex]['rssUrl']) + '&maxRssItems=' + dragableBoxesArray[boxIndex]['maxRssItems'];	// Specifying which file to get
		ajaxObjects[ajaxIndex].onCompletion = function(){ showRSSData(ajaxIndex,boxIndex); ajaxObjects[ajaxIndex] = false; }; 	// Specify function that will be executed after file has been found
		ajaxObjects[ajaxIndex].runAJAX();		                                                 	// Execute AJAX function
	    }
	    else if(type == "SEARCH")
	    {
		showSearch(boxIndex);
	    }
	    else if(type == "FAVORITES")
	    {
		showFavorites(boxIndex);
	    }
	    else if(type == "TOPPAGES")
	    {
		showTopPages(boxIndex);
	    }
	    else if(type == "SPOT")
	    {
		showSpot(boxIndex);
	    }
	    else if(type == "FLICKR")
	    {
		showFlickr(boxIndex);
	    }
	    else if(type == "NOTES")
	    {
		showNotes(boxIndex);
	    }
	    else if(type == "FEEDBACK")
	    {
		showFeedback(boxIndex);
	    }
	    else if(type == "FLASH")
	    {
		showFlash(boxIndex);
	    }
	}
	
	function createDefaultBoxes()
	{
	    if(pageType == "VAR")
	    {
			/*** col1 ***/
			var args = new Array();
			  args['type'] = "NOTES";
			  args['boxTitle'] = "Maak je eigen startpagina";
			  args['columnIndex'] = 1;
			createDragableBox(args, false);
			
			var args = new Array();
			  args['type'] = "TOPPAGES";
			  args['columnIndex'] = 1;
			  args['boxTitle'] = boxType['TOPPAGES']['def_title'];
			createDragableBox(args,false);

			/*** col2 ***/
                        var args = new Array();
                          args['type'] = "SEARCH";
                          args['columnIndex'] = 2;
			createDragableBox(args,false);

                        var args = new Array();
                          args['type'] = "RSS";
                          args['rssUrl'] = "http://www.standaard.be/rss.aspx?section=snelnieuws";
                          args['columnIndex'] = 2;
                          args['maxRssItems'] = 10;
                          args['minutesBeforeReload'] = 5;
                        createDragableBox(args,false);

                        var args = new Array();
                          args['type'] = "RSS";
                          args['rssUrl'] = "http://www.sporza.be/cm/sporza.be/hoofdpunten?mode=rss";
                          args['columnIndex'] = 2;
                          args['maxRssItems'] = 7;
                          args['minutesBeforeReload'] = 5;
                        createDragableBox(args,false);

			var args = new Array();
			  args['type'] = "FEEDBACK";
			  args['columnIndex'] = 2;
			  args['boxTitle'] = boxType['FEEDBACK']['def_title'];
			createDragableBox(args,false);

			/*** col3 ***/

			var args = new Array();
			  args['type'] = "SPOT";
			  args['columnIndex'] = 3;
			  args['boxTitle'] = boxType['SPOT']['def_title'];
			createDragableBox(args, false);


			var args = new Array();
			  args['type'] = "FLICKR";
			  args['tag'] = "vuurwerk";
			  args['boxTitle'] = "vuurwerk (bron: flickr)";
			  args['columnIndex'] = 3;
			createDragableBox(args,false);


	    }
	    else
	    {
		alert("TODO: default boxes voor pageType "+pageType);
	    }
	}
//----->