var currWindow = '';
	
	wps.blogReact = function(refID, container, isAdmin, headElement){
		this.instID = 'wps.blogReact.' + parseInt(Math.random()*1000000);
		this.authenticated = false;
		this.isAdmin = isAdmin;
		this.refID = refID;
		this.container = container;
		if (headElement){
			this.headElement = headElement;
		}else{
			this.headElement = false;
		}
		//this.getReactions(refID, 0);
		this.currPage = 0;
	}
	
	wps.blogReact = wps.blogReact.extendsFrom(wps.base);
	
	wps.blogReact.prototype.getReactions = function(refID, parentID){
		var wpsRPC = new wps.rpc;
		wpsRPC.debug = true;
		wpsRPC.attachWaiter(this.waiter, this);
		wpsRPC.attachUnWaiter(this.unWaiter, this);
		wpsRPC.createCall('react', this.handleFreshDOM, this);
		if (!this.currPage) this.currPage = 0;
		wpsRPC.call('getReactions', 'refID=' + this.refID, 'parentID=' + parentID, 'page=' + this.currPage);
	}
	
	wps.blogReact.prototype.handleFreshDOM = function(req){
		this.messages = req.responseXML;
		this.messages = this.messages.getElementsByTagName('react').item(0);
		this.buildTable(this.messages, '', false);
		// add previous/next links
	}
	
	wps.blogReact.prototype.buildTable = function(dom, container, isInline){
		var tbody = Builder.node('tbody');
		var mainTable = Builder.node('table',  [tbody]);
		mainTable.appendChild(tbody);

		if (!isInline) {
			if (this.headElement){
				// add the form on top.Inline
				var td = Builder.node('td', {} , [this.headElement]);
				this.addEvent(td, 'click', this.drawReactionFloater.bind(this));
				var tr = Builder.node('tr', [td]);
				tbody.appendChild(tr);
			}else{
				// add the form on top.
				var td = Builder.node('td');
				var tr = Builder.node('tr', {}, [td]);
				//td.setAttribute('colspan', '2');
				td.width = '100%';
				td.style.width = '100%';
				tbody.appendChild(tr);
				var input = document.createElement('input');
				input.setAttribute('type', 'text');
				input.setAttribute('readonly', 'readonly');
				input.setAttribute('size', '15');
				input.value = ' Reageren? klik hier!';
				this.addEvent(td, 'click', this.drawReactionFloater.bind(this));
				td.appendChild(input);	
				td.appendChild(document.createElement('hr'));
			}
		}
		if (this.messages){
			this.buildMessages(dom, tbody);
		}
		if (!container){
			mainTable.className = 'reactRoot';
			this.container.appendChild(mainTable)
		}else{
			mainTable.className = 'reactInline';
			container.appendChild(mainTable)			
		}
		if (!isInline){
			// add the navigator
			this.messageCount = this.messages.getAttribute('msgCount');
			var tr = document.createElement('tr');
			var td = document.createElement('td');
			tr.appendChild(td);
			tbody.appendChild(tr);
			//td.setAttribute('colspan', '2');
			if (this.currPage > 0){
				var span = document.createElement('span');
				span.style.background = 'white';
				span.style.color = '#f2182e';
				span.style.cursor = 'pointer'
				this.addEvent(span, 'click', this.goBack.bind(this));
				span.appendChild(document.createTextNode(' < vorige     '));
				td.appendChild(span);
			}
			if ( (this.messageCount - ((this.currPage + 1) * 5) ) > 0 ){
				var span = document.createElement('span');
				span.style.background = 'white';
				span.style.color = '#f2182e';
				span.style.cursor = 'pointer'
				this.addEvent(span, 'click', this.goNext.bind(this));
				span.appendChild(document.createTextNode(' volgende > '));
				td.appendChild(span);
			}
			//var span = Builder.node('span', ['sluiten']);
			//this.addEvent(span, 'click', function(){new Effect.SlideUp(mainTable);})
			//var td = Builder.node('td', {style:'text-align:right;text-decoration:underline;cursor:pointer;', colspan:'2'}, [span]);
			//var tr = Builder.node('tr', {}, [td]);
			//tbody.appendChild(tr);
			
		}
	}
	
	wps.blogReact.prototype.buildMessages = function(domNode, container){
		var directChildNodes = domNode.childNodes;
		$A(directChildNodes).each(
			(function(aChildNode){
				if (aChildNode.nodeName == 'row'){
					container.appendChild(this.createReactRowHeader(aChildNode)); // create Header-row
					container.appendChild(this.createReactRow(aChildNode)); // create reaction-row
					//container.appendChild(this.createReactLink(aChildNode)); // create reaction-row
					//if (aChildNode.getElementsByTagName('row').length > 0){
						// recursively add inline rows
						this.addInlineRows(aChildNode, container);
					//}
				}
			}).bind(this)
		);
		
	}

	wps.blogReact.prototype.addInlineRows = function(node, container){
		var tr = document.createElement('tr');
		var td = document.createElement('td');
		td.className = 'reactInlineCell';
		if (node.getElementsByTagName('row').length > 0){
			var img = document.createElement('img');
			img.src = 'wpsRepos2/images/plus.gif';
			img.subjectID = 'reactNode_' + wps.dom.getFieldValueFromRowNode(node, 'reactID');
			img.style.align = 'left';
			img.style.verticalAlign = 'bottom';
			//this.addEvent(img, 'click', this.openRow.bind(this));
			img.onclick = this.openRow.bind(this);
			td.appendChild(img);
			//tr.appendChild(td);
			//var td = document.createElement('td');
			//var text = wps.dom.getFieldValueFromRowNode(row, 'nickname');
			td.appendChild(document.createTextNode('reactions [' + node.getElementsByTagName('row').length + ']     '));
		}
		//td.style.color = '#f2182e';
		td.style.width = '100%';
		td.appendChild(this.createReactLink(node));
		tr.appendChild(td);
		container.appendChild(tr);

		var tr = document.createElement('tr');
		tr.style.display = 'none';
		tr.setAttribute('id', 'reactNode_' + wps.dom.getFieldValueFromRowNode(node, 'reactID'));
		//var td = document.createElement('td');
		//tr.appendChild(td); // empty row
		var td = document.createElement('td');
		td.style.paddingLeft= '15px';
		this.buildTable(node, td, true);
		tr.appendChild(td); // empty row
		container.appendChild(tr);
	}

	wps.blogReact.prototype.createReactRowHeader = function(row){
		var postDate = wps.dom.getFieldValueFromRowNode(row, 'dateposted');
		var postTime = wps.dom.getFieldValueFromRowNode(row, 'timeposted');
		var tr = document.createElement('tr');
		var td = document.createElement('td');
		//td.setAttribute('colspan', '2');
		td.className = 'reactHeader';
		var text = wps.dom.getFieldValueFromRowNode(row, 'nickname');
		td.appendChild(document.createTextNode(text + ' wrote on ' + this.formatMysqlDate(postDate + ' ' + postTime)));
		if (this.isAdmin){
			var removeLink = document.createElement('span');
			//removeLink.style.color = 'red';
			removeLink.style.cursor = 'pointer';
			removeLink.appendChild(document.createTextNode(' [remove] '));
			removeLink.reactionID = wps.dom.getFieldValueFromRowNode(row, 'reactID');
			this.addEvent(removeLink, 'click', this.removeReaction.bind(this));
			td.appendChild(removeLink);
		}
		tr.appendChild(td);
		return tr;
	}
	
	wps.blogReact.prototype.removeReaction = function(e){
		var elem = Event.element(e);
		var reactionID = elem.reactionID;
		var wpsRPC = new wps.rpc;
		wpsRPC.attachWaiter(this.waiter, this);
		wpsRPC.attachUnWaiter(this.unWaiter, this);
		wpsRPC.createCall('react', this.refreshPage, this);
		if (!this.currPage) this.currPage = 0;
		wpsRPC.call('removeReaction', 'reactionID=' + reactionID);

	}
	
	wps.blogReact.prototype.createReactRow = function(row){
		var postDate = wps.dom.getFieldValueFromRowNode(row, 'dateposted');
		var postTime = wps.dom.getFieldValueFromRowNode(row, 'timeposted');
		var tr = document.createElement('tr');
		var td = document.createElement('td'); 
		//td.className = 'reactToReactRow';
		//td.setAttribute('colspan', '2');
		var text = this.getText(row);
		td.innerHTML = text;
		tr.appendChild(td);
		return tr;
	}
	
	wps.blogReact.prototype.createReactLink = function(row){
		//var tr = document.createElement('tr');
		//var td = document.createElement('td'); 
		////td.setAttribute('colspan', '2');
		
		var span = document.createElement('span');
		span.className = 'reactToReactLink';
		//span.style.background = 'white';
		//span.style.color = '#f2182e';
		//span.style.cursor = 'pointer'
		span.appendChild(document.createTextNode('[react to this message]'));
		span.parentID = wps.dom.getFieldValueFromRowNode(row, 'reactID');
		this.addEvent(span, 'click', this.openReactFormAtReactNode.bind(this));
		//td.appendChild(span);
		//tr.appendChild(td);
		return span;
	}
	
	wps.blogReact.prototype.openReactFormAtReactNode = function(elem){
		if (elem){
			var parentID = elem.parentID;
			if (!parentID){
				try{
					if (this.is_ie()){
						 elem = Event.element(elem);
					}else{
						elem = Event.element(elem);
					}
					var parentID = elem.parentID;
				}catch(er){
					var parentID = 0;
				}
			}
		}else{
			var parentID = 0;
		}
		if (currWindow){
			 currWindow.closeMe();
			this.reactionForm = null;
		}
		this.currParentID = parentID;
		this.drawReactionFloater(elem, parentID);
	}
	
	wps.blogReact.prototype._____drawForm = function(){
		if (!this.reactionForm.readyToDraw){
			setTimeout(this.drawForm.bind(this), 1000);
			return;
		}	
		this.reactionForm.drawPage($(this.instID), '');
		var formObj = this.reactionForm.getObjectById('reactForm').formFactory;
		formObj.getElementByName('formSubmit').setEvents(this);
	}
	
	wps.blogReact.prototype.drawReactionFloater = function(elem, parentID){
		if (!this.reactionForm){
			this.reactionForm = new wps.ui('xml/UI/reactForm.xml', '', '');
		}
		if (!this.reactionForm.readyToDraw){
			setTimeout(
				(function(e, parentID){this.drawReactionFloater(elem, parentID)}).bind(this), 
				500);
			return;
		}
		this.reactionForm.getObjectById('miniFloater').addCloseEvent(this.closeFloater, this);
		try{
			this.reactionForm.getObjectById('miniFloater').closingElement.src = 'images/closer.gif';
		}catch(err){}
		currWindow = this.reactionForm.getObjectById('miniFloater');
		currWindow.options.title = "React to this message";
		//this.reactionForm.getObjectById('miniFloater').outputNode.zIndex = '999';
		this.reactionForm.getObjectById('miniFloater').doAutoResize();
		this.reactionForm.getObjectById('miniFloater').draw($('popupContainer'));
		this.formObj = this.reactionForm.getObjectById('reactForm').formFactory;
		this.formObj.getElementByName('formSubmit').setEvents(this);
		this.formObj.getElementByName('parentID').setValue(this.currParentID);
		this.currParentID = '';
	}

	wps.blogReact.prototype.closeFloater = function(){
		currWindow = null;
		this.reactionForm = null;
	}
	
	wps.blogReact.prototype.storeNewReaction = function(e){
		// first validate the form:
		//$A(document.getElementsByClassName('formError')).each(
		//	function(elem){
		//		var parentnode = elem.parentNode;
		//	}
		//)
		this.formObj.getElementByName('formSubmit').toFormElem().setAttribute('disabled', 'true');
		this.formObj.getElementByName('formSubmit').setValue('Validating');
		this.authenticated = true;
		var nameValue = this.formObj.getElementByName('nickname').getValue();
		var emailValue = this.formObj.getElementByName('email').getValue();
		var text = this.formObj.getElementByName('mening').getValue();
//var auth = this.formObj.getElementByName('validator').getValue(); // ENABLE THIS FOR CAPTCHA
		// validate name
		if (!nameValue){
			if ($('formErrorName')){
				$('formErrorName').style.display = 'block';
				//this.formObj.getElementByName('nickname').toFormElem().style.background = '#bd182a';
			}else{
				var message = document.createElement('span');
				message.setAttribute('id', 'formErrorName');
				message.style.color = 'white';
				message.appendChild(document.createTextNode('Please enter your name.'));
				message.appendChild(document.createElement('br'));
				this.reactionForm.getObjectById('miniFloater').appendChild(message);
				//this.formObj.getElementByName('nickname').toFormElem().style.background = '#bd182a';
			}
			this.authenticated = false;
		}else{
			if ($('formErrorName')){
				$('formErrorName').style.display = 'none';
				//this.formObj.getElementByName('nickname').toFormElem().style.background = 'white';
			}
		}
		
		// validate email...
		if (emailValue && !this.is_email(emailValue)){
			if ($('formErrorEmail')){
				$('formErrorEmail').style.display = 'block';
				//this.formObj.getElementByName('email').toFormElem().style.background = '#bd182a';
			}else{
				var message = document.createElement('span');
				message.style.color = 'white';
				message.setAttribute('id', 'formErrorEmail');
				message.appendChild(document.createTextNode(emailValue + ' :not valid emailValue!'));
				message.appendChild(document.createElement('br'));
				this.reactionForm.getObjectById('miniFloater').appendChild(message);
				//this.formObj.getElementByName('email').toFormElem().style.background = '#bd182a';
			}
			this.authenticated = false;
		}else{
			if ($('formErrorEmail')){
				$('formErrorEmail').style.display = 'none';
				//this.formObj.getElementByName('email').toFormElem().style.background = 'white';
			}
		}

		// validate text
		if (!text){
			if ($('formErrorMening')){
				$('formErrorMening').style.display = 'block';
				//this.formObj.getElementByName('mening').toFormElem().style.background = '#bd182a';
			}else{
				var message = document.createElement('span');
				message.style.color = 'white';
				message.appendChild(document.createTextNode('Don\'t you have anything to say?!'));
				message.appendChild(document.createElement('br'));
				message.setAttribute('id', 'formErrorMening');
				message.className = 'formError';
				this.reactionForm.getObjectById('miniFloater').appendChild(message);
				//this.formObj.getElementByName('mening').toFormElem().style.background = '#bd182a';
			}
			this.authenticated = false;
		}else{
			if ($('formErrorMening')){
				$('formErrorMening').style.display = 'none';
				//this.formObj.getElementByName('mening').toFormElem().style.background = 'white';
			}
		}
		this.formObj.getElementByName('formSubmit').toFormElem().disabled = false;
		this.postReaction(); //disable this to ENABLE Captcha
		//this.validateAuth(auth); // // ENABLE THIS FOR CAPTCHA
	}
	
	wps.blogReact.prototype.validateAuth = function(authCode){
		var wpsRPC = new wps.rpc;
		wpsRPC.debug = true;
		wpsRPC.attachWaiter(this.waiter, this);
		wpsRPC.attachUnWaiter(this.unWaiter, this);
		wpsRPC.createCall('form', this.handleImgAuth, this);
		wpsRPC.call('checkImgAuth', 'code=' + authCode);
	}
	
	wps.blogReact.prototype.handleImgAuth = function(req){
		var dom = req.responseXML;
		var message = dom.getElementsByTagName('message').item(0);
		if (wps.dom.getElementValue(message) != 'true'){
			if ($('formErrorCode')){
				$('formErrorCode').style.display = 'block';
			}else{
				var message = document.createElement('span');
				message.setAttribute('id', 'formErrorCode');
				message.style.color = '#bd182a';
				message.appendChild(document.createTextNode('The code you entered didn\'t match the code on the image!'));
				message.appendChild(document.createElement('br'));
				this.reactionForm.getObjectById('miniFloater').appendChild(message);
				this.formObj.getElementByName('validator').toFormElem().style.background = '#bd182a';
				this.formObj.getElementByName('formSubmit').toFormElem().disabled = false;
			}
			this.authenticated = false;
			return;
		}else{
			if ($('formErrorCode')) $('formErrorCode').style.display = 'none';
			this.postReaction();
			this.formObj.getElementByName('validator').toFormElem().style.background = 'white';
		}
						
	}
	
	wps.blogReact.prototype.postReaction = function(){
		if (!this.authenticated) {
			this.formObj.getElementByName('formSubmit').toFormElem().removeAttribute('disabled');
			this.formObj.getElementByName('formSubmit').setValue('Try again');
			return;
		}
		this.formObj.getElementByName('formSubmit').setValue('Busy saving your message.. pls wait.');
		// we can savely assume the values are validated (the backend will check them anyway ;) )
		var nameValue = this.formObj.getElementByName('nickname').getValue();
		var emailValue = this.formObj.getElementByName('email').getValue();
		var text = this.formObj.getElementByName('mening').getValue();
		//var auth = this.formObj.getElementByName('validator').getValue(); 
		var parentID = this.formObj.getElementByName('parentID').getValue();
		var wpsRPC = new wps.rpc;
		wpsRPC.attachWaiter(this.waiter, this);
		wpsRPC.attachUnWaiter(this.unWaiter, this);
		wpsRPC.createCall('react', this.refreshPage.bind(this), this);
		//wpsRPC.call('storeReaction', 'code=' + auth, 'parentID=' + parentID, 'refID=' + this.refID, 'nickname=' + nameValue, 'email=' + emailValue, 'message=' + text);
		wpsRPC.call('storeReaction',  'parentID=' + parentID, 'refID=' + this.refID, 'nickname=' + nameValue, 'email=' + emailValue, 'message=' + text);
	}
	
	wps.blogReact.prototype.getText = function(rowNode){
		var ret = $A(rowNode.childNodes).find(
			function(aChildNode){
				if (aChildNode.getAttribute('name') == 'xml'){
					return true;
				}
			}
		);
		var node = ret.childNodes[0].childNodes[0];
		if (window.ActiveXObject){
			return node.xml;	
		}else{
			var aSerializer = new XMLSerializer();
			return aSerializer.serializeToString(node);
		}
	}
	
	wps.blogReact.prototype.waiter = function(){
	 	if ($('reactLoader')){
	    	$('reactLoader').style.display='block';
	    }else{
	    	if (document.getElementsByTagName('body').length){
	    		var bodyNode = document.getElementsByTagName('body').item(0);
	    		var loaderDiv = document.createElement('div');
	    		loaderDiv.setAttribute('id', 'reactLoader');
	    		loaderDiv.style.display = 'none';
				loaderDiv.style.zIndex = '99';
				loaderDiv.style.color = 'black';
    			loaderDiv.style.position = 'absolute';
    			loaderDiv.style.height = '100%';
    			loaderDiv.style.top = '45%';
    			loaderDiv.style.left = '45%';
				var img = document.createElement('img');
				img.setAttribute('src', 'images/waiter.gif');
				img.align = "center";
				loaderDiv.appendChild(img);
				bodyNode.appendChild(loaderDiv);
	    	}
	    }	
	}
	
	wps.blogReact.prototype.unWaiter = function(){
	    if ($('reactLoader')){
	    	Try.these(
	    		function(){new Effect.Fade($('reactLoader'));},
	    		function(){$('reactLoader').style.display='none';}
	    	)
	    }
	}
	
	wps.blogReact.prototype.showRows = function(id){
		new Effect.Appear($(id), {duration:0.5});
	}	
	
	wps.blogReact.prototype.closeRows = function(id){
		new Effect.Fade($(id), {duration:0.5});
	}	
		
	wps.blogReact.prototype.goBack = function(){
		this.currPage--;
		this.resetScreen();
		this.getReactions(this.refID, this.container);
	}
	
	wps.blogReact.prototype.goNext = function(){
		this.currPage++;
		this.resetScreen();
		this.getReactions(this.refID, this.container);
	}

	wps.blogReact.prototype.openRow = function(e){
		if (this.is_ie()){
			var elem = Event.element(event);
		}else{
			var elem = Event.element(e);
		}
		var subject = elem.subjectID;
		elem.src = 'wpsRepos2/images/minus.gif';
		elem.onclick = this.closeRow.bind(this);
		//this.addEvent(elem, 'click', this.closeRow.bind(this));
		new Effect.Appear($(subject), {duration:0.3});
	}
	
	wps.blogReact.prototype.closeRow = function(e){
		if (this.is_ie()){
			var elem = Event.element(event);
		}else{
			var elem = Event.element(e);
		}
		var subject = elem.subjectID;
		elem.src = 'wpsRepos2/images/plus.gif';
		elem.onclick = this.openRow.bind(this);
		//this.addEvent(elem, 'click', this.openRow.bind(this));
		new Effect.Fade($(subject), {duration:0.3});
	}

	wps.blogReact.prototype.refreshPage = function(req){
		if (this.reactionForm){
			this.reactionForm.getObjectById('miniFloater').closeMe();
			this.reactionForm.getObjectById('miniFloater').win.destroy();
			//this.formObj.getElementByName('formSubmit').toFormElem().readonly='true';
			this.reactionForm = null;
		}
		this.resetScreen();
		this.getReactions(this.refID, this.container);
	}
	
	wps.blogReact.prototype.resetScreen = function(){
		this.container.innerHTML = '';		
	}