$(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();
   
   
    mockup.api.drawGraphPreview = function(type) {
        debugger;
        
        var selected = false, el = document.getElementById("select_selectData");
        for (var n = 0; n < el.options.length; n++) {
            if (el.options[n].selected == true) {
                selected = true;
            }
        }
        if (!selected) return;
        
        mockup.api.graphs.previewGraph = new Graph("graphContainer");
        mockup.api.graphs.previewGraph._container.innerHTML = "";
        mockup.api.graphs.previewGraph.init("previewGraph", [40,50,60], type, [459,250]);
    }
   
    function initPage() {
        document.getElementById("btnPie").addEventListener("click", function(event) {
            mockup.api.drawGraphPreview("Pie");
        }, true);
        
        document.getElementById("btnRadar").addEventListener("click", function(event) {
            mockup.api.drawGraphPreview("Radar");
        }, true);
        
        document.getElementById("btnRose").addEventListener("click", function(event) {
            mockup.api.drawGraphPreview("Rose");
        }, true);
        
        document.getElementById("btnBar").addEventListener("click", function(event) {
            mockup.api.drawGraphPreview("Bar");
        }, true);
        
    }
    
    mockup.api.addToDash = function() {
        debugger;
        var type = mockup.api.graphs.previewGraph.getType();
        var selectedOptions = [];
        var name;
        var el = document.getElementById('select_selectData');
        for (var n = 0; n < el.options.length; n++) {
            if (el.options[n].selected == true) {
                selectedOptions.push(el.options[n]);
            }
        }
        var option = selectedOptions[0] || null;
        var graphs = document.getElementById('selectedGraphsContent');
               
        var newLine = ce("div");
        newLine.className = "shoppingCartItem";
        newLine.id = option.value;
        var icon = ce("image");
        $(icon).css("float", "right");
        icon.src = "images/ui/DeleteIcon.png";
        icon.addEventListener("click", function(event){
            // TODO: Actually write this function
            debugger;
            for (var n = 0; n < mockup.api.graphs.dashboard.length; n++) {
                var name = icon.previousSibling.innerHTML.split(" - ")[0];
                if (mockup.api.graphs.dashboard[n][0] == name) {
                    mockup.api.graphs.dashboard.splice(n, 1);
                    break;
                }
            }
            var parent = icon.parentNode;
            parent.parentNode.removeChild(parent);
                        
            }, false);
        var titleField = ce("text");
        name = option.innerHTML;
        titleField.innerHTML = name+" - ("+type+")";
        newLine.appendChild(titleField);
        newLine.appendChild(icon);
        graphs.appendChild(newLine);
        
        //Write settings to dashboard array.
        mockup.api.graphs.dashboard.push([name, [40,50,60], type, [459,250]]);
        
    }
    
    initPage();
   
   
   
});