window.addEvent('domready', function(){
	if(!$('portfolio')){ return; }
	/*******************************
	 * COLUMNS
	 ***********/
	var portfolio = $('portfolio');
	var portfolioStartingWidth = 169;
	var projects = $$('p[id*="project_"]');
	var portfolioOpened = false;
	var thumbContWidth;
	var allDetails = $$('#projectDetails div.details');
	var allThumbs = $$('#projectThumbs div[id*="_thumbs"]');
	var projectDetailsWidth = $('projectDetails').getWidth();
	var curTarget;
	var curProjectID;
	var curProjectDetails;
	var curProjectThumbs;
	var thumbContainerWidth = [ 105, 210, 315, 420 ];
	var curProjectThumbsWidth;
	
	// add click event to all project links
	projects.each(function(project){
		project.addEvent('click', projectClick);
	});
	
	function projectClick(e){
		// add selected class
		if(curTarget){ curTarget.removeClass('selected'); }
		curTarget = e.target;
		curTarget.addClass('selected');
		// hide details and thumbs
		hideDetails();
		hideThumbs();
		if(curProjectID === e.target.id){
			curProjectID = "";
			curProjectDetails = null;
			curProjectThumbs = null;
			closeWindow();
			return;
		}
		// save current project info
		curProjectID = e.target.id;
		curProjectDetails = $(curProjectID + '_details');
		curProjectThumbs = $(curProjectID + '_thumbs');
		// prepare requested details
		curProjectDetails.setStyles({ display: 'block', opacity:0 });
		curProjectThumbs.setStyles({ display: 'block', opacity:0 });
		// get requested project width
		curProjectThumbsWidth = thumbContainerWidth[curProjectThumbs.getChildren('div[class="col"]').length - 1] + 35;
		openWindow();
	}
	
	function hideDetails(){
		allDetails.each(function(details){
			details.setStyles({
				display: 'none',
				opacity: 0
			});
		});
	}
	
	function hideThumbs(){
		allThumbs.each(function(thumb){
			thumb.setStyles({
				display: 'none',
				opacity: 0
			});
		});
	}
	
	// window tween
	var windowTween = new Fx.Tween(portfolio, {
		onComplete: function(){
			curProjectDetails.fade('in');
			curProjectThumbs.fade('in');
			portfolioOpened = !portfolioOpened;
		}
	});
	
	function openWindow(){
		var windowWidth = portfolioStartingWidth + projectDetailsWidth + curProjectThumbsWidth;
		windowTween.start('width', windowWidth);
	}
	
	function closeWindow(){
		if(curTarget){ curTarget.removeClass('selected'); }
		windowTween.start('width', portfolioStartingWidth);
	}
	
	/*******************************
	 * SCROLL
	 ***********/
	
	var scrollUp = $('scrollUp');
	var scrollDown = $('scrollDown');
	var projectList = $$('#projectMask div.list')[0];
	var projectMask = $('projectMask');
	var listHeight = projectList.getHeight();
	var visibleArea = projectMask.getHeight();
	var scrollableArea = listHeight - visibleArea;
	var curPosTop = 0;
	var scrollTo;
	
	if(scrollableArea > 0){ scrollDown.setStyle('display', 'block'); }
	
	scrollUp.addEvent('click', function(e){
		scrollTo = 0;
		if(curPosTop < -visibleArea){ scrollTo = curPosTop + visibleArea; }
		if(scrollDown.getStyle('display') === 'none'){ scrollDown.setStyle('display', 'block'); }
		projectList.tween('top', scrollTo);
		curPosTop = scrollTo;
		if(curPosTop == 0) { e.target.setStyle('display', 'none'); }
	});
	
	scrollDown.addEvent('click', function(e){
		scrollTo = -scrollableArea;
		if(scrollTo < -visibleArea){ scrollTo = curPosTop - visibleArea; }
		if(scrollTo < -visibleArea){ scrollTo = -scrollableArea; }
		if(scrollUp.getStyle('display') === 'none'){ scrollUp.setStyle('display', 'block'); }
		projectList.tween('top', scrollTo);
		curPosTop = scrollTo;
		if(curPosTop === -scrollableArea){ e.target.setStyle('display', 'none'); }
	});
	
	/*******************************
	 * FULLSCREEN
	 *************/
	
	var imageThumbs = $$('#projectThumbs div[class="col"] img');
	var projectImages = [];
	var fullscreen = $('fullscreen');
	var client;
	var infoText = "? " + getLang() + " %";
	var curImage = 1;
	var fullscreenImages = [];
	
	imageThumbs.addEvent('click', function(e){
		curImage = 1;
		// client
		client = $$('p[id="' + e.target.getParent('div[id*="project"]').id.replace('_thumbs', '') + '"]')[0].get('text');
		// images
		projectImages = [];
		var projectImagesParents = e.target.getParent('div[id*="project_"]');
		projectImagesParents = projectImagesParents.getChildren();
		projectImagesParents.each(function(child){
			child.getChildren('img').each(function(image){
				projectImages.push(image);
			});
		});
		projectImages.each(function(project, index){
			if(project === e.target){ curImage = index; }
		});
		// get fullscreen container
		fullscreen.setStyles({display:'block', opacity:0});
		fullscreen.fade('in');
		// update client
		fullscreen.getFirst('h2').set('text', client);
		// remove current images
		var curImages = fullscreen.getFirst('div[class="imgs"]');;
		if(curImages.getChildren('img').length > 0){
			curImages.empty();
		}
		// inject images
		var newSRC;
		for(var i = 0; i < projectImages.length; i++){
			newSRC = projectImages[i].get('src').replace("_thumb", "_main");
			var img = new Element('img', {
				src: newSRC
			});
			img.inject(fullscreen.getFirst('div[class="imgs"]'));
			if(img.src === e.target.src.replace("_thumb", "_main")){
				curImage = i + 1;
			}
		}
		fullscreenImages = [];
		fullscreenImages = $$('#fullscreen div.imgs img');
		// update controls
		infoText = infoText.replace(infoText[0], curImage.toString());
		infoText = infoText.replace(infoText[infoText.length-1], projectImages.length.toString());
		$$('#controls span#info')[0].set('text', infoText);
		// show requested image
		changeImage();
	});
	
	// close
	var closeFullscreen = $('close');
	closeFullscreen.addEvent('click', function(e){
		fullscreen.setStyle('display', 'none');
	});
	
	// previous image
	var prevImageButton = $('prevImage');
	prevImageButton.addEvent('click', function(e){
		curImage--;
		changeImage();
	});
	
	// next image
	var nextImageButton = $('nextImage');
	nextImageButton.addEvent('click', function(e){
		curImage++;
		changeImage();
	});
	
	function changeImage(){
		if(curImage > fullscreenImages.length){ curImage = 1; }
		else if(curImage < 1){ curImage = fullscreenImages.length; }
		fullscreenImages.each(function(image){
			image.setStyle('display', 'none');
		});
		fullscreenImages[curImage - 1].setStyles({ display: 'block', opacity:0 });
		var imageLeftPos = 0;
		fullscreenImages[curImage - 1].setStyle('left', imageLeftPos);
		fullscreenImages[curImage - 1].fade('in');
		// update controls
		infoText = curImage + " " + getLang() + " " + fullscreenImages.length;
		$$('#controls span#info')[0].set('text', infoText);
	}
	
	function getLang(){
		var lang = window.location.toString();
		lang = lang.substring(lang.indexOf('lang=')+5);
		if(lang == "en"){ return "of"; }
		return "de";
	}
});