AnimalsGame.Actor = new Class(AnimalsGame.StageElement, {
	
	extend: {
		path: 'assets/images/animals',
		STYLESHEET_SUPPORT: document.styleSheets[0].insertRule !== undefined
	},
	
	initialize: function(opts) {
		var this_ = this;
		
		AnimalsGame.OnloadObserver.incrementQueue();
		
		if (AnimalsGame.Actor.STYLESHEET_SUPPORT) {
			AnimalsGame.determineFixedSize();
		}
		
		this.filename = opts['filename'];
		this.filenameHover = opts['filenameHover'] || this.filename;
		
		this.element = document.createElement('div');
		this.id = this.element.id = this.filename;
		this.element.className = 'actor ' + this.filename;
		this.element.unselectable = 'on';
		
		// StageElement handles the position
		this.$super(opts);
		
		this.path = opts['path'] || AnimalsGame.Actor.path;
		this.extension = opts['extension'] || 'png';
		
		var currentSizeName = AnimalsGame.currentSize;
		
		var img = new Image;
		
		img.onload = function() {
			AnimalsGame.OnloadObserver.decrementQueue();
			
			var currentWidth  = img.width,
				currentHeight = img.height;
			
			var small  = AnimalsGame.dimensions['small']['height'],
				medium = AnimalsGame.dimensions['medium']['height'],
				big    = AnimalsGame.dimensions['big']['height'];
			
			// FIXME : genericize
			switch (currentSizeName) {
				case 'small':
					this_.dimensions = {
						small:  { width:  currentWidth,                        height:  currentHeight },
						medium: { width: (currentWidth * medium/small).ceil(), height: (currentHeight * medium/small).ceil() },
						big:    { width: (currentWidth * big/small).ceil(),    height: (currentHeight * big/small).ceil() }
					};
				break;
				case 'medium':
					this_.dimensions = {
						small:  { width: (currentWidth * small/medium).ceil(), height: (currentHeight * small/medium).ceil() },
						medium: { width:  currentWidth,                        height:  currentHeight },
						big:    { width: (currentWidth * big/medium).ceil(),   height: (currentHeight * big/medium).ceil() }
					};
				break;
				case 'big':
					this_.dimensions = {
						small:  { width: (currentWidth * small/big).ceil(),  height: (currentHeight * small/big).ceil() },
						medium: { width: (currentWidth * medium/big).ceil(), height: (currentHeight * medium/big).ceil() },
						big:    { width:  currentWidth,                      height:  currentHeight }
					};
				break;
			}
			
			this_.drawImage();
			
			img.onload = function() {
				img.onload = img = null;
			};
			img.src = this_.path + '/' + currentSizeName + '/' + this_.filenameHover + '.' + this_.extension;
		};
		img.src = this_.path + '/' + currentSizeName + '/' + this_.filename + '.' + this_.extension;
	},
	
	drawImage: function() {
		if ( AnimalsGame.Actor.STYLESHEET_SUPPORT ) {
			this.styleElement = document.createElement('style');
			$(document.getElementsByTagName('head')[0]).append( this.styleElement );
			
			var styleSheet = document.styleSheets[ document.styleSheets.length - 1 ];
			
			var cssRules = [], hasHoverState = this.filenameHover !== this.filename;
			
			// cssRules.push(
			// 	'#' + this.id + ' {' +
			// 		'width:  ' + this.dimensions['medium'].width  + 'px;' +
			// 		'height: ' + this.dimensions['medium'].height + 'px;' +
			// 		'background-image: url(' + this.path + '/medium/' + this.filename + '.' + this.extension + ')' +
			// 	'}'
			// );
			// 
			// if (hasHoverState) {
			// 	cssRules.push(
			// 		'#' + this.id + '.interactive:hover,' +
			// 		'.interactive:hover > #' + this.id + '.child {' +
			// 			'background-image: url(' + this.path + '/medium/' + this.filenameHover + '.' + this.extension + ')' +
			// 		'}'
			// 	);
			// }
			
			cssRules.push(
				'@media screen and (max-width: 919px), screen and (max-height: 589px) {' +
					'#' + this.id + ' {' +
						'width:  ' + this.dimensions['small'].width  + 'px;' +
						'height: ' + this.dimensions['small'].height + 'px;' +
						'background-image: url(' + this.path + '/small/' + this.filename + '.' + this.extension + ');' +
					'}' + (
						hasHoverState ?
						'#' + this.id + '.interactive:hover,' +
						'.interactive:hover > #' + this.id + '.child {' +
							'background-image: url(' + this.path + '/small/' + this.filenameHover + '.' + this.extension + ');' +
						'}' : ''
					) +
				'}'
			);
			
			cssRules.push(
				'@media screen and (min-width: 920px) and (min-height: 590px) and (max-width: 1095px), ' +
						'screen and (min-width: 920px) and (min-height: 590px) and (max-height: 699px) {' +
					'#' + this.id + ' {' +
						'width:  ' + this.dimensions['medium'].width  + 'px;' +
						'height: ' + this.dimensions['medium'].height + 'px;' +
						'background-image: url(' + this.path + '/medium/' + this.filename + '.' + this.extension + ');' +
					'}' + (
						hasHoverState ?
						'#' + this.id + '.interactive:hover,' +
						'.interactive:hover > #' + this.id + '.child {' +
							'background-image: url(' + this.path + '/medium/' + this.filenameHover + '.' + this.extension + ');' +
						'}' : ''
					) +
				'}'
			);
			
			cssRules.push(
				'@media screen and (min-width: 1096px) and (min-height: 700px) {' +
					'#' + this.id + ' {' +
						'width:  ' + this.dimensions['big'].width  + 'px;' +
						'height: ' + this.dimensions['big'].height + 'px;' +
						'background-image: url(' + this.path + '/big/' + this.filename + '.' + this.extension + ');' +
					'}' + (
						hasHoverState ?
						'#' + this.id + '.interactive:hover,' +
						'.interactive:hover > #' + this.id + '.child {' +
							'background-image: url(' + this.path + '/big/' + this.filenameHover + '.' + this.extension + ');' +
						'}' : ''
					) +
				'}'
			);
			
			cssRules.each(function(rule, index) {
				styleSheet.insertRule(rule, index);
			});
			
		} else {
			var this_ = this;
			$(this.element).setStyle({
				width:  this_.dimensions[AnimalsGame.currentSize].width,
				height: this_.dimensions[AnimalsGame.currentSize].height,
				background: 'url(' + this_.path + '/' + AnimalsGame.currentSize + '/' + this_.filename + '.' + this_.extension + ')'
			}).on({
				mouseover: function() {
					$(this).setStyle('background', 'url(' + this_.path + '/' + AnimalsGame.currentSize + '/' + this_.filenameHover + '.' + this_.extension + ')');
				},
				mouseout: function() {
					$(this).setStyle('background', 'url(' + this_.path + '/' + AnimalsGame.currentSize + '/' + this_.filename + '.' + this_.extension + ')');
				}
			});
		}
	},
	
	changeStyle: function(opts) {
		if ( this.styleElement ) {
			$(this.styleElement).remove();
		}
		this.filename = opts['filename'];
		this.filenameHover = opts['filenameHover'] || this.filename;
		this.path = opts['path'] || this.path || AnimalsGame.Actor.path;
		this.extension = opts['extension'] || this.extension || 'png';
		this.drawImage();
	},
	
	destroy: function() {
		this.$super();
		if ( this.styleElement ) {
			$(this.styleElement).remove();
		}
	}
	
});
