editarea-rails 0.0.1

data/vendor/assets/javascripts/regexp.js

@@ -0,0 +1,139 @@
+	/*EditArea.prototype.comment_or_quotes= function(v0, v1, v2, v3, v4,v5,v6,v7,v8,v9, v10){
+		new_class="quotes";
+		if(v6 && v6 != undefined && v6!="")
+			new_class="comments";
+		return "µ__"+ new_class +"__µ"+v0+"µ_END_µ";
+
+	};*/
+	
+/*	EditArea.prototype.htmlTag= function(v0, v1, v2, v3, v4,v5,v6,v7,v8,v9, v10){
+		res="<span class=htmlTag>"+v2;
+		alert("v2: "+v2+" v3: "+v3);
+		tab=v3.split("=");
+		attributes="";
+		if(tab.length>1){
+			attributes="<span class=attribute>"+tab[0]+"</span>=";
+			for(i=1; i<tab.length-1; i++){
+				cut=tab[i].lastIndexOf("&nbsp;");				
+				attributes+="<span class=attributeVal>"+tab[i].substr(0,cut)+"</span>";
+				attributes+="<span class=attribute>"+tab[i].substr(cut)+"</span>=";
+			}
+			attributes+="<span class=attributeVal>"+tab[tab.length-1]+"</span>";
+		}		
+		res+=attributes+v5+"</span>";
+		return res;		
+	};*/
+	
+	// determine if the selected text if a comment or a quoted text
+	EditArea.prototype.comment_or_quote= function(){
+		var new_class="", close_tag="", sy, arg, i;
+		sy 		= parent.editAreaLoader.syntax[editArea.current_code_lang];
+		arg		= EditArea.prototype.comment_or_quote.arguments[0];
+		
+		for( i in sy["quotes"] ){
+			if(arg.indexOf(i)==0){
+				new_class="quotesmarks";
+				close_tag=sy["quotes"][i];
+			}
+		}
+		if(new_class.length==0)
+		{
+			for(var i in sy["comments"]){
+				if( arg.indexOf(i)==0 ){
+					new_class="comments";
+					close_tag=sy["comments"][i];
+				}
+			}
+		}
+		// for single line comment the \n must not be included in the span tags
+		if(close_tag=="\n"){
+			return "µ__"+ new_class +"__µ"+ arg.replace(/(\r?\n)?$/m, "µ_END_µ$1");
+		}else{
+			// the closing tag must be set only if the comment or quotes is closed 
+			reg= new RegExp(parent.editAreaLoader.get_escaped_regexp(close_tag)+"$", "m");
+			if( arg.search(reg)!=-1 )
+				return "µ__"+ new_class +"__µ"+ arg +"µ_END_µ";
+			else
+				return "µ__"+ new_class +"__µ"+ arg;
+		}
+	};
+	
+/*
+	// apply special tags arround text to highlight
+	EditArea.prototype.custom_highlight= function(){
+		res= EditArea.prototype.custom_highlight.arguments[1]+"µ__"+ editArea.reg_exp_span_tag +"__µ" + EditArea.prototype.custom_highlight.arguments[2]+"µ_END_µ";
+		if(EditArea.prototype.custom_highlight.arguments.length>5)
+			res+= EditArea.prototype.custom_highlight.arguments[ EditArea.prototype.custom_highlight.arguments.length-3 ];
+		return res;
+	};
+	*/
+	
+	// return identication that allow to know if revalidating only the text line won't make the syntax go mad
+	EditArea.prototype.get_syntax_trace= function(text){
+		if(this.settings["syntax"].length>0 && parent.editAreaLoader.syntax[this.settings["syntax"]]["syntax_trace_regexp"])
+			return text.replace(parent.editAreaLoader.syntax[this.settings["syntax"]]["syntax_trace_regexp"], "$3");
+	};
+	
+		
+	EditArea.prototype.colorize_text= function(text){
+		//text="<div id='result' class='area' style='position: relative; z-index: 4; height: 500px; overflow: scroll;border: solid black 1px;'> ";
+	  /*		
+		if(this.isOpera){	
+			// opera can't use pre element tabulation cause a tab=6 chars in the textarea and 8 chars in the pre 
+			text= this.replace_tab(text);
+		}*/
+		
+		text= " "+text; // for easier regExp
+		
+		/*if(this.do_html_tags)
+			text= text.replace(/(<[a-z]+ [^>]*>)/gi, '[__htmlTag__]$1[_END_]');*/
+		if(this.settings["syntax"].length>0)
+			text= this.apply_syntax(text, this.settings["syntax"]);
+
+		// remove the first space added
+		return text.substr(1).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/µ_END_µ/g,"</span>").replace(/µ__([a-zA-Z0-9]+)__µ/g,"<span class='$1'>");
+	};
+	
+	EditArea.prototype.apply_syntax= function(text, lang){
+		var sy;
+		this.current_code_lang=lang;
+	
+		if(!parent.editAreaLoader.syntax[lang])
+			return text;
+			
+		sy = parent.editAreaLoader.syntax[lang];
+		if(sy["custom_regexp"]['before']){
+			for( var i in sy["custom_regexp"]['before']){
+				var convert="$1µ__"+ sy["custom_regexp"]['before'][i]['class'] +"__µ$2µ_END_µ$3";
+				text= text.replace(sy["custom_regexp"]['before'][i]['regexp'], convert);
+			}
+		}
+		
+		if(sy["comment_or_quote_reg_exp"]){
+			//setTimeout("_$('debug_area').value=editArea.comment_or_quote_reg_exp;", 500);
+			text= text.replace(sy["comment_or_quote_reg_exp"], this.comment_or_quote);
+		}
+		
+		if(sy["keywords_reg_exp"]){
+			for(var i in sy["keywords_reg_exp"]){	
+				text= text.replace(sy["keywords_reg_exp"][i], 'µ__'+i+'__µ$2µ_END_µ');
+			}			
+		}
+		
+		if(sy["delimiters_reg_exp"]){
+			text= text.replace(sy["delimiters_reg_exp"], 'µ__delimiters__µ$1µ_END_µ');
+		}		
+		
+		if(sy["operators_reg_exp"]){
+			text= text.replace(sy["operators_reg_exp"], 'µ__operators__µ$1µ_END_µ');
+		}
+		
+		if(sy["custom_regexp"]['after']){
+			for( var i in sy["custom_regexp"]['after']){
+				var convert="$1µ__"+ sy["custom_regexp"]['after'][i]['class'] +"__µ$2µ_END_µ$3";
+				text= text.replace(sy["custom_regexp"]['after'][i]['regexp'], convert);			
+			}
+		}
+			
+		return text;
+	};

data/vendor/assets/javascripts/resize_area.js

@@ -0,0 +1,73 @@
+	
+	EditAreaLoader.prototype.start_resize_area= function(){
+		var d=document,a,div,width,height,father;
+		
+		d.onmouseup= editAreaLoader.end_resize_area;
+		d.onmousemove= editAreaLoader.resize_area;
+		editAreaLoader.toggle(editAreaLoader.resize["id"]);		
+		
+		a	= editAreas[editAreaLoader.resize["id"]]["textarea"];
+		div	= d.getElementById("edit_area_resize");
+		if(!div){
+			div= d.createElement("div");
+			div.id="edit_area_resize";
+			div.style.border="dashed #888888 1px";
+		}
+		width	= a.offsetWidth -2;
+		height	= a.offsetHeight -2;
+		
+		div.style.display	= "block";
+		div.style.width		= width+"px";
+		div.style.height	= height+"px";
+		father= a.parentNode;
+		father.insertBefore(div, a);
+		
+		a.style.display="none";
+				
+		editAreaLoader.resize["start_top"]= calculeOffsetTop(div);
+		editAreaLoader.resize["start_left"]= calculeOffsetLeft(div);		
+	};
+	
+	EditAreaLoader.prototype.end_resize_area= function(e){
+		var d=document,div,a,width,height;
+		
+		d.onmouseup="";
+		d.onmousemove="";		
+		
+		div		= d.getElementById("edit_area_resize");		
+		a= editAreas[editAreaLoader.resize["id"]]["textarea"];
+		width	= Math.max(editAreas[editAreaLoader.resize["id"]]["settings"]["min_width"], div.offsetWidth-4);
+		height	= Math.max(editAreas[editAreaLoader.resize["id"]]["settings"]["min_height"], div.offsetHeight-4);
+		if(editAreaLoader.isIE==6){
+			width-=2;
+			height-=2;	
+		}
+		a.style.width		= width+"px";
+		a.style.height		= height+"px";
+		div.style.display	= "none";
+		a.style.display		= "inline";
+		a.selectionStart	= editAreaLoader.resize["selectionStart"];
+		a.selectionEnd		= editAreaLoader.resize["selectionEnd"];
+		editAreaLoader.toggle(editAreaLoader.resize["id"]);
+		
+		return false;
+	};
+	
+	EditAreaLoader.prototype.resize_area= function(e){		
+		var allow,newHeight,newWidth;
+		allow	= editAreas[editAreaLoader.resize["id"]]["settings"]["allow_resize"];
+		if(allow=="both" || allow=="y")
+		{
+			newHeight	= Math.max(20, getMouseY(e)- editAreaLoader.resize["start_top"]);
+			document.getElementById("edit_area_resize").style.height= newHeight+"px";
+		}
+		if(allow=="both" || allow=="x")
+		{
+			newWidth= Math.max(20, getMouseX(e)- editAreaLoader.resize["start_left"]);
+			document.getElementById("edit_area_resize").style.width= newWidth+"px";
+		}
+		
+		return false;
+	};
+	
+	editAreaLoader.waiting_loading["resize_area.js"]= "loaded";

data/vendor/assets/javascripts/search_replace.js

@@ -0,0 +1,174 @@
+	EditArea.prototype.show_search = function(){
+		if(_$("area_search_replace").style.visibility=="visible"){
+			this.hidden_search();
+		}else{
+			this.open_inline_popup("area_search_replace");
+			var text= this.area_get_selection();
+			var search= text.split("\n")[0];
+			_$("area_search").value= search;
+			_$("area_search").focus();
+		}
+	};
+	
+	EditArea.prototype.hidden_search= function(){
+		/*_$("area_search_replace").style.visibility="hidden";
+		this.textarea.focus();
+		var icon= _$("search");
+		setAttribute(icon, "class", getAttribute(icon, "class").replace(/ selected/g, "") );*/
+		this.close_inline_popup("area_search_replace");
+	};
+	
+	EditArea.prototype.area_search= function(mode){
+		
+		if(!mode)
+			mode="search";
+		_$("area_search_msg").innerHTML="";		
+		var search=_$("area_search").value;		
+		
+		this.textarea.focus();		
+		this.textarea.textareaFocused=true;
+		
+		var infos= this.get_selection_infos();	
+		var start= infos["selectionStart"];
+		var pos=-1;
+		var pos_begin=-1;
+		var length=search.length;
+		
+		if(_$("area_search_replace").style.visibility!="visible"){
+			this.show_search();
+			return;
+		}
+		if(search.length==0){
+			_$("area_search_msg").innerHTML=this.get_translation("search_field_empty");
+			return;
+		}
+		// advance to the next occurence if no text selected
+		if(mode!="replace" ){
+			if(_$("area_search_reg_exp").checked)
+				start++;
+			else
+				start+= search.length;
+		}
+		
+		//search
+		if(_$("area_search_reg_exp").checked){
+			// regexp search
+			var opt="m";
+			if(!_$("area_search_match_case").checked)
+				opt+="i";
+			var reg= new RegExp(search, opt);
+			pos= infos["full_text"].substr(start).search(reg);
+			pos_begin= infos["full_text"].search(reg);
+			if(pos!=-1){
+				pos+=start;
+				length=infos["full_text"].substr(start).match(reg)[0].length;
+			}else if(pos_begin!=-1){
+				length=infos["full_text"].match(reg)[0].length;
+			}
+		}else{
+			if(_$("area_search_match_case").checked){
+				pos= infos["full_text"].indexOf(search, start); 
+				pos_begin= infos["full_text"].indexOf(search); 
+			}else{
+				pos= infos["full_text"].toLowerCase().indexOf(search.toLowerCase(), start); 
+				pos_begin= infos["full_text"].toLowerCase().indexOf(search.toLowerCase()); 
+			}		
+		}
+		
+		// interpret result
+		if(pos==-1 && pos_begin==-1){
+			_$("area_search_msg").innerHTML="<strong>"+search+"</strong> "+this.get_translation("not_found");
+			return;
+		}else if(pos==-1 && pos_begin != -1){
+			begin= pos_begin;
+			_$("area_search_msg").innerHTML=this.get_translation("restart_search_at_begin");
+		}else
+			begin= pos;
+		
+		//_$("area_search_msg").innerHTML+="<strong>"+search+"</strong> found at "+begin+" strat at "+start+" pos "+pos+" curs"+ infos["indexOfCursor"]+".";
+		if(mode=="replace" && pos==infos["indexOfCursor"]){
+			var replace= _$("area_replace").value;
+			var new_text="";			
+			if(_$("area_search_reg_exp").checked){
+				var opt="m";
+				if(!_$("area_search_match_case").checked)
+					opt+="i";
+				var reg= new RegExp(search, opt);
+				new_text= infos["full_text"].substr(0, begin) + infos["full_text"].substr(start).replace(reg, replace);
+			}else{
+				new_text= infos["full_text"].substr(0, begin) + replace + infos["full_text"].substr(begin + length);
+			}
+			this.textarea.value=new_text;
+			this.area_select(begin, length);
+			this.area_search();
+		}else
+			this.area_select(begin, length);
+	};
+	
+	
+	
+	
+	EditArea.prototype.area_replace= function(){		
+		this.area_search("replace");
+	};
+	
+	EditArea.prototype.area_replace_all= function(){
+	/*	this.area_select(0, 0);
+		_$("area_search_msg").innerHTML="";
+		while(_$("area_search_msg").innerHTML==""){
+			this.area_replace();
+		}*/
+	
+		var base_text= this.textarea.value;
+		var search= _$("area_search").value;		
+		var replace= _$("area_replace").value;
+		if(search.length==0){
+			_$("area_search_msg").innerHTML=this.get_translation("search_field_empty");
+			return ;
+		}
+		
+		var new_text="";
+		var nb_change=0;
+		if(_$("area_search_reg_exp").checked){
+			// regExp
+			var opt="mg";
+			if(!_$("area_search_match_case").checked)
+				opt+="i";
+			var reg= new RegExp(search, opt);
+			nb_change= infos["full_text"].match(reg).length;
+			new_text= infos["full_text"].replace(reg, replace);
+			
+		}else{
+			
+			if(_$("area_search_match_case").checked){
+				var tmp_tab=base_text.split(search);
+				nb_change= tmp_tab.length -1 ;
+				new_text= tmp_tab.join(replace);
+			}else{
+				// case insensitive
+				var lower_value=base_text.toLowerCase();
+				var lower_search=search.toLowerCase();
+				
+				var start=0;
+				var pos= lower_value.indexOf(lower_search);				
+				while(pos!=-1){
+					nb_change++;
+					new_text+= this.textarea.value.substring(start , pos)+replace;
+					start=pos+ search.length;
+					pos= lower_value.indexOf(lower_search, pos+1);
+				}
+				new_text+= this.textarea.value.substring(start);				
+			}
+		}			
+		if(new_text==base_text){
+			_$("area_search_msg").innerHTML="<strong>"+search+"</strong> "+this.get_translation("not_found");
+		}else{
+			this.textarea.value= new_text;
+			_$("area_search_msg").innerHTML="<strong>"+nb_change+"</strong> "+this.get_translation("occurrence_replaced");
+			// firefox and opera doesn't manage with the focus if it's done directly
+			//editArea.textarea.focus();editArea.textarea.textareaFocused=true;
+			setTimeout("editArea.textarea.focus();editArea.textarea.textareaFocused=true;", 100);
+		}
+		
+		
+	};

data/vendor/assets/stylesheets/edit_area.css

@@ -0,0 +1,530 @@
+body, html{
+	margin: 0; 
+	padding: 0;
+	height: 100%;
+	border: none;
+	overflow: hidden;
+	background-color: #FFF;
+}
+
+body, html, table, form, textarea{
+	font: 12px monospace, sans-serif;
+}
+
+#editor{
+	border: solid #888 1px;
+	overflow: hidden;
+}
+
+#result{
+	z-index: 4; 
+	overflow-x: auto;
+	overflow-y: scroll;
+	border-top: solid #888 1px;
+	border-bottom: solid #888 1px;
+	position: relative;
+	clear: both;
+}
+
+#result.empty{
+	overflow: hidden;
+}
+
+#container{
+	overflow: hidden;
+	border: solid blue 0;
+	position: relative; 
+	z-index: 10;
+	padding: 0 5px 0 45px;
+	/*padding-right: 5px;*/ 
+}
+
+#textarea{
+	position: relative; 
+	top: 0; 
+	left: 0;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height: 100%; 
+	overflow: hidden;  
+	z-index: 7; 
+	border-width: 0;
+	background-color: transparent;
+	resize: none;
+}
+
+#textarea, #textarea:hover{
+	outline: none;	/* safari outline fix */
+}
+
+#content_highlight{
+	white-space: pre;
+	margin: 0;
+	padding: 0;
+	position : absolute; 
+	z-index: 4; 
+	overflow: visible;
+}
+
+
+#selection_field, #selection_field_text{
+	margin: 0; 
+	background-color: #E1F2F9; 
+/*	height: 1px; */  
+	position: absolute;
+	z-index: 5;
+	top: -100px;
+	padding: 0;
+	white-space: pre;
+	overflow: hidden;
+}
+
+#selection_field.show_colors {
+	z-index: 3;
+	background-color:#EDF9FC;
+	
+}
+
+#selection_field strong{
+	font-weight:normal;
+}
+
+#selection_field.show_colors *, #selection_field_text * {
+	visibility: hidden;
+}
+
+#selection_field_text{
+	background-color:transparent;
+}
+
+#selection_field_text strong{
+	font-weight:normal;
+	background-color:#3399FE;
+	color: #FFF;
+	visibility:visible;
+}
+
+#container.word_wrap #content_highlight,
+#container.word_wrap #selection_field,
+#container.word_wrap #selection_field_text,
+#container.word_wrap #test_font_size{
+	white-space: pre-wrap;       /* css-3 */
+	white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
+	white-space: -pre-wrap;      /* Opera 4-6 */
+	white-space: -o-pre-wrap;    /* Opera 7 */
+	word-wrap: break-word;       /* Internet Explorer 5.5+ */
+	width: 99%;
+}
+
+#line_number{
+	position: absolute;
+	overflow: hidden;
+	border-right: solid black 1px;
+	z-index:8;
+	width: 38px;
+	padding: 0 5px 0 0;
+	margin: 0 0 0 -45px;
+	text-align: right;
+	color: #AAAAAA;
+}
+
+#test_font_size{
+	padding: 0; 
+	margin: 0; 
+	visibility: hidden;
+	position: absolute;
+	white-space: pre;
+}
+
+pre{
+	margin: 0;
+	padding: 0;
+}
+
+.hidden{
+	opacity: 0.2; 
+	filter:alpha(opacity=20);
+}
+
+#result .edit_area_cursor{
+	position: absolute; 
+	z-index:6; 
+	background-color: #FF6633;
+	top: -100px;
+	margin: 0;
+}
+
+#result .edit_area_selection_field .overline{
+	background-color: #996600;
+}
+
+
+/* area popup */
+.editarea_popup{
+	border: solid 1px #888888;
+	background-color: #ECE9D8; 
+	width: 250px; 
+	padding: 4px; 
+	position: absolute;
+	visibility: hidden; 
+	z-index: 15;
+	top: -500px;
+}
+
+.editarea_popup, .editarea_popup table{
+	font-family: sans-serif;
+	font-size: 10pt;
+}
+
+.editarea_popup img{
+	border: 0;
+}
+
+.editarea_popup .close_popup{
+	float: right; 
+	line-height: 16px; 
+	border: 0; 
+	padding: 0;
+}
+
+.editarea_popup h1,.editarea_popup h2,.editarea_popup h3,.editarea_popup h4,.editarea_popup h5,.editarea_popup h6{
+	margin: 0;
+	padding: 0;
+}
+
+.editarea_popup .copyright{
+	text-align: right;
+}	
+
+/* Area_search */
+div#area_search_replace{
+	/*width: 250px;*/
+}
+
+div#area_search_replace img{
+	border: 0;
+}
+
+div#area_search_replace div.button{
+	text-align: center;
+	line-height: 1.7em;
+}
+
+div#area_search_replace .button a{
+	cursor: pointer;
+	border: solid 1px #888888;
+	background-color: #DEDEDE;
+	text-decoration: none;
+	padding: 0 2px;
+	color: #000000;	
+	white-space: nowrap;
+}
+
+div#area_search_replace a:hover{	
+	/*border: solid 1px #888888;*/
+	background-color: #EDEDED;
+}
+
+div#area_search_replace  #move_area_search_replace{
+	cursor: move; 
+	border: solid 1px #888;
+}
+
+div#area_search_replace  #close_area_search_replace{
+	text-align: right; 
+	vertical-align: top; 
+	white-space: nowrap;
+}
+
+div#area_search_replace  #area_search_msg{
+	height: 18px; 
+	overflow: hidden; 
+	border-top: solid 1px #888; 
+	margin-top: 3px;
+}
+
+/* area help */
+#edit_area_help{
+	width: 350px;
+}
+
+#edit_area_help div.close_popup{
+	float: right;
+}
+
+/* area_toolbar */
+.area_toolbar{
+	/*font: 11px sans-serif;*/
+	width: 100%; 
+	/*height: 21px; */
+	margin: 0; 
+	padding: 0;
+	background-color: #ECE9D8;
+	text-align: center;
+}
+
+.area_toolbar, .area_toolbar table{
+	font: 11px sans-serif;
+}
+
+.area_toolbar img{
+	border: 0;
+	vertical-align: middle;
+}
+
+.area_toolbar input{
+	margin: 0;
+	padding: 0;
+}
+
+.area_toolbar select{
+    font-family: 'MS Sans Serif',sans-serif,Verdana,Arial;
+    font-size: 7pt;
+    font-weight: normal;
+    margin: 2px 0 0 0 ;
+    padding: 0;
+    vertical-align: top;
+    background-color: #F0F0EE;
+}
+
+table.statusbar{
+	width: 100%;
+}
+
+.area_toolbar td.infos{
+	text-align: center;
+	width: 130px;
+	border-right: solid 1px #888;
+	border-width: 0 1px 0 0;
+	padding: 0;
+}
+
+.area_toolbar td.total{
+	text-align: right;
+	width: 50px;
+	padding: 0;
+}
+
+.area_toolbar td.resize{
+	text-align: right;
+}
+/*
+.area_toolbar span{
+	line-height: 1px;
+	padding: 0;
+	margin: 0;
+}*/
+
+.area_toolbar span#resize_area{
+	cursor: nw-resize;
+	visibility: hidden;
+}
+
+/* toolbar buttons */
+.editAreaButtonNormal, .editAreaButtonOver, .editAreaButtonDown, .editAreaSeparator, .editAreaSeparatorLine, .editAreaButtonDisabled, .editAreaButtonSelected {
+	border: 0; margin: 0; padding: 0; background: transparent;
+	margin-top: 0;
+	margin-left: 1px;
+	padding: 0;
+}
+
+.editAreaButtonNormal {
+	border: 1px solid #ECE9D8 !important;
+	cursor: pointer;
+}
+
+.editAreaButtonOver {
+	border: 1px solid #0A246A !important;
+	cursor: pointer;
+	background-color: #B6BDD2;
+}
+
+.editAreaButtonDown {
+	cursor: pointer;
+	border: 1px solid #0A246A !important;
+	background-color: #8592B5;
+}
+
+.editAreaButtonSelected {
+	border: 1px solid #C0C0BB !important;
+	cursor: pointer;
+	background-color: #F4F2E8;
+}
+
+.editAreaButtonDisabled {
+	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
+	-moz-opacity:0.3;
+	opacity: 0.3;
+	border: 1px solid #F0F0EE !important;
+	cursor: pointer;
+}
+
+.editAreaSeparatorLine {
+	margin: 1px 2px;
+	background-color: #C0C0BB;
+	width: 2px;
+	height: 18px;
+}
+
+/* waiting screen */
+#processing{
+	display: none; 
+	background-color:#ECE9D8; 
+	border: solid #888 1px;
+	position: absolute; 
+	top: 0; 
+	left: 0;
+	width: 100%; 
+	height: 100%; 
+	z-index: 100; 
+	text-align: center;
+}
+
+#processing_text{
+	position:absolute;
+	left: 50%;
+	top: 50%;
+	width: 200px;
+	height: 20px; 
+	margin-left: -100px;
+	margin-top: -10px;
+	text-align: center;
+}
+/* end */
+
+
+/**** tab browsing area ****/
+#tab_browsing_area{
+	display: none;
+	background-color: #CCC9A8;
+	border-top: 1px solid #888;
+	text-align: left;
+	margin: 0;
+}
+
+#tab_browsing_list {
+	padding: 0; 
+	margin: 0; 
+	list-style-type: none;
+	white-space: nowrap;
+}
+#tab_browsing_list li {
+	float: left;
+	margin: -1px;
+}
+#tab_browsing_list a {
+	position: relative;
+	display: block; 
+	text-decoration: none; 
+	float: left; 
+	cursor: pointer;
+	line-height:14px;
+}
+
+#tab_browsing_list a span {
+	display: block; 
+	color: #000; 
+	background: #ECE9D8; 
+	border:	1px solid #888; 
+	border-width: 1px 1px 0; 
+	text-align: center; 
+	padding: 2px 2px 1px 4px; 
+	position: relative;	/*IE 6 hack */
+}
+
+#tab_browsing_list a b {
+	display: block; 
+	border-bottom: 2px solid #617994;
+}
+
+#tab_browsing_list a .edited {
+	display: none;
+}
+
+#tab_browsing_list a.edited .edited {
+	display: inline;
+}
+
+#tab_browsing_list a img{
+	margin-left: 7px;
+}
+
+#tab_browsing_list a.edited img{
+	margin-left: 3px;
+}
+
+#tab_browsing_list a:hover span {
+	background: #F4F2E8;
+	border-color: #0A246A;
+}
+
+#tab_browsing_list .selected a span{
+	background: #046380;
+	color: #FFF;
+}
+
+
+#no_file_selected{
+	height: 100%;
+	width: 150%; /* Opera need more than 100% */
+	background: #CCC;
+	display: none;
+	z-index: 20;
+	position: absolute;
+}
+
+
+/*** Non-editable mode ***/
+.non_editable #editor
+{
+	border-width: 0 1px;
+}
+
+.non_editable .area_toolbar
+{
+	display: none;
+}
+
+/*** Auto completion ***/
+#auto_completion_area
+{
+	background:	#FFF;
+	border:		solid 1px #888;
+	position:	absolute;
+	z-index:	15;
+	width:	280px;
+	height:	180px;
+	overflow: auto;
+	display:none;
+}
+
+#auto_completion_area a, #auto_completion_area a:visited
+{
+	display:	block;
+	padding:	0 2px 1px;
+	color:		#000;
+	text-decoration:none;
+}
+
+#auto_completion_area a:hover, #auto_completion_area a:focus, #auto_completion_area a.focus
+{
+	background:	#D6E1FE;
+	text-decoration:none;
+}
+
+#auto_completion_area ul
+{
+	margin:	0;
+	padding: 0;
+	list-style: none inside;
+}
+#auto_completion_area li
+{
+	padding:	0;
+}
+#auto_completion_area .prefix
+{
+	font-style: italic;
+	padding: 0 3px;
+}