function ude_tab_click(image_group, number, image_path)
    {
        // tabs and gaps
        var imgTab1 = document.getElementById(image_group + '1');
        var imgTab1Right = document.getElementById(image_group + '1' + 'Right');
        var imgTab2 = document.getElementById(image_group + '2');
        var imgTab2Right = document.getElementById(image_group + '2' + 'Right');
        var imgTab3 = document.getElementById(image_group + '3');
        var imgTab3Right = document.getElementById(image_group + '3' + 'Right');
        var imgTab4 = document.getElementById(image_group + '4');
        
        switch (number)
        {
            case 1:
                imgTab1.src = image_path + "1_active.jpg";
                imgTab1Right.src = image_path + "_gap_active_none.gif";
                imgTab2.src = image_path + "2_none.jpg";
                imgTab2Right.src = image_path + "_gap_none_none.gif";
                imgTab3.src = image_path + "3_none.jpg";
                imgTab3Right.src = image_path + "_gap_none_none.gif";
                imgTab4.src = image_path + "4_none.jpg";
                break;
            case 2:
                imgTab1.src = image_path + "1_none.jpg";
                imgTab1Right.src = image_path + "_gap_none_active.gif";
                imgTab2.src = image_path + "2_active.jpg";
                imgTab2Right.src = image_path + "_gap_active_none.gif";
                imgTab3.src = image_path + "3_none.jpg";
                imgTab3Right.src = image_path + "_gap_none_none.gif";
                imgTab4.src = image_path + "4_none.jpg";
                break;
            case 3:
                imgTab1.src = image_path + "1_none.jpg";
                imgTab1Right.src = image_path + "_gap_none_none.gif";
                imgTab2.src = image_path + "2_none.jpg";
                imgTab2Right.src = image_path + "_gap_none_active.gif";
                imgTab3.src = image_path + "3_active.jpg";
                imgTab3Right.src = image_path + "_gap_active_none.gif";
                imgTab4.src = image_path + "4_none.jpg";
                break;
            case 4:
                imgTab1.src = image_path + "1_none.jpg";
                imgTab1Right.src = image_path + "_gap_none_none.gif";
                imgTab2.src = image_path + "2_none.jpg";
                imgTab2Right.src = image_path + "_gap_none_none.gif";
                imgTab3.src = image_path + "3_none.jpg";
                imgTab3Right.src = image_path + "_gap_none_active.gif";
                imgTab4.src = image_path + "4_active.jpg";
                break;
        }
    }
    
    function ude_tab_mouseover(image_group, number, image_path)
    {
        // tabs and gaps
        var imgTab1 = document.getElementById(image_group + '1');
        var imgTab2 = document.getElementById(image_group + '2');
        var imgTab3 = document.getElementById(image_group + '3');
        var imgTab4 = document.getElementById(image_group + '4');
        
        var selected_tab = 1;
        var regexp_pattern = new RegExp("active.jpg$");
        if (imgTab1.src.match(regexp_pattern) != null)
            selected_tab = 1;
        else if (imgTab2.src.match(regexp_pattern) != null)
            selected_tab = 2;
        else if (imgTab3.src.match(regexp_pattern) != null)
            selected_tab = 3;
        else if (imgTab4.src.match(regexp_pattern) != null)
            selected_tab = 4;
        
        var myTab = document.getElementById(image_group + number);
        var myTabRight = document.getElementById(image_group + number + 'Right');
        var myTabLeft = document.getElementById(image_group + (number - 1) + 'Right');

        switch (selected_tab - number)
        {
            case 0: // don't do anything when mouseover the active tab
                break; 
            case 1: // selected tab is on the right
                myTab.src = image_path + number + "_hover.jpg";
                if (myTabRight != null) myTabRight.src = image_path + "_gap_rollover_active.gif";
                if (myTabLeft != null) myTabLeft.src = image_path + "_gap_none_rollover.gif";
                break;
            case -1: // selected tab is on the left
                myTab.src = image_path + number + "_hover.jpg";
                if (myTabRight != null) myTabRight.src = image_path + "_gap_rollover_none.gif";
                if (myTabLeft != null) myTabLeft.src = image_path + "_gap_active_rollover.gif";
                break;
            default: // selected tab is on the left or far away
                myTab.src = image_path + number + "_hover.jpg";
                if (myTabRight != null) myTabRight.src = image_path + "_gap_rollover_none.gif";
                if (myTabLeft != null) myTabLeft.src = image_path + "_gap_none_rollover.gif";
                break;
        }
    }

    function ude_tab_mouseout(image_group, number, image_path)
    {
        // tabs and gaps
        var imgTab1 = document.getElementById(image_group + '1');
        var imgTab2 = document.getElementById(image_group + '2');
        var imgTab3 = document.getElementById(image_group + '3');
        var imgTab4 = document.getElementById(image_group + '4');
        
        var selected_tab = 1;
        var regexp_pattern = new RegExp("active.jpg$");
        if (imgTab1.src.match(regexp_pattern) != null)
            selected_tab = 1;
        else if (imgTab2.src.match(regexp_pattern) != null)
            selected_tab = 2;
        else if (imgTab3.src.match(regexp_pattern) != null)
            selected_tab = 3;
        else if (imgTab4.src.match(regexp_pattern) != null)
            selected_tab = 4;
        
        var myTab = document.getElementById(image_group + number);
        var myTabRight = document.getElementById(image_group + number + 'Right');
        var myTabLeft = document.getElementById(image_group + (number - 1) + 'Right');

        switch (selected_tab - number)
        {
            case 0: // don't do anything when mouseover the active tab
                break; 
            case 1: // selected tab is on the right
                myTab.src = image_path + number + "_none.jpg";
                if (myTabRight != null) myTabRight.src = image_path + "_gap_none_active.gif";
                if (myTabLeft != null) myTabLeft.src = image_path + "_gap_none_none.gif";
                break;
            case -1: // selected tab is on the left
                myTab.src = image_path + number + "_none.jpg";
                if (myTabRight != null) myTabRight.src = image_path + "_gap_none_none.gif";
                if (myTabLeft != null) myTabLeft.src = image_path + "_gap_active_none.gif";
                break;
            default: // selected tab is on the left or far away
                myTab.src = image_path + number + "_none.jpg";
                if (myTabRight != null) myTabRight.src = image_path + "_gap_none_none.gif";
                if (myTabLeft != null) myTabLeft.src = image_path + "_gap_none_none.gif";
                break;
        }
    }