/*
---
name: FitImage
description: fix in place and fitto screen any background image
license: MIT-style license.
authors:
  - Anton Suprun
requires:
  - Core/Array
  - Core/Class.Extras
  - Core/DOMReady
  - Core/Element.Dimensions
provides: [FitImage]
...
*/
	
var FitImage = new Class({

	Implements: [Events, Options],

	options: {
		'class': 'resize-background',
		'center': true,
		'minWidth': 1024,
		'minHeight': 768,
		'primary': 'auto',
		'injectElement': null,
		'injectPosition': 'top',
		'background-position': 'center center'
	},

	initialize: function( image, options ){

		var el, isbgSizePresent;

		options = options || {};
		options.primary = options.primary && ['width', 'height', 'auto'].contains(options.primary)? options.primary : 'auto';
		this.setOptions(options);
		this.setImage( image );
	},
	
	setImage: function( src, callback ){
		var img, self;
		this.image = Asset.image( src, { onLoad: function(){
			this.placeImage( src );
			if( callback ) callback();
		}.bind( this ) } );
	},
	
	placeImage: function( src ){
		el = (this.options.injectElement)?  this.options.injectelement : $( document.body );
		isbgSizePresent = ( el.getStyle('backgroundSize') || el.getStyle('background-size') || el.getStyle('-moz-background-size') || el.getStyle( '-webkit-background-size') || el.getStyle( '-o-background-size' ) )? true : false;
		if( isbgSizePresent ){
			if( Browser.safari && Browser.version >= 3 ){
				// console.log( "Safari 3+" );
				propName = "-webkit-background-size";
			}else if( Browser.firefox && Browser.version < 4 ){
				// console.log( "FF < 4" );
				propName = "-moz-background-size";
			}else if( Browser.opera && Browser.version > 10 ){
				// console.log( "Opera 10+" );
				propName = "-o-background-size";
			}else{
				propName = "background-size";
			}
			if( (Browser.ie && Browser.version >= 9) || !Browser.ie  ){
				// console.log( 'lets do it', propName );
				el.setStyle( propName, 'cover' );
				el.setStyles({
					propName: 'cover',
					'background-repeat': 'no-repeat',
					'background-position': this.options['background-position'],
					'background-attachment': 'fixed',
					'background-image': 'url('+src+')'
				});
				return;
			}
		}
//		console.log( "background size doesnt exist, trying older JS method" );
		// *** Load the image
		// *** Permanently bind some methods
		this.resize = this.resize.bind(this);
		this.inject = this.inject.bind(this);
		this.attach();
		// In case browser does not support load event for images
		this.inject();
	},
	
	attach: function(){
		this.detach();
		window.addEvent( 'load', this.inject );
		window.addEvent( 'domready', this.resize );
		window.addEvent( 'resize', this.resize );
	},
	
	detach: function(){
		window.removeEvent( 'load', this.inject );
		window.removeEvent( 'domready', this.resize );
		window.removeEvent( 'resize', this.resize );
	},

	inject: function(){
		if (!this.injected){
			if (!this.options.injectElement) this.options.injectElement = document.body;
			this.image.inject(this.options.injectElement, this.options.injectPosition);
			this.injected = true;
		}
		// *** If image fails to resize, return launching resize on inject call even after inject becomes true
		this.resize();
		return this;
	},

	resize: function(){
		var size = window.getSize(), rate = size.x / size.y, styles = {};
		if( !this.image ) return; 
		if (!this.size || this.size.x == 0){
			// *** Detect image size
			this.size = this.image.getSize();
			if (this.size.x == 0) return this; // Not loaded yet
			this.rate = this.size.x / this.size.y;
		}
		// *** Set first dimension size
		if (this.options.primary == 'width' || (this.options.primary == 'auto' && this.rate < rate)){
			styles.width  = size.x;
			styles.height = null;
		} else if (this.options.primary == 'height' || (this.options.primary == 'auto' && this.rate > rate)){
			styles.width  = null;
			styles.height = size.y;
		} else {
			// *** Perfect fit!
			styles.width  = size.x;
			styles.height = size.y;
		}
		// *** Min width && height
		if (styles.width  !== null && this.options.minWidth  > styles.width)  styles.width  = this.options.minWidth;
		if (styles.height !== null && this.options.minHeight > styles.height) styles.height = this.options.minHeight;
		// *** Calculate second dimension size
		if (styles.width  === null) styles.width  = Math.round(styles.height * this.size.x / this.size.y);
		if (styles.height === null) styles.height = Math.round(styles.width  * this.size.y / this.size.x);
		// *** Position in the center of the screen
		if (this.options.center){
			// *** Horizontal
			if (styles.width > size.x)	  styles.left = 0 - Math.round((styles.width - size.x) / 2);
			else if (styles.width < size.x) styles.left = Math.round((size.x - styles.width) / 2);
			else styles.left = 0;
			// *** Vertical
			if (styles.height > size.y)	  styles.top = 0 - Math.round((styles.height - size.y) / 2);
			else if (styles.height < size.y) styles.top = Math.round((size.y - styles.height) / 2);
			else styles.top = 0;
		}
		this.image.setStyles(styles);
		return this;
	},

	toElement: function(){
		return this.image;
	}
	
});