$(document).ready(function() {
    var tab1 = $('#tab_1');
    var tab2 = $('#tab_2');
    var tab3 = $('#tab_3');
    var tab4 = $('#tab_4');

    var block1 = $('#pb_1');
    var block2 = $('#pb_2');
    var block3 = $('#pb_3');
    var block4 = $('#pb_4');

    var time1 = null;
    var time2 = null;
    var time3 = null;
    var time4 = null;
    var timeout = 150;
	
	$('#tabs a').attr('href', function() {  return this.id});

	var func1 = function() {
        time1 = setTimeout(function() {
            tab1.attr('class', 'selTab');
            tab2.attr('class', 'tab');
            tab3.attr('class', 'tab');
            tab4.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');
            tab3.css('background', 'url(/images/tab_bg.png) no-repeat top left');
            tab4.css('background', 'url(/images/tab_bg.png) no-repeat top left');

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

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

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

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

    var func3 = function() {
        time3 = setTimeout(function() {
            tab1.attr('class', 'tab');
            tab2.attr('class', 'tab');
            tab3.attr('class', 'selTab');
            tab4.attr('class', 'tab');

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

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

    var func4 = function() {
        time4 = setTimeout(function() {
            tab1.attr('class', 'tab');
            tab2.attr('class', 'tab');
            tab3.attr('class', 'tab');
            tab4.attr('class', 'selTab');

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

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

    tab1.bind('mouseover', func1);
    tab2.bind('mouseover', func2);
    tab3.bind('mouseover', func3);
    tab4.bind('mouseover', func4);
    tab1.click(func1);
    tab2.click(func2);
    tab3.click(func3);
    tab4.click(func4);
    block1.bind('mouseover', func1);
    block2.bind('mouseover', func2);
    block3.bind('mouseover', func3);
    block4.bind('mouseover', func4);
    tab1.bind('mouseout', function() {clearTimeout(time1);});
    tab2.bind('mouseout', function() {clearTimeout(time2);});
    tab3.bind('mouseout', function() {clearTimeout(time3);});
    tab4.bind('mouseout', function() {clearTimeout(time4);});

    $('.e-button').bind('click', function() {
        var link = $(this);
        link.removeClass('e-button-p');
        link.addClass('e-button');
    });

    $('.e-button').bind('mousedown', function() {
        var link = $(this);
        link.removeClass('e-button');
        link.addClass('e-button-p');
    });

    $('.e-button').bind('mouseup', function() {
        var link = $(this);
        link.removeClass('e-button-p');
        link.addClass('e-button');
    });

    $('.e-button').bind('mouseout', function() {
        var link = $(this);
        link.removeClass('e-button-p');
        link.addClass('e-button');
    });
});