(function($) {
	$(document).ready(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;}
				};
	
	
	
			$(function() {
				var $tf_bg				= $('#tf_bg'),
					$tf_bg_images		= $tf_bg.find('img'),
					$tf_bg_img			= $tf_bg_images.eq(0),
					$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');
					$tf_pattern			= $('#tf_pattern');
					
				//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
					$(document).on('click', '#tf_zoom',
						function(){
						if($tf_bg_img.is(':animated'))
							return false;
							var $this	= $(this);
							var id = $tf_bg_images.eq(current).attr('id');
							$.ajax({
							   type: "POST",
							   url: "themes/Full_Background/full_BG.php",
							   data: {id: id},
							   success:function(msg){
							   var div = "nbhit"+id;
					document.getElementById(div).innerHTML=msg ;}
							});
							if($this.hasClass('tf_zoom')){
								resize($tf_bg_img);
								$this.addClass('hidedi')
									 if($tf_pattern.hasClass('visible')){
										$tf_pattern.addClass('hide')
											.removeClass('visible');}
									 if($('.titrePage').hasClass('visible')){
										$('.titrePage').addClass('hide')
											.removeClass('visible');}
									 if($('.additional_info').hasClass('visible')){
										$('.additional_info').addClass('hide')
											.removeClass('visible');}
									 if($('.infor').hasClass('visible')){
										$('.infor').addClass('hide')
											.removeClass('visible');}
									 if($('.footer').hasClass('visible')){
										$('.footer').addClass('hide')
											.removeClass('visible');}
									 if($('.tf_thumbs').hasClass('visible')){
										$('.tf_thumbs').addClass('hide')
											.removeClass('visible');}
									 if($('.tf_next').hasClass('visible')){
										$('.tf_next').addClass('hidedi')
											.removeClass('visible');}
									 if($('.tf_prev').hasClass('visible')){
										$('.tf_prev').addClass('hidedi')
											.removeClass('visible');}
									 if($('.tf_info').hasClass('visible')){
										$('.tf_info').addClass('hidedi')
											.removeClass('visible');}
									 if($('.tf_fullscreen').hasClass('hidedi')){
										$('.tf_fullscreen').addClass('visible')
											.removeClass('hidedi');}
								}
							}
						);
								
					$(document).on('click', '#tf_fullscreen',
						function(){
						if($tf_bg_img.is(':animated'))
							return false;
				
							var $this	= $(this);
							if($this.hasClass('tf_fullscreen')){
	
								var dim	= getImageDim($tf_bg_img);
								$tf_bg_img.animate({
									width	: dim.width,
									height	: dim.height,
									top		: dim.top,
									left	: dim.left
								},550);
								$this.addClass('hidedi')
									.removeClass('visible');
								$('.tf_zoom').addClass('visible')
									.removeClass('hidedi');	
								$tf_pattern.addClass('visible')
									.removeClass('hide');
								$('.titrePage').addClass('visible')
									.removeClass('hide');
								$('.additional_info').addClass('visible')
									.removeClass('hide');
								$('.infor').addClass('visible')
									.removeClass('hide');
								$('.footer').addClass('visible')
									.removeClass('hide');
								$('.tf_thumbs').addClass('visible')
									.removeClass('hide');
								$('.tf_next').addClass('visible')
									.removeClass('hidedi');
								$('.tf_prev').addClass('visible')
									.removeClass('hidedi');
								$('.tf_info').addClass('visible')
									.removeClass('hidedi');
									
							}
							
						}
					);
					
				

					//click the arrow down, scrolls down
					$tf_next.bind('click',function(){
						if($tf_bg_img.is(':animated'))
							return false;
							scroll('bt');
					});
					
					//click the arrow up, scrolls up
					$tf_prev.bind('click',function(){
						if($tf_bg_img.is(':animated'))
						return false;
						scroll('tb');
					});
					
					//mousewheel events - down / up button trigger the scroll down / up
					$(document).bind('mousewheel' , function(e, delta) {
						if($tf_bg_img.is(':animated'))
							return false;
							
						if(delta < 0)
							scroll('bt');
						else
							scroll('tb');
						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 38:	
								scroll('tb');
								break;	

							case 40:	
								scroll('bt');
								break;
						}
					});
				}
				

				
			if(total > 1 ){

				//show next / prev image
				function scroll(dir){
					//if dir is "tb" (top -> bottom) increment current, 
					//else if "bt" decrement it
					current	= (dir == 'bt')?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;
				


					//flip the thumb
					$tf_thumbs.flip({
						color		: 'rgb(255,255,255)',
						direction	: dir,
						speed		: 400,
						onBefore	: function(){
							//the new thumb is set here
							var content		= '<span id="tf_zoom" class="tf_zoom ' + $tf_bg_images.eq(current).attr('Z') + '"></span>';
							if($tf_bg_images.eq(current).attr('Z')=='thumb'){
							content     	+= '<span id="tf_info" class="tf_info" onclick="$lb.launch({url:' + $tf_bg_images.eq(current).attr('link') + '})"></span>'
							content			+='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';}
							else{content	+='<a href="' + $tf_bg_images.eq(current).attr('link') + '"><img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/></a>';}
							$tf_thumbs.html(content);
							$tf_pattern.addClass('visible')
							.removeClass('hide');
							$('.titrePage').addClass('visible')
							.removeClass('hide');
							$('.additional_info').addClass('visible')
							.removeClass('hide');
							$('.infor').addClass('visible')
							.removeClass('hide');
							$('.footer').addClass('visible')
							.removeClass('hide');
							$('.tf_thumbs').addClass('visible')
							.removeClass('hide');
							$('.tf_next').addClass('visible')
							.removeClass('hidedi');
							$('.tf_prev').addClass('visible')
							.removeClass('hidedi');
							$('.tf_info').addClass('visible')
							.removeClass('hidedi');
							$('.tf_fullscreen').addClass('hidedi')
							.removeClass('visible');

					}
					});

					//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
							top	= (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px';
							
					//set the returned values and show the next image	
						$tf_bg_img_next.css({
							width	: dim.width,
							height	: dim.height,
							left	: dim.left,
							top		: top
						}).show();
						
					//now slide it to the viewport
						$tf_bg_img_next.stop().animate({
							top 	: dim.top
						},1000);
						
					//we want the old image to slide in the same direction, out of the viewport
						var slideTo	= (dir == 'bt')?-$tf_bg_img.height() + 'px':$(window).height() + 'px';
						$tf_bg_img.stop().animate({
							top 	: 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()-35,
						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;
						
						if(new_h > w_h){
							new_h	= w_h;
							new_w	= w_h / r_i;
						}
						
					}
					
					$img.animate({
						width	: new_w + 'px',
						height	: new_h + 'px',
						top		: '35px',
						left	: (w_w / 2)-(new_w / 2)
					},550);
				}
				
				//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'
					};
					}
			});
	});
})(jQuery);