OWL Carousel Possible to move the pagination to a new div? #196

https://github.com/OwlFonk/OwlCarousel/issues/196

HTML

<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css">
<script src="http://www.owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.js"></script>
<div id="owl-demo" class="owl-carousel owl-theme">
    <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage1.jpg" alt="The Last of us"></div>
    <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage2.jpg" alt="GTA V"></div>
    <div class="item"><img src="http://www.owlgraphic.com/owlcarousel/demos/assets/fullimage3.jpg" alt="Mirror Edge"></div>
</div>
stom-pagination-container">
</div

CSS

#custom-pagination-container {
    padding: 6px;
    background-color: #2c3e50;
}

#custom-pagination-container .owl-page {
    display: inline-block;
    zoom: 1;
    cursor: pointer;
}


#custom-pagination-container .owl-page span {
    display: block;
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    filter: Alpha(Opacity=50);
    opacity: 0.5;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background: #869791;
}

#custom-pagination-container .owl-page.active span, #custom-pagination-container .owl-page:hover span {
    filter: Alpha(Opacity=100);
    opacity: 1;
}

JavaScript

$(document).ready(function () {

    var customContainer = $('#custom-pagination-container');
    var customContainerArray = new Array();
    var OWLinit = false;

    var owl = $("#owl-demo");

    owl.owlCarousel({
        navigation: false, // Show next and prev buttons
        slideSpeed: 300,
        paginationSpeed: 400,
        singleItem: true,
        afterInit: afterOWLinit, // do some work after OWL init
        afterAction: afterAction,
        pagination: false
    });

    function afterAction() {
        if (OWLinit) updateClass(this.owl.currentItem);
        //console.info('afterAction ' + this.owl.currentItem);
    }

    function afterOWLinit() {
        // Possible to move the pagination to a new div?
        // https://github.com/OwlFonk/OwlCarousel/issues/196
        // var that = this;
        // that.owlControls.prependTo(customContainer);
        // that.owlControls.append(customContainer);
        //============================================
        $.each(this.owl.userItems, function (i) {
            var a = $('<div class="owl-page"><span></span></div>');

            customContainerArray.push(a);

            // bind click event for new pgination item
            a.bind('click', function (event) {
                event.preventDefault();
                this.goto = i;
                updateClass(this.goto); // add/remove .active class
                //console.log(this.goto);
                owl.trigger('owl.goTo', i);
            });

            customContainer.append(a);

        });

        updateClass(this.owl.currentItem);

        OWLinit = true;
    }

    function updateClass(elem) {

        // console.log('updateClass ' + elem);

        $.each(customContainerArray, function () {
            this.removeClass('active');
        });

        customContainerArray[elem].addClass('active');
    }


});