SpriteHighlighter = function(container, args) {
    this.container = container;
    this.sprites = args.sprites;
    this.element_type = args.element_type ? args.element_type : 'li';
    this.sprite_width = args.sprite_width;
    this.sprite_height = args.sprite_height;
    this.background_color = args.background_color;
    this.viewport_size = args.viewport_size; // in sprites
    this.viewport_start = 0;
    this.last_selected_id = 0;
    this.sprite_count = args.sprite_count;
    this.position = 0;

    this.init = function () {
        $(this.container).css({'background': this.background_color, 'overflow':'hidden'});
        this.draw_elements();
    }

    this.draw_elements = function () {
        $(this.container).empty();
        for (var i = this.viewport_start-1; i < this.viewport_start + this.viewport_size + 1; i++) {
            var j = i;
            if (i >= 0) {
                j = i % this.sprite_count;
            }
            else {
                // turns out % is broken for negative numbers..
                var x = j;
                do {
                    x = x / this.sprite_count;
                    j += this.sprite_count;
                } while (x < -1);
            }
            var offset_pixels = j * this.sprite_width;
            var left = (i - this.viewport_start) * this.sprite_width;
            $(this.container)
                .append($('<'+this.element_type+' rel='+i+' id="wc_banner_'+j+'"style="left: '+left+'px; background: url('+this.sprites+') -'+offset_pixels+'px '+(this.sprite_height)+'px;"></'+this.element_type+'>'));
        }
    }

    this.highlight_element = function (element_id) {
        var offset_pixels = element_id * this.sprite_width;
        $('#wc_banner_'+element_id)
            .css({'background': 'url('+this.sprites+') -'+offset_pixels+'px 0px repeat-x'})
            .addClass('selected');
    }

    this.adjust_viewport = function() {
        // if the highlighted element is <= padding from the right side, advance forward.
        // if the highlighted element is >= padding from the left, advance backward
        var selected_id = parseInt($(this.container+' .selected').attr('rel'));
        var changed = false;

        if (this.viewport_start + this.viewport_size - selected_id <= 1 && selected_id > this.last_selected_id) {
            this.viewport_start += 1;
            changed = true;
            $(this.container).children().each(function(k,v) {
                var left = $(v).css('left');
                left = parseInt(left.substr(0,left.length-2))
                $(v).animate({'left': (left-60)+'px'});
            });

        }
        if (selected_id <= this.viewport_start  && selected_id < this.last_selected_id) {
            this.viewport_start -= 1;
            changed = true;
            $(this.container).children().each(function(k,v) {
                var left = $(v).css('left');
                left = parseInt(left.substr(0,left.length-2))
                $(v).animate({'left': (left+60)+'px'});
            });
        }

        this.last_selected_id = selected_id;
    }

    this.init();
}