/**
	*
	*	init document
	*
	**/
	
	initDocument = function() {
	
		Element.hide($$('div.portfolio-desc')[0]);
		Element.hide($$('div.img-container')[0]);
		Element.hide($$('div.nav-portfolio-thumbs')[0]);
		
		new Insertion.Top($$('div.portfolio-big-imgs')[0], '<div class="portfolio-loading"><img src="/imgs/loading.gif" alt="loading" /></div>');
		
		loadingObserver = window.setInterval(function() { observeLoading(); }, 250);
	
	}
	
	
	
	
	
	
	
	/**
	*
	*	loading progress
	*
	**/
	
	imgs = $$('div.img-container img');
	observeLoading = function() {
	
		c = 0;
		
		for(i=0; i<imgs.length; i++) {
			if(imgs[i].complete == true) { c++; }
		}
		
		if(c == imgs.length) { 
			clearInterval(loadingObserver);
			window.setTimeout(function() { finishLoading(); }, 1000);
		}
	
	}
	
	
	
	
	
	
	
	/**
	*
	*	finish loading
	*
	**/
	
	effect = false;
	finishLoading = function() {
	
		Element.remove($$('div.portfolio-loading')[0]);
		
		new Effect.Appear($$('div.img-container')[0], { duration: 0.4 });
		new Effect.Appear($$('div.nav-portfolio-thumbs')[0], { duration: 0.4 });
		
		Event.observe($$('div.portfolio-big-imgs-overlay')[0], 'mouseover', function() { 
			if(effect) { effect.cancel(); }
			effect = new Effect.Appear($$('div.portfolio-desc')[0], { duration: 0.3, to: 0.8 });
		});
		
		Event.observe($$('div.portfolio-big-imgs-overlay')[0], 'mouseout', function() { 
			if(effect) { effect.cancel(); }
			effect = new Effect.Fade($$('div.portfolio-desc')[0], { duration: 0.3 });
		});
		

		thumbs = $$('div.nav-portfolio-thumbs a');
		for(i=0; i<thumbs.length; i++) {
		
			thumbs[i].onclick = function() { scrollImg(this.getAttribute('rel')); return false; };
			
		}
	
	}
	
	
	
	
	
	
	
	
	
	
	
	/**
	*
	*	scroll to img 
	*
	**/
	
	scrollImg = function(to) {
	
		new Effect.Morph($$('div.img-container')[0], { style: 'left:-' + (517 * to) + 'px', duration: 0.3 });
	
	}