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"></div>
    <div class="puzzle" data-rel="1"></div>
    <div class="puzzle" data-rel="4"></div>
    <div class="puzzle" data-rel="7"></div>
    <div class="puzzle" data-rel="11"></div>
    <div class="puzzle" data-rel="2"></div>
    <div class="puzzle" data-rel="5"></div>
    <div class="puzzle" data-rel="8"></div>
    <div class="puzzle" data-rel="12"></div>
    <div class="puzzle" data-rel="6"></div>
    <div class="puzzle" data-rel="9"></div>
    <div class="puzzle" data-rel="3"></div>
</div>
<div id="final"></div>
<div class="skip">*I'm not in the mood, just show me...</div>

CSS

#shell {
    width:416px;
    height:312px;
    margin:0 auto;
}
#final{
    width:400px;
    height:400px;
    margin: 0 auto;
    background:red;
}
.puzzle {
    width: 100px;
    height: 100px;
    background: #ebebeb;
    position: relative;
    float:left;
    margin:2px;
    cursor:default;
}
.skip {
    width:200px;
    margin:0 auto;
    color:black;
    padding:20px;
    text-align:center;
    margin-top:30px;
    cursor:pointer;
    font-size:12px;
    font-family:Calibri;
}
.hint{
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: 2;
    color:white;
}

JavaScript

$(document).ready(function () {
$('#final').hide();

    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)) {
                $('.skip').delay(500).fadeOut(1000);
                $('#shell').animate({opacity:0.1});
                $('#shell').animate({opacity:1});
                $('#shell').delay(500).fadeOut(1000);
                $('#final').delay(2500).fadeIn(2000);
            }
        }
    });
});

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;
};

$('.skip').click(function() {
                $('.skip').delay(500).fadeOut(1000);
                $('#shell').delay(500).fadeOut(1000);
                $('#final').delay(1500).fadeIn(2000);
});

$('.puzzle').bind('dblclick',function(){
			var hint = $(this).attr('data-rel');
			$(this).append('<span class="hint" style="display: none;">'+hint+'</span>');
			$(this).children('.hint').show(500);
			$('.hint').delay(1000).hide(500, function(){
			$(this).remove();
			}); 
			});