jQuery(document).ready(function(){
    var duration = 200;

    jQuery('.gallery.people .item, .gallery.projects .item, .gallery.brands .item')
    .live('mouseenter', function(){
        var popup = jQuery(this).find('div.images:first');
        var title = jQuery(this).find('div.title:first');
        var description = jQuery(this).find('div.description:first');
        var slider = popup.find('div.cycle:first');
        var images = slider.find('a');

        jQuery(this).css({zIndex: 10});
        popup.css({zIndex: 10});
        title.css({zIndex: 20});
        description.css({zIndex: 20});

        // calculating extra bottom padding
        var extra_padding_bottom = 0;
        var description_height = 0;

        if ( description.length ) {
            // in projects layout description is hidden
            // and height initially is 0px
            // so we need to hide it and set auto height
            if (
                jQuery(this).parent().hasClass('projects')
                || jQuery(this).parent().hasClass('brands')
            ) {
                description.css('display', 'none');
                description.css('height', 'auto');
            }
            description_height = description.height()
            if ( jQuery(this).parent().hasClass('people') ) {
                description.children('div').each(
                    function()
                    {
                        if ( jQuery(this).height() > description_height ) {
                            description_height = jQuery(this).height();
                        }
                    }
                );
            }
            extra_padding_bottom = extra_padding_bottom + description_height;
            // later in projects layout we should set
            // description height to 0 and show block
            // in order to get top value
            if (
                jQuery(this).parent().hasClass('projects')
                || jQuery(this).parent().hasClass('brands')
            ) {
                description.height(0);
                description.css('display', 'block');
            }
            extra_padding_bottom = extra_padding_bottom + parseInt( description.css('top') ) - popup.height();
        }
        else {
            extra_padding_bottom = extra_padding_bottom + parseInt( title.css('top') ) + title.height() - popup.height();
        }

        var expand = {
            heightDelta: 80,
            widthDelta: 40,
            padding: 20,
            height: 160,
        }

        if ( jQuery(this).parent().hasClass('people') ) {
            expand.heightDelta = 40;
        }

        var initialWidth = jQuery(this).width();
        var initialHeight = slider.data('initialHeight');

        if ( !initialHeight){
            initialHeight = slider.height();
            slider.data('initialHeight', initialHeight);
        }

        popup.css('padding-bottom', extra_padding_bottom + 'px');
        jQuery(this).addClass('hover');

        if (
            jQuery(this).parent().hasClass('projects')
            || jQuery(this).parent().hasClass('brands')
        ) {
            description.stop().animate({height:description_height+'px'}, duration, 'linear');
        }

        popup.stop().animate(
            {
                marginTop: (-expand.heightDelta-expand.padding) + 'px',
                marginLeft: (-expand.widthDelta) + 'px',
                width: initialWidth+expand.widthDelta+'px',
                paddingTop:expand.padding + 'px',
                paddingLeft:expand.padding + 'px',
                paddingRight:expand.padding + 'px',
                paddingBottom:expand.padding + expand.heightDelta + extra_padding_bottom + 'px',
            },
            duration,
            'linear',
            (function(obj){
                return function()
                {
                    if ( obj.parent().hasClass('people') ) {
                        description.children(':first').css('display','none').next().css('display','block');
                        /*
                        description.cycle(
                            {
                                fx: 'fade',
                                timeout: duration,
                                delay: '-200',
                                autostop: 1,
                                autostopCount: 2,
                            }
                        );
                        */
                    }
                }
            })(jQuery(this))
        );

        images.stop().animate({height:initialHeight + expand.heightDelta + 'px'}, duration, 'linear');
        slider.stop().animate(
            {
                height:initialHeight + expand.heightDelta + 'px'
            },
            duration,
            'linear',
            function(){
                slider.cycle(
                    {
                        fx: 'fade',
                        timeout: duration,
                        delay: '-200',
                    }
                );
            }
        );

    })
    .live('mouseleave', function(){
        var popup = jQuery(this).find('div.images');
        var title = jQuery(this).find('div.title');
        var description = jQuery(this).find('div.description');
        var slider = popup.find('div.cycle');
        var images = slider.find('a');

        // calculating extra bottom padding
        var extra_padding_bottom = 0;

        if ( description.length ) {
            // in projects layout description is hidden
            // and height initially is 0px
            // so we need to hide it and set auto height
            if (
                jQuery(this).parent().hasClass('projects')
                || jQuery(this).parent().hasClass('brands')
            ) {
                description.css('display', 'none');
                description.css('height', 'auto');
            }
            var description_height = description.height()
            if ( jQuery(this).parent().hasClass('people') ) {
                description.children('div').each(
                    function()
                    {
                        if ( jQuery(this).height() > description_height ) {
                            description_height = jQuery(this).height();
                        }
                    }
                );
            }
            extra_padding_bottom = extra_padding_bottom + description_height;
            // later in projects layout we should set
            // description height to 0 and show block
            // in order to get top value
            if (
                jQuery(this).parent().hasClass('projects')
                || jQuery(this).parent().hasClass('brands')
            ) {
                description.height(0);
                description.css('display', 'block');
            }
            extra_padding_bottom = extra_padding_bottom + parseInt( description.css('top') ) - popup.height();
        }
        else {
            extra_padding_bottom = extra_padding_bottom + parseInt( title.css('top') ) + title.height() - popup.height();
        }

        var initialHeight = slider.data('initialHeight');

        slider.stop().animate({height:initialHeight + 'px'}, duration, 'linear');
        images.stop().animate({height:initialHeight + 'px'}, duration, 'linear');

        var initialWidth = jQuery(this).width();

        if (
            jQuery(this).parent().hasClass('projects')
            || jQuery(this).parent().hasClass('brands')
        ) {
            description.stop().animate({height:'0px'}, duration, 'linear');
        }

        popup.stop().animate(
            {
                width:initialWidth+'px',
                marginTop:0,
                marginLeft:0,
                paddingTop:0,
                paddingLeft:0,
                paddingRight:0,
                paddingBottom:extra_padding_bottom + 'px',
            },
            duration,
            'linear',
            (function(obj){
                return function(){
                    if ( obj.parent().hasClass('people') ) {
                        /*
                        description.cycle(
                            {
                                fx: 'fade',
                                timeout: duration,
                                delay: '-200',
                                rev: 1,
                                startingSlide: 1,
                                autostop: 1,
                                autostopCount: 2,
                            }
                        );
                        */
                        description.children(':gt(0):first').css('display','none').prev().css('display','block');
                    }

                    popup.css('padding', '0px');
                    obj.removeClass('hover');

                    description.css({zIndex: 0});
                    title.css({zIndex: 0});
                    popup.css({zIndex: 0});
                    obj.css({zIndex: 0});
                }
            })(jQuery(this))
        );

        slider.cycle('stop').cycle({
            startingSlide: 0,
            delay: 3000,
        }).cycle('stop');

    });

});