var previewWidth;//sirka nahledu
var previewHeight;//vyska nahledu
var x;//absolutni umisteni nahledu
var y;//absolutni umisteni nahledu
var nahled='';//obrazek posledniho nahledu
var barva=0;//barva pozadi cislo v preddefinovane tabulce	
var lastid=0;//cislo posledniho nahledu
var imagePath='';//cesta kde jsou ulozene obrazky
var imageNahled;//originalni obrazek nahledu
var pos0_x,pos0_y,width0,height0;//koordinaty pevnych nahledu
var pos1_x,pos1_y,width1,height1;
var pos2_x,pos2_y;
var pos3_x,pos3_y;
var pos4_x,pos4_y;
var originalWidth,originalHeight;
var typNahledu;
var jeZobrazenNahled = false;//v nahledu 2 identifikuje jestli je zobrazen nahled
var phpPath;//indetifikuje url kam smerovat dynamicke pozadavky AJAX, nahledy
var hideTimeout = false;//idetifikuje zda nastaven cas pro skryti obdelniku
var productId;//cislo obrazku

//! zobrazi v nahledu obdelnik indikujici kam se umisti nahled
function vypoctiObdelni(x1,y1,w,h)
  {
  //alert(x1+':'+y1+':'+w+':'+h);
  x=x+(document.activeElement ? 1 : 0);
  x=x+(window.console ? 4 : 0);
  document.getElementById('ram0').style.width=w;
  document.getElementById('ram0').style.height=h;
  document.getElementById('ram0').style.top=y+y1;
  document.getElementById('ram0').style.left=x+x1;
  //kolem ctverce zobraz sedou plochu
  if(typNahledu==1)
    {
    document.getElementById('ram1').style.width=previewWidth;  
    document.getElementById('ram1').style.height=y1;  
    document.getElementById('ram1').style.top=y;
    document.getElementById('ram1').style.left=x;
    document.getElementById('ram2').style.width=x1;  
    document.getElementById('ram3').style.width=previewWidth-x1-w;  
    document.getElementById('ram2').style.height=h+(document.activeElement ? 0 : 2);  
    document.getElementById('ram3').style.height=h+(document.activeElement ? 0 : 2);  
    document.getElementById('ram2').style.top=y+y1;
    document.getElementById('ram2').style.left=x;

    document.getElementById('ram3').style.top=y+y1;
    document.getElementById('ram3').style.left=x+x1+w;

    document.getElementById('ram4').style.width=previewWidth;  
    document.getElementById('ram4').style.height=previewHeight-h-y1-(document.activeElement ? 0 : 2);  
    document.getElementById('ram4').style.top=y+y1+h+(document.activeElement ? 0 : 2);
    document.getElementById('ram4').style.left=x;
    }

  }

//! skryje obdelnik viz zobrazObdelni
function skryjObdelnik(id)
  {
  document.getElementById('ram0').style.visibility='hidden';
  if(typNahledu==1)
    {
    document.getElementById('ram1').style.visibility='hidden';
    document.getElementById('ram2').style.visibility='hidden';
    document.getElementById('ram3').style.visibility='hidden';
    document.getElementById('ram4').style.visibility='hidden';
    }
  }

//! predpocita absolutni pozici prvku img kam se umistuje nahled
function prep()
  {
  x=0;y=0;
  obj=document.getElementById('mimg')
  while(obj.tagName != 'BODY')
    {
    //alert(obj.tagName);
    x=x+obj.offsetLeft;
    y=y+obj.offsetTop;
    obj = obj.offsetParent;  
    }
  }

//! vlozi div zobrazujici vlastnosti
var createDiv = function ()
  {
  if(navigator.userAgent.indexOf("MSIE")>0)filter=true;
  //alert('test');
  var mimg = document.getElementById("mimg");
  var ram0 = document.createElement("div");
  ram0.id='ram0';
  ram0.style.border='solid';
  ram0.style.borderWidth='1px';
  ram0.style.borderColor=(typNahledu==1)?'green':'gray';
  ram0.style.visibility='hidden';
  if(typNahledu==2)
    {
    //ram0.onmousemove=mousemove;
    mimg.onmousemove=mousemove;
    mimg.onmouseout=mouseout;
    mimg.onmouseover=mouseover;
    mimg.onclick=mouseclick;
    mimg.onload=imageonload;

    ram0.onmouseover=mouseover;
    ram0.onmousemove=mousemove;
    ram0.onmouseout=mouseout;
    ram0.onclick=mouseclick;

    ram0.style.width=Math.ceil((previewWidth/originalWidth)*455);
    ram0.style.height=Math.ceil((previewHeight/originalHeight)*300);
    ram0.style.zIndex=4;
    }
  ram0.style.position='absolute';
  mimg.parentNode.appendChild(ram0);
  if(typNahledu==1)
    {
    for(i=1;i<=4;i++)
      {
      var ram = document.createElement("div");
      ram.id='ram'+i;
      ram.style.visibility='hidden';
      ram.style.position='absolute'; 
      ram.style.opacity=0.5;
      ram.style.backgroundColor='gray';
      if(filter)ram.style.filter='progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
      mimg.parentNode.appendChild(ram);
      }
    }
  }

//! provede se pri zmene obrazku
function imageonload(event)
  {
  if(jeZobrazenNahled)
    {
    document.getElementById('mimg').height=300;
    document.getElementById('mimg').width=455;
    }
  prep();
  }
jeZobrazenNahled

//! na nahled bylo kliknuto zobraz nahled nebo vyrez
function mouseclick(event)
  {
  //window.status='konec';
  //zastav propagaci aby se nemenila barva pozadi na onclick
  if(navigator.userAgent.indexOf("MSIE")>0) {
    window.event.cancelBubble = true;
  } else {
    event.stopPropagation();
  }

  if(jeZobrazenNahled)
    {
    jeZobrazenNahled=false;  
    document.getElementById('mimg').src=imagePath+imageNahled;
    document.getElementById('mimg').height=previewHeight;
    document.getElementById('mimg').width=previewWidth;
    mouseover(event);
    //window.setTimeout('skryjObdelnik2()', 100);

    }
  else
    {
    var ram0 = document.getElementById('ram0');
    skryjObdelnik2();
    var x2 = parseInt(ram0.style.left)-x;//pozice vuci obrazku pod obdelnikem indikujicim kde bude vyrez
    var y2 = parseInt(ram0.style.top)-y;
    jeZobrazenNahled=true; 
    document.getElementById('mimg').src=phpPath+'getImagePrev.php?id='+productId+'&x='+x2+'&y='+y2;  
    }
  }

//! na obrazek vsoupila mys zobraz ctverec signalizujici kde se bude vyrezavar
function mouseover(event)
  {
  if(hideTimeout)window.clearTimeout(hideTimeout);
  if(!jeZobrazenNahled)
    {
    prep();
    var ram0 = document.getElementById('ram0');
    if(ram0.style.visibility=='hidden')ram0.style.visibility='visible'; 
    mousemove(event);
    }
  }

//! presun ctverec signalizujici vyrez
function mousemove(event)
  {
  if(window.event)event=window.event;
  if(hideTimeout)window.clearTimeout(hideTimeout);
  var ram0 = document.getElementById('ram0');
  var mimg = document.getElementById("mimg");
  var width=Math.ceil((previewWidth/originalWidth)*455);//sirka-vyska ramu ktery ukazuje zmenseni
  var height=Math.ceil((previewHeight/originalHeight)*300);
  var width2=previewWidth;//sirka-vyska obrazku preview
  var height2=previewHeight;
  var x2 = event.clientX-x;//pozice vuci obrazku pod obdelnikem indikujicim kde bude vyrez
  var y2 = event.clientY-y;
  if(x2<width/2)x3=x;
  else if(x2>(width2-width/2))x3=x+width2-width;
  else x3=x+x2-Math.ceil(width/2);
  if(y2<height/2)y3=y;
  else if(y2>(height2-height/2))y3=y+height2-height;
  else y3=y+y2-Math.ceil(height/2);
  //window.status=x+':'+y+':'+x2+':'+y2+':'+x3+':'+y3;
  if(x3>0)ram0.style.left=x3;
  if(y3>0)ram0.style.top=y3;
  }

//! funkce skryvajici po timeout obdelnik
function skryjObdelnik2()
  {
  var ram0 = document.getElementById('ram0');
  ram0.style.visibility='hidden';
  }

//! skryj ctverec sygnalizujic vyrez pri opusteni mysi obrazku nahledu
function mouseout(event)
  {
  if(hideTimeout)window.clearTimeout(hideTimeout);
  hideTimeout = window.setTimeout('skryjObdelnik2()', 100);
  }

//! zmeni obrazek nahledu (typ 1)
function change(obr,width,height,id)
  {
  if(nahled!=obr)
    {  
    //detPop je text ktery se zobrazi kdyz je zobrazen nahled
    document.getElementById('detpop').style.visibility="visible";
    document.getElementById('mimg').src=imagePath+obr;
    document.getElementById('mimg').height=height;
    document.getElementById('mimg').width=width;
    nahled=obr;
    lastid=id;
    skryjObdelnik(0);
    }
  else 
    {
    document.getElementById('detpop').style.visibility="hidden";
    document.getElementById('mimg').src=imagePath+imageNahled;
    document.getElementById('mimg').height=previewHeight;
    document.getElementById('mimg').width=previewWidth;
    nahled='';
    if(id!=-1)zobrazObdelnik(id);
    }
  }

//! zmeni barvu pozadi a informuje server aby ulozil do preferenci k uzivateli
function changeColor(prvek)
  {
  if(nahled=='')
    {
  switch(barva){
    case 0:xb="white";
           break;
    case 1:xb="black";
           break;
    case 2:xb="#999999";
           break;
    }
    barva=(barva+1)%3;
    prvek.style.backgroundColor=xb;
    if(window.XMLHttpRequest) {
      try {
			req = new XMLHttpRequest();
        } catch(e) {
			req = false;
        }
    } else if(window.ActiveXObject) {
       	try {
        	req = new ActiveXObject("Msxml2.XMLHTTP");
      	} catch(e) {
        	try {
          		req = new ActiveXObject("Microsoft.XMLHTTP");
        	} catch(e) {
          		req = false;
        	}
		}
    }
	if(req) {
		req.open("POST", phpPath+"savecolor.xml.php?backcolor2="+xb, true);
                req.setRequestHeader('Content-type','text/xml');
		req.send("");
                }
    }
  else 
    {
    change(nahled,0,0,-1);
    }
  }


//! v nahledu cislo 1 se zobrazuje obrazek z thumnailu na predvypocitanych pozicich(5)
function zobrazObdelnik(id)
  {
  if(lastid!=id || nahled=='')
    {
    if(nahled!='')change(nahled,0,0,-1);
    prep();
    switch(id){
      case 0:
        vypoctiObdelni(pos0_x,pos0_y,width0,height0);
        break; 
      case 1:
        vypoctiObdelni(pos1_x,pos1_y,width1,height1);
        break; 
      case 2:
        vypoctiObdelni(pos2_x,pos2_y,width1,height1);
        break; 
      case 3:
        vypoctiObdelni(pos3_x,pos3_y,width1,height1);
        break; 
      case 4:
        vypoctiObdelni(pos4_x,pos4_y,width1,height1);
        break; 
      }
    document.getElementById('ram0').style.visibility='visible';
    document.getElementById('ram1').style.visibility='visible';
    document.getElementById('ram2').style.visibility='visible';
    document.getElementById('ram3').style.visibility='visible';
    document.getElementById('ram4').style.visibility='visible';
    }
  else
    {
    skryjObdelnik(0);
    }
  }

//! registrace inicializace
if(window.attachEvent)window.attachEvent("onload",createDiv)
else window.addEventListener("load", createDiv,false);