Ox.Progressbar = function(options, self) {

    self = self || {};
    var that = Ox.Element({}, self)
        .defaults({
            progress: 0,
            width: 256
        })
        .options(options || {})
        .addClass('OxProgressbar')
        .css({width: self.options.width - 2 + 'px'});

    self.$progress = $('<div>').appendTo(that);

    //setProgress();

    function setProgress() {
        self.$progress.stop().animate({
            width: Math.round(14 + self.options.progress * (self.options.width - 16)) + 'px'
        }, 250);
        if (self.options.progress == 1) {
            self.$progress.removeClass('OxAnimate');
            $.browser.mozilla && clearInterval(self.interval);
        }
    }

    self.setOption = function(key, value) {
        if (key == 'progress') {
            self.options.progress = Ox.limit(self.options.progress, 0, 1);
            setProgress();
        }
    };

    that.start = function() {
        self.startTime = +new Date();
        self.$progress.addClass('OxAnimate');
        if ($.browser.mozilla) {
            self.offset = 0;
            self.interval = setInterval(function() {
                self.$progress.css({backgroundPosition: --self.offset + 'px 0, 0 0'})
            }, 1000 / 32);
        }
        return that;
    };

    that.status = function() {
        var elapsed = +new Date() - self.startTime; 
        return {
            elapsed: Ox.formatDuration(Math.floor(
                elapsed / 1000
            ), 'long'),
            percent: Math.round(self.options.progress * 100) + '%',
            remaining: progress ? Ox.formatDuration(Math.ceil(
                elapsed / progress * (1 - progress) / 1000
            ), 'long') : 'unknown'
        };
    };

    return that;
  
};