(function($) {

    var colors = ['black', 'orange', 'purple', 'green', 'blue'];

    function getRandomColor()
    {
        var random = Math.round( Math.random() * (colors.length-1) );
        return colors[random];
    }

    function resetClass(el)
    {
        $.each(colors, function() {
            if ($(el).hasClass(this)) {
                $(el).removeClass(this);
                return false;
            }
        })
    }

    $(document).ready(function(){

        $('#products div div').each(function(){
            $(this).hide();
        });

        $('#products div div').each(function(i){
            var el = this;
            setTimeout(function() {
                 $(el).show(333);
            }, i * 100 + 333);
        });

        $('<div id="squares"></div>').insertAfter('.content-container');
        for (var i=0;i<60;i++) {
            var className = 'square' + ' ' + getRandomColor();
            if (i < 15) {
                className += ' first';
            }
            $('#squares').append('<div class="' + className + '"></div>');
        }

        $.preloadCssImages();

        var w = 66;
        var footer = w * 3 + w / 2;
        var height = $('#container').height();
        var n = (height - footer) % w;
        
        var padding = w - n - 30;
        
        $('#squares').css('margin-top', padding + 'px');
        
        $('.square').each(function(i){
            $(this).hover(function() {
                resetClass(this);
                $(this).addClass( getRandomColor() );
            })
        });
        
    });

})(jQuery);