(function(jQuery) {
    jQuery.fx.step.clip = function(fx) {

        if (fx.state == 0) {
            var cRE = /rect\(([0-9]{1,})(px|em)[,]? ([0-9]{1,})(px|em)[,]? ([0-9]{1,})(px|em)[,]? ([0-9]{1,})(px|em)\)/;
            $elem = $(fx.elem);
            if (($.browser.msie) && ($.browser.version >= 8.0)) {
                fx.start = cRE.exec(fx.elem.style.clip.replace(/[, ]+/g, ' '));
                fx.end = cRE.exec($.isArray(fx.end) ? fx.end[0] : fx.end);
            }
            else {
                fx.start = cRE.exec(fx.elem.style.clip.replace(/,/g, ''));
                fx.end = cRE.exec($.isArray(fx.end) ? fx.end[0] : fx.end);
            }
        }
        var sarr = new Array(), earr = new Array(), spos = fx.start.length, epos = fx.end.length,
		                         emOffset = fx.start[ss + 1] == 'em' ? (parseInt($(fx.elem).css('fontSize')) * 1.333 * parseInt(fx.start[ss])) : 1;
        for (var ss = 1; ss < spos; ss += 2) { sarr.push(parseInt(emOffset * fx.start[ss])); }
        for (var es = 1; es < epos; es += 2) { earr.push(parseInt(emOffset * fx.end[es])); }
        fx.elem.style.clip = 'rect(' +
		                                            parseInt((fx.pos * (earr[0] - sarr[0])) + sarr[0]) + 'px ' +
		                                            parseInt((fx.pos * (earr[1] - sarr[1])) + sarr[1]) + 'px ' +
		                                            parseInt((fx.pos * (earr[2] - sarr[2])) + sarr[2]) + 'px ' +
		                                            parseInt((fx.pos * (earr[3] - sarr[3])) + sarr[3]) + 'px)';
    }
})(jQuery);



$(document).ready(function() {

    var popupwidth = $("div.popup").width();
    $("div.gardin").mouseenter(function() {
    //alert('(' + ((popupwidth / 2) - 32) + 'px ' + ((popupwidth / 2) + 32) + 'px ' + ((popupwidth / 2) + 32) + 'px ' + ((popupwidth / 2) - 32) + 'px)');
    //$(this).next().animate({ 'clip': 'rect(' + ((popupwidth / 2) - 32) + 'px ' + ((popupwidth / 2) + 32) + 'px ' + ((popupwidth / 2) + 32) + 'px ' + ((popupwidth / 2) - 32) + 'px)' }, 0);
        $(this).next().animate({ 'clip': 'rect(0px ' + popupwidth + 'px ' + popupwidth + 'px 0px)' }, 200);
    });

    $("div.popup").mouseout(function() {
   // $(this).animate({ 'clip': 'rect(' + ((popupwidth / 2) - 32) + 'px ' + ((popupwidth / 2) + 32) + 'px ' + ((popupwidth / 2) + 32) + 'px ' + ((popupwidth / 2) - 32) + 'px)' }, 200);
        $(this).animate({ 'clip': 'rect(' + popupwidth / 2 + 'px ' + popupwidth / 2 + 'px ' + popupwidth / 2 + 'px ' + popupwidth / 2 + 'px)' }, 200);
    });

});