$(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();

  });
