section.hero.is-light.is-medium
	div.hero-body
		div.container
			h1.title Testing Masonry - Cascading grid layout library
			h2.subtitle 
				a(href="https://www.instagram.com/dan10gc/?hl=en") Images by Daniel Gonzalez
	div.hero-foot
		nav.tabs.is-boxed.is-fullwidth
			div.container
				ul#buttonGroup
					li.is-active
						a#all All Images
					li
						a#newYork New York City 
					li
						a#flowers Flowers
					li
						a#others Other

	div.grid#container
		div.grid-sizer
		div.grid-item.flowers
			img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/sunFlowerNJ.jpg' alt='')
		div.grid-item.flowers
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/flowers.jpg")
		div.grid-item.newYork
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/AmericanStandardBuilding.jpg")
		div.grid-item.newYork
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/nycGalaxy.jpg")
		div.grid-item.flowers
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/butterflyOnFlower.jpg")
		div.grid-item.newYork
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/nycBuilding2.jpg")
		div.grid-item.newYork
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/falafelPost.jpg")
		div.grid-item.newYork
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/littleRedLightHouse.jpg")
		div.grid-item.flowers
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/gwFlowerB%26W.jpg")
		div.grid-item.others
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/highwayExposure2.jpg")
		div.grid-item.flowers
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/flowerWithButterfly.jpg")
		div.grid-item.flowers
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/flowerWithBee.jpg")
		div.grid-item.newYork
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/oilTankerHudson.jpg")
		div.grid-item.flowers
			img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/flowersCloseUp2.jpg' alt='')
		div.grid-item.others
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/redMillB%26W.jpg")
		div.grid-item.newYork
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/commuteToWork.jpg")
		div.grid-item.others
			img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/miamiNeonSign.jpg")
		div.grid-item.flowers
			img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/redFlowerBleachBypass.jpg' alt='')
		div.grid-item.newYork
			img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/wrGraceBuilding.jpg')
	
	
	

$black: #333333;
* {
	box-sizing: border-box;
}

.grid{
	background: $black;
}
.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-sizer,
.grid-item {
  width: 33.33%;
	
}
.grid-item{
	float: left;
	&:hover{
		cursor:pointer;
	}
	
}
.grid-item img{
	display: block;
	max-width: 100%;
	border: 10px solid white;
	@media screen and (max-width: 414px){
		border: 5px solid white;
	}
}

.grid-item.grid-item__expanded {
  width: 66.66%;
  z-index: 2;
}

var grid = document.querySelector('.grid');
var msnry;
// element selectors
var imgAll = document.querySelectorAll('.grid-item');
var imgNy = document.querySelectorAll('.newYork');
var imgFlowers = document.querySelectorAll('.flowers');
var imgOthers = document.querySelectorAll('.others');
// buttons
const tabsUl = document.getElementById('buttonGroup');
const lis = tabsUl.children;
const gridItems = grid.children;


imagesLoaded(grid, function(){
	msnry = new Masonry( grid, {
		//options
		itemSelector: '.grid-item',
		columnWidth: '.grid-sizer',
		percentPosition: true
	});
});

//element & class name
function toggleClass(parentElem, childElems, className){
	for(let i = 0; i <childElems.length; i++){
		if(childElems[i]==parentElem){
			childElems[i].classList.add(className);
		}
		else{
			childElems[i].classList.remove(className);
		}
	}
}

function showImages(showImg, hideImg1, hideImg2){
	for(let i = 0; i < showImg.length; i++){
			showImg[i].style.display = "block";
		}
		for(let i = 0; i < hideImg1.length; i++){
			hideImg1[i].style.display = "none";
		}
		for(let i = 0; i< hideImg2.length; i++){
			hideImg2[i].style.display = "none";
		}
}


tabsUl.addEventListener('click', (event) =>{
	let tabLi = event.target.parentNode;
	
	toggleClass(tabLi, lis, 'is-active');
	
	//show all images
	if(event.target.id == "all"){
		for(let i = 0; i< imgAll.length; i++){
			imgAll[i].style.display = "block";
		}
	}
	
	//show ny images
	if(event.target.id == "newYork"){
		showImages(imgNy, imgFlowers, imgOthers);
	}
	
	// show flowers
	if(event.target.id == "flowers"){
		showImages(imgFlowers, imgNy, imgOthers);
	}
	
	// show other images
	if(event.target.id == "others"){
		showImages(imgOthers, imgFlowers, imgNy);
	}
	
	msnry.layout();
	
});

grid.addEventListener('click',function(event){
	let imgContainer = event.target.parentNode;
	toggleClass(imgContainer, gridItems, 'grid-item__expanded');
	msnry.layout();
});