/*
 Class: ProtoFlow
 
 License:
 Copyright (c) 2008 DeenSoft.com - You are free to use this file wherever you wish but please do let us know at blog.deensoft.com
 so that we can showcase it. You can even post your bugs on our blog and we will fix them asap.
 This code is being release under open-terms. Use at your own risk. Give us feedback. Help us fix bugs and implement new features. :)
 <contact@deensoft.com>
 
 You can follow up with more comments and suggestions on our blog <http://blog.deensoft.com>
  
 Description:
 	ProtoFlow v0.8 is a very early preview release that simulates Apples CoverFlow effect using Prototype/Scriptaculous lib.
 
 ChangeLog:
 	July 7, 2008:
 	* Fixed z-index issue - Thanks to Xavvier (http://www.euclide.org/) for the fix.
 	March 26, 2008:
 	* Fixed major issue with IE7 and z-index for scrollbar (Thanks to all those who contributed on the blog)
 	March 19, 2008
 	* Fixed issues with IE
 	* Fixed major bug with images and links...
 	
 	Initial:
 	* Added Reflection
 	* Fixed Captions
 	
 	How to use:
 	(start code)
 	var myFlow = new ProtoFlow(
 						$('myElem'),
 						{
 							captions: 'captionsList'
 						}
 	);
 	(end)
	
	
 Modified by Nyu for JAYBEE!
 
 */

var ProtoFlow = Class.create({

	initialize: function(elem_id, params) {
		params.startIndex = { startIndex: params.startIndex } || {};
		this.options = {
			startIndex: 2,
			interval: 80,
			method: 1,
			widespace: 2
		};

		Object.extend(this.options, params.startIndex);

		this.canvas = $(elem_id);
		if (!this.canvas) {
			return;
		}

		this.flowThumbs = $$('div.flowThumbs')[0];

		var totalWidth = 0;
		this.curdir = 0;
		this.oldpos = 0;
		this.randomDir = './random';
		this.slidingStatus = 'init';
		this.rndImageVisibilty = 'visible';

		this.images = new Array();
		$$('div#' + elem_id + ' > div > div > img').each(function(tag) {
			var id = '__flowImage' + params.imgids[this.images.length];
			var flowImage = {id: id, orig_width: Element.getWidth(tag), orig_height: Element.getHeight(tag), src: tag.src, description: tag.nextSibling.innerHTML};
			var img = {flowImage: flowImage};
			
			tag.setAttribute('id', id);
			tag.up('div').style.marginLeft = '10px';
			
			if(img.flowImage.orig_height < 120) {
				var pseudoHeight = 120;
				var pseudoWidth = img.flowImage.orig_width * 120 / img.flowImage.orig_height;
			}
			else if(img.flowImage.orig_height > 120) {
				var pseudoHeight = 120;
				var pseudoWidth = img.flowImage.orig_width * 120 / img.flowImage.orig_height;
			}
			else {
				var pseudoHeight = img.flowImage.orig_height;
				var pseudoWidth = img.flowImage.orig_width;
			}
			totalWidth += pseudoWidth + 10;
			
			tag.setAttribute('index', this.images.length);
			
			this.images.push(img);
		}.bind(this));

		this.flowThumbs.setStyle({
			width: totalWidth + 'px'
		});

		this.currPos = this.options.startIndex - 1;
		this.currIndex = this.currPos;

		this.timer = 0;

		this.imageLabel = $(elem_id + 'ImageLabel');
		
		var ids = new Array();
		this.images.each(function(img){
			ids.push(img.flowImage.id.substr(11, img.flowImage.id.length));
		});
		$jq.post("jquery.php", { init: "start", 'ids[]': ids, currID: ids[this.options.startIndex - 1] },
			function(data){
				$jq.each(data.randomImg, function(index, rndImg) {
					var flowImage = myProtoFlow.images[index].flowImage;
					myProtoFlow.images[index] = { flowImage: flowImage, randomImage: rndImg};
				});
				myProtoFlow.firstID = data.latestRandomID;
				
				myProtoFlow.preloadNeighborImages();
				myProtoFlow.goTo(myProtoFlow.currPos);
				new Effect.Fade($('imageFlowLoading'), { 
					duration: 0.2,
					afterFinish: (function(){ $('imageFlowLoading').remove(); $('imageFlow').setStyle({ visibility: 'visible' }); $('imageFlow_overlay').setStyle({ visibility: 'visible' }); })
				});		
			}, "json"
		);
	},
	
	updateImageList: function(elem_id, newImgData, dir) {
		var index = 0;
		var totalWidth = 0;
		$$('div#' + elem_id + ' > div > div').each(function(tag) {
			if(divTag = tag.down('div')) {
				divTag.down('img').setAttribute('index', index++);
				totalWidth += tag.getWidth() + 10;
			}
			else if(imgTag = tag.down('img')) {
				if(!imgTag.getAttribute("index")) {
					var id = '__flowImage' + newImgData.imgID;
					var flowImage = {id: id, orig_width: newImgData.orig_width, orig_height: newImgData.orig_height, src: imgTag.src};
					var img = { flowImage: flowImage };

					
					totalWidth += $(img.flowImage.id).getWidth() + 10;

					imgTag.setAttribute('index', index++);
					
					// add image to image set
					if(dir == "right") {
						this.images.push(img);
					}
					else {
						this.images.unshift(img);
					}
				}
				else {
					imgTag.setAttribute('index', index++);
					totalWidth += imgTag.getWidth() + 10;
				}
			}
	    }.bind(this));
		
	    this.flowThumbs.setStyle({
			width: totalWidth + 'px'
	    });
		
		this.preloadNeighborImages();
		
		if(dir == "left") {
			$('imageFlow_btn_left').setStyle({
				background:"url('img/flow/arrow_left.png') no-repeat left"
			});
			$('imageFlow_btn_left').observe('click', function(e) { myProtoFlow.previous(); });
		}
	},


	getResizeFactor: function(index, cur) {
		var fact = ((-0.5 / (Math.pow(8 / 2, 2)) * 2) * Math.pow(Math.abs(cur - index), 2) + 1);
		if(fact < 0.5) fact = 0.5;
		return fact;
	},

	getImagePos: function(activeImageIndex, calcImageIndex) {
		var leftOffset = 0;
    
		this.images.each(function(img, index) {
			if(index <= calcImageIndex) {
				if(img.flowImage.orig_height < 120) {
					var pseudoWidth = img.flowImage.orig_width * 120 / img.flowImage.orig_height;
				}
				else if(img.flowImage.orig_height > 120) {
					var pseudoWidth = img.flowImage.orig_width * 120 / img.flowImage.orig_height;
				}
				else {
					var pseudoWidth = img.flowImage.orig_width;
				}
				var w = pseudoWidth * this.getResizeFactor(index, activeImageIndex);
				leftOffset += (index != calcImageIndex ? w : w / 2) + 10.5;
			}
		}.bind(this));
		return leftOffset;
	},
  
	goTo: function(gotoIndex) {
		if(this.slidingStatus == 'idle') {
			this.slidingStatus = 'sliding';
		}
		this.slideTo(this.getImagePos(gotoIndex, gotoIndex));
	},
  
	step: function() {
		if(this.target < this.currPos - 1 || this.target > this.currPos + 1) {
			var step = this.target - this.currPos;
			this.curdir = (step < 0 ? -1 : 1);
			
			step = this.curdir * Math.sqrt(Math.abs(step)) * 2;
			
			if(step < 1 && step > 0) step = 1;
			else if(step > -1 && step < 0) step = -1;
			
			this.moveTo(this.currPos + step);
			
			window.setTimeout(this.step.bind(this), this.options.interval);
			this.timer = 1;
		}
		else {
			this.timer = 0;
			
			if(this.slidingStatus == 'init') {
				$('imageFlow_btn_right').observe('click', function(e) { myProtoFlow.next(); });
				$('imageFlow_btn_left').observe('click', function(e) { myProtoFlow.previous(); });
				this.slidingStatus = 'idle';
			}
			
			if(this.slidingStatus == 'sliding') {
				this.slidingStatus = 'idle';
			}
		}
	},
  
	slideTo: function(x) {
		this.target = x;
		this.oldpos = this.currPos;
		
		if(this.timer == 0) {
			this.timer = 1;
			window.setTimeout(this.step.bind(this), this.options.interval);
		}
	},
  
	moveTo: function(newPos) {
		this.currPos = newPos;
		var canvasWidth = Element.getWidth(this.canvas);

		var slideProgress = 1 - Math.abs(this.target - this.currPos) * (1 / Math.abs(this.target - this.oldpos));
		if(slideProgress > 1) slideProgress = 1;

		this.images.each(function(img, index)
		{
			var eImg = $(img.flowImage.id);

			var fact = this.getResizeFactor(index, this.currIndex + (this.options.method != 1 ? 0 : this.curdir * slideProgress - this.curdir));

			if(img.flowImage.orig_height < 120) {
				var pseudoHeight = 120;
				var pseudoWidth = img.flowImage.orig_width * 120 / img.flowImage.orig_height;
			}
			else if(img.flowImage.orig_height > 120) {
				var pseudoHeight = 120;
				var pseudoWidth = img.flowImage.orig_width * 120 / img.flowImage.orig_height;
			}
			else {
				var pseudoHeight = img.flowImage.orig_height;
				var pseudoWidth = img.flowImage.orig_width;
			}
			var newWidth = Math.ceil(pseudoWidth * fact) + "px";
			var newHeight = Math.ceil(pseudoHeight * fact) + "px";
		  
			if(newWidth != eImg.style.width) {
				Reflection.remove(eImg);
				eImg.setStyle({
					width: newWidth,
					height: newHeight
				});
			
				if(index >= this.currIndex - this.options.widespace && index <= this.currIndex + this.options.widespace) {
					Reflection.add(eImg, { opacity: 1/3 });
				}
			}
		}.bind(this));

		var sizeCorrection = (this.options.method != 2 ? 0 : this.curdir * Math.abs(this.getImagePos(this.currIndex, this.currIndex - this.curdir) - newPos) * (1 - slideProgress));
		
		this.flowThumbs.style.left = Math.round(-newPos + sizeCorrection + canvasWidth / 2) + "px";
	},
  
	previous: function(e) {
		if(this.currIndex > 0) {
			this.goTo(--this.currIndex);
			$('imageFlow_btn_left').stopObserving();
			$('imageFlow_btn_left').setStyle({
				background:"url('img/ajax-loader.gif') no-repeat left"
			});
			
			new Effect.Parallel(
				[ 
					new Effect.Fade($('randomImgOuter'), { duration: 0.4 }),
					new Effect.Fade($('imageFlow_overlay'), { duration: 0.2 })
				], 
				{ 
					afterFinish: (function() {
						// update overlay size and update nav
						this.rndImageVisibilty = 'hidden';
					}).bind(this)
				} 
			);
			
			var firstID = this.images[0].flowImage.id.substr(11, this.images[0].flowImage.id.length);
			var currID = this.images[this.currIndex].flowImage.id.substr(11, this.images[this.currIndex].flowImage.id.length);
			if(this.currIndex - 4 < 0 && firstID != this.firstID) {
				$jq.post("jquery.php", { dir: "left", nextSiblingID: firstID, currID: currID },
					(function(data){
						this.updateImageFlow(data, currID, "left");
						this.updateRandomImage(data, currID);
					}).bind(this), "json"
				);
			}
			else {
				$jq.post("jquery.php", { action: 'updateImageDetails', currID: currID },
					(function(data){
						this.updateRandomImage(data, currID);
						this.preloadNeighborImages();
						$('imageFlow_btn_left').setStyle({
							background:"url('img/flow/arrow_left.png') no-repeat left"
						});
						$('imageFlow_btn_left').stopObserving();
						$('imageFlow_btn_left').observe('click', (function(e) { this.previous(); }).bind(this));
					}).bind(this), "json"
				);
			}
		}
	},

	next: function(e)	 {
		if(this.currIndex < this.images.length - 1) {
			this.goTo(++this.currIndex);
			$('imageFlow_btn_right').stopObserving();
			$('imageFlow_btn_right').setStyle({
				background:"url('img/ajax-loader.gif') no-repeat left"
			});
			
			new Effect.Parallel(
				[ 
					new Effect.Fade($('randomImgOuter'), { duration: 0.6 }),
					new Effect.Fade($('imageFlow_overlay'), { duration: 0.2 })
				], 
				{ 
					afterFinish: (function() {
						this.rndImageVisibilty = 'hidden';
					}).bind(this)
				}
			);
			
			var lastID = this.images[this.images.length - 1].flowImage.id.substr(11, this.images[this.images.length - 1].flowImage.id.length);
			var currID = this.images[this.currIndex].flowImage.id.substr(11, this.images[this.currIndex].flowImage.id.length);
			if(this.currIndex + 4 > this.images.length - 1 && lastID != 1) {
				$jq.post("jquery.php", { dir: "right", prevSiblingID: lastID, currID: currID },
					(function(data){
						this.updateImageFlow(data, currID, "right");
						this.updateRandomImage(data, currID);
					}).bind(this), "json"
				);
			}
			else {
				$jq.post("jquery.php", { action: 'updateImageDetails', currID: currID },
					(function(data){
						this.updateRandomImage(data, currID);
						this.preloadNeighborImages();
						$('imageFlow_btn_right').setStyle({
							background:"url('img/flow/arrow_right.png') no-repeat left"
						});
						$('imageFlow_btn_right').stopObserving();
						$('imageFlow_btn_right').observe('click', (function(e) { this.next(); }).bind(this));
					}).bind(this), "json"
				);
			}
		}
	},
	
	//
    //  preloadNeighborImages()
    //  Preload previous and next image.
    //
    preloadNeighborImages: function() {
        var preloadNextImage, preloadPrevImage;
        if (this.images.length > this.currIndex + 1){
            preloadNextImage = new Image();
			var nextID = this.images[this.currIndex + 1].flowImage.id.substr(11, this.images[this.currIndex + 1].flowImage.id.length);
			var scaling = this.images[this.currIndex + 1].randomImage.scaling != null ? this.images[this.currIndex + 1].randomImage.scaling : "";
            preloadNextImage.src = "getimg.php?id=" + nextID + scaling;
        }
        if (this.currIndex > 0){
            preloadPrevImage = new Image();
			var prevID = this.images[this.currIndex - 1].flowImage.id.substr(11, this.images[this.currIndex - 1].flowImage.id.length);
			var scaling = this.images[this.currIndex - 1].randomImage.scaling != null ? this.images[this.currIndex - 1].randomImage.scaling : "";
            preloadPrevImage.src = "getimg.php?id=" + prevID + scaling;
        }
    },
	
	updateImageFlow: function(data, currID, dir) {
		var randomImg = this.images[this.currIndex].randomImage;
		if(data.flowImage.imageFound) {
			// preload flow Image
			var flowImage = new Image();
			flowImage.onload = (function() {
				if(this.slidingStatus == 'sliding') {
					window.setTimeout((function() { this.insertFlowImage(data, dir) }).bind(this), 200);
				}
				else {
					this.insertFlowImage(data, dir);
				}
			}).bind(this);
			flowImage.src = this.randomDir + '/thumbs/large/tn_' + data.flowImage.filename;
		}
		else {
			return;
		}
	},
	
	updateRandomImage: function(data, currID) {
		var randomImg = this.images[this.currIndex].randomImage;
		this.rndImageLoaded = false;
		
		// load new image
		var rndImgLoader = new Image();
		
		rndImgLoader.onload = (function(){
			this.rndImageLoaded = true;
		}).bind(this);
			
		var scaling = randomImg.scaling != null ? randomImg.scaling : "";
		rndImgLoader.src = "getimg.php?id=" + currID + scaling;
		
		// update image comments
		this.updateComments(data.comments, currID);
		
		if(this.rndImageVisibilty == 'visible' || this.rndImageLoaded == false) {
			window.setTimeout((function() { this.rndImgAppear(randomImg, currID, scaling, data.currViews, data.rating, data.uploader); }).bind(this), 300);
		}
		else {
			this.rndImgAppear(randomImg, currID, scaling, data.currViews, data.rating, data.uploader);
		}
	},
	
	updateRating: function(ratingData, currID) {
		// update rating block
		var rating = ratingData.rating;
		var votes = ratingData.votes;
		var voted = ratingData.voted;
		var rating1 = Math.round(rating * 10) / 10;
		var rating2 = Math.round(rating * 100) / 100;
		var rating_width = rating2 * 25;
		var rater = '<div id="unit-long">';
		rater += '  <ul class="unit-rating" style="width:125px; margin:auto;">';
		rater += '     <li class="current-rating" style="width:' + rating_width + 'px;">Currently ' + rating2 + '/5</li>';
		if(!voted) { // if the user hasn't yet voted, draw the voting stars
			for (var ncount = 1; ncount <= 5; ncount++) { // loop from 1 to the number of units
				rater += '<li><a href="#" title="' + ncount + ' out of 5" class="r' + ncount + '-unit rater" rel="nofollow" onClick="doRate(' + currID + ', ' + ncount + ', true, \'single\', false); return false;">' + ncount + '</a></li>';
			}
		}
		ncount = 0; // resets the count

		rater +='  </ul>';
		rater +='  <p style="margin:0px; padding:0px; font-size:11px;"';
		if(voted){ rater +=' class="voted"'; }
		rater +='>Rating: <strong> ' + rating1 + '</strong>/5 - ' + votes + ' Votes';
		rater +='  </p>';
		rater +='</div>';
		$('rating').innerHTML = rater;
		new Effect.Appear($('imageFlow_overlay'), { duration: 0.6 });
	},
	
	updateComments: function(comments, currID) {
		if(comments.count > 0) {
			// create empty comment block
			var div = document.createElement('div');
			div.setAttribute('id', 'comments');
			div.setStyle({
				marginTop: '10px'
			});
			comments.data.each(function(comment) {
				var commentDiv = document.createElement('div');
				commentDiv.setAttribute('id', 'comment_id' + comment.commentID);
				commentDiv.setAttribute('class', 'comment');
				
				var span = document.createElement('span');
				span.setStyle({
					fontSize: '11px'
				});
				span.innerHTML = 'Submitted by ' + comment.username + ' on ' + comment.dateAdded;
				
				var p = document.createElement('p');
				p.setStyle({
					marginTop: '10px',
					color: '#3f3534'
				});
				p.innerHTML = comment.text;
				
				commentDiv.insert(span);
				commentDiv.insert(p);
				div.insert(commentDiv);
			});
		}
		else {
			// create empty comment block
			var div = document.createElement('div');
			div.setAttribute('id', 'comments');
			div.setStyle({
				marginTop: '10px'
			});
			
		}
		$('commentCount').innerHTML = ' Comments(' + comments.count + ')';
		$('comments').replace(div);
		if($('commentSubmit') != null) {
			$('commentSubmit').setAttribute('onClick', 'submitComment(' + currID + ')');
		}
	},
	
	rndImgAppear: function(randomImg, currID, scaling, currViews, rating, uploader){
		if(this.rndImageVisibilty == 'visible' || this.rndImageLoaded == false) {
				window.setTimeout((function() { this.rndImgAppear(randomImg, currID, scaling, currViews, rating, uploader); }).bind(this), 300);
		}
		else {
			// assign new random image and let the whole frame appear
			var rndImgLink = $('randomImgFrame').down('a');
			if(rndImgLink) {
				rndImgLink.href = "getimg.php?id=" + currID;
				rndImgLink.down('img').src = "getimg.php?id=" + currID + scaling;
			}
			else {
				$('randomImage').src = "getimg.php?id=" + currID + scaling;
			}
			if(randomImg.divHeight < 550) {
				$('randomImgOuter').setStyle({
					paddingTop: (600 - randomImg.divHeight) / 2 + "px"
				});
			}
			else {
				$('randomImgOuter').setStyle({
					paddingTop: "0px"
				});
			}
		
			// resize image frame
			$('randomImgFrame').setStyle({
				width: randomImg.divWidth + "px",
				height: randomImg.divHeight + "px"
			});
		
			// display fav link if logged in
			if(randomImg.displayFavLink) {
				if(randomImg.faved) {
					var span = document.createElement('span');
					span.id = "favLink";
					span.setStyle({
						verticalAlign: "middle",
						fontSize: "32px"
					});
					var favImg = document.createElement('img');
					favImg.src = "img/favorite.png";
					favImg.border = 0;
					Element.insert(span, favImg);
					$('favLink').replace(span);
				}
				else {
					var span = document.createElement('span');
					span.id = "favLink";
					span.setStyle({
						verticalAlign:"middle",
						fontSize:"32px"
					});
					var a = document.createElement('a');
					a.href = "javascript:addFav(" + currID + ", 'random')";
					var favImg = document.createElement('img');
					favImg.src = "img/add-favorite.png";
					favImg.border = 0;
					Element.insert(a, favImg)
					Element.insert(span, a);
					$('favLink').replace(span);
				}
			}
			
			// replace image info
			$('dateAdded').innerHTML = randomImg.dateAdded;
			$('imgSize').innerHTML = randomImg.imgSize;
			$('imgDl').down('a').href = "getimg.php?id=" + currID;
			$('viewCount').innerHTML = currViews;
			$('uploader').innerHTML = uploader;
			$('favCount').innerHTML = randomImg.favCount + "x";
			$('imageLink').value = 'http://jaybee.cc/index.php?show=random&imgid=' + currID;
			
			// update ratingblock for new image
			this.updateRating(rating, currID);
			
			// all info updated... let the image appear!
			new Effect.Appear($('randomImgOuter'), { duration: 0.6, afterFinish: (function() { this.rndImageVisibilty = 'visible'; }).bind(this) });
		}
	},
	
	insertFlowImage: function(newData, dir) {
		if(this.slidingStatus == 'sliding') {
			window.setTimeout(function() { myProtoFlow.insertFlowImage(newData, dir); }, 200);
			return;
		}
		else {
			// create new div and insert new flow image
			var flowImage = newData.flowImage;
			var div = document.createElement('div');
			var imgTag = document.createElement('img');
			imgTag.src = this.randomDir + '/thumbs/large/tn_' + flowImage.filename;
			var id = '__flowImage' + flowImage.randomID;
			imgTag.setAttribute('id', id);
			div.style.marginLeft = '10px';
			Element.insert(div, imgTag);
			
			if(dir == "left") {
				// prepend to other flow images
				this.flowThumbs.insert({top: div});
				this.images.pop();
			}
			else {
				// append to other flow images
				this.flowThumbs.insert(div);
				this.images.shift();
			}
			
			// resize new image
			var slideProgress = 1 - Math.abs(this.target - this.currPos) * (1 / Math.abs(this.target - this.oldpos));
			if(slideProgress > 1) slideProgress = 1;
			var fact = this.getResizeFactor(this.images.length, this.currIndex + (this.options.method != 1 ? 0 : this.curdir * slideProgress - this.curdir));
			
			if(flowImage.orig_height < 120) {
				var pseudoHeight = 120;
				var pseudoWidth = flowImage.orig_width * 120 / flowImage.orig_height;
			}
			else if(flowImage.orig_height > 120) {
				var pseudoHeight = 120;
				var pseudoWidth = flowImage.orig_width * 120 / flowImage.orig_height;
			}
			else {
				var pseudoHeight = flowImage.orig_height;
				var pseudoWidth = flowImage.orig_width;
			}
			
			var newWidth = Math.ceil(pseudoWidth * fact) + "px";
			
			if(newWidth != imgTag.style.width) {
				imgTag.setStyle({
					width: newWidth,
					height: Math.ceil(pseudoHeight * fact) + "px"
				});
			}
			
			// adjust offsets and remove last or first image
			if(dir == "left") {
				var imageFlowNodes = this.flowThumbs.childElements();
				var imgTag = imageFlowNodes[0].down('img');
				var sizeCorrection = imgTag.getWidth() + 10;
				imageFlowNodes[imageFlowNodes.length - 1].remove();
				this.flowThumbs.style.left = parseInt(this.flowThumbs.style.left) - sizeCorrection + "px";
				this.currIndex += 1;
				this.currPos += sizeCorrection;
				this.updateImageList(this.canvas.id, { imgID: flowImage.randomID, orig_width: flowImage.orig_width, orig_height: flowImage.orig_height }, dir);
				var flowImage = this.images[0].flowImage;
				this.images[0] = { flowImage: flowImage, randomImage: newData.randomImg};
				$('imageFlow_btn_left').setStyle({
					background:"url('img/flow/arrow_left.png') no-repeat left"
				});
				$('imageFlow_btn_left').stopObserving();
				$('imageFlow_btn_left').observe('click', (function(e) { this.previous(); }).bind(this));
			}
			else {
				var imageFlowNodes = this.flowThumbs.childElements();
				var imgTag = imageFlowNodes[0].down('img');
				var sizeCorrection = imgTag.getWidth() + 10;
				imageFlowNodes[0].remove();
				this.flowThumbs.style.left = parseInt(this.flowThumbs.style.left) + sizeCorrection + "px";
				this.currIndex -= 1;
				this.currPos -= sizeCorrection;
				this.updateImageList(this.canvas.id, { imgID: newData.flowImage.randomID, orig_width: newData.flowImage.orig_width, orig_height: newData.flowImage.orig_height }, dir);
				var flowImage = this.images[this.images.length - 1].flowImage;
				this.images[this.images.length - 1] = { flowImage: flowImage, randomImage: newData.randomImg};
				$('imageFlow_btn_right').setStyle({
					background:"url('img/flow/arrow_right.png') no-repeat left"
				});
				$('imageFlow_btn_right').stopObserving();
				$('imageFlow_btn_right').observe('click', (function(e) { this.next(); }).bind(this));
			}
		}
	}
});