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

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

    this.PlayTimer = null;
    this.CurrentTimeList = null;

    this.PrevButton = this.Self.find('.prev-btn:first');
    this.NextButton = this.Self.find('.next-btn:first');
    this.PlayButton = this.Self.find('.play-btn:first');
    this.PauseButton = this.Self.find('.pause-btn:first');

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

        this.PrevButton.on('click', this.OnPreButtonClick.bind(this));
        this.NextButton.on('click', this.OnNextButtonClick.bind(this));
        this.PlayButton.on('click', this.OnPlayButtonClick.bind(this));
        this.PauseButton.on('click', this.OnPauseButtonClick.bind(this));

        this.Self.find('.clac-title a').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 = centerPoint;
        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 a').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.OnPauseButtonClick();
        var type = this.GetResultType();
        this.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('.shadow:first').hide();
            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() + 95);
    };

    this.ShowMask = function () {
        this.ResizeMask();
        this.Self.find('.shadow:first').show();
    };

    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;
    };

    this.OnPreButtonClick = function () {
        var active = this.CurrentTimeList.find('.active:first');
        var prev = active.prev();
        if (prev.length === 0)
            prev = this.CurrentTimeList.find('li:last');

        prev.trigger('click');
    };

    this.OnNextButtonClick = function () {
        var active = this.CurrentTimeList.find('.active:first');
        var next = active.next();
        if (next.length === 0)
            next = this.CurrentTimeList.find('li:first');

        next.trigger('click');
    };

    this.OnPlayButtonClick = function () {
        this.PlayTimer = setInterval(this.OnNextButtonClick.bind(this), 1500);
        this.PauseButton.parent('.pause').show();
        this.PlayButton.parent('.play').hide();
    };

    this.OnPauseButtonClick = function () {
        clearInterval(this.PlayTimer);
        this.PauseButton.parent('.pause').hide();
        this.PlayButton.parent('.play').show();
    };
};