var AluminiumChair = Class.create();
AluminiumChair.prototype = {

	initialize: function() {
		
		this.hidePanels();
		this.showLoading();
		
		Event.observe(window, 'load', this.showPanels.bindAsEventListener(this));	
		
		if(Prototype.Browser.IE) {
		
			this.showPanels();
		}
	},
	
	hidePanels: function() {
	
		var panels = $('alu-50-body').getElementsByTagName('div');
		for(var i = 0; i < panels.length; i++) {
		
			$(panels[i]).addClassName('hidden');
		}
	},
	
	showLoading: function() {
	
		var loadingImage = '/_images/aluminium-chair-50/loading-grey.gif';
		if($('alu-50-body').hasClassName('dark')) {
		
			loadingImage =  '/_images/aluminium-chair-50/loading-black.gif';
		}
	
		new Insertion.Top(
				$('alu-50-body'),
				'<p id="alu-50-loading"><img src="' + loadingImage + '" alt="Loading"></p>'
		);		
	},
	
	hideLoading: function() {
	
		if($('alu-50-loading')) {
		
			$('alu-50-loading').remove();
		}
	},
	
	showPanels: function() {
	
		if(this.panels_shown) {

			return false;
		}

        this.panels_shown = true;
	
		this.hideLoading();
		
		var left = 316;
		if($('alu-50-body-first').hasClassName('double')) {
			
			left = 628;
		}
		
		new Effect.SlideAndAppear('alu-50-body-first', {
					x: left,
					afterFinish: function() {
									
						$('alu-50-body-second').style.left = '-312px';
						new Effect.SlideAndAppear('alu-50-body-second', {
								x: 312,
								afterFinish: function() {
								
									if($('alu-50-body-third')) {
									
										$('alu-50-body-third').style.left = '-316px';
										new Effect.SlideAndAppear('alu-50-body-third');
									}
								}
						});
					}
		});
	}
}



var Chapter = Class.create();
Chapter.prototype = {
	
	initialize: function() {
		
		this.chapterImage = $('alu-50-chapter-desc');
		
		var chapterLinks = $('alu-50-chapters').getElementsByTagName('a');
		for(var i = 0; i < chapterLinks.length; i++) {
			
			Event.observe(chapterLinks[i], 'mouseover', this.showDescription.bindAsEventListener(this));
			Event.observe(chapterLinks[i], 'mouseout', this.hideDescription.bindAsEventListener(this));
		}
	},
	
	showDescription: function(e) {
	
		var rollImage = Event.element(e).down('img');
		
		new Insertion.After('alu-50-chapter-desc',
							'<img src="'+ rollImage.src +'" id="__rolled">'
		);
		
		$('alu-50-chapter-desc').remove();
	},
	
	hideDescription: function(e) {
		
		new Insertion.After('__rolled',
							'<img src="'+ this.chapterImage.src +'" id="'+this.chapterImage.id+'">'
		);
		
		$('__rolled').remove();
	}
}



var ImageSlider = Class.create();
ImageSlider.prototype = {

	initialize: function() {
	
		this.showingImage = false;
		this.hidingImage = false;
		this.addExpandableImages();
	},
	
	addExpandableImages: function() {
		
		var expandableImages = $('alu-50-body').getElementsByClassName('expandable');
		for(var i = 0; i < expandableImages.length; i++) {
		
			Event.observe(expandableImages[i], 'mouseover', this.mouseOverImage.bindAsEventListener(this));
			Event.observe(expandableImages[i], 'mouseout', this.mouseOutImage.bindAsEventListener(this));
			Event.observe(expandableImages[i], 'click', this.showImage.bindAsEventListener(this));
		}
	},
	
	mouseOverImage: function(e) {
		
		if(!$('alu-50-expand-image')) {
				
			if(Event.element(e).up('a')) {
			
				var element = Event.element(e).up('a');
			
				new Insertion.Bottom(
					element,
					'<img src="/_images/aluminium-chair-50/image-hover.png" alt="+" id="alu-50-expand-image">'
				);
			}
		}
	},
	
	mouseOutImage: function(e) {
					
		if(Event.element(e).up('a') && Event.element(e).up('a').down('img')) {
		
			var image = Event.element(e).up('a').down('img');
										
			if(!Position.within(image, Event.pointerX(e), Event.pointerY(e)) && $('alu-50-expand-image')) {
				
				$('alu-50-expand-image').remove();
			}
		}
	},
	
	showImage: function(e) {
		
		Event.stop(e);
	
		if(this.showingImage) {
		
			return false;
		}
		
		
		// show some loading thing
		
		var imageSource = Event.element(e).up('a').href;		
		this.showingImage = true;		
									
		var image = new Image();
		image.onload = function() {
		
			this.imageLoaded(imageSource);
		}.bind(this);
	
		image.src = imageSource;
	},
	
	imageLoaded: function(imageSource) {
	
		new Insertion.Bottom(
			$('alu-50-body'),
			'<img src="' + imageSource + '" id="full-image">'
		);
		
		new Effect.Move(
				$('full-image'), {
					x: 944,
					mode: 'relative',
					duration: 1,
					afterFinish: function() {
					
						if($('alu-50-expand-image')) {
			
							$('alu-50-expand-image').remove();
						}					
					
						this.addCloseButton();
					}.bind(this)
				}
		);
	},
	
	hideImage: function(e) {
	
		if(this.hidingImage) {
				
			return false;
		}
	
		this.hidingImage = true;
		
		$('alu-50-close-image').remove();
		$('alu-chair-50-spacer').remove();	
		
		new Effect.Move(
				$('full-image'), {
					x: -944,
					mode: 'relative',
					duration: 1.2,
					afterFinish: function() {
						$('full-image').remove();
						
						this.showingImage = false;
						this.hidingImage = false;					
					}.bind(this)
				}
		);		
		
		Event.stop(e);
	},
	
	addCloseButton: function() {
		
		new Insertion.Bottom(
			$('alu-50-body'),
			'<span id="alu-chair-50-spacer">&nbsp;</span><a href="#" id="alu-50-close-image" style="display: none;"><span>X</span></a>'
		);
				
		Effect.Appear($('alu-50-close-image'), { duration: 1.0 });
			
		Event.observe('alu-50-close-image', 'click', this.hideImage.bindAsEventListener(this));
	}
}



Effect.SlideAndAppear = Class.create();
Object.extend(Object.extend(Effect.SlideAndAppear.prototype, Effect.Base.prototype), {
    
	initialize: function(element) {
	
		var options = Object.extend({
			x: 316
		}, arguments[1] || {});
	
		new Effect.Parallel([
				new Effect.Move($(element), { 
					x: options.x,
					sync: true,
					mode: 'relative'
				}), 
				new Effect.Opacity($(element), { 
						sync: true, 
						from: 0, 
						to: 1 
				}) 
			], { 
				duration: 1,
				delay: (options.x > 316) ? 0 : -0.3,
				afterFinish: options.afterFinish
			}
		);	
	}
});



document.loaded(
	function() {
		new AluminiumChair();
		new Chapter();
	}
);

Event.observe(window, 'load', function() {

	new ImageSlider();
});