var zmena=false;
var rychlost=7;

function setHodn(hodnota){
ukazatel = document.getElementById('hodnInp');
hodnota=Math.round((hodnota-5)/2);
ukazatel.value=hodnota;
ukazatel = document.getElementById('procenta');
ukazatel.innerHTML=hodnota+'%';
}

function zmenit(co){
ukazatelOK = document.getElementById('ok');
ukazatelNO = document.getElementById('no');
if(co=='ok'){
  if(widthOK>5){
    widthOK=(widthOK*1)-1;
    widthNO=(widthNO*1)+1;
  }else{
    stop();
  }
}else{
  if(widthNO>5){
    widthOK=(widthOK*1)+1;
    widthNO=(widthNO*1)-1;
  }else{
    stop();
  }
}
ukazatelOK.style.width=((widthOK*1)+5)+'px';
ukazatelNO.style.width=((widthNO*1)+5)+'px';
setHodn(widthOK);
  if(zmena){
    if(co=='ok'){
      var akce='zmenit("ok")';
    }else{
      var akce='zmenit("no")';
    }
    setTimeout(akce, rychlost);
  }
  debug(); //zapnuto kvuli debug - ukazky chyby :)
}

function plus(){
zmena=true;
zmenit('ok');
}
function minus(){
zmena=true;
zmenit('no');
}
function stop(){
zmena=false;
}

/*vypsani noveho JS formulare*/
ukazatelMAN=document.getElementById('manual');
ukazatelMAN.innerHTML='<div id="procenta">50%</div>'
                      +'<table id="table" cellpadding="0">'
                      +'<tr><td id="ok"></td><td id="no"></td><td id="submit"><input type="submit" value="ZadatJS"></td></tr>'
                      +'</table>'
                      +'<div id="zarovnani"></div>'
                      +'<div id="debug"></div>';

/*nastaveni zeleneho pole*/                     
ukazatelOK=document.getElementById('ok');
ukazatelOK.onmousedown = plus;
ukazatelOK.onmouseup = stop;
ukazatelOK.onmouseout = stop;
ukazatelOK.style.width=widthOK+'px';

/*nastaveni velikosti cerveneho pole*/
ukazatelNO=document.getElementById('no');
ukazatelNO.onmousedown = minus;
ukazatelNO.onmouseup = stop;
ukazatelNO.onmouseout = stop;
ukazatelNO.style.width=((widthNO*1)+5)+'px';

ukazatelOK = document.getElementById('ok');
ukazatelNO = document.getElementById('no');
ukazatelDEBUG = document.getElementById('debug');
ukazatelDEBUG.innerHTML='hodnoty promennych: '+widthOK+' = zelene / cervene = '+widthNO+"<br />vlastnosti prvku: "+ukazatelOK.style.width+' = zelene / cervene = '+ukazatelNO.style.width;


/*opticke zmizeni puvodnihi casti formulare*/
ukazatelHODN = document.getElementById('hodn');
ukazatelHODN.style.display='none';
ukazatelHODN = document.getElementById('submitInp');
ukazatelHODN.style.display='none';
/*zpruhledneni tabulky*/
ukazatelTABLE = document.getElementById('table');
var pruhlednost='0.6';
ukazatelTABLE.style["-khtml-opacity"] = pruhlednost;
ukazatelTABLE.style.opacity = pruhlednost;
ukazatelTABLE.style.filter = "alpha(opacity="+Math.round(100*pruhlednost)+")";
/*nastaveni vychozich hodnot - dosavadnich*/
setHodn(widthOK);

function debug(){
ukazatelOK = document.getElementById('ok');
ukazatelNO = document.getElementById('no');
ukazatelDEBUG = document.getElementById('debug');
ukazatelDEBUG.innerHTML='hodnoty promennych: '+widthOK+' = zelene / cervene = '+widthNO+"<br />vlastnosti prvku: "+ukazatelOK.style.width+' = zelene / cervene = '+ukazatelNO.style.width;
}