var currobj = '';
function hpsClick(obj_id)
{
    if(obj_id == currobj){
        return;
    }

    if(currobj != ''){
        var fx1 = new Fx.Style(currobj + '-cnt', 'opacity').start(1,0);
    }
    currobj = obj_id;
    var fx1 = new Fx.Style(currobj + '-cnt', 'opacity').start(0,1);

    switch(obj_id)
    {
        case 'wib':
            document.getElementById("hps-bg").className = "bg bg1";

            var fx = new Fx.Styles($(obj_id), {duration: 2500, wait: false});
            fx.options.transition = Fx.Transitions.Elastic.easeInOut;
            fx.start({'left': [0], 'top': [85]});

            var fx = new Fx.Styles($('wib-cnt'), {duration: 2500, wait: false});
            fx.options.transition = Fx.Transitions.Elastic.easeInOut;
            fx.start({'left': [0], 'top': [120]});

            var fx1 = new Fx.Style('wib', 'font-size').start(14, 18);

            var fx1 = new Fx.Styles($('hiw'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [220], 'top': [85]});

            var fx1 = new Fx.Style('hiw', 'font-size').start(25, 14);

            var fx1 = new Fx.Styles($('ord'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [500], 'top': [85]});

            var fx1 = new Fx.Style('ord', 'font-size').start(27, 14);

            var fx1 = new Fx.Styles($('pri'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [410], 'top': [85]});

            var fx1 = new Fx.Style('pri', 'font-size').start(22, 14);
            break;

        case 'hiw':
            document.getElementById("hps-bg").className = "bg bg2";

            var fx = new Fx.Styles($(obj_id), {duration: 2500, wait: false});
            fx.options.transition = Fx.Transitions.Elastic.easeInOut;
            fx.start({'left': [0], 'top': [85]});

            var fx = new Fx.Styles($('hiw-cnt'), {duration: 2500, wait: false});
            fx.options.transition = Fx.Transitions.Elastic.easeInOut;
            fx.start({'left': [0], 'top': [120]});

            var fx1 = new Fx.Style('hiw', 'font-size').start(14, 20);

            var fx1 = new Fx.Styles($('wib'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [240], 'top': [85]});

            var fx1 = new Fx.Style('wib', 'font-size').start(18, 14);

            var fx1 = new Fx.Styles($('ord'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [500], 'top': [85]});

            var fx1 = new Fx.Style('ord', 'font-size').start(27, 14);

            var fx1 = new Fx.Styles($('pri'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [410], 'top': [85]});

            var fx1 = new Fx.Style('pri', 'font-size').start(22, 14);
            break;

        case 'pri':
            document.getElementById("hps-bg").className = "bg bg3";
            var fx = new Fx.Styles($(obj_id), {duration: 2500, wait: false});
            fx.options.transition = Fx.Transitions.Elastic.easeInOut;
            fx.start({'left': [0], 'top': [85]});

            var fx = new Fx.Styles($('pri-cnt'), {duration: 2500, wait: false});
            fx.options.transition = Fx.Transitions.Elastic.easeInOut;
            fx.start({'left': [0], 'top': [120]});

            var fx1 = new Fx.Style('pri', 'font-size').start(14, 20);

            var fx1 = new Fx.Styles($('wib'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [120], 'top': [85]});

            var fx1 = new Fx.Style('wib', 'font-size').start(18, 14);

            var fx1 = new Fx.Styles($('ord'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [480], 'top': [85]});

            var fx1 = new Fx.Style('ord', 'font-size').start(27, 14);

            var fx1 = new Fx.Styles($('hiw'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [300], 'top': [85]});

            var fx1 = new Fx.Style('hiw', 'font-size').start(22, 14);
            break;

        case 'ord':
            document.getElementById("hps-bg").className = "bg bg4";
            var fx = new Fx.Styles($(obj_id), {duration: 2500, wait: false});
            fx.options.transition = Fx.Transitions.Elastic.easeInOut;
            fx.start({'left': [0], 'top': [85]});

            var fx = new Fx.Styles($('ord-cnt'), {duration: 2500, wait: false});
            fx.options.transition = Fx.Transitions.Elastic.easeInOut;
            fx.start({'left': [0], 'top': [120]});

            var fx1 = new Fx.Style('ord', 'font-size').start(14, 27);

            var fx1 = new Fx.Styles($('wib'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [190], 'top': [85]});

            var fx1 = new Fx.Style('wib', 'font-size').start(18, 14);

            var fx1 = new Fx.Styles($('pri'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [510], 'top': [85]});

            var fx1 = new Fx.Style('pri', 'font-size').start(20, 14);

            var fx1 = new Fx.Styles($('hiw'), {duration: 1500, wait: false});
            fx1.options.transition = Fx.Transitions.Sine;
            fx1.start({'left': [340], 'top': [85]});

            var fx1 = new Fx.Style('hiw', 'font-size').start(22, 14);
            break;
    }
}

var hpsAllowHide = false;

function hpsDisplay(display)
{
    if(display){
        document.getElementById('ybar').style.display = 'none';
        document.getElementById('hpsbar').style.display = 'block';
        document.getElementById('pd2').style.display = 'none';
        document.getElementById('pd1').style.display = 'none';
    } else {
        if(hpsAllowHide){
            document.getElementById('ybar').style.display = 'block';
            document.getElementById('pd2').style.display = 'block';
            document.getElementById('pd1').style.display = 'block';
            document.getElementById('hpsbar').style.display = 'none';
        }
    }
}

function hpsDelayedHide()
{
    if(hpsAllowHide){
        return;
    }
    hpsAllowHide = true;
    setTimeout("hpsDisplay(false)", 10);
}
function hpsDelayedShow()
{
    if(!hpsAllowHide){
        return;
    }
    hpsAllowHide = false;
    setTimeout("hpsDisplay(true)", 10);
}