// vim: et:ts=4:sw=4:sts=4:ft=js
// fixme: rename!

Ox.Flipbook = function(options, self) {

    var self = self || {},
        frame = $('<img>').css({
                            'position': 'absolute',
                            'width': '100%',
                            'height': 'auto'
                           })
                          .hide(),
        icon = $('<img>').css({
                            'position': 'absolute',
                            'width': '100%',
                            'height': 'auto'
                         }),
        frames = {},
        timestamp = $('<div>').css({
                                'position': 'absolute',
                                'text-align': 'center',
                                'width': '100%'
                            })
                            .hide(),
        that = new Ox.Element('div', self)
            .defaults({
                frames: {},
                duration: 0,
                icon: ''
            })
            .options(options || {})
            .append(icon)
            .append(frame)
            .append(timestamp)
            .mouseover(function() {
                frame.show();
                timestamp.show();
                icon.hide();
            })
            .mousemove(function(event) {
                var position = getPosition(event),
                    image = getFrame(position),
                    frameHeight = image?image.height:that.height();
                frame.attr('src', image.src);
                timestamp.html(Ox.formatDuration(position, 'short'));
                
                var height = (that.height() - frameHeight)/2;
                frame.css({'top': height + 'px'});
                timestamp.css({'top': (frameHeight + height) + 'px'});
            })
            .mouseout(function() {
                frame.hide();
                timestamp.hide();
                icon.show();
            })
            .mousedown(function(event) {
                that.triggerEvent('click', {
                    'position': getPosition(event)
                });
            });
    
    function getPosition(event) {
        var position = Math.floor(event.clientX - that.offset().left);
        position = (position / that.width()) * self.options.duration;
        return position;
    }

    function getFrame(position) {
        var frame;
        Ox.forEach(frames, function(img, i) {
            if (!frame || i <= position) {
                frame = img;
            }
        });
        return frame;
    }

    function cacheFrames() {
        Ox.forEach(self.options.frames, function(src, i) {
            frames[i] = new Image();
            frames[i].onload = function() {
                frameHeight = frames[i].height / frames[i].width * that.width();
            };
            frames[i].src = src;
        });
    }
    
    self.onChange = function(key, value) {
        if (key == 'frames') {
            cacheFrames();
        } else if (key == 'icon') {
            icon.attr('src', value);
        }
    };

    if(options.icon) {
       icon.attr('src', options.icon);
    }
    cacheFrames();
    return that;
};