Ext.namespace('MSDImages');

MSDImages.Slider = function() {
    return new Ext.Slider({
        id: 'slider',
        width: 93,
        increment: 1,
        minValue: 88,
        maxValue: 220,
        value: Ext.state.Manager.get('slider', 'val').val ? Ext.state.Manager.get('slider', 'val').val : 150,
        stateId: 'slider',
        stateful: true,
        stateEvents: ['changecomplete'],
        getState: function() { return { val: this.getValue() }; },
        updateImages: function() {
            var w = this.getValue();
            var h = Math.round(MSDImages.Config.thumbnailSizeRatio * w);

            /* ie faster this way?*/
            if (false) {
                var divs = Ext.select('.thumb', false, 'images');
                divs.setWidth((w + 22));
                var imgs = Ext.select('.thumb-img', false, 'images');
                imgs.setSize(w, h);
            }
            /* this way should be quickest.. */
            else {
                Ext.util.CSS.updateRule('.thumb', 'width', (w + 22) + 'px');
                Ext.util.CSS.updateRule('.thumb-img', 'width', w + 'px');
                Ext.util.CSS.updateRule('.thumb-img', 'height', h + 'px');
            }
        },
        listeners: {
            render: function() { this.updateImages(); },
            change: function() { this.updateImages(); }
        },
        renderTo: 'tools-zoom'
    });
}