// JavaScript Document
// Register a callback on the thumbnails region so we can show the first
// image in the data set whenever the data changes.

Spry.Data.Region.addObserver("sm_img2", function(nType, notifier, data) {
	if (nType == "onPostUpdate")
	{
		ShowCurrentImage();
	}
});

function GetOpacity(ele)
{
  var o = Spry.Effect.getStyleProp(ele, "opacity");
  if (o == undefined || o == null)
    o = 1.0;
  return o;
}

function GetDimensions(element)
{
  // Spry.Effect.getDimensions() returns offsetWidth and offsetHeight
  // which includes the dimensions of the element and its padding.
  // We need the dimensions of the content area without the padding,
  // so we look up width and height in style first. If we get dimensions
  // back in pixels, we use it. If not, we fall back to using offsetWidth
  // and offsetHeight.

  dimensions = Spry.Effect.getDimensions(element);
  if (element.style.width)
    dimensions.width = parseInt(element.style.width);
  if (element.style.height)
    dimensions.height = parseInt(element.style.height);
  return dimensions;
}

function GetOffsetPosition(element)
{
  // Spry.Effect.getOffsetPosition() returns offsetLeft and offsetTop
  // which includes the position of the element content and its padding.
  // We need the position of the content area without the padding,
  // so we look up width and height in style first. If we get position
  // back in pixels, we use it. If not, we fall back to using offsetLeft
  // and offsetTop.

  pos = Spry.Effect.getOffsetPosition(element);
  if (element.style.left)
    pos.x = parseInt(element.style.left);
  if (element.style.top)
    pos.y = parseInt(element.style.top);
  return pos;
}

// Trigger the transition animation from the current image
// being displayed to the image at imgPath.

function SetMainImage(imgPath, width, height, tnID)
{
  var img = document.getElementById("big_img");
  if (!img)
    return;

  CancelBehavior("big_img");

  Spry.Utils.SelectionManager.clearSelection("thumbnailSelection");

  if (tnID)
    Spry.Utils.SelectionManager.select("thumbnailSelection", document.getElementById(tnID), "selectedThumbnail");

  if (gImageLoader)
  {
    gImageLoader.onload = function() {};
    gImageLoader = null;
  }

  gBehaviorsArray["big_img"] = new Spry.Effect.Opacity(img, GetOpacity(img), 0, { duration: 400,
    finish: function()
	{
      gBehaviorsArray["big_img"] = new Spry.Effect.Size(img.parentNode, GetDimensions(img.parentNode), { width: width, height: height}, {duration: 400, steps: 10,
	    finish: function()
	    {
		  // Use an image loader to make sure we only fade in the new image after
		  // it is completely loaded.
	      gImageLoader = new Image();
		  gImageLoader.onload = function()
		  {
	        img.src = gImageLoader.src;
			gImageLoader = null;
	        gBehaviorsArray["big_img"] = new Spry.Effect.Opacity(img, 0, 1, { duration: 400, steps: 10, finish: function() { gBehaviorsArray["big_img"] = null; }});
            gBehaviorsArray["big_img"].start();
		  };
		  gImageLoader.src = imgPath;
	    }
	  });
      gBehaviorsArray["big_img"].start();
    }
  });
  gBehaviorsArray["big_img"].start();
}

// Cancel the animation behavior of the object with the given id.

function CancelBehavior(id)
{
  if (gBehaviorsArray[id])
  {
    gBehaviorsArray[id].cancel();
    gBehaviorsArray[id] = null;
  }
}

function SizeAndPosition(id, toX, toY, toWidth, toHeight, callback)
{
  CancelBehavior(id);
  var effectCluster = new Spry.Effect.Cluster;
  var ele = Spry.Effect.getElement(id); 
  var moveEffect = new Spry.Effect.Move(ele, GetOffsetPosition(ele), { x: toX, y: toY}, { duration: 200 });
  var sizeEffect = new Spry.Effect.Size(ele, GetDimensions(ele), { width: toWidth, height: toHeight}, { duration: 200 });
  
  effectCluster.addParallelEffect(moveEffect);
  effectCluster.addParallelEffect(sizeEffect);

  effectCluster.finish = callback;
 
  gBehaviorsArray[id] = effectCluster;
  gBehaviorsArray[id].start();
}

// Trigger the animation of the thumbnail growing.

function GrowThumbnail(img, width, height)
{
  Spry.Utils.addClassName(img, "inFocus");
  img.style.zIndex = 150;

  var id = img.getAttribute("id");

  var twidth = Math.floor(width);
  var theight = Math.floor(height);
  var tx = (gThumbWidth - twidth) / 2;
  var ty = (gThumbHeight - theight) / 2;

  SizeAndPosition(id, tx, ty, twidth, theight, function(b){gBehaviorsArray[id] = null;});
}

// Trigger the animation of the thumbnail shrinking.

function ShrinkThumbnail(img)
{
  Spry.Utils.addClassName(img, "inFocus");
  img.style.zIndex = 1;

  var id = img.getAttribute("id");

  SizeAndPosition(id, 0, 0, gThumbWidth, gThumbHeight, function(b){gBehaviorsArray[id] = null; Spry.Utils.removeClassName(img, "inFocus");});
}

function HandleThumbnailClick(id)
{
  dsProject.setCurrentRow(id);
  ShowCurrentImage();
}