Puzzle site

by Alin Guta

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div id="shell">
    <div class="puzzle" data-rel="10">10</div>
    <div class="puzzle" data-rel="1">1</div>
    <div class="puzzle" data-rel="4">4</div>
    <div class="puzzle" data-rel="7">7</div>
    <div class="puzzle" data-rel="11">11</div>
    <div class="puzzle" data-rel="2">2</div>
    <div class="puzzle" data-rel="5">5</div>
    <div class="puzzle" data-rel="8">8</div>
    <div class="puzzle" data-rel="12">12</div>
    <div class="puzzle" data-rel="6">6</div>
    <div class="puzzle" data-rel="9">9</div>
    <div class="puzzle" data-rel="3">3</div>
</div>

CSS

#shell {
    width:416px;
    height:312px;
    margin:0 auto;
}
.puzzle {
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background: #ebebeb;
    color: black;
    position: relative;
    float:left;
    margin:2px;
}

JavaScript

$(document).ready(function () {
    var key = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
    $('#shell').sortable({
        cursor: 'move',
        update: function (event, ui) {
            var numbers = $('.puzzle[data-rel]').map(function () {
                return parseInt($(this).attr('data-rel'));
            });
            console.log(numbers);
            if (key.equals(numbers)) {
                alert('Bun, acum trebuie doar sa pun imaginea finala aici');
            }
        }
    });
});

Array.prototype.equals = function (array) {
    if (!array) return false;
    if (this.length != array.length) return false;
    for (var i = 0, l = this.length; i < l; i++) {
        if (this[i] instanceof Array && array[i] instanceof Array) {
            if (!this[i].equals(array[i])) return false;
        } else if (this[i] != array[i]) {
            return false;
        }
    }
    return true;
}