$(window).load(function(){
	
		// the main container
	var $GPContainer	= $('#main'),
		// the articles (the thumbs)
		$articles		= $GPContainer.children('div.block'),
		// total number of articles
		totalArticles	= $articles.length,
		// the fullview container
		$fullview		= $('<div id="fullview" class="full-view-elements"></div>').prependTo( $('body') ),
		// the overlay
		$overlay		= $('<div class="overlay"></div>').prependTo( $('body') ),
		
		GridPortfolio	= (function() {
				// current will be the index of the current article
			var animspeed				= 500,
				animeasing				= 'jswing', // try easeOutExpo
				current					= -1,
				// indicates if certain elements can be animated or not at a given time
				animrun					= false,
				init 					= function() {
					initPlugins();
					initEventsHandler();
				},
				// builds each article's carousel
				// initiallizes the mansory
				initPlugins				= function() {
					// apply carousel functionality to the thumbs-wrapper in each article
					$articles.find('div.thumbs-wrapper').gpCarousel();
					
					// apply mansory to the grid items
					$GPContainer.masonry({
						itemSelector	: '.item',
						columnWidth		: 5,
						isAnimated		: true
					});
				},
				// events
				initEventsHandler		= function() {
					// switch to fullview when we click the "View Project" link
					$articles.each( function(i) {
						$(this).find('a.more_link').bind('click.GridPortfolio', function(e) {
							
							if( animrun ) return false;
							animrun			= true;
							
							var $article	= $(this).closest('div.block');
							// update the current value
							current	= $article.index('.block');
							// hide scrollbar
							$('body').css( 'overflow', 'hidden' );
							// preload the fullview image and then start the animation (showArticle)
							var $intro		= $article.find('div.intro');
							$intro.addClass('intro-loading');
							$('<img/>').load(function() {
								$intro.removeClass('intro-loading');
								showArticle( $article, true );
								animrun	= false;
							}).attr('src', $article.data('bgimage'));
							
							return false;
						});
					});
					
					// fullview navigation
					$('#fullview').find('span.full-nav-next').live('click.GridPortfolio', function(e) {
						if( animrun ) return false;
						animrun	= true;
						
						// circular navigation
						if( current === totalArticles - 1 )
							current = 0
						else
							++current;
						// update the fullview current articles number	
						$fullview.find('span.full-nav-current').html( current + 1 );
						
						showFullviewArticle();
					});
					$('#fullview').find('span.full-nav-prev').live('click.GridPortfolio', function(e) {
						if( animrun ) return false;
						animrun	= true;
						
						// circular navigation
						if( current === 0 )
							current = totalArticles - 1
						else	
							--current;
						// update the fullview current articles number	
						$fullview.find('span.full-nav-current').html( current + 1 );
						
						showFullviewArticle();
					});
					
					// switch to thumbs view
					$('#fullview').find('span.full-view-exit').live('click.GridPortfolio', function(e) {
						var $article	= $articles.eq( current );
						hideArticle( $article );
					});

					// window resize 
					// center the background image if in fullview
					// reinitialise jscrollpane
					$(window).bind('resize.GridPortfolio', function(e) {
						var $bgimage	= $fullview.find('img.bg-img');
						if( $bgimage.length )
							centerBgImage( $bgimage );
							
						$fullview.find('div.project-descr-full-wrapper').jScrollPane('reinitialise');
					});
				},
				// the clicked article will be cloned;
				// the clone will be positioned on top of the cloned article;
				// remove every element from the clone except the thumbs wrapper (basically the image);
				// enlarge the clone to the window's width & height;
				// move the thumbs wrapper to the position where the fullview's thumbs wrapper will be placed;
				// at the same time fade in the overlay;
				// build the fullview panel with the right data (template)
				// remove the clone
				
				// this function will also be used when we close the fullview article. In this case,
				// the difference is that we don't animate the values (just set the css values), and the clone is not removed, since we
				// will use it for the animation (back to the thumb position)
				showArticle				= function( $article, anim ) {
					// clone the article
					var	$clone	= $article.clone().css({
						left	: $article.offset().left + 'px',
						top		: $article.offset().top + 'px',
						zIndex	: 1001,
						margin	: '0px',
						height	: $article.height() + 'px'
					}).attr( 'id', 'article-clone' );
					
					// this is the images container which is going to "fly" down
					var $thumbsWrapper	= $clone.find('div.thumbs-wrapper');
					
					// remove unnecessary elements from the clone
					$clone.children().not($thumbsWrapper).remove();
					$clone.find('div.thumbs-nav').remove();
					
					// position the clone on top of the article with the right css style
					var padding	= 20 + 20;
					// animate?
					$.fn.applyStyle = ( anim ) ? $.fn.animate : $.fn.css;
					
					var clonestyle 	= {
						width	: $(window).width() - padding + 'px',
						height	: $(window).height() - padding + 'px',
						left	: '0px',
						top		: $(window).scrollTop() + 'px'
					};
					
					$clone.appendTo( $('body') ).stop().applyStyle( clonestyle, $.extend( true, [], { duration : animspeed, easing : animeasing, complete : function() {
						// show the panel (it will be hidden behing the clone though, until this one is removed)
						$fullview.show()
						
						// use the template "fullviewTmpl" to build the fullview panel with the right data
						var articleFullviewData		= getArticleFullviewData($article);
						articleFullviewData.current	= current + 1;
						articleFullviewData.total	= totalArticles;
						var $fullview_content	= $('#fullviewTmpl').tmpl( articleFullviewData );
						
						$fullview_content.appendTo( $fullview );
						
						// call the gpCarousel plugin on the fullview thumbs-wrapper
						$fullview_content.find('div.thumbs-wrapper').gpCarousel({
							start	: $article.find('div.thumbs-wrapper').data('currentImage')
						});
						
						//jscrollpane
						$fullview_content.find('div.project-descr-full-wrapper').jScrollPane('destroy').jScrollPane({
							verticalDragMinHeight: 40,
							verticalDragMaxHeight: 40
						});
						
						// center bg image
						centerBgImage( $fullview.find('img.bg-img') );
						
						// fade out overlay
						$overlay.stop().css( 'opacity', 0 );
						
						// fade out clone to show the fullview panel. After that remove the clone
						$clone.fadeOut( 300, function() { $clone.remove(); } );
					}}));
					
					// animate the images container to the position where is going to be on fullview
					var thumbsstyle 	= {
						left	: $(window).width() - $thumbsWrapper.width() - 25 + 'px',  // 25 is the margin left / right of the fullview thumbs-wrapper
						top		: ($(window).height() / 2) - ($thumbsWrapper.height() / 2) - 22 + 'px' // 10 is the margin top / bottom of the fullview thumbs-wrapper
					};
					$thumbsWrapper.stop().applyStyle( thumbsstyle, $.extend( true, [], { duration : animspeed, easing : animeasing} ) );
					
					// fade in overlay
					( anim ) ? $overlay.show().fadeTo( animspeed, 0.7, animeasing ) : $overlay.show().css( 'opacity', 0.7 );
				},
				// close the fullview
				hideArticle				= function( $article ) {
					// create the article's clone. the second argument is false to prevent the clone to be removed
					showArticle( $article, false );
					// hide the overlay for now
					$overlay.hide();
					// reference to the created clone and its thumbs wrapper
					var $clone			= $('#article-clone'),
						$thumbsWrapper	= $clone.find('div.thumbs-wrapper');
					// fade in the clone
					$clone.hide().fadeIn( 200, function() {
						// remove the contents of the fullview container
						$fullview.empty();
						// animate the clone to the article position and size
						$(this).animate({
							left	: $article.offset().left + 'px',
							top		: $article.offset().top + 'px',
							width	: $article.width() + 'px',
							height	: $article.height() + 'px'
						}, animspeed, animeasing, function() {
							// remove the clone
							$clone.remove();
							// show the scrollbar
							$('body').css( 'overflow', 'visible' );
						});
						
						// animate the clone's thumbs wrapper so it moves to the article's thumbs wrapper position
						$thumbsWrapper.animate({
							left	: '0px',
							top		: '0px'
						}, animspeed, animeasing);
						
						// fade out the overlay
						$overlay.show().fadeTo( animspeed, 0, animeasing, function() { $overlay.hide() } );
					});
				},
				// gets the article's necessary info to build the fullview panel
				getArticleFullviewData	= function( $article ) {
					return {
						bgimage			: '<img src="' + $article.data('bgimage') + '" class="bg-img"></img>',
						title 			: $article.find('h2.title').text(),
						thumbs			: $article.find('div.thumbs').html(),
						subline			: $article.find('p.subline').text(),
						description		: $article.find('div.project-descr').html()
					}
				},
				// used when navigating in fullview
				// needs to get the next / previous article's info
				showFullviewArticle		= function() {
					var $article					= $articles.eq( current ),
						articleFullviewData			= getArticleFullviewData($article),
					
						$loading					= $fullview.find('span.loading-small'),
					
						$fullviewImage				= $fullview.find('img.bg-img'),
					
						$fullviewTitle				= $fullview.find('h2.title'),
						
						$fullviewSubline			= $fullview.find('p.subline'),
						
						$fullviewDescriptionWrapper	= $fullview.find('div.project-descr-full-wrapper'),
						$fullviewDescription		= $fullviewDescriptionWrapper.find('div.project-descr-full-content'),
						
						$fullviewProjectDescrFull	= $fullview.find('div.project-descr-full'),
						$fullviewThumbsWrapper		= $fullviewProjectDescrFull.find('div.thumbs-wrapper'),
						$newFullviewThumbsWrapper	= $('<div class="thumbs-wrapper"><div class="thumbs">' + articleFullviewData.thumbs + '</div></div>');
					
					// preload the article's background image
					$loading.show();
					$( articleFullviewData.bgimage ).load(function() {
						$loading.hide();
						var $bgImage	= $(this);
						$bgImage.insertBefore( $fullviewImage );
						// center the bg image
						centerBgImage( $bgImage );
						$fullviewImage.remove(); 
						
						$fullviewTitle.html( articleFullviewData.title );
						
						$fullviewSubline.html( articleFullviewData.subline );
						
						$fullviewDescriptionWrapper.jScrollPane('destroy');
						$fullviewDescription.html( articleFullviewData.description );
						$fullviewDescriptionWrapper.jScrollPane('destroy').jScrollPane({
							verticalDragMinHeight: 40,
							verticalDragMaxHeight: 40
						});
						
						$fullviewThumbsWrapper.remove();
						$fullviewProjectDescrFull.prepend( $newFullviewThumbsWrapper );	
						$newFullviewThumbsWrapper.gpCarousel();
						
						animrun	= false;
					}).attr('src', $article.data('bgimage'));
					
				},
				// centers the background image
				centerBgImage			= function( $img ) {
					var dim	= getImageDim($img);
					//set the returned values and show the image
					$img.css({
						width	: dim.width + 'px',
						height	: dim.height + 'px',
						left	: dim.left + 'px',
						top		: dim.top + 'px'
					});
				},
				//get dimentions of the image,
				//in order to make it full size and centered
				getImageDim				= function($i) {
					var $img     = new Image();
					$img.src     = $i.attr('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
			};
			
		})()
	
	GridPortfolio.init();
	
});