var AnimalsGame = new Class({
	
	extend: {
		dimensions: {
			small:  { width:  616, height: 385 },
			medium: { width:  880, height: 550 },
			big:    { width: 1056, height: 660 }
		},
		STAGE: document.getElementById('stage'),
		currentSize: null,
		determineFixedSize: function() {
			if ( $(window).size().x <= 920 || $(window).size().y <= 590 ) {
				AnimalsGame.currentSize = 'small';
			} else if ( $(window).size().x <= 1096 || $(window).size().y <= 700 ) {
				AnimalsGame.currentSize = 'medium';
			} else {
				AnimalsGame.currentSize = 'big';
			}
		},
		buttonsDimensions: {
			small:  { width: 27, height: 27 },
			medium: { width: 39, height: 39 },
			big:    { width: 46, height: 46 }
		}
	},
	
	initialize: function() {
		var this_ = this;
		
		AnimalsGame.determineFixedSize();
		
		if (window.location.search.match(/new-window/)) {
			this.openedInNewWindow = true;
		}
		
		this.soundEffect = new AnimalsGame.SoundEffect({
			game: this
		});
		this.muted = false;
		
		this.stage = AnimalsGame.STAGE;
		
		if ( !AnimalsGame.Actor.STYLESHEET_SUPPORT ) {
			this.setFixedSizeStyles();
		}
	},
	
	setupGame: function() {
		this.soundButton = new AnimalsGame.Actor({
			filename: this.muted ? 'sound-mute' : 'sound',
			path: 'assets/images/buttons',
			dimensions: AnimalsGame.buttonsDimensions,
			click: this.toggleMute.bind(this)
		});
		
		this.setupHomeScreen();
	},
	
	playBackgroundSound: function() {
		this.soundEffect.play('singers', 0, Config.HOME_PAGE_BACKGROUND_SOUND_DURATION * 1000);
	},
	
	toggleMute: function() {
		if (this.muted) {
			this.muted = false;
			if (!this.currentSection) {
				this.playBackgroundSound();
			}
			this.soundButton.changeStyle({ filename: 'sound' });
		} else {
			this.muted = true;
			this.soundEffect.stop();
			this.soundButton.changeStyle({ filename: 'sound-mute' });
		}
	},
	
	setupHomeScreen: function() {
		var this_ = this;
		
		this.soundButton.setPosition({ left: '12%', bottom: '2%' });
		
		if (this_.muted !== true) {
			this_.playBackgroundSound();
		}
		
		this.currentSection = null;
		
		$(document.body).removeClass('section-land').removeClass('section-birds').removeClass('section-water');
		
		var sectionButtons = {
			water: Progress.sections['water'].completed ? 'section-water-completed' : 'section-water',
			birds: Progress.sections['birds'].completed ? 'section-birds-completed' : 'section-birds',
			land:  Progress.sections['land'].completed  ? 'section-land-completed'  : 'section-land'
		};
		
		this.stageElements = [
			
			// background
			new AnimalsGame.Actor({
				filename: 'home',
				extension: 'jpg',
				path: 'assets/images/backgrounds',
				position: { left: '0%', top: '0%' },
				dimensions: AnimalsGame.dimensions,
				interactive: false
			}),
			
			// meta buttons
			new AnimalsGame.Actor({
				filename: 'about',
				path: 'assets/images/buttons',
				position: { left: '2%', bottom: '2%' },
				dimensions: AnimalsGame.buttonsDimensions,
				click: this.showAbout.bind(this)
			}),
			new AnimalsGame.Actor({
				filename: 'help',
				path: 'assets/images/buttons',
				position: { left: '7%', bottom: '2%' },
				dimensions: AnimalsGame.buttonsDimensions,
				click: this.showHelp.bind(this)
			}),
			
			// section buttons
			new AnimalsGame.Actor({
				filename: sectionButtons['land'],
				filenameHover: sectionButtons['land'] + '-hover',
				path: 'assets/images/buttons',
				position: { left: '52%', bottom: '0%' },
				dimensions: {
					small:  { width: 251, height: 134 },
					medium: { width: 359, height: 192 },
					big:    { width: 430, height: 230 }
				},
				click: function() {
					this_.destroy();
					this_.setupSection('land');
					$(document.body).addClass('section-land');
				},
				children: [
					new AnimalsGame.StageElement({
						position: { left: '44%', top: '4%', width: '67%' },
						element:  $E('h2').html('ᓄᓇᒥᐅᑌᑦ, ᐃᒪᕐᒥᐅᑌᑦ ᐆᒪᔪᐃᑦ')._,
						interactive: false,
						autoAppend: false
					})
				]
			}),
			new AnimalsGame.Actor({
				filename: sectionButtons['birds'],
				filenameHover: sectionButtons['birds'] + '-hover',
				path: 'assets/images/buttons',
				position: { left: '62.4%', top: '25.7%' },
				dimensions: {
					small:  { width: 140, height: 105 },
					medium: { width: 200, height: 150 },
					big:    { width: 240, height: 180 }
				},
				click: function() {
					this_.destroy();
					this_.setupSection('birds');
					$(document.body).addClass('section-birds');
				},
				children: [
					new AnimalsGame.StageElement({
						position: { left: '49%', top: '49.9%' },
						element:  $E('h2').html('ᑎᒻᒥᐊᑦ')._,
						interactive: false,
						autoAppend: false
					})
				]
			}),
			new AnimalsGame.Actor({
				filename: sectionButtons['water'],
				filenameHover: sectionButtons['water'] + '-hover',
				path: 'assets/images/buttons',
				position: { left: '1.7%', top: '55%' },
				dimensions: {
					small:  { width: 239, height: 117 },
					medium: { width: 341, height: 167 },
					big:    { width: 410, height: 200 }
				},
				click: function() {
					this_.destroy();
					this_.setupSection('water');
					$(document.body).addClass('section-water');
				},
				children: [
					new AnimalsGame.StageElement({
						position: { left: '8%', top: '3%' },
						element:  $E('h2').html('ᑕᕆᐅᕐᒥᐅᑌᑦ ᑎᓂᓐᓂᒥᐅᑌᓪᓗ ᐆᒪᔪᐃᑦ')._,
						interactive: false,
						autoAppend: false
					})
				]
			})
		];
		
		if (this.openedInNewWindow) {
			this.stageElements.push(
				new AnimalsGame.Actor({
					filename: 'quit',
					path: 'assets/images/buttons',
					position: { right: '2%', bottom: '2%' },
					dimensions: AnimalsGame.buttonsDimensions,
					click: function() {
						window.close();
					}
				})
			);
		}
	},
	
	destroy: function() {
		this.stageElements.each('destroy');
	},
	
	showHelp: function() {
		this.hideDialog();
		
		this.veil = new AnimalsGame.StageElement({
			element:  $E('div')._,
			className: 'veil',
			interactive: false
		});
		this.dialog = new AnimalsGame.Actor({
			filename: 'help-dialog',
			path: 'assets/images/dialogs',
			className: 'dialog home-screen-dialog help-dialog',
			interactive: false,
			autoAppend: false,
			children: [
				new AnimalsGame.Actor({
					filename: 'close-dialog',
					path: 'assets/images/dialogs',
					filenameHover: 'close-dialog-hover',
					className: 'dialog-button close-dialog-button',
					autoAppend: false,
					click: this.hideDialog.bind(this)
				})
			]
		});
		
		AnimalsGame.OnloadObserver.queueHandler((function() {
			$(AnimalsGame.STAGE).append(this.dialog.element);
		}).bind(this));
	},
	
	showAbout: function() {
		this.hideDialog();
		
		this.veil = new AnimalsGame.StageElement({
			element:  $E('div')._,
			className: 'veil',
			interactive: false
		});
		this.dialog = new AnimalsGame.Actor({
			filename: 'about-dialog',
			path: 'assets/images/dialogs',
			className: 'dialog home-screen-dialog about-dialog',
			interactive: false,
			autoAppend: false,
			children: [
				new AnimalsGame.Actor({
					filename: 'close-dialog',
					path: 'assets/images/dialogs',
					filenameHover: 'close-dialog-hover',
					className: 'dialog-button close-dialog-button',
					autoAppend: false,
					click: this.hideDialog.bind(this)
				})
			]
		});
		
		AnimalsGame.OnloadObserver.queueHandler((function() {
			$(AnimalsGame.STAGE).append(this.dialog.element);
		}).bind(this));
	},
	
	hideDialog: function() {
		this.dialog && this.dialog.destroy();
		this.dialog = null;
		this.veil && this.veil.destroy();
		this.veil = null;
	},
	
	setupSection: function(sectionName) {
		this.soundEffect.stop();
		this.currentSection = new AnimalsGame.Section({
			sectionName: sectionName,
			sectionConfig: Config.SECTIONS[ sectionName ],
			animalsConfig: Config.ANIMALS[ sectionName ],
			game: this
		});
		this.soundButton.setPosition({ left: '7%', bottom: '2%' });
	},
	
	setFixedSizeStyles: function() {
		var marginTop, marginLeft;
		if ( AnimalsGame.currentSize == 'small' ) {
			
			marginTop  = -202;
			marginLeft = -318;
			this.stage.style.fontSize = '0.7em';
			
		} else if ( AnimalsGame.currentSize == 'medium' ) {
			
			marginTop  = -285;
			marginLeft = -450;
			this.stage.style.fontSize = '1em';
			
		} else {
			
			marginTop  = -340;
			marginLeft = -538;
			this.stage.style.fontSize = '1.2em';
		}
		
		$(document.body).addClass( AnimalsGame.currentSize );
		
		$(AnimalsGame.STAGE).setStyle({
			width:  AnimalsGame.dimensions[AnimalsGame.currentSize].width,
			height: AnimalsGame.dimensions[AnimalsGame.currentSize].height,
			marginTop:  marginTop,
			marginLeft: marginLeft
		});
	}
	
});
