BANNER = {
    index: 1,
    delay: 5, //seconds
    duration: 1, //seconds
	on: true,
	initialize: function (bannerNames) {
		if ($defined($('banner-outer'))) {
			BANNER.bannerNames = bannerNames;
			BANNER.numberOfBanners = bannerNames.length;
			BANNER.loadedBanners = [];
			BANNER.container = $('banner-outer');
			BANNER.width = 593;
			BANNER.bannerTitle = $('banner-title');
			BANNER.innerContainer = new Element('div', {'id': 'banner-inner'}).injectInside(BANNER.container);
			BANNER.imageFX = new Fx.Styles(BANNER.innerContainer, {duration: BANNER.duration * 2600, transition: Fx.Transitions.quadOut});
			BANNER.textFX = new Fx.Styles(BANNER.bannerTitle, {duration: BANNER.duration * 1300, transition: Fx.Transitions.sineOut});

			BANNER.preload(bannerNames);
			BANNER.next();
		}
	},
	next: function () {
		var nextBanner = BANNER.bannerNames[(BANNER.index++ % BANNER.numberOfBanners)];
		if (!BANNER.loadedBanners.contains(nextBanner)) {
			new Asset.images(['images/banner_' + nextBanner + '.jpg', 'images/title_banner_' + nextBanner + '.gif'], {
				onComplete: function () {
					BANNER.loadedBanners.include(nextBanner);
					BANNER.setBanner(nextBanner);
				}
			});
		}
		else {
			BANNER.setBanner(nextBanner);
		}
	},
	setBanner: function (bannerName) {
		BANNER.textFX.start({
			'margin-left': [65, 0],
			'opacity': [0.9999, 0]
		}).chain(function () {
			BANNER.bannerTitle.setStyle('background-image', 'url(images/title_banner_' + bannerName + '.gif)');
			BANNER.textFX.start({
				'margin-left': [80, 65],
				'opacity': [0, 0.9999]
			});
		});
		BANNER.innerContainer.setStyles({
			'background-image': 'url(images/banner_' + bannerName + '.jpg)',
			'display': 'block'
		});
		BANNER.imageFX.start({
			'margin-left': [BANNER.width, 0],
			'width': [0	, BANNER.width],
			'opacity': [0, 0.9999]
		}).chain(function () {
			BANNER.container.setStyle('background-image', 'url(images/banner_' + bannerName + '.jpg)');
			BANNER.innerContainer.setStyles({
				'display': 'none',
				'margin-left': BANNER.width + 'px',
				'width': '0px',
				'opacity': 0
			});
			setTimeout('BANNER.next()', BANNER.delay * 1000);
		});
	},
	preload: function (bannerNames) {
		for (var i=0; i < bannerNames.length; i++) {
			var nextBanner = bannerNames[i];
			new Asset.images(['images/banner_' + nextBanner + '.jpg', 'images/title_banner_' + nextBanner + '.gif'], {
				onComplete: function () {
					BANNER.loadedBanners.include(nextBanner);
				}
			});
		};
	}
};
var PAGES = {
	initialize: function () {
		PAGES.cache = new Hash();
		var temp = new Element('div');
		new Ajax('pages.php', {
			method: 'get',
			update: temp,
			onComplete: function () {
				temp.getElements('div.page').each(function(page) {
					var title = page.getProperty('title');
					page.setProperty('id', 'content');
					PAGES.cache.set(title, page);
				});
				PAGES.hijackLinks();
			}
		}).request();
	},
	hijackLinks: function () {
		$$('a').each(function (a) {
			a.addEvent('click', function (e) {
				var href = a.getProperty('href');
				$('banner').setStyle('display', (href.indexOf('projects') == -1) ? 'block' : 'none');
				if (PAGES.cache.hasKey(href)) {
					new Event(e).stop();

					
					var oldContent = $('main').getElement('#content');
					var newContent = PAGES.cache.get(href);
					
					oldContent.replaceWith(newContent);
					newContent.setProperty('id', 'content');
				}
			});
		});
	}
};
var PROJECT = {
	views: {},
	currentIndex: 0,
	parseViews: function () {
		var views = $$('dl');
		var caption = $('project').getElement('p');
		var address = $('address');
		
		PROJECT.address = address.getText();
		address.remove();
		
		PROJECT.caption = caption.getText();
		caption.remove();

		views.each(function (view, i) {
			var title = view.getElement('dt');
			var image = view.getElement('dd').getElement('img');
			PROJECT.views[i] = {
				'title': title.getText(),
				'image': image.getProperty('src')
			}
			view.remove();
		});
		PROJECT.constructViewer();
		PROJECT.showView(0);
	},
	constructViewer: function () {
		var container = $('project').getElement('.container');
		
		var viewer = new Element('div', {
			'id': 'viewer'
		}).injectInside(container);
		
		var imagebox = new Element('div', {
			'id': 'viewer_imagebox'
		}).injectInside(viewer);
		
		var title = new Element('h2', {
			'id': 'viewer_title'
		}).injectInside(viewer);
		
		var caption = new Element('p', {
			'id': 'viewer_caption'
		}).setText(PROJECT.caption).injectInside(viewer);
		
		PROJECT.buildController();
	},
	showView: function (index) {
		var buttons = $('viewer_controls').getElements('a');
		buttons[PROJECT.currentIndex + 1].setOpacity(0.2);
		
		var view = PROJECT.views[index];
		$('viewer_imagebox').setStyle('background-image', 'url(' + view.image + ')');
		$('viewer_title').setText(PROJECT.address + ' (' + view.title + ')');
		
		PROJECT.currentIndex = index;
		buttons[PROJECT.currentIndex + 1].setOpacity(0.8);
	},
	buildController: function () {
		var controller = new Element('div', {
			'id': 'viewer_controller',
			'styles': {
				'opacity': 0.4
			}
		}).injectInside('viewer_imagebox');
		
		var controls = new Element('ul', {
			'id': 'viewer_controls',
			'styles': {'width': '70px'}
		}).injectInside(controller);
		
		var controllerFX = new Fx.Style(controller, 'opacity', {wait: false, duration: 200});
		$('viewer_imagebox').addEvents({
			'mouseenter': function () {
				controllerFX.start(0.8);
			},
			'mouseleave': function () {
				controllerFX.start(0.4);
			}
		});
		
		var newbutton = new Element('a', {'styles': {'opacity': 0.3}});
		var projectName = $$('title').getLast().getText();
		
		newbutton.clone().setProperties({
			'class': 'previous',
			'title': 'Previous View',
			'href': 'previous'
		}).injectInside(new Element('li').injectInside(controls));
		
		
		$each(PROJECT.views, function(view, i){
			controls.setStyle('width', controls.getStyle('width').toInt() + 35);
			newbutton.clone().setProperties({
				'class': 'bullet',
				'title': view.title,
				'href': 'projects/' + projectName + '/' + (i.toInt() + 1)
			}).injectInside(new Element('li').injectInside(controls));
		});
		
		newbutton.clone().setProperties({
			'class': 'next',
			'title': 'Next View',
			'href': 'next'
		}).injectInside(new Element('li').injectInside(controls));
		
		var buttons = $$('#project #viewer_controller ul li a');
		buttons.each(function (button, i) {
			button.addEvents({
				'mouseenter': function () {button.setOpacity(0.8)},
				'mouseleave': function () {
					if (PROJECT.currentIndex + 1 != i) {
						button.setOpacity(0.3)
					};
				},
				'click': function (e) {
					new Event(e).stop();
					var index = button.getProperty('href').split('/').getLast();
					var numberOfViews = controls.getElements('li').length - 2;
					var newIndex = 0;
					if (index == 'previous') {
						newIndex = (numberOfViews + PROJECT.currentIndex - 1) % numberOfViews;
					}
					else if (index == 'next') {
						newIndex = (PROJECT.currentIndex + 1) % numberOfViews;
					}
					else {
						newIndex = index.toInt() - 1;
					}
					PROJECT.showView(newIndex);
				}
			});
		});
	}
};
window.addEvents({
	'domready': function () {
		if ($defined($('project'))) {
			PROJECT.parseViews();
		}
	},
	'load': function () {
		if ($defined('banner')) {
			var banners = ['stirling', 'cloverdale', 'rivervale', 'balga', 'nollamara', 'aquavista'];
			BANNER.initialize(banners);
		};
	}
});
// window.addEvent('domready', function () {
// 	if ($defined('project')) {
// 		PROJECT.parseViews();
// 	}
// });	
// window.addEvent('load', function () {
// 	if ($defined('banner')) {
// 		var banners = ['stirling', 'cloverdale', 'rivervale', 'balga', 'nollamara', 'aquavista'];
// 		BANNER.initialize(banners);
// 	};
// });