YAHOO.namespace('ACE.F2E.widget');
YAHOO.ACE.F2E.widget.TryItEditor = function(dElement) {	
    //reference
	var YUE = YAHOO.util.Event;
	var YUC = YAHOO.util.Connect;
	var YUD = YAHOO.util.Dom;
	//global variable
	var oComponent = this;
	oComponent.domElement = null;
	oComponent.sourceCode = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\n "http://www.w3.org/TR/html4/strict.dtd">\n<html>\n<head>\n<title>[Demo]</title>\n<style type="text/css">\n\n</style>\n</head>\n<body>\n請在這裡輸入原始碼\n</body>\n<script type="text/javascript">\n\n<\/script>\n</html>';
	oComponent.currentView = 'edit';
	var	dTitle,dEditBox,dPageBox,dSyntaxBox,dTextarea,dSyntax,dIframe,dWindow,dCloseButton,dForm = null;
    //build interface
	oComponent.render = function() {
		oComponent.domElement = document.createElement('div')
		dElement.appendChild(oComponent.domElement);	
		YUD.setStyle(oComponent.domElement,'display','none');
		oComponent.domElement.className = 'yui-tryit-editor';
		oComponent.domElement.innerHTML = [
		        '    <form>',
				'	     <div class="hd">',
				'            <div class="clearfix"><span class="title">Try It Editor - Textarea Mode</span><a href="#" class="button-close"><img src="btn_close.gif" alt="Close"></a></div>',
			    '        </div>',
				'        <div class="bd">',
				'            <div class="bd-container">',
				'                <div class="yui-editor"><textarea name="editor">' + oComponent.sourceCode + '</textarea></div>',
				'                <div class="yui-syntax" style="display:none"><textarea name="syntaxor" class="xml">' + oComponent.sourceCode + '</textarea></div>',
				'                <div class="yui-page" style="display:none"></div>',
				'            </div>',
				'        </div>',
				'        <div class="ft">',
				'	         <div class="ft-container">',
				'		         <div class="btn-group">',
				'	                 <input type="button" name="edit" value="Modify">',
				'    	             <input type="button" name="preview" value="Preview">',
				'                    <input type="button" name="syntax" value="Syntax Highlight">',
				'                </div>',
	            '            </div>',
				'        </div>',
				'    </form>'
			].join('');		
		//get necessary dom elements
		dTitle =  YUD.getElementsByClassName('title','span',oComponent.domElement)[0];
		dEditBox = YUD.getElementsByClassName('yui-editor','div',oComponent.domElement)[0];
		dPageBox = YUD.getElementsByClassName('yui-page','div',oComponent.domElement)[0];
		dSyntaxBox = YUD.getElementsByClassName('yui-syntax','div',oComponent.domElement)[0];	
		dTextarea = dEditBox.getElementsByTagName('textarea')[0];
		dSyntax = null; //do this later
		dCloseButton = YUD.getElementsByClassName('button-close','a',oComponent.domElement)[0];
		dForm = oComponent.domElement.getElementsByTagName('form')[0];		
		var dHead = YUD.getElementsByClassName('hd','div',oComponent.domElement)[0];
		YUD.generateId(dHead);
		//dragdrop		
		var oDD = new YAHOO.util.DD(oComponent.domElement);
		oDD.setHandleElId(dHead.id);
	};
	//initialization
	oComponent.render();
	//update the preview page (create Iframe everytime)
	oComponent.updateIframe = function(){	    
		if(dIframe){oComponent.deleteIframe();};
		dPageBox.innerHTML = '<iframe src="about:blank" name="demo" border="0" frameborder="no" scrolling="auto" marginwidth="0" marginheight="0"></iframe>';
		dIframe = dPageBox.getElementsByTagName('iframe')[0];
		dWindow = dIframe.contentWindow;
		/*
		if(document.uniqueID){
			dForm.action = 'http://www.josephjiang.com/prototype/try-it-editor/demo.php';
			dForm.method = 'post';
			dForm.target = 'demo';
			dForm.submit();
		}
		else {		
			var aHtml = oComponent.sourceCode.split('\n');
			dWindow.document.open();
			for(var i=0,j=aHtml.length;i<j;i++){
				dWindow.document.write(aHtml[i]);
			};
			dWindow.document.close();			
		};
		*/
		dForm.action = 'demo.php';
		dForm.method = 'post';
		dForm.target = 'demo';
		dForm.submit();		
		dWindow.onload = function(){
			dTitle.innerHTML = dWindow.document.title;
		};
		dWindow.onreadystatechange = function(){
			if(this.readyState == 'complete'){
				dTitle.innerHTML = dWindow.document.title;
			};
		};
	};
	//delete iframe
	oComponent.deleteIframe = function(){
		if(!dIframe){return;}
		dIframe.parentNode.removeChild(dIframe);
		dIframe = null;
		dWindow = null;		
	};
	//switch different view - syntax,editor,preview
	oComponent.switchView = function(sView){
		switch (sView) {
			case 'syntax':{
				YUD.setStyle(dEditBox,'display','none');
				YUD.setStyle(dSyntaxBox,'display','block');
				YUD.setStyle(dPageBox,'display','none');					
				oComponent.deleteIframe();
				(function(){
					var dSyntax = YUD.getElementsByClassName('dp-highlighter','div',dSyntaxBox)[0];
					if(dSyntax){dSyntax.parentNode.removeChild(dSyntax);}
					var dTextarea = dForm.elements['syntaxor'];
					dTextarea.value = oComponent.sourceCode;
					dp.SyntaxHighlighter.HighlightAll(dTextarea.name);
				}());
				dTitle.innerHTML = 'Try It Editor - Syntax Highlight Mode';
				break;
			};
			case 'edit':{
				YUD.setStyle(dEditBox,'display','block');
				YUD.setStyle(dSyntaxBox,'display','none');
				YUD.setStyle(dPageBox,'display','none');
				oComponent.deleteIframe();
				dTitle.innerHTML = 'Try It Editor - Textarea Mode';
				break;
			};
			case 'preview':{
				YUD.setStyle(dEditBox,'display','none');
				YUD.setStyle(dSyntaxBox,'display','none');
				YUD.setStyle(dPageBox,'display','block');
				oComponent.updateIframe();
				dTitle.innerHTML = 'Try It Editor - Preview Mode';
				break;
			};
		};
		oComponent.currentView = sView;
	};
	//show this "try-it-editor" module
	oComponent.show = function(sCode){	
		dTextarea.value = oComponent.sourceCode;
		YUD.setStyle(oComponent.domElement,'display','block');
		//centerize
		YUD.setXY(oComponent.domElement,[YUD.getViewportWidth()/2-oComponent.domElement.offsetWidth/2,YUD.getViewportHeight()/2-oComponent.domElement.offsetHeight/2]);
	};	
	//show this "try-it-editor" module
	oComponent.hide = function(sCode){		
		YUD.setStyle(oComponent.domElement,'display','none');		
	};		
	//get data using AJAX
	oComponent.getData = function(sUrl,fCallback){
		YUC.asyncRequest('GET',sUrl,{
			success:function(e){
				oComponent.sourceCode = e.responseText;
				fCallback();
			},
			failure:function(e){
				alert(e.message);
			}
		})
	};	
    //event handler :  while editor change the content
	var editorChange = function(oEvent){
		oComponent.sourceCode = dTextarea.value;
	};
	//event : while close button clicked...
	YUE.on(dCloseButton,'click',function(oEvent){		
		oComponent.switchView('edit');
		oComponent.deleteIframe();
		oComponent.hide();
		YUE.stopEvent(oEvent);
		return false;
	});
	//event : while any input button clicked...
	YUE.on([dForm.elements['edit'],dForm.elements['preview'],dForm.elements['syntax']],'click',function(oEvent){
		oComponent.switchView(this.name);
		YUE.stopEvent(oEvent);
		return false;
	});	
	//event : prevent influence outside modules
	YUE.on(oComponent.domElement,'click',function(oEvent){YUE.stopEvent(oEvent);});
	YUE.on(oComponent.domElement,'keyup',function(oEvent){YUE.stopEvent(oEvent);});
	YUE.on(document,'keypress',function(oEvent){
		if(oEvent.keyCode==27){
			oComponent.hide();
		};
	});
	//event : change the content in editor
	YUE.on(dTextarea,'click',editorChange);
	YUE.on(dTextarea,'paste',editorChange);
	YUE.on(dTextarea,'keyup',editorChange);
	YUE.on(dTextarea,'keypress',editorChange);
	/* thanks james  yan*/
    /*
	var init = function () {
		var aKeywordList = new Array ();
		aKeywordList [aKeywordList.length] = 'function';
		aKeywordList [aKeywordList.length] = 'array';
		aKeywordList [aKeywordList.length] = 'if';
		aKeywordList [aKeywordList.length] = 'return';
		aKeywordList [aKeywordList.length] = 'for';
		aKeywordList [aKeywordList.length] = 'this';
		aKeywordList [aKeywordList.length] = 'var';
		aKeywordList [aKeywordList.length] = 'new';
		aKeywordList [aKeywordList.length] = 'in';
		var aYahooKeywordList = new Array ();
		aYahooKeywordList [aYahooKeywordList.length] = 'ygPos';
		aYahooKeywordList [aYahooKeywordList.length] = 'yui.Event';
		aYahooKeywordList [aYahooKeywordList.length] = 'ygAnim_Move';
		var aCompleteWord = new Array ();
		var sCurrentWord = '';
		var insertWordComplete = function (oRange) {
		  ygPos.setPos (document.getElementById ('wordCompletePane'), [oRange.offsetLeft, oRange.offsetTop]);
		  var sCompletionHtml = '<ul>';
		  for (var key in aCompleteWord) {
		    if ( key.match(new RegExp( '^' + sCurrentWord)) && key != sCurrentWord) {
		      sCompletionHtml += '<li>' + key;
		    }
		  }
		  sCompletionHtml += '</ul>';

		  document.getElementById ('wordCompletePane').innerHTML = sCompletionHtml;
		  document.getElementById ('wordCompletePane').style.display = 'inline';
		}
		var editorChange = function (evt) {
		  var oRange = document.selection.createRange();  
		  if (! evt.altKey) {
		    if (String.fromCharCode (evt.keyCode).match (/[0-9A-Z-_$]/)) {
		      if (evt.shiftKey)
		        sCurrentWord += String.fromCharCode (evt.keyCode);
		      else
		        sCurrentWord += String.fromCharCode (evt.keyCode).toLowerCase();
		    } else {
		      if (sCurrentWord != '')
		        aCompleteWord[sCurrentWord] = '';
		      sCurrentWord = '';
		      
		      if (String.fromCharCode (evt.keyCode) == " ")
		        markupScript (oRange);
		      if(event.keyCode==13){ 
		      } else if(event.keyCode==38){
		      } else if(event.keyCode==40){
		      }
		      return;
		    }
		  } else {
		    if (String.fromCharCode (evt.keyCode) == "Q") {
		      insertWordComplete (oRange);
		    } else {
		      return;
		    }
		  } 
		}
		var markupScript = function (oRange) {
		  var sTemp = dEditor.innerHTML;
		  for (var i in aKeywordList) {
		    var reKeyword = new RegExp (aKeywordList[i] + ' ', 'g');
		    if (sTemp.match (reKeyword)) {
		      sTemp = sTemp.replace (reKeyword, '<span class="keyword">' + aKeywordList[i] + '</span> ');      
		    }
		  }
		  
		  for (var i in aYahooKeywordList) {
		    var reKeyword = new RegExp (aYahooKeywordList[i] + '\\.', 'g');
		    if (sTemp.match (reKeyword)) {
		      sTemp = sTemp.replace (reKeyword, '<span class="yahoo_keyword">' + aYahooKeywordList[i] + '</span>.');      
		    }
		    
		    var reKeyword = new RegExp (aYahooKeywordList[i] + '\\(', 'g');
		    if (sTemp.match (reKeyword)) {
		      sTemp = sTemp.replace (reKeyword, '<span class="yahoo_keyword">' + aYahooKeywordList[i] + '</span>(');      
		    }    
		  }
		  
		  dEditor.innerHTML = sTemp;
		}	
	}		
    */
}; 



