/**
 * @author Jacob Tews <jacob [at] webteks [dot] com>
 * @version $Id: Header.class.js 202 2008-08-08 17:29:21Z jake $
 */
var Header = new Class({
	animationLoop: null,
	animationPicDisplay: 4000,
	animationTween: 750,
	container: null,
	content: null,
	contentSuffolk: null,
	contentVB: null,
	currentImageIndex: 0,
	imgPath: 'images/homepage/',
	imagePaths: [],
	imageTexts: [],
	images: [],
	tourBox: null,
	tourIndex: 0,
	tourTitle: null,
	tourContent: null,
	tourMode: '',
	tourPlaces: [],
	tourImagePaths: [],
	tourImages: [],
	tourImageIndex: 0,
	tourAnimationLoop: null,
	
	
	initialize: function (container) {
		this.container = $(container);
		//this.contentSuffolk = new TourContent();
		//this.contentVB = new TourContent();
		/*
		this.imagePaths = [
			this.imgPath + '01.jpg',
			this.imgPath + '02.jpg',
			this.imgPath + '03.jpg',
			this.imgPath + '04.jpg',
			this.imgPath + '05.jpg',
			this.imgPath + '06.jpg',
			this.imgPath + '07.jpg',
			this.imgPath + '08.jpg'
		];
		this.loadImages();
		*/
	},
	/************************************************************************/
	loadImages: function () {
		// JS is pass by reference.. this lets me use loadedImages without 
		// trying to bind with `this' in onProgress.
		var container = this.container;
		var imagePaths = this.imagePaths;
		var loadedImages = this.images;
		var progressSet = this.progressSet.bind(this);
		var texts = this.imageTexts;
		this.progressCreate();
		new Asset.images(this.imagePaths, {
			onProgress: function (i) {
				// Bits below added to fade text in and out
				this.text = new Element('div');
				this.text.setText(texts[imagePaths.indexOf(this.src)]);
				this.text.setStyles({
					'position':'absolute',
					'top':10,
					'left':300,
					'width':200,
					'opacity':0,
					'font-size':'18px',
					'font-weight':'bold',
					'line-height':'32px',
					'color':'#d6b582'
				});
				container.adopt(this.text);
				// This should take care of the flickering issue:
				this.setStyle('opacity', 0);
				this.inject(container);
				this.setStyles({
					'position':'absolute',
					'left':4,
					'opacity': 0
				});
				this.inject(container);
				this.setStyle('top', container.getCoordinates().height - this.height);
				loadedImages[imagePaths.indexOf(this.src)] = this;
				progressSet(i);
			},
			onComplete: this.assetComplete.bind(this)
		});
	},
	/**
	 * this -> Header
	 */
	assetComplete: function () {
		this.currentImageIndex = this.images.length - 1; // Causes wrap-around on animationStart()
		this.progressDestroy();
		this.makeButtons.delay(100, this);
		this.animationStart.delay(500, this);
	},
	/************************************************************************/
	animationStart: function () {
		this.animationNext();
		this.animationLoop = this.animationNext.periodical(this.animationPicDisplay, this);
	},
	animationGoto: function (i) {
		if (i != this.currentImageIndex) {
			this.images[this.currentImageIndex].effect('opacity', {duration:this.animationTween}).start(0);
			this.images[this.currentImageIndex].text.effect('opacity', {duration:this.animationTween}).start(0);
			this.images[i].effect('opacity', {duration:this.animationTween}).start(1);
			this.images[i].text.effect('opacity', {duration:this.animationTween}).start(1);
		}
		this.currentImageIndex = i;
	},
	animationNext: function () {
		var nextIndex = this.currentImageIndex + 1; // no ++ here
		if (nextIndex == this.images.length) {
			nextIndex = 0; // cycle
			this.animationStop(); // Comment to make animation loop
		}
		this.animationGoto(nextIndex);
	},
	animationStop: function () {
		$clear(this.animationLoop);
	},
	/************************************************************************/
	makeButtons: function () {
		this.container.appendChild(new Element('div', { 'class':'btn-suffolk-tour'})).addEvent('click', this.startSuffolkTour.bindWithEvent(this));
		this.container.appendChild(new Element('div', { 'class':'btn-vb-tour'})).addEvent('click', this.startVBTour.bindWithEvent(this));
	},
	hideButtons: function () {
		$E('.btn-suffolk-tour', this.container).remove();
		$E('.btn-vb-tour', this.container).remove();
	},
	startSuffolkTour: function () {
		this.tourMode = 'suffolk';
		this.tourPlaces = [
			this.tourShowroom,
			this.tourSales,
			this.tourService,
			this.tourAccessories
		];
		this.animationStop();
		this.hideButtons();
		this.animationGoto(1);
		this.content = this.contentSuffolk;
		this.showplaceBox = this.container.appendChild(new Element('div', { 'class':'showplace-suffolk'})).appendChild(new Element('div', {'class':'inner'}));
		this.tourBox = this.container.appendChild(new Element('div', {'class':'fly-in-suffolk'})).appendChild(new Element('div', {'class':'inner'}));
		this.showBoxes.delay(this.animationTween, this);
	},
	startVBTour: function () {
		this.tourMode = 'vb';
		this.tourPlaces = [
			this.tourShowroom,
			this.tourSales,
			this.tourCafe,
			this.tourPlayroom,
			this.tourAccessories
		];
		this.animationStop();
		this.hideButtons();
		this.animationGoto(0);
		this.content = this.contentVB;
		this.showplaceBox = this.container.appendChild(new Element('div', { 'class':'showplace-vb'})).appendChild(new Element('div', {'class':'inner'}));
		this.tourBox = this.container.appendChild(new Element('div', {'class':'fly-in-vb'})).appendChild(new Element('div', {'class':'inner'}));
		this.showBoxes.delay(this.animationTween, this);
	},
	showBoxes: function () {
		this.tourIndex = 0;
		this.tourTitle = this.tourBox.appendChild(new Element('div', {'class':'title'}));
		this.tourContent = this.tourBox.appendChild(new Element('div', {'class':'content'}));
		this.tourAnimation = this.tourBox.appendChild(new Element('div', {'class':'photo'}));
		this.tourPlaces[this.tourIndex].bind(this)();
		with (this.tourBox) {
			appendChild(new Element('a', {'class':'close'})).addEvent('click', this.closeBoxes.bindWithEvent(this));
			appendChild(new Element('a', {'class':'previous'})).addEvent('click', this.tourPrevious.bindWithEvent(this));
			appendChild(new Element('a', {'class':'next'})).addEvent('click', this.tourNext.bindWithEvent(this));
			appendChild(new Element('a', {'class':'showroom'})).addEvent('click', this.tourShowroom.bindWithEvent(this));
			appendChild(new Element('a', {'class':'sales-offices'})).addEvent('click', this.tourSales.bindWithEvent(this));
			appendChild(new Element('a', {'class':'service-center'})).addEvent('click', this.tourService.bindWithEvent(this));
			appendChild(new Element('a', {'class':'cafe'})).addEvent('click', this.tourCafe.bindWithEvent(this));
			appendChild(new Element('a', {'class':'playroom'})).addEvent('click', this.tourPlayroom.bindWithEvent(this));
			appendChild(new Element('a', {'class':'accessories-center'})).addEvent('click', this.tourAccessories.bindWithEvent(this));
		}
		this.showplaceBox.setText(this.content.get('showplace'));
		this.showplaceFx = new Fx.Style(this.showplaceBox, 'top', {});
		this.tourFx = new Fx.Style(this.tourBox, 'left', {});
		this.showplaceFx.returnStart = this.showplaceBox.getStyle('top').toInt();
		this.tourFx.returnStart = this.tourBox.getStyle('left').toInt();
		this.showplaceFx.start(0);
		this.tourFx.start(0);
	},
	closeBoxes: function () {
		this.showplaceFx.start(this.showplaceFx.returnStart).chain(function () {
			this.showplaceBox.remove();
		}.bind(this));
		this.tourFx.start(this.tourFx.returnStart).chain(function () {
			this.tourBox.remove();
		}.bind(this));
		this.makeButtons();
		//this.animationStart(); // Uncomment to restart animation
		this.tourAnimationStop();
		this.animationGoto(0);
	},
	tourPrevious: function () {
		if (this.tourIndex == 0) {
			this.tourIndex = this.tourPlaces.length;
		}
		this.tourPlaces[--this.tourIndex].bind(this)();
	},
	tourNext: function () {
		if (this.tourIndex == this.tourPlaces.length - 1) {
			this.tourIndex = -1;
		}
		this.tourPlaces[++this.tourIndex].bind(this)();
	},
	tourShowroom: function () {
		if (this.tourMode == 'suffolk') {
			this.tourImagePaths = [
				this.imgPath + 'suffolk-showroom01.jpg'
			];
		} else {
			this.tourImagePaths = [
				this.imgPath + 'vb-showroom01.jpg',
				this.imgPath + 'vb-showroom02.jpg',
				this.imgPath + 'vb-showroom03.jpg',
				this.imgPath + 'vb-showroom04.jpg'
			];
		}
		this.tourIndex = this.tourPlaces.indexOf(this.tourShowroom);
		this.tourTitle.setProperty('class', 'title showroom');
		this.tourContent.setText(this.content.get('showroom'));
		this.tourAnimationStop();
		this.tourLoadImages();
	},
	tourSales: function () {
		if (this.tourMode == 'suffolk') {
			this.tourImagePaths = [
				this.imgPath + 'suffolk-sales01.jpg',
				this.imgPath + 'suffolk-sales02.jpg',
				this.imgPath + 'suffolk-sales03.jpg',
				this.imgPath + 'suffolk-sales04.jpg'
			];
		} else {
			this.tourImagePaths = [
				this.imgPath + 'vb-sales01.jpg',
				this.imgPath + 'vb-sales02.jpg',
				this.imgPath + 'vb-sales03.jpg'
			];
		}
		this.tourIndex = this.tourPlaces.indexOf(this.tourSales);
		this.tourTitle.setProperty('class', 'title sales-office');
		this.tourContent.setText(this.content.get('sales'));
		this.tourAnimationStop();
		this.tourLoadImages();
	},
	tourService: function () {
		if (this.tourMode == 'suffolk') {
			this.tourImagePaths = [
				this.imgPath + 'suffolk-service01.jpg',
				this.imgPath + 'suffolk-service02.jpg',
				this.imgPath + 'suffolk-service03.jpg'
			];
		} else {
			this.tourImagePaths = [
				this.imgPath + 'vb-showroom01.jpg',
				this.imgPath + 'vb-showroom02.jpg',
				this.imgPath + 'vb-showroom03.jpg',
				this.imgPath + 'vb-showroom04.jpg'
			];
		}
		this.tourIndex = this.tourPlaces.indexOf(this.tourService);
		this.tourTitle.setProperty('class', 'title service-center');
		this.tourContent.setText(this.content.get('service'));
		this.tourAnimationStop();
		this.tourLoadImages();
	},
	tourCafe: function () {
		if (this.tourMode == 'suffolk') {
			this.tourImagePaths = [
			];
		} else {
			this.tourImagePaths = [
				this.imgPath + 'vb-cafe01.jpg',
				this.imgPath + 'vb-cafe02.jpg',
				this.imgPath + 'vb-cafe03.jpg',
				this.imgPath + 'vb-cafe04.jpg'
			];
		}
		this.tourIndex = this.tourPlaces.indexOf(this.tourCafe);
		this.tourTitle.setProperty('class', 'title cafe');
		this.tourContent.setText(this.content.get('cafe'));
		this.tourAnimationStop();
		this.tourLoadImages();
	},
	tourPlayroom: function () {
		if (this.tourMode == 'suffolk') {
			this.tourImagePaths = [
			];
		} else {
			this.tourImagePaths = [
				this.imgPath + 'vb-playroom01.jpg',
				this.imgPath + 'vb-playroom02.jpg',
				this.imgPath + 'vb-playroom03.jpg',
				this.imgPath + 'vb-playroom04.jpg'
			];
		}
		this.tourIndex = this.tourPlaces.indexOf(this.tourPlayroom);
		this.tourTitle.setProperty('class', 'title playroom');
		this.tourContent.setText(this.content.get('playroom'));
		this.tourAnimationStop();
		this.tourLoadImages();
	},
	tourAccessories: function () {
		if (this.tourMode == 'suffolk') {
			this.tourImagePaths = [
				this.imgPath + 'suffolk-accessories01.jpg'
			];
		} else {
			this.tourImagePaths = [
				this.imgPath + 'vb-accessories01.jpg',
				this.imgPath + 'vb-accessories02.jpg'
			];
		}
		this.tourIndex = this.tourPlaces.indexOf(this.tourAccessories);
		this.tourTitle.setProperty('class', 'title accessories-center');
		this.tourContent.setText(this.content.get('accessories'));
		this.tourAnimationStop();
		this.tourLoadImages();
	},
	/************************************************************************/
	tourLoadImages: function () {
		var container = this.tourAnimation;
		this.tourImages = [];
		var loadedImages = this.tourImages;
		new Asset.images(this.tourImagePaths, {
			onProgress: function (i) {
				this.setStyle('opacity', 0);
				this.inject(container);
				var urlIndex = this.src.replace(/.*(\d+)\.jpg/, '$1') - 1;
				loadedImages[urlIndex] = this;
			},
			onComplete: this.tourAnimationStart.bind(this)
		});
	},
	tourAnimationStart: function () {
		this.tourImageIndex = this.tourImages.length - 1;
		if (this.tourImageIndex == 0) {
			this.tourImages[0].effect('opacity', {duration:this.animationTween}).start(1);
		} else if (this.tourImageIndex == -1) {
			return;
		}
		this.tourAnimationNext();
		this.tourAnimationLoop = this.tourAnimationNext.periodical(this.animationPicDisplay, this);
	},
	tourAnimationGoto: function (i) {
		if (i != this.tourImageIndex) {
			this.transition1 = this.tourImages[this.tourImageIndex].effect('opacity', {duration:this.animationTween}).start(0);
			this.transition2 = this.tourImages[i].effect('opacity', {duration:this.animationTween}).start(1);
		}
		this.tourImageIndex = i;
	},
	tourAnimationNext: function () {
		var nextIndex = this.tourImageIndex + 1; // no ++ here
		if (nextIndex == this.tourImages.length) nextIndex = 0; // cycle
		this.tourAnimationGoto(nextIndex);
	},
	tourAnimationStop: function () {
		$clear(this.tourAnimationLoop);
		if (this.transition1) this.transition1.stop();
		if (this.transition2) this.transition2.stop();
		this.tourAnimation.empty();
	},
	/************************************************************************/
	progressCreate: function () {
		return;
		var progress = new Element('div', {id:'progress-bar'});
		var filler = new Element('span');
		filler.setStyle('width', 0);
		progress.appendChild(filler);
		this.container.appendChild(progress);
	},
	progressSet: function (pos) {
		return;
		var totalImages = this.imagePaths.length;
		var filler = $E('span', $('progress-bar'));
		var percent = ((pos + 1) / totalImages * 100).toInt();
		filler.setStyle('width', percent + '%');
		filler.setText(percent + '%');
	},
	progressDestroy: function () {
		return;
		$('progress-bar').remove();
	}
});