var createScroller = function(scroller) {
        var ct = 0;
        $(scroller).find('li').each(function (i) {
            $(this).attr('id', scroller + i);
            $('.dot-holder').append('<em>&#8226;</em>');
        });
        $('.dot-holder em:eq(0)').addClass('selected')
        var si = $('li.scroller-element').size();
        var liLen = $('li.scroller-element').width();

        $(scroller).width(si * liLen);
        $('.right').click(function () {
            $('.left').css('cursor', 'pointer');
            if ((si-1)!= ct) {
              //  $(this).css('background-position', 'right top');
                $('.mask').scrollTo('+=' + liLen, 400, {
                    axis: 'x'
                });
                ct++;
                dotSelect(ct);
            } else {
                $(this).css('cursor', 'default');

            }
        });
        $('.left').click(function () {
            $('.right').css('cursor', 'default');
            if (ct != 0) {
                $(this).css('background-position', 'left top');
                $('.mask').scrollTo('-=' + liLen, 400, {
                    axis: 'x'
                });
                ct--;
                dotSelect(ct);
            } else {
                $(this).css('cursor', 'default');
            }
        });

        function dotSelect(c) {
            $('.dot-holder em').removeClass('selected');
            $('.dot-holder em:eq(' + c + ')').addClass('selected')
        }
}
 
// createScroller("#hp-scroller");