var flowFx = new Class({
	initialize: function(id, size, buttons) {
		this.box = $(id);
		this.boxIntSize = size;
		this.duration = '10000';
		this.fps = '30';
		this.fire = 0;
		this.buttons = buttons;
		this.getBoxPxSize();
		this.position = new Hash();
		this.newPosition = new Hash();
		this.initImageSizes();		
		this.initView();
		this.initLinks();
		this.morph = 1;
		this.nextImg = 0;
		this.nextImgCnt = 0;
		this.slideDir = 3;
		if($type(this.box) == 'element') {
			this.box.setStyles(this.boxSize);
			this.initButtons(buttons);
		}
	},
	getBoxPxSize: function() {
		this.boxSize = new Hash({
			'width': this.boxIntSize['width'] + 'px',
			'height': this.boxIntSize['height'] + 'px',
			'position': 'relative'
		});
	},
	initImageSizes: function() {
		this.imageDim = new Hash({
			0: {
				'width': (this.boxIntSize['width']*0.11).round(),
				'height': this.boxIntSize['height'],
				'z-index': '2',
				'position': 'absolute',
				'bottom': '55px',
				'left': 0,
				'display': 'block'
			},
			1: {
				'width': (this.boxIntSize['width']*0.14).round(),
				'height': this.boxIntSize['height'],
				'z-index': '5',
				'position': 'absolute',
				'bottom': '50px',
				'left': (this.boxIntSize['width']*0.04).round(),
				'display': 'block'
			},
			2: {
				'width': (this.boxIntSize['width']*0.21).round(),
				'height': this.boxIntSize['height'],
				'z-index': '10',
				'position': 'absolute',
				'bottom': '40px',
				'left': (this.boxIntSize['width']*0.13).round()-40,
				'display': 'block'
			},
			3: {
				'width': (this.boxIntSize['width']*0.40).round(),
				'height': this.boxIntSize['height'],
				'z-index': '15',
				'position': 'absolute',
				'bottom': '10px',
				'left': (this.boxIntSize['width']*0.31).round(),
				'display': 'block'
			},
			4: {
				'width': (this.boxIntSize['width']*0.21).round(),
				'height': this.boxIntSize['height'],
				'z-index': '10',
				'position': 'absolute',
				'bottom': '40px',
				'left': this.boxIntSize['width'] - (this.boxIntSize['width']*0.13).round() - (this.boxIntSize['width']*0.21).round() + 50,
				'display': 'block'
			},
			5: {
				'width': (this.boxIntSize['width']*0.14).round(),
				'height': this.boxIntSize['height'],
				'z-index': '5',
				'position': 'absolute',
				'bottom': '50px',
				'left': this.boxIntSize['width'] - (this.boxIntSize['width']*0.04).round() - (this.boxIntSize['width']*0.14).round(),
				'display': 'block'
			},
			6: {
				'width': (this.boxIntSize['width']*0.11).round(),
				'height': this.boxIntSize['height'],
				'z-index': '2',
				'position': 'absolute',
				'bottom': '55px',
				'left': this.boxIntSize['width'] - (this.boxIntSize['width']*0.11).round(),
				'display': 'block'
			}
		});
	},
	addSlider: function() {
		// Create the new slider instance
		var slider = this.box.getElement('.slider');
		new Slider(slider, slider.getElement('.knob'), {
			steps: this.imgs.length+1,	
			range: [1],	
			onChange: function(value){
				// Everytime the value changes, we change the font of an element
				if(this.slideDir < value) {
					this.nextImage();
					this.slideDir += 1;
				} else {
					this.prevImage();
					this.slideDir -= 1;
				}
			}.bind(this)
		}).set(3);
	},
	initButtons: function(buttons) {
		this.addButtonNext(buttons['next']);
		this.addButtonPrev(buttons['pre']);
	},
	addButtonNext: function(id) {
		if($defined(id)) {
			var next = $(id);
			next.addEvent('click', function() {
				this.nextImage();
			}.bind(this));
		}
	},
	addButtonPrev: function(id) {
		if($defined(id)) {
			var prev = $(id);
			prev.addEvent('click', function() {
				this.prevImage();
			}.bind(this));
		}
	},
	initView: function() {
		this.imgs = this.box.getElements('img');
		this.origImgs = new Hash();
		this.imgs.each(function(img,iKey) {
			this.origImgs[iKey] = new Hash({ 'width': /*img.getStyle('width')*/ '370px', 'height': /*img.getStyle('height')*/ '200px' });
			/*this.origImgs[iKey] = new Hash({ 'width': img.getStyle('width'), 'height': img.getStyle('height') });*/
			if(iKey == 0) {		
				this.position[1] = iKey;
				img.setStyles(this.renderPic(this.imageDim[1], this.origImgs[iKey]));
			} else if(iKey == 1) {
				this.position[2] = iKey;
				img.setStyles(this.renderPic(this.imageDim[2], this.origImgs[iKey]));
			} else if(iKey == 2) {
				this.position[3] = iKey;
				img.setStyles(this.renderPic(this.imageDim[3], this.origImgs[iKey]));
			} else if(iKey == 3) {
				this.position[4] = iKey;
				img.setStyles(this.renderPic(this.imageDim[4], this.origImgs[iKey]));
			} else if(iKey == 4) {
				this.position[5] = iKey;
				img.setStyles(this.renderPic(this.imageDim[5], this.origImgs[iKey]));
			} else if(iKey == 5) {
				this.position[6] = iKey;
				img.setStyles(this.renderPic(this.imageDim[6], this.origImgs[iKey]));
			}  else {
				img.setStyles(this.renderPic(this.imageDim[6], this.origImgs[iKey]));
				img.setStyle('display', 'none');
				img.setStyle('z-index', '0');
			}
		}.bind(this));
		
		var fallback = $$('div.tx-lwflexheader-pi1')[0].getElement('div.fallback');
		fallback.setStyle('display', 'none');
	},
	renderPic: function(dim, img) {
		var maxWidth = dim['width'].toInt();
		var maxHeight = dim['height'].toInt();
		var left = dim['left'].toInt();
		var imgWidth = img['width'].toInt();
		var imgHeight = img['height'].toInt();
		
		var imgDim = new Hash();

		imgDim['z-index'] = dim['z-index'];
		imgDim['position'] = dim['position'];
		imgDim['bottom'] = dim['bottom'];
		imgDim['display'] = 'block';
		imgDim['left'] = left;

		if(imgWidth > maxWidth) {
			var distW = maxWidth / imgWidth;
			var newHeight = distW * imgHeight;
			imgDim['width'] = maxWidth;
			imgDim['height'] = newHeight;
			
			if(newHeight > maxHeight) {
				var distH = maxHeight / newHeight;				
				var newWidth = distH * imgWidth;
				imgDim['width'] = newWidth;
				imgDim['height'] = maxHeight;
			}
			if(imgDim['width'] < maxWidth) {
				var range = (maxWidth - imgDim['width']) / 2;
				imgDim['left'] = left + range.round();
			}
		} else if(imgHeight > maxHeight) {
			var distH = maxHeight / imgHeight;
			var newWidth = distH * imgWidth;		
			imgDim['width'] = newWidth;
			imgDim['height'] = maxHeight;
			if(imgDim['width'] < maxWidth) {
				var range = (maxWidth - imgDim['width']) / 2;
				imgDim['left'] = left + range.round();
			}
		} else {
			imgDim['width'] = imgWidth;
			imgDim['height'] = imgHeight;			
		}
		
		imgDim['width'] = imgDim['width'].round() + "px";
		imgDim['height'] = imgDim['height'].round() + "px";
		imgDim['left'] = imgDim['left'].round() + "px";
		
		return imgDim;
		
		dim['width'] = dim['width'].toInt();
		dim['height'] = dim['height'].toInt();
		dim['left'] = dim['left'].toInt();
		var widthCopy = dim['width'].toInt();
		var width = img['width'].toInt();
		var height = img['height'].toInt();
		if(width > dim['width']) {
			var dist = dim['width'] / width;
			dim['height'] = (height * dist).round();
			height = (height * dist).round();
		}
		if(height > this.boxIntSize['height']) {
			var dist = this.boxIntSize['height'] / height;
			dim['height'] = height;
			dim['width'] = (width * dist).round();
		}	
		if(dim['width'] < widthCopy) {
			var range = (widthCopy - dim['width']) / 2;
			dim['left'] = dim['left'] + range;
		}
		dim['width'] = dim['width'].round() + "px";
		dim['height'] = dim['height'].round() + "px";
		dim['left'] = dim['left'].round() + "px";
		
		return dim;
	},
	nextImage: function() {
		if(this.morph) {			
			this.morph = 0;
			this.newPosition = new Hash();
			var hide = -1;
			if($defined(this.position[4])) {
				this.position.each(function(imgNr, index) {
					if(index == 0) {
						hide = imgNr;
					} else {				
						this.newPosition[index.toInt()-1] = imgNr;
						if(!$defined(this.position[index.toInt()+1])) {
							if($defined(this.imgs[imgNr.toInt()+1])) {
								this.newPosition[index.toInt()] = imgNr.toInt()+1;
							}
						}
					}		
				}.bind(this));
				if(hide >= 0) {
					this.imgs[hide].setStyle('z-index', '0');
				}
				this.loops = this.newPosition.getLength();
				this.newPosition.each(function(nr, index) {
				   this.imgs[nr].set('morph', {
						duration: this.duration,
						fps: this.fps,
			            onComplete: function(){
							if(hide >= 0) {
								this.imgs[hide].setStyle('display', 'none');
							}
							this.loops = this.loops - 1;
							if(this.nextImgCnt > 0 && this.loops == 0) {
								this.nextImgCnt -= 1;
								this.nextImage();
							}
							this.morph = 1;
						}.bind(this)
					});
				   var conf = this.renderPic(this.imageDim[index], this.origImgs[nr]);
				   this.imgs[nr].morph({
						'display': conf['display'],
						'width': conf['width'],
						'height': conf['height'],
						'left': conf['left'],
						'z-index': conf['z-index'],
						'position': 'absolute',
						'bottom': conf['bottom']
					});
/*
					var myEffect = new Fx.Morph(this.imgs[nr], {
						duration: this.duration,
						fps: this.fps,
			            onComplete: function(){
							if(hide >= 0) {
								this.imgs[hide].setStyle('display', 'none');
							}
							this.loops = this.loops - 1;
							if(this.nextImgCnt > 0 && this.loops == 0) {
								this.nextImgCnt -= 1;
								this.nextImage();
							}
							this.morph = 1;
						}.bind(this)
					});
*/
/*					var conf = this.renderPic(this.imageDim[index], this.origImgs[nr]);*/
/*					myEffect.start({
						'display': conf['display'],
						'width': conf['width'],
						'height': conf['height'],
						'left': conf['left'],
						'z-index': conf['z-index'],
						'position': 'absolute',
						'bottom': conf['bottom']
					});*/
	/*				this.imgs[nr].setStyles(this.renderPic(this.imageDim[index], this.origImgs[nr]));*/
				this.position = 0;
				this.position = this.newPosition;
				}.bind(this));
			} else {
				this.morph = 1;
			}
		}
	},
	prevImage: function() {
		if(this.morph) {
			this.morph = 0;
			this.newPosition = new Hash();
			var hide = -1;		
			if($defined(this.position[2])) {	
	 
				this.position.each(function(imgNr, index) {
					if(index == 6) {
						hide = imgNr;
					} else {						
						this.newPosition[index.toInt()+1] = imgNr;
						if(!$defined(this.position[index.toInt()-1])) {
							if($defined(this.imgs[imgNr.toInt()-1])) {
								this.newPosition[index.toInt()] = imgNr.toInt()-1;
							}
						}
					}
				}.bind(this));
				if(hide >= 0) {			
					this.imgs[hide].setStyle('z-index', '0');
				}
				this.loops = this.newPosition.getLength();
				this.newPosition.each(function(nr, index) {
					this.imgs[nr].set('morph', {
						duration: this.duration,
						fps: this.fps,
			            onComplete: function(){
							if(hide >= 0) {
								this.imgs[hide].setStyle('display', 'none');
							}
							this.loops = this.loops - 1;
							if(this.nextImgCnt > 0 && this.loops == 0) {
								this.nextImgCnt -= 1;
								this.prevImage();
							}
							this.morph = 1;
						}.bind(this)
					});
					var conf = this.renderPic(this.imageDim[index], this.origImgs[nr]);
					this.imgs[nr].morph({
						'display': conf['display'],
						'width': conf['width'],
						'height': conf['height'],
						'left': conf['left'],
						'z-index': conf['z-index'],
						'position': 'absolute',
						'bottom': conf['bottom']
					});
/*					var myEffect = new Fx.Morph(this.imgs[nr], {
						duration: this.duration,
						fps: this.fps,
			            onComplete: function(){
							if(hide >= 0) {
								this.imgs[hide].setStyle('display', 'none');
							}
							this.loops = this.loops - 1;
							if(this.nextImgCnt > 0 && this.loops == 0) {
								this.nextImgCnt -= 1;
								this.prevImage();
							}
							this.morph = 1;				
						}.bind(this)
		            });*/
/*					var conf = this.renderPic(this.imageDim[index], this.origImgs[nr]);
					myEffect.start({
						'display': conf['display'],
						'width': conf['width'],
						'height': conf['height'],
						'left': conf['left'],
						'z-index': conf['z-index'],
						'position': 'absolute',
						'bottom': conf['bottom']
					});*/
					/*this.imgs[nr].setStyles(this.renderPic(this.imageDim[index], this.origImgs[nr]));*/
					this.position = 0;
					this.position = this.newPosition;
				}.bind(this));
			} else {
				this.morph = 1;
			}
		}
	},
	initLinks: function() {
		this.imgs.each(function(image) {
			image.addEvent('click', function(myEvent) {
				var myPos = -1;
				this.position.each(function(pos, index) {
					if(this.imgs[pos] == image) {
						myPos = index;
					}
				}.bind(this));
				if(myPos != -1) {
					if(myPos > 3) {
						myEvent.stop();
						this.nextImgCnt = myPos - 4;
						this.nextImage();					
					} else if(myPos < 3) {
						myEvent.stop();
						this.nextImgCnt = 2 - myPos;
						this.prevImage();
					}
				}
			}.bind(this));
		}.bind(this));
	}
});