﻿function VerticalCarousel(recordsPerPage, recordHeight, recordsPerScroll, recordCount, ListNo, scrollType) {
    
    // recordsPerPage       = number of records per page
    // recordHeight         = height of individual record
    // recordsPerScroll     = number of records that move every scroll
    // recordCount          = total number of records 
    // ListNo               = list number if multiple scroll lists on one page, if only 1 ListNo is blank string. make the first list have ids ScrollDownArrow1, DownArrowImg1 and RecordCnt1    
    // scrollType           = type of scrollbars, 1 = top and bottom scrollbars, 2 = bottom right scrollbars
    
    var allRecordsContainer = "RecordsListAll";
    var height = recordsPerPage * recordHeight;             // height of visible area
    var scrollSpacing = recordsPerScroll * recordHeight;    //spacing between each scroll

    var ListIndex;
    if (ListNo == "")
        ListIndex = 0;
    else 
        ListIndex = parseInt(ListNo) - 1;
        
    $('#ScrollDownArrow' + ListNo).unbind('click');
    $('#ScrollUpArrow' + ListNo).unbind('click');
    $('.' + allRecordsContainer + ':eq(' + ListIndex + ')').css('margin-top','0px');
    document.getElementById("UpArrowImg" + ListNo).style.display = 'none';
    document.getElementById("DownArrowImg" + ListNo).style.display = 'none';
    $("#ScrollDownArrow" + ListNo).css({ "cursor": "default" });
    $("#ScrollUpArrow" + ListNo).css({ "cursor": "default" });
    
    if (scrollType == '2'){
        $("#ScrollDownArrow" + ListNo).css({ "display": "none" });
        $("#ScrollUpArrow" + ListNo).css({ "display": "none" });
    }
    
    if (recordCount > recordsPerPage){
    
        $("#ScrollDownArrow" + ListNo).css({ "display": "block" });
        $("#ScrollUpArrow" + ListNo).css({ "display": "block" });
    
        if (scrollType == '2'){
            $("#ScrollDownArrow" + ListNo).addClass("ScrollActive");
        }
        
        document.getElementById("DownArrowImg" + ListNo).style.display = '';
        document.getElementById("DownArrowImg" + ListNo).src = "../assets/images/ScrollDownArrow.png";
        $("#ScrollDownArrow" + ListNo).css({ "cursor": "pointer" });
        
        $('#ScrollDownArrow' + ListNo).click(function() {
        
            // height of div containing every record
            var divheight = Math.ceil(recordCount / recordsPerScroll) * recordsPerScroll * recordHeight;
            // margin-top of div when at bottom of list
            var maxheight = height - divheight;
            
            var maxMarginTop = parseInt(maxheight) + parseInt(scrollSpacing) + 'px';
             
            if ($('.' + allRecordsContainer + ':eq(' + ListIndex + ')').css('margin-top') != maxheight + 'px') {
                $('.' + allRecordsContainer + ':eq(' + ListIndex + ')').animate({ marginTop: "-=" + scrollSpacing + "" }, 'slow');
            }
            
            if ($('.' + allRecordsContainer + ':eq(' + ListIndex + ')').css('margin-top') == maxMarginTop) {
                document.getElementById("DownArrowImg" + ListNo).style.display = 'none';
                document.getElementById("DownArrowImg" + ListNo).src = "../assets/images/ScrollDownArrow_disabled.png";
                $("#ScrollDownArrow" + ListNo).css({ "cursor": "default" });
                
                if (scrollType == '2'){
                    $("#ScrollDownArrow" + ListNo).removeClass("ScrollActive");
                }
            }
            else if ($('.' + allRecordsContainer + ':eq(' + ListIndex + ')').css('margin-top') == parseInt(maxheight) + 'px') {
                document.getElementById("DownArrowImg" + ListNo).style.display = 'none';
                document.getElementById("DownArrowImg" + ListNo).src = "../assets/images/ScrollDownArrow_disabled.png";
                $("#ScrollDownArrow" + ListNo).css({ "cursor": "default" });
                
                if (scrollType == '2'){
                    $("#ScrollDownArrow" + ListNo).removeClass("ScrollActive");
                }
            }
            else {
                document.getElementById("DownArrowImg" + ListNo).style.display = '';
                document.getElementById("DownArrowImg" + ListNo).src = "../assets/images/ScrollDownArrow.png";
                $("#ScrollDownArrow" + ListNo).css({ "cursor": "pointer" });
                
                if (scrollType == '2'){
                    $("#ScrollDownArrow" + ListNo).addClass("ScrollActive");
                }
            }
            document.getElementById("UpArrowImg" + ListNo).style.display = '';
            document.getElementById("UpArrowImg" + ListNo).src = "../assets/images/ScrollUpArrow.png";
            $("#ScrollUpArrow" + ListNo).css({ "cursor": "pointer" });
            
            if (scrollType == '2'){
                $("#ScrollUpArrow" + ListNo).addClass("ScrollActive");
            }

        });
        $('#ScrollUpArrow' + ListNo).click(function() {

            if ($('.' + allRecordsContainer + ':eq(' + ListIndex + ')').css('margin-top') != '0px') {
                $('.' + allRecordsContainer + ':eq(' + ListIndex + ')').animate({ marginTop: "+=" + scrollSpacing + "px" }, 'slow');
            }

            if ($('.' + allRecordsContainer + ':eq(' + ListIndex + ')').css('margin-top') == '-' + scrollSpacing + 'px') {
                document.getElementById("UpArrowImg" + ListNo).style.display = 'none';
                document.getElementById("UpArrowImg" + ListNo).src = "../assets/images/ScrollUpArrow_disabled.png";
                $("#ScrollUpArrow" + ListNo).css({ "cursor": "default" });
                
                if (scrollType == '2'){
                    $("#ScrollUpArrow" + ListNo).removeClass("ScrollActive");
                }
            }
            else if ($('.' + allRecordsContainer + ':eq(' + ListIndex + ')').css('margin-top') == '0px') {
                document.getElementById("UpArrowImg" + ListNo).style.display = 'none';
                document.getElementById("UpArrowImg" + ListNo).src = "../assets/images/ScrollUpArrow_disabled.png";
                $("#ScrollUpArrow" + ListNo).css({ "cursor": "default" });
                
                if (scrollType == '2'){
                    $("#ScrollUpArrow" + ListNo).removeClass("ScrollActive");
                }
            }
            else {
                document.getElementById("UpArrowImg" + ListNo).style.display = '';
                document.getElementById("UpArrowImg" + ListNo).src = "../assets/images/ScrollUpArrow.png";
                $("#ScrollUpArrow" + ListNo).css({ "cursor": "pointer" });
                
                if (scrollType == '2'){
                    $("#ScrollUpArrow" + ListNo).addClass("ScrollActive");
                }
            }
            document.getElementById("DownArrowImg" + ListNo).style.display = '';
            document.getElementById("DownArrowImg" + ListNo).src = "../assets/images/ScrollDownArrow.png";
            $("#ScrollDownArrow" + ListNo).css({ "cursor": "pointer" });
            
            if (scrollType == '2'){
                $("#ScrollDownArrow" + ListNo).addClass("ScrollActive");
            }
        });
    }
}

