function configureDetailsPaging(pageSize, total) {

    function parseHash(hash) {
        return parseInt(hash.substring(6)) || 1;
    }
    
    function getScrollForPage(page) {
        return ((page - 1) * pageSize);
    }
    
    function navigateToPage(page) {
        var scrollTainer = $("#scrollTainer").stop().animate(
            { scrollLeft: getScrollForPage(page) },
            { duration: 900, easing: "easeOutQuad" }
        );
    }
    
    function setupPagination(page, total) {
        $("a[href*=#image]").each(function(el) { 
            var thisPage = parseHash(this.hash);
            if (thisPage == page) $(this).addClass("active");
            else $(this).removeClass("active");
        });
        
        var pagingInfo = $("#paginationInfo")
            .empty()
            .append("Image " + page + " of " + total)
            .append(" | ")
            .append((page == 1) ? "Previous" : "<a href='#image" + (page - 1) + "'>Previous</a>")
            .append(" | ")
            .append((page == total) ? "Next" : "<a href=\"#image" + (page + 1) + "\">Next</a>");

        var navs = $("a", pagingInfo).click(function() {
            var page = parseHash(this.hash);
            navigateToPage(page);
            setupPagination(page, total);
            window.location.hash = this.hash;
            return false;
        });
    }
    
    var scroller = $("#scrollTainer");
    var currentPage = parseHash(window.location.hash);
    var cwh = window.location.hash;
    
    scroller.each(function() {
        this.scrollLeft = getScrollForPage(currentPage);
    });
    
    setupPagination(currentPage, total);
    
    $("a[href*=#image]").click(function() {
        var page = parseHash(this.hash);
        navigateToPage(page);
        setupPagination(page, total);
        window.location.hash = this.hash;
        return false;
    });
    
    setInterval(function() {
        if (window.location.hash != cwh) {
            cwh = window.location.hash;
            var page = parseHash(cwh);
            navigateToPage(page);
            setupPagination(page, total);
        }
    }, 200);

    $(document).ready(function() {
        $("div[id*=image]").removeAttr("id");
        $("#scrollTainer").each(function() {
            this.scrollLeft = getScrollForPage(currentPage);
        });
    });
}

function configurePagingPanel(pageSize, total) {

    function parseHash(hash) {
        return parseInt(hash.substring(5)) || 1;
    }

    function getScrollForPage(page) {
        return ((page - 1) * pageSize);
    }

    function navigateToPage(page) {
        var scrollTainer = $("#scrollTainer").stop().animate(
            { scrollLeft: getScrollForPage(page) }, 
            { duration: 900, easing: "easeOutQuad" }
        );
    }

    function setupPagination(page, total) {
       $("a[href*=#page]").each(function(el) { 
            var thisPage = parseHash(this.hash);
            if (thisPage == page) $(this).addClass("active");
            else $(this).removeClass("active");
        });
        
        var pagingInfo = $("#paginationInfo")
            .empty()
            .append("Page " + page + " of " + total)
            .append(" | ")
            .append((page == 1) ? "Previous" : "<a href='#page" + (page - 1) + "'>Previous</a>")
            .append(" | ")
            .append((page == total) ? "Next" : "<a href=\"#page" + (page + 1) + "\">Next</a>");
            
        var navs = $("a", pagingInfo).click(function() {
            var page = parseHash(this.hash);
            navigateToPage(page);
            setupPagination(page, total);
            window.location.hash = this.hash;
            return false;
        });
    }

    var currentPage = parseHash(window.location.hash);
    var cwh = window.location.hash;


    
    setupPagination(currentPage, total);
    
    $("a[href*=#page]").click(function() {
        var page = parseHash(this.hash);
        navigateToPage(page);
        setupPagination(page, total);
        window.location.hash = this.hash;
        return false;
    });
    
    setInterval(function() {
        if (window.location.hash != cwh) {
            cwh = window.location.hash;
            var page = parseHash(cwh);
            navigateToPage(page);
            setupPagination(page, total);
        }
    }, 200);

    $(document).ready(function() {
        $("div[id*=page]").removeAttr("id");
        $("#scrollTainer").each(function() {
            this.scrollLeft = getScrollForPage(currentPage);
        });
    });
}