(function($) {
		$.fn.preload = function(options) {
			var opts  = $.extend({}, $.fn.preload.defaults, options);
			o         = $.meta ? $.extend({}, opts, this.data()) : opts;
			var c     = this.length,
			l         = 0;
			return this.each(function() {
				var $i  = $(this);
				$('<img/>').load(function(i){
					++l;
					if(l == c) o.onComplete();
				}).attr('src',$i.attr('src'));  
			});
		};
		$.fn.preload.defaults = {
			onComplete : function(){return false;}
		};
	})(jQuery);

	$(function() {
		var $tf_bg = $('#tf_bg'),
			$tf_bg_images  = $tf_bg.find('img'),
			$tf_bg_img  = $tf_bg_images.eq(Math.floor(Math.random()*$tf_bg_images.length)),
			$tf_thumbs  = $('#tf_thumbs'),
			total = $tf_bg_images.length,
			current = 0,
			$tf_content_wrapper = $('#tf_content_wrapper'),
			$tf_next  = $('#tf_next'),
			$tf_prev  = $('#tf_prev'),
			$tf_loading  = $('#tf_loading');

		//preload the images                            
		$tf_bg_images.preload({
			onComplete : function(){
				$tf_loading.hide();
				init();
			}
		});
			  
		//shows the first image and initializes events
		function init(){
			//get dimentions for the image, based on the windows size
			var dim = getImageDim($tf_bg_img);
			//set the returned values and show the image
			$tf_bg_img.css({
				width   : dim.width,
				height  : dim.height,
				left    : dim.left,
				top     : dim.top
			}).fadeIn();

			//resizing the window resizes the $tf_bg_img
			$(window).bind('resize',function(){
				var dim = getImageDim($tf_bg_img);
				$tf_bg_img.css({
					width   : dim.width,
					height  : dim.height,
					left    : dim.left,
					top     : dim.top
				});
			});

			//expand and fit the image to the screen
			$('#tf_zoom').live('click', function(){
				if($tf_bg_img.is(':animated'))
					return false;

					var $this       = $(this);
					if($this.hasClass('tf_zoom')){
						resize($tf_bg_img);
						$this.addClass('tf_fullscreen').removeClass('tf_zoom');
					}
					else{
						var dim = getImageDim($tf_bg_img);
						$tf_bg_img.animate({
							width   : dim.width,
							height  : dim.height,
							top     : dim.top,
							left    : dim.left
						},350);
						$this.addClass('tf_zoom').removeClass('tf_fullscreen'); 
					}
				}
			);

			//click the arrow down, scrolls down
			$tf_next.bind('click',function(){
				if($tf_bg_img.is(':animated'))
					return false;
				scroll('rl');
			});

			//click the arrow up, scrolls up
			$tf_prev.bind('click',function(){
				if($tf_bg_img.is(':animated'))
					return false;
				scroll('lr');
			});

			//mousewheel events - down / up button trigger the scroll down / up
			$(document).mousewheel(function(e, delta) {
				if($tf_bg_img.is(':animated'))
					return false;
						  
				if(delta > 0)
					scroll('lr');
				else
					scroll('rl');
				return false;
			});

			//key events - down / up button trigger the scroll down / up
			$(document).keydown(function(e){
				if($tf_bg_img.is(':animated'))
					return false;

				switch(e.which){
					case 37:        
						scroll('lr');
						break;  

					case 39:        
						scroll('rl');
						break;
				}
			});
		}
			  
	//show next / prev image
	function scroll(dir){
		//if dir is "rl" (top -> bottom) increment current, 
		//else if "lr" decrement it
		current = (dir == 'rl')?current + 1:current - 1;

		//we want a circular slideshow, 
		//so we need to check the limits of current
		if(current == total) current = 0;
		else if(current < 0) current = total - 1;

		//we get the next image
		var $tf_bg_img_next = $tf_bg_images.eq(current),
		//its dimentions
		dim = getImageDim($tf_bg_img_next),
		//the top should be one that makes the image out of the viewport
		//the image should be positioned up or down depending on the direction
		left    = (dir == 'rl')?$(window).width() + 'px':-parseFloat(dim.width,10) + 'px';
						  
		//set the returned values and show the next image       
		$tf_bg_img_next.css({
			width   : dim.width,
			height  : dim.height,
			left    : left,
			top     : dim.top
		}).show();
				
		//now slide it to the viewport
		$tf_bg_img_next.stop().animate({ left : dim.left}, 1000);
				
		//we want the old image to slide in the same direction, out of the viewport
		var slideTo = (dir == 'rl')?-$tf_bg_img.width() + 'px':$(window).width() + 'px';
		$tf_bg_img.stop().animate({ left : slideTo}, 1000, function(){
			//hide it
			$(this).hide();
			//the $tf_bg_img is now the shown image
			$tf_bg_img = $tf_bg_img_next;
			//show the description for the new image
			$tf_content_wrapper.children().eq(current).show();
		});
		
		//hide the current description  
		$tf_content_wrapper.children(':visible').hide()
	}
	 
	//animate the image to fit in the viewport
	function resize($img){
		var w_w = $(window).width(),
			w_h  = $(window).height(),
			i_w  = $img.width(),
			i_h  = $img.height(),
			r_i  = i_h / i_w,
			new_w,new_h;

      if(i_w > i_h){
			new_w   = w_w;
			new_h   = w_w * r_i;

			if(new_h > w_h){
				new_h   = w_h;
				new_w   = w_h / r_i;
			}
		}       
		else{
			new_h   = w_w * r_i;
			new_w   = w_w;
		}

		$img.animate({
			width   : new_w + 'px',
			height  : new_h + 'px',
			top             : '0px',
			left    : '0px'
		}, 350);
	}
			  
	//get dimentions of the image, 
	//in order to make it full size and centered
	function getImageDim($img){
		var w_w = $(window).width(),
			w_h  = $(window).height(),
			r_w  = w_h / w_w,
			i_w  = $img.width(),
			i_h  = $img.height(),
			r_i  = i_h / i_w,
			new_w,new_h,
			new_left,new_top;
         
		if(r_w > r_i){
			new_h   = w_h;
			new_w   = w_h / r_i;
		}
		else{
			new_h   = w_w * r_i;
			new_w   = w_w;
		}

		return {
			width   : new_w + 'px',
			height  : new_h + 'px',
			left    : (w_w - new_w) / 2 + 'px',
			top     : (w_h - new_h) / 2 + 'px'
		};
	}
	});