$(function () {
    var containerHeight = 262;
    var controlsHeight = 48;
    var controlsTopSpace = containerHeight - controlsHeight;
    var carouselArea = $('.imageCarousel');
    var rotator = $('.imageCarousel .images');

    rotator.cycle({
        pager: $('.imageCarousel .status span.pager'),
        fx: 'fade',
        speed: 1000
    });

    carouselArea.hover(function () {
        $(this).children('.controls').animate({ top: controlsTopSpace }, 500);
    },
    function () {
        $(this).children('.controls').animate({ top: containerHeight }, 500);
    });

    $('.imageCarousel .controls').css({ opacity: 0.8 });
    $('.imageCarousel .imageControls *').css({ opacity: 0.8 });
    $('.imageCarousel .imageControls *').hover(
        function () { $(this).css({ opacity: 1 }) },
        function () { $(this).css({ opacity: 0.8 }) }
    );

    $('.imageCarousel .controls .next').click(function () {
        $(this).parent().parent().parent().children('.images').cycle('next');
        return false;
    });

    $('.imageCarousel .controls .prev').click(function () {
        $(this).parent().parent().parent().children('.images').cycle('prev');
        return false;
    });

    $('.imageCarousel .controls').delegate('.pause', 'click', function () {
        $(this).parent().parent().parent().children('.images').cycle('pause');
        $(this).removeClass('pause').addClass('play');
        return false;
    });

    $('.imageCarousel .controls').delegate('.play', 'click', function () {
        $(this).parent().parent().parent().children('.images').cycle('resume');
        $(this).removeClass('play').addClass('pause');
        return false;
    });
});