$(function() {
        
    mockup = {
        api: {
            clickTile: function(thisElement, url) {
                // clear frame
                $(".basePanel").children().remove();
                mockup.api.loadPage(url);
            
            },
            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){
                        
                        })
                });
                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";
                        }
                    }
                }
            })()
        
        }
    
    
    }
});