worked on report

www/app.js

@@ -5,9 +5,9 @@ Ext.Loader.setPath({
 //</debug>
 
 Ext.application({
-    controllers: ["Main"],
+    controllers: ["Lsm", "Main"],
     models: ["SimulationModel", "SimulationDetails"],
-    stores: ['SimulationStore', 'SimulationDetailsStore', 'SimulationsSummary'],
+    stores: ['SimulationStore', 'SimulationDetailsStore', 'SimulationsSummary', 'LsmStore'],    
 
     name: 'app',
 
@@ -15,7 +15,8 @@ Ext.application({
         'Ext.MessageBox', 'app.CustomProxy'
     ],
 
-    views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay', 'OptionsPanel'],
+    views: ['Main', "Home", "Simulation", "List", 'Map', 'StepsOverlay', 'OptionsPanel', 
+            'SimulationList', 'LsmSimulationList'],
 
     icon: {
         57: 'resources/icons/Icon.png',

www/app/view/List.js

@@ -17,9 +17,19 @@ Ext.define("app.view.List",
 		
 		navigationBar:
 		{
+			title: 'simulations',
 			ui: 'darker_blue',
-			//html: '<h1>Simulations Panel</h1>',
+            items : [{
+    	          id: 'simulationOptions',
+	              xtype: 'button',
+                  text: 'simulations',
+                  left: '100%',
+                  top: 7,
+                  ui: ['square','blue'],
+            }]
 		},
+
+		
 		items: [
 			{
 				id: 'cities',

www/app/view/LsmSimulationList.js

+Ext.define('app.view.LsmSimulationList', {
+	extend: 'Ext.List',
+	xtype: 'LsmSimulationList',
+	id: 'lsmsimulation-list',
+	config: {
+		store: 'LsmStore',
+		itemTpl: '{submitted}',
+	}
+});
\ No newline at end of file

www/app/view/Main.js

@@ -9,6 +9,8 @@ Ext.define("app.view.Main", {
         items: [
         {
             xtype: 'listpanel',
+            width: '20%',
+            style: 'border-right: 1px solid #373737',
             flex: 1,
         },
         {    

www/app/view/Map.js

@@ -54,19 +54,30 @@ Ext.define('app.view.Map', {
         var pos = new google.maps.LatLng(pos[0], pos[1]);
         new google.maps.Marker({
             position: pos,
-            icon: 'Google_Maps_Marker.png',
+            icon: 'resources/images/Google_Maps_Marker.png',
             map: this.globalMap,
             title: 'you'
 		});
 	},
 
-	
 	// 'http://sangkil.science.uva.nl:8003/drfsm/199419691/visualization/level/map/600.png'
 	// 'http://sangkil.science.uva.nl:8003/drfsm/207/visualization/level/map/300.png' ;
 	/*create overlays with area_id, bounds and timesteps
 	 * Bounds: array(4) 
 	*/
-	createOverlayImage: function(bounds, area_id, timesteps) {
+	createOverlayImage: function(bounds, area_id, timesteps, simulationType) {
+		console.log(timesteps);
+		var url = '';
+		if (simulationType == 'Flood')
+		{
+			url = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/';
+		}
+		else if (simulationType == 'Lsm')
+		{
+			url = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id + '/visualization/paru/map/';
+		}
+		else return false;
+		console.log(url);
 		this.imageIndex = 0;
 		this.imageBounds = new google.maps.LatLngBounds(
 				new google.maps.LatLng(bounds[2],bounds[3]),
@@ -75,30 +86,41 @@ Ext.define('app.view.Map', {
 		if (this.overlayImages.length > 1)
 			this.removeImages();
 		//var image = 'http://sangkil.science.uva.nl:8003/lsm/' + area_id +'/visualization/level/map/400.png';	
-
 		for (i in timesteps)
 		{
-			var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png';
-			this.overlayImages.push(new google.maps.GroundOverlay(image, this.imageBounds));
+			//var image = 'http://sangkil.science.uva.nl:8003/drfsm/' + area_id + '/visualization/level/map/' + timesteps[i] + '.png';
+			var image = new Image();
+			image.src = url + timesteps[i] + '.png';
+			console.log(image.src);
+			this.overlayImages.push(new google.maps.GroundOverlay(image.src, this.imageBounds));
 		}
+
 		this.overlayImages[0].setMap(this.globalMap);
+		this.imageIndex = this.overlayImages.length;
 	},
 
 	/* set next Image*/
 	nextImage: function()
 	{
-		var lastImagesIndex = this.imageIndex;
-		this.imageIndex += this.imageIndex <= this.overlayImages.length - 2 ? 1 : 0;
-		if (this.imageIndex != lastImagesIndex)
-		{
-			this.overlayImages[this.imageIndex].setMap(this.globalMap);
-			this.overlayImages[this.imageIndex - 1].setMap(null);
-		}
+		if (this.overlayImages.length <= 1)
+			return;
+		var lastIndex = (this.overlayImages.length + this.imageIndex) % this.overlayImages.length;
+		this.imageIndex = (this.overlayImages.length + this.imageIndex + 1) % this.overlayImages.length;
+		//this.imageIndex = (this.overlayImages.length + this.imageIndex + 1) % (this.overlayImages.length);
+		console.log(this.imageIndex);
+		//this.overlayImages[this.imageIndex - 1].setMap(null);
+		this.overlayImages[this.imageIndex].setMap(this.globalMap);	
+		this.overlayImages[lastIndex].setMap(null);
+		//this.imageIndex = (this.imageIndex + 1) % (this.overlayImages.length);
+		console.log(this.imageIndex);
+
 	},
 
 	/*set prev image*/
 	prevImage: function()
 	{
+		if (this.overlayImages.length <= 1)
+			return;
 		this.overlayImages[this.imageIndex].setMap(null);
 		this.imageIndex -= this.imageIndex > 0 ? 1 : 0;
 

www/app/view/OptionsPanel.js

@@ -2,20 +2,24 @@ Ext.define('app.view.OptionsPanel', {
 	extend: 'Ext.Panel',
 	xtype: 'SimulationOptions',
 	id: 'simulation_options',
+	requires: ['Ext.dataview.List'],
 	config: {
+		layout: 'hbox',
 		right: 40,
 		width: 200,
 		height: 100,
-		//scroll: true,
+		hideOnMaskTap: true,
 		modal: true,
-		items: [{
+		items: [
+		{
 			xtype: 'list',
-			fullscreen: true,
+			id: 'optionsList',
+			width: '100%',
 			itemTpl: 'Simulation {type}',
 			data: [
-				{type: "Flood Simulation"},
+				{type: "Flood"},
 				{type: "Lsm"}
 			],
-		}]
+		}],
 	}
 });
\ No newline at end of file

www/app/view/Simulation.js

@@ -10,62 +10,10 @@ Ext.define('app.view.Simulation', {
             xtype: 'toolbar',
             ui: 'darker_blue',
             title: 'Flood Simulation Browser',
-            items : [{
-                  id: 'simulationOptions',
-                  xtype: 'button',
-                  text: 'simulations',
-                  right: 0,
-                  top: 7,
-                  ui: ['square','blue'],
-            }]
         },
         {
             xtype: 'SimulationMap',
             flex: 2,
         }],
     }
-});
-
+});
\ No newline at end of file
-       // {
-       //          xtype: 'panel',
-       //          id: 'overlay',
-       //          hidden: true,
-       //          width: 300,
-       //          height: 80,
-       //          scroll: false,
-       //          items: [
-       //          {
-       //              xtype: 'button',
-       //              id: 'closebutton',
-       //              iconCls: 'delete',
-       //              iconMask: true,
-       //              width: 45,                    
-       //              top: -30,
-       //              left: -20,
-       //          },
-       //          {
-       //              layout: 'vbox',
-       //              top: 15,
-       //              align: 'center',
-       //              items : [
-       //              {
-       //                  xtype: "button",
-       //                  id: 'backwards',
-       //                  width: 45,
-       //                  iconCls: 'arrow_left',
-       //                  floating: 'right',
-       //                  iconMask: true,
-       //                  left: 90,
-       //                  align: 'center',
-       //              },
-       //              {
-       //                  xtype: "button",
-       //                  id: 'forward',
-       //                  width: 45,
-       //                  floating: 'left',
-       //                  iconCls: 'arrow_right',
-       //                  align: 'center',
-       //                  left: 155,
-       //                  iconMask: true,
-       //              }]
-       //          },
\ No newline at end of file

www/app/view/SimulationList.js

+Ext.define('app.view.SimulationList', {
+	extend: 'Ext.List',
+	xtype: 'SimulationList',
+	id: 'summary',
+
+
+	config: {
+		scrollable: {
+			momentum: false
+		},
+		fullscreen: true,
+		store: 'SimulationsSummary',
+		itemTpl: '<div><img class="map_thumb" id="{test_id}_map"' +
+                    'src=""/> ' +
+                    '<img class="flood_thumb" id="{test_id}_flood"' +
+                    'style:"width: 100px;" src=""/>' +
+                    '<div style:"clear:both">'+
+                    '<div id="{test_id}_control" class="control"></div>' +  
+                    '</div><h3><b>submitted:</b></h3> <bold>{submitted}</bold></div></div>'
+	},
+
+	listeners : {
+		scroll: function() {
+			console.log('scroll');
+		}
+	}
+});
\ No newline at end of file

www/app/view/StepsOverlay.js

@@ -7,6 +7,7 @@ Ext.define('app.view.StepsOverlay', {
     config: {
     	style: "background: none",
     	id: 'overlay',
+    	html: 'Controls',
     	showAnimation: {
     		type: 'slideIn',
     		direction:'left',
@@ -17,10 +18,9 @@ Ext.define('app.view.StepsOverlay', {
     		direction:'right',
     	},
 
-    	//autoDestroy: true,
     	hidden: true,
-	    width: 200,
-	    height: 100,
+	    width: 220,
+	    height: 130,
 	    scroll: false,
 	    items: [
 	    {
@@ -38,7 +38,7 @@ Ext.define('app.view.StepsOverlay', {
 	    },
 	    {
 	        top: 10,
-	        left: 30,
+	        left: 35,
 	        align: 'center',
 	        items : [
 	        {

www/build/package/index.html

@@ -64,19 +64,13 @@
             }
         }
 
-        .x-container .x-scroll-view{
-            border-right: solid #ababab;
-        }
-
-
         .flood_thumb {
             position: relative;
             z-index: 100;
-            left: 10px;
+            left: 0px;
             top: 10px;
-            width: 300px;
-            height: 180px;
-            border: solid #ababab;
+            width: 80%;
+/*            height: 180px;*/
         }
 
         .map_thumb {

www/index.html

@@ -64,19 +64,13 @@
             }
         }
 
-        .x-container .x-scroll-view{
-            border-right: solid #ababab;
-        }
-
-
         .flood_thumb {
             position: relative;
             z-index: 100;
-            left: 10px;
+            left: 0px;
             top: 10px;
-            width: 300px;
-            height: 180px;
-            border: solid #a0a0a0;
+            width: 80%;
+/*            height: 180px;*/
         }
 
         .map_thumb {

www/packager.json

@@ -5,13 +5,13 @@
 	 * This is the name of your application, which is displayed on the device when the app is installed. On IOS, this should match
 	 * the name of your application in the Apple Provisioning Portal.
 	 */
-	"applicationName":"My Application",
+	"applicationName":"Flood Simulation",
 
 	/**
 	 * @cfg {String} applicationId
 	 * This is the name namespace for your application. On IOS, this should match the name of your application in the Apple Provisioning Portal.
 	 */
-	"applicationId":"com.codefabriek.tipspottmp",
+	"applicationId":"com.uva.floodsimulation",
 
 	/**
 	 * @cfg {String} versionString

www/resources/sass/app.scss

@@ -25,4 +25,10 @@
 //@include sencha-msgbox;
 
 
+x-list-item {
+// needs latest Compass, add '@import "compass"' to your scss
+@include filter-gradient(#00000000, #a6000000, horizontal); // IE6-9
+@include background-image(linear-gradient(left, rgba(0,0,0,0) 0%,rgba(132,2,2,0.77) 76%,rgba(5,0,0,1) 99%,rgba(0,0,0,0.65) 100%));
+✔ copied to clipboard copy
 
+}
\ No newline at end of file