ScheduleView

MyScheduleView;
FriendScheduleView;
SelectedScheduleView;
var current_selected_friend_team = null;
var _is_shown = false;
preloaderGlobal; // globalVariables.js

var ScheduleView = Backbone.View.extend({
    initialize: function() {
        this.$el.hide();
        this.$el.append($("<div>").attr("id", "schedule_myschedule_view"));
        this.$el.append($("<div>").attr("id", "schedule_friendschedules_view"));
        this.$el.append($("<div>").attr("id", "schedule_selectedschedule_view"));

        this.mySchedule = new MyScheduleView({
            el: "#schedule_myschedule_view"
        });
        this.friendSchedule = new FriendScheduleView({
            el: "#schedule_friendschedules_view"
        });
        this.selectedSchedule = new SelectedScheduleView({
            el: "#schedule_selectedschedule_view"
        });
        this.render();
    },
    mySchedule: null,
    friendSchedule: null,
    selectedSchedule: null,
    events: {
        "click #schedule_myschedule": "myScheduleClick",
        "click #schedule_friendschedule": "friendScheduleClick",
        "click .schedule_boxbutton": "boxScoreClick"
    },
    shownItem: 0, // zero for my schedule 1 for friend schedule
    shownItemForFriend: 0, // 0 for friend list, 1 for selected friend
    /* event functions */
    myScheduleClick: function(e) {
        $(e.target).addClass('active').siblings('.active').removeClass('active');
        if (this.shownItem != 0) {
            this.mySchedule.show();
            this.friendSchedule.hide();
            this.selectedSchedule.hide();
            this.shownItem = 0;
        }
        fecthTeam();
    },
    friendScheduleClick: function(e) {
        $(e.target).addClass('active').siblings('.active').removeClass('active');
        if (this.shownItem == 0) {
            if (this.shownItemForFriend == 0) {
                this.friendSchedule.show();
                this.mySchedule.hide();
                this.selectedSchedule.hide();
            } else {
                if (current_selected_friend_team)
                    this.selectedSchedule.show(current_selected_friend_team);
                this.mySchedule.hide();
                this.friendSchedule.hide();
            }
        } else {
            this.friendSchedule.show();
            this.mySchedule.hide();
            this.selectedSchedule.hide();
            this.shownItemForFriend = 0;
            _is_shown = false;
        }
        this.shownItem = 1;
    },

    friendSelected: function(teamId) {
        this.friendSchedule.hide();
        this.selectedSchedule.show(teamId);
        this.shownItemForFriend = 1;
    },

    isShown: 0,
    removeScroll: function() {
        var scroll = $('#schedule_pagescroll');
        var jspData = scroll.data('jsp');
        if (jspData != null && jspData != undefined) {
            jspData.destroy();
        }
    },
    reinitialiseScroll: function() {
        var scroll = $('#schedule_pagescroll');
        var jspData = scroll.data('jsp');
        if (jspData != null && jspData != undefined) {
            scroll.data('jsp').reinitialise();
        }
    },
    addScroll: function() {
        var scroll = $('#schedule_pagescroll');
        scroll.jScrollPane();
    },
    show: function() {
        if (this.isShown == 0) {
            commonShow(this.$el);
            this.friendSchedule.hide();
            this.selectedSchedule.hide();
            this.mySchedule.show();
            this.isShown = 1;
            this.reinitialiseScroll();
        }
    },

    hide: function() {
        if (this.isShown == 1) {
            commonHide(this.$el);
            this.isShown = 0;
        }
    },

    generateImage: function(url, custom_css) {
        var img = '<img style=' + custom_css + ' src="' + url + '">';
        return img;
    },

    loadDefaultLogo: function(logo_file_name, custom_css) {
        custom_css = custom_css || '"height: 20px; width: 20px; float: left; position: absolute; left: 10px;"';
        var url = 'images/store_logos/' + logo_file_name.toLowerCase();
        return this.generateImage(url, custom_css);
    },

    loadCustomLogo: function(logo1_file_name, logo2_file_name, logo3_file_name, type, custom_css) {
        custom_css = custom_css || '"height: 8px; width: 9px; float: left; position: absolute; left: 15px; top: 8px;"';
        var common_url = 'images/customlogo/' + 'typeface_' + type + '/';
        var innerImg = '';
        if (logo1_file_name)
            var base_path = 'images/customlogo/' + 'bases' + '/';
        var url = base_path + logo1_file_name.toLowerCase();
        innerImg = innerImg + this.generateImage(url, '"height: 20px; width: 25px; float: left; position: absolute; left: 8px; top: 2px"');
        if (logo2_file_name)
            var url = common_url + logo2_file_name.toLowerCase();
        innerImg = innerImg + this.generateImage(url, custom_css);
        if (logo3_file_name)
            var url = common_url + logo3_file_name.toLowerCase();
        innerImg = innerImg + this.generateImage(url, custom_css);
        return innerImg;
    },

    displayTeamLogo: function(team, class_css) {
        var myTeamClass = "";
        if (team.id === app.myTeam.get("id")) {
            team = app.myTeam.toJSON();
            myTeamClass = "myTeam";
        }

        class_css = class_css || "";
        var result = '<div id="small-team-logo-div" class = "' + myTeamClass + " " + class_css + '">';
        if (!team.isLogoCustom) {
            result = result + this.loadDefaultLogo(team.logo.image);
        } else {
            result = result + this.loadCustomLogo(team.logoBase, team.logoLayer2, team.logoLayer3, team.logoType)
        }
        result = result + '</div>';
        return result;
    },

    displayTeamFlag: function(team, custom_size) {
        custom_size = custom_size || 'height="18px" width="18px"';
        var url = 'images/flags/' + team.get("country").get("flag");
        var img = '<img ' + custom_size + ' src="' + url + '">';
        return img;
    },

    addGame: function(gameInfo) {
        gameInfo['team1Logo'] = this.displayTeamLogo(gameInfo.team1.attributes, 'team1-css');
        gameInfo['team2Logo'] = this.displayTeamLogo(gameInfo.team2.attributes, 'team2-css');
        gameInfo['team1Flag'] = this.displayTeamFlag(gameInfo.team1);
        gameInfo['team2Flag'] = this.displayTeamFlag(gameInfo.team2);
        if (gameInfo.team1.get('id') === app.myTeamId) {
            gameInfo.team1.myTeam = 'myTeam';
            gameInfo.team2.myTeam = '';
        }
        if (gameInfo.team2.get('id') === app.myTeamId) {
            gameInfo.team2.myTeam = 'myTeam';
            gameInfo.team1.myTeam = '';
        }
        gameInfo.displayLogo = this.getGameDisplayLogo(gameInfo);
        var sHtml = window.JST["schedule/gamelist/inner_row"](gameInfo);
        var tableRow = $("<tr>").append(sHtml);
        tableRow.data("id", gameInfo.id);
        return tableRow;
    },

    getGameDisplayLogo: function(game) {
        var logo = "",
            isPlayOff = game.isPlayOff,
            isInternationalGame = game.isInternationalGame,
            playOffCode = game.playOffCode;
        switch (true) {
            //Training
            case (isPlayOff == false && isInternationalGame == false && playOffCode != null):
                logo = "logo_training.png";
                break;
                //League - regular season
            case (isPlayOff == false && isInternationalGame == false):
                logo = "logo_league.png";
                break;
                //League - playoffs
            case (isPlayOff == true && isInternationalGame == false):
                logo = "logo_playoffs.png";
                break;
                //Intl Play (WBT) - group stage
            case (isPlayOff == false && isInternationalGame == true):
                logo = "logo_intlplay.png";
                break;
                //Intl Play (WBT) - playoffs
            case (isPlayOff == true && isInternationalGame == true):
                logo = "logo_intlplay_playoffs.png";
                break;
        }
        return logo;
    },

    teamInfoFirstClick: function(event) {
        var teamId = event.currentTarget.id;
        if (teamId == app.myTeamId) {
            bottomPanel.frontOffice();
        } else {
            teamInfo.show(teamId);
        }
    },

    teamInfoSecondClick: function(event) {
        var teamId = event.currentTarget.id;
        if (teamId == app.myTeamId) {
            bottomPanel.frontOffice();
        } else {
            preloaderGlobal.show();
            setTimeout(function() {
                teamInfo.show(teamId);
            }, 0);
        }
    },

    boxScoreClick: function(event) {
        preloaderGlobal.show();
        boxScoreView.show(event.currentTarget.id);
        preloaderGlobal.hide();
    },

    competitionLogoClick: function(event) {
        bottomPanel.competitions();
    },

    setCommonLinks: function() {
        $(".myschedule_first_team").click(this.teamInfoFirstClick);
        $(".myschedule_second_team").click(this.teamInfoSecondClick);
        $(".schedule_boxcomplogo").click(this.competitionLogoClick);
    },

    render: function() {

    },

    getGroupGameInfoBaseDate: function(models) {
        var groupGames = new Array();
        var gameInfo = "";
        for (var ind = 0; ind < models.length; ind++) {
            gameInfo = models[ind].attributes;
            var datetime = gameInfo.date;
            var date = new Date(datetime);

            var sDate = date.format("dd mmm");
            var time = date.format("H:MM");
            models[ind].set({
                "time": time,
                "sDate": sDate
            });
            if (!(groupGames[sDate] instanceof Array)) {
                groupGames[sDate] = new Array();
            }
            groupGames[sDate].push(models[ind]);
        }
        return groupGames;
    }
});

var MyScheduleView = ScheduleView.extend({
    initialize: function() {
        this.$el.attr("id", "schedule_pagescroll");
        this.$el.hide();
//        $("#middle_schedule").append(this.$el);
//        this.$el.append($("<div>").attr("id", "schedule_pagescroll"));
        this.collection = app.myTeam.schedule;
        console.log(this.collection.toJSON());
        this.addScroll();
        this.generateGroupGamesAndRender();
    },
    el: "",

    isShown: 0,

    generateGroupGamesAndRender: function() {
        this.groupGames = this.getGroupGameInfoBaseDate(this.collection.models);
        this.render();
    },
    show: function() {
        if (this.isShown == 0) {
            this.$el.show();
            this.isShown = 1;
        }

        if (app.myTeam.get("logo") != null)
            $("#schedule_pagescroll").find("div.myTeam").find("img").attr("src", "images/store_logos/" + app.myTeam.get("logo").image);
        else {
            var team = app.myTeam.toJSON();
            var newCustomLogoInnerHtml = this.loadCustomLogo(team.logoBase, team.logoLayer2, team.logoLayer3, team.logoType);
            $("#schedule_pagescroll").find("div.myTeam").html(newCustomLogoInnerHtml);
        }
    },

    hide: function() {
        if (this.isShown == 1) {
            this.$el.hide();
            this.isShown = 0;
        }
    },

    addNewTable: function(date, gameInfos, number) {
        var scroll = $('#schedule_pagescroll');
        var pane = scroll.data('jsp');
        var content = pane.getContentPane();

        if (gameInfos.length > 0) {
            var gameDate = new Date(gameInfos[0].attributes.date);
            var dateString = gameDate.format('dd mmm');
        } else {
            var dateString = date;
        }
        content.append($("<table>").attr("class", "schedule_table").attr("cellspacing", "0")
            .append($("<thead>")
                .append($("<tr>")
                    .append($("<td>").attr("width", "668px").text(dateString))))
            .append($("<tbody>").attr("id", "schedule_mytable_tbody" + number.toString())));
        var gameInfo = "";
        for (var ind = 0; ind < gameInfos.length; ++ind) {
            gameInfo = gameInfos[ind].attributes;
            gameInfo.dateInfo = new Date(gameInfo.date);
            var element = this.addGame(gameInfo);
            $("#schedule_mytable_tbody" + number).append(element);

        }

        this.setCommonLinks();
    },


    render: function() {
        var scroll = $('#schedule_pagescroll');
        var pane = scroll.data('jsp');
        var content = pane.getContentPane();
        content.children().remove();
        var ind = 0;
        for (var key in this.groupGames) {
            this.addNewTable(key, this.groupGames[key], ind++);
        }
        pane.reinitialise();
    }
});

var FriendScheduleView = ScheduleView.extend({
    initialize: function() {
        this.$el.hide();
        $("#middle_schedule").append(this.$el);
        this.$el.append($("<div>").attr("id", "schedulepick_pagescroll"));
        $("#schedulepick_pagescroll").append($("<table>").attr("cellspacing", "0")
            .append($("<thead>")
                .append($("<tr>")
                    .append($("<td>").attr({
                        "id": "schedulepick_pagetitle",
                        "width": "650px"
                    }).text("FRIEND LIST"))))
            .append($("<tbody>").attr("id", "schedulepick_tbody")));
        this.collection = app.myManager.get('friends');
        this.render();
    },
    events: {},

    isShown: 0,

    show: function() {
        if (this.isShown == 0) {
            this.$el.show();
            this.isShown = 1;
            this.$el.find('#schedulepick_tbody').jScrollPane();
        }
    },

    hide: function() {
        if (this.isShown == 1) {
            this.$el.hide();
            this.isShown = 0;
        }
    },

    displayTeamLogo: function(team, custom_class) {
        console.log("BBBB displayTeamLogo 325");
        if (team.id === app.myTeam.get("id")) {
            team = app.myTeam.toJSON();
        }

        custom_class = custom_class || "";
        var result = '<div id="small-team-logo-div" class = ' + custom_class + '>';
        if (!team.isLogoCustom) {
            result = result + this.loadDefaultLogo(team.logo.image);
        } else {
            result = result + this.loadCustomLogo(team.logoBase, team.logoLayer2, team.logoLayer3, team.logoType)
        }
        result = result + '</div>';
        return result;
    },

    addFriend: function(friendInfo) {
        //Currently hard code for get logo of team, it must be changed by API
        //TODO Need to fix return data in app.myManager.get('friends')
        var team = app.teams.getTeam(friendInfo.teamID);
        team.globalLoadLogo('schedule-team-logo-friend', '100px', '20px', true);
        friendInfo.teamLogo = team.get("displayLogo");
        var sHtml = JST["schedule/friendlist/row"](friendInfo);
        $("#schedulepick_tbody").append(sHtml);
    },

    render: function() {
        $("#schedulepick_tbody").children().remove();

        for (var ind = 0; ind < this.collection.models.length; ++ind) {
            if (this.collection.models[ind].get("appUser")) {
                this.addFriend(this.collection.models[ind].attributes);
            }
        }

        $("#schedulepick_tbody tr:odd").addClass("schedule_table_odd");
        $("#schedulepick_tbody tr:even").addClass("schedule_table_even");

        $("#schedulepick_tbody tr").off("click");
        $("#schedulepick_tbody tr").click(function(event) {
            current_selected_friend_team = event.currentTarget.id;
            scheduleView.friendSelected(event.currentTarget.id);
        });
    }
});


var SelectedScheduleView = ScheduleView.extend({
    initialize: function() {
        this.$el.hide();
        this.$el.append($("<span>").attr("id", "schedulefriend_top"));
        this.$el.append($("<div>").attr("id", "schedulefriend_pagescroll"));
    },

    isShown: 0,

    show: function(teamId) {
        if (_is_shown == false) {
            this.loadData(teamId);
            this.render();
            this.$el.show();
            this.isShown = 1;
            _is_shown = true;
            $('#schedulefriend_pagescroll').jScrollPane({
                autoReinitialise: true
            });
        } else {
            this.$el.show();
            this.isShown = 1;
            _is_shown = true;
        }
    },

    loadData: function(teamId) {
        var selected_friend_schedule = new App.FriendSchedule({
            id: teamId
        });
        selected_friend_schedule.fetch({
            async: false
        });
        var groupGames = new Array();
        var gameInfo = null;
        $.each(selected_friend_schedule.attributes, function(key, value) {
            if (value.date) {
                gameInfo = value;
                var datetime = gameInfo.date;
                var date = new Date(datetime);
                var sDate = date.format("dd mmm");
                var time = date.format("H:MM");
                gameInfo.time = time;
                gameInfo.sDate = sDate;
                if (!(groupGames[sDate] instanceof Array)) {
                    groupGames[sDate] = new Array();
                }
                groupGames[sDate].push(gameInfo);
            }
        });
        this.groupGames = groupGames;
    },

    hide: function() {
        if (this.isShown == 1) {
            this.$el.hide();
            this.isShown = 0;
        }
    },

    displayTeamFlag: function(team, custom_size) {
        custom_size = custom_size || 'height="18px" width="18px"';
        var url = 'images/flags/' + team.country.flag;
        var img = '<img ' + custom_size + ' src="' + url + '">';
        return img;
    },

    addGame: function(gameInfo) {
        gameInfo['team1Logo'] = this.displayTeamLogo(gameInfo.team1, 'team1-css');
        gameInfo['team2Logo'] = this.displayTeamLogo(gameInfo.team2, 'team2-css');
        gameInfo['team1Flag'] = this.displayTeamFlag(gameInfo.team1);
        gameInfo['team2Flag'] = this.displayTeamFlag(gameInfo.team2);
        if (gameInfo.team1.id == current_selected_friend_team) {
            gameInfo.team1.myTeam = 'myTeam';
            gameInfo.team2.myTeam = '';
        }
        if (gameInfo.team2.id == current_selected_friend_team) {
            gameInfo.team2.myTeam = 'myTeam';
            gameInfo.team1.myTeam = '';
        }
        gameInfo.displayLogo = this.getGameDisplayLogo(gameInfo);
        var sHtml = window.JST["schedule/gamelist/friend_inner_row"](gameInfo);
        var tableRow = $("<tr>").append(sHtml);
        tableRow.data("id", gameInfo.id);
        return tableRow;
    },

    addTable: function(date, gameInfos, number, selector) {
        $(selector).append($("<table>").attr("class", "schedule_table").attr("cellspacing", "0")
            .append($("<thead>")
                .append($("<tr>")
                    .append($("<td>").attr("width", "668px").text(date))))
            .append($("<tbody>").attr("id", "schedfriend_table_tbody" + number.toString())));

        var gameInfo = "";
        for (var ind = 0; ind < gameInfos.length; ++ind) {
            gameInfo = gameInfos[ind];
            gameInfo.dateInfo = new Date(gameInfo.date);
            var element = this.addGame(gameInfo);
            $("#schedfriend_table_tbody" + number).append(element);
        }

        this.setCommonLinks();
    },

    render: function() {
        $("#schedulefriend_top").text("MY FRIEND'S SCHEDULE");
        var selector = "";
        if ($("#schedulefriend_pagescroll .jspContainer .jspPane").length == 0) {
            $("#schedulefriend_pagescroll").children().remove();
            selector = "#schedulefriend_pagescroll";
        } else {
            $("#schedulefriend_pagescroll .jspContainer .jspPane").children().remove();
            selector = "#schedulefriend_pagescroll .jspContainer .jspPane"
        }
        var ind = 0;
        for (var key in this.groupGames) {
            this.addTable(key, this.groupGames[key], ind++, selector);
        }
    }
});