$(document).ready(function()
        {
            // bg - фоновый элемент
            // bgFade - затеняющий элемент
            // period - время между сменами изображений
            // fadeTime - время на смену изображения
            // images - адреса изображений
            function fadeInOutLoop(bg, bgFade, period, fadeTime, images)
            {
                var fadeIn = true;
                var imageIndex = 1; // пропускаем первую картинку
                var imageCount = images.length;

                function url(index)
                {
                    return 'url(\'' + images[index] + '\')';
                }

                bgFade.css({ opacity: 0, backgroundImage: url(imageIndex++) }).show();

                function fadeInOut()
                {
                    // эти две строчки нужно удалить, они используются только в примере
                    $('#samples span').css('border-color', 'white');
                    $('#samples span:eq(' + (imageIndex - 1) + ')').css('border-color', 'black');

                    function animationComplete()
                    {
                        if (imageIndex >= imageCount)
                        {
                            imageIndex = 0;
                        }

                        if (fadeIn)
                        {
                            // сейчас виден затеняющий слой
							// меняем картинку на фоновом слое
                            bg.css('background-image', url(imageIndex++));
                        }
                        else
                        {
							// сейчас затеняющий слой полностью прозрачен
							// меняем на нем картинку
                            bgFade.css('background-image', url(imageIndex++));                            
                        }
							
                        fadeIn = !fadeIn;
                    }

                    bgFade.stop(true, true);
                    bgFade.animate({ opacity: ((fadeIn) ? 1 : 0) }, fadeTime, animationComplete);                    
                }

                /* возвращаем идентификатор таймера, чтобы можно было остановить перебор */
                return setInterval(fadeInOut, period, fadeTime);
            }

            var images = [
				'/templates/images/heads/001.jpg', /* эта картинка пропускается при первом переборе,
				                  она должна быть устновлнна через CSS,
				                  это прогрессивное улучшение и все такое */
				'/templates/images/heads/002.jpg',
				'/templates/images/heads/003.jpg',
				'/templates/images/heads/004.jpg',
				'/templates/images/heads/005.jpg',
				'/templates/images/heads/006.jpg'
			];

            //запускаем перебор картинок
            fadeInOutLoop($('.bghead'), $('#bgFade'), 3000, 1500, images);

            // растянуть/сжать контент
            $('#setLong').click(function()
            {
                $('#setLong').hide();
                $('#setShort').show();
                $('#content').height('2000px');
                return false;
            });

            $('#setShort').click(function()
            {
                $('#setShort').hide();
                $('#setLong').show();
                $('#content').height('500px');
                return false;
            });

            // образцы картинок
            var samples = $('#samples');
            for (i in images)
            {
                $('<span></span>').appendTo(samples).css('background-image', 'url(\'' + images[i] + '\')');
            }
        });