=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataRecordingSelect.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataRecordingSelect.vm	2012-08-02 06:46:14 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataRecordingSelect.vm	2012-08-13 05:15:26 +0000
@@ -1,7 +1,4 @@
 <form id='dataRecordingSelectForm' name='dataRecordingSelectForm' method='post'>
-<div class="actions" style='margin-top:30px;' #if($program.type!=1) style='display:none;' #end>
-	<input type="button" class='stage-object' id="newEncounterBtn" value="$i18n.getString('create_new_event')" onClick="javascript: registerIrregularEncounter( getFieldValue('executionDate') );" disabled="disabled" >
-</div>
 <table class="mainPageTable" id='patientInfoDiv'> 
 	<tr>
 		<td valign="top">
@@ -43,12 +40,7 @@
 </div>
 
 <div id='programInstanceDiv' class='hidden '>
-	<div id='programInstanceFlowDiv' style="width:78%;height:115px;overflow-x:auto;">
-		<table>
-			<tr id='programStageIdTR'></tr>
-		</table>
-	</div>
-	
+	#parse( "/dhis-web-caseentry/programStageInstanceFlow.vm" )
 	<br>		
 	<table id='executionDateTB'>
 		<tr>
@@ -87,6 +79,7 @@
 
 <script>
 	jQuery('#dataRecordingSelectForm').ready(function(){ 
+		jQuery("#programInstanceFlowDiv").animate({scrollLeft: 0});
 		var programs = byId('programId');
 		if( programs.options.length == 2 )
 		{

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataentryRecords.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataentryRecords.vm	2012-08-07 07:31:32 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/dataentryRecords.vm	2012-08-13 05:15:26 +0000
@@ -34,18 +34,9 @@
 					</td>
 					#if($!programStageInstanceMap.get($programInstance))
 						#set($programStageInstances = $programStageInstanceMap.get($programInstance) )
-						#foreach( $programStageInstance in $programStageInstances )
-							<td>
-								<img src='images/rightarrow.png'>
-							</td>
-							<td width='100px;'>
-								<input type='button' id='ps_$programStageInstance.id' name='programStageBtn' class='stage-object' value='$programStageInstance.programStage.name $format.formatDate( $programStageInstance.dueDate )' onclick='javascript:viewPrgramStageRecords( $programStageInstance.id );'>
-								<script>	
-									var status = $statusMap.get( $programStageInstance.id ); 
-									setEventColorStatus( 'ps_' + $programStageInstance.id ,status);
-								</script>
-							</td>
-						#end
+						<td>
+							#parse( "/dhis-web-caseentry/programStageInstanceFlow.vm" )
+						</td>
 					#end
 				</tr>
 			#if( $mark )

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/commons.js'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/commons.js	2012-08-07 05:43:56 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/commons.js	2012-08-13 05:15:26 +0000
@@ -442,3 +442,15 @@
 		height: 250
 	}).show('fast');
 }
+
+// ----------------------------------------------------------------------------
+// Move stage-flow
+// ----------------------------------------------------------------------------
+
+function moveLeft(){
+	jQuery("#programInstanceFlowDiv").animate({scrollLeft: "-=200"}, 'fast');
+}
+
+function moveRight(){
+	jQuery("#programInstanceFlowDiv").animate({scrollLeft: "+=200"}, 'fast');
+}
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js	2012-08-02 13:50:38 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/javascript/entry.js	2012-08-13 05:15:26 +0000
@@ -68,7 +68,7 @@
 				
 				disableCompletedButton(true);
 				disable('validationBtn');
-				showById('programStageIdTR');
+				showById('programStageIdTB');
 				showById('programInstanceFlowDiv');
 			}
 			// Load entry form for Single-event program or normal program with only one program-stage
@@ -76,7 +76,7 @@
 			{
 				jQuery('#dueDateTR').attr('class','hidden');
 				disableCompletedButton(false);
-				hideById('programStageIdTR');
+				hideById('programStageIdTB');
 				hideById('programInstanceFlowDiv');
 				var programStageInstanceId = '';
 				if( json.programStageInstances.length == 1 )

=== added file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programStageInstanceFlow.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programStageInstanceFlow.vm	1970-01-01 00:00:00 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/programStageInstanceFlow.vm	2012-08-13 05:15:26 +0000
@@ -0,0 +1,30 @@
+<table id='programStageIdTB' style="width:850px;height:125px;">
+	<tr>
+		<td>
+			<div class="arrow-left" onclick="moveLeft()">&nbsp;</div>
+		</td>
+		<td>
+			<div id='programInstanceFlowDiv' class="stage-flow">
+				<table class="stage-flow">											
+					<tr id='programStageIdTR'>
+						#foreach( $programStageInstance in $programStageInstances )
+						<td>
+							<img src='images/rightarrow.png'>
+						</td>
+						<td>
+							<input type='button' id='ps_$programStageInstance.id' name='programStageBtn' class='stage-object' value='$programStageInstance.programStage.name $format.formatDate( $programStageInstance.dueDate )' onclick='javascript:viewPrgramStageRecords( $programStageInstance.id );'>
+							<script>	
+								var status = $statusMap.get( $programStageInstance.id ); 
+								setEventColorStatus( 'ps_' + $programStageInstance.id ,status);
+							</script>
+						</td>
+						#end
+					</tr>
+				</table>
+			</div>
+		</td>
+		<td>
+			<div class="arrow-right" onclick="moveRight()">&nbsp;</div>
+		</td>
+	</tr>					
+</table>
\ No newline at end of file

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/report.vm'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/report.vm	2012-07-09 12:32:35 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/report.vm	2012-08-13 05:15:26 +0000
@@ -9,19 +9,11 @@
                 <tr #alternate( $mark )>                
 					<td>
 						<input type='button' class='patient-object' value='$programInstance.patient.getFullName()' onclick='javascript:showPatientHistory( $programInstance.patient.id )' title='$i18n.getString( "patient_details_and_history" )'>
-					</td>				
-                    #foreach( $programStageInstance in $programInstance.programStageInstances )
-						<td>
-							<img src='images/rightarrow.png'>
-						</td>
-						<td width='100px;'>
-							<input type='button' class='stage-object' id='ps_$programStageInstance.id' value='$programStageInstance.programStage.name $format.formatDate( $programStageInstance.dueDate )' onclick='javascript:viewRecords( $programStageInstance.id )'>
-							<script>	
-								var status = $statusMap.get( $programStageInstance.id );
-								setEventColorStatus( 'ps_' + $programStageInstance.id ,status);
-							</script>
-						</td>
-                    #end
+					</td>	
+					<td>
+						#set( $programStageInstances = $programInstance.programStageInstances )
+						#parse( "/dhis-web-caseentry/programStageInstanceFlow.vm" )
+					</td>
                 </tr>
                 #if( $mark )
                     #set( $mark = false )

=== modified file 'dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css'
--- dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css	2012-08-12 06:10:50 +0000
+++ dhis-2/dhis-web/dhis-web-caseentry/src/main/webapp/dhis-web-caseentry/style/style.css	2012-08-13 05:15:26 +0000
@@ -178,6 +178,17 @@
 	border-radius: 2px;
 }
 
+input.move-button
+{
+	width: 20px;
+	height: 60px;
+    white-space: normal;
+	border-color: #bbbbbb;
+	cursor: pointer;
+	border: 1px solid #aaa;
+	margin: 0px;
+}
+
 input.optionset[type="text"]
 {
 	width:222px; 
@@ -211,16 +222,9 @@
 	height: 32px;
 }
 
-table.stage-object
-{
-	white-space: normal;
-	border: 2px solid;
-	opacity: 1.0;
-	border: 1px solid;
-	margin: 5px;
-	border-radius: 2px;
-	text-align:center;
-}
+/* --------------------------------------------------------------
+// Dashboard
+// -------------------------------------------------------------- */
 
 div.link-area
 {
@@ -310,3 +314,50 @@
   text-decoration: none;
   background-color: #f8f8f8;
 }
+
+/* --------------------------------------------------------------
+// program-stage-instances
+// -------------------------------------------------------------- */
+
+.stage-container
+{
+	width:850px;
+	height:125px;
+}
+
+.stage-flow
+{
+	width:750px;
+	height:125px;
+	overflow-x:hidden;
+	overflow-y:hidden;
+}
+
+table.stage-object
+{
+	white-space: normal;
+	border: 2px solid;
+	opacity: 1.0;
+	border: 1px solid;
+	margin: 5px;
+	border-radius: 2px;
+	text-align:center;
+}
+
+.arrow-right {
+	width: 0; 
+	height: 0; 
+	border-top: 30px solid transparent;
+	border-bottom: 30px solid transparent;
+	border-left: 30px solid #d0d0d0;
+	cursor:pointer;
+}
+
+.arrow-left {
+	width: 0; 
+	height: 0; 
+	border-top: 30px solid transparent;
+	border-bottom: 30px solid transparent; 
+	border-right:30px solid #d0d0d0; 
+	cursor:pointer;
+}