function CasinoSlot (options) {
    options = options || {};
    this.el = options.el;
    this.startButtonImage = options.startButtonImage || '';
    this.startButtonOffsetX = options.startButtonOffsetX || 0;
    this.startButtonOffsetY = options.startButtonOffsetY || 0;
    this.startButtonWidth = options.startButtonWidth || 90;
    this.startButtonHeight = options.startButtonHeight || 40;
    this.slotOffsetX = options.slotOffsetX || 0;
    this.slotOffsetY = options.slotOffsetY || 0;
    this.slotBackgroundImage = options.slotBackgroundImage || '';
    this.slotWidth = options.slotWidth || 50;
    this.slotHeight = options.slotHeight || 100;
    this.slotSpacing = options.slotSpacing || 0;
    this.loseImage = options.loseImage || '';
    this.prize = options.prize || [];
    this.onStart = options.onStart || new Function;
    this.onWin = options.onWin || new Function;
    this.onLose = options.onLose || new Function;
    this.render()
}

CasinoSlot.prototype.render = function () {
    function slotStyle (id) {
        return {
            'position': 'absolute',
            'width': this.slotWidth,
            'left': this.slotOffsetX + id * (this.slotWidth + this.slotSpacing),
            'top': this.slotOffsetY,
            'width': this.slotWidth,
            'height': this.slotHeight,
            'background-image': 'url(' + this.slotBackgroundImage + ')',
            'overflow': 'hidden',
            'margin': 0,
            'padding': 0
        };
    }

    function getPrizeList ($slot) {
        for (var i = -1; i < this.prize.length; i++) {
            var $prize = $('<li></li>');
            $prize.css({
                'background-image': ~i ? this.prize[i].image : this.loseImage,
                'width': this.slotWidth,
                'height': this.slotHeight,
                'list-style': 'none'
            });
            $slot.append($prize);
        }
    }

    var $casino = $(this.el);
    var casinoPosition = $casino.css('position');
    $slots = $('<div class="slot"></div>');
    $slot0 = $('<ul class="slot"></ul>');
    $slot1 = $('<ul class="slot"></ul>');
    $slot2 = $('<ul class="slot"></ul>');
    $startButton = $('<div class="casino-start-button"></div>');
    $casino.css({
        'position': casinoPosition === 'static' ? 'relative' : casinoPosition,
        'overflow': 'hidden'
    });
    $startButton.css({
        'background-image': this.startButtonImage,
        'position': 'absolute',
        'left': this.startButtonOffsetX,
        'top': this.startButtonOffsetY,
        'width': this.startButtonWidth,
        'height': this.startButtonHeight
    }).on('click', this.go);
    $slot0.css(slotStyle(0));
    $slot1.css(slotStyle(1));
    $slot2.css(slotStyle(2));
    $(this.el).append($slot0).append($slot1).append($slot2).append($startButton)
}

CasinoSlot.prototype.go = function () {
    this.onStart();
}

CasinoSlot.prototype.win = function (prize) {
    this.onWin();
}

CasinoSlot.prototype.lose = function () {
    this.onLose();
}



new CasinoSlot({
  el: "#slots,
})