var states = new Array(
	new State(0,  68, 68,  0),
	new State(30,  50, 100, 1),
	new State(93,  34, 132, 1),
	new State(183, 18, 164, 1),
	new State(283, 0,  200, 1),
	new State(433, 18, 164, 1),
	new State(573, 34, 132, 1),
	new State(683, 50, 100, 1),
	new State(703, 68, 68,  0)
);

var collapsedStates = new Array(
	new State(30,  62, 70,  0),
	new State(30,  62, 70, .5),
	new State(145, 62, 70, .67),
	new State(260, 62, 70, .83),
	new State(375, 62, 70, 1),
	new State(490, 62, 70, .83),
	new State(605, 62, 70, .67),
	new State(720, 62, 70, .5),
	new State(720, 62, 70, 0)
);

function State(left, top, height, alpha) {
	this.left = left;
	this.top = top;
	this.height = height;
	this.alpha = alpha;
}

function setOpacity(element, value) {
  element= $(element);
  if (value == 0)
	element.style.display = 'none';
  else
	element.style.display = 'block';

  if (element) {
	  if (value == 1){
		element.setStyle({ opacity:
		  (/Gecko/.test(navigator.userAgent) && !/Konqueror|Safari|KHTML/.test(navigator.userAgent)) ?
		  0.999999 : 1.0 });
		if(/MSIE/.test(navigator.userAgent) && !window.opera)
		  element.setStyle({filter: Element.getStyle(element,'filter').replace(/alpha\([^\)]*\)/gi,'')});
	  } else {
		if(value < 0.00001) value = 0;
		element.setStyle({opacity: value});
		if(/MSIE/.test(navigator.userAgent) && !window.opera)
		  element.setStyle(
			{ filter: element.getStyle('filter').replace(/alpha\([^\)]*\)/gi,'') +
				'alpha(opacity='+value*100+')' });
	  }
  }
  return element;
}

function fadeTo(element, duration, opacity) {
	new Effect.Opacity(element,
	{ duration: duration,
	  transition: Effect.Transitions.linear,
	  to: opacity });
	if (opacity == 0)
		setTimeout("$('"+element+"').style.display='none';", duration*1000);
	else
		$(element).style.display = 'block';
}

function moveCenter(element, toX, toY) {
	if (toX != null) {
		fromX =$(element).style.left;
		fromX = fromX.replace("px", "");
		moveX = toX-fromX;
	} else
		moveX = 0;
	if (toY != null) {
		fromY =$(element).style.top;
		fromY = fromY.replace("px", "");
		moveY = toY-fromY;
	}
	moveBy(element, moveX, moveY);
}

function move(element, toX, toY) {
	if (toX != null) {
		fromX =$(element).style.left;
		fromX = fromX.replace("px", "");
		moveX = toX-fromX;
	} else
		moveX = 0;
	if (toY != null) {
		fromY =$(element).style.top;
		fromY = fromY.replace("px", "");
		moveY = toY-fromY;
	}
	moveBy(element, moveX, moveY);
}

function moveBy(element, moveX, moveY) {
	new Effect.MoveBy(element,
	 moveY, moveX,
	 { duration: .5 }
	);
}

function scale(element, duration, toWidth, toHeight) {
	fromWidth =$(element).style.width;
	fromWidth = parseInt(fromWidth.replace("px", ""));
	fromHeight =$(element).style.height;
	fromHeight = parseInt(fromHeight.replace("px", ""));
	if (toWidth == -1)
		toWidth = ((toHeight/fromHeight)*100)*fromWidth;
	if (toHeight == -1)
		toHeight = ((toWidth/fromWidth)*100)*fromHeight;
	//alert("scale to: "+toWidth+", "+toHeight);
	if (toWidth != null) { // xscale
		// get original x value, take off any non-numeric characters
		xscale = (toWidth/fromWidth)*100;
		new Effect.Scale(element, xscale, { scaleY:false, scaleContent:false, duration: duration, scaleMode: { originalWidth: fromWidth } } );
	}
	if (toHeight != null) { // yscale
		yscale = (toHeight/fromHeight)*100;
		new Effect.Scale(element, yscale, { scaleX:false, scaleContent:false, duration: duration, scaleMode: { originalHeight: fromHeight } } );
	}
}

var Gallery = Class.create( {
	initialize: function(prefix) {
		this.prefix = prefix;
		
		for(this.totalPictures=0; $(this.prefix+'pic'+this.totalPictures) != null; this.totalPictures++) { }
		this.curPicture = Math.floor(this.totalPictures/2);
		this.moving = false;
		this.targetPic = -1;
		this.positions = new Array();
		this.collapsed = false;
		for(var i=0; i < this.totalPictures; i++) {
			var indPos = i-this.curPicture+4;
			this.positions[i] = indPos;
			if (indPos < 0) {
				if ($(this.prefix+'pic'+i).style.left != states[0].left) {
					$(this.prefix+'pic'+i).style.left = states[0].left+"px";
					$(this.prefix+'pic'+i).style.top = states[0].top;
					$(this.prefix+'pic'+i+'Img').style.height = states[0].height;
					setOpacity(this.prefix+'pic'+i, 0);
				}
			} else if(indPos >= 8) {
				if ($(this.prefix+'pic'+i).style.left != states[8].left) {
					$(this.prefix+'pic'+i).style.left = states[8].left+"px";
					$(this.prefix+'pic'+i).style.top = states[8].top;
					$(this.prefix+'pic'+i+'Img').style.height = states[8].height;
					setOpacity('pic'+i, states[8].alpha);
				}
			} else {
				$(this.prefix+'pic'+i).style.left = states[indPos].left+"px";
				$(this.prefix+'pic'+i).style.top = states[indPos].top+"px";
				$(this.prefix+'pic'+i+'Img').style.height = states[indPos].height;
				setOpacity(this.prefix+'pic'+i, 0);
				fadeTo(this.prefix+'pic'+i, 1, states[indPos].alpha);
				if (indPos <= 4) {
					$(this.prefix+'pic'+i).style.zIndex = indPos;
				} else {
					$(this.prefix+'pic'+i).style.zIndex = 4-(indPos%4);
				}
			}
		}
		$(this.prefix+'loadingTxt').innerHTML = "Done.";
		fadeTo(this.prefix+'loadingTxt', .5, 0);
		setTimeout("$('"+this.prefix+"loadingTxt').style.display = 'none';", 5);
		fadeTo(this.prefix+'title'+this.curPicture, 1, 1);
		fadeTo(this.prefix+'createdBy'+this.curPicture, 1, 1);
		fadeTo(this.prefix+'dateTaken'+this.curPicture, 1, 1);
	},
	
	collapsePictures: function(duration) {
		if (!this.collapsed) {
			this.moving = true;
			this.collapsed = true;
			var moveTo = this.curPicture-this.targetPic;
			if (Math.abs(moveTo) == 1) { // just move one spot without collapse
				this.moveTowardsPic(this.targetPic);
				this.curPicture = this.targetPic;
				this.collapsed = false;
			} else {
				if (moveTo != 0) {
					for(var i=0; i<this.positions.length; i++) {
						this.positions[i] += Math.floor(moveTo/2);
					}
				}
				for (var i=0; i<this.positions.length; i++) {
					var indPos = this.positions[i];
					if (indPos < 0) {
						if ($(this.prefix+'pic'+i).style.left != collapsedStates[0].left) {
							move(this.prefix+'pic'+i, collapsedStates[0].left, collapsedStates[0].top);
							scale(this.prefix+'pic'+i+'Img', duration, -1, collapsedStates[0].height);
							fadeTo(this.prefix+'pic'+i, duration, collapsedStates[0].alpha);
						}
					} else if(indPos >= 8) {
						if ($(this.prefix+'pic'+i).style.left != collapsedStates[8].left) {
							move(this.prefix+'pic'+i, collapsedStates[8].left, collapsedStates[8].top);
							scale(this.prefix+'pic'+i+'Img', duration, -1, collapsedStates[8].height);
							fadeTo(this.prefix+'pic'+i, duration, collapsedStates[8].alpha);
						}
					} else {
						move(this.prefix+'pic'+i, collapsedStates[indPos].left, collapsedStates[indPos].top);
						scale(this.prefix+'pic'+i+'Img', duration, -1, collapsedStates[indPos].height);
						fadeTo(this.prefix+'pic'+i, duration, collapsedStates[indPos].alpha);
					}
				}
			
				if (moveTo != 0) {
					this.fadeOutCurText();
					for(var i=0; i<this.positions.length; i++) {
						this.positions[i] += Math.ceil(moveTo/2);
					}
					this.curPicture = this.targetPic;
					setTimeout("galleries['"+this.prefix+"'].movePictures(.5)", 600);
					setTimeout("galleries['"+this.prefix+"'].collapsed = false;", 500);
					setTimeout("galleries['"+this.prefix+"'].fadeInCurText();", 600);
				} else {
					this.fadeOutCurText();
					this.moving = false;
				}
			}
		} else {
			moveTo = this.curPicture-this.targetPic;
			if (moveTo != 0) {
				for(var i=0; i<this.positions.length; i++) {
					this.positions[i] += moveTo;
				}
				this.curPicture = this.targetPic;
			}
			this.fadeInCurText();
			this.movePictures(.5);
			this.collapsed = false;
		}
	},
	
	fadeOutCurText: function() {
		fadeTo(this.prefix+'title'+this.curPicture, .5, 0)
		fadeTo(this.prefix+'createdBy'+this.curPicture, .5, 0);
		fadeTo(this.prefix+'dateTaken'+this.curPicture, .5, 0);
	},
	
	fadeInCurText: function () {
		fadeTo(this.prefix+'title'+this.curPicture, .5, 1)
		fadeTo(this.prefix+'createdBy'+this.curPicture, .5, 1);
		fadeTo(this.prefix+'dateTaken'+this.curPicture, .5, 1);
	},
	
	movePictures: function(duration) {
		this.moving = false;
		for (var i=0; i<this.positions.length; i++) {
			var indPos = this.positions[i];
			if (indPos < 0) {
				if ($(this.prefix+'pic'+i).style.left != states[0].left) {
					move(this.prefix+'pic'+i, states[0].left, states[0].top);
					scale(this.prefix+'pic'+i+'Img', duration, -1, states[0].height);
					fadeTo(this.prefix+'pic'+i, duration, states[0].alpha);
				}
			} else if(indPos >= 8) {
				if ($(this.prefix+'pic'+i).style.left != states[8].left) {
					move(this.prefix+'pic'+i, states[8].left, states[8].top);
					scale(this.prefix+'pic'+i+'Img', duration, -1, states[8].height);
					fadeTo(this.prefix+'pic'+i, duration, states[8].alpha);
				}
			} else {
				move(this.prefix+'pic'+i, states[indPos].left, states[indPos].top);
				scale(this.prefix+'pic'+i+'Img', duration, -1, states[indPos].height);
				fadeTo(this.prefix+'pic'+i, duration, states[indPos].alpha);
				if (indPos <= 4) {
					$(this.prefix+'pic'+i).style.zIndex = indPos;
				} else {
					setTimeout("$('"+this.prefix+"pic"+i+"').style.zIndex = "+(4-(indPos%4)), duration/2);
				}
			}
		}
	}, 
	
	movePicLeft: function() {
		if (this.targetPic != 0 && !this.moving) {
			if (!this.collapsed) {
				if (!this.moving) {
					this.targetPic = this.curPicture-1;
					this.collapsePictures(.5);
					this.collapsed = false;
				}
			} else {
				for(var i=0; i<this.positions.length; i++) {
					this.positions[i]++;
				}
				this.moveThumbs(.5);
				this.targetPic = this.curPicture-1;
				this.curPicture--;
			}
		}
	},
	
	movePicRight: function() {
		if (this.targetPic < this.totalPictures-1 && !this.moving) {
			if (!this.collapsed) {
				if (!this.moving) {
					this.targetPic = this.curPicture+1;
					this.collapsePictures(.5);
					this.collapsed = false;
				}
			} else {
				for(var i=0; i<this.positions.length; i++) {
					this.positions[i]--;
				}
				this.moveThumbs(.5);
				this.targetPic = this.curPicture+1;
				this.curPicture++;
			}
		}
	},

	moveThumbs: function(duration) {
		for (var i=0; i<this.positions.length; i++) {
			var indPos = this.positions[i];
			if (indPos < 0) {
				if ($(this.prefix+'pic'+i).style.left != collapsedStates[0].left) {
					move(this.prefix+'pic'+i, collapsedStates[0].left, collapsedStates[0].top);
					scale(this.prefix+'pic'+i+'Img', duration, -1, collapsedStates[0].height);
					fadeTo(this.prefix+'pic'+i, duration, collapsedStates[0].alpha);
				}
			} else if(indPos >= 8) {
				if ($(this.prefix+'pic'+i).style.left != collapsedStates[8].left) {
					move(this.prefix+'pic'+i, collapsedStates[8].left, collapsedStates[8].top);
					scale(this.prefix+'pic'+i+'Img', duration, -1, collapsedStates[8].height);
					fadeTo(this.prefix+'pic'+i, duration, collapsedStates[8].alpha);
				}
			} else {
				move(this.prefix+'pic'+i, collapsedStates[indPos].left, collapsedStates[indPos].top);
				scale(this.prefix+'pic'+i+'Img', duration, -1, collapsedStates[indPos].height);
				fadeTo(this.prefix+'pic'+i, duration, collapsedStates[indPos].alpha);
			}
		}
	},
	
	setTargetPic: function(picNum) {
		if (!this.moving) {
			this.targetPic = picNum;
			this.collapsePictures(.5);
		}
	},
	
	moveTowardsPic: function() {
		this.moving = true;
		var toMove = 0;
		if (this.targetPic - this.curPicture > 0)
			toMove = -1
		else if (this.targetPic - this.curPicture < 0)
			toMove = 1;
		for(var i=0; i<this.positions.length; i++) {
			this.positions[i] += toMove;
		}
		var duration = .5;
		this.movePictures(duration);
		this.fadeOutCurText()
		this.curPicture -= toMove;
		setTimeout("galleries['"+this.prefix+"'].fadeInCurText();", (duration*1000)+100);
	}
} );