$(function(){
    var handler = $('ul#tabMenu li a');
    var url = document.URL;
    var urlId = url.substr(url.lastIndexOf('#'));
    var urlIdJudgment = urlId.lastIndexOf('#');
    $('ul#tabMenu').each(function(){
        if(urlIdJudgment == 0) {
            handler.each(function(){
                if($(this).attr('href') == urlId) {
                    $(urlId).show();
                    var aimPosition = $('#tpicBox').offset();
                    $('html,body').animate({scrollTop:aimPosition.top - 10}, 500); 
                    var imgSrc = $(this).children('img').attr('src');
                    var imgDot = imgSrc.lastIndexOf('.');
                    var onSrc = imgSrc.substr(0, imgDot) + '_on' + imgSrc.substr(imgDot, 4);
                    $(this).children('img').attr('src',onSrc).addClass('onTab');
                }
            });
        }
        else {
            $('#tpicBox > div:first').show();
            var imgSrc = $('ul#tabMenu li:first img').attr('src');
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_on' + imgSrc.substr(imgDot, 4);
            $('ul#tabMenu li:first img').attr('src',onSrc).addClass('onTab');
        }
    });
    handler.click(function() {
        var imgSrc = $(this).children('img').attr('src').replace(/_on/g, "");
        var imgDot = imgSrc.lastIndexOf('.');
        var onSrc = imgSrc.substr(0, imgDot) + '_on' + imgSrc.substr(imgDot, 4);
        $(this).children('img').attr('src',onSrc);
        var imgOff = $('ul#tabMenu li img.onTab').attr('src').replace(/_on/g, "");
        $('ul#tabMenu li img.onTab').attr('src',imgOff);
        $('ul#tabMenu li img').removeClass('onTab');
        $(this).children('img').addClass('onTab');
        var clickAttr = $(this).attr('href');
        var showAttr = '#' + $('#tpicBox > div:visible').attr('id');
        if(clickAttr !== showAttr) {
            $('#tpicBox > div:visible').hide();
            var showDiv = '#tpicBox div' + clickAttr;
            $(showDiv).show();
            return false;
        }
        else {
            var imgSrc = $(this).children('img').attr('src').replace(/_on/g, "");
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_on' + imgSrc.substr(imgDot, 4);
            $(this).children('img').attr('src',onSrc);
            return false;
        }
    })
    handler.hover(function() {
        var classJudgment = $(this).children('img').attr('class');
        if(classJudgment != 'onTab') {
            var imgSrc = $(this).children('img').attr('src');
            var imgDot = imgSrc.lastIndexOf('.');
            var onSrc = imgSrc.substr(0, imgDot) + '_on' + imgSrc.substr(imgDot, 4);
            $(this).children('img').attr('src',onSrc);
        }
    }, function() {
        var classJudgment = $(this).children('img').attr('class');
        if(classJudgment != 'onTab') {
            var imgOff = $(this).children('img').attr('src').replace(/_on/g, "");
            $(this).children('img').attr('src',imgOff);
        }
    });
});