jQuery(document).ready(function () {
    cats = jQuery(this).find('.category');

    var dwidth = jQuery('#categorybox').width() / cats.size();

    cats.each(function (i) {
        elm = jQuery(this);
        elm.css({
            'position': 'absolute',
            'top': '0px',
            'left': dwidth * i + 'px',
            'width' : dwidth + 'px',
            'z-index': 10 + i
        });
     
        elm.hover(function () {

			cats = jQuery('.category');
			dwidth = jQuery('#categorybox').width() / cats.size() ;
			dwidth += 100;
			
            $(this).css({ 'z-index': 200 }).animate({ width:  dwidth+ 'px', easing: 'easeInBounce' }, 200);
            $(this).find('.box').animate({ bottom: "-20px", easing: 'easeInBounce' }, 200);
        }, function () {
			cats = jQuery(this).find('.category');
			dwidth = jQuery('#categorybox').width() / cats.size() ;
            $(this).css({ 'z-index': 10 }).animate({ width: dwidth + "px", easing: 'easeOutBounce' }, 300);
            $(this).find('.box').animate({ bottom: "-90px", easing: 'easeOutBounce' }, 300);
        });

    });



});