var ResultList = function (parent, id) {
    this.Self = $(id);
    this.Parent = parent;

    this.ResultData = null;
    this.DisableSwitch = false;

    this.PlayControl = new PlayControl(this.Parent, this.Self);

    this.Startup = function () {
        this.PlayControl.Startup();
        this.EnableTimeList();

        this.Self.find('.clac-title span').on('click', this.OnTabHeaderClick.bind(this));
        this.Self.find('.switch:first').on('click', this.OnSwitchChanged.bind(this));
    };

    this.Reset = function () {
        this.Self.find('.switch:first').removeClass('switch-on');
        this.Self.find('.backward-time-list:first').empty();
        this.Self.find('.forward-time-list:first').empty();
        this.ShowMask();
    };

    this.SetData = function (layerName, centerPoint, resultData) {
        this.LayerName = layerName;
        this.CenterPoint = {
            Latitude: centerPoint[0],
            Longitude: centerPoint[1]
        };
        this.ResultData = resultData;

        this.ResetTimeList(this.Self.find('.backward-time-list:first'), resultData.backward.points);
        this.ResetTimeList(this.Self.find('.forward-time-list:first'), resultData.forward.points);
    };

    this.OnTabHeaderClick = function (event) {
        // Toogle tab header
        this.Self.find('.clac-title span').removeClass("active");
        $(event.target).addClass("active");

        // Toogle time list
        var type = this.GetResultType();
        this.Self.find('.backward-time-list').css('display', type === 'backward' ? '' : 'none');
        this.Self.find('.forward-time-list').css('display', type === 'forward' ? '' : 'none');

        // Load detail data
        this.LoadDetailData();
        this.SetCurrentTimeList();
    };

    this.OnSwitchChanged = function () {
        this.Self.find('.switch:first').toggleClass('switch-on');
        this.EnableTimeList();
        this.SetCurrentTimeList();
    };

    this.SetCurrentTimeList = function () {
        this.PlayControl.OnPauseButtonClick();
        var type = this.GetResultType();
        this.PlayControl.CurrentTimeList = this.Self.find('.{0}-time-list:first'.format(type));
    };

    this.ResetTimeList = function (list, points) {
        list.empty();

        points.forEach(function (point) {
            var time = moment(point[2], "YYYYMMDD_HHmmss");
            var label = "<li time='{0}'>{1}</li>".format(point[2], time.format("YYYY-MM-DD HH:mm"));
            list.append(label);
        });

        list.find('li').on('click', this.OnTimeItemClick.bind(this));
    };

    this.OnTimeItemClick = function (event) {
        $(event.target).parent().find('li').removeClass('active');
        $(event.target).toggleClass('active');
        this.LoadDetailData();
    };

    this.EnableTimeList = function () {
        if (this.Self.find('.switch:first').hasClass('switch-on')) {
            this.Self.find('.calc-list').removeClass('calc-list-shadow');
            this.LoadDetailData();
        } else {
            this.ShowMask();
            if (this.ResultData !== null)
                this.Parent.Parent.Map.LoadAverageData(this.LayerName, this.CenterPoint, this.ResultData);
        }
    };

    this.ResizeMask = function () {
        var mask = this.Self.find('.shadow:first');
        var slider = this.Self.find('.slider-list:first');
        mask.height((this.DisableSwitch ? 36 : 0) + slider.height() + 100);
    };

    this.ShowMask = function () {
        this.Self.find('.calc-list').addClass('calc-list-shadow');
    };

    this.LoadDetailData = function () {
        var type = this.GetResultType();
        var time = this.GetDetailTime(type);
        if (time !== null) {
            var data = (type === 'backward') ? this.ResultData.backward : this.ResultData.forward;
            var index = this.GetTimeIndex(time, data);
            this.Parent.Parent.Map.LoadDetailData(this.LayerName, data.details[index]);
        }
    };

    this.GetResultType = function () {
        return this.Self.find('.clac-title .active:first').attr('type');
    };

    this.GetDetailTime = function (type) {
        if (type === 'backward') {
            var active = this.Self.find('.backward-time-list .active:first');
            return active.length === 1 ? active.attr('time') : null;
        }
        else {
            var active = this.Self.find('.forward-time-list .active:first');
            return active.length === 1 ? active.attr('time') : null;
        }
    };

    this.GetTimeIndex = function (time, data) {
        for (var i = 0; i < data.points.length; i++) {
            if (data.points[i][2] === time)
                return i;
        }
        return -1;
    };
};