$(document).ready(function(){
var buts_skins = new Array('images/pan1_1.jpg',
                           'images/pan1_2.jpg',
                           'images/pan1_3.jpg');
var delay = 300;
var duration = 600;
//
var cur_cont = 0;
//
buts = $('.info_pan1').find('.pan1_h_but');
conts = $('.pan1_contents').find('.pan1_cont');
for(i = 0; i < buts.length; i++)
{
    $(buts[i]).css('background','url('+buts_skins[i]+')');
    $(conts[i]).css('display','none').children('div').css('opacity',0);
}
//
$(buts[cur_cont]).css('background-position','0px 69px');
$(conts[cur_cont]).css('display','block').children('div').css('opacity',1);
//
buts.bind('mouseover', function(){
    $(this).css('background-position','0px 69px');
}).bind('mouseout', function(){
    if(this == buts[cur_cont])
    {

    }
    else
    {
        $(this).css('background-position','0px 0px');
    }
}).bind('click', function(){
    //alert(this.id);
    showCont(this.id);
});

function showCont(id)
{

    id = id.split('_');
    id = parseInt(id[id.length-1]);

    $(conts[cur_cont]).css('display','none').children('div').css('opacity',0);
    $(buts[cur_cont]).css('background-position','0px 0px');
    //
    $(conts[id]).css('display','block');
    $(buts[id]).css('background-position','0px 69px');
    cur_cont = id;
    boxes = $(conts[id]).children('div');
    t_delay = delay;
    for(i = 0; i < boxes.length; i++)
    {

        if(i == 0)
            $(boxes[i]).animate({opacity:1},{queue:false, duration:duration});
        else
        {
            $(boxes[i]).delay(t_delay).queue(function(){$(this).animate({opacity:1},{queue:false, duration:duration});$(this).dequeue();});
            t_delay += delay;
        }
    }

}
});