var effectActive = true;
var portfolioHorizontalViewport;
var portfolioVerticalViewport;
var portfolioOverviewContainer;
var portfolioDetailContainer;
var showMode = 'overview';
var currentProjectId;

function initPortfolioOverview() {
	portfolioHorizontalViewport = $('portfolio-horizontal-viewport');
	portfolioVerticalViewport = $('portfolio-vertical-viewport');
	portfolioOverviewContainer = $('portfolio-overview-container');
	portfolioDetailContainer = $('portfolio-detail-container');
	var portfolioViewportScroll = new Fx.Scroll(portfolioHorizontalViewport, { link : 'cancel' });
	portfolioViewportScroll.set(0, 0);
	portfolioViewportScroll = new Fx.Scroll(portfolioVerticalViewport, { link : 'cancel' });
	portfolioViewportScroll.set(0, 0);
	effectActive = false;
}
function changeViewMode(mode) {
	if (effectActive == true) {
		if (mode == 'overview') {
			showMode = 'overview';
		} else {
			showMode = 'detail';
		}
		setPortfilioNav();
		
		var portfolioViewportScroll = new Fx.Scroll(portfolioVerticalViewport, {
			wheelStops : false,
			duration: 700,
			transition: Fx.Transitions.Linear,
			onComplete: function() {	
				if (mode == 'overview') {
					if (portfolioDetailContainer.getElement('.portfolio-detail')) {
						portfolioDetailContainer.getElement('.portfolio-detail').dispose();
					}
				}
				effectActive = false;
			}
		});
		if (mode == 'detail') {
			portfolioViewportScroll.start(0, 490);
		} else {
			portfolioViewportScroll.start(0, 0);
		}
	}
}
function nextPrevPortfolio(direction) {
	if (showMode == 'detail') {
		nextPrevPortfolioDetail(direction);
	} else {
		nextPrevPortfolioOverview(direction);
	}
	return false;
}
function backToOverview() {
	if (showMode == 'detail') {
		if (effectActive == false) {
			effectActive = true;
			changeViewMode('overview');
		}
		return false;
	} else {
		return true;
	}
}
function showProject(projectId) {
	if (portfolioArray[projectId]) {
		if (effectActive == false) {
			effectActive = true;
			currentProjectId = projectId;
			var projectData = portfolioArray[projectId];
			
			// create project detail element
			var newProjectElement = new Element('div', {
				 'class' : 'portfolio-detail clearfix'
			}).inject(portfolioDetailContainer);
			var detailReference = createDetailDiv(projectId).inject(newProjectElement);
			if (detailReference.getElement('.content').getScrollSize().y > detailReference.getElement('.content').getSize().y) {
				if (!(Browser.ie6 || Browser.ie7)) {
					new MooScroll();
				}
			}
			if (projectData['file'] && projectData['file'].length > 1) {
				initCarouselSlider(detailReference.getElement('.viewport'), detailReference.getElement('.container'), '.item');
				addReflectionToImage(detailReference.getElement('.container').getLast('.item').getElement('img'));
			}
			changeViewMode('detail');
		}
		return false;
	} else {
		return true;
	}
}
function nextPrevPortfolioDetail(direction) {
	if (effectActive == false) {
		effectActive = true;
		
		// first add a wrapper element around the current detail element to contain the next overview table
		var wrapperElement = new Element('div', {styles: {width: '1880px'}}).wraps(portfolioDetailContainer.getElement('.portfolio-detail'));
		
		var originalDetailItem = portfolioDetailContainer.getElement('.portfolio-detail');
		
		var portfolioViewportScroll = new Fx.Scroll(portfolioHorizontalViewport, {
			wheelStops : false,
			duration: 700,
			transition: Fx.Transitions.Linear,
			onComplete: function() {	
				newDetailItem.inject(portfolioDetailContainer, 'top');
				wrapperElement.dispose();
				effectActive = false;
			}
		});
		var nextDetailItem, floatDirection;
		if (direction==-1) {
			floatDirection = 'right';
			portfolioViewportScroll.set(940, 0);
		} else {
			floatDirection = 'left';
		}
		currentProjectId += direction;
		
		originalDetailItem.set('styles', { float: floatDirection });
		
		// create new portfolio overview table
		var newDetailItem = new Element('div', {
				'class' : 'portfolio-detail',
				styles : {
					float : floatDirection
					}
		}).inject(wrapperElement);
		
		setPortfilioNav();
		var detailItemContent = createDetailDiv(currentProjectId);
		var detailReference = detailItemContent.inject(newDetailItem);
		if (detailReference.getElement('.content').getScrollSize().y > detailReference.getElement('.content').getSize().y) {
			if (!(Browser.ie6 || Browser.ie7)) {
				new MooScroll();
			}
		}
	
		if (portfolioArray[currentProjectId]['file'] && portfolioArray[currentProjectId]['file'].length > 1) {
			initCarouselSlider(detailReference.getElement('.viewport'), detailReference.getElement('.container'), '.item');
			addReflectionToImage(detailReference.getElement('.container').getLast('.item').getElement('img'));
		}

		portfolioViewportScroll.start((direction==-1) ? 0 : 940,0);
	}
}
function nextPrevPortfolioOverview(direction) {
	if (effectActive == false) {
		effectActive = true;
		
		// first add a wrapper element around the current overview table to contain the next overview table
		var wrapperElement = new Element('div', {styles: {width: '1880px'}}).wraps(portfolioOverviewContainer.getElement('.portfolio-overview'));
		
		var originalOverviewTable = portfolioOverviewContainer.getElement('.portfolio-overview');
		
		var portfolioViewportScroll = new Fx.Scroll(portfolioHorizontalViewport, {
			wheelStops : false,
			duration: 700,
			transition: Fx.Transitions.Linear,
			onComplete: function() {	
				newOverviewTable.inject(portfolioOverviewContainer, 'top');
				wrapperElement.dispose();
				effectActive = false;
				portfolioOverviewContainer.getElement('table').removeProperty('style');
				console.log();
			}
		});
		var nextPortfolioItem, floatDirection;
		if (direction==-1) {
			floatDirection = 'right';
			portfolioViewportScroll.set(940, 0);
			firstPortfolioItem -=1;
			nextPortfolioItem = firstPortfolioItem*6;
		} else {
			floatDirection = 'left';
			firstPortfolioItem +=1;
			nextPortfolioItem = firstPortfolioItem*6;
		}
		
		setPortfilioNav();
		
		originalOverviewTable.set('styles', { float: floatDirection });
		
		// create new portfolio overview table
		var newOverviewTable = new HtmlTable({
			properties: { 'class' : 'portfolio-overview',
						styles : { float : floatDirection }
			}
		}).inject(wrapperElement);
		
		
		newOverviewTable.push([createOverviewTd(nextPortfolioItem), createOverviewTd(nextPortfolioItem+1), createOverviewTd(nextPortfolioItem+2)]);
		newOverviewTable.push([createOverviewTd(nextPortfolioItem+3), createOverviewTd(nextPortfolioItem+4), createOverviewTd(nextPortfolioItem+5)]);
		//addReflectionsChildren(newOverviewTable);
		portfolioViewportScroll.start((direction==-1) ? 0 : 940,0);
	}
}
function createOverviewTd(projectId) {
	if (portfolioArray[projectId]) {
		var projectData = portfolioArray[projectId];
		var projectElement = new Element('div');
		var showProjectFunction = function() { showProject(projectId) };
		
		new Element('h6', {
			html: projectData['title'],
			events: {
				click: showProjectFunction
			}
		}).inject(projectElement);
		var imgSrc = (projectData['file'].length) ? '/thumbnail.php?thumb=mediaitem/'+projectData['file'][0]+'.jpg&size=portfolio_overview' : '/images/gls/no_portfolio_image.png';
		new Element('img', {
			src : wwwroot+imgSrc,
			width : 282, 
			height : 159,
			alt : projectData['title'],
			'class' : 'reflect rheight11 ropacity25',
			events: {
				click: showProjectFunction,
				load: function() { addReflectionToImage(this); }
			}
		}).inject(
			new Element('div', {
				'class': 'img-container'
			}).inject(projectElement)
		
		
		);
		new Element('div', {
			'class' : 'tags', 
			html: projectData['tags']
		}).inject(projectElement);
		
		return projectElement;
	} else {
		return null;
	}
}
function createDetailDiv(projectId) {
	if (portfolioArray[projectId]) {
		var projectData = portfolioArray[projectId];
		var projectElement = new Element('div');
		var textColumn = new Element('div', {
				'class' : 'text-column'
			});
		new Element('h4', {
			html: projectData['title']
		}).inject(textColumn);
		var contentColumn = new Element('div', {
			'class' : 'content scroll'
		});
		new Element('div', {
			'class' : 'text',
			html : projectData['text']
		}).inject(contentColumn);
		
		var partnerClientDiv = new Element('div', {
			'class' : 'partner-client'
		});
		if (projectData['partner']) {
			new Element('span', {
				html : 'opdrachtgever'
			}).inject(partnerClientDiv);
			if (projectData['partnerUrl']) {
				new Element('a', {
					href : projectData['partnerUrl'],
					target : '_blank',
					html : projectData['partner']
				}).inject(partnerClientDiv);
			} else {
				new Element('div', {
					html : projectData['partner']
				}).inject(partnerClientDiv);
			}
		}		
		if (projectData['client']) {
			new Element('span', {
				html : 'klant'
			}).inject(partnerClientDiv);
			if (projectData['clientUrl']) {
				new Element('a', {
					href : projectData['clientUrl'],
					target : '_blank',
					html : projectData['client']
				}).inject(partnerClientDiv);
			} else {
				new Element('div', {
					html : projectData['client']
				}).inject(partnerClientDiv);
			}
		}
		partnerClientDiv.inject(contentColumn);
		
		if (projectData['tags']) {
			var tagsDiv = new Element('div', {
				'class' : 'tags'
			});
			new Element('span', {
					html : 'tags'
				}).inject(tagsDiv);
			new Element('div', {
				html : projectData['tags']
			}).inject(tagsDiv);
			tagsDiv.inject(contentColumn);
		}
		contentColumn.inject(textColumn);
		
		if (projectData['url']) {
			new Element('a', (projectData['urlTitle']) ? {
				'class' : 'project-link',
				href : projectData['url'],
				target : '_blank',
				html : projectData['urlTitle']
			} : {
				'class' : 'project-link',
				href : projectData['url'],
				target : '_blank',
				html : projectData['url']
			}).inject(
				new Element('div', {
					'class' : 'link'
				}).inject(textColumn)
			);
		}
		
		textColumn.inject(projectElement);
		
		
		var imageColumn = new Element('div', {
				'class' : 'img-column viewport'
			});
		var imgContainer  = new Element('div', {
				'class' : 'container'
			});
		if (projectData['file']) {
			projectData['file'].each(function(item, index) {
				var imgSrc = '/thumbnail.php?thumb=mediaitem/'+item+'.jpg&size=portfolio_detail';
				new Element('img', {
					src : wwwroot+imgSrc,
					width : 594, 
					height : 334,
					alt : projectData['title'],
					'class' : 'reflect rheight15 ropacity25',
					events: {
						load: function() { addReflectionToImage(this); }
					}
				}).inject(
					new Element('div', {
						'class': 'item'
					}).inject(imgContainer)
				);
			});		
		}
		imgContainer.inject(imageColumn);
		imageColumn.inject(projectElement);

		return projectElement;
	} else {
		return new Element('div');
	}
}
function setPortfilioNav() {
	if (showMode == 'detail') {
		$('portfolio-back').removeClass('displayNone');
		if (portfolioArray.length > currentProjectId+1) {
			$('portfolio-next').removeClass('displayNone');
		} else {
			$('portfolio-next').addClass('displayNone');
		}
		if (currentProjectId > 0) {
			$('portfolio-previous').removeClass('displayNone');
		} else {
			$('portfolio-previous').addClass('displayNone');
		}
	} else {
	$('portfolio-back').addClass('displayNone');
		if (portfolioArray.length >= (firstPortfolioItem+1)*6) {
			$('portfolio-next').removeClass('displayNone');
		} else {
			$('portfolio-next').addClass('displayNone');
		}
		if (firstPortfolioItem > 0) {
			$('portfolio-previous').removeClass('displayNone');
		} else {
			$('portfolio-previous').addClass('displayNone');
		}
	}
}