/*
 * #project-preview behavior
 * @author Viorel Cojocaru (viorel@beanon.com)
 */

function loadPreview(){
	var projectPreview = {
		navHtml: "<ul class=\"nav\"></ul>",
		elm: null,
		nav: null,
		screens: null,

		load: function() {
			this.elm = $("#project-preview");

			if( $(this.elm).length > 0 ) {
				this.screens = $("#project-preview div.preview");
				this.loadNav();
				this.show(0);
			 }
		},

		loadNav: function() {
			items = '';
			$(this.screens).each(function(idx,el){
				items = items + "\n<li><a href=\"#\">"+(idx+1)+"</a></li>";
			});
			
			$(this.elm).append(this.navHtml);
			this.nav = $("#project-preview .nav");
			
			$(this.nav).append(items);

			// add links behavior
		    $(this.nav).find("a").each(function(idx){
				$(this).click(function(){
					projectPreview.show(idx);
					return false;
				});
			});	
			
		},

		show: function(id) {

			// save height
			$(this.elm).height($(this.elm).height());
	
			// toogle screenshot 
			$(this.screens).hide();
			$(this.screens[id]).show();

			// toggle nav
			$(this.nav).find('li').removeClass('active');
			$($(this.nav).find('li')[id]).addClass('active');

				// update links labels
				$(this.nav).find('a').each( function(idx,el){
					$(el).html((idx+1));
				});

				$(this.nav).find('.active a').html( "Showing screen "+(id+1)+" from "+this.screens.length );

			// restore fluid height
			$(this.elm).height("auto");
			
		}
	
	};

	projectPreview.load();
	
};