function loadShowcase(){

	/* different behavvior when is on homepage */
	var isHome = $('body').hasClass("home");

	/* 
	 *	projPreview - project preview 
	 *	Loading  project information based on portfolio link id
	 *
	 * */
	var projPreview = {
	
		/* html elements */
		projHtml: "<div id=\"projects-showcase-preview\"><div></div></div>",
		loadingHtml: "<p class=\"loading\">Loading ...</p>",
		detailsHtml: "<div class=\"details\"></div>",
		detailsHtmlIE6: "<span class=\"details-overlay\"></span>",
		el: "#projects-showcase-preview div",

		/* create container if necessary */
		create: function() {
			if($("#projects-showcase-preview").length==0) {
				$("#projects-showcase").before(this.projHtml);
			}
		},

		/* show loading info */
		showLoading: function() {
			$(this.el).html(this.loadingHtml);
		
		},

		/* show screenshot for a particular project*/
		show: function(id) {
			this.create();

			this.showLoading();
			$.ajax({
				url: '/portfolio?data_type=plain&id='+id,
				type: 'GET',
				dataType: 'json',

				/* loading response */
				success: function(response) {

					_image = response[0]['image'];
					_info = response[0]['info'];

					/* loading image */
					if(_image) {
						_image = "<img src=\""+_image+"\" alt=\"\"/>";
					} else {
						_image = "<p class=\"info\">Sorry, there is no image to load !</p>"; 
					}

					/* write element */
					$(projPreview.el).append(_image);

					/* show response */
					$(projPreview.el).find('.loading').fadeOut(
						"slow",
						function(){
							$(projPreview.el).find('p.loading').remove();
							$(projPreview.el).find('p.info').fadeIn("slow");
							$(projPreview.el).find('img').fadeIn("slow");
							}
							
					);

					/* loading details overlay */
					if( Supra.isIE6() ) {
						$(projPreview.el).append(projPreview.detailsHtmlIE6);
					}
					$(projPreview.el).append(projPreview.detailsHtml);

					$(projPreview.el).hoverIntent({
						sensitivity: 5,
						interval: 300,
						over: function() {
							$(projPreview.el).find('span.details-overlay').fadeIn("slow");
							$(projPreview.el).find('div.details').fadeIn("slow");
							projShowcase.togglePaginationInfo( 1 );
							},
						timeout: 300,
						out: function() {
							
							}
						});
					
					$(projPreview.el).find('div.details').hover(
						function(){
						},
						function(){
							$(projPreview.el).find('div.details').fadeOut("slow");
							$(projPreview.el).find('span.details-overlay').fadeOut("slow");
							projShowcase.togglePaginationInfo( 0 );
						}
						);
	
					/* coresponding link element in nav */
					_project_link =  $(projShowcase.el).find("ol li a")[id];
				
					if(!(_info)) {
						_info = "B, do some magic here !!!"
					}
					_info = "<p>"+_info+"</p>";
					_info_title = "<h3>"+$(_project_link).html()+"</h3>";
					_info_link = "<a href=\""+_project_link.href+"\" class=\"details\">View details</a>";

					$(projPreview.el).find(".details").append(_info_title,_info,_info_link);
					
				}
			});
		}
		
	}

	/*
	 * projPages - projects pages
	 * Handles projects list navigation
	 *
	 */
	var projPages = {

		pageCount	: 0,
		pageActive	: 0,
		pageWidth	: 759,
		pages		: null,
		htmlNav		: "<ul class=\"nav\"><li><a href=\"#\" class=\"prev\">Previous</a></li><li><a href=\"#\" class=\"next\">Next</a></li></ul>",

		init: function() {
			projects = $(projShowcase.el).find("ol li");
			if(projects.length>9) {

				/* add pagination nav */
				$(projShowcase.el).find('.inner-projects').append(this.htmlNav);

				/* set up nav behavior*/
				$(projShowcase.el).find('.nav a.prev').click(function(){
					projPages.prevPage();
					return false;
				});

				$(projShowcase.el).find('.nav a.next').click(function(){
					projPages.nextPage();
					return false;
				});

				/* add pagination containers */
				$(projShowcase.el).find("ol").wrapAll("<div class=\"pages\"></div>");
				$(projShowcase.el).find(".pages").wrap("<div class=\"page\"></div>");
			}

			/* prepare pages */
			this.pageCount	= Math.ceil(projects.length/9);
			this.pageActive	= 1

			this.pages = $(projShowcase.el).find(".pages");
			$(this.pages).css("width",this.pageCount*this.pageWidth+"px");
			$(this.pages).css("margin-left", 0);

			this.updateNav();
			this.loadFirstProject();

		},

		nextPage: function() {
			if( this.pageActive < this.pageCount ) {
				this.pageActive = this.pageActive + 1 ;
				this.slidePages();
			}
		},

		prevPage: function() {
			if( this.pageActive > 1) {
				this.pageActive = this.pageActive -1 ;
				this.slidePages();
			}
		},

		updateNav: function() {
			// first page 
			$(projShowcase.el).find('.nav li').removeClass("inactive");
			if(this.pageActive == 1 ) {
				$(projShowcase.el).find('.nav a.prev').parent().addClass("inactive");
			}
			if(this.pageActive == this.pageCount ) {
				$(projShowcase.el).find('.nav a.next').parent().addClass("inactive");
			}
		},

		loadFirstProject: function() {
			projShowcase.showPreview((this.pageActive-1)*9);
		},

		slidePages: function() {

			/* fixing page height */
			$(projShowcase.el).find('.page').height($(this.pages).height());

			repos = -(this.pageActive-1)*this.pageWidth;
			$(this.pages).css("margin-left",repos);

			this.updateNav();
			this.loadFirstProject();
		}

	}


	/* 
	 * projShowcase - project showcase  */	
	var projShowcase = {

	  el: null,
	  
	  hasPages: false,
	  isClosed: false,
	  elCloseLink: null,

	  htmlClose: "<a href=\"#close\" class=\"close\">Close</a>",
	  htmlOpen: "<a href=\"#open\" class=\"open\">Open</a>",
	  htmlInfo: [ 
		"Mouse over project image to view details",
		"Please select from the range of services below to see what we can help you with."
		],

	  /* init object */
	  init:function() {
		this.el = $("#projects-showcase .projects");
		this.prepareAll();
	  },

	  /* Prepare elements for all pages */
	  prepareAll: function(){
		/* Add html for elements */
		this.addContainer();
		if(isHome) {
			this.addProjectsLinks();
			this.addPaginationInfo();
		}
		this.addToggleLinks();
	  },

		/* insert container to use to toggle */
		addContainer: function() {
			$(projShowcase.el).wrapInner("<div class=\"inner-projects\"></div>");
		},


		/* Add open/close links */
		addToggleLinks: function() {

			/* close link */
			projShowcase.el.append(this.htmlClose);
			projShowcase.el.append(this.htmlOpen);

			this.elCloseLink= projShowcase.el.find("a.close");
			this.elCloseLink.click(function(){
				projShowcase.doToggle();
				return false;
			});

			this.elOpenLink= projShowcase.el.find("a.open");
			this.elOpenLink.click(function(){
				projShowcase.doToggle();
				return false;
			});

			/* if not home and cookie.project_showcase_toggle = false, hide  */

			if( ($('body.home').length==0) && ($.cookie('project_showcase_toggled')=='true')) {
				projShowcase.doToggle();
			}
			
		},

		/* fire preview event */
		showPreview: function(id) {
			if(isHome) {
				/* show screenshot for id*/
				projPreview.show(id);

				/* set up the active link */
				projectsLinks = $(projShowcase.el).find("ol li a");
				$(projectsLinks).removeClass("active");
				$(projectsLinks[id]).addClass("active");
			}
		},

		/* override href for project links */
		addProjectsLinks: function() {
			$(projShowcase.el).find("ol li").each(function(id,el){
				$(el).find('a').click(function(){
					/* fire only when is not active */
					if(!($(this).hasClass("active"))) {
						projShowcase.showPreview(id);
					}
					return false;	
				})
			});
		},

		addPaginationInfo: function() {
			$(projShowcase.el).append("<p>"+this.htmlInfo[0]+"</p>");
		},

		togglePaginationInfo: function( id ) {
			_info = $(projShowcase.el).find("p");

			$(_info).fadeOut("fast",function(){
				$(_info).html(projShowcase.htmlInfo[id] );
				$(_info).fadeIn("fast");
			});
		},
		

		/* slideUp projects-showcas */
		doToggle: function() {

			if( $(projShowcase.el).hasClass( "toggled" ) ) {
				$(projShowcase.el).find('.inner-projects').slideDown( 'fast', function(){
					$(projShowcase.el).find( '.nav, h2').fadeIn( 'fast' );
				} );
			} else {
				$(projShowcase.el).find( '.nav, h2').hide();
				$(projShowcase.el).find('.inner-projects').slideUp( 'fast' );
			}

			isToggled = $(projShowcase.el).toggleClass("toggled").hasClass("toggled");
			
			/* set current state in a cookie */
			$.cookie('project_showcase_toggled', isToggled, { expires: 30, path: '/' })
		}
		
	}

	projShowcase.init();
	projPages.init();
	/* load latest project */

};