var idActiveObject=false;
var picActiveObject=false;
function fixOnePNG(element){
var src;	
    if (element.tagName=='IMG') //Если текущий элемент картинка (тэг IMG)
    {
      if (/\.png$/.test(element.src)) //Если файл картинки имеет расширение PNG
      {
        src = element.src;
        element.src = "pixel.gif"; //заменяем изображение прозрачным gif-ом

      }
    }
    else //иначе, если это не картинка а другой элемент
    {
	  //если у элемента задана фоновая картинка, то присваеваем значение свойства background-шmage переменной src
      src = element.currentStyle.backgroundImage.match(/url\("(.+\.png)"\)/i);
      if (src)
      {
        src = src[1]; //берем из значения свойства background-шmage только адрес картинки
        element.runtimeStyle.backgroundImage="none"; //убираем фоновое изображение
      }
    }
    //если, src не пуст, то нужно загрузить изображение с помощью фильтра AlphaImageLoader
    if (src) element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
function fixPNG()
{
var pWidth=document.body.clientWidth;
var pHeight=document.documentElement.clientHeight;
  //Если браузер IE версии 5.5-6
  if (/MSIE/.test(navigator.userAgent))
  {
for(var i=0; i<document.images.length; i++)
{
var element = document.images[i];
   fixOnePNG(element);
  }
}
}
		function show(id){
		//document.getElementById(id).style.display="";
		}
		function hide(id){
		document.getElementById(id+"d").style.display="none";
		}

function mOpen(id, pic){
mClose(false, false);
idActiveObject=id;
picActiveObject=pic;
			document.getElementById(id+"d").style.display="block";
				if(document.getElementById(id+"t")!=null)
				{
					document.getElementById(id+"t").style.display="block";
				}
				if(pic)
				{
					document.getElementById(id).src=id+"u.png";
				}
	if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
		{	
				element=document.getElementById(id);
				fixOnePNG(element);
		}
}


function mClose(id, pic){
if(id==false){id=idActiveObject; pic=picActiveObject;}
if(id!=false)
	{
		document.getElementById(id+"d").style.display="none";
		if(document.getElementById(id+"t")!=null)
			{
				document.getElementById(id+"t").style.display="none";
			}
		if(pic)
			{
				document.getElementById(id).src=id+"l.png";
			}
		if (/MSIE (5\.5|6).+Win/.test(navigator.userAgent))
			{	
					element=document.getElementById(id);
					fixOnePNG(element);
			}
		idActiveObject=false;
		picActiveObject=false;
	}
}
function mClick(id, pic){
	if(document.getElementById(id+"d").style.display=="none"){
			mOpen(id, pic);
			}else{
			mClose(id, pic);
		}		
}


function setPic(id, procwidth, procheight){
var k = (parseInt(document.getElementById(id).width)*procwidth-parseInt(document.getElementById(id).width)*procheight)/2;
//procwidth=procheight;
document.getElementById(id).width=parseInt(document.getElementById(id).width)*procheight;
document.getElementById(id).height=parseInt(document.getElementById(id).height)*procheight;
styleTop=parseInt(document.getElementById(id).style.top)*procheight;
styleLeft=parseInt(document.getElementById(id).style.left)*procwidth+k;
styleTopT=styleTop+'px';
styleLeftT=styleLeft+'px';
document.getElementById(id).style.top=styleTopT;
document.getElementById(id).style.left=styleLeftT;
idd=id+'d';
if(document.getElementById(idd)!=null){
document.getElementById(idd).width=parseInt(document.getElementById(idd).width)*procwidth;
document.getElementById(idd).height=parseInt(document.getElementById(idd).height)*procheight;
styleTop=parseInt(document.getElementById(idd).style.top)*procheight;
styleLeft=parseInt(document.getElementById(idd).style.left)*procwidth;
document.getElementById(idd).style.top=styleTop+'px';
document.getElementById(idd).style.left=styleLeft+'px';
}
idt=id+'t';
if(document.getElementById(idt)!=null){
styleWidth=parseInt(document.getElementById(idt).style.width)*procwidth;
styleHeight=parseInt(document.getElementById(idt).style.height)*procheight;
document.getElementById(idt).style.width=styleWidth+'px';
document.getElementById(idt).style.height=styleHeight+'px';
styleTop=parseInt(document.getElementById(idt).style.top)*procheight;
styleLeft=parseInt(document.getElementById(idt).style.left)*procwidth;
document.getElementById(idt).style.top=styleTop+'px';
document.getElementById(idt).style.left=styleLeft+'px';
}
}



function innerContent(){
var content='';
content+='<img src="fon.png"      id="fon"     width="1024px" height="768px" style="position: absolute; top: 0px; left: 0px;" z-index="0"  onmouseover="mClose(false, false)" alt="город" />';
content+='<img src="cloth.png"    id="cloth"   width="1024px" height="768px" style="position: absolute; top: 0px; left: 0px;" z-index="0"  onmouseover="mClose(false, false)" alt="облака"/>';
content+='<img src="spt100l.png"  id="spt100"  width="394px"  height="350px" class="hero" style="top: 76px; left: 283px;"  z-index="10" onclick="mClick(this.id, false)"  onmouseover="mOpen(this.id, false)" alt="трекер"/>';
content+='<img src="lesl.png"     id="les"     width="347px"  height="260px" class="hero" style="top: 436px; left: 657px;" z-index="10" onclick="document.location=\'http://pr.vi-tel.ru/pages/?id=14\'"  onmouseover="mOpen(this.id, true)" alt="лес"/>';
content+='<img src="ozerol.png"   id="ozero"   width="335px"  height="78px"  class="hero" style="top: 655px; left: 675px;" z-index="10" onclick="mClick(this.id, true)"  onmouseover="mOpen(this.id, true)"  alt="озеро" />';
content+='<img src="girll.png"    id="girl"    width="61px"   height="75px"  class="hero" style="top: 306px; left: 297px;" z-index="15" onclick="document.location=\'http://pr.vi-tel.ru/pages/?id=4\'"  onmouseover="mOpen(this.id, true)"  alt="девочка"/>';
content+='<img src="busl.png"     id="bus"     width="206px"  height="151px" class="hero" style="top: 309px; left: 625px;" z-index="10" onclick="document.location=\'http://pr.vi-tel.ru/pages/\'"  onmouseover="mOpen(this.id, false)"  alt="автобус"/>';
content+='<img src="carl.png"     id="car"     width="227px"  height="170px" class="hero" style="top: 547px; left: 445px;" z-index="10" onclick="mClick(this.id, false)"  onmouseover="mOpen(this.id, false)"  alt="машина, автомобиль"/>';
content+='<img src="cowl.png"     id="cow"     width="139px"  height="127px" class="hero" style="top: 355px; left: 876px;" z-index="10" onclick="mClick(this.id, true)"  onmouseover="mOpen(this.id, true)"  alt="корова"/>';
content+='<img src="dogl.png"     id="dog"     width="113px"  height="93px"  class="hero" style="top: 456px; left: 606px;" z-index="10" onclick="mClick(this.id, true)"  onmouseover="mOpen(this.id, true)"  alt="собака"/>';
content+='<img src="gruzl.png"    id="gruz"    width="186px"  height="162px" class="hero" style="top: 382px; left: 190px;" z-index="10" onclick="mClick(this.id, false)"  onmouseover="mOpen(this.id, false)"  alt="грузовик"/>';
content+='<img src="boyl.png"     id="boy"     width="96px"   height="139px" class="hero" style="top: 387px; left: 54px;"  z-index="10" onclick="document.location=\'http://pr.vi-tel.ru/pages/?id=4\'"  onmouseover="mOpen(this.id, true)"  alt="мальчик"/>';
content+='<img src="trancel.png"  id="trance"  width="153px"  height="83px"  class="hero" style="top: 186px; left: 12px;"  z-index="10" onclick="mClick(this.id, false)"  onmouseover="mOpen(this.id, false)"  alt="грузоперевозки"/>';
content+='<img src="lukl.png"     id="luk"     width="283px"  height="168px" class="hero" style="top: 567px; left: 10px;"  z-index="10" onclick="mClick(this.id, false)"  onmouseover="mOpen(this.id, false)" alt="люк"/>';
content+='<img src="workl.png"    id="work"    width="174px"  height="203px" class="hero" style="top: 520px; left: 255px;" z-index="10" onclick="mClick(this.id, true)"  onmouseover="mOpen(this.id, true)" alt="рабочий"/>';
content+='<img src="wafel.png"    id="wafe"    width="106px"  height="156px" class="hero" style="top: 519px; left: 97px;"  z-index="10" onclick="document.location=\'http://pr.vi-tel.ru/pages/?id=6\'"  onmouseover="mOpen(this.id, true)" alt="жена"/>';
content+='<img src="redboxl.png"  id="redbox"  width="286px"  height="93px"  class="hero" style="top: 70px; left: 697px;"  z-index="10" onclick="document.location=\'http://pr.vi-tel.ru/pages/\'"  alt="Очень простые правила пользования услугами спутникового контроля"/>';
content+='<img src="redbox2l.png" id="redbox2" width="286px"  height="93px"  class="hero" style="top: 154px; left: 697px;" z-index="10" onclick="window.open(\'http://gps.vi-tel.ru\')"  alt="Воспользоваться системой спутникового слежения"/>';
content+='<img src="girld.png"    id="girld"   width="150"   height="102px" class="speak" style="display:block; top: 238px; left: 164px;"  z-index="20" alt="А я иду в гости к своей подружке"/>';
content+='<img src="spt100d.png"  id="spt100d" width="260px" height="109px" class="speak" style="display: block; top: 144px; left: 163px;" z-index="20" alt="Я везде! Меня зовут трекер или просто маячок!"/>';
content+='<img src="busd.png"     id="busd"    width="151px" height="101px" class="speak" style="display: block; top: 245px; left: 710px;" z-index="20" alt="Я на маршруте. Подходи к остановке"/>';
content+='<img src="gruzd.png"    id="card"    width="151px" height="101px" class="speak" style="display: block; top: 505px; left: 580px;" z-index="20" alt="А я уже объехал все торговые точки"/>';
content+='<img src="cowd.png"     id="cowd"    width="138px" height="141px" class="speak" style="display: block; top: 276px; left: 885px;" z-index="20" alt="Чего уставился? Говорящих коров не видел?"/>';
content+='<img src="dogd.png"     id="dogd"    width="137px" height="93px"  class="speak" style="display: block; top: 360px; left: 598px;" z-index="20" alt="Я у своего любимого кустика в парке"/>';
content+='<img src="gruzd.png"    id="gruzd"   width="151px" height="101px" class="speak" style="display: block; top: 370px; left: 262px;" z-index="20" alt="А я уже объехал все торговые точки"/>';
content+='<img src="gruzd.png"    id="workd"   width="151px" height="101px" class="speak" style="display: block; top: 471px; left: 355px;" z-index="20" alt="Я уже работаю на втором объекте!"/>';
content+='<img src="gruzd.png"    id="boyd"    width="151px" height="101px" class="speak" style="display: block; top: 340px; left: 109px;" z-index="20" alt="А я иду в школу"/>';
content+='<img src="gruzd.png"    id="wafed"   width="151px" height="101px" class="speak" style="display: block; top: 480px; left: 169px;" z-index="20" alt="Я уже дома! Ты мне веришь?"/>';
content+='<img src="tranced.png"  id="tranced" width="161px" height="127px" class="speak" style="display: block; top: 90px; left: 12px;"   z-index="20" alt="Я очень, очень далеко везу в деревню молоко"/>';
content+='<img src="dogd.png"     id="lukd"    width="137px" height="93px"  class="speak" style="display: block; top: 612px; left: 15px;"  z-index="20" alt="Да здесь, я здесь, в полном...!"/>';
content+='<img src="lesd.png"     id="lesd"    width="138px" height="102px" class="speak" style="display: block; top: 510px; left: 877px;" z-index="20" alt="Бабах!!!"/>';
content+='<img src="gruzd.png"    id="ozerod"  width="151px" height="101px" class="speak" style="display: block; top: 590px; left: 850px;" z-index="20" alt="Я на клёвом месте!"/>';
content+='<div id="spt100t" style="display: none; width:150px; height:50px; top: 165px; left: 190px;" z-index="25"  class="textSpeak">Я везде! Меня зовут <b>трекер</b> или просто "маячок"!</div>';
content+='<div id="girlt" style="display: none; width:120px; height:50px; top: 255px; left: 170px;" z-index="25"  class="textSpeak">А я иду в гости к своей подружке</div>';
content+='<div id="boyt" style="display: none; width:120px; height:50px; top: 365px; left: 120px;" z-index="25"  class="textSpeak">А я иду в школу</div>';
content+='<div id="trancet" style="display: none; width:120px; height:50px; top: 104px; left: 30px;" z-index="25"  class="textSpeak">Я очень, очень далеко везу в деревню молоко</div>';
content+='<div id="gruzt" style="display: none; width:120px; height:50px; top: 390px; left: 280px;" z-index="25"  class="textSpeak">А я уже объехал все торговые точки</div>';
content+='<div id="wafet" style="display: none; width:120px; height:50px; top: 500px; left: 190px;" z-index="25"  class="textSpeak">Я уже дома! Ты мне веришь?</div>';
content+='<div id="lukt" style="display: none; width:120px; height:50px; top: 630px; left: 25px;" z-index="25"  class="textSpeak">Да здесь, я здесь, в полном...!</div>';
content+='<div id="workt" style="display: none; width:120px; height:50px; top: 490px; left: 375px;" z-index="25"  class="textSpeak">Я уже работаю на втором объекте!</div>';
content+='<div id="cart" style="display: none; width:120px; height:50px; top: 527px; left: 590px;" z-index="25"  class="textSpeak">Я сейчас еду с клиентом!</div>';
content+='<div id="dogt" style="display: none; width:120px; height:50px; top: 380px; left: 610px;" z-index="25"  class="textSpeak">Я у своего любимого кустика в парке</div>';
content+='<div id="ozerot" style="display: none; width:120px; height:50px; top: 620px; left: 860px;" z-index="25"  class="textSpeak">Я на клёвом месте!</div>';
content+='<div id="bust" style="display: none; width:120px; height:50px; top: 265px; left: 725px;" z-index="25"  class="textSpeak">Я на маршруте. Подходи к остановке</div>';
content+='<div id="cowt" style="display: none; width:120px; height:50px; top: 290px; left: 900px;" z-index="25"  class="textSpeak">Чего уставился? Говорящих коров не видел?</div>';
content+='<div id="lest" style="display: none; width:120px; height:50px; top: 290px; left: 900px;" z-index="25"  class="textSpeak"/>';
document.getElementById('content').innerHTML=content;
}

function simpleSetPic(id, procwidth,procheight){
document.getElementById(id).width=parseInt(document.getElementById(id).width)*procwidth;
document.getElementById(id).height=parseInt(document.getElementById(id).height)*procheight;
}

function setFon(){
innerContent();
fixPNG();
pwidth=document.body.clientWidth;
pheight=document.documentElement.clientHeight;
if(/MSIE/.test(navigator.userAgent)){pwidth=document.documentElement.clientWidth;}

if(/Opera/.test(navigator.userAgent)){ pheight=document.body.clientHeight;}
document.getElementById('load').width=pwidth;
document.getElementById('load').height=pheight;
procwidth=pwidth/document.getElementById('fon').width;
procheight=pheight/document.getElementById('fon').height;

simpleSetPic('fon', procwidth, procheight);

simpleSetPic('cloth', procwidth, procheight);

setPic('spt100', procwidth, procheight);
setPic('bus', procwidth, procheight);
setPic('cow', procwidth, procheight);
setPic('dog', procwidth, procheight);
setPic('gruz', procwidth, procheight);
setPic('car', procwidth, procheight);
setPic('girl', procwidth, procheight);
setPic('work', procwidth, procheight);
setPic('boy', procwidth, procheight);
setPic('wafe', procwidth, procheight);
setPic('trance', procwidth, procheight);
setPic('luk', procwidth, procheight);
setPic('les', procwidth, procheight);
setPic('ozero', procwidth, procheight);
setPic('redbox', procwidth, procheight);
setPic('redbox2', procwidth, procheight);
}
window.onload=function(){
setFon();
hide('spt100');
hide('bus');
hide('cow');
hide('dog');
hide('gruz');
hide('car');
hide('girl');
hide('work');
hide('boy');
hide('wafe');
hide('trance');
hide('luk');
hide('les');
hide('ozero');
document.getElementById("load").style.display="none";
}
window.onresize= function(){
document.getElementById("load").style.display="";
setFon();
hide('spt100');
hide('bus');
hide('cow');
hide('dog');
hide('gruz');
hide('car');
hide('girl');
hide('work');
hide('boy');
hide('wafe');
hide('trance');
hide('luk');
hide('les');
hide('ozero');
document.getElementById("load").style.display="none";
} 
