var IE = (document.all) ? true : false;
if(!IE){document.captureEvents(Event.MOUSEMOVE);}
document.onmousemove = getMouseXY;

var xpos = 0;
var ypos = 0;

function getMouseXY(e){
  if(IE){
    xpos = event.clientX + document.body.scrollLeft;
    ypos = event.clientY + document.body.scrollTop;
  }
  else{
    xpos = e.pageX;
    ypos = e.pageY;
  }  

  if(xpos < 0){xpos = 0;}
  if(ypos < 0){ypos = 0;}  

  return true;
}


isHovering = false;

function setupPage(){
  var theBody = document.getElementsByTagName('body').item(0);

  var theOverlay = document.createElement('div');
  theOverlay.setAttribute('id', 'overlay');
  theOverlay.style.background = '#000000';
  theOverlay.style.left = '0px';
  theOverlay.style.top = '0px';
  theOverlay.style.width = '100%';
  theOverlay.style.height = '10px';
  theOverlay.style.position = 'absolute';
  theOverlay.style.zIndex = '99';
  theOverlay.style.display = 'none';
  theBody.appendChild(theOverlay);

  var thePopUpDiv = document.createElement('div');
  thePopUpDiv.setAttribute('id', 'popupDiv');
  thePopUpDiv.style.left = '0px';
  thePopUpDiv.style.top = '0px';
  thePopUpDiv.style.width = '10px';
  thePopUpDiv.style.height = '10px';
  thePopUpDiv.style.position = 'absolute';
  thePopUpDiv.style.zIndex = '101';
  thePopUpDiv.style.display = 'none';
  theBody.appendChild(thePopUpDiv);

  var newDiv = document.createElement('div');
  newDiv.setAttribute('id', 'theHover');
  newDiv.style.position = 'absolute';
  newDiv.style.left = '0px';
  newDiv.style.top = '0px';
  newDiv.style.padding = '5px';
  newDiv.style.background = 'url(images/c.png)';
  newDiv.style.display = 'none';
  newDiv.style.zIndex = '100';
  theBody.appendChild(newDiv);

  var images = document.getElementsByTagName('img');
  var theImage, theRel, theOpacity;
  for(i=0; i < images.length; i++){
    theImage = images[i];
    if(theImage.className == 'thumbnail'){
      if(theImage.getAttribute('rel')){
        theImage.onmouseover = function(){
          isHovering = true;
          setOpacity(this, 100);
          var theRel = this.getAttribute('rel');
          setHoverText(theRel);
          setTimeout("showHover()", 500);
        }
        theImage.onmousemove = function(){
          var theHover = document.getElementById('theHover');
          theHover.style.left = xpos + 24 + 'px';
          theHover.style.top = ypos + 24 + 'px';
        }
        theImage.onmouseout = function(){
          isHovering = false;
          setOpacity(this, 50);
          var theHover = document.getElementById('theHover');
          theHover.style.display = 'none';
          theHover.innerHTML = '';
        }
        setOpacity(theImage, 50);
      }
    }
  }

  initialized = true;
}

function setHoverText(txt){
  var theHover = document.getElementById('theHover');
  var parts = txt.split(';');
  theHover.innerHTML = '<font class="hoverdescription"><b>' + parts[0] + '</b></font><br /><font class="hovercategory">' + parts[1] + '</font>';
}

function showHover(){
  if(isHovering){
    var theHover = document.getElementById('theHover');
    theHover.style.display = 'block';
  }
}

function showPopUp(images, description){
  isHovering = false;

  var theHover = document.getElementById('theHover');
  theHover.style.display = 'none';
  theHover.innerHTML = '';

  setOpacity(document.getElementById('overlay'), 70);
  var arrPageSize = getPageSize();
  document.getElementById('overlay').style.height = arrPageSize[1] + 'px';
  document.getElementById('overlay').style.display = 'block';

  var thePopUp = document.getElementById('popupDiv');
  thePopUp.style.width = arrPageSize[2] + 'px';
  thePopUp.style.height = arrPageSize[3] + 'px';
  thePopUp.style.left = arrPageSize[4] + 'px';
  thePopUp.style.top = arrPageSize[5] + 'px';

  var images = images.split(',');
  var imageContent = '<table cellpadding="0" cellspacing="0" border="0" background="popupback.gif" style="width: ' + arrPageSize[2] + 'px; height: ' + arrPageSize[3] + 'px">';
  imageContent += '<tr><td align="center" valign="middle"><table cellpadding="0" cellspacing="10" border="0"><tr>';
  imageContent += '<td valign="top"><img src="images/close.png" alt="" style="cursor: pointer" onclick="closePopUp()" /></td><td>';
  imageContent += '<div id="theContainer"><img src="images/' + images[0] + '.jpg" alt="" id="thePopUpImage" /></div></td><td>';
  for(i = 0; i < images.length; i++){
    imageContent += '<img src="images/' + images[i] + '_thumb.jpg" alt="" onclick="changeImage(\'' + images[i] + '.jpg' + '\')" style="display: cursor: pointer" /><br />';
    imageContent += '<div style="width: 5px; height:5px; font-size: 0px; display: block">&nbsp;</div>';
  }
  imageContent += '</td></tr><tr><td colspan="3" align="center"><font class="popupdescription">' + description + '</font></td></tr></table>';
  imageContent += '</td></tr></table>';

  thePopUp.innerHTML = imageContent;
  thePopUp.style.display = 'block';
}

function changeImage(src){
  document.getElementById('theContainer').innerHTML = '<img src="images/' + src + '" alt="" id="thePopUpImage" />';
}

function closePopUp(){
  var thePopUp = document.getElementById('popupDiv');
  thePopUp.style.display = 'none';
  thePopUp.innerHTML = '';
  document.getElementById('overlay').style.display = 'none';
}

function getPageSize(){
  var xScroll, yScroll;
  if(window.innerHeight && window.scrollMaxY){
    xScroll = document.body.scrollWidth;
    yScroll = window.innerHeight + window.scrollMaxY;
  }
  else if(document.body.scrollHeight > document.body.offsetHeight){
    xScroll = document.body.scrollWidth;
    yScroll = document.body.scrollHeight;
  }
  else{
    xScroll = document.body.offsetWidth;
    yScroll = document.body.offsetHeight;
  }

  var windowWidth, windowHeight;
  if(self.innerHeight){
    windowWidth = self.innerWidth;
    windowHeight = self.innerHeight;
  }
  else if(document.documentElement && document.documentElement.clientHeight){
    windowWidth = document.documentElement.clientWidth;
    windowHeight = document.documentElement.clientHeight;
  }
  else if(document.body){
    windowWidth = document.body.clientWidth;
    windowHeight = document.body.clientHeight;
  }

  if(yScroll < windowHeight){pageHeight = windowHeight;}
  else{pageHeight = yScroll;}

  if(xScroll < windowWidth){pageWidth = windowWidth;}
  else{pageWidth = xScroll;}

  var pageScrollLeft, pageScrollTop;
  if(self.pageYOffset){
    pageScrollLeft = self.pageXOffset;
    pageScrollTop = self.pageYOffset;
  }
  else if(document.documentElement && document.documentElement.scrollTop){
    pageScrollLeft = document.documentElement.scrollLeft;
    pageScrollTop = document.documentElement.scrollTop;
  }
  else if(document.body){
    pageScrollLeft = document.body.scrollLeft;
    pageScrollTop = document.body.scrollTop;
  }

  arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight, pageScrollLeft, pageScrollTop);
  return arrayPageSize;
}

function setOpacity(obj, amount){
  if(document.all){obj.style.filter = "alpha(opacity:" + amount + ")";}
  else{obj.style.opacity = amount / 100;}
}

window.onload = setupPage;