var vpPlayInterval = null;
var vpPortfolioPages = 0;
var vpPortfolioPage = 0;

$(document).ready(function()
{
	if ($("body.single").length > 0 && !$("body.single").hasClass('attachment'))
	{
		initProject();
	}
	
	if ($("body.category").length > 0 && !$("body.single").hasClass('archive'))
	{
		initPortflio();
	}
});

/**
 * @return
 */
function initPortflio()
{
	/**
	 * Build pages
	 */
	var imagesPerPage = $('body.category-high-rise').length > 0 ? 4 : 8;
	
	var pagesHtml = '<div class="vp-portfolio clearfix"><div class="vp-portfolio-scroller clearfix">';
	var pagesCount = 0;
	var imagesCount = 0;
	var pageHtml = '';
	$('.post').each(function(){
		pageHtml = pageHtml +
			'<div class="vp-portfolio-thumb clearfix">' +
				'<a href="' + ($(this).find('h2.entry-title a').attr('href')) + '">' + 
				'<img src="' + ($(this).find('img.wp-post-image').attr('src'))+ '"/>' + 
				'<div class="vp-portfolio-thumb-over"><div class="vp-portfolio-thumb-over-container">' + ($(this).find('h2.entry-title a').html()) + '</div></div>' +
				'</a>' +
			'</div>';
		imagesCount++;
		if (imagesCount == imagesPerPage)
		{
			pagesHtml = pagesHtml + '<div class="vp-portfolio-page clearfix" id="portfolio-page-' + pagesCount + '">' + pageHtml + '</div>';
			pagesCount++;
			imagesCount = 0;
			pageHtml = '';
		}
	});
	
	if (imagesCount > 0 && pageHtml != '')
	{
		pagesHtml = pagesHtml + '<div class="vp-portfolio-page clearfix" id="portfolio-page-' + pagesCount + '">' + pageHtml + '</div>';
		pagesCount++;
	}
	
	vpPortfolioPages = pagesCount;
	
	pagesHtml = pagesHtml + '</div></div>';
	
	$('.post').remove();
	$('h1.page-title').after(pagesHtml);
	
	/**
	 * Add next - prev button
	 */
	var buttonPrev = '<div id="vp-page-prev"><div></div></div>';
	var buttonNext = '<div id="vp-page-next"><div></div></div>';
	
	$('.vp-portfolio').after(buttonPrev + buttonNext);
	
	var p = $('.vp-portfolio').position();
	
	$('#vp-page-prev')
		.css({top:p.top + 214, left:p.left - 32})
		.click(function(){
			if (vpPortfolioPage > 0) showPortfolioPage(vpPortfolioPage - 1);
		});
	
	$('#vp-page-next')
		.css({top:p.top + 214, left:p.left + $('.vp-portfolio').width()})
		.click(function(){
			if (vpPortfolioPage < vpPortfolioPages - 1) showPortfolioPage(vpPortfolioPage + 1);
		});
	
	$('.vp-portfolio .vp-portfolio-thumb').each(function(){
		$(this).mouseenter(function(){
			$(this).find('.vp-portfolio-thumb-over')
				.addClass('active')
				.css({position:'absolute',top:$(this).position().top, left:$(this).position().left, display:'block'})
				.animate({opacity:0.9}, 500);
		});
		$(this).mouseleave(function(){
			$(this).find('.vp-portfolio-thumb-over').animate({opacity:0}, 500, function(){
				$(this).find('.vp-portfolio-thumb-over').css({display:'none'})
			});
		});
	});
	showPortfolioPage(0);	
}

/**
 * Show portfolio page
 * @param pageID
 * @return
 */
function showPortfolioPage(number)
{
	vpPortfolioPage = number;
	
	$('.vp-portfolio-scroller').animate({left: 0 - $('#portfolio-page-' + number).position().left}, 500);
	if (number == 0)
	{
		$('#vp-page-prev').hide();
	}
	else
	{
		$('#vp-page-prev').css({display:'block'}).show();
	}
	
	if (number == vpPortfolioPages - 1)
	{
		$('#vp-page-next').hide();
	}
	else
	{
		$('#vp-page-next').show();
	}
}


/**
 * Init project
 */
function initProject()
{
	var images = '';
	var thumbs = '<div class="vp-thumb-play">Play</div><div class="vp-thumb-info">&nbsp;</div>';
	
	/**
	 * Build HTML for images and thumbs
	 */
	$('.gallery .gallery-icon').each(function(j){
		if (j < 1) return;
		var i = j-1;
		var thumbSrc = $(this).find('img').attr('src');
		var imgSrc = thumbSrc.replace('-150x150', '');
		thumbs = thumbs + '<div id="img-' + i + '-thumb" class="vp-thumb"><img style="width:32px;height:32px;" src="' + thumbSrc + '"/></div>';
		images = images + '<div id="img-' + i + '" class="vp-image"><img style="height:400px;" src="' + imgSrc +'"/></div>';
	});
	
	/**
	 * Build HTML for next project button
	 */
	if ($('#content .nav-next a').length > 0)
	{
		var projectName = $('#content .nav-next a').html();
		var _projectName = projectName.toLowerCase();
		projectName = projectName.substr(0, _projectName.indexOf('<span'));
		
		var typePost = $('.type-post');
		var nextWhat = 
			$(typePost).hasClass('category-metals') || 
			$(typePost).hasClass('category-glass') || 
			$(typePost).hasClass('category-glass-2') || 
			$(typePost).hasClass('category-stoneearth') || 
			$(typePost).hasClass('category-composites') ? 'M A T E R I A L' : 'P R O J E C T';

		var next = '<div class="vp-next"><div class="vp-next-content"><a href="' + $('#content .nav-next a').attr('href') + '">N E X T &nbsp; ' + nextWhat + '<br/>' + projectName + '</a></div></div>';
		
		thumbs = thumbs + '<div class="vp-thumb-next">&nbsp;</div>';
	}
	else
	{
		var next = '';
	}
	
	/**
	 * Draw gallery
	 */
	$('.gallery').html(
		'<div class="vp-images clearfix"><div class="vp-images-container">' + images + next + '</div></div>' +
		'<div class="vp-thumbs clearfix"><div class="vp-thumbs-container">' + thumbs + '</div></div>'
	);
	
	/**
	 * Modify project info 
	 */
	var footerPos = $('#footer #colophon').position();
	var galleryPos = $('.vp-images').position();
	var thumbsPost = $('.vp-thumbs').position();
	
	$('.project-info').addClass('vp-project-info').hide();
	$('.vp-project-info').data('visible', false).addClass('clearfix').html('<div class="vp-project-info-content"><div>' + $('.vp-project-info').html() + '</div></div>');
	$('.vp-project-info').css({left:footerPos.left, top:galleryPos.top + $('.vp-images').height(), display:'none', opacity:0});	
	$('.vp-project-info').hide().css({display:'block'});
	
	$('<div class="vp-project-info-link">Information</div>')
		.insertAfter('.vp-project-info')
		.css({left:footerPos.left, top:thumbsPost.top, display:'block'});
	
	$('.vp-project-info-link,.vp-thumb-info').click(function(){
		if ($('.vp-project-info').data('visible'))
		{
			$('.vp-project-info').data('visible', false).animate({opacity:0}, function(){
				$(this).hide();
			});
		}
		else
		{
			$('.vp-project-info').data('visible', true).show().css({display:'block'}).animate({opacity:0.9});
		}
	});
	
	/**
	 * Fix position when window resized
	 */
	$(window).resize(function(){
		setElementsPosition();
	});
	
	/**
	 * Thumbs
	 */
	$('.vp-thumb').each(function(){
		$(this).click(function(){
			clearInterval(vpPlayInterval);
			$('.vp-thumb-play').html('Play');
			if (!$(this).hasClass('vp-thumb-active'))
			{
				var thumbID = $(this).attr('id');
				var imageID = thumbID.replace('-thumb', '');
				activateImage("#" + imageID);
			}
		});
		$(this).mouseover(function(){
			if (!$(this).hasClass('vp-thumb-active')) $(this).animate({opacity:1}, 300);
		});
		$(this).mouseout(function(){
			if (!$(this).hasClass('vp-thumb-active')) $(this).animate({opacity:1}, 300);
		});
	});
	
	/**
	 * Next project rhumb handler
	 */
	$('.vp-thumb-next').click(function(){
		document.location = $('#content .nav-next a').attr('href');
	});
	
	/**
	 * Images
	 */
	var c = 0;
	$('.vp-image').each(function(){
		$(this).click(function(){
			clearInterval(vpPlayInterval);
			$('.vp-thumb-play').html('Play');
			activateImage('#' + $(this).attr('id'));
		});
		
		$(this).mouseover(function(){
			if (!$(this).hasClass('vp-image-active')) $(this).animate({opacity:0.7}, 300);
		});
		
		$(this).mouseout(function(){
			if (!$(this).hasClass('vp-image-active')) $(this).animate({opacity:0.4}, 300);
		});
	});
	
	/**
	 * Play
	 */
	$('.vp-thumb-play').click(function(){
		if (vpPlayInterval == null)
		{
			activateNextImage()
			vpPlayInterval = setInterval('activateNextImage();', 2500);
			$('.vp-thumb-play').html('Pause');
		}
		else
		{
			clearInterval(vpPlayInterval);
			$('.vp-thumb-play').html('Play');
			vpPlayInterval = null;
		}
	});
	
	$('.gallery').show();
	setElementsPosition();
	$("#img-0").ready(function(){
		activateImage('#img-0');
		setElementsPosition();
	})
}

/**
 * Activate some image
 * @param selector
 * @return
 */
function activateImage(selector)
{
	//check is it current image
	if ($('.vp-image-active').length == 0 || $(selector).attr('id') != $('.vp-image-active').attr('id'))
	{
		//turn off current active image (remove class and fade it to opacity 0.2)
		if ($('.vp-image-active').length > 0)
		{
			$('.vp-image-active').removeClass('vp-image-active').animate({opacity:0.5}, 500);
			$('.vp-thumb-active').removeClass('vp-thumb-active').animate({opacity:1}, 500);
		}
		
		$(selector).addClass('vp-image-active').animate({opacity:1}, 500);
		$(selector + '-thumb').addClass('vp-thumb-active').animate({opacity:1}, 500);
		var imagePos = $(selector).position();
		//centering code
		var newLeft = 0 - imagePos.left + Math.round($('.vp-images').width() / 2 - $(selector).width() / 2);
		
		//left align code
		//var footerPos = $('#footer #colophon').position();
		//var newLeft = 0 - imagePos.left + footerPos.left;
		
		$('.vp-images-container').animate({left: newLeft}, 500);
	}
}

/**
 * Set elements position
 */
function setElementsPosition()
{	
	var footerPos = $('#footer #colophon').position();
	var galleryPos = $('.vp-images').position();
	var thumbsPost = $('.vp-thumbs').position();
	$('.vp-project-info').css({left:footerPos.left, top:galleryPos.top});
	$('.vp-project-info-link').css({left:footerPos.left, top:thumbsPost.top, display:'block'});
	
	$('#content .vp-thumbs .vp-thumbs-container').css({
		left:footerPos.left + $('#footer #colophon').width() - $('#content .vp-thumbs .vp-thumbs-container').width() -7
	});
}

/**
 * Activate next image
 * @return
 */
function activateNextImage()
{
	if ($('.vp-image-active').length == 0 || $('.vp-image-active').next('.vp-image').length == 0)
	{
		activateImage('#img-0');
	}
	else
	{
		activateImage('#' + $('.vp-image-active').next('.vp-image').attr('id'));
	}
}