Index: /Dev/branches/Cartis/Tiles preview/css/tile1.css
===================================================================
--- /Dev/branches/Cartis/Tiles preview/css/tile1.css	(revision 277)
+++ /Dev/branches/Cartis/Tiles preview/css/tile1.css	(revision 278)
@@ -85,15 +85,15 @@
 #header {
     width: 100%;
-    height: 95px;
+    height: 36px;
     margin-bottom: 20px;
 }
 
 #upperBar {
-    height: 68px;
-    background: #508fd2;
+    height: 12px;
+    background: #fff;
 }
 
 #lowerBar {
-    height: 20px;
+    height: 24px;
     background: #508fd2;
 }
@@ -120,5 +120,5 @@
     height: 50px;
     line-height: 50px;
-    color: #fff;
+    color: #000;
     font-size: 36px;
     font-family: 'Segoe', sans-serif;
@@ -211,4 +211,5 @@
     margin-bottom: 5px;
     background: #367ac3;
+    color: #fff;
 
     background-image: linear-gradient(left bottom, rgb(54,122,195) 44%, rgb(74,139,208) 72%);
@@ -229,8 +230,4 @@
 }
 
-.doubleHeight {
-    height: 465px;
-}
-
 .staticTile {
     width: 230px;
@@ -238,10 +235,20 @@
     border: none;
     float: left;
+    color: #fff;
     clear: none;
     margin-right: 5px;
     margin-bottom: 5px;
     background: #367ac3;
-
-}
+}
+
+.doubleHeight {
+    height: 465px;
+}
+
+.doubleWidth {
+    width: 465px;
+}
+
+
 
 .tile:hover {
@@ -309,10 +316,23 @@
 }
 
-.breadcrumbs{
-    float: left;
-    margin-top: 20px;
-    margin-bottom: -2px;
-    margin-left: 370px;
-
+#breadcrumbs{
+    line-height: 24px;
+    width: 940px;
+    margin: 0 auto;
+    color: #fff;
+}
+
+#breadcrumbs a {
+    color: #fff;
+    text-decoration: none;
+}
+
+#breadcrumbs a:hover {
+    color: #edd68b;
+}
+
+#breadcrumbs a.selected {
+    font-weight: bold;
+    text-decoration: underline;
 }
 
Index: /Dev/branches/Cartis/Tiles preview/index.html
===================================================================
--- /Dev/branches/Cartis/Tiles preview/index.html	(revision 278)
+++ /Dev/branches/Cartis/Tiles preview/index.html	(revision 278)
@@ -0,0 +1,64 @@
+<!--
+To change this template, choose Tools | Templates
+and open the template in the editor.
+-->
+<!DOCTYPE html>
+<html>
+    <head>
+        <title></title>
+        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+        <link rel="stylesheet" href="css/tile1.css" />
+        <script type="text/javascript" src="js/generalScripts.js"></script>
+        <script type="text/javascript" src="js/jquery.js"></script>
+        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
+        <script src="js./nav.js"></script>
+        <script type="text/javascript">
+            $(document).ready(function(){
+               debugger;
+               mockup.api.breadcrumbs.init(); 
+            });
+        </script>
+    </head>
+    <body>
+        <div id="header">
+            <div id="upperBar">
+            </div>
+            <div id="lowerBar">
+                <div id="breadcrumbs">
+                </div>
+            </div>
+
+        </div>
+        <div id="wrapper">
+            <div id="content">
+                <div class="basePanel">
+                    <div id="tiles" class="left3">
+                        <div class="leftContainer">
+                            <div id="tile1" class="tile" onclick="mockup.api.clickTile(this, 'login')"><div class="tileText">Create Dashboard</div></div>
+                            <div id="tile2" class="tile"><div class="tileText">Templates</div></div>
+                            <div id="tile3" class="tile"><div class="tileText">Edit content</div></div>
+                            <div id="tile4" class="tile"><div class="tileText">Results</div></div>
+                            <div id="tile5" class="tile"><div class="tileText">Log out</div></div>
+                            <div id="tile6" class="tile"><div class="tileText">Help</div></div>
+                            <div style="clear:both;"></div>
+                        </div>
+                    </div>
+                    <div id="pageInfo" class="right1">
+                        <div class="rightContainer">
+                            <div id="descriptionTitle" class="descriptionText" >
+                                <div id="description" class="descriptionTitle">Description</div>    
+                                A description, welcome text or simple guide to operation goes here. This 1/4 screen block is consistently present in all interface screens, to show relevant information to the user or guide them through the process. 
+
+
+                            </div>
+                        </div>
+
+                    </div>
+                </div>
+            </div>
+
+        </div>
+
+    </body>
+
+</html>
Index: /Dev/branches/Cartis/Tiles preview/js/dashboardScripts.js
===================================================================
--- /Dev/branches/Cartis/Tiles preview/js/dashboardScripts.js	(revision 277)
+++ /Dev/branches/Cartis/Tiles preview/js/dashboardScripts.js	(revision 278)
@@ -263,15 +263,5 @@
     
 function configureDashboard() {
-    var data = JSON.stringify(shoppingCart);
-    var form = ce("form");
-    //changed to dashboardGraphSelection.php
-    form.action = "dashboardGraphSelection.php";
-    form.method = "POST";
-    var input = ce("input");
-    input.type = "hidden";
-    input.name = "selectedData";
-    input.value = data;
-    form.appendChild(input);
-    form.submit();
+    mockup.api.loadPage("graphSelection", false);
 }
 
@@ -393,2 +383,3 @@
     doorstuurData.count++;
 }
+
Index: /Dev/branches/Cartis/Tiles preview/js/nav.js
===================================================================
--- /Dev/branches/Cartis/Tiles preview/js/nav.js	(revision 277)
+++ /Dev/branches/Cartis/Tiles preview/js/nav.js	(revision 278)
@@ -1,12 +1,7 @@
 $(function() {
-    //Switchpage
-    
+        
     mockup = {
         api: {
             clickTile: function(thisElement, url) {
-                // clear self
-                while (thisElement.firstChild) {
-                    thisElement.removeChild(thisElement.firstChild);
-                }
                 // clear frame
                 $(".basePanel").children().remove();
@@ -14,13 +9,80 @@
             
             },
-            loadPage: function(name) {
+            loadPage: function(name, conf) {
+                debugger;
+                if (conf) {
+                    if (!confirm("Are you sure you want to go back? You will lose your selected data.")) {
+                        return;
+                    }
+                }
+                
+                $(".basePanel").children().remove();
+                
                 $.get("pages/"+name+".html", function(responseText, textStatus, XMLHttpRequest) {
                     $(".basePanel").append(responseText);
                     $.getScript("pages/"+name+".js", function(responseText, textStatus, XMLHttpRequest){
-                        debugger;
-                    })
+                        
+                        })
                 });
-            
-            }
+                mockup.api.breadcrumbs.navTo(name);
+            },
+            breadcrumbs: new (function() {
+                var _crumbs = ["Home"];
+                var _element = document.getElementById('breadcrumbs');
+                this.init = function() {
+                    updateDiv();
+                }
+                
+                this.navTo = function(name) {
+                    // Check of 'name' al in crumbs staat.
+                    // Als wel: navBack, delete alle crumbs na 'name', update div.
+                    // Als niet: addCrumb, voeg 'name' toe aan crumbs en update de div.
+                    var index = _crumbs.indexOf(name);
+                    if (index != -1) {
+                        navBack(name, index);
+                    }
+                    else {
+                        addCrumb(name);
+                    }
+                }
+                
+                var addCrumb = function(name) {
+                    _crumbs.push(name);
+                    updateDiv();
+                }
+                
+                var navBack = function(name, index) {
+                    var i = index;
+                    _crumbs = _crumbs.slice(0, i+1);
+                    updateDiv();
+                }
+                
+                var updateDiv = function() {
+                    //format first
+                    _element.innerHTML = null || "";
+                    for (var n=0; n < _crumbs.length; n++) {
+                        if (_crumbs[n] == "Home") {
+                            var word = document.createTextNode("Home");
+                            _element.appendChild(word);
+                            
+                        }
+                        else{
+                        
+                            var link = document.createElement('a');
+                            link.innerHTML = _crumbs[n];
+                            link.setAttribute("onclick", "mockup.api.loadPage('"+_crumbs[n]+"', true);");
+                            link.setAttribute("href","#");
+                            _element.appendChild(link);
+                        }
+                        
+                        if (n != _crumbs.length-1) {
+                            _element.innerHTML += " > ";
+                        }
+                        else {
+                            link.className = "selected";
+                        }
+                    }
+                }
+            })()
         
         }
Index: /Dev/branches/Cartis/Tiles preview/pages/dataSelection.js
===================================================================
--- /Dev/branches/Cartis/Tiles preview/pages/dataSelection.js	(revision 277)
+++ /Dev/branches/Cartis/Tiles preview/pages/dataSelection.js	(revision 278)
@@ -1,1 +1,0 @@
-//COMMENT yo
Index: /Dev/branches/Cartis/Tiles preview/pages/graphSelection.html
===================================================================
--- /Dev/branches/Cartis/Tiles preview/pages/graphSelection.html	(revision 278)
+++ /Dev/branches/Cartis/Tiles preview/pages/graphSelection.html	(revision 278)
@@ -0,0 +1,26 @@
+<div id="tiles" class="left3">
+    <div class="leftContainer">
+        <div id="selectData" class="staticTile doubleHeight"><div class="tileHeader">Data selection</div>
+            <select multiple id="select_selectData" class="tileField multipleSelect">
+                
+            </select>
+        </div>
+
+        <div id="selectGraph" class="staticTile doubleHeight doubleWidth"><div class="tileHeader">Graph selection</div>
+
+        </div>
+
+
+        <div style="clear:both;"></div>
+    </div>
+</div>
+<div id="cart" class="right1">
+    <div id="selectedGraphs" class="staticTile doubleHeight"><div class="tileHeader">Dashboard</div>
+        <div class="content" id="selectedGraphsContent">
+
+        </div>
+        <div class="controls">
+            <input type="button" class="smallButton" id="btnConfigureDashboard" value="Configure Dashboard" onClick="configureDashboard();" />
+        </div>
+    </div>
+</div>
Index: /Dev/branches/Cartis/Tiles preview/pages/graphSelection.js
===================================================================
--- /Dev/branches/Cartis/Tiles preview/pages/graphSelection.js	(revision 278)
+++ /Dev/branches/Cartis/Tiles preview/pages/graphSelection.js	(revision 278)
@@ -0,0 +1,16 @@
+$(function() {
+   
+   
+   mockup.api.loadSelectedDataList = function() {
+       var _select = document.getElementById("select_selectData");
+       
+       for (var n = 0; n < shoppingCart.contents.titles.length; n++) {
+           var opt = document.createElement("option");
+           opt.value = shoppingCart.contents.uids[n];
+           opt.innerHTML = shoppingCart.contents.titles[n];
+           _select.appendChild(opt);
+       }
+   }
+   
+   mockup.api.loadSelectedDataList();
+});
Index: /Dev/branches/Cartis/Tiles preview/pages/login.html
===================================================================
--- /Dev/branches/Cartis/Tiles preview/pages/login.html	(revision 278)
+++ /Dev/branches/Cartis/Tiles preview/pages/login.html	(revision 278)
@@ -0,0 +1,26 @@
+
+<div id="tiles" class="left3">
+    <div class="leftContainer">
+        <div id="tile1" class="staticTile">
+            <label for="loginForm_name" style="display: block; clear: left; width: 100px;">Name</label><input type="text" id="loginForm_name" onclick="event.stopPropagation();" />
+            <label for="loginForm_password" style="display: block; clear: left; width: 100px;">Password</label><input type="password" id="loginForm_password" onclick="event.stopPropagation();" />
+            <div class="tileText" style="margin-top: 115px;"><input type="button" value="Log in" id="btnLogin" onclick="mockup.api.clickTile(this, 'dataSelection');" /><input type="button" value="Register" id="btnRegister" /></div></div>
+        <div id="tile2" class="staticTile"><div class="tileText"></div></div>
+        <div id="tile3" class="staticTile"><div class="tileText"></div></div>
+        <div id="tile4" class="staticTile"><div class="tileText"></div></div>
+        <div id="tile5" class="staticTile"><div class="tileText"></div></div>
+        <div id="tile6" class="staticTile"><div class="tileText"></div></div>
+        <div style="clear:both;"></div>
+    </div>
+</div>
+<div id="pageInfo" class="right1">
+    <div class="rightContainer">
+        <div id="descriptionTitle" class="descriptionText" >
+            <div id="description" class="descriptionTitle">Description</div>    
+            A description, welcome text or simple guide to operation goes here. This 1/4 screen block is consistently present in all interface screens, to show relevant information to the user or guide them through the process. 
+
+
+        </div>
+    </div>
+
+</div>
Index: /Dev/branches/Cartis/Tiles preview/pages/login.js
===================================================================
--- /Dev/branches/Cartis/Tiles preview/pages/login.js	(revision 278)
+++ /Dev/branches/Cartis/Tiles preview/pages/login.js	(revision 278)
@@ -0,0 +1,3 @@
+$(function(){
+   //NOTHING BRAH 
+});
Index: v/branches/Cartis/Tiles preview/pages/testPage.html
===================================================================
--- /Dev/branches/Cartis/Tiles preview/pages/testPage.html	(revision 277)
+++ 	(revision )
@@ -1,22 +1,0 @@
-<div id="tiles" class="left3">
-                        <div class="leftContainer">
-                            <div id="tile1" class="tile" onclick="mockup.api.clickTile(this, 'testPage')"><div class="tileText">Browse sessions</div></div>
-                            <div id="tile2" class="tile"><div class="tileText">Templates</div></div>
-                            <div id="tile3" class="tile"><div class="tileText">Edit content</div></div>
-                            <div id="tile4" class="tile"><div class="tileText">Results</div></div>
-                            <div id="tile5" class="tile"><div class="tileText">Log out</div></div>
-                            <div id="tile6" class="tile"><div class="tileText">Help</div></div>
-                            <div style="clear:both;"></div>
-                        </div>
-                    </div>
-                    <div id="pageInfo" class="right1">
-                        <div class="rightContainer">
-                            <div id="descriptionTitle" class="descriptionText" >
-                                <div id="description" class="descriptionTitle">Description</div>    
-                                A description, welcome text or simple guide to operation goes here. This 1/4 screen block is consistently present in all interface screens, to show relevant information to the user or guide them through the process. 
-
-
-                            </div>
-                        </div>
-
-                    </div>
Index: v/branches/Cartis/Tiles preview/tiles1.html
===================================================================
--- /Dev/branches/Cartis/Tiles preview/tiles1.html	(revision 277)
+++ 	(revision )
@@ -1,65 +1,0 @@
-<!--
-To change this template, choose Tools | Templates
-and open the template in the editor.
--->
-<!DOCTYPE html>
-<html>
-    <head>
-        <title></title>
-        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-        <link rel="stylesheet" href="css/tile1.css" />
-        <script type="text/javascript" src="js/generalScripts.js"></script>
-        <script type="text/javascript" src="js/jquery.js"></script>
-        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
-        <script src="js./nav.js"></script>
-    </head>
-    <body>
-        <div id="header">
-            <div id="upperBar">
-                <div class="content">
-                </div>
-            </div>
-            <div id="lowerBar">
-                <div class="content">               
-                </div>
-                <div class="breadcrumbs">     
-                </div>
-            </div>
-
-            <div id="wrapper">
-                <div id="content">
-                    <div class="basePanel">
-                        <div id="tiles" class="left3">
-                            <div class="leftContainer">
-                                <div id="tile1" class="tile" onclick="mockup.api.clickTile(this, 'dataSelection')"><div class="tileText">Create Dashboard</div></div>
-                                <div id="tile2" class="tile"><div class="tileText">Templates</div></div>
-                                <div id="tile3" class="tile"><div class="tileText">Edit content</div></div>
-                                <div id="tile4" class="tile"><div class="tileText">Results</div></div>
-                                <div id="tile5" class="tile"><div class="tileText">Log out</div></div>
-                                <div id="tile6" class="tile"><div class="tileText">Help</div></div>
-                                <div style="clear:both;"></div>
-                            </div>
-                        </div>
-                        <div id="pageInfo" class="right1">
-                            <div class="rightContainer">
-                                <div id="descriptionTitle" class="descriptionText" >
-                                    <div id="description" class="descriptionTitle">Description</div>    
-                                    A description, welcome text or simple guide to operation goes here. This 1/4 screen block is consistently present in all interface screens, to show relevant information to the user or guide them through the process. 
-
-
-                                </div>
-                            </div>
-
-                        </div>
-                    </div>
-                </div>
-
-            </div>
-
-            <!--          <div id="footerInfo">
-                            asdasd
-                        </div>
-            -->
-    </body>
-
-</html>
