var oPortfolio = false;


$(document).ready( function() {
	oPortfolio = new Portfolio();
	oPortfolio.init();
	
});


var Portfolio = function() {
	
	this.iHeight = false;
	this.iWidth = false;
	this.iImageHeight = false;
	this.iImageWidth = false;
	this.oProjectIds = false;
	this.oProject = false;
	
	this.iActiveProject = false;
	
	this.iImagePointer = 0;
	this.iProjectPointer = 0;
	
	this.iImageCount = 0;
	this.iProjectCount = 0;
	
	this.aImageHistory = new Array();
	this.aProjectCache = new Array();
	
	this.sActiveFilterType = 'random';
	this.sVideo = false;
	
	
	this.init = function() {
		this.initNavigation();
		this.setOnResize();
		this.setDimensions();
		this.setProjects();
		this.showTip();
		this.initFilters();
		this.initHashBang();
		
		
	}
	
	this.initHashBang = function() {
		sHash = document.location.hash.replace('#!','');
		a = sHash.split(':');
		
		if(a.length == 2) {

			$('#pftype-'+a[0]).click();
			$('#'+a[0]+'-'+a[1]).click();
			this.hidePfValueNav();
			
		}
	}
	
	this.initFilters = function() {
		
		var that=this;
		
		// Folds
		$('#pf-type-trigger').click( function() {
			
			if($(this).hasClass('active')) {				
				that.hidePfTypeNav();
			} else {
				that.showPfTypeNav();
			}
		});
		
		// Types
		$('a.pftype-selector').click( function() {
			that.setPfType(this);
		});
		
		// Values
		$('#pf-value li a').click( function() {
			that.setPfValue(this);
		})
		
		$('#pf-value-trigger').click( function() {
			if(that.sActiveFilterType && that.sActiveFilterType != 'random') {
				if( $('#pf-value-trigger').hasClass('active')) {
					that.hidePfValueNav();
				} else {
					that.showPfValueNav( that.sActiveFilterType );
				}
			}
		})
	}
	
	this.setPfType = function(oLink) {
		
		if(this.sActiveFilterType) {
			$('#pf-'+this.sActiveFilterType).hide();
		}
		
		var sTypeLabel = $(oLink).attr('title');
		var sType = $(oLink).attr('id').replace('pftype-','');
		
		this.sActiveFilterType = sType;
		
		$('#pf-type-selected').html(sTypeLabel);
		Cufon.refresh('#pf-type-selected');
		
		
		this.hidePfTypeNav();
		
		if(sType != 'random') {
			this.showPfValueNav(sType);
		} else {
			// Load random
			this.iActiveFilterValue = false;
			$('#pf-value-selected').html(' ');
			this.hidePfValueNav();
			this.reloadProjects();
			
		}
		
		
	}
	
	this.setPfValue = function(oLink) {
		var sValueLabel = $(oLink).attr('title');
		a = $(oLink).attr('id').split('-');
		sType = a[0];
		
		$('#pf-value-selected').html(sValueLabel);
		Cufon.refresh('#pf-value-selected');
		this.iActiveFilterValue = a[1];
		this.hidePfValueNav();
		this.reloadProjects();
	}
	
	this.reloadProjects = function() {
		var that=this;
		
		var sUrl = LINKROOT+'/view/portfolio/list/?filtertype='+this.sActiveFilterType+'&value='+this.iActiveFilterValue;
		
		this.setProjectPointer(0);
		this.setImagePointer(0);
		
		$.getJSON(sUrl, function(oData) {
			that.oProjectIds = oData;	
			that.initAfterGettingProjects();
		});

		
	}
	
	this.showPfValueNav = function(sType) {
		$('#pf-value-trigger').addClass('active');
		$('#pf-'+sType).slideDown('medium','easeOutBack');
		this.sActiveFilterType = sType;
	}
	

	this.hidePfValueNav = function() {
		
		$('#pf-'+this.sActiveFilterType).slideUp('medium','easeInBack', function() {
			$('#pf-value-trigger').removeClass('active');
		});
	}
	
	this.showPfTypeNav = function() {
		$('#pf-type-trigger').addClass('active');
		$('#pf-type-type ul').slideDown('medium','easeOutBack');
	}

	this.hidePfTypeNav = function() {
		$('#pf-type-type ul').slideUp('medium','easeInBack', function() {
			$('#pf-type-trigger').removeClass('active');
		});
	}

	
	this.initAfterGettingProjects = function() {
		this.setProjectCount( this.oProjectIds.length );
		if(this.iProjectCount == 0) {
			alert('Er zijn geen projecten gevonden!');
		} else {
			this.loadProject( this.oProjectIds[0] );	
		}
		
	}
	
	this.setProjectCount = function(iCount) {
		this.iProjectCount = parseInt( iCount,10 );
		if(this.iProjectCount < 10) {
			$('#project-counter').html('0'+this.iProjectCount);
		} else {
			$('#project-counter').html(this.iProjectCount);
		}
	}
	
	this.initNavigation = function() {
		var that=this;
		
		
		// Regular clicks
		$('#nav-down').click( function() {
			that.nextImage();
		});
		
		$('#nav-up').click( function() {
			that.prevImage();
		}); 
		
		$('#nav-left').click( function() {
			that.prevProject();
		});
		
		$('#nav-right').click( function() {
			that.nextProject();
		});
		
		
		// Wipes
		$(document).wipetouch({
			  tapToClick: true, 
			  wipeLeft: 	function(result) { that.nextProject(); },
			  wipeRight: 	function(result) { that.prevProject(); },
			  wipeUp: 		function(result) { that.nextImage(); },
			  wipeDown: 	function(result) { that.prevImage(); }
			});
		
		
		// Meta arrows
		$('#project-pointer').click( function() {
			that.prevProject();
		});
		
		$('#project-counter').click( function() {
			that.nextProject();
		})

		$('#foto-pointer').click( function() {
			that.prevImage();
		});
		
		$('#foto-counter').click( function() {
			that.nextImage();
		})		
		// Arrow keys
		$(document).keydown(function(e){
			switch(e.keyCode) {
			case 37:
				// left
				that.prevProject();
				return false;
				break;
				
			case 39:
				// right
				that.nextProject();
				return false;
				break;
				
			case 38:
				//up
				that.prevImage();
				return false;
				break;
				
			case 40:
				// down
				that.nextImage();
				return false;
				break;				
			}

		});
		
	}
	
	this.nextImage = function() {
		$('#tip').fadeOut('slow');
		iNext = this.iImagePointer+1;
		if(iNext < this.iImageCount) {
			
			if(!this.hasImageCache(this.oProject.aImages[iNext])) {
				this.setLoading();
			}
			this.setImage( this.oProject.aImages[iNext] );
			this.setImageDimensions( this.oProject.aImages[iNext] );
			this.positionImage();
			this.setImagePointer(iNext);
			
			this.validateNavigation();
			
		}
	}
	
	this.setImagePointer = function(iPointer) {
		this.iImagePointer = parseInt(iPointer,10);
		
		iDisplayPointer = this.iImagePointer + 1;
		
		if(iDisplayPointer < 10) {
			$('#foto-pointer').html('0'+iDisplayPointer);
		} else {
			$('#foto-pointer').html(iDisplayPointer);
		}
	}
	
	this.prevImage = function() {
		$('#tip').fadeOut('slow');
		
		iPrev = this.iImagePointer - 1;
		if(iPrev >= 0) {
			if(!this.hasImageCache(this.oProject.aImages[iPrev])) {
				this.setLoading();			
			}
			this.setImage( this.oProject.aImages[iPrev] );
			this.setImageDimensions( this.oProject.aImages[iPrev] );
			this.positionImage();
			this.setImagePointer(iPrev);
			this.validateNavigation();			
		}
	}
	
	this.nextProject = function() {
		$('#tip').fadeOut('slow');
		
		iNext = this.iProjectPointer+1;
		
		if(iNext < this.iProjectCount) {
			this.setProjectPointer(iNext);
			this.setImagePointer(0);
			iProject = this.oProjectIds[iNext];
			this.loadProject(iProject);
			
		}
	}
	
	this.setProjectPointer = function(iPointer) {
		this.iProjectPointer = parseInt( iPointer,10 );
		
		iDisplayPointer = this.iProjectPointer+1; 
		if(iDisplayPointer < 10) {
			$('#project-pointer').html('0'+iDisplayPointer);
		} else {
			$('#project-pointer').html(iDisplayPointer);
		}
	}
	
	this.prevProject = function() {
		$('#tip').fadeOut('slow');
		iPrev = this.iProjectPointer - 1;
		if(iPrev >= 0) {
			this.setProjectPointer(iPrev);
			this.setImagePointer(0);
			iProject = this.oProjectIds[iPrev];
			this.loadProject(iProject);
						
		}
	}
	
	
	this.setLoading = function() {
		$('#loading').fadeIn('medium');
	}
	
	this.hasImageCache = function(oImage) {
		sKey = this.iActiveProject+'-'+oImage.tbl_portfolioimage_id;
		
		if(!this.aImageHistory[sKey]) {
			return false;
		} else {
			return true;
		}
	}
	
	this.loadProject = function(i) {
		var that=this;
		
		this.iActiveProject = i;
		
		if(!this.aProjectCache[i]) {
		
			this.setLoading();
			$.getJSON(LINKROOT+'/view/portfolio/detail/'+i, function(oData) {
				that.oProject = oData;
				that.aProjectCache[i] = oData;
				that.initProject();
			});
		
		} else {
			this.oProject = this.aProjectCache[i];
			this.initProject();
		}
	}
	
	this.initProject = function() {
		
		this.iImagePointer = this.oProject.tbl_portfolio_imagestart;
		this.setProjectMeta();
		this.setImageCount(this.oProject.aImages.length);
		this.setImage( this.oProject.aImages[ this.oProject.tbl_portfolio_imagestart ],true );
		this.setImageDimensions( this.oProject.aImages[this.oProject.tbl_portfolio_imagestart] );		
		this.positionImage();		
		this.validateNavigation();
		this.setImagePointer( this.oProject.tbl_portfolio_imagestart);
		
	}
	
	this.setProjectMeta = function() {
		$('#pf-title').html( this.oProject.tbl_portfolio_name );
		Cufon.refresh('#pf-title');
		
		$('#pf-date').html(this.oProject.tbl_portfolio_date_nice );
		$('#pf-types').html(this.oProject.tbl_portfolio_worktypes);
		$('#pf-customers').html(this.oProject.tbl_portfolio_customers);
		$('#pf-content').html(this.oProject.tbl_portfolio_content);
		$('title').text(this.oProject.tbl_portfolio_name);
		this.setProjectShare();
		this.setPfContentHeight();
	}
	
	this.setProjectShare = function() {
		var sUrl = this.oProject.tbl_portfolio_url;
		var sHtml = '';
		sHtml += '<div class="addthis_toolbox addthis_default_style ">';
		sHtml += '<a fb:like:href="'+sUrl+'" addthis:url="'+sUrl+'" addthis:title="'+this.oProject.tbl_portfolio_name+'" class="addthis_button_facebook" fb:like:layout="button_count"></a>';
		sHtml += '<a tw:url="'+sUrl+'" addthis:url="'+sUrl+'" addthis:title="'+this.oProject.tbl_portfolio_name+'" class="addthis_button_twitter"></a>';
		sHtml += '<a addthis:url="'+sUrl+'" addthis:title="'+this.oProject.tbl_portfolio_name+'" class="addthis_button_linkedin"></a>';
		sHtml += '<a addthis:url="'+sUrl+'" addthis:title="'+this.oProject.tbl_portfolio_name+'" class="addthis_button_pingfm"></a>';
		sHtml += '<a addthis:url="'+sUrl+'" addthis:title="'+this.oProject.tbl_portfolio_name+'" class="addthis_button_google_plusone" g:plusone:size="small"></a>';
		
		sHtml += '<br class="clear" />';
		sHtml += '</div>';

		$('#pf-share').html(sHtml);
		
		var addthis_share = {
			url: sUrl,
			title: this.oProject.tbl_portfolio_name,
			description: this.oProject.tbl_portfolio_name
			
		}
		
		
		addthis.init();
		addthis.toolbox('#pf-share',addthis_config,addthis_share);
		addthis.ready();

	}
	
	this.setPfContentHeight = function() {
		var iTotal = parseInt( $('#info').height(),10 );
		var iUsed = parseInt( $('#pf-meta-wrap').height(),10 );
		var iAvail = iTotal - iUsed - 50;
		
		$('#pf-content').css({height: iAvail});
	}
	
	this.setImageCount = function(iCount) {
		this.iImageCount = parseInt( iCount,10 );
		if(this.iImageCount < 10) {
			$('#foto-counter').html('0'+this.iImageCount);
		} else {
			$('#foto-counter').html(this.iImageCount);
		}
	}
	
	this.validateNavigation = function() {
		// Left
		if(this.iProjectPointer == 0) {
			$('#nav-left').fadeOut('medium');
		} else {
			$('#nav-left').fadeIn('medium');
		}
		
		// Right
		if(this.iProjectPointer < ( this.iProjectCount - 1)) {
			$('#nav-right').fadeIn('medium');
		} else {
			$('#nav-right').fadeOut('medium');
		}
		
		// Up
		if(this.iImagePointer == 0) {
			$('#nav-up').fadeOut('medium');
		} else {
			$('#nav-up').fadeIn('medium');
		}
		
		// Down
		if(this.iImagePointer < ( this.iImageCount - 1)) {
			$('#nav-down').fadeIn('medium');
		} else {
			$('#nav-down').fadeOut('medium');
		}
	}
	this.setImageDimensions = function(oImage) {
		sKey = this.iActiveProject+'-'+oImage.tbl_portfolioimage_id;
		this.aImageHistory[ sKey ] = true;

		
		this.iImageWidth = oImage.tbl_portfolioimage_width;
		this.iImageHeight = oImage.tbl_portfolioimage_height;
		
	}
	
	this.unsetLoading = function() {
		$('#loading').slideUp('fast');
	}
	
	this.setVideo = function(sIframe) {
		$('body').addClass('video');
		sHtml = '<iframe src="'+sIframe+'" scrolling="no" frameborder="no" width="'+this.iWidth+'" height="'+this.iHeight+'" class="video"></iframe>';
		this.sVideo = sIframe;
		$('#video').html(sHtml);
		
	}
	
	this.resizeVideo = function() {
		$('#video iframe').attr({width: this.iWidth, height: this.iHeight});
	}
	
	this.setImage = function(oImage,bPreloadOthers) {
		
		if(oImage != undefined) {
		
			var that=this;
			$('#video').html('&nbsp;');
			$('body').removeClass('video');
			this.sVideo = false;
			
			var sImage = '<img onload="oPortfolio.unsetLoading();" id="imgsrc" src="'+LINKROOT+'/'+oImage.tbl_portfolioimage_file+'" />';
			$('#image').html(sImage);
			
			if(oImage.tbl_portfolioimage_video_iframe != undefined) {
				this.setVideo(oImage.tbl_portfolioimage_video_iframe);
			}
			
			if(bPreloadOthers) {
				var sPreload = '';
				$.each(this.oProject.aImages, function(iKey,oImage) {
					sPreload += '<img src="'+LINKROOT+'/'+oImage.tbl_portfolioimage_file+'" width="1" height="1" onload="oPortfolio.setImagePreloaded(\''+that.iActiveProject+'-'+oImage.tbl_portfolioimage_id+'\')" />';
				});
				
				setTimeout( function() {
					$('#preloader').html(sPreload);	
				},1000);
				 
			}
		}
	}
	
	this.setImagePreloaded = function(sKey) {
		this.aImageHistory[sKey] = true;
	}
	
	this.positionImage = function() {
		var iOver = this.iImageWidth / this.iImageHeight;
		var iUnder = this.iImageHeight / this.iImageWidth;

		if( (this.iWidth / this.iHeight) >= iOver) {
			var iNewImgWidth = this.iWidth;
			var iNewImgHeight = iUnder*this.iWidth;
		} else {
			var iNewImgWidth = iOver*this.iHeight;
			var iNewImgHeight = this.iHeight;
		}

		iDiffWidth = (iNewImgWidth - this.iWidth)/2;
		iDiffHeight = (iNewImgHeight - this.iHeight)/2;

		iMarginLeft = iDiffWidth * -1;
		iMarginTop = iDiffHeight * -1;
		
		if(iMarginLeft > 0) {
			iMarginLeft = 0;	
		}

		if(iMarginTop > 0) {
			iMarginTop = 0;	
		}			

		
		
		$('#imgsrc').css({width: iNewImgWidth, height: iNewImgHeight, marginTop: iMarginTop, marginLeft: iMarginLeft});	
		
	}
	
	this.setProjects = function() {
		var that=this;
		
		
		if(ACTIVE_ITEM != '') {
			sUrl = LINKROOT+'/view/portfolio/list/'+ACTIVE_ITEM;
		} else {
			sUrl = LINKROOT+'/view/portfolio/list';
		}
		$.getJSON(sUrl, function(oData) {
			that.oProjectIds = oData;	
			that.initAfterGettingProjects();
		});
	}
	
	this.setOnResize = function() {
		var that=this;
		
		$(window).resize( function() {
			setTimeout( function() {
				that.setDimensions();

				if(that.oProject.aImages[ that.iImagePointer ] != 'undefined') {
					that.setImageDimensions( that.oProject.aImages[ that.iImagePointer ] );
					that.positionImage();
					that.setPfContentHeight();
				}
				if(that.sVideo) {					
					that.resizeVideo();
				}
				
				
				
			},250);
		});
		
		//@todo
	}
	
	this.showTip = function() {
		setTimeout( function() {
			$('#tip').fadeIn('slow', function() {
			});	
		},1000);
		
	}
	
	
	this.setDimensions = function() {
		var iUsedHeight = $('#header').innerHeight() + $('#menu').innerHeight();
		var iUsedWidth = 200;
		
		var iScreenHeight = $(window).height();
		var iScreenWidth = $(window).width();
		
		var iHeight = iScreenHeight - iUsedHeight;
		var iWidth = iScreenWidth - iUsedWidth;
		
		this.iHeight = iHeight;
		this.iWidth = iWidth;
		
		$('#portfolio-wrap').css({height: iScreenHeight, width: iScreenWidth});
		$('#portfolio').css({height: iHeight, width: iWidth});
		$('#image').css({height: iHeight, iWidth: iWidth});
		$('#info').css({height: iHeight});
	}
	
}