var Showroom = new Class({
	status: true,
	initialize: function() {
		this.limit = 24;
		this.container = $('showroom');
		this.pos = 0;
		// User can or cannot click on the control button
		this.click = true;
		// If user click while change, states it needs to change
		this.next = false;
		// If while loading image and user wants another image, pause will stop the first preload
		this.pause = false;
		// Start process (done only once)
		this.start();
	},
	start: function() {
		var obj = this;
		this.boards = new Array;
		// TMP boards (9 slices)
		if (Browser.Engine.trident && Browser.Engine.version==4) {
			new Element('div', {'class': 'tmpboard', 'styles': {
				'left': 0,
				'width': 657,
				'opacity': 0
			}}).inject(this.container);
		} else {
			for(j=0; j<19; j++) {
				new Element('div', {'class': 'tmpboard', 'styles': {
					'left': j*36,
					'width': 0
				}}).inject(this.container);
			}
		}
		
		// Control buttons (20 images)
		for(i=0; i<this.limit; i++) {
			var a = new Element('a', {'class': 'control', 'href': '#show'+(i+1), 'html': 'show'+(i+1), 'styles': {
				'left': 136+(16*i)
			}}).inject(this.container).addEvent('click', function(e) {
				e.stop();
				// Fetch position
				obj.pos = this.get('href').substr(5).toInt()-1;
				// If image is not currently changing
				if (obj.click) {
					// Focus
					obj.container.getElement('a.focus').removeClass('focus');
					this.addClass('focus');
					// Pause if preload is being done
					obj.pause = true;
					// User cannot reclick right away
					obj.click = false;
					// Preload image
					obj.preload();
				// Else state a new image must change
				} else {
					obj.next = true;
				}
				
			});
			// State first focus
			if (i==0) a.addClass('focus');
		}
		
		// Actiavte first preload
		this.preload();
	},
	preload: function() {
		var obj = this;
		
		// Don't start another preload
		if ($defined(obj.theTimer)) $clear(obj.theTimer);
		
		// Change position (must be between 1 and 20)
		this.pos = (this.pos+1)>this.limit ? 1 : this.pos+1;
		
		// Prepare new image path
		var newImg = '/images/pages/showrooms/show'+this.pos+'.png';
		// Loads 10 time the same images (9 slices and 1 final) mootools like to have it seperatly to create as much elements as needed.
		if (!(Browser.Engine.trident && Browser.Engine.version==4)) {
			var newImgs = new Array;
			for(i=0; i<this.limit; i++) newImgs.push(newImg);
		// Only IE6 needs one image or it will fail terribly as it really loads the same image as new 10 times
		} else {
			var newImgs = newImg;
		}
		
		// Unlock the pause
		this.pause = false;
		
		// Preload images
		this.images = new Asset.images(newImgs, {onComplete: function() {
			if (Browser.Engine.trident && Browser.Engine.version==4) {
				var board = $(document.body).getElements('div.tmpboard')[0].empty().setStyle('opacity', 0);
				obj.images[0].inject(board);
			} else {
				for(j=0; j<19; j++) {
					// Set tmp board to width 0
					var board = $(document.body).getElements('div.tmpboard')[j].empty().setStyle('width', 0);
					// inject image in tmp board
					obj.images[j].inject(board).setStyle('left', -(j*36));
				}
			}
			// Start fading only if in the meantime, the user didn't click on another button
			if (!obj.pause) {
				// Preload is done so we can fade in the new image
				obj.next = false;
				obj.fade();
			}
		}});
	},
	fade: function(cur) {
		// User cannot click
		this.click = false;
		// Pause is on so we cannot active anhoter fade just yet from preload() function
		this.pause = true;
	
		// Focus
		this.container.getElement('a.focus').removeClass('focus');
		this.container.getElement('a[href*=show'+this.pos+']').addClass('focus');
	
		var obj = this;
		var divs = $(document.body).getElements('div.tmpboard');
		
		$each(divs, function(div, index) {
			if (Browser.Engine.trident && Browser.Engine.version==4) {
				// Prepare tween
				var tween = function() {
					new Fx.Tween(div, {property: 'opacity', duration: 1000, onComplete: function() {
						if (index==divs.length-1) {
							// Replaces old img
							obj.images[0].replaces($('showroom').getElement('img'));
							// Restart preload in 3.5 seconds
							if (!obj.next) obj.theTimer = obj.preload.delay(2500, obj);
							// If user did click while it was changing, change to what user wants now
							else obj.preload();
							// User can click
							obj.click = true;
							// No pause is needed
							obj.pause = false;
						}
					}}).start([0, 1]);
				}
			} else {
				// Prepare tween
				var tween = function() {
					new Fx.Tween(div, {property: 'width', duration: 1000, onComplete: function() {
						if (index==divs.length-1) {
							// Replaces old img
							if (Browser.Engine.trident && Browser.Engine.version==4)
								obj.images[0].replaces($('showroom').getElement('img'));
							else obj.images[19].replaces($('showroom').getElement('img'));
							// Restart preload in 3.5 seconds
							if (!obj.next) obj.theTimer = obj.preload.delay(2500, obj);
							// If user did click while it was changing, change to what user wants now
							else obj.preload();
							// User can click
							obj.click = true;
							// No pause is needed
							obj.pause = false;
						}
					}}).start([0, 36]);
				}
			}
			// Delay tween effect
			tween.delay(50*index);
		});
	}
});

var showroom;

window.addEvent('domready', function() {
	showroom = new Showroom;
});