$(function() {

	// half second delay in loading 'drag' image
	$('.drag').delay('1500').show('10000000000');

	var $ibWrapper	= $('#ib-main-wrapper'),

	Template = (function() {

		// true if dragging the container
		var kinetic_moving = false,
		// current index of the opened item
		current = -1,
		// true if the item is being opened / closed
		isAnimating = false,
		// items on the grid
		$ibItems = $ibWrapper.find('div.ib-main > a'),
		// image items on the grid
		$ibImgItems = $ibItems.not('.ib-content'),
		// total image items on the grid
		imgItemsCount = $ibImgItems.length,
		init = function() {

			// add a class ib-image to the image items
			$ibImgItems.addClass('ib-image');
			// apply the kinetic plugin to the wrapper
			loadKinetic();
			// load some events
			initEvents();

		},
		loadKinetic = function() {

			setWrapperSize();

			$ibWrapper.kinetic({
				moved	: function() {

					kinetic_moving = true;

				},
				stopped	: function() {

					kinetic_moving = false;

				}
			});

		},
		setWrapperSize = function() {

			var containerMargins	= $('#ib-top').outerHeight(true) + $('#header').outerHeight(true) + parseFloat( $ibItems.css('margin-top') );
			$ibWrapper.css( 'height', $(window).height() - containerMargins )

		},
		initEvents = function() {

			// open the item only if not dragging the container
			$ibItems.bind('click.ibTemplate', function( event ) {

				if( !kinetic_moving )
					openItem( $(this) );

				return false;

			});

			// on window resize, set the wrapper and preview size accordingly
			$(window).bind('resize.ibTemplate', function( event ) {

				setWrapperSize();

				$('#ib-img-preview, #ib-content-preview').css({
					width	: $(window).width(),
					height	: $(window).height()
				})

			});

		},
		openItem = function( $item ) {

			if( isAnimating ) return false;

			// if content item
			if( $item.hasClass('ib-content') )
			{
				isAnimating	= true;
				current	= $item.index('.ib-content');
				loadContentItem( $item, function() {
					isAnimating = false;
				} );
			}
			// if image item
			else
			{
				isAnimating	= true;
				current	= $item.index('.ib-image');
				loadImgPreview( $item, function() {
					isAnimating = false;
				} );
			}

		},
		// opens one image item (fullscreen)
		loadImgPreview = function( $item, callback ) {

			$('body').find('div.drag').hide();

			var largeSrc = $item.children('img').data('largesrc'),
			description = $item.children('span').text(),
			largeImageData = {
				src			: largeSrc,
				description	: description
			};

			// preload large image
			$item.addClass('ib-loading');

			preloadImage( largeSrc, function() {

				$item.removeClass('ib-loading');

				var hasImgPreview	= ( $('#ib-img-preview').length > 0 );

				if( !hasImgPreview )
					$('#previewTmpl').tmpl( largeImageData ).insertAfter( $ibWrapper );
				else
					$('#ib-img-preview').children('img.ib-preview-img')
					.attr( 'src', largeSrc )
					.end()
					.find('span.ib-preview-descr')
					.text( description );

				//get dimentions for the image, based on the windows size
				var	dim	= getImageDim( largeSrc );

				$item.removeClass('ib-img-loading');

				//set the returned values and show/animate preview
				$('#ib-img-preview').css({
					width	: $item.width(),
					height	: $item.height(),
					left	: $item.offset().left,
					top		: $item.offset().top
				}).children('img.ib-preview-img').hide().css({
					width	: dim.width,
					height	: dim.height,
					left	: dim.left,
					top		: dim.top
				}).fadeIn( 400 ).end().show().animate({
					width	: $(window).width(),
					left	: 0
				}, 500, 'easeOutExpo', function() {

					$(this).animate({
						height	: $(window).height(),
						top		: 0
					}, 400, function() {

						var $this	= $(this);
						$this.find('span.ib-preview-descr, span.ib-close').show()
						if( imgItemsCount > 1 )
							$this.find('div.ib-nav').show();


						$this.find('span.title-close').show();

						if( callback ) callback.call();

					});

				});

				if( !hasImgPreview )
					initImgPreviewEvents();

			} );

		},
		// opens one content item (fullscreen)
		loadContentItem = function( $item, callback ) {

			$('body').find('div.drag').hide();

			var thisClass = $item.attr('class').replace('ib-content', '');
			$('#ib-top').attr('class', thisClass);

			var hasContentPreview = ( $('#ib-content-preview').length > 0 ),
			teaser = $item.children('div.ib-teaser').html(),
			content = $item.children('div.ib-content-full').html(),
			contentData = {
				teaser		: teaser,
				content		: content
			};

			if( !hasContentPreview )
			{
				$('#contentTmpl').tmpl( contentData ).insertAfter( $ibWrapper );
			}

			//set the returned values and show/animate preview

			$('#ib-content-preview').addClass(thisClass);

			$('#ib-content-preview').css({
				width	: $item.width(),
				height	: $item.height(),
				left	: $item.offset().left,
				top		: $item.offset().top
			}).show().animate({
				width	: $(window).width(),
				left	: 0
			}, 500, 'easeOutExpo', function() {

				$(this).animate({
					height	: $(window).height(),
					top		: 0
				}, 400, function() {

					var $this = $(this),
					$teaser	= $this.find('div.ib-teaser'),
					$content= $this.find('div.ib-content-full'),
					$close	= $this.find('span.ib-close');

					if( hasContentPreview ) {
						$teaser.html( teaser )
						$content.html( content )
					}

					$teaser.show();

					$($teaser).addClass(thisClass);

					$content.show();
					$close.show();
					$this.find('span.title-close').show();

					$('#ib-content-preview').removeClass(thisClass);

//					window.location.hash = 'hello';

					if( callback ) callback.call();

				});

			});

			if( !hasContentPreview )
			{
				initContentPreviewEvents();
			}


		},
		// preloads an image
		preloadImage = function( src, callback ) {

			$('<img/>').load(function(){

				if( callback ) callback.call();

			}).attr( 'src', src );

		},
		// load the events for the image preview : navigation ,close button, and window resize
		initImgPreviewEvents = function() {

			var $preview = $('#ib-img-preview');

			$preview.find('span.ib-nav-prev').bind('click.ibTemplate', function( event ) {

				navigate( 'prev' );

			}).end().find('span.ib-nav-next').bind('click.ibTemplate', function( event ) {

				navigate( 'next' );

			}).end().find('span.ib-close').bind('click.ibTemplate', function( event ) {

				closeImgPreview();

			}).end().find('span.title-close').bind('click.ibTemplate', function( event ) {

				closeImgPreview();

			});

			//resizing the window resizes the preview image
			$(window).bind('resize.ibTemplate', function( event ) {

				var $largeImg = $preview.children('img.ib-preview-img'),
				dim = getImageDim( $largeImg.attr('src') );

				$largeImg.css({
					width	: dim.width,
					height	: dim.height,
					left	: dim.left,
					top		: dim.top
				})

			});

		},
		// load the events for the content preview : close button
		initContentPreviewEvents = function() {

			$('#ib-content-preview').find('span.ib-close').bind('click.ibTemplate', function( event ) {

				closeContentPreview();

			}).end().find('span.title-close').bind('click.ibTemplate', function( event ) {

				closeContentPreview();

			});

		},
		// navigate the image items in fullscreen mode
		navigate = function( dir ) {

			if( isAnimating ) return false;

			isAnimating = true;

			var $preview = $('#ib-img-preview'),
			$loading = $preview.find('div.ib-loading-large');

			$loading.show();

			if( dir === 'next' ) {

				( current === imgItemsCount - 1 ) ? current	= 0 : ++current;

			}
			else if( dir === 'prev' ) {

				( current === 0 ) ? current	= imgItemsCount - 1 : --current;

			}

			var $item = $ibImgItems.eq( current ),
			largeSrc = $item.children('img').data('largesrc'),
			description	= $item.children('span').text();

			preloadImage( largeSrc, function() {

				$loading.hide();

				//get dimentions for the image, based on the windows size
				var	dim	= getImageDim( largeSrc );

				$preview.children('img.ib-preview-img')
				.attr( 'src', largeSrc )
				.css({
					width	: dim.width,
					height	: dim.height,
					left	: dim.left,
					top		: dim.top
				})
				.end()
				.find('span.ib-preview-descr')
				.text( description );

				$ibWrapper.scrollTop( $item.offset().top )
				.scrollLeft( $item.offset().left );

				isAnimating	= false;

			});

		},
		// closes the fullscreen image item
		closeImgPreview = function() {

			if( isAnimating ) return false;

			isAnimating	= true;

			var $item	= $ibImgItems.eq( current );

			$('body').find('span.title-close').hide();
			$('body').find('div.drag').show();

			$('#ib-img-preview').find('span.ib-preview-descr, div.ib-nav, span.ib-close')
			.hide()
			.end()
			.animate({
				height	: $item.height(),
				top		: $item.offset().top
			}, 500, 'easeOutExpo', function() {

				$(this).animate({
					width	: $item.width(),
					left	: $item.offset().left
				}, 400, function() {

					$(this).fadeOut(function() {
						isAnimating	= false;
					});

				} );

			});

		},
		// closes the fullscreen content item
		closeContentPreview = function() {

			if( isAnimating ) return false;

			isAnimating	= true;

			var $item = $ibItems.not('.ib-image').eq( current );

			$('body').find('span.title-close').hide();
			$('body').find('div.drag').show();

			$('#ib-content-preview').find('div.ib-teaser, div.ib-content-full, span.ib-close')
			.hide()
			.end()
			.animate({
				height	: $item.height(),
				top		: $item.offset().top
			}, 500, 'easeOutExpo', function() {

				$(this).animate({
					width	: $item.width(),
					left	: $item.offset().left
				}, 400, function() {

					$(this).fadeOut(function() {
						isAnimating	= false;
					});

				});

			});

			$('#ib-top').attr('class', 'ib-top');
			$('.ib-teaser').attr('class', 'ib-teaser');

		},
		// get the size of one image to make it full size and centered
		getImageDim = function( src ) {

			var img = new Image();
			img.src = src;

			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,
				height	: new_h,
				left	: (w_w - new_w) / 2,
				top		: (w_h - new_h) / 2
			};

		};

		return {
			init : init
		};

	})();

	Template.init();

});