var GChartMonthly = new Class({
    initialize: function(id, url, user, width, height, sport_type_id, unit_type){
        this.unit_type = unit_type;
        this.id = id;
        this.width = width;
        this.height = height;
        if (!width){
            this.width = 580;
        }
        if (!height){
            this.height = 220;
        }
        this.container = $(id);
        this.user = user;
        this.position = 0;
        this.url = url;
        this.sport_type_id = sport_type_id;
        this.sport_sel = $('daily_distance_sport_sel');
        if (this.sport_sel){
            this.sport_sel.set('value', this.sport_type_id);
            this.sport_sel.addEvent('change', function(){
                var sport_id = this.sport_sel.get('value');
                this.sport_type_id = sport_id;
                this.request(this.position);
            }.bind(this));
        }
    },
    next: function(){
        this.request(this.position + 1)
    },
    previous: function(){
        this.request(this.position - 1)

    },
    request: function(position){
        
        var image = this.container.getElement('img');
        image.set('src', '/site_media/static/images/loading.gif');
        image.set('style', 'width: ' + this.width + 'px; height: ' + this.height + 'px');
        var url = this.url;
        var params = {'user': this.user, 'position': position, 'unit_type': this.unit_type, width: this.width, height: this.height};
        if (this.sport_type_id){
            params['type_id'] = this.sport_type_id;
        }
        var jsonRequest = new Request.JSON({url: url, onSuccess: function(data){
            this.position = position;
            var image = this.container.getElement('img');
            image.set('src', data.url);
            if (this.position != 0){
                $(this.id + '_next').setStyle('display', 'inline');
            }
            else{
                $(this.id + '_next').setStyle('display', 'none');
            }
        }.bind(this)}).get(params);

    }

});

var StatsPager = new Class({
    initialize: function(id, url, user, type, receiver_function, loading_function, chart_type){
        this.type = type;
        this.chart_type = '';
        if (chart_type){
            this.chart_type = chart_type;
        }
        if (!type){
            this.type = 'html';
        }
        this.receiver_function = receiver_function;
        if (!receiver_function){
            this.receiver_function = this._render_data;
        }
        this.loading_function = loading_function;
        if (!loading_function){
            this.loading_function = this._mark_loading;
        }
        this.id = id;
        this.container = $(id);
        this.user = user;
        this.position = 0;
        this.url = url;
    },
    next: function(){
        this.request(this.position + 1)
    },
    previous: function(){
        this.request(this.position - 1)

    },
    _render_data: function(data, rs_el, rs_html){
            
           if (this.position != 0){
                $(this.id + '_next').setStyle('display', 'inline');
            }
            else{
                $(this.id + '_next').setStyle('display', 'none');
            }
            this.container.set('html', rs_html);


    },
    _mark_loading: function(){
        this.container.getElements('td').each(function(item){
            item.getElements('a').each(function(a){
                a.setStyle('color', '#bbb');
            });
            item.setStyle('color', '#bbb');
        });
    },
    request: function(position){
        this.loading_function();
        var jsonRequest = new Request.HTML({url: this.url, onSuccess: function(data, rs_el, rs_html){
            this.position = position;
            this._render_data(data, rs_el, rs_html);
        }.bind(this)}).get({'user': this.user, 'position': position, chart_type: this.chart_type});

    }

});