$(function() {
var settings = {
column_count: 3 ,
column_depth: 4 ,
speed: 10000 ,
stagger: 1 ,
delay: 10000 ,
container: $("#slots") ,
slot_line_path: "../images/slot_line.png"
};
slots.init(settings);
});
var slots = {
container: Object ,
width: Number ,
height: Number ,
column_count: Number ,
column_depth: Number ,
banners: [] ,
slots_class: String ,
slot_line_class:String ,
pos: Object ,
speed: Number ,
delay: Number ,
stagger: Number ,
init: function(settings) {
base = this;
base.container = settings.container;
var banner_images = $(base.container).find("img");
var banner_count = $(banner_images).length;
if (banner_count > 0) {
$(banner_images).each(function(i) {
base.banners[i] = $(this).attr("src");
});
base.column_count = settings.column_count;
base.column_depth = settings.column_depth;
base.slots_class = "slots_columns";
base.slot_line_class = "slot_line";
base.speed = settings.speed;
base.stagger = settings.stagger;
base.delay = settings.delay;
base.width = $(base.container).outerWidth();
base.height = $(base.container).outerHeight();
base.pos = base.positions();
base.run();
} else {
//alert("no images found for slot machine");
};
} ,
run: function() {
base = this;
base.banners.reverse();
var slot_lines = base.slot_lines();
var slot_machine = base.columns();
$(base.container).html(slot_machine).prepend(slot_lines);
base.animate(1);
} ,
positions: function() {
base = this;
var positions = [];
for (var i = 0; i < base.banners.length; i++) {
positions[i] = [];
positions[i].top = [];
positions[i].bottom = [];
for (var c = 0; c < base.column_count; c++) {
positions[i].top[c] = -1 * (base.height * i);
positions[i].bottom[c] = -1 * (((base.height * base.banners.length) * ((base.column_depth + (c * base.stagger)) - 1)) + (base.height * i));
};
};
return positions;
} ,
line: function(x,y) {
return $("" , {
css: {
position: 'absolute' ,
zIndex: 110 ,
height: base.height ,
left: x ,
top: y
}
}).addClass(base.slot_line_class);
} ,
slot_lines: function() {
base = this;
var lines = $("" , {
position: 'absolute' ,
width: base.width ,
height: base.height ,
zIndex: 200 ,
left: 0 ,
top: 0
});
for (var i = 1; i < base.column_count; i++) {
x = ((base.width / base.column_count) * i) - 2;
y = 0;
$(lines).append(base.line(x,y));
};
return lines;
} ,
image_box: function(x,y) {
base = this;
var images = $("", {
css: {
position: 'absolute' ,
left: x ,
top: y
}
});
$(base.banners).each(function(i) {
this_img = $("![]()
", {
src: base.banners[i] ,
css: {
display: 'block' ,
border: 'none'
}
});
$(images).append(this_img);
});
return images;
} ,
column_box: function(x, col, depth) {
base = this;
column_box = $("", {
css: {
width: base.width / base.column_count ,
height: ((base.height * base.banners.length) * base.column_depth) + ((col * base.stagger) * (base.height * base.banners.length)) ,
overflow: 'hidden' ,
position: 'absolute' ,
left: x ,
top: base.pos[0].bottom[col]
}
});
for (var i = 0; i < depth; i++) {
y = i * (base.height * base.banners.length);
$(column_box).append(base.image_box(-x,y));
};
return column_box;
} ,
columns: function() {
base = this;
depth = base.column_depth;
columns = $("" , {
css: {
width: base.width ,
height: base.height ,
background: '#fffeec' ,
overflow: 'hidden' ,
position: 'absolute' ,
left: 0 ,
top: 0
}
}).addClass(base.slots_class);
for (var i = 0; i < base.column_count; i++) {
var x = i * (base.width / base.column_count);
$(columns).append(base.column_box(x, i, depth + (base.stagger * i)));
};
return columns;
} ,
animate: function(a) {
base = this;
for (var i = 0; i < base.column_count; i++) {
next = base.pos[a].top[i];
next_nudge = next + 20;
speed = base.speed + ((base.speed / base.column_depth) * (i * base.stagger));
$("." + base.slots_class + " > div")
.eq(i)
.delay(base.delay)
.animate({ top: next_nudge }, speed, 'linear')
.animate({ top: next }, 40, function() {
$(this)
.animate({ top: base.pos[a].bottom[$(this).index()] } , 0 , function() {
if ($(this).index() == (base.column_count - 1)) {
a = (a == base.banners.length - 1) ? 0 : a + 1;
base.animate(a);
};
});
});
};
}
};