var verticalAccordion = function() {
    $(function() {
        var availableSizeOfContainer; // size of the CONTENT that will sit in the box
        var headerWidths; // total width of all the HEADERS
        var containerWidth; // TOTAL width of the container
        var numberOfItems; // total number of boxes WITHIN the container
        var currentOpenItem; // index of the current OPEN content
        var isMoving; // Boolean, true if the slider is moving

        $(".accordion").addClass("vertical-accordion"); // Assign a class that takes care of some layout issues

        containerWidth = $(".vertical-accordion").width(); // gets the total width
        numberOfItems = $(".vertical-accordion h2"); // find the number of items in the container
        headerWidths = 0; // default the header widths to 0
        currentOpenItem = 0; // default the current item to 0 - opens first slider as a default
        isMoving = false; // content is not moving

        for (var x = 0; x < numberOfItems.length; x++) {
            // Loop through the headers and total up their widths
            headerWidths += $(".vertical-accordion h2").eq(x).width();
            $(".vertical-accordion h2").eq(x).html("<span>&nbsp;</span>" + $(".vertical-accordion h2").eq(x).html());
        }
        // To calculate how much space the content boxes will have, subtract the header widths
        availableSizeOfContainer = (containerWidth - headerWidths);

        function controlSlides() {
            var slidePos;
            slidePos = window.location.hash.toString().substring(1);
            
            if (slidePos > 0) {
                manageSlideState($(".vertical-accordion h2").eq(slidePos));
            } else {
                // Open the first slide, animate it.
                $(".vertical-accordion h2").eq(0).next().animate({
                    width: availableSizeOfContainer // set the content width to the remaining available size
                }, 1000).show().end().addClass("active");
            }
        }
        // Assign the click action to each slider header
        $(".vertical-accordion h2").click(function() {
            
            window.location.hash = $(".vertical-accordion h2").index(this);

            // Take current item and stop the video
            if ($(".accordion-content").eq(currentOpenItem).children()[0].tagName == "OBJECT") {
                $(".accordion-content").eq(currentOpenItem).children()[0].StopVideo();
            }
            
            // change to that slide
            manageSlideState(this);

        });

        function manageSlideState(currentSlide) {
            // if not already open OR opening another slide, do the following
            if (currentOpenItem != $(".vertical-accordion h2").index(currentSlide) && isMoving == false) {
                isMoving = true; // set moving to true
                $(currentSlide).next().show(); // show the selected content (at this point it's width is 0, so it's still not visible)
                // take the current open slide and reduce it's width to 0
                $(".vertical-accordion div.accordion-content").eq(currentOpenItem).animate({
                    width: 0
                }, 500);
                
                $(".vertical-accordion h2").removeClass("active");
                
                // At the same time, increase the new contents width to the available size
                $(currentSlide).addClass("active");

                $(currentSlide).next().animate({
                    width: availableSizeOfContainer
                }, 500, function() {
                    // No longer moving
                    isMoving = false;
                });
                // The current open item is now the one that's open
                currentOpenItem = $(".vertical-accordion h2").index(currentSlide);
            }
        }

        // This is a JQuery version of the HTML5 'hashchange' event listener, which isnt supported in IE
        $(window).bind('hashchange', controlSlides);
 
        controlSlides();
    });
};