(function(context,$) {

    "use strict";

    context.JK = context.JK || {};
    context.JK.BandProfileScreen = function(app) {
        var logger = context.JK.logger;
        var bandId;
        var band = {};
        var instrument_logo_map = context.JK.getInstrumentIconMap24();

        function beforeShow(data) {
            bandId = data.id;
        }

        function afterShow(data) {
            resetForm();
            events();
            renderActive();
        }

        function resetForm() {
            $('#band-profile-instruments').empty();

            $('#band-profile-about').show();
            $('#band-profile-history').hide();
            $('#band-profile-members').hide();
            $('#band-profile-social').hide();

            $('.band-profile-nav a.active').removeClass('active');
            $('.band-profile-nav a.#band-profile-about-link').addClass('active');
        }

        /****************** MAIN PORTION OF SCREEN *****************/

        function addFollowing(isBand, id) {
            var newFollowing = {};

            if (!isBand) {
                newFollowing.user_id = id;
            }
            else {
                newFollowing.band_id = id;
            }

            var url = "/api/users/" + context.JK.currentUserId + "/followings";
            $.ajax({
                type: "POST",
                dataType: "json",
                contentType: 'application/json',
                url: url,
                data: JSON.stringify(newFollowing),
                processData: false,
                success: function(response) {
                    renderActive();  // refresh stats
                    if (isBand) {
                        configureBandFollowingButton(true);
                    }
                    else {
                        configureMemberFollowingButton(true);
                    }
                },
                error: app.ajaxError
            });
        }

        function removeFollowing(isBand, id) {
            var following = {};
            if (!isBand) {
                following.user_id = id;
            }
            else {
                following.band_id = id;
            }

            var url = "/api/users/" + context.JK.currentUserId + "/followings";
            $.ajax({
                type: "DELETE",
                dataType: "json",
                contentType: 'application/json',
                url: url,
                data: JSON.stringify(following),
                processData: false,
                success: function(response) {
                    renderActive();  // refresh stats
                    if (isBand) {
                        configureBandFollowingButton(false);
                    }
                    else {
                        configureMemberFollowingButton(false, id);
                    }
                },
                error: app.ajaxError
            });
        }

        function isFollowingMember(userId) {
            var alreadyFollowing = false;

            var url = "/api/users/" + context.JK.currentUserId + "/followings/" + userId;
            $.ajax({
                type: "GET",
                dataType: "json",
                url: url,
                async: false,
                processData: false,
                success: function(response) {
                    if (response.id !== undefined) {
                        alreadyFollowing = true;
                    }
                    else {
                        alreadyFollowing = false;
                    }
                },
                error: app.ajaxError
            });

            return alreadyFollowing;
        }

        function isFollowing() {
            var alreadyFollowing = false;

            var url = "/api/users/" + context.JK.currentUserId + "/band_followings/" + bandId;
            $.ajax({
                type: "GET",
                dataType: "json",
                url: url,
                async: false,
                processData: false,
                success: function(response) {
                    if (response.id !== undefined) {
                        alreadyFollowing = true;
                    }
                    else {
                        alreadyFollowing = false;
                    }
                },
                error: app.ajaxError
            });

            return alreadyFollowing;
        }

        function configureBandFollowingButton(following) {
            $('#btn-follow-band').unbind("click");

            if (following) {
                $('#btn-follow-band').text('STOP FOLLOWING');
                $('#btn-follow-band').click(function() {
                    removeFollowing(true, bandId);
                });
            }
            else {
                $('#btn-follow-band').text('FOLLOW');
                $('#btn-follow-band').click(function() {
                    addFollowing(true, bandId);
                });
            }
        }

        function configureMemberFollowingButton(following, userId) {
            var $btnFollowMember = $('div[user-id=' + userId + ']', '#band-profile-members').find('#btn-follow-member');
            $btnFollowMember.unbind("click");

            if (following) {
                $btnFollowMember.text('UN-FOLLOW');
                $btnFollowMember.click(function() {
                    removeFollowing(false, userId);
                });
            }
            else {
                $btnFollowMember.text('FOLLOW');
                $btnFollowMember.click(function() {
                    addFollowing(false, userId);
                });
            }
        }

        // refreshes the currently active tab
        function renderActive() {
            if ($('#band-profile-about-link').hasClass('active')) {
                renderAbout();
            }
            else if ($('#band-profile-history-link').hasClass('active')) {
                renderHistory();
            }
            else if ($('#band-profile-members-link').hasClass('active')) {
                renderMembers();
            }
            else if ($('#band-profile-social-link').hasClass('active')) {
                renderSocial();
            }
        }

        /****************** ABOUT TAB *****************/
        function renderAbout() {

            $('#band-profile-about').show();
            $('#band-profile-history').hide();
            $('#band-profile-members').hide();
            $('#band-profile-social').hide();

            $('.band-profile-nav a.active').removeClass('active');
            $('.band-profile-nav a.#band-profile-about-link').addClass('active');

            bindAbout();
        }

        function bindAbout() {
            var url = "/api/bands/" + bandId;
            $.ajax({
                type: "GET",
                dataType: "json",
                url: url,
                async: false,
                processData:false,
                success: function(response) {
                    band = response;
                },
                error: app.ajaxError
            });

            if (band) {

                // name
                $('#band-profile-name').html(band.name);

                // avatar
                $('#band-profile-avatar').attr('src', context.JK.resolveAvatarUrl(band.photo_url));

                // location
                $('#band-profile-location').html(band.location);

                // stats
                var text = band.follower_count > 1 || band.follower_count == 0 ? " Followers" : " Follower";
                $('#band-profile-follower-stats').html(band.follower_count + text);

                text = band.session_count > 1 || band.session_count == 0 ? " Sessions" : " Session";
                $('#band-profile-session-stats').html(band.session_count + text);

                text = band.recording_count > 1 || band.recording_count == 0 ? " Recordings" : " Recording";
                $('#band-profile-recording-stats').html(band.recording_count + text);

                $('#band-profile-biography').html(band.biography);
            }
            else {

            }
        }

        /****************** SOCIAL TAB *****************/
        function renderSocial() {
            $('#band-profile-social-followers').empty();

            $('#band-profile-about').hide();
            $('#band-profile-history').hide();
            $('#band-profile-members').hide();
            $('#band-profile-social').show();

            $('.band-profile-nav a.active').removeClass('active');
            $('.band-profile-nav a.#band-profile-social-link').addClass('active');

            bindSocial();
        }

        function bindSocial() {
            // FOLLOWERS
            url = "/api/bands/" + bandId + "/followers";
            $.ajax({
                type: "GET",
                dataType: "json",
                url: url,
                async: false,
                processData:false,
                success: function(response) {
                    $.each(response, function(index, val) {
                        var template = $('#template-band-profile-social').html();
                        var followerHtml = context.JK.fillTemplate(template, {
                            avatar_url: context.JK.resolveAvatarUrl(val.photo_url),
                            userName: val.name,
                            location: val.location
                        });

                        $('#band-profile-social-followers').append(followerHtml);
                    });
                },
                error: app.ajaxError
            });
        }

        /****************** HISTORY TAB *****************/
        function renderHistory() {
            $('#band-profile-about').hide();
            $('#band-profile-history').show();
            $('#band-profile-members').hide();
            $('#band-profile-social').hide();

            $('.band-profile-nav a.active').removeClass('active');
            $('.band-profile-nav a.#band-profile-history-link').addClass('active');

            bindHistory();        
        }

        function bindHistory() {

        }

        /****************** BANDS TAB *****************/
        function renderMembers() {
            $('#band-profile-members').empty();

            $('#band-profile-about').hide();
            $('#band-profile-history').hide();
            $('#band-profile-members').show();
            $('#band-profile-social').hide();

            $('.band-profile-nav a.active').removeClass('active');
            $('.band-profile-nav a.#band-profile-members-link').addClass('active');

            bindMembers();
        }

        function bindMembers() {
            var url = "/api/bands/" + bandId + "/musicians";
            $.ajax({
                 type: "GET",
                 dataType: "json",
                 url: url,
                 async: false,
                 processData:false,
                 success: function(response) {
                     $.each(response, function(index, val) {
                        var instrumentLogoHtml = '';
                        var musician = val;
                        if ("instruments" in musician) {
                            for (var j=0; j < musician.instruments.length; j++) {
                                var instrument = musician.instruments[j];
                                var inst = '../assets/content/icon_instrument_default24.png';
                                if (instrument.instrument_id in instrument_logo_map) {
                                    inst = instrument_logo_map[instrument.instrument_id];
                                }
                                instrumentLogoHtml += '<img src="' + inst + '" width="24" height="24" />&nbsp;';
                            }
                        }

                         var template = $('#template-band-profile-members').html();
                         var memberHtml = context.JK.fillTemplate(template, {
                            userId: musician.id,
                            profile_url: "/#/profile/" + musician.id,
                            avatar_url: context.JK.resolveAvatarUrl(musician.photo_url),
                            name: musician.name,
                            location: musician.location,
                            biography: musician.biography,
                            friend_count: musician.friend_count,
                            follower_count: musician.follower_count,
                            recording_count: musician.recording_count,
                            session_count: musician.session_count,
                            instruments: instrumentLogoHtml
                         });

                         $('#band-profile-members').append(memberHtml);

                         // wire up Follow button click handler
                         var following = isFollowingMember(musician.id);
                         configureMemberFollowingButton(following, musician.id);

                         // TODO: wire up Friend button click handler
                         // var friend = isFriend(musician.id);
                         // configureMemberFriendButton(friend, musician.id);
                     });
                 },
                 error: app.ajaxError
            });
        }

        function formatGenres(genres) {
            var formattedGenres = '';
            if (genres) {
                for (var i=0; i < genres.length; i++) {
                    var genre = genres[i];
                    formattedGenres += genre.description;
                    if (i < genres.length -1) {
                        formattedGenres += ', ';
                    }
                }
            }
            return formattedGenres;
        }

        // events for main screen
        function events() {
            // wire up panel clicks
            $('#band-profile-about-link').click(renderAbout);
            $('#band-profile-history-link').click(renderHistory);
            $('#band-profile-members-link').click(renderMembers);
            $('#band-profile-social-link').click(renderSocial);

            // wire up Follow click
            var following = isFollowing();
            configureBandFollowingButton(following);
        }

        function initialize() {
            var screenBindings = {
                'beforeShow': beforeShow,
                'afterShow': afterShow
            };
            app.bindScreen('bandProfile', screenBindings);
        }


        this.initialize = initialize;
        this.beforeShow = beforeShow;
        this.afterShow = afterShow;
        return this;
    };

 })(window,jQuery);