Event.observe(window, 'load', function()
{
    var tabs = [
        'tcut',
        'tcolor',
        'twcolor',
        'twcolorh',
        'scolor',
        'dmoving',
        'csmoving',
        'csmovingh',
        'shukumo',
        'shukumoh',
        'shampoo',
        'ext',
        'ext2',
        'ext3',
        'ext4'
    ];
    
    
    tabs.each(function(tab)
    {
        
        var twcolor = ['twcolor', 'twcolorh'];
        var csmoving = ['csmoving', 'csmovingh'];
        var shukumo = ['shukumo', 'shukumoh'];
        var ext = ['ext','ext2','ext3','ext4'];
        
        Event.observe(tab, 'mouseover', function()
            {
                //alert(twcolor.include(tab));
                switch(tab){
                case twcolor.detect(function(tw) {if(tab == tw) return true; else return false;}):
                    twcolor.each(function(name){
                        Element.addClassName($(name), 'highlight');
                        $('menu_hl_' + twcolor[0]).style.display = "block";
                    });
                    break;
                case csmoving.detect(function(tw) {if(tab == tw) return true; else return false;}):
                    csmoving.each(function(name){
                        Element.addClassName($(name), 'highlight');
                        $('menu_hl_' + csmoving[0]).style.display = "block";
                    });
                    break;
                case shukumo.detect(function(tw) {if(tab == tw) return true; else return false;}):
                    shukumo.each(function(name){
                        Element.addClassName($(name), 'highlight');
                        $('menu_hl_' + shukumo[0]).style.display = "block";
                    });
                    break;
                case ext.detect(function(tw) {if(tab == tw) return true; else return false;}):
                    ext.each(function(name){
                        Element.addClassName($(name), 'highlight');
                        $('menu_hl_' + ext[0]).style.display = "block";
                    });
                    break;
                default:
                    Element.addClassName($(tab), 'highlight');
                    $('menu_hl_' +tab).style.display = "block";
                    break;
                }
                
            }
        );
        
        Event.observe(tab, 'mouseout', function()
            {
                switch(tab){
                case twcolor.detect(function(tw) {if(tab == tw) return true; else return false;}):
                    twcolor.each(function(name){
                        Element.removeClassName($(name), 'highlight');
                        $('menu_hl_' + twcolor[0]).style.display = "none";
                    });
                    break;
                case csmoving.detect(function(tw) {if(tab == tw) return true; else return false;}):
                    csmoving.each(function(name){
                        Element.removeClassName($(name), 'highlight');
                        $('menu_hl_' + csmoving[0]).style.display = "none";
                    });
                    break;
                case shukumo.detect(function(tw) {if(tab == tw) return true; else return false;}):
                    shukumo.each(function(name){
                        Element.removeClassName($(name), 'highlight');
                        $('menu_hl_' + shukumo[0]).style.display = "none";
                    });
                    break;
                case ext.detect(function(tw) {if(tab == tw) return true; else return false;}):
                    ext.each(function(name){
                        Element.removeClassName($(name), 'highlight');
                        $('menu_hl_' + ext[0]).style.display = "none";
                    });
                    break;
                default:
                    Element.removeClassName($(tab), 'highlight');
                    $('menu_hl_' +tab).style.display = "none";
                    break;
                }
            }
        );
    });
    
});