source: Dev/branches/Cartis/Tiles preview/Tests/js/menu.js @ 276

(function(){
        
    function QuestionMenu() {
        
        var self = this;
        var _element;
       
        this.init = function() {
            if (self._element == null || self._element == undefined) {
                self._element = $("<div>").attr("id","menuContainer");
                $("#content").append(self._element);
            }
        };
        this.init();
        
        this.loadContents = function (data) {
            // IN this function we are going to load the mock database, and create instances of the various classes where appropriate, then initialize them.
            var _subcatCount = 0;
            for (var key in data) {
                if (!(data[key] instanceof Function)) {
                    // This is a subcat!!
                    debugger;
                    var subcat = new Subcat(key);
                    var header = new SubcatHeader(key);
                    // Add a header
                    subcat.addHeader(header);
                    self._element.append(subcat.header().element());
                    for (var n = 0; n < data[key].length; n++) {
                        //Add question displays to the subcat container
                        var qData = data[key][n];
                        var question = new Question(qData.text, qData.type, qData.uid);
                        var display = new QuestionDisplay(question, true); // True means full mode, for display in menu, not in header.
                        subcat.addDisplay(display);
                    }
                    self._element.append(subcat.element());
                }
            }   
        }
    }
    window.QuestionMenu = QuestionMenu;
    
    
    function Subcat(title) {
        var self = this;
        var _title, _displays, _header, _containerElement;
        
        this.init = function(title){
            self._title = title;
            self._displays = [];
            self._containerElement = $("<div>").attr("id", "subcat_"+title).addClass("subcatContainer collapsed");
        };
        self.init(title);
        
        this.addDisplay = function(display) {
            self._displays.push(display);
            self._containerElement.append(display.element());
        }
        
        this.addHeader = function(header) {
            self._header = header;
        }
        
        this.element = function() {
            return self._containerElement;
        }
        
        this.header = function() {
            return self._header;
        }
    }
    window.Subcat = Subcat;
    
    function SubcatHeader(title) {
        var _element;
        var self = this;
        var _title = title;
        var _template = '<p class="subcatTitle">_TITLE</p><div class="questionDisplay"><img class="icon_small left" src="images/questionIconS3.png"/><span class="questionTitle">_QTITLE</span><div class="smallButton right">Add ></div><img class="icon_small right" src="images/inspectIconS.png"/></div><img class="arrowIcon open" src="images/arrow_closed.png"/>';
        
        this.init = function(id) {
            var markup = _template;
            markup = markup.replace("_TITLE", _title);
            markup = markup.replace("_QTITLE", "derpaderp");
            self._element = $("<div>").addClass("subcatHeader").attr("id", "subcatHeader_"+id).html(markup);
            self._element.children().filter(".arrowIcon").bind("click", self.toggleState);
        };
        
        
        this.element = function () {
            return self._element;
        }
        
        this.toggleState = function(event) {
            debugger;
            var id = event.target.parentNode.id.toString().split("subcatHeader_")[1];
            var el = $("#subcat_"+id);
            if (el.hasClass("collapsed")) el.removeClass("collapsed").addClass("open");
            else if (el.hasClass("open")) el.removeClass("open").addClass("collapsed");
        }
        self.init(_title);    
    }
    window.SubcatHeader = SubcatHeader;
   
    function Question(text, type, uid) {
        var self = this;
        var _uid;
        var _text;
        var _type;
        
        this.init = function(text, type, uid) {
            self._text = text;
            self._type = type;
            self._uid = uid;
        }
        self.init(text, type, uid);
        
        this.getUid = function() {
            return self._uid;
        }
        this.getText = function() {
            return self._text;
        }
        
        this.getType = function() {
            return self._type;
        }
    }
    window.Question = Question;
   
    function QuestionDisplay(question, fullMode) {
        var self = this;
        var _fullMode, _question, _element;
        var _template = '<img class="icon_small left" src="images/questionIconS3.png"/><span class="questionTitle">_TITLE</span><span class="questionAnswers">_ANSWERS</span><img class="icon_small right" src="images/inspectIconS.png"/>';
        
        this.init = function(q, fM) {
            debugger;
            self._question = q;
            self._fullMode = fM;
            var markup = _template;
            markup = markup.replace("_TITLE", self._question._text);
            markup = markup.replace("_ANSWERS", "802 answers");
            self._element = $("<div>").attr("id", question.getUid()).addClass("questionDisplay").html(markup);
        };
        self.init(question, fullMode);
        
        this.element = function() {
            return self._element;
        }
    }
    window.QuestionDisplay = QuestionDisplay;


})();