$(document).ready(function() {
    var boxItems = $("#infoSliders div.container");
    var align;
    var infoboxEndX;
    var openWidth;
    var origObjWidth;
    
    $(boxItems).hover(function() {
        align = $(this).attr("rel");
        openWidth = $("img", this).width();
        origObjWidth = $(".crop", this).width();
        infoboxEndX = (openWidth + 20) - 243 + 70;

        //reset infotext
        if (align == 'left') {
            $(".infotext", this).css("right", "0px");
        } else {
            $(".infotext", this).css("left", "0px");
        }

        $(this).css("z-index", "100");
        $(".crop", this).css("border", "solid 10px #a10c08");
        $(".crop", this).stop(true,true).animate({ width: openWidth + 'px' }, { queue: false, duration: 250 });

        $(".infotext", this).fadeIn("slow");        
        if (align == 'left') {
            $(".infotext", this).animate({ right: infoboxEndX + 'px' }, { queue: false, duration: 750 });
        } else {
            $(".infotext", this).animate({ left: infoboxEndX + 'px' }, { queue: false, duration: 750 });
        }
    }, function() {
        $(".crop", this).stop(true, true); //Stopper animationen
        $(".infotext", this).stop(true, true); //Stopper animationen
        $(".crop", this).width(origObjWidth);
        $(this).css("z-index", "10");
        $(".crop", this).css("border", "solid 10px #000");
        $(".infotext", this).css("display", "none");
    });
});