Index: lams_tool_laqa/web/BasicContent.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_laqa/web/Attic/BasicContent.jsp,v
diff -u -r1.12 -r1.13
--- lams_tool_laqa/web/BasicContent.jsp	5 Jan 2006 04:36:32 -0000	1.12
+++ lams_tool_laqa/web/BasicContent.jsp	27 Jan 2006 06:07:08 -0000	1.13
@@ -11,43 +11,58 @@
 			<tr> <td>
 					<table align=center> 
 						<tr> 
-					 		<td> <bean:message key="label.authoring.title"/>: </td>
-					 		<td NOWRAP width=700> <!-- Dave,I found width was necessary to present all the elements of the editor, feel free to change -->
-							<FCK:editor id="title" basePath="/lams/fckeditor/"
-							      height="200"
-								  width="100%">
-								  <c:out value="${QaAuthoringForm.title}" escapeXml="false" />						  
-							</FCK:editor>
+					 		<td valign="top"> <bean:message key="label.authoring.title"/>: </td>
+					 		<td NOWRAP width=700> <!-- Dave,I found width was necessary to present all the elements of the editor, feel free to change -->                            
+                                <span id="previewTitle" style="visibility: hidden; display: none;">
+                                    <div>
+                                        <a href="#" onClick="doWYSWYGEdit('Title')">Open Richtext Editor</a>
+                                    </div>
+                                    <div class="previewPanel" id="previewTitle.text"></div>
+                                </span>
+                                <span id="txTitle">
+                                    <div>
+                                        <a href="#" onClick="doWYSWYGEdit('Title')">Open Richtext Editor</a>
+                                    </div>
+                                    <textarea class="textareaPanel" name="title" id="txTitle.textarea"><c:out value="${QaAuthoringForm.title}" escapeXml="false" /></textarea>
+                                </span>
 							</td> 
 					  	</tr>
 					  	<tr> 
-					 		<td> <bean:message key="label.authoring.instructions"/>: </td>
+					 		<td valign="top"> <bean:message key="label.authoring.instructions"/>: </td>
 					 		<td NOWRAP width=700> <!-- Dave,I found width was necessary to present all the elements of the editor, feel free to change -->
-							<FCK:editor id="instructions" basePath="/lams/fckeditor/"
-							      height="200"
-								  width="100%">
-								  <c:out value="${QaAuthoringForm.instructions}" escapeXml="false" />						  
-							</FCK:editor>
+                                <span id="previewInstructions" style="visibility: hidden; display: none;">
+                                    <div>
+                                        <a href="#" onClick="doWYSWYGEdit('Instructions')">Open Richtext Editor</a>
+                                    </div>
+                                    <div class="previewPanel" id="previewInstructions.text"></div>
+                                </span>
+                                <span id="txInstructions">
+                                    <div>
+                                        <a href="javascript:doWYSWYGEdit('Instructions')">Open Richtext Editor</a>
+                                    </div>
+                                    <textarea class="textareaPanel" name="instructions" id="txInstructions.textarea"><c:out value="${QaAuthoringForm.instructions}" escapeXml="false" /></textarea>
+                                </span>
 							</td>
 						</tr>
 				
 			 		<!--default question content, this entry can not be deleted but can be updated -->
 				 		<tr> 
-						  	<td> 
+						  	<td valign="top"> 
 						 		<bean:message key="label.question1"/> : 
 						 	</td>
 						  	<td>
-								  	<input type="text" name="questionContent0" size="50" 
-								  	maxlength="255" value="<c:out value="${sessionScope.defaultQuestionContent}"/>"> 
-								  	&nbsp
-									<html:submit property="addContent" 
-                                                 styleClass="linkbutton" 
-                                                 disabled="${sessionScope.isDefineLater}"
-                                                 onmouseover="pviiClassNew(this,'linkbutton')" 
-                                                 onmouseout="pviiClassNew(this,'linkbutton')"
-                                                 onclick="submitMethod('addNewQuestion');">
-									<bean:message key="button.addNewQuestion"/>
-									</html:submit>
+                                <span id="previewQuestion0" style="visibility: hidden; display: none;">
+                                    <div>
+                                        <a href="#" onClick="doWYSWYGEdit('Question0')">Open Richtext Editor</a>
+                                    </div>
+                                    <div class="previewPanel" id="previewQuestion0.text"></div>
+                                </span>
+                                <span id="txQuestion0">
+                                    <div>
+                                        <a href="javascript:doWYSWYGEdit('Question0')">Open Richtext Editor</a>
+                                    </div>
+                                    <textarea class="textareaPanel" name="questionContent0" id="txQuestion0.textarea"><c:out value="${sessionScope.defaultQuestionContent}"/></textarea>
+                                </span>
 						  	</td>
 					  	</tr>
 		
@@ -59,10 +74,22 @@
 					  		<c:if test="${questionEntry.key > 1}"> 			
 								<c:set var="queIndex" scope="session" value="${queIndex +1}"/>
 								  <tr>
-								  	<td> <c:out value="Question ${queIndex}"/> : </td>
-								  		<td> <input type="text" name="questionContent<c:out value="${queIndex-1}"/>" value="<c:out value="${questionEntry.value}"/>"   
-									  		size="50" maxlength="255"> 
-									  	&nbsp
+								  	<td valign="top"> <c:out value="Question ${queIndex}"/> : </td>
+								  	<td>
+  
+                                        <span id="preview<c:out value="Question${queIndex-1}"/>" style="visibility: hidden; display: none;">
+                                            <div>
+                                                <a href="#" onClick="doWYSWYGEdit('<c:out value="Question${queIndex-1}"/>')">Open Richtext Editor</a>
+                                            </div>
+                                            <div class="previewPanel" id="preview<c:out value="Question${queIndex-1}"/>.text"></div>
+                                        </span>
+                                        <span id="tx<c:out value="Question${queIndex-1}"/>">
+                                            <div>
+                                                <a href="javascript:doWYSWYGEdit('<c:out value="Question${queIndex-1}"/>')">Open Richtext Editor</a>
+                                            </div>
+                                            <textarea class="textareaPanel" name="<c:out value="questionContent${queIndex-1}"/>" id="tx<c:out value="Question${queIndex-1}"/>.textarea"><c:out value="${questionEntry.value}"/></textarea>
+                                        </span>
+                                
 		 		 						<html:submit property="removeContent" 
                                                      styleClass="linkbutton"  
                                                      onclick="removeQuestion(${queIndex});"
@@ -71,13 +98,26 @@
                                                      onmouseout="pviiClassNew(this,'linkbutton')">
 											<bean:message key="button.removeQuestion"/>
 										</html:submit>
-									  	</td>
+                                    </td>
 								  </tr>
 							</c:if> 			
 						</c:forEach>
 						<html:hidden property="toolContentId" value="${QaAuthoringForm.toolContentId}"/>
 						<html:hidden property="questionIndex"/>
-
+                        
+                        <tr>
+                            <td></td>
+                            <td align="right">
+                                <html:submit property="addContent" 
+                                             styleClass="linkbutton" 
+                                             disabled="${sessionScope.isDefineLater}"
+                                             onmouseover="pviiClassNew(this,'linkbutton')" 
+                                             onmouseout="pviiClassNew(this,'linkbutton')"
+                                             onclick="submitMethod('addNewQuestion');">
+                                    <bean:message key="button.addNewQuestion"/>
+                                </html:submit>
+                            </td>
+                        </tr>
 					
 					</table>
 			</td></tr>			
Index: lams_tool_laqa/web/InstructionsContent.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_laqa/web/Attic/InstructionsContent.jsp,v
diff -u -r1.12 -r1.13
--- lams_tool_laqa/web/InstructionsContent.jsp	15 Dec 2005 08:02:52 -0000	1.12
+++ lams_tool_laqa/web/InstructionsContent.jsp	27 Jan 2006 06:07:08 -0000	1.13
@@ -15,13 +15,19 @@
           				<fmt:message key="label.offlineInstructions" />:
           			</td>
 					<td NOWRAP width=700> <!-- Dave,I found width was necessary to present all the elements of the editor, feel free to change -->
-					<FCK:editor id="offlineInstructions" basePath="/lams/fckeditor/"
-					      height="200"
-						  width="100%">
-						  <c:out value="${QaAuthoringForm.offlineInstructions}" escapeXml="false" />						  
-					</FCK:editor>
+                        <span id="previewOfflineInstructions" style="visibility: hidden; display: none;">
+                            <div>
+                                <a href="#" onClick="doWYSWYGEdit('OfflineInstructions')">Open Richtext Editor</a>
+                            </div>
+                            <div class="previewPanel" id="previewOfflineInstructions.text"></div>
+                        </span>
+                        <span id="txOfflineInstructions">
+                            <div>
+                                <a href="javascript:doWYSWYGEdit('OfflineInstructions')">Open Richtext Editor</a>
+                            </div>
+                            <textarea class="textareaPanel" name="offlineInstructions" id="txOfflineInstructions.textarea"><c:out value="${QaAuthoringForm.offlineInstructions}" escapeXml="false" /></textarea>
+                        </span>
 					</td> 
-					
 				</tr>
 
 				<tr> 
@@ -53,11 +59,18 @@
           				<fmt:message key="label.onlineInstructions" />
           			</td>
 					<td NOWRAP width=700> <!-- Dave,I found width was necessary to present all the elements of the editor, feel free to change -->
-					<FCK:editor id="onlineInstructions" basePath="/lams/fckeditor/"
-					      height="200"
-						  width="100%">
-  						  <c:out value="${QaAuthoringForm.onlineInstructions}" escapeXml="false" />						  
-					</FCK:editor>
+                        <span id="previewOnlineInstructions" style="visibility: hidden; display: none;">
+                            <div>
+                                <a href="#" onClick="doWYSWYGEdit('OnlineInstructions')">Open Richtext Editor</a>
+                            </div>
+                            <div class="previewPanel" id="previewOnlineInstructions.text"></div>
+                        </span>
+                        <span id="txOnlineInstructions">
+                            <div>
+                                <a href="javascript:doWYSWYGEdit('OnlineInstructions')">Open Richtext Editor</a>
+                            </div>
+                            <textarea class="textareaPanel" name="onlineInstructions" id="txOnlineInstructions.textarea"><c:out value="${QaAuthoringForm.onlineInstructions}" escapeXml="false" /></textarea>
+                        </span>
 					</td> 
 				</tr>
 				
@@ -94,7 +107,7 @@
 
 <logic:present name="attachmentList">
 <bean:size id="count" name="attachmentList" />
-<c:out value="${count}"/>
+
 <logic:notEqual name="count" value="0">
 
 	<h2><fmt:message key="label.attachments" /></h2>
Index: lams_tool_laqa/web/author_page.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_laqa/web/Attic/author_page.jsp,v
diff -u -r1.2 -r1.3
--- lams_tool_laqa/web/author_page.jsp	15 Dec 2005 08:02:52 -0000	1.2
+++ lams_tool_laqa/web/author_page.jsp	27 Jan 2006 06:07:07 -0000	1.3
@@ -17,17 +17,21 @@
 
 %>
 
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
+<!DOCTYPE html
+PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+
 <html:html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Tool</title>
-<script type="text/javascript" src="<%=root%>author_page/js/tabcontroller.js"></script>
+<script type="text/javascript" src="author_page/js/tabcontroller.js"></script>
 <script src="<%=pathToLams%>/includes/javascript/common.js"></script>
 <!-- this is the custom CSS for hte tool -->
 <link href="<%=root%>author_page/css/tool_custom.css" rel="stylesheet" type="text/css">
 <!-- depending on user / site preference this will get changed probbably use passed in variable from flash to select which one to use-->
-<link href="<%=root%>author_page/css/aqua.css" rel="stylesheet" type="text/css">
+<link href="author_page/css/aqua.css" rel="stylesheet" type="text/css">
 <script language="JavaScript" type="text/JavaScript">
 <!--
 function MM_reloadPage(init) {  //reloads the window if Nav4 resized
@@ -36,11 +40,8 @@
   else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
 }
 MM_reloadPage(true);
-//-->
-</script>
-<script language="JavaScript" type="text/JavaScript">
-<!--
 
+
 // The following method submit and the submit methods in the included jsp files submit the 
 // form as required for the DispatchAction. All form submissions must go via these scripts - do not
 // define an submit button with "dispatch" as the property or 
@@ -52,110 +53,129 @@
 	document.QaAuthoringForm.dispatch.value=actionMethod; 
 	document.QaAuthoringForm.submit();
 }
+
+function pviiClassNew(obj, new_style) { //v2.7 by PVII
+    obj.className=new_style;
+}
 //-->
 </script>
-<script language="JavaScript" type="text/JavaScript">   
-    <!--
-    function pviiClassNew(obj, new_style) { //v2.7 by PVII
-        obj.className=new_style;
-    }
-    //-->
-</script>
 
+
+    <!-- ******************** FCK Editor related javascript & HTML ********************** -->
+    <script type="text/javascript" src="/lams/fckeditor/fckeditor.js"></script>
+    <script type="text/javascript" src="author_page/js/fckcontroller.js"></script>
+    <link href="author_page/css/fckeditor_style.css" rel="stylesheet" type="text/css">
+
+    <script>
+        function init(){
+            initTabSize(3);
+            
+            //using the URL anchor (the part after # in the URL) as tabId
+            var myregexp = new RegExp(/#[a-zA-Z0-9]+/);
+            var tabId = myregexp.exec(document.URL);
+            if(tabId != null){
+                tabId = tabId[0].replace("#tab", "");
+                selectTab(tabId);
+            }
+            else{
+                selectTab(1); //select the default tab;
+            }
+                        
+            
+            //showElementById("tx1");
+            //showElementById("tx2");
+            //showElementById("tx3");
+    
+            //hideElementById("preview1");
+            //hideElementById("preview2");
+            //hideElementById("preview3");
+        }        
+    </script>
+
+    <!-- ******************** END FCK Editor related javascript & HTML ********************** -->
+
+
 </head>
-<body onLoad="initTabs()">
+<body onLoad="init()" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
+   
+
 <html:form action="/authoring" target="_self" enctype="multipart/form-data">
+
 <input type="hidden" name="dispatch" value=""/>
 <h1>Question & Answers</h1>
+  
     
     <!-- start tabs -->
-<!-- tab holder table -->
-<table border="0" cellspacing="0" cellpadding="0">
-  <tr>
-    <td valign="bottom">
-	<!-- table for tab 1 (basic)-->
-	<table border="0" cellspacing="0" cellpadding="0">
-	  <tr>
-		<td><a href="#"  onClick="showTab('b');return false;" ><img src="author_page/images/aqua_tab_s_left.gif" name="tab_left_b" width="8" height="25" border="0" id="tab_left_b"/></a></td>
-		<td class="tab tabcentre_selected" width="90" id="tab_tbl_centre_b"  onClick="showTab('b');return false;" ><label for="b" accesskey="b"><a href="#" onClick="showTab('b');return false;" id="b" >Basic</a></label></td>
-		<td><a href="#" onClick="showTab('b');return false;"><img src="author_page/images/aqua_tab_s_right.gif"  name="tab_right_b" width="8" height="25" border="0" id="tab_right_b"/></a></td>
-	  </tr>
-	</table>
-
-</td>
-    <td valign="bottom">
-	<!-- table for tab 2 (advanced) -->
-	<table border="0" cellspacing="0" cellpadding="0">
-	  <tr>
-		<td><a href="#" onClick="showTab('a');return false;"><img src="author_page/images/aqua_tab_left.gif" name="tab_left_a" width="8" height="22" border="0" id="tab_left_a" /></a></td>
-		<td class="tab tabcentre" width="90" id="tab_tbl_centre_a" onClick="showTab('a');return false;"><label for="a" accesskey="a"><a href="#" onClick="showTab('a');return false;" id="a" >Advanced</a></label></td>
-		<td><a href="#" onClick="showTab('a');return false;"><img src="author_page/images/aqua_tab_right.gif" name="tab_right_a" width="9" height="22" border="0" id="tab_right_a" /></a></td>
-	  </tr>
-	</table>
-
-</td>
-    <td valign="bottom">
-	<!-- table for ab 3 (instructions) -->
-	<table border="0" cellspacing="0" cellpadding="0">
-	  <tr>
-		<td ><a href="#" onClick="showTab('i');return false;"><img border="0" src="author_page/images/aqua_tab_left.gif" width="8" height="22" id="tab_left_i"   name="tab_left_i" /></a></td>
-		<td class="tab tabcentre" width="90" id="tab_tbl_centre_i"  onClick="showTab('i');return false;" ><label for="i" accesskey="i"><a href="#" onClick="showTab('i');return false;" id="i" >Instructions</a></label></td>
-		<td ><a href="#" onClick="showTab('i');return false;"><img src="author_page/images/aqua_tab_right.gif"  width="9" height="22" border="0" id="tab_right_i"  name="tab_right_i"/></a></td>
-	  </tr>
-	</table>
-
-</td>
-  </tr>
-</table>
+    <div class="tabmenu">
+        <ul>
+            <li id="tab1" class="tabitem"><div class="tableft"><div class="tabright"><a href="javascript:selectTab(1);">Basic</a> <!-- IE CSS Bug, If you remove the space infront this comment then height of the Tab will change in IE - Anthony --></div></div></li>
+            <li id="tab2" class="tabitem"><div class="tableft"><div class="tabright"><a href="javascript:selectTab(2);">Advanced</a> </div></div></li>
+            <li id="tab3" class="tabitem"><div class="tableft"><div class="tabright"><a href="javascript:selectTab(3);">Instructions</a> </div></div></li>
+        </ul>
+    </div>  
     <!-- end tab buttons -->
     
-    
-    
-    
+        
 
     <!-- tab content one (basic)-->
-<div id='content_b' class="tabbody content_b" >
-<h2>Basic tab content</h2>
-<div id="formtablecontainer">
-<jsp:include page="BasicContent.jsp" />
-</div>
-<hr>
-<a href="javascript:window.close()" class="button">Cancel</a>
-<a href="javascript:submitMethod('submitAllContent')" class="button">Save</a>
+    <div class="tabbody" id="tabbody1">
+        <h2>Basic tab content</h2>
+        <div id="formtablecontainer">
+            <jsp:include page="BasicContent.jsp" />
+        </div>
+    
+        <hr>
+        <a href="javascript:window.close()" class="button">Cancel</a>
+        <a href="javascript:submitMethod('submitAllContent')" class="button">Save</a>
+    </div>
+    <!-- end of content_b -->
 
 
-<!-- end of content_b -->
-</div>
+    <!-- tab content 2 Advanced-->
+    <div class="tabbody" id="tabbody2">
+        <h2>Advanced tab content</h2>
+        <div id="formtablecontainer">
+        <!-- jsp :include page="AdvancedContent.jsp" / -->
+        </div>
+        <a href="javascript:window.close()" class="button">Cancel</a>
+        <a href="javascript:submitMethod('submitAllContent')" class="button">Save</a>
+    </div>
+    <!-- end of content_b -->
 
+    <!-- tab content 3 instructions -->
+    <div class="tabbody" id="tabbody3">
+        <h2>Instructions tab content </h2>
+        <div id="formtablecontainer">
+            <jsp:include page="InstructionsContent.jsp" />
+        </div>
+        <hr>
+        <a href="javascript:window.close()" class="button">Cancel</a>
+        <a href="javascript:submitMethod('submitAllContent')" class="button">Save</a>
+    </div>
+    <!-- end of content_a -->
 
+    <div id="wyswygEditorScreen" style="visibility: hidden"> <!-- position: absolute; z-index: 1000; top: 16px; left: 230px; -->
+        <div id="wyswygEditor">
+            <div>
+                <FCK:editor id="FCKeditor1" basePath="/lams/fckeditor/"
+                    imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
+                    linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
+                    flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
+                    imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
+                    linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
+                    flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
+                    
+                </FCK:editor>  
+            </div>
+            <div style="text-align: center">
+                <a href="#" onClick="saveWYSWYGEdittedText(activeEditorIndex); doPreview(activeEditorIndex)">Save</a>
+                <a href="#" onClick="doPreview(activeEditorIndex)">Cancel</a>
+            </div>
+        </div>
+    </div>
 
-<!-- tab content 2 Advanced-->
-<div id='content_a'  class="tabbody content_a">
-<h2>Advanced tab content</h2>
-<div id="formtablecontainer">
-  <jsp:include page="AdvancedContent.jsp" />
-</div>
-<a href="javascript:window.close()" class="button">Cancel</a>
-<a href="javascript:submitMethod('submitAllContent')" class="button">Save</a>
-
-<!-- end of content_b -->
-</div>
-
-<!-- tab content 3 instructions -->
-<div id='content_i'  class="tabbody content_i">
-<h2>Instructions tab content </h2>
-<div id="formtablecontainer">
-<jsp:include page="InstructionsContent.jsp" />
-</div>
-	<hr>
-<a href="javascript:window.close()" class="button">Cancel</a>
-<a href="javascript:submitMethod('submitAllContent')" class="button">Save</a>
-
-
-<!-- end of content_a -->
-</div>
-
 </html:form>
+
 </body>
 
 </html:html>
\ No newline at end of file
Index: lams_tool_laqa/web/author_page/css/aqua.css
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_laqa/web/author_page/css/Attic/aqua.css,v
diff -u -r1.1 -r1.2
--- lams_tool_laqa/web/author_page/css/aqua.css	30 Sep 2005 05:51:40 -0000	1.1
+++ lams_tool_laqa/web/author_page/css/aqua.css	27 Jan 2006 06:07:07 -0000	1.2
@@ -3,7 +3,7 @@
 body {
 	font-family: Verdana, Arial, Helvetica, sans-serif;
 	background-color: #A2BCF9;
-	font-size: small;
+	
 }
 
 h1 {
@@ -71,42 +71,62 @@
 	text-align: left;
 }
 
-/*tab styles*/
-.tab{
-	text-align:center;
+/********* tab styles **********/
+/** Tab layout **/
+.tabmenu ul{
+	list-style: none;
+	padding: 0px;
+	margin: 0px;
 }
 
-.tab a{
-	font-size: 11px;
-	color: #000000;
-	text-decoration:none;
+.tabmenu li{
+	float: left;
+	margin: 0px 0px;
+	padding: 0px;
+	text-align: center
 }
-.tab a:hover{
-	font-size: 11px;
-	color: #000000;
-	text-decoration:underline
+
+/** Non Selected tab style **/
+.tabitem .tableft{
+	background: url(../images/aqua_tab_left.gif) no-repeat top left;
 }
-.tabcentre{
-	background-image:url(../images/aqua_tab_centre.gif);
-	background-repeat:repeat-x;
+.tabitem .tabright{
+	background: url(../images/aqua_tab_right.gif) no-repeat top right;
 }
+.tabitem a, .tabitem a:hover, .tabitem a:active, .tabitem a:visited{
+    background: url(../images/aqua_tab_centre.gif) 0 0 repeat-x;
+    margin:0px 8px;
+    font-size: 11px;
+    padding: 4px 10px 1px 10px;
+    color: #000000;
+    text-decoration:none;
+}
 
-
-.tabcentre_selected{
-	background-image:url(../images/aqua_tab_s_centre.gif);
-	background-repeat:repeat-x;
+/** Selected tab style **/
+.tabitem_selected .tableft{
+	background: url(../images/aqua_tab_s_left.gif) no-repeat top left;
 }
+.tabitem_selected .tabright{
+	background: url(../images/aqua_tab_s_right.gif) no-repeat top right;
+}
+.tabitem_selected a, .tabitem_selected a:hover, .tabitem_selected a:active, .tabitem_selected a:visited{
+    background: url(../images/aqua_tab_s_centre.gif) 0 0 repeat-x;
+    margin:0px 8px;
+    font-size: 11px;
+    padding: 4px 10px 1px 10px;
+    color: #000000;
+    text-decoration:none;
+}
 
 
-
 /*Tab content containers*/
 .tabbody{
-
+	width: 98%;
 	
 	background-color : #D9E8FF;
 	float:left;
 
-	margin : 0;
+	margin : 0px 0px 0px 0px;
 	border-right-width: 1px;
 	border-left-width: 1px;
 	border-right-style: solid;
@@ -119,85 +139,4 @@
 	border-bottom-color: #0D3F59;
 	padding:5px;	
 
-}
-
-
-/*specific styles for the content divs of the tabs*/
-.content_b{
-	z-index: 0;
-	position:relative;
-	visibility:visible;
-}
-.content_a{
-	z-index: 0;
-	position:absolute;
-	visibility: hidden;
-}
-.content_i{
-	z-index: 0;
-	position:absolute;
-	visibility: hidden;
-}
-/*end tabs*/
-
-a.button{
-	float:right;
-	font-size: 12px;
-	color: #000000;
-	text-decoration:none;
-	text-align: center;
-	background-color:#B4C8FE;
-	margin: 2px 5px 2px 5px;
-	padding:3px;
-  	width: 80px;
-	border-top-width: 1px;
-	border-right-width: 1px;
-	border-bottom-width: 1px;
-	border-left-width: 1px;
-	border-top-style: solid;
-	border-right-style: solid;
-	border-bottom-style: solid;
-	border-left-style: solid;
-	border-top-color: #FFFFFF;
-	border-right-color: #0D3F59;
-	border-bottom-color: #0D3F59;
-	border-left-color: #FFFFFF;
-}
-
-
-
-a.button:link{
-		color: #000000;
-		text-decoration:none;
-		background-color:#B4C8FE;
-}
-
-a.button:visited{
-		color: #000000;
-		text-decoration:none;
-		background-color:#B4C8FE;
-}
-
-
-
-a.button:hover{
-		text-decoration:none;
-		background-color:#FFFFFF;	
-}
-
-a.button:active{
-		text-decoration:none;
-		background-color:#CCCCCC;	
-		border-top-width: 1px;
-		border-right-width: 1px;
-		border-bottom-width: 1px;
-		border-left-width: 1px;
-		border-top-style: solid;
-		border-right-style: solid;
-		border-bottom-style: solid;
-		border-left-style: solid;
-		border-bottom-color: #FFFFFF;
-		border-left-color: #0D3F59;
-		border-top-color: #0D3F59;
-		border-right-color: #FFFFFF;
-}
+}
\ No newline at end of file
Index: lams_tool_laqa/web/author_page/css/fckeditor_style.css
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_laqa/web/author_page/css/Attic/fckeditor_style.css,v
diff -u
--- /dev/null	1 Jan 1970 00:00:00 -0000
+++ lams_tool_laqa/web/author_page/css/fckeditor_style.css	27 Jan 2006 06:07:07 -0000	1.1
@@ -0,0 +1,38 @@
+.previewPanel{
+	width: 700px; 
+	height: 220px; 
+	border-style: none;
+	border-width: 1px;
+	padding: 5px;
+}
+
+.textareaPanel{
+	width: 700px; 
+	height: 220px; 
+}
+
+#wyswygEditor{
+	/*position the wyswygEditor in the centre*/
+	position: absolute; 
+	/*top: 15%; 
+	left: 50%;
+	margin-left: -400px;
+	margin-top: -260px;*/
+	
+	width: 100%;
+	height: 100%;
+	
+	
+	/*border-style: solid; 
+	border-width: 3px;*/
+}
+
+#wyswygEditorScreen{
+	position: absolute;
+
+	width: 700px; 
+	height: 220px; 
+
+	padding: 0px;
+	margin: 0px;
+}
\ No newline at end of file
Index: lams_tool_laqa/web/author_page/js/fckcontroller.js
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_laqa/web/author_page/js/Attic/fckcontroller.js,v
diff -u
--- /dev/null	1 Jan 1970 00:00:00 -0000
+++ lams_tool_laqa/web/author_page/js/fckcontroller.js	27 Jan 2006 06:07:07 -0000	1.1
@@ -0,0 +1,155 @@
+var activeEditorIndex = 0;
+var commentFlag = "<!-- HTML -->";
+var commentFlagLength = 13;
+var oFCKeditor;
+
+
+// FCKeditor_OnComplete is a special function that is called when an editor
+// instance is loaded ad available to the API. It must be named exactly in
+// this way.
+function FCKeditor_OnComplete( editorInstance )
+{
+    //hideElementById("wyswygEditorScreen");
+}
+
+
+function SetContents(content)
+{
+	// Get the editor instance that we want to interact with.
+	var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
+
+	// Set the editor contents (replace the actual one).
+	oEditor.SetHTML(content) ;
+}
+
+
+function doWYSWYGEdit(index){
+
+    var oEditor;
+    try {
+        oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
+    }
+    catch(error) {
+        //browsers like opera can't resolve the FCKeditorAPI classes
+        alert("The browser you are using doesn't support Rich Text Editor, Please use a supported browser instead.");
+        return;
+    }
+
+    if(activeEditorIndex != index && activeEditorIndex != 0){
+        saveWYSWYGEdittedText(activeEditorIndex); //save the existing content
+        doPreview(activeEditorIndex); //update preview panel
+    }
+    
+    activeEditorIndex = index;
+    
+    //hide html editor
+    doPreview(index);
+    
+    var previewElement = document.getElementById("preview" + index + ".text");
+    var posX = findPosX(previewElement);
+    var posY = findPosY(previewElement);
+                   
+    var text = document.getElementById("tx" + index + ".textarea").value;
+    
+    oEditor.SetHTML(text) ;
+    
+    wyswygEditorScreenElement = document.getElementById("wyswygEditorScreen");
+    wyswygEditorScreenElement.style.top = posY + "px";
+    wyswygEditorScreenElement.style.left = posX + "px";
+    
+    
+    showElementById("wyswygEditorScreen");
+}
+
+
+function saveWYSWYGEdittedText(index){
+    var oEditor = FCKeditorAPI.GetInstance('FCKeditor1') ;
+    var text = oEditor.GetXHTML( true )
+
+
+	// add in <!-- HTML --> to indicate that we have used the wyswyg editor 
+	var testText = text.substring(0,commentFlagLength);
+	if ( commentFlag != testText ) {
+		text = commentFlag + text;
+	}
+
+    var htmlEditorElement = document.getElementById("tx" + index + ".textarea");
+    htmlEditorElement.value = text;
+    
+}
+
+function doEdit(index){
+    hideElementById("wyswygEditorScreen");
+    hideElementById("preview"+index);
+    showElementById("tx"+index);
+}
+
+function doPreview(index){
+    var previewTextElement = document.getElementById("preview" + index + ".text");
+    var previewText = document.getElementById("tx" + index + ".textarea").value;
+    previewTextElement.innerHTML = previewText;
+
+    hideElementById("wyswygEditorScreen");
+    hideElementById("tx"+index);
+    showElementById("preview"+index);
+}
+
+
+
+
+function showElement(element) {
+    element.style.visibility = 'visible';
+    element.style.display = "block";
+}
+function hideElement(element) {
+    element.style.visibility = 'hidden';
+    element.style.display = "none";
+}
+
+function showElementById(id) {
+    var element = document.getElementById(id);
+    showElement(element);
+}
+
+function hideElementById(id) {
+    var element = document.getElementById(id);
+    hideElement(element);
+}
+
+
+function findPosX(obj)  {
+    var curleft = 0;
+    if(obj.offsetParent)
+        while(1) 
+        {
+          curleft += obj.offsetLeft;
+          if(!obj.offsetParent)
+            break;
+          obj = obj.offsetParent;
+        }
+    else if(obj.x)
+        curleft += obj.x;
+    return curleft;
+}
+
+function findPosY(obj)  {
+    var curtop = 0;
+    if(obj.offsetParent)
+        while(1)
+        {
+          curtop += obj.offsetTop;
+          if(!obj.offsetParent)
+            break;
+          obj = obj.offsetParent;
+        }
+    else if(obj.y)
+        curtop += obj.y;
+    return curtop;
+}
+
+
+/*** implement the event onSelectTab() which gets trigger when tabs is changed ***/
+function onSelectTab(tabID){
+    //hide all active editors
+    doPreview(activeEditorIndex);
+}
\ No newline at end of file
Index: lams_tool_laqa/web/author_page/js/tabcontroller.js
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_laqa/web/author_page/js/Attic/tabcontroller.js,v
diff -u -r1.1 -r1.2
--- lams_tool_laqa/web/author_page/js/tabcontroller.js	30 Sep 2005 05:51:41 -0000	1.1
+++ lams_tool_laqa/web/author_page/js/tabcontroller.js	27 Jan 2006 06:07:07 -0000	1.2
@@ -1,137 +1,39 @@
+var tabSize = 0;
+var selectedTabID = 0;
 
-var tabsContents = new Array();
-var tab_lefts = new Array();
-//TODO:we need to set this variable, maybe from the praent or direct from JSP/Java
-var themeName = "aqua";
-var currentTab = "";
-
-function initTabs(){
-	//put all the tab contents in an array
-	tabsContents.push(document.getElementById('content_b'));
-	tabsContents.push(document.getElementById('content_a'));
-	tabsContents.push(document.getElementById('content_i'));
-	
-	//position the advanced (a) and instructions (i) layers over the basic (b) layer
-	var bTabC_x = findPosX(tabsContents[0]);
-	var bTabC_y = findPosY(tabsContents[0]);
-	
-	tabsContents[1].style.left = bTabC_x+'px';
-	tabsContents[1].style.top = bTabC_y+'px';
-	tabsContents[2].style.left = bTabC_x+'px';
-	tabsContents[2].style.top = bTabC_y+'px';
-	tabsContents[1].style.visibility="hidden";
-	tabsContents[2].style.visibility="hidden";
+/* Initialise the number of tabs in the page */
+function initTabSize(size){
+    tabSize = size;
 }
 
-function deSelectTab(tabId){
-	//swap images of side parts
-	var tl = document.getElementById("tab_left_"+tabId);
-	tl.src="author_page/images/"+themeName+"_tab_left.gif";
-	tl.height = 22;
-	var tr = document.getElementById("tab_right_"+tabId);
-	tr.src="author_page/images/"+themeName+"_tab_right.gif";
-	tr.height = 22;
-	//swap css of centre class
-	var tc = document.getElementById("tab_tbl_centre_"+tabId);
-	tc.className="tab tabcentre";	
-}
+function selectTab(tabID) {
+        
+    if(selectedTabID == tabID)
+        return;
 
-function selectTab(tabId){
-	//alert('selecttab');
-	//swap images of side parts
-	var tl = document.getElementById("tab_left_"+tabId);
-	tl.src="author_page/images/"+themeName+"_tab_s_left.gif";
-	tl.height = 25;
-	var tr = document.getElementById("tab_right_"+tabId);
-	tr.src="author_page/images/"+themeName+"_tab_s_right.gif";
-	tr.height = 25;
-	//swap css of centre class
-	var tc = document.getElementById("tab_tbl_centre_"+tabId);
-	tc.className="tab tabcentre_selected";
-
-	//if(tabId=="a"){
-		//enableFCKEditor();
-	//}
-	
-}
-
-function enableFCKEditor(){
-	//alert('enableFCKEditor');
-	// This is a hack for Gecko... it stops editing when the editor is hidden.
-	if ( !document.all ){
-		var oEditor = FCKeditorAPI.GetInstance( 'FCKeditor1' ) ;
-		
-		if (  oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
-		{
-			oEditor.SwitchEditMode() ;
-			oEditor.SwitchEditMode() ;
-		}
-	}	
-}
-
-
-function showTab(tabId){
-	if (currentTab == tabId){
-		return;
-	}else{
-		currentTab = tabId;
-	}
-	
-	selectTab(tabId);
-
-	if(tabId == "i"){
-		deSelectTab("a");
-		deSelectTab("b");
-	}else if(tabId=="a"){
-		deSelectTab("i");
-		deSelectTab("b");
-	}else{
-		deSelectTab("i");
-		deSelectTab("a");
-	}
-	
-	//sort out the content
-	var contentId = "content_"+tabId;
-	for(var i=0; i < tabsContents.length; i++){
-		if(tabsContents[i].id==contentId){
-			//document.getElementById(tabsContents[i].id).style.display	= '' ;
-			tabsContents[i].style.visibility="visible";
-		}else{
-			//document.getElementById(tabsContents[i].id).style.display	= 'none' ;
-			tabsContents[i].style.visibility="hidden";
-		}
-	}
-	
-	
-	
-}
-
-function findPosX(obj)  {
-    var curleft = 0;
-    if(obj.offsetParent)
-        while(1) 
-        {
-          curleft += obj.offsetLeft;
-          if(!obj.offsetParent)
-            break;
-          obj = obj.offsetParent;
-        }
-    else if(obj.x)
-        curleft += obj.x;
-    return curleft;
-  }
-
-function findPosY(obj)  {
-    var curtop = 0;
-    if(obj.offsetParent)
-        while(1)
-        {
-          curtop += obj.offsetTop;
-          if(!obj.offsetParent)
-            break;
-          obj = obj.offsetParent;
-        }
-    else if(obj.y)
-        curtop += obj.y;
-    return curtop;
-  }
+    if(selectedTabID == 0)
+        selectedTabID = tabID;
+        
+    //change the old tab's class
+    document.getElementById("tab" + selectedTabID).className = "tabitem";
+    
+    //change the new tab's class
+    document.getElementById("tab" + tabID).className = "tabitem_selected";    
+    
+    //save tabID as selectedTabID
+    selectedTabID = tabID;
+    
+    //switch the the selected tab on
+    for(i = 1; i <= tabSize; i++) {
+      document.getElementById("tabbody" + i).style.display = (i == tabID) ? 'block':'none';
+    }
+    
+    
+    try{
+        //trigger the custom event listener onSelectTab()
+        onSelectTab(tabID);
+    }
+    catch (error){
+        //catch reference error when onSelectTab() is not defined
+    }
+}
\ No newline at end of file