var leftPos=0,topPos=0;
var notIE=document.getElementById && !document.all;
var dragObj;
var divID='translitconvert';
var selection,selectedArea,startSelection,endSelection;

function getEl(id) { //saiisinaajums
element=document.getElementById(id);
return element;
}

function relocate() {
if (!notIE) {
 if (self.pageYOffset) {
  posX=self.pageXOffset;
  posY=self.pageYOffset; }
 else if (document.documentElement && document.documentElement.scrollTop) {
  posX=document.documentElement.scrollLeft;
  posY=document.documentElement.scrollTop; }
 else if (document.body) {
  posX=document.body.scrollLeft;
  posY=document.body.scrollTop; }
}


if (leftPos==0 && topPos==0) {
 if (self.innerHeight) {
  centerX=self.innerWidth/2;
  centerY=self.innerHeight/2; }
 else if (document.documentElement && document.documentElement.clientHeight) {
  centerX=document.documentElement.clientWidth/2;
  centerY=document.documentElement.clientHeight/2; }
 else if (document.body) {
  centerX=document.body.clientWidth/2;
  centerY=document.body.clientHeight/2; }

 leftPos=centerX-250;
 topPos=centerY-100; }

if (!notIE) {
 el=getEl(divID);
 el.style.left=leftPos+posX+'px';
 el.style.top=topPos+posY+'px'; }
else {
 el=getEl(divID);
 el.style.left=leftPos+'px';
 el.style.top=topPos+'px'; }
}

function setOp(op,id) {
el=getEl(id);
el.style.opacity=op/10;
el.style.filter='alpha(opacity='+op*10+')';
}

function fadeIn(id) {
for (i=0;i<=100;i++)
 setTimeout('setOp('+(i/10)+',\''+id+'\')',5*i);
}

function fadeOut(id) {
for (i=0;i<=100;i++)
 setTimeout('setOp('+(10-i/10)+',\''+id+'\')',5*i);
setTimeout('closeTC()',500);
}

function closeTC() {
el=getEl(divID);
document.body.removeChild(el);
if (!notIE) window.onscroll=null;
}

function moveObject(e) {
 if (!notIE) {
  if (self.pageYOffset) {
   posX=self.pageXOffset;
   posY=self.pageYOffset; }
  else if (document.documentElement && document.documentElement.scrollTop) {
   posX=document.documentElement.scrollLeft;
   posY=document.documentElement.scrollTop; }
  else if (document.body) {
   posX=document.body.scrollLeft;
   posY=document.body.scrollTop; }
 }

mouseLeft=notIE?e.clientX:event.clientX;
mouseTop=notIE?e.clientY:event.clientY;

if (mouseLeft<clientWidth-25) leftPos=tmpx+mouseLeft-x;
else leftPos=tmpx+clientWidth-25-x;

if (mouseTop>25 && mouseTop<clientHeight-25) topPos=tmpy+mouseTop-y;
else if (!(mouseTop>25)) topPos=tmpy+25-y;
else topPos=tmpy+clientHeight-25-y;

dragObj.style.left=notIE?leftPos+'px':leftPos+posX+'px';
dragObj.style.top=notIE?topPos+'px':topPos+posY+'px';
return false;
}

function startDrag(id,e) {
 if (self.innerHeight) {
  clientWidth=self.innerWidth;
  clientHeight=self.innerHeight; }
 else if (document.documentElement && document.documentElement.clientHeight) {
  clientWidth=document.documentElement.clientWidth;
  clientHeight=document.documentElement.clientHeight; }
 else if (document.body) {
  clientWidth=document.body.clientWidth;
  clientHeight=document.body.clientHeight; }

 dragObj=getEl(id);
 tmpx=leftPos;
 tmpy=topPos;
 x=notIE?e.clientX:event.clientX;
 y=notIE?e.clientY:event.clientY;
 document.onmousemove=moveObject;
 document.onmouseup=stopDrag;
 return false;
}

function stopDrag() {
document.onmousemove=null;
document.onmouseup=null;
}

function showTC() {
translitConv=document.createElement('div');
translitConv.setAttribute('id',divID);
if (notIE) translitConv.setAttribute('style','position:fixed; width:500px; display:none; background-color:#FFF8EB; border:#82573E 1px solid; color:#726257; z-index:1000;');
else translitConv.style.setAttribute('cssText','position:absolute; width:500px; display:none; background-color:#FFF8EB; border:#82573E 1px solid; color:#726257; z-index:1000;');
HTMLStr='<div onmousedown="startDrag(this.parentNode.id,event); return false;" style="cursor:default; padding-left:3px; background-color:#B27D5D; border-bottom:#82573E 1px solid; color:#FDEDCD;">TranslitConvert</div>';
HTMLStr+='<div style="float:left;">';
HTMLStr+='<div style="padding:5px;">Translit:<br /><textarea style="background-color:#FEFEFA; border:1px solid #82573E;" onkeyup="convert(\'translit\',\'cyrilic\');" id="translit" rows="10" cols="50"></textarea></div>';
HTMLStr+='<div style="padding:5px;">Cyrilic:<br /><textarea style="background-color:#FEFEFA; border:1px solid #82573E;" readonly="readonly" id="cyrilic" rows="10" cols="50"></textarea></div>';
HTMLStr+='</div>';
HTMLStr+='<div style="float:left; text-align:center; border:1px solid #82573E; margin-top:19px; margin-left:15px;">Translation:<br />';
HTMLStr+='<div style="padding:5px; width:20px; float:left; background-color:#FDEDCD; border-top:#82573E 1px solid;">а<br />б<br />в<br />г<br />д<br />е<br />ё<br />ж<br />з<br />и<br />й<br />к<br />л<br />м<br />н<br />о<br />п</div>';
HTMLStr+='<div style="padding:5px; float:left; border-top:#82573E 1px solid;">a<br />b<br />v<br />g<br />d<br />e<br />\'e<br />zh<br />z<br />i<br />j<br />k<br />l<br />m<br />n<br />o<br />p</div>';
HTMLStr+='<div style="padding:5px; width:20px; float:left; background-color:#FDEDCD; border-top:#82573E 1px solid;">р<br />с<br />т<br />у<br />ф<br />х<br />ц<br />ч<br />ш<br />щ<br />ъ<br />ы<br />ь<br />э<br />ю<br />я<br /><br /></div>';
HTMLStr+='<div style="padding:5px; float:left; border-top:#82573E 1px solid;">r<br />s<br />t<br />u<br />f<br />h<br />c<br />ch<br />sh<br />shch<br />`<br />`i<br />\'<br />`e<br />yu<br />ya<br /><br /></div>';
HTMLStr+='</div>';
HTMLStr+='<div style="clear:both; padding:5px; margin-top:10px; text-align:right;">';
HTMLStr+='<input style="font-size:7pt; background:#B27D5D; color:#E0E0E0; border:1px solid #82573E;" type="button" onclick="pasteValue(\'message\'); fadeOut(this.parentNode.parentNode.id);" value="Готово" /> ';
HTMLStr+='<input style="font-size:7pt; background:#B27D5D; color:#E0E0E0; border:1px solid #82573E;" type="button" onclick="fadeOut(this.parentNode.parentNode.id);" value="Закрыть" />';
HTMLStr+='</div>';
translitConv.innerHTML=HTMLStr;
document.body.appendChild(translitConv);

getSelected('message');
if (selection!='') {
 getEl('translit').value=selection;
 convert('translit','cyrilic'); }

if (!notIE) window.onscroll=relocate;
relocate();
setOp(0,divID);
el=getEl(divID);
el.style.display='block';
fadeIn(divID);
}

function getSelected(id) {
el=getEl(id);
selection='';
if (notIE) {
 startSelection=el.selectionStart;
 endSelection=el.selectionEnd;
 selection=el.value.substring(startSelection,endSelection); }
else {
 el.focus();
 selectedArea=document.selection.createRange();
 selection=selectedArea.text; }
}

function pasteValue(id) {
el=getEl(id);
if (selection!='') {
 if (notIE) el.value=el.value.substring(0,startSelection) + getEl('cyrilic').value + el.value.substring(endSelection);
 else selectedArea.text=getEl('cyrilic').value;
}
else el.value+=getEl('cyrilic').value;
}

function convert(sourceId,targetId) {
translitCombined=['SHCH','\'E','ZH','CH','SH','`I','`E','YU','YA','shch','\'e','zh','ch','sh','`i','`e','yu','ya'];
cyrilicCombined=['Щ','Ё','Ж','Ч','Ш','Ы','Э','Ю','Я','щ','ё','ж','ч','ш','ы','э','ю','я'];
translitSingle='ABVGDEZIJKLMNOPRSTUFHC~"abvgdezijklmnoprstufhc`\'';
cyrilicSingle='АБВГДЕЗИЙКЛМНОПРСТУФХЦЪЬабвгдезийклмнопрстуфхцъь';
source=getEl(sourceId).value;
i=0;

for (i=0;i<translitCombined.length;i++) {
 toChange=translitCombined[i];
 re=new RegExp(toChange,'g');
 source=source.replace(re,cyrilicCombined[i]);
}

for (i=0;i<translitSingle.length;i++) {
 toChange=translitSingle.charAt(i);
 re=new RegExp(toChange,'g');
 source=source.replace(re,cyrilicSingle.charAt(i));
}

getEl(targetId).value=source;
}