var imgPos = [0, 0];
var downPos = [0, 0];
var downTime = null;
var upTime = null;

var isAutoPlay = false;
var isMouseDown = false;
var isZoom = false;
var isInEffect = false;
var fadeOpacity = 10;

var thumbPanel = null;
var previewPanel = null;
var previewImage = null;

var imageIndex = 0;
var imageList = [];

function MousePos(e)
{
  var pos = [0, 0];	

  if (e.pageX || e.pageY)
  {
    pos = [e.pageX, e.pageY];
  }
  else
  {
    pos = [e.clientX + document.body.scrollLeft - document.body.clientLeft, e.clientY + document.body.scrollTop - document.body.clientTop];
  }

  return pos;
}

function MouseDown(e) 
{
  e = e || window.event;

  if (isInEffect || e.button == 2) return false;
  
  previewImage.style.cursor = 'url(/images/js/cursor-grab.cur), -moz-grab';
	
  isAutoPlay = false;
	
  isMouseDown = true;
  downTime = (new Date()).getTime();

  downPos = MousePos(e);
	
  downPos[0] += previewPanel.scrollLeft;
  downPos[1] += previewPanel.scrollTop;

  return false;
}

function MouseUp(e) 
{
  e = e || window.event;
	
  if (isInEffect || e.button == 2) return false;
  
  previewImage.style.cursor = 'url(/images/js/cursor-hand.cur), -moz-grab';

  isMouseDown = false;
  upTime = (new Date()).getTime();

  if (!isZoom)
  {
    zoomTo(800, 600);
	return false;
  }

  if (upTime - downTime < 100)
  {
	//previewPanel.scrollLeft = Math.floor(previewPanel.scrollLeft / 5) * 5;
	//previewPanel.scrollTop = Math.floor(previewPanel.scrollTop / 5) * 5;

	//previewPanel.scrollLeft = previewPanel.scrollTop = 0;
	
	zoomTo(450, 337);
  }
  
  return false;
}

function MouseMove(e)
{
  e = e || window.event;

  if (isInEffect || e.button == 2) return false;
	
  if (isMouseDown && isZoom)
  {
    var currentPos = MousePos(e);

    previewPanel.scrollLeft = downPos[0] - currentPos[0];
    previewPanel.scrollTop = downPos[1] - currentPos[1];
    
    return false;
  }
  
  return true;
}

function thumbClick(index, fromAuto)
{
  if (typeof(fromAuto) == 'undefined')
    isAutoPlay = false;

  if (isInEffect) return false;
	
  imageIndex = index;
	
  for (var i = 0; i < thumbPanel.childNodes.length; i++)
  {
    if (thumbPanel.childNodes[i].tagName == 'A')
    {
      thumbPanel.childNodes[i].className = '';
    }
  }

  document.getElementById('thumbImage' + imageIndex).className = 'active';

  previewPanel.scrollLeft = previewPanel.scrollTop = 0;

  zoomTo(480, 337);
}

function zoomTo(width, height)
{
  isInEffect = true;

  if (width == 800 && width > previewImage.width)
  {
	previewImage.width += 5;

	previewPanel.scrollLeft += (downPos[0] - imgPos[0] > 225 ? 5 : 0);
	previewPanel.scrollTop += (downPos[1] - imgPos[1] > 170 ? 5 : 0);

	//zoomTo(width, height);
    window.setTimeout("zoomTo(" + width + ", " + height + ");", 5);
    return;
  }
  else if (width == 480 && width < previewImage.width)
  {
    previewImage.width -= 5;
	  
    var difX = previewPanel.scrollLeft + 480 - previewImage.width;
    var difY = previewPanel.scrollTop + 337 - previewImage.height;
    
    if (difX > 0)
    	previewPanel.scrollLeft -= difX;
    
    if (difY > 0)
    	previewPanel.scrollTop -= difY;

    //zoomTo(width, height);
    window.setTimeout("zoomTo(" + width + ", " + height + ");", 5);
    return;
  }
  else if (width == 800)
  {
    isZoom = true;

    previewImage.src = imageList[imageIndex][1];
    previewImage.style.cursor = 'url(/images/js/cursor-hand.cur), -moz-grab';
	  
    isInEffect = false;
    return;
  }
  else if (width == 480)
  {  
    isZoom = false;
    
    fadeTo(0);
    return;
  }
}

function fadeTo(way)
{
  if (way == 0 && fadeOpacity > 2)
  {
    fadeOpacity -= 1;
	  
    previewImage.style.opacity = fadeOpacity / 10;
    previewImage.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (fadeOpacity * 10) + ')';
    
    window.setTimeout("fadeTo(0);", 10);
  }
  else if (way == 0 && fadeOpacity == 2)
  {
    previewImage.src = imageList[imageIndex][0];
	previewImage.style.cursor = 'url(/images/js/cursor-magnify.cur), -moz-zoom-in';
	  
	window.setTimeout("fadeTo(1);", 20);
  }
  else if (way == 1 && fadeOpacity < 10)
  {
    fadeOpacity += 1;
  
    previewImage.style.opacity = fadeOpacity / 10;
    previewImage.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (fadeOpacity * 10) + ')';

    window.setTimeout("fadeTo(1);", 20);
  }
  else
  {	  
    isInEffect = false;
  }
}

function autoPlay()
{
  if (!isAutoPlay) return;

  imageIndex++;

  if (imageIndex >= imageList.length)
    imageIndex = 0;
  
  thumbClick(imageIndex, true);
}