$(document).ready(function(){  

var tabMenu = $("#tabMenu ul>li>a");
var tabSubMenu = $("#tabSubMenu>div");
 
// 모든 서브메뉴 안보이게
tabSubMenu.hide();
 
// 탭메뉴 a 를 클릭했을때
tabMenu.on("click", function(e){
    // 클릭한 메뉴가 몇번째 메뉴인지 가져옴
    var idx = tabMenu.index($(this));
 
    // 모든 서브메뉴 안보이게
    tabSubMenu.hide();
    // 서브메뉴중에서 클릭한 메뉴에 해당하는 서브메뉴만 보이게
    tabSubMenu.eq(idx).show();
 
    // 현재 on 이미지를 off 이미지로 변경
    tabMenu.find("img.on").removeClass("on").toggle();
    // 클릭한 탭 이미지만 on 이미지로 변경
    $(this).find("img").addClass("on").toggle({to:"on"});
}).on("mouseover", function(){
    // 마우스 오버됬을때 클릭한것처럼 동작
    $(this).click();
});

 
 
 
/**
    이미지 토클 훌러그인
    $("img").toggle();              // on이면 off로, off면 on 이미지로
    $("img").toggle({to:"on"});     // 무조건 on 이미지로
    // on, off 이미지 패턴설정
    $("img").toggle({to:"on", on:"_on.gif", ".gif"});
*/
$.fn.toggle = function(opt){
    var base = {
        to : null,
        on : "_on.jpg",
        off : ".jpg"
    };
 
    $.extend(base, opt);
 
    this.each(function(){
        var el = $(this);
         
        if(!el.is("img")) return;
         
        var src = conv = el.attr("src");
         
        // to 옵션이 있을때
        if( base.to ){
            if( base.to=="on" && (src.indexOf(base.on)<0) ) conv = src.replace(base.off,base.on);
            else if( base.to=="off" ) conv = src.replace(base.on,base.off);
        }
        // to 옵션이 없으면 토글 처리
        else{
            conv = (src.indexOf(base.on) < 0) ? src.replace(base.off,base.on) : src.replace(base.on,base.off);
        }
         
        el.attr("src", conv);
        el.data("orgimg", conv);
    });
     
    return this;
};
 
 
// 페이지 로딩시 맨 첫번째 메뉴 튀어나와 있게 함.
tabMenu.eq(0).click();


});