jQuery(document).ready(function() {
    prepareField();
    addBlurAction();
});

function prepareField() {
    jQuery('.blurbox').each(function() {
        objId = jQuery(this).attr('id');
        imgWidth = jQuery(this).css('width');
        imgHeight = jQuery(this).css('height');
        jQuery(this).removeAttr('id');

        blurDiv = jQuery('<div id="'+ objId +'">').css({
            'width' : imgWidth,
            'height' : imgHeight,
            'overflow' : 'hidden',
//            'position' : 'relative'
        });

        blurSpan = jQuery('<span class="action">').css({
            'background-color' : '#cc0000',
            'width' : imgWidth,
            'height': imgHeight,
            'position' : 'absolute',
            'left' : 0,
            'top' : 0,
            'opacity' : 0.7
        });
        img = jQuery(this);
        jQuery(blurDiv).append(img.clone());
        jQuery(blurDiv).append(blurSpan);
        jQuery(blurDiv).insertBefore(this);
        jQuery(this).remove();
    });
	jQuery('.blurbox-wide').each(function() {
        imgWidth = jQuery(this).css('width');
        imgHeight = jQuery(this).css('height');

        blurDiv = jQuery('<div>').css({
            'width' : imgWidth,
            'height' : imgHeight,
            'position' : 'relative'
        });

        blurSpan = jQuery('<span class="action">').css({
            'background-color' : '#cc0000',
            'width' : imgWidth,
            'height': imgHeight,
            'position' : 'absolute',
            'left' : 0,
            'top' : 0,
            'opacity' : 0.7
        });
        img = jQuery(this);
        jQuery(blurDiv).append(img.clone());
        jQuery(blurDiv).append(blurSpan);
        jQuery(blurDiv).insertBefore(this);
        jQuery(this).remove();
    });
}

function addBlurAction() {
    jQuery('.blurbox, .blurbox-wide').parent().mouseenter(function() {
        objSpan = jQuery(this).find('span.action');
        jQuery(objSpan).stop().animate({
            'width' : 0
        }, 300) ;
    });
    jQuery('.blurbox, .blurbox-wide').parent().mouseleave(function() {
        imgWidth = jQuery(this).css('width');
        objSpan = jQuery(this).find('span.action');
        jQuery(objSpan).stop().animate({
            'width' : imgWidth
        }, 300);
    });
}