var ques ='Для каких целей Вам требуется укрытие(палатка)?';
var ques1 = 'Сварка трубопроводов d 325-1420мм';
var ques1_1 = 'Для защиты от осадков при сварке и диагностике труб';
var ques1_2 = 'Для сварки в среде защитных газов и с возможностью обогрева внутреннего пространства';
var ques1_2_1 = 'Тентовая';
var ques1_2_2 = 'Металлическая';

// start of functions

function link()  {
  document.getElementById('links').innerHTML = '<p>'+ques+'<ul><li><a href="javascript:void(0)"onclick="link1();">Сварка трубопроводов d 325 - 1420мм</a></li><li><a href="javascript:void(0)"onclick="link2();">Сварка трубопроводов d 63 - 530мм</a></li><li><a href="javascript:void(0)"onclick="link3();">Ремонтные работы в полевых условиях в траншеях, на кабельных трассах</a></li></ul>';
 }
function link1() {
  document.getElementById('pathway').innerHTML += ' <ul><li>'+ques+'</li></ul>';
  document.getElementById('links').innerHTML = ' <p>'+ques1+'<ul><li><a href="javascript:void(0);" onclick="link1_1();">'+ques1_1+'</a></li><li><a href="javascript:void(0);" onclick="link1_2();">'+ques1_2+'</a></li></ul>';
 }
function link2() {
  document.getElementById('pathway').innerHTML += ' fuck';
 }

function link3() {
  document.getElementById('pathway').innerHTML += ' fuck';
 }
function link1_1() {
  document.getElementById('pathway').innerHTML += '<ul><li>'+ques1+'</li></ul>';
  document.getElementById('links').innerHTML = ' <p>'+ques1_1+'<ul><li><a href="javascript:void(0);" onclick="alert(\'information\');">Укрытие Сфера-Универсал из углеродистой стали</a></li><li><a href="javascript:void(0);" onclick="alert(\'information\');">Укрытие Сфера-Люкс из нержавеющей стали</a></li>';
 }
function link1_2() {
  document.getElementById('pathway').innerHTML += '<ul><li>'+ques1+'</li></ul>';
  document.getElementById('links').innerHTML = ' <p>'+ques1_2+'<ul><li><a href="javascript:void(0);" onclick="link1_2_1();">'+ques1_2_1+'</a></li><li><a href="javascript:void(0);" onclick="link1_2_2();">'+ques1_2_2+'<a></li>';
 }
function link1_2_1() {
  document.getElementById('pathway').innerHTML += '<ul><li>'+ques1_2+'</li></ul>';
  document.getElementById('links').innerHTML = ' <p>'+ques1_2_1+'<ul><li><a href="javascript:void(0);" onclick="alert(\'information\');">Шатер, Шатер-Люкс для сварки труб d 325 - 1020мм</a></li><li><a href="javascript:void(0);" onclick="alert(\'information\');">Шатер, Шатер-Люкс для сварки труб d 1020 - 1420мм<a></li>';
 }
function link1_2_2() {
  document.getElementById('pathway').innerHTML += '<ul><li>'+ques1_2+'</li></ul>';
  document.getElementById('links').innerHTML = ' <p>'+ques1_2_2+'<ul><li><a href="javascript:void(0);" onclick="alert(\'information\');">Для сварки металлических трубопроводов</a></li><li><a href="javascript:void(0);" onclick="alert(\'information\');">чтото бля непонятное :(<a></li>';
 }




// fuuuuuuuuuuuuuuuuuuck
/*

var text1 = '<a href="javascript:void(0);" OnClick="show(4);">Для защиты от атмосферных осадков</a>';
var text2 = '<a href="javascript:void(0);" Onclick="show(5);">Для сварки в среде защитных газов</a>';
var text3 = 'Для защиты от атмосферных осадков при сварке и диагностике труб';
var text4 = 'Для сварки в среде защитных газов с возможностью обогрева внутреннего пространства';
var text5 = 'Для защиты работающих от атмосферных осадков';
var text6 = 'Для хранения оборудования, переодевания рабочих, сварки, ремонта, с возможностью обогрева пространства';
var text7 = '<a href="javascript:void(0);" Onclick="alert(\'information1\');">Укрытие Сфера-Универсал из углеродистой стали</a><br><br><a href="javascript:void(0);" Onclick="alert(\'information2\');">Укрытие Сфера-Люкс из нержавеющей стали</a>';
var text8 = '<a href="javascript:void(0);" Onclick="show(6);">Тентовая</a>';
var text9 = '<a href="javascript:void(0);" Onclick="show(7);">Металлическая</a>'; 
var text10 = '<a href="javascript:void(0);" Onclick="alert(\'information3\');">Шатер, Шатер-Люкс для сварки труб d 325 - 1020 мм</a><br><br><a href="javascript:void(0);" Onclick="alert(\'information4\');">Шатер, Шатер-Люкс для сварки труб d 1020 - 1420мм</a>';
var text11 = 'Для сварки пластиковых трубопроводов с возможностью подачи оборудования через крышу';
var text12 = '<a href="javascript:void(0);" Onclick="show(8);">Для сварки металлических трубопроводов</a>';




//end of variables
function identy(id) {
  return document.getElementById(id);
}
//clear first string 
function clear_1() {
identy('bl1').style.backgroundColor = identy('bl2').style.backgroundColor = identy('bl3').style.backgroundColor = '#9cc3ce';
identy('b1').style.visibility = identy('b2').style.visibility = 'visible';
identy('b3').style.visibility = identy('b4').style.visibility = 'hidden';

}
function clear_2() {
identy('b1').style.backgroundColor = identy('b2').style.backgroundColor = identy('b3').style.backgroundColor = identy('b4').style.backgroundColor = '#9cc3ce';
identy('b3').style.visibility = identy('b4').style.visibility = 'visible';
identy('b5').style.visibility = identy('b6').style.visibility = 'hidden';
}
function clear_3() {
identy('b3').style.backgroundColor = identy('b4').style.backgroundColor = '#9cc3ce';
identy('b5').style.visibility = identy('b6').style.visibility = 'visible';
}
function clear_3() {
identy('b5').style.backgroundColor = identy('b6').style.backgroundColor = '#9cc3ce';
identy('b7').style.visibility = identy('b8').style.visibility = 'visible';
 }

function show(num) {
  switch (num)   {
      case 1:
           clear_2();
           clear_1();
           identy('b1').innerHTML = text1;
           identy('b2').innerHTML = text2;
           identy('bl1').style.backgroundColor = '#b5e6f4';
           break;
      case 2:
           clear_2();
           clear_1();
           identy('b1').innerHTML = text3;
           identy('b2').innerHTML = text4;
           identy('bl2').style.backgroundColor = '#b5e6f4';
           break;
      case 3: 
           clear_2();
           clear_1();
           identy('b1').innerHTML = text5;
           identy('b2').innerHTML = text6;
           identy('bl3').style.backgroundColor = '#b5e6f4';
           break;
      case 4:
           clear_2();
           identy('b3').innerHTML = text7;
           identy('b4').style.visibility = 'hidden';
           identy('b1').style.backgroundColor = '#b5e6f4';
           break;
      case 5:
           clear_2();
           identy('b3').innerHTML = text8;
           identy('b4').innerHTML = text9;
           identy('b2').style.backgroundColor = '#b5e6f4';
           break;
      case 6:
           clear_3();
           identy('b5').innerHTML = text10;
           identy('b6').style.visibility = 'hidden';
           identy('b3').style.backgroundColor = '#b5e6f4';
           break;
      case 7:
           clear_3();
           identy('b5').innerHTML = text11;
           identy('b6').innerHTML = text12;
           identy('b3').style.backgroundColor = '#b5e6f4';
           break;
    
      default :
           break;
    }
 }

*/

//start of variables
var color = '#73c7ef';
var hover_color = 'white'; // hex or name of active block color

var text1 = '<a href="javascript:void(0);" OnClick="show(1);">Сварка трубопроводов <br>d 325 - 1420мм</a>';
var text2 = '<a href="javascript:void(0);" OnClick="show(2);">Сварка трубопроводов <br>d 63 - 530мм</a>';
var text3 = '<a href="javascript:void(0);" OnClick="show(3);">Ремонтные работы в полевых условиях: в траншеях, на небольших трассах</a>';
var text1_1 = '<a href="javascript:void(0);" OnClick="show(4);">Для защиты от атмосферных осадков при сварке и диагностике труб</a>'
var text1_2 = '<a href="javascript:void(0);" OnClick="show(5);">Для сварки в среде защитных газов с возможностью обогрева внутреннего пространства</a>'
var text2_1 = '<a href="javascript:void(0);" OnClick="show(6);">Для защиты от атмосферных осадков при сварке и диагностике труб</a>'
var text2_2 = '<a href="javascript:void(0);" OnClick="show(7);">Для сварки в среде защитных газов с возможностью обогрева внутреннего пространства</a>'
var text3_1 = '<a href="javascript:void(0);" OnClick="show(8);">Для защиты работающих от атмосферных осадков</a>'
var text3_2 = '<a href="javascript:void(0);" OnClick="show(9);">Для хранения оборудования, переодевания рабочих, сварки, ремонта, с возможностью обогрева пространства</a>'
var text1_1_1 = '<a href="/cover-for-welding-works/sphere.htm">Укрытие Сфера-Универсал из углеродистой стали</a><br><br><a href="/cover-for-welding-works/sphere.htm">Укрытие Сфера-Люкс из нержавеющей стали</a>';
var text1_2_1 = '<a href="javascript:void(0);" OnClick="show(10);">Тентовая</a>';
var text1_2_2 = '<a href="javascript:void(0);" OnClick="show(11);">Металлическая</a>';
var text2_1_1 = '<a href="/cover-for-welding-works/sphere.htm">Сфера-Компакт</a><br><br><a href="/cover-for-welding-works/zont-svarochniy.htm">Зонт Сварочный</a>';
var text2_2_1 = '<a href="/cover-for-welding-works/tent.htm">Шатер-Компакт для труб d 20 - 325мм</a><br><br><a href="/cover-for-welding-works/vahtovik.htm">Вахтовик для сварки труб d 63 - 530мм</a>';
var text3_1_1 = '<a href="/cover-for-welding-works/trassa.htm">Укрытие Трасса</a>';
var text3_2_1 = '<a href="/cover-for-welding-works/shater-kompact.htm">Палатка Шатер-Компакт</a><br><br><a href="/cover-for-welding-works/vahtovik.htm">Палатка Вахтовик</a>';
var text1_2_1_1 = '<a href="/cover-for-welding-works/tent.htm"">Шатер, Шатер-Люкс для сварки труб d 325 - 1020мм</a><br><br><a href="/cover-for-welding-works/tent.htm">Шатер, Шатер-Люкс для сварки труб d 1020 - 1420мм</a>';
var text1_2_2_1 = '<a href="javascript:void(0);" OnClick="show(12);">Для сварки пластиковых труб с возможностью подачи оборудования через крышу</a>';
var text1_2_2_2 = '<a href="javascript:void(0);" OnClick="show(13);">Для сварки металлических трубопроводов</a>';
var text1_2_2_1_1 = '<a href="javascript:void(0);" Onclick="alert(\'information12\');">Палатка **** для сварки d 325 - 1420мм</a>';
var text1_2_2_2_1 = '<a href="/cover-for-welding-works/tent-magistral.htm">Магистраль</a>';


//end of variables


//start Of Functions

function identy(id) //W3C element call
    {
        return document.getElementById(id);
    }

function clear(str)
    {
        switch (str)   {
            case 1 :
                identy('b1').style.visibility = identy('b2').style.visibility = identy('b3').style.visibility = 'visible';
                identy('b1').style.backgroundColor = identy('b2').style.backgroundColor = identy('b3').style.backgroundColor = color;
                identy('b4').style.visibility = identy('b5').style.visibility = identy('b6').style.visibility = identy('b7').style.visibility = identy('b8').style.visibility = identy('b9').style.visibility = identy('b10').style.visibility = identy('b11').style.visibility = 'hidden';
            break;
            case 2 :
                identy('b1').style.backgroundColor = identy('b2').style.backgroundColor = identy('b3').style.backgroundColor = identy('b4').style.backgroundColor = identy('b5').style.backgroundColor = color;
                identy('b4').style.visibility = identy('b5').style.visibility = 'visible';            
                identy('b6').style.visibility = identy('b7').style.visibility = identy('b8').style.visibility = identy('b9').style.visibility = identy('b10').style.visibility = identy('b11').style.visibility = 'hidden';
            break;
            case 3 : 
                identy('b6').style.visibility = identy('b7').style.visibility = 'visible';
                identy('b4').style.backgroundColor = identy('b5').style.backgroundColor = identy('b6').style.backgroundColor = identy('b7').style.backgroundColor = color;
                identy('b8').style.visibility = identy('b9').style.visibility = identy('b10').style.visibility = identy('b11').style.visibility = 'hidden';
            break;
            case 4 :
                identy('b8').style.visibility = identy('b9').style.visibility = 'visible';
                identy('b6').style.backgroundColor = identy('b7').style.backgroundColor = identy('b8').style.backgroundColor = identy('b9').style.backgroundColor = color;
                identy('b10').style.visibility = identy('b11').style.visibility = 'hidden';
            break;
            case 5 : 
                identy('b10').style.visibility = identy('b11').style.visibility = 'visible';
                identy('b8').style.backgroundColor = identy('b9').style.backgroundColor = identy('b10').style.backgroundColor = identy('b11').style.backgroundColor = color;
            break;

            default : break; }
          
    }

function show(num) 
    {
        switch (num)   {
            case 0 :
                identy('b0').style.backgroundColor = hover_color;
                clear(1);
                identy('b1').innerHTML = text1;
                identy('b2').innerHTML = text2;
                identy('b3').innerHTML = text3;
            break;
            case 1 : 
                clear(2);
                identy('b1').style.backgroundColor = hover_color;
                identy('b4').innerHTML = text1_1;
                identy('b5').innerHTML = text1_2;
            break;
            case 2 :
                clear(2);
                identy('b2').style.backgroundColor = hover_color;
                identy('b4').innerHTML = text2_1;
                identy('b5').innerHTML = text2_2;
            break;
            case 3 :
                clear(2);
                identy('b3').style.backgroundColor = hover_color;
                identy('b4').innerHTML = text3_1;
                identy('b5').innerHTML = text3_2;  
            break;
            case 4 : /* :: it provides just one visible block :: */
                clear(3);
                identy('b4').style.backgroundColor = hover_color;
                identy('b6').style.backgroundColor = hover_color;
                identy('b6').innerHTML = text1_1_1;
                identy('b7').style.visibility = 'hidden';  
            break;
            case 5 : 
                clear(3);
                identy('b5').style.backgroundColor = hover_color;
                identy('b6').innerHTML = text1_2_1;
                identy('b7').innerHTML = text1_2_2;  
            break;
            case 6 : /* :: it provides just one visible block :: */
                clear(3);
                identy('b4').style.backgroundColor = hover_color;
                identy('b6').style.backgroundColor = hover_color;
                identy('b6').innerHTML = text2_1_1;
                identy('b7').style.visibility = 'hidden';  
            break;
            case 7 : /* :: it provides just one visible block :: */
                clear(3);
                identy('b5').style.backgroundColor = hover_color;
                identy('b7').style.backgroundColor = hover_color;
                identy('b7').innerHTML = text2_2_1;
                identy('b6').style.visibility = 'hidden';  
            break;
            case 8 : /* :: it provides just one visible block :: */
                clear(3);
                identy('b4').style.backgroundColor = hover_color;
                identy('b6').style.backgroundColor = hover_color;
                identy('b6').innerHTML = text3_1_1;
                identy('b7').style.visibility = 'hidden';  
            break;
            case 9 : /* :: it provides just one visible block :: */
                clear(3);
                identy('b5').style.backgroundColor = hover_color;
                identy('b7').style.backgroundColor = hover_color;
                identy('b7').innerHTML = text3_2_1;
                identy('b6').style.visibility = 'hidden';  
            break;
            case 10 : /* :: it provides just one visible block :: */
                clear(4);
                identy('b6').style.backgroundColor = hover_color;
                identy('b8').style.backgroundColor = hover_color;
                identy('b8').innerHTML = text1_2_1_1;
                identy('b9').style.visibility = 'hidden';
            break;
            case 11 :
                clear(4);
                identy('b7').style.backgroundColor = hover_color;
                identy('b8').innerHTML = text1_2_2_1;
                identy('b9').innerHTML = text1_2_2_2;
            break;
            case 12 : 
                clear(5);
                identy('b8').style.backgroundColor = hover_color;
                identy('b10').style.backgroundColor = hover_color;
                identy('b10').innerHTML = text1_2_2_1_1;
                identy('b11').style.visibility = 'hidden';  
            break;
            case 13 : 
                clear(5);
                identy('b9').style.backgroundColor = hover_color;
                identy('b11').style.backgroundColor = hover_color;
                identy('b11').innerHTML = text1_2_2_2_1;
                identy('b10').style.visibility = 'hidden';  
            break;
                
            default : break; }
    }