var thisUser;
var currentPage = -1;
var currentPanel;

$(document).ready(function () {
    thisUser = new User(uid);
    change("clossit", "#clossit");
});

function User(id) {
    this.id = id;

    this.getClossit = function(page, results) {
        this.pagedApiCall(page, results, new Query("q=clossit"), function(json) {
            setStream(renderClothingList(json));
        });
    };

    this.getFollowing = function(page, results) {
        this.pagedApiCall(page, results, new Query("q=following"), function(json) {
            setStream(renderFollowing(json));
        });
    };

    this.getSuggestions = function(page, results) {
        this.pagedApiCall(page, results, new Query("q=suggestions"), function(json) {
            setStream(renderClothingList(json));
        });
    };

    this.getStream = function(page, results) {
        this.pagedApiCall(page, results, new Query("q=stream"), function(json) {
            setStream(renderStream(json));
        });
    };

    this.comment = function (e, clothing) {
        if (event.keyCode != 13) return null;
        apiCall(new Query("q=comment").a("user", this.id).a("clothing", clothing).a("message", $(e).val()), function (json) {
            var html = renderComment(json.comment);
            $(".commentWrap." + clothing).append(html);
        });
        $(e).val(null);
        return false;
    };

    this.getInfo = function() {
        this.apiCall(new Query("q=basic"), function(json) {
            document.write(JSON.stringify(json));
        });
    };

    this.follow = function() {
        $(".follow").animate({ opacity: '0' }, 250, function() {
            apiCall(new Query("q=follow").a("user", this.id), function(json) {
                if (json.response == json.undefined)
                    $("#login").trigger('click');
                else if (json.response) $(".follow").attr("src", "/media/follow.png");
                else $(".follow").attr("src", "/media/unfollow.png");
                $(".follow").animate({ opacity: '1' }, 500);
            });
        });
    };

    this.apiCall = function(params, callback) {
        apiCall(params.a("id", this.id), callback);
    };

    this.pagedApiCall = function(page, results, params, callback) {
        this.apiCall(params.a("page", page).a("results", results), callback);
    };
}

function setStream(html) {
    $('.stream').append(html).fadeTo(250, 1.0);
}

function change(panel, e) {
    panel = panel.toLowerCase();
    switch (panel) {
        case "clossit":
            currentPanel = function() { thisUser.getClossit(currentPage, 60); };
            break;
        case "suggestions":
            currentPanel = function() { thisUser.getSuggestions(currentPage, 60); };
            break;
        case "stream":
            currentPanel = function() { thisUser.getStream(currentPage, 60); };
            break;
        case "following":
            currentPanel = function() { thisUser.getFollowing(currentPage, 60); };
            break;
    }
    $(".links.content span").removeClass("active");
    $(e).addClass("active");
    currentPage = -1;
    $('.stream').fadeTo(250, 0.0, function () {
        $('.stream').html('');
        more();
    });
}

function more() {
    currentPage++;
    currentPanel();
}

function renderStream(json) {
    var html = "";
    $.each(json, function (key, val) {
        html += renderStreamItem(val.clothing, val.owner, val.added, val.comments);
    });
    return html;
}

function renderFollowing(json) {
    var html = "";
    $.each(json, function (key, val) {
        html += renderUser(val);
    });
    return html;
}

function renderClothingList(json) {
    var html = "";
    $.each(json, function (key, val) {
        var img = val.wearing ? "/media/remove.png" : "/media/add.png";
        html += renderClothing(val.clothing, img);
    });
    return html;
}

function renderClothing(clothing, wearing) {
    var html = "";
    html += "<div class='box'>";
    html += "<a href='" + clothing.page + "'>";
    html += "<img class='productImage' src='" + thumb(clothing.image, 150) + "'>";
    html += "<div class='label'>" + clothing.name + "</div>";
    html += "</a>";
    html += "<div class='like'>";
    html += "<img onclick='wear(" + clothing.id + ",this)' width='38' height='38' src='" + wearing + "'>";
    html += "</div>";
    html += "</div>";
    return html;
}

function renderStreamItem(clothing, owner, added, comments) {
    var html = "";
    html += "<div class='post'>";
    html += "   <div class='postContent'>";
    html += "       <a href='" + owner.page + "'>";
    html += "           <img class='postAvatar' src='" + gravatar(owner.avatar, 50) + "'>";
    html += "       </a>";
    html += "        <div class='message'>";
    html += "            <a href='" + owner.page + "'>" + owner.name + "</a><br> added <a href='" + clothing.page + "'>" + clothing.name + "</a>";
    html += "        </div>";
    html += "       <div class='triangle right'></div>";
    html += "   </div>";
    html += "   <a href='" + clothing.page + "'>";
    html += "       <img class='postImage' src='" + thumb(clothing.image, 150) + "'>";
    html += "   </a>";
    html += "   <div class='commentBox'>";
    html += "       <div class='triangle left'></div>";
    html += "       <div class='comments'>";
    html += "           <div class='commentWrap " + clothing.id + "' >";
    $.each(comments, function (key, val) {
        html += renderComment(val);
    });
    html += "           </div>";
    html += "           <textarea onKeyPress='return thisUser.comment(this, " + clothing.id + ", " + owner.id + ")'/>";
    html += "       </div>";
    html += "   </div>";
    html += "</div>";
    return html;
}

function renderComment(comment) {
    var html = "";
    html += "<div class='comment'>";
    html += "   <a href='/u/" + comment.commenter + "/" + comment.commenterID + "'>" + comment.commenter + "</a>";
    html += "   <img class='' src='" + gravatar(comment.commenterAvatar, 30) + "'>";
    html += "   <div>" + comment.message + "</div>";
    html += "</div>";
    return html;
}

function renderUser(user) {
    var html = "";
    html += "<div class='friendBox'>";
    html += "    <a href='" + user.page + "'>";
    html += "    <img class='friendImage' src='" + gravatar(user.avatar, 178) + "'>";
    html += "        <div class='friendLabel'>" + user.name + "</div>";
    html += "    </a>";
    html += "</div>";
    return html;
}