﻿
$(document).ready(function() {
    // Slide animation speeds
    var open = 300;
    var close = 600;

    // Hide the accordion slides on start-up
    $('ul#accordion li .slide').hide().css({ 'width': '0' });
    $('ul#accordion li .slide p').hide();


    $('ul#accordion li').hover(
        function() {
            // Grab the class name of the hovered <li> and assign to a var so we can find the corresponding slide of the same name
            var hovered = $(this).attr('class');
            switch (hovered) {
                case 'aboutHSBC':
                    $('ul#accordion li.aboutHSBC .slide').animate({ width: '150px', borderRightWidth: '1px' }, open, function() {
                        $('ul#accordion li.aboutHSBC .slide p').show();
                    });
                    break;
                case 'yourInductionProcess':
                    $('ul#accordion li.yourInductionProcess .slide').animate({ width: '228px', borderRightWidth: '1px' }, open, function() {
                        $('ul#accordion li.yourInductionProcess .slide p').show();
                    });
                    break;
//                case 'locationGuide':
//                    $('ul#accordion li.locationGuide .slide').animate({ width: '142px', borderRightWidth: '1px' }, open, function() {
//                        $('ul#accordion li.locationGuide .slide p').show();
//                    });
//                    break;
                case 'learnDevelop':
                    $('ul#accordion li.learnDevelop .slide').animate({ width: '182px', borderRightWidth: '1px' }, open, function() {
                        $('ul#accordion li.learnDevelop .slide p').show();
                    });
                    break;
                case 'benefitsRewards':
                    $('ul#accordion li.benefitsRewards .slide').animate({ width: '203px', borderRightWidth: '1px' }, open, function() {
                        $('ul#accordion li.benefitsRewards .slide p').show();
                    });
                    break;
                case 'theEssentials':
                    $('ul#accordion li.theEssentials .slide').animate({ width: '171px', borderRightWidth: '1px' }, open, function() {
                        $('ul#accordion li.theEssentials .slide p').show();
                    });
                    break;
            }
        },
        function() {
            var hovered = $(this).attr('class');
            switch (hovered) {
                case 'aboutHSBC':
                    $('ul#accordion li.aboutHSBC .slide').animate({ width: '0', borderRightWidth: '0' }, close, function() {
                        $('ul#accordion li.aboutHSBC .slide p').hide();
                    });
                    break;
                case 'yourInductionProcess':
                    $('ul#accordion li.yourInductionProcess .slide').animate({ width: '0', borderRightWidth: '0' }, close, function() {
                        $('ul#accordion li.yourInductionProcess .slide p').hide();
                    });
                    break;
//                case 'locationGuide':
//                    $('ul#accordion li.locationGuide .slide').animate({ width: '0', borderRightWidth: '0' }, close, function() {
//                        $('ul#accordion li.locationGuide .slide p').hide();
//                    });
//                    break;
                case 'learnDevelop':
                    $('ul#accordion li.learnDevelop .slide').animate({ width: '0', borderRightWidth: '0' }, close, function() {
                        $('ul#accordion li.learnDevelop .slide p').hide();
                    });
                    break;
                case 'benefitsRewards':
                    $('ul#accordion li.benefitsRewards .slide').animate({ width: '0', borderRightWidth: '0' }, close, function() {
                        $('ul#accordion li.benefitsRewards .slide p').hide();
                    });
                    break;
                case 'theEssentials':
                    $('ul#accordion li.theEssentials .slide').animate({ width: '0', borderRightWidth: '0' }, close, function() {
                        $('ul#accordion li.theEssentials .slide p').hide();
                    });
                    break;
            }
        }
    );

});

