function processStateChange(){
  if (request.readyState == 4){
	contentDiv = document.getElementById(dest);
	if (request.status == 200){
		response = request.responseText;
		contentDiv.innerHTML = response;				
	} else {
		contentDiv.innerHTML = "Error: "+request.status;
	}
  }
}		
var request;
var dest;
function loadHTML(URL, destination){
	dest = destination;
	if(window.XMLHttpRequest){
		request = new XMLHttpRequest();
		request.onreadystatechange = processStateChange;
		request.open("GET", URL, true);
		request.send(null);
	}
	else{
		if (window.ActiveXObject) {
			request = new ActiveXObject("Microsoft.XMLHTTP");
			if (!request) request = new ActiveXObject("MSxml2.XMLHTTP");
			if (request) {
				request.onreadystatechange = processStateChange;
				request.open("GET", URL, true);
				request.send();
			}
		}
	}
}

function show(name,id) {
	var x,y;
	var test1 = document.body.scrollHeight;
	var test2 = document.body.offsetHeight;
	if (test1 > test2) {
		x = document.body.scrollWidth;
		y = document.body.scrollHeight;
	}
	else {
		x = document.body.offsetWidth;
		y = document.body.offsetHeight;
	}
	if(navigator.appName != "Microsoft Internet Explorer"){
		document.getElementById(name+id).style.height=y-document.body.scrollTop;
		document.getElementById(name+id).style.padding=document.body.scrollTop+"px 0px 0px 0px";
		document.getElementById(name+id).style.width='100%';
		
		document.getElementById(name+"_"+id).style.width='100%';
		document.getElementById(name+"_"+id).style.height=y;
	}
	else{
		document.getElementById(name+id).style.height=y;
		document.getElementById(name+id).style.padding=document.body.scrollTop+20+"px 0px 0px 0px";
		document.getElementById(name+id).style.width=x;
		
		document.getElementById(name+"_"+id).style.height=y;
		document.getElementById(name+"_"+id).style.width=x;
	}
	loadHTML('photo.php?photo='+id+'&name='+name,name+id);
	document.getElementById(name+id).style.display='block';	
	document.getElementById(name+"_"+id).style.display='block';	
	
}


Showcase = Class.create(Abstract, {
	initialize: function (sections, controls, options) {
	
		this.allSections 	= this.sections = sections;
		this.controls 		= controls;	
		
		this.options = Object.extend({
			ratio: 					0.5,
			initialDelay: 			1,
			duration: 				0.8,			
			size:					this.sections.size()
			}, options || {});
			
		this.running 		= false;
		this.queue			= new Array;
		
		this.computeMetrics();	
		
		this.sections = this.allSections.slice(this.currentIndex - this.half, this.currentIndex + this.half + 1);
		
		this.allSections.each((function (section, index) {
			section.setStyle({position: 'absolute', zIndex: Math.abs(index - this.sections.size()), left: '50%', top: '50%', marginLeft: -Math.round(section.getWidth() / 2) + 'px', marginTop: -Math.round(section.getHeight() / 2) + 'px'}).initialIndex = index;			
			
			section.observe('click', this.jump.bind(this)).observe('mouseover', function (event) {
				section.setOpacity(1);
				}).observe('mouseout', function () {
					section.setOpacity(section.opacity);
					}).opacity = 1;
					
			if (!this.sections.member(section)) {
				this.queue.push(section.hide());
				}
			}).bind(this));
		
		for (i = 0; i <= this.half; i++) {
			this.sections.push(this.sections.shift());
			}
			
		this.controls.invoke('observe', 'click', this.click.bind(this));			
		(this.animate.bind(this)).delay(this.options.initialDelay);
		},

	computeMetrics: function () {
		this.half 			= this.currentIndex = (this.options.size - 1) / 2;		
		this.ratioStep 		= Math.round(((1 - this.options.ratio) / this.currentIndex) * 100) / 100;
		this.positionStep 	= Math.round(50 / this.half * 100) / 100;		
		this.maxDimensions 	= this.sections.first().getDimensions();
		},
		
	click: function (event) {
		event.stop();
		var element = event.findElement('a');
		if (!this.running) {
			eval("this." + element.rel + "()");
			}		
		this.animate(element.rel);
		},
		
	previous: function () {
		if (this.options.size < this.allSections.size()) {
			var sectionIn 	= this.queue.shift();
			var sectionOut 	= this.sections.pop();		
		
			this.sections.unshift(sectionIn);
			this.queue.push(sectionOut.fade({duration: this.options.duration}));
			} else {
				this.sections.unshift(this.sections.pop());
				}
		},
	
	next: function () {		
		if (this.options.size < this.allSections.size()) {			
			var sectionIn 	= this.queue.shift();
			var sectionOut 	= this.sections.shift();
		
			this.sections.push(sectionIn);
			this.queue.push(sectionOut.fade({duration: this.options.duration}));
			} else {
				this.sections.push(this.sections.shift());
				}
		},
	
	jump: function (event) {
		event.stop();
		newid = event.findElement('li').id;
		show('img',newid.substr(2, 10));
		if(this.sections.indexOf(event.findElement('li'))==(Math.round(event.findElement('ul').childNodes.length/2)-1)){
			//newid = event.findElement('li').id;
			//show('img',newid.substr(2, 10));
		}
		if (!this.running) {
			var section = this.sections[this.sections.indexOf(event.findElement('li'))];
			
			var direction = '';
			
			if (section.index < this.half) {
				(this.half - section.index).times((function () {				
					this.previous();
					}).bind(this));
				direction = 'previous';
				} else if (section.index == this.half) {
					} else {
						(section.index - this.half).times((function () {
							this.next();
							}).bind(this));
						direction = 'next';
						}
			}
		
		this.animate(direction);
		},
	
	runEffects: function () {
		
		this.stackSections.bind(this).delay(this.options.duration / 2);
	
		this.running = new Effect.Parallel(
			this.effects.map(function (effect) {
				return new Effect.Parallel([
					new Effect.Morph(effect.section, {
						style: effect.style,
						sync: true,
						delay: 1,
						transition: Effect.Transitions.linear
						}),
					new Effect.Appear(effect.section, {
						to: Math.min(effect.section.ratio, 1),
						sync: true
						})
					], {
						sync: true,
						beforeStart: function () {							
							}
						});
				}), {
					duration: this.options.duration,
					afterFinish: (function () {
						this.running = false;					
						}).bind(this)
					});
		},
		
	stackSections: function () {
		this.sections.each(function (section) {
			section.setStyle({zIndex: section.stackIndex});
			});
		},
		
	indexSections: function () {	
		this.sections.each((function (section, index) {
			section.index 			= index;
			section.modifier 		= Math.abs(Math.abs((section.index - (this.sections.size() - 1) / 2)) - this.half);
			
			section.ratio 			= Math.round(((section.modifier * this.ratioStep) + this.options.ratio) * 100) / 100;			
						
			section.width 			= 10//Math.min(Math.round(this.maxDimensions.width * section.ratio), this.maxDimensions.width);//Правил я  для торжества, не разбирался
			section.height 			= Math.min(Math.round(this.maxDimensions.height * section.ratio), this.maxDimensions.height);		
			
			section.positionIndex 	= (section.index - (this.sections.size() - 1) / 2);
			section.stackIndex 		= Math.abs(Math.abs((section.index - (this.sections.size() - 1) / 2)) - this.half) + 1;					
			
			section.left 			= section.top = Math.round((this.half + section.positionIndex) * this.positionStep);
			section.opacity			= Math.min(section.ratio, 1);			
			}).bind(this));
		}	
});
	
Showcase.Horizontal = Class.create(Showcase, {
	
	animate: function (direction) {
		this.indexSections();
		this.effects = new Array();		
		this.sections.each((function (section) {
			var style = {
				left: 		section.left + '%', 
				top:		'40%',
				marginTop:	-Math.abs(section.height / 2) + 'px',
				width: 		section.width + 'px', 
				height: 	section.height + 'px'
				};
			
			if (section.left == 0) {
				style.marginLeft = '0px';
				} else if (section.left == 50) {
					style.marginLeft 		= -Math.round(section.width / 2) + 'px';					
					} else if (section.left == 100) {
						style.marginLeft 	= -section.width + 'px';
						} else {
							style.marginLeft = -Math.round(section.width / 2) + 'px';
							}
			
			this.effects.push({section: section, style: style});		
			}).bind(this));

		this.currentIndex = this.sections[this.half].initialIndex;			
		
		this.runEffects();
		}
	
	});