bigPhotoArr = null;
loaded = false;

Event.observe(window, 'load', function() {

  
  if(bigPhotoArr == null) return;

  initPhoto('photo', 'box', 'bigFrame', bigPhotoArr[0]);

  
  Event.observe(document, 'mousemove', mouseMoveHandler);
  
  
});

function imgLoadHandler(event)
{
    bigFrameObj.style.backgroundImage= "url('" + $('tmpbig').src + "')";
    boxObj.style.backgroundImage= "url('" + $('tmpbig').src + "')";
    loaded = true;
}


function initPhoto(photoID, boxID, bigFrameID, big)
{
  canShowOnMove = true;
  
  photoObj = $(photoID);
  boxObj = $(boxID)
  bigFrameObj = $(bigFrameID);
  tmpImgObj = $('tmpbig');
  
  boxObj.onclick = photoObj.onclick;
  
  bigFrameObj.remove();
  
  bigFrameObj = document.createElement('div');
  bigFrameObj.id = bigFrameID;
  
  bigPhoto = big.split(',',3);
  bigPhotosrc = bigPhoto[0];
  bigPhotoWidth = bigPhoto[1];
  bigPhotoHeight = bigPhoto[2];
  
  loaded = false;
   
  tmpImgObj.src = bigPhotosrc; 
 
  document.body.appendChild(bigFrameObj);

  
  photoWidth = photoObj.width;
  photoHeight = photoObj.height;
  
  ratioX = bigPhotoWidth / photoWidth;
  ratioY = bigPhotoHeight / photoHeight;
  
  boxWidth = Math.round(photoWidth / ratioX);
  boxHeight = Math.round(photoHeight / ratioY);
  
  ratioX2 = photoWidth / boxWidth;
  ratioY2 = photoHeight / boxHeight;
  
  selWidth = boxWidth / ratioX2;
  selHeight = boxHeight / ratioY2;
  
  //alert('src: ' + bigPhotosrc + ', width: ' + bigPhotoWidth + ', height: ' +  bigPhotoHeight);
  aPos = photoObj.cumulativeOffset();
  leftXBorder = aPos[0];
  rightXBorder = Number(photoWidth) + Number( aPos[0]);
  topYBorder = aPos[1];
  bottomYBorder = Number(photoHeight) + Number( aPos[1]);

  boxObj.style.width = boxWidth + 'px';
  boxObj.style.height = boxHeight + 'px'

  $('info').innerHTML = '<img style="float: left; margin-right: 5px;" src="http://abrakadabra.sklep.pl/images/product_icon_other.gif" alt="" /> aby zobaczyć detale przesuń myszką po zdjęciu';
}

function removeMove()
{
  canShowOnMove = false;
  $('info').innerHTML = '';
}

function mouseMoveHandler(event) {
  
  if(!canShowOnMove) return;
  if(!loaded) {
    return;
  }
  
  
  var x = Event.pointerX(event);
  var y = Event.pointerY(event);
  
  var x2 = x;
  var y2 = y;
  
       if( x > leftXBorder && x < rightXBorder && y > topYBorder && y < bottomYBorder )
       {
              
                  
              
              if(x - (selWidth/2) < leftXBorder) x2 = leftXBorder + (selWidth/2);
              if(x + (selWidth/2) > rightXBorder) x2 = rightXBorder - (selWidth/2);
              if(y - (selHeight/2) < topYBorder) y2 = topYBorder + (selHeight/2);
              if(y + (selHeight/2) > bottomYBorder) y2 = bottomYBorder - (selHeight/2);
                           
              if(x - (boxWidth/2) < leftXBorder) x = leftXBorder + (boxWidth/2);
              if(x + (boxWidth/2) > rightXBorder) x = rightXBorder - (boxWidth/2);
              if(y - (boxHeight/2) < topYBorder) y = topYBorder + (boxHeight/2);
              if(y + (boxHeight/2) > bottomYBorder) y = bottomYBorder - (boxHeight/2);
              
              var plus = 0;
              var browser=navigator.appName;
              var b_version=navigator.appVersion;
              var version=parseFloat(b_version);
              //if ((browser=="Microsoft Internet Explorer") && (version>=4))
              if(/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent) == false)
                plus = 282;
              
              
              boxObj.style.left = x - (boxWidth/2) + 'px';
              boxObj.style.top = y - ((boxHeight/2)+plus) + 'px';
              boxObj.style.display = 'block';
              
               
              
              
              bigFrameObj.style.backgroundPosition = '-' + (x - aPos[0] - (boxWidth/2)) * ratioX + 'px -' + (y - aPos[1] - (boxHeight/2) ) * ratioY + 'px';
              boxObj.style.backgroundPosition = '-' + (x2 - aPos[0] - (selWidth/2)) * ratioX2 + 'px -' + (y2 - aPos[1] - (selHeight/2) ) * ratioY2 + 'px';
              
              //bigFrameObj.innerHTML = bigFrameObj.style.background + '<br /><span style="background-color: white;">' + bigPhotosrc + '</span>';
                            
              bigFrameObj.style.width = photoWidth + 'px';
              bigFrameObj.style.height = photoHeight + 'px';
              
              
              //window.status = bigFrameObj.style.background;

              bigFrameObj.style.left = rightXBorder + 15 + 'px';
              bigFrameObj.style.top = topYBorder - 1 + 'px';
              
              bigFrameObj.style.display = 'block';
              
       }
       else
       {
          //window.status = x + '>' + leftXBorder + '  ' + bigFrameObj.style.backgroundPosition;
          boxObj.style.display = 'none';
          bigFrameObj.style.display = 'none';
       }     
  
}

function setPhoto(photo, bigPhotoArr)
{
    //alert(bigPhoto + ' ' + boxWidth);
    initPhoto('photo', 'box', 'bigFrame', bigPhotoArr);
    //alert(bigPhoto + ' ' + boxWidth);
}

/*
function initOznaczenie(DOMelm)
{
    Event.observe(window, 'load', function() {
    
    element = $(DOMelm);
    
    var aPos = element.previous().cumulativeOffset();
    
    var x = aPos[0] +  element.previous().width;
    var y = aPos[1] +  element.previous().height;
    
    element.style.top = y - 90 + 'px';
    element.style.top = x - 90 + 'px';
    element.style.display = 'block';  
    
    }
    
}
*/