var Subpage = {
	bgRatio:2190/1550,
	minWidth:1090,
	footerHeight:40,
	
	resizeBg: function() {
		var bgImage = $('bgImage');
		var wWidth = document.viewport.getWidth();
		var wHeight = document.viewport.getHeight() - Subpage.footerHeight;
		$('background').style.height = wHeight + 'px';
		
		var windowRatio = wWidth / wHeight;
		Subpage.minHeight = Subpage.minWidth / Subpage.bgRatio;
		
		// if the image would be too short for the page
		if (windowRatio < Subpage.bgRatio) {
			//console.log('fill height');
			
			// reset to 0 margin
			bgImage.style.marginTop = 0;
			
			if (wHeight < Subpage.minHeight) {
				wHeight = Subpage.minHeight;
			}
			bgImage.style.height = (wHeight) + 'px';
			var newWidth = wHeight * Subpage.bgRatio;
			bgImage.style.width = newWidth + 'px';
		}
		else {
			//console.log('fill width');
			// fill the width and let the height be auto
			bgImage.style.width = '100%';
			bgImage.style.height = 'auto';
			
			// get height in pixels
			var imageHeight = $('background').offsetWidth / Subpage.bgRatio;
			
			// vertically center image
			if (!location.href.match(/version2/)) {
				bgImage.style.marginTop = ((imageHeight - wHeight) / 2 * -1) + 'px'; 
			}
		}
	},
	
	initEvents: function() {
		
		Subpage.resizeBg();
		
		Event.observe(window, 'resize', Subpage.resizeBg);
		
		if (location.href.match(/version2/)) {
			Event.observe(window, 'resize', Subpage.resizeWindow);
		}
		Event.observe(window, 'resize', Subpage.animateHeight);
		
		Subpage.readingImage = Ext.get('readingImage');
		
		if (Subpage.readingImage != null) {
			// do some preloading
			Subpage.readingImages = new Array(
					'/images/seasons/Summer Reading Programs.png',
					'/images/seasons/Fall Reading Programs.png',
					'/images/seasons/Spring Reading Programs.png'
			);
			Subpage.readingImagesTime = new Array(
					5,
					2,
					2
			);
			Papercut.PreloadImages(Subpage.readingImages);
			
			Subpage.readingImageSetTimer();
		}
		
		setTimeout(Subpage.animateHeight, 1000);
		
		if (location.href.match(/version2/)) {
			Subpage.resizeWindow();
			// append version 2 to all links
			var allLinks = Ext.select('a');
			for (var i = 0; i < allLinks.elements.length; i++) {
				var href = allLinks.elements[i].href;
				if (href.match(/\/pages\//) && !href.match(/version2/)) {
					allLinks.elements[i].href += '?version2';
				}
			}
		}
		
		//FLIR.replace('#subHeading', new FLIRStyle({ cFont:'default' }) );
	},
	
	resizeWindow: function() {
		var width = 970;
		var height = width / Subpage.bgRatio;
		window.resizeTo(width,height);
		return;
		if (!location.href.match(/version2/)) {
			setTimeout(function() {d('set listener');Event.observe(window, 'resize', Subpage.resizeWindowTimed);}, 1000);
		}
	},
	
	getOuterSize: function() {
		var size = {};
		if (window.outerHeight) {
			size.width = window.outerWidth;
			size.height = window.outerHeight;
		}
		else if (document.documentElement) {
			size.width = screen.availWidth - document.body.offsetWidth;
			size.height = screen.availHeight - document.body.offsetHeight;
			d(screen.availHeight + ' ' + document.body.offsetHeight);
		}
		return size;
	},
	
	resizeWindowProportional: function() {
		d('resizeWindowProportional');
		var size = Subpage.getOuterSize();
		var height = size.height;
		var width = (height) * Subpage.bgRatio;
		d(width + ' ' + height);
		Event.stopObserving(window, 'resize', Subpage.resizeWindowTimed);
		d('before resize');
		window.resizeTo(width,height);
		d('after resize');
	},
	
	resizeTimer:false,
	resizeWindowTimed: function(e) {
		d('clear timer');
		clearTimeout(Subpage.resizeTimer);
		d('set timer');
		Subpage.resizeTimer = setTimeout(Subpage.resizeWindowProportional, 1000);
	},
	
	currentReadingImageIndex:0,
	nextReadingImage: function() {
		Subpage.currentReadingImageIndex = ((Subpage.currentReadingImageIndex + 1) % Subpage.readingImages.length);
		Subpage.readingImage.dom.src = Subpage.readingImages[Subpage.currentReadingImageIndex];
		Subpage.readingImageSetTimer();
	},
	readingImageSetTimer: function() {
		setTimeout(Subpage.nextReadingImage, Subpage.readingImagesTime[Subpage.currentReadingImageIndex]*1000);
	},
	
	animateHeight: function(e) {
		var contentWrap = Ext.get('contentWrap');
		if (contentWrap != null) {
			if (e != null) {
				if (e.type == 'click') {
					
				}
				else if (e.type == 'resize') {
					if (contentWrap.getStyle('overflow') == 'hidden') {
						return;
					}
				}
			}
			
			var contentWrapHeight = contentWrap.getHeight();
			contentWrap.setStyle({
				height:contentWrapHeight + 'px'
			});
			
			var contentBox = Ext.get('contentBox');
			contentBox.removeClass('contentBox');
			var newHeight = contentBox.getHeight() + contentWrapHeight;
			if (newHeight == 0 || newHeight > Subpage.getContentHeight()) {
				newHeight = Subpage.getContentHeight();
			}
			
			contentWrap.animate({
				height:{
					to:newHeight,
					from:contentWrap.getHeight()
				}
			}, .5, function() {
				contentWrap.setStyle({
					overflow:'auto'
				});
			}, 'easeOut', 'run');
		}
	},
	
	getContentHeight: function() {
		var wHeight = document.viewport.getHeight() - Subpage.footerHeight;
		var newHeight = wHeight - parseInt(Ext.get('subpageContentContainer').getStyle('top'));
		return newHeight - 100;
	}
};

Event.observe(window, 'load', Subpage.initEvents);