var Flipper = function(game) { this.initialize(game); };
Flipper.prototype = {
	initialize: function(game) {
		this.game = jQuery(game);
		this.front = this.game.find('div.front');
		this.back  = this.game.find('div.back');
		this.container = this.game.find('div.placeholder');
		this.flip();
		var flipper = this;
		this.game.click(function(){ flipper.flip(); });
	},
	flip: function() {
		var flipper = this;

		if (this.container.hasClass('front')) {
			this.container.removeClass('front').addClass('back');
			this.container.flip({ 
				direction: 'rl', 
				toColor: '#111', 
				speed: 100, 
				content: this.back,
				onComplete: function(object) {
					flipper.hookButtons();
				}
			});
		} else {
			this.container.removeClass('back').addClass('front');
			this.container.flip({ 
				direction: 'rl', 
				toColor: '#444', 
				speed: 100,
				content: this.front
			});
		}
	},
	hookButtons: function() {
		this.container.find('.button').hover(
			function() { jQuery(this).addClass('button-hover');    },
			function() { jQuery(this).removeClass('button-hover'); }
		);
	}
};

// When DOM is ready
jQuery(document).ready(function() {
	jQuery('#gamelist li').each(function(index, item){ new Flipper(item); });
});

// Wait until window is fully loaded
jQuery(window).load(function() {
	jQuery('#GAMES').addClass('selected');
});