// ==UserScript==
// @name fix opera live preview
// @author Kirk Job Sluder
// @version 20071005
// @include http://*.metafilter.com/*
// ==/UserScript==

/*
  This script fixes two problems with metafilter live preview for users of Opera 9.2.  

  The first problem is that with the default metafilter script, the 
  onkeyup event of the text window never gets set to run the live preview function.
  The solution is to add an event listener that sets the onkeyup event after 
  all other javascript has been loaded. 

  The second big problem is that the default metafilter live preview function 
  updates the preview by editing innerHTML directly.  This forces a complete page 
  reflow for every keyup event, which causes severe performance issues for longer 
  discussions.  The solution to this is to rewrite the live preview function to 
  create the preview in an invisible, in-memory DOM node, and then update the visible 
  page with element.replaceChild.  

  The third optimization that makes a bit of difference is running getElementById once 
  when the page loads, and storing the node references in function variables.  

  Finally, it uses a timer to update the preview only five times a second, rather than 
  with every keystroke.  

  Note, this is not a greasemonkey script for Firefox, although it can probably be
  converted to work with firefox, and may even offer a performance improvement.  

  To use this script, create a user javascript folder (if you don't already have one) 
  then open Preferences, Advanced, Content, JavaScript Options, and select "choose" next
  to the User Javascript directory. 

  Or see:
  http://www.opera.com/support/tutorials/userjs/
  

 */



//run these settings only for metafilter sites.
if( location.hostname.indexOf('metafilter') != -1 ){

  

  function updatePreview (commentBox) {
		  var oldEl = myprev.prevDiv;

	  /* make an invisible, in-memory copy of the comment 
		 preview box. */

	  var newEl = oldEl.cloneNode(true);

	  /* run our expensive innerHTML setting in the background on our 
		 invisible in-memory DOM node. */
	  newEl.innerHTML="<div>"+commentBox.value.replace(/(\n|\r)/g,'<br/>').replace(/(<br\/><br\/>)/g,'<br/>')+"</div>"; 

	  // replace the existing preview with our new preview.  
	  oldEl.parentNode.replaceChild(newEl,oldEl);
	  myprev.prevDiv=newEl;

  }

  //redefine the prev function.
  function myprev(commentBox){
	
 	if(commentBox.value!=""){
	  myprev.postButton.disabled=false;
	  if (updatePreview.timeFlag == false) {
		updatePreview.timeFlag = true;
		setTimeout(function () {updatePreview(commentBox);
			updatePreview.timeFlag=false;}, 200)
		  }
		
	  
	 
	  
	  
	  
	  
	}else{
		myprev.prevDiv2.innerHTML="";myprev.prevDiv.innerHTML="&nbsp;";
		myprev.postButton.disabled=true;
	}
}

  /* make certain that the comment box onkeyup event is set.
	 this should be the last bit of javascript evaluated 
	 after the page loads.*/
  document.addEventListener('load', //necessary to confirm that DOM is loaded
	function (e) {

	  var commentBox = getEl("comment");

	  
	  /* further optimize by storing the 
		 results of getElementById in function
		 variables. */
	  
	  myprev.prevDiv=getEl("prevDiv");
	  myprev.prevDiv2=getEl("prevDiv2");
	  myprev.postButton=getEl("postButton");
	  updatePreview.timeFlag = false;
  

	  commentBox.onkeyup = function() {myprev(commentBox)};

	  

	},false)

}