$.fn.infiniteCarouselWithRollover = function (PaddingAndMargin) {

    return this.each(function () {
        var $this = $(this),
                $wrapper = $('> div', $this),
                $slider = $wrapper.find('> ul'),
                $cloned = $slider.find('> li').clone(),
                $items = $slider.find('> li'),
                $single = $items.filter(':first'),
        //singleWidth = $single.outerWidth(), // + PaddingAndMargin,
                singleWidth = 100,
                visible = Math.ceil($wrapper.innerWidth() / singleWidth) - 1, // note: doesn't include padding or border            
                currentPage = 1,
                pages = Math.ceil($cloned.length / visible);

        if ($items.length > 5) {

            $items.remove();

            $slider.append($cloned.slice($cloned.length - visible).clone().show());
            $slider.append($cloned.clone().show());
            $slider.append($cloned.clone().show());
            $slider.append($cloned.slice(0, $cloned.length - visible).clone().show());

            $items = $slider.find('> li'); // reselect                
            $slider.width($cloned.length * singleWidth * 3);
            // 3. Set the left position to the first 'real' item     

            $wrapper.scrollLeft(singleWidth * visible);

            $wrapper.after('<a class="arrow back" href=\"#\">&lt;</a>&nbsp;&nbsp;&nbsp;<a class="arrow forward" href=\"#\">&gt;</a>');
        }
        else {
            visible = 0;
            $slider.width(1000);
        }

        // 4. paging function        
        function gotoPage(page) {
            var dir = page < currentPage ? -1 : 1,
                left = singleWidth * dir * visible;
            $wrapper.animate({
                scrollLeft: '+=' + left
            }, 1200, function () {
                $items = $slider.find('> li');
                if (dir < 0) {
                    // move up
                    $items.filter(':first').before($items.slice($items.length - (visible)));
                    $wrapper.scrollLeft(singleWidth * (visible));
                }
                else {
                    // down
                    $items.filter(':last').after($items.slice(0, visible));
                    $wrapper.scrollLeft(singleWidth * (visible));
                }
                currentPage = page;
            });
            return false;
        }

        var ppDiv = $("<div class=\"hp-pp\"/>");
        ppDiv.append($("<div class=\"hp-pp-h\"><span/></div>"));
        ppDiv.append($("<div class=\"hp-pp-i\"/>"));
        ppDiv.append($("<a href=\"#\" class=\"hp-pp-a\">find out more</a>"));

        var timer = null;


        $('.hp-pp', $this).live("mouseover", function () {
            clearTimeout(timer);
        });

        $('.hp-pp', $this).live("mouseout", function () {
            timer = setTimeout(function () {
                $('.hp-pp', $this).hide();
            }, 2000);
        });

        $('li.AdvertItem a:not(.hp-pp a)', $this).live("mouseover", function () {
            timer = clearTimeout(timer);
            $('.hp-pp', $this).hide();

            var roEl = $(this),
                ppel = roEl.parent().parent().parent().parent(),
                ppelPrev = $('.hp-pp', ppel);
            if (ppelPrev.length == 0) {
                ppelPrev = ppDiv.clone();
                ppel.append(ppelPrev);
            }


            var offset = roEl.parent().position().left - (singleWidth * visible) + 10;
            ppelPrev.css("left", offset);
            $(".hp-pp-h span", ppelPrev).text(roEl.text());
            var imgeURL = roEl.css("background-image").replace(/80/g, "204");
            $(".hp-pp-i", ppelPrev).css("background-image", imgeURL);
            $(".hp-pp-a", ppelPrev).attr("href", roEl.attr("href"));
            ppelPrev.show();

        });

        $('li.AdvertItem a:not(.hp-pp a)', $this).live("mouseout", function () {
            timer = setTimeout(function () {
                $('.hp-pp', $this).hide();
            }, 2000);
        });

        $('a.forward', this).live("click", function (e) {
            e.preventDefault();
            $('.hp-pp', $this).hide();
            clearTimeout(timer);
            return gotoPage(currentPage + 1);
        });

        $('a.back', this).live("click", function (e) {
            e.preventDefault();
            $('.hp-pp', $this).hide();
            clearTimeout(timer);
            return gotoPage(currentPage - 1);
        });

    });
}