// JavaScript Document

var swappingRunning = false;
var targetImage = Ext.get('product_image');
var animationHelper = Ext.get('animation_helper');
var source = '';

function swapImage() // fade in
{
	var targetImage = Ext.get('product_image');
	var source = this.src;
	
	function reappear(trgtImg)
	{
		trgtImg.dom.src=source;
		trgtImg.fadeIn({
			endOpacity: 1, 
			duration: .4,
			useDisplay:true
		});
	}
	
	targetImage.fadeOut({
		endOpacity: 0, 
		duration: .2,
		remove: false,
		useDisplay: true,
		callback:reappear
	});
	
}

function swapImage2() // shifting out
{
	if(swappingRunning)
		return false;

	source = this.src;
	animationHelper.dom.style.backgroundImage = "url("+source+")";
	
	Ext.get('product_label').dom.innerHTML = this.alt;
	
	swappingRunning = true;
	
	tgtX = targetImage.getX() - productImageWrapper.getWidth();
	tgtX2 = animationHelper.getX() - productImageWrapper.getWidth();
		
	targetImage.setX(tgtX,{duration:.7, easing:'elasticOut'});
	animationHelper.setX(tgtX2,{duration:.7, easing:'elasticOut', callback:stage2});
	
	function stage2(){
		animationHelper.setLeft(0+productImageWrapper.getWidth());
		targetImage.dom.style.backgroundImage =  "url("+source+")";
		targetImage.setLeft(0);
		swappingRunning = false;
	}
}

var productThumbnails = Ext.get('product_thumbnails');
var productThumbnails = productThumbnails.select('a', false);

for(i=0; i<productThumbnails.getCount(); i++)
	productThumbnails.item(i).on('click', swapImage2, { src:productThumbnails.item(i).first('img',false).dom.src, alt:productThumbnails.item(i).first('img',false).dom.alt});

var productImageWrapper = Ext.get('product_image_wrapper');
animationHelper = productImageWrapper.createChild({tag:'img', src:'media/watermark-40.png', id:'animation_helper'});