function purenum(s)
{
	if ($type(s) == 'number')
		return s;
	else
		return s.replace(/px/, '') - 0;
}

//
// FlowImage, this container
//
var FlowImage = new Class({
	options : {
		divName		: 'flowimgs',	// div content
		ifoName		: 'infoBar',	// info bar
		zoomRatio	: 0.5,			// zoom in ratio
		reflxRatio	: 0.5,			// reflect height ratio
		spacer		: 35,			// space between images
		linkTarget	: '_self'		// link target
	},
	initialize : function(options) {
		this.divName		= options.divName;
		this.ifoName		= options.ifoName;
		this.zoomRatio		= options.zoomRatio;
		this.reflxRatio		= options.reflxRatio;
		this.spacer			= options.spacer;
		this.linkTarget		= options.linkTarget;

		var maxH = 0;
		var talW = 0;
		this.flow = $(this.divName);
		this.imgobjs = [];
		this.flow.getChildren().each(function(el, i){
			if (el.getTag() == 'img')
			{
				this.imgobjs[i] = new ImgObj(i, this, el, this.zoomRatio, this.reflxRatio, this.linkTarget);
				maxH = Math.max(maxH, this.imgobjs[i].oriHeight);
				talW += this.imgobjs[i].oriWidth * this.zoomRatio;
			}
		}.bind(this));

		var infoBar = $(this.ifoName);
		infoBar.setStyles({'position':'absolute', 'width':'100%', 'textAlign':'center'});
		var top =  58;
		//purenum(this.flow.getStyle('height')) - purenum(infoBar.getStyle('height'));

		infoBar.setStyle('top', top);
		infoBar.setHTML('');
		this.link = new Element('a').inject(infoBar);
		this.curN = -1;
		this.lastN = -1;
		this.baseline = maxH;
		this.leftline = purenum(this.flow.getStyle('width')) - talW - (this.imgobjs.length - 1) * this.spacer;
		this.leftline /= 2;
		this.tile();
	},
	tile : function() {
		var left = this.leftline;
		for (i=0; i<this.imgobjs.length; i++)
		{
			var imgobj = this.imgobjs[i];
			var top = this.baseline - imgobj.height;
			imgobj.fx.set({'top':top,'left':left});
			imgobj.retDimension();
			left += imgobj.width + this.spacer;
		}
	},
	move : function(N) {
		if ((this.curN != -1 || this.lastN != -1) &&
			this.curN == N)
			return;
		this.lastN = this.curN;
		this.curN = N;
		var imgCur = this.imgobjs[this.curN = N];
		var offsetX = imgCur.oriWidth * (1 - this.zoomRatio) / 2;
		if (-1 != this.curN) {

			var top = imgCur.top - (imgCur.oriHeight - imgCur.imgHeight);

			var left = imgCur.left - offsetX;

			var optCur = {'left'   : left,

						  'top'    : top,

						  'width'  : imgCur.oriWidth,

						  'height' : imgCur.oriHeight};

			imgCur.move(optCur);

		}

		

		var i = 0;

		for	(i=0; i<this.curN; i++) {

			var img = this.imgobjs[i];

			var width = img.oriWidth * this.zoomRatio;

			var height = img.oriHeight * this.zoomRatio;

			var left = img.left - offsetX;

			var top = this.baseline - height;

			var opt = {'left'   : left,

					   'top'    : top,

					   'width'  : width,

					   'height' : height};

			img.move(opt);

		}

		

		for	(i++; i<this.imgobjs.length; i++) {

			var img = this.imgobjs[i];

			var width = img.oriWidth * this.zoomRatio;

			var height = img.oriHeight * this.zoomRatio;

			var left = img.left + offsetX;

			var top = this.baseline - height;

			var opt = {'left'   : left,

					   'top'    : top,

					   'width'  : width,

					   'height' : height};

			img.move(opt);

		}

	},

	

	showlink : function(text, url) {

		this.link.setProperty('href', url);

		this.link.setProperty('target', this.linkTarget);

		this.link.setText(text);

	}

});



//

// Signle image object

//

var ImgObj = new Class({

 	initialize: function(N, parent, tagImg, ratio, reflxRatio, linkTarget) {

		this.N = N;

		this.width = 0;

		this.height = 0;	// total height include image and reflect

		this.imgHeight = 0;	// image height

		this.left = 0;

		this.top = 100;

		this.parent = parent;

		this.reflect = false;

		this.linkTarget = linkTarget;



		this.tagImg = $(tagImg);

		this.oriWidth = purenum(this.tagImg.width);

		this.oriHeight = purenum(this.tagImg.height);



		var text = this.tagImg.getProperty('alt');

		if (text)

			this.text = text;

		else

			this.text = '';

		var url = this.tagImg.getProperty('longDesc')

		if (url)

		{

			this.tagImg.setStyle('cursor', 'hand');

			this.url = url;

		}

		else

			this.url = '#';



		this.reflect = this.createReflect(reflxRatio);

		this.flxPercent = 100 * reflxRatio + '%';



		//

		// Container

		//

		this.divCon = new Element('div').injectTop(this.parent.flow);

		this.tagImg.inject(this.divCon);

		this.flxCon = new Element('div').inject(this.divCon);

		this.reflect.inject(this.flxCon);



		//

		// Images fills container

		//

		this.tagImg.setStyles({'width':'100%', 'height':'100%'});

		this.reflect.setStyles({'width':'100%', 'height':'100%'});



		//

		// Size

		//

		var width = this.oriWidth * ratio;

		var height = this.oriHeight * ratio;

		this.divCon.setStyles({'width':width, 'height':height});

		this.flxCon.setStyles({'width':'100%', 'height':this.flxPercent});



		//

		// Dimension

		//

		this.divCon.setStyle('position', 'absolute');

		this.retDimension();



		this.fx = new Fx.Styles(this.divCon, {

			wait       : false,

			duration   : 600,

			transition : Fx.Transitions.Expo.easeOut

		});

		this.fx.onProgress = this.onChange;

		this.tagImg.addEvent('mouseenter', function(e){

			this.parent.showlink(this.tagImg.alt, this.url);

			this.parent.move(this.N)

		}.bind(this));

		this.tagImg.addEvent('click', function(e){

			window.open(this.url, this.linkTarget);

		}.bind(this));

	},



	move : function(opt) {

		this.fx.start(opt);

	},



	retDimension : function() {

		if (this.divCon)

		{

			this.width = purenum(this.divCon.getStyle('width'));

			this.height = purenum(this.divCon.getStyle('height'));

			this.imgHeight = purenum(this.tagImg.height);

			this.left = purenum(this.divCon.getStyle('left'));

			this.top = purenum(this.divCon.getStyle('top'));

		}

	},



	createReflect : function(ratio) {

		var flx = false;

		var canvas = new Element('canvas');

		if (canvas && canvas.getContext) {

			var w = this.oriWidth;

			var h = this.oriHeight;

			var rw = this.tagImg.width * ratio;

			var rh = this.tagImg.height * ratio;

			flx = canvas;

			flx.width = w;

			flx.height = h;



			var ctx = flx.getContext("2d");

			ctx.translate(0, h);

			ctx.scale(1, -1);

			ctx.drawImage(this.tagImg, 0, h-rh, w, rh);

			ctx.globalCompositeOperation = "destination-out";

			var gradient = ctx.createLinearGradient(0, 0, 0, h*2);

			gradient.addColorStop(0, "rgba(255, 255, 255, 1)");

			gradient.addColorStop(1, "rgba(255, 255, 255, 0)");

			ctx.fillStyle = gradient;





			ctx.fillRect(0, 0, w, h*2);

		} else {

			/* ---- DXImageTransform ---- */

			flx     = new Element('img');

			flx.src = this.tagImg.src;

			flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +

			                   'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +

							   (this.oriHeight * ratio) + ')';

		}

		return flx;

	}

});



//

// Document start

//

function startflow() {

	new FlowImage({

		divName		: 'flowimgs',	// div content

		ifoName		: 'infoBar',	// info bar

		zoomRatio	: 0.5,			// zoom in ratio

		reflxRatio	: 0.5,			// reflect height ratio

		spacer		: 35,			// space between images

		linkTarget	: '_blank'		// link target

	});

}

window.addEvent('domready', startflow);