$(document).ready(function() {
    var tab1 = $('#tab_0');
    var tab2 = $('#tab_1');

    var block1 = $('#pb_1');
	var block2 = $('#pb_2');

	var time1 = null;
    var time2 = null;
    var timeout = 150;

	var func1 = function() {
        time1 = setTimeout(function() {
            tab1.attr('class', 'selTab');
            tab2.attr('class', 'tab');

            tab1.css('background', 'url(/images/seltab_bg.png) no-repeat top left');
            tab2.css('background', 'url(/images/tab_bg.png) no-repeat top left');

            block1.css('display', 'block');
            block2.css('display', 'none');
        }, timeout);
    };

    var func2 = function() {
        time2 = setTimeout(function() {
            tab1.attr('class', 'tab');
            tab2.attr('class', 'selTab');

            tab1.css('background', 'url(/images/tab_bg.png) no-repeat top left');
            tab2.css('background', 'url(/images/seltab_bg.png) no-repeat top left');

            block1.css('display', 'none');
            block2.css('display', 'block');
        }, timeout);
    };

	tab1.bind('mouseover', func1);
    tab2.bind('mouseover', func2);
    tab1.click(func1);
    tab2.click(func2);
    block1.bind('mouseover', func1);
    block2.bind('mouseover', func2);
    tab1.bind('mouseout', function() {clearTimeout(time1);});
    tab2.bind('mouseout', function() {clearTimeout(time2);});
});