function init(that){
var puzzle_class = 'sp_'+new Date().getTime(),
puzzle = that.wrap('<span class="snappuzzle-wrap"/>').closest('span'),
src = that.attr('src'),
pieceWidth = that.width() / o.columns,
pieceHeight = that.height() / o.rows,
pile = $(o.pile).addClass('snappuzzle-pile'),
maxX = pile.width() - pieceWidth,
maxY = pile.height() - pieceHeight;
var highScore = 0;
var pieceNumber = ['0_0', '0_1', '0_2', '0_3', '1_0', '1_1', '1_2', '1_3', '2_0', '2_1', '2_2', '2_3', '3_0', '3_1', '3_2', '3_3'];
o.puzzle_class = puzzle_class;
that.data('options', o);
for (var x=0; x<o.rows; x++) {
for (var y=0; y<o.columns; y++) {
console.log(x+'_'+y);
var variableX = x;
var variableY = y;
// if (variableX > 1){
// variableX = 0;
// }
if (variableY > 1){
variableY = 0;
}
var vertical = 452 + (variableY * 461);
var horizontal = 135;
$('<div class="snappuzzle-piece '+puzzle_class+'"/>').data('pos', x+'_'+y).css({
width: pieceWidth,
height: pieceHeight,
position: 'absolute',
left: horizontal,
top: vertical,
zIndex: x,
backgroundImage: 'url('+src+')',
backgroundPosition: (-y*pieceWidth)+'px '+(-x*pieceHeight)+'px',
backgroundSize: that.width()
}).draggable({
start: function(e, ui){ $(this).removeData('slot'); },
stack: '.snappuzzle-piece',
containment: o.containment
}).attr("id", "snappuzzle-piece-id_"+x+'_'+y).attr("piece_number", x+'_'+y).appendTo(pile).data('lastSlot', pile);
$('<div class="snappuzzle-slot '+puzzle_class+'"/>').data('pos', x+'_'+y).css({
width: pieceWidth,
height: pieceHeight,
left: y*pieceWidth,
top: x*pieceHeight
}).attr("id", "snappuzzle-slot-id"+x+'_'+y).appendTo(puzzle).droppable({
accept: '.'+puzzle_class,
hoverClass: 'snappuzzle-slot-hover',
drop: function(e, ui){
var slot_pos = $(this).data('pos');
// prevent dropping multiple pieces on one slot
$('.snappuzzle-piece.'+puzzle_class).each(function(){
if ($(this).data('slot') == slot_pos)
slot_pos = false;
// console.log(slot_pos);
});
if (!slot_pos) {
return false;
}
ui.draggable.data('lastSlot', $(this)).data('slot', slot_pos);
ui.draggable.position({ of: $(this), my: 'left top', at: 'left top' });
if (ui.draggable.data('pos')==slot_pos) {
console.log($('.snappuzzle-piece.correct.'+puzzle_class).length);
console.log($('.snappuzzle-piece.correct.'+puzzle_class).zIndex());
highScore = highScore + 100;
console.log("High Score: " + highScore);
ui.draggable.addClass('correct');
// fix piece
// $(this).droppable('disable').fadeIn().fadeOut();
ui.draggable.$animate
$(this).droppable('disable').css('opacity', 1).fadeOut(1000);
ui.draggable.css({opacity: 0, cursor: 'auto'}).draggable('disable');
if ($('.snappuzzle-piece.correct.'+puzzle_class).length == o.rows*o.columns){
o.onComplete(that);
}
}
}
});
}
}
}