DesignBrowser = function(designerId){
    this.designerId = designerId;
    this.imgs = [];
    this.currentImg = 0;
    this.$el = {};
    
    
    this.loadImgs = function(sourcesArray){
        for (var i = 0; i < sourcesArray.length - 1; i++) {
            this.imgs.push(new Image());
            this.imgs[i].src = sourcesArray[i];
        }
    };
    
    this.show = function(){
        $("img", "#designer_" + this.designerId)[0].src = this.imgs[this.currentImg].src;
    };
    
    this.next = function(){
        this.currentImg = (this.currentImg + 1) % this.imgs.length;
        this.show();
    };
    
    this.prev = function(){
        this.currentImg--;
        if (this.currentImg < 0) {
            this.currentImg += this.imgs.length;
        }
        this.show();
    };
    
    this.init = function(){
        this.$el = $("#designer_" + this.designerId);
        var self = this;
        $(".prev", this.$el).click(function(){
            self.prev();
            return false;
        });
        
        $(".next", this.$el).click(function(){
            self.next();
            return false;
        });
        
        this.show();
    };
};