/*
Title:      jQuery.bleedImage
Description:Bleeds an image to fill window.
Developer:  Antenna Research Facility (http://theantenna.net)
Date:       Dec 2009
Version:    1.0
Usage:      $('#img').bleedImage
              - set image to full bleed (compares image dimensions to viewport and makes sure it fills) then scroll to centre & fade it in.
Notes:      Disabled window resize notification in IE, as it fires too often (when scroll attached)
To Do:      
License:    Dual licensed under the MIT and GPL licenses:
            http://www.opensource.org/licenses/mit-license.php,
            http://www.gnu.org/licenses/gpl.html
*/

(function($){
	
	// CONSTANTS
	var classID = 'bleedImage',
		windowTimeout = null, // delay on window resize
		fn = $.fn[classID] = $.extend(function(){
			var args = arguments;
			
			// public method
			if( typeof arguments[0]=='string'){
				fn.public[arguments[0]].apply( this, $.makeArray(arguments).slice(1) );
			}
			
			// constructor
			else this.each(function(){
				return fn.init.call( $(this), args[0] ); 
			});
			
			return this;
		},
		{
			
			defaults : 
			{
				fade:true,
				speed: 500//, // speed of fade
                                /*
				showPreloader: function() // shows a preloader while waiting for image to load
				{
					$('.loader').remove();
					$('<div class="loader">&ndash;<br clear="all"/><div>Loading</div><div class="bar">------------------------------------------------------------------------------------------------------------------------------------------------</div></div>').appendTo( '#page' );

					return setInterval(function(){
						$('.loader .bar').width($('.loader .bar').width()+1);
					},50);
				},
				hidePreloader: function(preloader)
				{
					clearInterval(preloader);
					$('.loader').remove(); //.fadeOut(function(){ $(this).remove(); })
				}*/
			},
			
			init: function(options)
			{
				
				var data = $.extend(fn.defaults, options),
					that = this;

				// the maintained state object, saved to ele with $.data 
				this.data( classID, data );
				
				if( !this.width() ) // wait till loaded
				{
					var preloader = data.showPreloader();
					
					this.load(function(e){
						
						that.bleedImage(options)
							.data(classID).hidePreloader(preloader);
					});
				}
				
				else // loaded - show img
				{
					// resize on window resize event - don't use in IE7 because scrollbar being added fires this
					if( !$('html').hasClass('ie7') )
					$(window).resize( function(e){
						if(!that.is(':visible')) return false;
						//fn.onWindowResize.call(that);
						fn.fitToWindow.call(that);
					});
				
					fn.fitToWindow.call(this);
					
					if(data.fade) this.fadeIn(data.speed);
				}
				
			},
			
			// For staggering resize event if to intense
			// onWindowResize: function()
			// {
			// 	//clearTimeout(windowTimeout);
			// 	//windowTimeout = setTimeout( $.proxy(fn.fitToWindow, this), 20);
			// 	//fn.fitToWindow.call(this);
			// },
			
			
			fitToWindow: function()
			{
				var that = this,
					data = this.data(classID),
					$parent = this.parent();
				//log( 'fitToWindow' );
					
				this.css({width:'auto', height:'auto'}); // reset to original dimensions
				
				//$parent[0].scroll(0,0); // reset scroll
				
				var
					img_ratio = this.width() / this.height(),
					win_ratio = $parent.width() / $parent.height();
				
				//log('img width/height', $this.width(),'/', $this.height());
				//log('win width/height', $parent.width(),'/', $parent.height());
								
				//log('ratio',img_ratio,'/',win_ratio);
				if( img_ratio < win_ratio ) fn.fitToWidth.call(this);
				else fn.fitToHeight.call(this);
				
				// centre scroll
				// ! need to delay here otherwise new dims not registered
				setTimeout(function(){
					//if(!data.fade) that.show();
					
					that.parent().scrollLeft( Math.round( (that.width() - $parent.width()) / 2 ) );
					$parent.scrollTop( Math.round( (that.height() - $parent.height()) / 2 ) );				
					
					that.trigger('resized.'+classID);
				},20);
			},
			
			fitToHeight: function()
			{
				//log( 'fitting to height');
				var 
					$parent = this.parent().removeClass().addClass('fitHeight');
					
				this.height( function(i,v){
					return Math.min($parent.height(),v);
				});				
			},
			
			fitToWidth: function()
			{
				//log( 'fitting to width');
				var 
					$parent = this.parent().removeClass().addClass('fitWidth');
					
				this.width( function(i,v){
					return Math.min($parent.width(),v);
				});
			}
			
			
		}
	);
	
	
})(jQuery);