diff --git a/UPSUser.js b/UPSUser.js
new file mode 100644
index 0000000..6d2c49e
--- /dev/null
+++ b/UPSUser.js
@@ -0,0 +1,19 @@
+function UPSUser()
+{
+	this.storage = window.localStorage;
+}
+
+UPSUser.prototype.GetUserType = function()
+{
+	if(!this.storage.getItem("usertype"))
+	{
+		this.storage.setItem("usertype","none");
+	}
+	
+	return this.storage.getItem("usertype");
+}
+
+UPSUser.prototype.SetUserType = function(type)
+{
+	this.storage.setItem("usertype",type);
+}
\ No newline at end of file
diff --git a/app/app.js b/app/app.js
new file mode 100644
index 0000000..1b75f4a
--- /dev/null
+++ b/app/app.js
@@ -0,0 +1,10 @@
+
+Ext.regApplication('UPSApp', {
+	defaultTarget:'viewport',
+	name:'UPSApp',
+	launch: function() {
+		
+		// The Ext.regApplication call automatically creates our 'views' namespace
+		this.views.viewport = new this.views.Viewport();
+	}
+});
diff --git a/app/views/SelectUserType.js b/app/views/SelectUserType.js
new file mode 100644
index 0000000..1758ac4
--- /dev/null
+++ b/app/views/SelectUserType.js
@@ -0,0 +1,27 @@
+UPSApp.views.SelectUserType = Ext.extend(Ext.Panel, {
+	cardSwitchAnimation:'slide',
+	dockedItems:[],
+	items:[
+	       {
+	    	   xtype:'button',
+	    	   text:"I'm a Parent",
+	    	   handler:function() {
+	    		   User.SetUserType('parent');
+	    		   UPSApp.views.viewport.setActiveItem('parenthome');
+	    	   }
+	       },
+	       {
+	    	   xtype:'button',
+	    	   text:"I'm a Student"
+	       },
+	       {
+	    	   xtype:'button',
+	    	   text:"I'm an Alumnus"
+	       }
+	],
+	initComponent: function() {
+		
+		
+		UPSApp.views.Viewport.superclass.initComponent.apply(this, arguments);
+	}
+});
\ No newline at end of file
diff --git a/app/views/Viewport.js b/app/views/Viewport.js
new file mode 100644
index 0000000..6dff3ce
--- /dev/null
+++ b/app/views/Viewport.js
@@ -0,0 +1,49 @@
+var User;
+
+UPSApp.views.Viewport = Ext.extend(Ext.Panel, {
+	fullscreen:true,
+	layout: 'card',
+	cardSwitchAnimation:'pop',
+	dockedItems:[
+		new Ext.Toolbar({
+			dock:'bottom',
+			title:"Debug",
+			items:[
+			       {
+			    	   xtype:'button',
+			    	   text:'Reset Usertype',
+			    	   handler:function(){User.SetUserType("none");}
+			       }
+			 ]
+		})
+	],
+	items:[],
+	activeItem:0,
+	initComponent: function() {
+		
+		User = new UPSUser();
+		
+		UPSApp.views.toolbar = new Ext.Toolbar({
+			title:'University of Puget Sound'
+		});
+		
+		this.dockedItems[1] = UPSApp.views.toolbar;
+		
+		UPSApp.views.selectUserType = new UPSApp.views.SelectUserType();
+		UPSApp.views.parentHome = new UPSApp.views.ParentHome();
+		
+		this.items[0] = UPSApp.views.selectUserType;
+		this.items[1] = UPSApp.views.parentHome;
+		
+		if(User.GetUserType() == "none")
+			Ext.apply(this, {
+				activeItem:0
+			})
+		else if(User.GetUserType() == "parent")
+			Ext.apply(this, {
+				activeItem:1
+			})
+		
+		UPSApp.views.Viewport.superclass.initComponent.apply(this, arguments);
+	}
+});
\ No newline at end of file
diff --git a/app/views/parent/ParentHome.js b/app/views/parent/ParentHome.js
new file mode 100644
index 0000000..62091b3
--- /dev/null
+++ b/app/views/parent/ParentHome.js
@@ -0,0 +1,10 @@
+UPSApp.views.ParentHome = Ext.extend(Ext.Panel, {
+	id:'parenthome',
+	dockedItems:[],
+	items:[],
+	html:"<p>I'm a <b>Parent</b></p>",
+	initComponent: function() {
+		
+		UPSApp.views.Viewport.superclass.initComponent.apply(this, arguments);
+	}
+});
\ No newline at end of file
diff --git a/index.html b/index.html
index b345408..65c4d3f 100644
--- a/index.html
+++ b/index.html
@@ -7,8 +7,12 @@
       <link rel="stylesheet" href="sencha/resources/css/sencha-touch.css" type="text/css">
       <script type="text/javascript" src="sencha/sencha-touch.js"></script>
 	  <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
+	  <script type="text/javascript" charset="utf-8" src="UPSUser.js"></script>
 	  <script type="text/javascript" charset="utf-8" src="main.js"></script>
-	  <script type="text/javascript" charset="utf-8" src="phonegapdemo-w-sencha.js"></script>
+	  <script type="text/javascript" charset="utf-8" src="app/app.js"></script>
+	  <script type="text/javascript" charset="utf-8" src="app/views/Viewport.js"></script>
+	  <script type="text/javascript" charset="utf-8" src="app/views/SelectUserType.js"></script>
+	  <script type="text/javascript" charset="utf-8" src="app/views/parent/ParentHome.js"></script>
 	  </head>
   <body></body>
 </html>
diff --git a/main.js b/main.js
index 538164e..7a2984a 100644
--- a/main.js
+++ b/main.js
@@ -1,184 +1,5 @@
-var getLocation = function() {
-    var suc = function(p) {
-        
-        document.getElementById("loclat").innerHTML = 'Latitude: '
-                + p.coords.latitude;
-        document.getElementById("loclong").innerHTML = 'Longitude: '
-                + p.coords.longitude;
-        document.getElementById("locaccur").innerHTML = 'Accuracy: '
-                + p.coords.accuracy + 'm';
+document.addEventListener("deviceready", onDeviceReady, false);
 
-        var mapview = document.getElementById('mapview');
-
-        var image_url = "http://maps.google.com/maps/api/staticmap?sensor=false&center="
-                + p.coords.latitude
-                + ","
-                + p.coords.longitude
-                + "&zoom=13&size=220x180&markers=color:blue|"
-                + p.coords.latitude + ',' + p.coords.longitude;
-
-        mapview.style.display = "";
-        mapview.style.position = "absolute";
-        mapview.style.bottom = "7px";
-        mapview.style.left = "14px";
-        document.getElementById("mapcanvas").src = image_url;
-    };
-    var fail = function(error) {
-        document.getElementById("loclong").innerHTML = '<span style="color:red;">Failed to get location</span>';
-        switch (error.code) {
-        case error.PERMISSION_DENIED:
-            alert("User did not share geolocation data.");
-            break;
-
-        case error.POSITION_UNAVAILABLE:
-            alert("Could not detect current position.");
-            break;
-
-        case error.TIMEOUT:
-            alert("Retrieving position timed out.");
-            break;
-
-        default:
-            alert("Unknown error.");
-            break;
-        }
-    };
-
-    if (navigator.geolocation) {
-        document.getElementById("loclong").innerHTML = "Getting geolocation . . .";
-        navigator.geolocation.getCurrentPosition(suc, fail);
-    } else {
-        document.getElementById("loclong").innerHTML = '<span style="color:red;">Device or browser can not get location</span>';
-    }
-};
-
-var closeLocation = function() {
-    document.getElementById("loclat").innerHTML = "";
-    document.getElementById("loclong").innerHTML = "";
-    document.getElementById("locaccur").innerHTML = "";
-    document.getElementById("mapcanvas").src = "";
-    document.getElementById("mapview").style.display = "none";
-};
-
-var beep = function() {
-    navigator.notification.beep(2);
-};
-
-var vibrate = function() {
-    navigator.notification.vibrate(0);
-};
-
-function roundNumber(num) {
-    var dec = 3;
-    var result = Math.round(num * Math.pow(10, dec)) / Math.pow(10, dec);
-    return result;
-}
-
-var accelerationWatch = null;
-
-function updateAcceleration(a) {
-    document.getElementById('x').innerHTML = roundNumber(a.x);
-    document.getElementById('y').innerHTML = roundNumber(a.y);
-    document.getElementById('z').innerHTML = roundNumber(a.z);
-}
-
-function toggleAccel() {
-    if (accelerationWatch !== null) {
-        navigator.accelerometer.clearWatch(accelerationWatch);
-        updateAcceleration({
-            x : "",
-            y : "",
-            z : ""
-        });
-        accelerationWatch = null;
-    } else {
-        var options = {};
-        options.frequency = 1000;
-        accelerationWatch = navigator.accelerometer.watchAcceleration(
-                updateAcceleration, function(ex) {
-                    alert("accel fail (" + ex.name + ": " + ex.message + ")");
-                }, options);
-    }
-}
-
-var preventBehavior = function(e) {
-    e.preventDefault();
-};
-
-function dump_pic(data) {
-    var viewport = document.getElementById('viewport');
-    //console.log(data);
-    viewport.style.display = "";
-    viewport.style.position = "relative";
-    viewport.style.top = "10px";
-    viewport.style.left = "20px";
-    document.getElementById("test_img").src = "data:image/jpeg;base64," + data;
-}
-
-function fail(msg) {
-    alert(msg);
-}
-
-function show_pic() {
-    navigator.camera.getPicture(dump_pic, fail, {
-        quality : 30
-    });
-}
-
-function closeviewport() {
-    var viewport = document.getElementById('viewport');
-    viewport.style.display = "none";
-    document.getElementById("test_img").src = "";
-}
-
-function contacts_success(contacts) {
-    alert(contacts.length
-            + ' contacts returned.'
-            + (contacts[2] && contacts[2].name &&
-               contacts[2].name.formatted ? (' Third contact is ' + contacts[2].name.formatted)
-                    : ''));
-}
-
-function get_contacts() {
-    var obj = new ContactFindOptions();
-    obj.filter = "";
-    obj.multiple = true;
-    navigator.contacts.find(
-            [ "displayName", "name" ], contacts_success,
-            fail, obj);
-}
-
-var check_network = function() {
-    var networkState = navigator.network.connection.type;
-
-    var states = {};
-    states[Connection.UNKNOWN]  = 'Unknown connection';
-    states[Connection.ETHERNET] = 'Ethernet connection';
-    states[Connection.WIFI]     = 'WiFi connection';
-    states[Connection.CELL_2G]  = 'Cell 2G connection';
-    states[Connection.CELL_3G]  = 'Cell 3G connection';
-    states[Connection.CELL_4G]  = 'Cell 4G connection';
-    states[Connection.NONE]     = 'No network connection';
-    
-    document.getElementById("networktext").innerHTML = "<span>Connection type:<br/>"
-        + states[networkState] + "</span>";
-};
-
-var compassWatch = null;
-
-function updateHeading(h) {
-    document.getElementById('h').innerHTML = h.magneticHeading;
-}
-
-function toggleCompass() {
-    if (compassWatch !== null) {
-        navigator.compass.clearWatch(compassWatch);
-        compassWatch = null;
-        updateHeading({ magneticHeading : "Off"});
-    } else {        
-        var options = { frequency: 1000 };
-        compassWatch = navigator.compass.watchHeading(updateHeading, function(e) {
-            alert('Compass Error: ' + e.code);
-        }, options);
-    }
+function onDeviceReady() {
+	
 }
\ No newline at end of file
diff --git a/phonegapdemo-w-sencha.js b/phonegapdemo-w-sencha.js
index c0eb3ba..1817bbc 100644
--- a/phonegapdemo-w-sencha.js
+++ b/phonegapdemo-w-sencha.js
@@ -1,251 +1,3 @@
-var cfg = {
-    fullscreen : true,
-    dockedItems : [
-            {
-                dock : 'top',
-                xtype : 'toolbar',
-                title : 'PhoneGap w/ Sencha Touch'
-            },
-            {
-                dock : 'bottom',
-                xtype : 'toolbar',
-                ui : 'small',
-                styleHtmlContent : true,
-                html : '<p style="font-size:13px;text-align:center;">This file is located at<br /><b>assets/www/phonegapdemo-w-sencha.js</b></p>'
-            } ],
-
-    layout : {
-        type : 'vbox',
-        pack : 'center',
-        align : 'stretch'
-    },
-    cls : 'card1',
-    scroll : 'vertical',
-    defaults : {
-        layout : {
-            type : 'hbox'
-        },
-        padding : 16,
-        flex : 1,
-        defaults : {
-            xtype : 'button',
-            cls : 'demobtn',
-            flex : 1
-        }
-    }
-};
-
-cfg.items = [
-        {
-            items : [ {
-                ui : 'round',
-                text : 'Show device info',
-                handler : function() {
-                    if (!this.actions) {
-                        this.actions = new Ext.ActionSheet(
-                                {
-                                    floating : true,
-                                    modal : true,
-                                    centered : true,
-                                    height : 240,
-                                    width : 260,
-                                    padding : '15',
-                                    html : '<div style="color:white;font-size:19px;"><b>Platform: </b>'
-                                            + device.platform
-                                            + '<br><b>Version: </b>'
-                                            + device.version
-                                            + '<br><b>UUID: </b>'
-                                            + device.uuid
-                                            + '<br><b>Name: </b>'
-                                            + device.name
-                                            + '<br><b>Screen Width: </b>'
-                                            + screen.width
-                                            + '<br><b>Screen Height: </b>'
-                                            + screen.height
-                                            + '<br><b>Color Depth: </b>'
-                                            + screen.colorDepth + '</div>',
-                                    dockedItems : [ {
-                                        dock : 'bottom',
-                                        text : 'Close',
-                                        ui : 'confirm',
-                                        scope : this,
-                                        handler : function() {
-                                            this.actions.hide();
-                                        }
-                                    } ]
-                                });
-                    }
-                    this.actions.show();
-                }
-            } ]
-        },
-        {
-            items : [ {
-                ui : 'round',
-                text : 'Toggle Accelerometer',
-                handler : function() {
-                    toggleAccel();
-                }
-            } ]
-        },
-        {
-            html : '<tr id="accel-data">'
-                    + '<dt><b>&nbsp;&nbsp;X:&nbsp;</b></dt><td id="x">&nbsp;</td>'
-                    + '<dt><b>&nbsp;&nbsp;Y:&nbsp;</b></dt><td id="y">&nbsp;</td>'
-                    + '<dt><b>&nbsp;&nbsp;Z:&nbsp;</b></dt><td id="z">&nbsp;</td> </tr>',
-            flex : 0.5
-        },
-        {
-            items : [ {
-                ui : 'round',
-                text : 'Get location',
-                handler : function() {
-                    if (!this.actions) {
-                        this.actions = new Ext.ActionSheet(
-                                {
-                                    floating : true,
-                                    modal : true,
-                                    centered : true,
-                                    height : 320,
-                                    width : 280,
-                                    padding : '15',
-                                    html : '<div style="color:white;font-size:16px;">'
-                                            + '<span id="loclat"></span>'
-                                            + '<br/><span id="loclong"></span>'
-                                            + '<br/><span id="locaccur"></span>'
-                                            + '<div id="mapview" style="display:none;">'
-                                            + '<img style="width:220px;height:180px;" id="mapcanvas" src="" alt="Map of your location" /></div></div>',
-                                    dockedItems : [ {
-                                        dock : 'bottom',
-                                        text : 'Close',
-                                        ui : 'confirm',
-                                        scope : this,
-                                        handler : function() {
-                                            closeLocation();
-                                            this.actions.hide();
-                                        }
-                                    } ]
-                                });
-                    }
-                    this.actions.show('pop');
-                    getLocation();
-                }
-            } ]
-        },
-        {
-            items : [ {
-                ui : 'round',
-                text : '<a href="tel:411" style="color:black;font-size:19px;text-decoration:none;text-align:center;">Call 411</a>'
-            } ]
-        },
-        {
-            items : [ {
-                ui : 'round',
-                text : 'Beep',
-                handler : function() {
-                    beep();
-                }
-            } ]
-        },
-        {
-            items : [ {
-                ui : 'round',
-                text : 'Vibrate',
-                handler : function() {
-                    vibrate();
-                }
-            } ]
-        },
-        {
-            items : [ {
-                ui : 'round',
-                text : 'Get a picture',
-                handler : function() {
-                    if (!this.actions) {
-                        this.actions = new Ext.ActionSheet(
-                                {
-                                    floating : true,
-                                    modal : true,
-                                    centered : true,
-                                    height : 170,
-                                    width : 170,
-                                    ui : 'light',
-                                    html : '<div id="viewport" class="viewport" style="display:none;">'
-                                            + '<img style="width:105px;height:75px;" id="test_img" src="" /> </div>',
-                                    dockedItems : [ {
-                                        dock : 'bottom',
-                                        text : 'Close',
-                                        ui : 'confirm',
-                                        scope : this,
-                                        handler : function() {
-                                            closeviewport();
-                                            this.actions.hide();
-                                        }
-                                    } ]
-                                });
-                    }
-                    this.actions.show('pop');
-                    show_pic();
-                }
-            } ]
-        },
-        {
-            items : [ {
-                ui : 'round',
-                text : 'Get phone\'s contacts',
-                handler : function() {
-                    get_contacts();
-                }
-            } ]
-        },
-        {
-            items : [ {
-                ui : 'round',
-                text : 'Check Network',
-                handler : function() {
-                    if (!this.actions) {
-                        this.actions = new Ext.ActionSheet(
-                                {
-                                    floating : true,
-                                    modal : true,
-                                    centered : true,
-                                    height : 140,
-                                    width : 180,
-                                    padding : '15',
-                                    html : '<div style="color:white;font-size:19px;">'
-                                            + '<span id="networktext">Getting network type . . .</span>'
-                                            + '</div>',
-                                    dockedItems : [ {
-                                        dock : 'bottom',
-                                        text : 'Close',
-                                        ui : 'confirm',
-                                        scope : this,
-                                        handler : function() {
-                                            this.actions.hide();
-                                        }
-                                    } ]
-                                });
-                    }
-                    this.actions.show();
-                    check_network();
-                }
-            } ]
-        },
-        {
-            items : [ {
-                ui : 'round',
-                text : 'Toggle Compass',
-                handler : function() {
-                    toggleCompass();
-                }
-            } ]
-        },
-        {
-            html : '<tr id="accel-data">'
-                    + '<dt><b>Compass&nbsp;Heading:&nbsp;</b></dt><td id="h">&nbsp;</td></tr>',
-            flex : 0.5
-        } ];
-
 new Ext.Application({
     launch : function() {
         var panel = new Ext.Panel(cfg);