// Scripts for _Layout.cshtml
$(document).ready(function () {
    var currentPosition = 0;
    var bnActive = currentPosition;
    var slideWidth = 939;
    var slides = $('.slide');
    var numberOfSlides = slides.length;

    var slide_interval = 7000; //Slide interval in milliseconds
    var timer;


    // Remove scrollbar in JS
    $('#slides_container').css('overflow', 'hidden');
    // Show VCR buttons when Javascript enabled
    $('.vcr_buttons').css('display', 'block');
    // Reset with to fill scrollbar void
    $('.slide').css('width', '939px');
    $('.backgrd_width').css('width', '939px');

    // Wrap all .slides with #slideInner div
    slides.wrapAll('<div id="slideInner"></div>')

    // Float left to display horizontally, readjust .slides width
	    .css({
	        'float': 'left',
	        'width': slideWidth
	    });

    // Set #slideInner width equal to total width of all slides
    $('#slideInner').css('width', slideWidth * numberOfSlides);

    // Start timed scrolling on page load
    autoScroll();

    function autoScroll() {
        timer = setInterval(slideLeft, slide_interval);
    }

    // auto Scroll - Slide Left 
    function slideLeft() {
        if (currentPosition == numberOfSlides - 1) {
            // We have reached the end of the slides
            // Go back to first (left most) slide
            currentPosition = 0;
            $('#slideInner').css('margin-left', 0);

        }
        else {
            currentPosition = currentPosition + 1;
            $('#slideInner').animate({
                'marginLeft': slideWidth * (-currentPosition)
            });
        }
        hiliteActiveBn(currentPosition);
    }

    //  Stop autoScroll  
    $('#BnPause').click(function (event) {
        clearInterval(timer);
        shoBnResume();

    });
    function shoBnResume() {
        $('#BnPause').css('display', 'none');
        $('#BnPlay').css('display', 'block');
    }

    //  Resume autoScroll  
    $('#BnPlay').click(function (event) {
        $('#BnPlay').css('display', 'none');
        $('#BnPause').css('display', 'block');
        autoScroll();
    });


    //  Manually Move Slides 

    $('#bn0').click(function (event) {
        clearInterval(timer);
        currentPosition = 0;
        $('#slideInner').css('margin-left', 0);
        hiliteActiveBn(0);
        shoBnResume();
    });

    $('#bn0').hover(
        function () {
            $('#bn0').css('background-image', 'url("../../Content/themes/base/images/bnmouse.png")');
        },
         function () {
             if (currentPosition == 0) {
                 $('#bn0').css('background-image', 'url("../../Content/themes/base/images/bnactive.png")');
             }
             else {
                 $('#bn0').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
             }
         }
        );

    $('#bn1').click(function (event) {
        clearInterval(timer);
        currentPosition = 1;
        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
        hiliteActiveBn(1);
        shoBnResume();
    });

    $('#bn1').hover(
        function () {
            $('#bn1').css('background-image', 'url("../../Content/themes/base/images/bnmouse.png")');
        },
         function () {
             if (currentPosition == 1) {
                 $('#bn1').css('background-image', 'url("../../Content/themes/base/images/bnactive.png")');
             }
             else {
                 $('#bn1').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
             }
         }
        );

    $('#bn2').click(function (event) {
        clearInterval(timer);
        currentPosition = 2;
        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
        hiliteActiveBn(2);
        shoBnResume();
    });


    $('#bn2').hover(
        function () {
            $('#bn2').css('background-image', 'url("../../Content/themes/base/images/bnmouse.png")');
        },
         function () {
             if (currentPosition == 2) {
                 $('#bn2').css('background-image', 'url("../../Content/themes/base/images/bnactive.png")');
             }
             else {
                 $('#bn2').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
             }
         }
        );

    $('#bn3').click(function (event) {
        clearInterval(timer);
        currentPosition = 3;
        $('#slideInner').animate({
            'marginLeft': slideWidth * (-currentPosition)
        });
        hiliteActiveBn(3);
        shoBnResume();
    });

    $('#bn3').hover(
        function () {
            $('#bn3').css('background-image', 'url("../../Content/themes/base/images/bnmouse.png")');
        },
         function () {
             if (currentPosition == 3) {
                 $('#bn3').css('background-image', 'url("../../Content/themes/base/images/bnactive.png")');
             }
             else {
                 $('#bn3').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
             }
         }
        );

    function hiliteActiveBn(bnNum) {
        switch (bnNum) {
            case 0:
                $('#bn0').css('background-image', 'url("../../Content/themes/base/images/bnactive.png")');
                $('#bn1').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                $('#bn2').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                $('#bn3').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                break;

            case 1:
                $('#bn0').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                $('#bn1').css('background-image', 'url("../../Content/themes/base/images/bnactive.png")');
                $('#bn2').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                $('#bn3').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                break;

            case 2:
                $('#bn0').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                $('#bn1').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                $('#bn2').css('background-image', 'url("../../Content/themes/base/images/bnactive.png")');
                $('#bn3').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                break;

            case 3:
                $('#bn0').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                $('#bn1').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                $('#bn2').css('background-image', 'url("../../Content/themes/base/images/bninactive.png")');
                $('#bn3').css('background-image', 'url("../../Content/themes/base/images/bnactive.png")');
                break;

        }
    }

});