function Style(prefix, start, style) {

    this.initialized = false;

    this.prefix = prefix;
    this.start_display = start;
    this.start_style = style;

    this.get = function(target, size) {
        if (size == 'jumbo') var widget = 'jumbo';
        else var widget = 'style';
        return getFirstElementByTagAndClassName(null,
            widget + '-widget-' + target,
            this.prefix + '-' + widget + '-widget');
    }

    this.get_many = function(target) {
        return getElementsByTagAndClassName(null,
            'style-widget-' + target,
            this.prefix+'-style-widget');
    }

    this.build_animation = function(el) {
        el.anim = new Animator({duration:200}).addSubject(new CSSStyleSubject(
            el, 'preview-icon-inactive', 'preview-icon-active'));
    }

    this.init = function() {
        if(this.initialized) return;
        this.initialized = true;

        connect(this.get('show-2up'), 'onclick', this, 'show2Up');
        connect(this.get('show-data'), 'onclick', this, 'showMetaData');
        connect(this.get('prev-thumb'), 'onclick', this, 'pagePrev');
        connect(this.get('next-thumb'), 'onclick', this, 'pageNext');
    
        this.build_animation(this.get('show-2up'));
        this.build_animation(this.get('show-data'));
        this.build_animation(this.get('prev-thumb'));
        this.build_animation(this.get('next-thumb'));

        if(this.start_display == '2up') this.show2Up();
        else this.showMetaData();

        if(this.start_style) this.set_style(this.start_style);
    }

    this.init_jumbo = function() {
        connect(this.get('prev-thumb', 'jumbo'), 'onclick', this, 'jumboPrev');
        connect(this.get('next-thumb', 'jumbo'), 'onclick', this, 'jumboNext');
        this.build_animation(this.get('prev-thumb', 'jumbo'));
        this.build_animation(this.get('next-thumb', 'jumbo'));
        this.get('header', 'jumbo').innerHTML = this.style.name;
        this.get('download', 'jumbo').href = this.style.url;
        this.render('jumbo');
    }

    this.render = function (size) {
        var thumb1 = this.get('thumb-1', size);
        var thumb2 = this.get('thumb-2', size);

        var prev_thumb = this.get('prev-thumb', size);
        if (this.style.current_thumb == 1) prev_thumb.anim.seekTo(1);
        else prev_thumb.anim.seekTo(0);

        var next_thumb = this.get('next-thumb', size);
        if (this.style.current_thumb == this.style.max_thumb)
            next_thumb.anim.seekTo(1);
        else next_thumb.anim.seekTo(0);

        var thumb = numberFormatter("00")(this.style.current_thumb);
        var img = this.style.gallery + "/" + size + "-" + thumb + ".gif";
        thumb1.src = img;

        if (this.style.current_thumb < this.style.max_thumb) {
            var thumb = numberFormatter("00")(this.style.current_thumb + 1);
            var img = this.style.gallery + "/" + size + "-" + thumb + ".gif";
            thumb2.src = img;
        } else {
            thumb2.src = "/static/images/" + size + "-plain.gif";
        }
    }

    this.set_style = function (style) {

        this.init();

        this.style = style;

        var prefix = this.prefix;
        map(
            function(x){ x.href = '/gallery/jumbo/' + prefix },
            this.get_many('show-jumbo'));

        this.get('header').innerHTML = style.name;
        this.get('data-author').innerHTML = style.author;
        this.get('data-about').innerHTML = style.about;
        this.get('data-submitted').innerHTML = style.submitted;

        this.get('download').href = style.url;

        this.render("thumb");
    }

    this.page = function (change) {
        this.style.current_thumb += change;
        if (this.style.current_thumb < 1) this.style.current_thumb = 1;
        if (this.style.current_thumb > this.style.max_thumb)
            this.style.current_thumb = this.style.max_thumb;
        this.render("thumb");
    }

    this.pagePrev = function () { this.page(-1); }
    this.pageNext = function () { this.page(1); }

    this.jumboPrev = function () { this.pagePrev(); this.render("jumbo");  }
    this.jumboNext = function () { this.pageNext(); this.render("jumbo");  }

    this.show2Up = function () {
        showElement(this.get('2Up'));
        hideElement(this.get('data'));
        this.get('show-data').anim.seekTo(0);
        this.get('show-2up').anim.seekTo(1);
    }

    this.showMetaData = function () {
        hideElement(this.get('2Up'));
        showElement(this.get('data'));
        this.get('show-data').anim.seekTo(1);
        this.get('show-2up').anim.seekTo(0);
    }
}

