Bungloo/WebKit/scripts/controller/Sidebar.js

define([
    "helper/HostApp",
    "helper/Paths",
    "helper/Cache"
],

function(HostApp, Paths, Cache) {


    function Sidebar() {

        this.cache = new Cache();

        this.body = document.createElement("ul");
        this.body.class = "sidebar";

        var _this = this;

        this.menu = {};

        this.menu.user = this.createItem("User", function() { _this.onEntity(); return false; }, "img/sidebar/user.png", "img/sidebar/user.png");
        this.menu.timeline = this.createItem("Timeline", function() { _this.onTimeline(); return false; }, "img/sidebar/timeline.png", "img/sidebar/timeline_active.png", true);
        this.menu.mentions = this.createItem("Mentions", function() { _this.onMentions(); return false; }, "img/sidebar/mentions.png", "img/sidebar/mentions_active.png");
        
        this.menu.conversation = this.createItem("Conversation", function() { _this.onConversation(); return false; }, "img/sidebar/conversation.png", "img/sidebar/conversation_active.png");
        this.menu.entityProfile = this.createItem("Profile", function() { _this.onEntityProfile(); return false; }, "img/sidebar/profile.png", "img/sidebar/profile_active.png");
        this.menu.search = this.createItem("Search", function() { _this.onSearch(); return false; }, "img/sidebar/search.png", "img/sidebar/search_active.png")

        this.body.appendChild(this.menu.user);
        this.body.appendChild(this.menu.timeline);
        this.body.appendChild(this.menu.mentions);
        this.body.appendChild(this.menu.conversation);
        this.body.appendChild(this.menu.entityProfile);
        this.body.appendChild(this.menu.search);

        document.getElementById("sidebar").appendChild(this.body);

        this.setEntityAvatar();
    }

    Sidebar.prototype.createItem = function(name, callback, src_inactive, src_active, active) {

        var li = document.createElement("li");
        li.className = "sidebar-" + name.toLowerCase();
        li.active = false;
        li.title = name;
        li.name = name;
        
        var a = document.createElement("a");
        a.href = "#";
        a.onclick = callback;

        var img = document.createElement("img");
        img.src = active ? src_active : src_inactive;
        img.src_inactive = src_inactive;
        img.src_active = src_active;
        img.alt = name;

        a.appendChild(img);
        li.appendChild(a);

        return li;
    }

    Sidebar.prototype.setEntityAvatar = function() {

        var entity = HostApp.stringForKey("entity");
        this.menu.user.title = entity;

        var img = this.menu.user.getElementsByTagName("img")[0];

        var _this = this;

        var profile_callback = function(p) {

            var basic = p["https://tent.io/types/info/basic/v0.1.0"];

            if (p && basic) {
                if(basic.name) {
                    _this.menu.user.title = basic.name;
                }
                if(basic.avatar_url) {

                    img.onerror = function() {
                        img.src = "img/sidebar/user.png";
                        img.src_inactive = img.src;
                        img.src_active = img.src;
                    }

                    img.src = basic.avatar_url;
                    img.src_inactive = basic.avatar_url;
                    img.src_active = basic.avatar_url;

                }
            }

        }

        var p = this.cache.profiles.getItem(entity);

        if (p && p != "null") {

            profile_callback(p);

        } else {

            Paths.findProfileURL(entity, function(profile_url) {

                if (profile_url) {
                    Paths.getURL(profile_url, "GET", function(resp) {
                        var p = JSON.parse(resp.responseText);
                        if (p && p != "null") {
                            _this.cache.profiles.setItem(entity, p);
                            profile_callback(p);
                        }

                    }, null, false); // do not send auth-headers
                }
            });
        }
    }

    Sidebar.prototype.showContentFor = function(active_part, active_li) {
        
        // Show active content
        var parts = [
            bungloo.timeline,
            bungloo.mentions,
            bungloo.conversation,
            bungloo.entityProfile,
            bungloo.search
        ];

        for (var i = 0; i < parts.length; i++) {
            if (parts[i] != active_part && parts[i] != null) {
                parts[i].hide();
            }
        }

        active_part.show();

        // Show active icon
        for(var li in this.menu) {
            if (this.menu[li] != active_part) {
                var img = this.menu[li].getElementsByTagName("img")[0];
                img.src = img.src_inactive;
            }
        }

        var img = active_li.getElementsByTagName("img")[0];
        img.src = img.src_active;
    }

    Sidebar.prototype.onEntity = function() {
        bungloo.entityProfile.showProfileForEntity();
        this.onEntityProfile();
    }

    Sidebar.prototype.onTimeline = function() {
        this.showContentFor(bungloo.timeline, this.menu.timeline);
    }

    Sidebar.prototype.onMentions = function() {
        this.showContentFor(bungloo.mentions, this.menu.mentions);
        bungloo.mentions.setAllMentionsRead();
    }

    Sidebar.prototype.onConversation = function() {
        this.showContentFor(bungloo.conversation, this.menu.conversation);
    }

    Sidebar.prototype.onEntityProfile = function() {
        this.showContentFor(bungloo.entityProfile, this.menu.entityProfile);
    }

    Sidebar.prototype.onSearch = function() {
        this.showContentFor(bungloo.search, this.menu.search);
    }

    return Sidebar;

});