text: $(window).load(function(){
  
        // the main container
      var $GPContainer	= $('#container'),
        // 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();
  
    });
  