<script type="text/javascript">
$(document).ready(function() {
var recent_page = false;

var column_drop_width = 600;
var width_offset = 20;

var photos = [];
var p =0;
var numPerRow = 2;
var origNumPerRow = 2;
var border_val = 10;
var sideby = true;
var sectionNum = -1;
var rowNum = -1;
var colNum = -1;
var containerNum = -1;

var lightbox = false;
var lightbox_theme = 'dark';
var lightbox_next = false;
var lightbox_prev = false;
var lightbox_num = 0;
var lightbox_image_1 = null;
var lightbox_image_2 = null;
var lightbox_open = false;
var page_width = $(window).width();
var page_height = $(window).height();
var parent_width;

var attempts = 10;

init();

function init(){
if($('.sqs-gallery-block-grid').length>0){
photos = [];
get_data();
console.log(photos);
buildMasonary();
}
else if(attempts>0){
attempts--;
setTimeout(function(){
init();
},500);
}
}

function get_data(){
$('.sqs-gallery-block-grid').find('img').each(function(index,value){
var dimensions = $(this).attr('data-image-dimensions').split('x');

var photo = {
w: parseInt(dimensions[0]),
h: parseInt(dimensions[1]),
ratio: (parseInt(dimensions[1])/parseInt(dimensions[0])),
path: $(this).attr('data-image'),
url : $(this).parent().attr('href'),
num : index,
}
photos.push(photo);
});

$('.sqs-gallery-block-grid').after('<div id="photosContainer" style="width:100%; text-align:center"></div>');
$('#photosContainer').append('<div id="photos" style="display:inline-block"></div>');
$('.sqs-gallery-block-grid').css('display','none');
var gallery_info_str = $('.sqs-gallery-block-grid').parent().parent().attr('data-block-json');
var gallery_info = JSON.parse(gallery_info_str);

border_val = gallery_info['padding']/2;
numPerRow = gallery_info['thumbnails-per-row'];
lightbox = gallery_info['lightbox'];
lightbox_theme = gallery_info['lightboxTheme'];
origNumPerRow = numPerRow;
parent_width = $('#photosContainer').width()-width_offset;

if(page_width < column_drop_width){
numPerRow = 2;
}
else{
numPerRow = origNumPerRow;
}
}

function buildMasonary(){
p=0;
sectionNum = -1;
rowNum = -1;
colNum = -1;
containerNum = -1;
var leftOver = false;
if(photos.length % numPerRow == 1){
leftOver = true;
}
while(p < photos.length){
var photosLeft = photos.length - p;
if(photosLeft >= 2*numPerRow){
if(sideby){
createNewSection();
placeRows(p,numPerRow);
p+=numPerRow;
sideby = false;
}
else{
var photosCol;
if(leftOver){
photosCol = photos.slice(p,p+(2*numPerRow)+1);
placeCol(photosCol,numPerRow,leftOver);
p+=((2*numPerRow)+1);
leftOver = false;
}
else{
photosCol = photos.slice(p,p+(2*numPerRow));
placeCol(photosCol,numPerRow,leftOver);
p+=(2*numPerRow);
}

sideby = true;
}
}
else{
if(photosLeft <= numPerRow){
createNewSection();
placeRows(p,photosLeft);
p+=photosLeft;
}
else{
if(leftOver){
createNewSection();
placeRows(p,numPerRow-1);
p+=(numPerRow-1);
leftOver = false;
}
else{
createNewSection();
placeRows(p,numPerRow);
p+=numPerRow;
}
}
sideby = false;
}
}
sideby = true;
resizeMason();
}

function placeRows(j,inRow){
createNewRow();
scaleRowHeights(j,inRow);
scaleRowToWidth(j,inRow);
for(var i=j; i<(j+inRow); i++){
addImage('row_'+rowNum,i,photos[i]);
}
}

function scaleRowHeights(j,inRow){
for(var i=(j+1); i<(j+inRow); i++){
var ratio = photos[j].h/photos[i].h;
photos[i].h = photos[i].h * ratio;
photos[i].w = photos[i].w * ratio;
}
}

function scaleRowToWidth(j,inRow){
var row_width = 0;
for(var i=j; i<(j+inRow); i++){
row_width += photos[i].w;
}
var ratio = parent_width / row_width;
for(var i=j; i<(j+inRow); i++){
photos[i].w = (photos[i].w * ratio);
photos[i].h = photos[i].w * photos[i].ratio;
}
}

function placeCol(photosCol,numRow,leftOver){
var inCol = 2;
var pp;
if(leftOver){
pp = (numRow-1)*inCol;
}
else{
pp = photosCol.length;
}
for(var i=0; i<pp; i+=inCol){
scaleColImageWidth(i,inCol,photosCol);
}

if(leftOver){
scaleColImageWidth(pp,(inCol+1),photosCol);
}

var col_height = 0;
for(var i=0; i<inCol; i++){
col_height += photosCol[i].h
}

for(var i=2; i<pp; i+=inCol){
scaleSecondColumn(i,inCol,col_height,photosCol);
}

if(leftOver){
scaleSecondColumn(pp,(inCol+1),col_height,photosCol);
}

var col_widths = 0;
for(var i=0; i<pp; i+=inCol){
col_widths += photosCol[i].w
}

if(leftOver){
col_widths += photosCol[pp].w
}

var ratio = parent_width/col_widths;

createNewSection();

for(var i=0; i<pp; i++){
photosCol[i].w*=ratio;
photosCol[i].h*=ratio;
if(i%inCol == 0){
createNewCol(photosCol[i].w);
}
addImage('col_'+colNum,i,photosCol[i]);
}

if(leftOver){
for(var i=pp; i<photosCol.length; i++){
photosCol[i].w*=ratio;
photosCol[i].h*=ratio;
if(i==pp){
createNewCol(photosCol[pp].w);
}
addImage('col_'+colNum,i,photosCol[i]);
}
}
}

function scaleColImageWidth(j,inCol,photosCol){
for(var i=(j+1); i<(j+inCol); i++){
var ratio = photosCol[j].w/photosCol[i].w;
photosCol[i].h = photosCol[i].h * ratio;
photosCol[i].w = photosCol[i].w * ratio;
}
}

function scaleSecondColumn(j,inCol,col_height,photosCol){
var col_height2 = 0;
for(var i=j; i<(j+inCol); i++){
col_height2 += photosCol[i].h
}
var ratio = col_height/col_height2;
for(var i=j; i<(j+inCol); i++){
photosCol[i].w *= ratio;
photosCol[i].h *= ratio;
}
}

function createNewSection(){
sectionNum++;
$('#photos').append('<div class="sqpl_section" id="section_'+sectionNum+'"></div>');
}

function createNewRow(){
rowNum++;
$('#section_'+sectionNum).append('<div class="sqpl_row" id="row_'+rowNum+'"></div>');
}

function createNewCol(w){
colNum++;
$('#section_'+sectionNum).append('<div class="sqpl_column" id="col_'+colNum+'" style="width: '+w+'px;display:inline-block;vertical-align:top"></div>');
}
function addImage(rowCol,j,p){
containerNum++;
$('#'+rowCol).append('<div class="mason_container" id="mason_container_'+containerNum+'" style="width:'+p.w+'px;height:'+p.h+'px;display:inline-block;position:relative;text-align:left;vertical-align:top"></div>');
$('#mason_container_'+containerNum).append('<div class="border_mason" id="border_mason_'+containerNum+'" style="top:'+(border_val/2)+'px;left:'+(border_val/2)+'px;width:'+(p.w-border_val)+'px;height:'+((p.h-border_val))+'px;z-index:5;position:relative;overflow:hidden"></div>')
$('#border_mason_'+containerNum).append('<img class="mason_photo" id="photo_'+j+'" src="'+p.path+'" style="top:'+(-(border_val/2))+'px;left:'+(-(border_val/2))+'px;width:'+(p.w)+'px;height:'+(p.h)+'px;display:inline-block;position:relative"/>');
if(lightbox){
$('#border_mason_'+containerNum).click(function(){
add_lightbox(p.path,p.num);
});
$('#border_mason_'+containerNum).css({'cursor':'pointer'})
}
else if(p.url != null){
$('#mason_container_'+containerNum).wrap('<a href="'+p.url+'"></a>');
}
}

$(window).resize(function(){
page_width = $(window).width();
page_height = $(window).height();
if(lightbox_open){
resize_lightbox(lightbox_image_1);
}
if(page_width < column_drop_width){
numPerRow = 2;
}
else{
numPerRow = origNumPerRow;
}
reBuild();
});

function resize_lightbox(lb){
if(page_width < lb.width()){
lb.css('max-width',page_width);
}
else if(page_width > lb.width()){
if(page_width > 900){
lb.css('max-width',900);
}
else{
lb.css('max-width',page_width);
}
}
}

function reBuild(){
$('#photos').empty();
buildMasonary();
}

function resizeMason(){
var new_width =$('#photosContainer').width()-width_offset;
var ratio = new_width/parent_width;
parent_width = new_width;

$('.sqpl_column').each(function(){
var column = $(this);
var w = column.width();
column.width(w*ratio);
});

$('.mason_container').each(function(){
var w = $(this).width();
var h = $(this).height();
var new_w = w*ratio;
var new_h = h*ratio;
var container = $(this);
var border_div = $(this).children('.border_mason');
var mason_image = border_div.children('.mason_photo');
resizeElements(container,new_w,new_h,0);
resizeElements(mason_image,new_w,new_h,0);
resizeElements(border_div,new_w,new_h,border_val);
});

function resizeElements(elem,w,h,offset){
elem.width(w-offset);
elem.height(h-offset);
}
}

function add_lightbox(path,num){
lightbox_open = true;
lightbox_num = num;
$('body').css({
'overflow': 'hidden',
'height': '100%'
});
$('body').append('<div id="lightbox_overlay"style="position:fixed;height:101%;width:101%;left:0;top:0;z-index:1000;"></div>');
$('#lightbox_overlay').append('<div id="lightbox_background" style="height:100%;width:100%;background-color:black;z-index:0;opacity:0;"></div>');
$('#lightbox_overlay').append('<img id="lightbox_image_1" src="'+path+'" style="max-width:'+(page_width-(page_width/4))+'px;max-height:'+(page_height-(page_height/8))+'px;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;opacity:1;z-index:1;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;"/>');
$('#lightbox_overlay').append('<img id="lightbox_image_2" src="'+path+'" style="max-width:'+(page_width-(page_width/4))+'px;max-height:'+(page_height-(page_height/8))+'px;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;opacity:0;z-index:1;-webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-o-user-select: none;user-select: none;"/>');
$('#lightbox_overlay').append('<img src="http://static1.squarespace.com/static/56fe5ba420c64743836b25e3/t/57a1d6acb3db2b02a17b33d5/1470224044007/cross_grey.png" id="lightbox_close_button" style="width:16px;height:16px;position:absolute;top:20px;right:15px;z-index:2;color:white;opacity:1;cursor:pointer;"/>');
$('#lightbox_overlay').append('<img src="http://static1.squarespace.com/static/56fe5ba420c64743836b25e3/t/57a1d6bcb3db2b02a17b3432/1470224060627/prev_grey.png" id="lightbox_previous" style="width:14px;height:24px; position:absolute;top:50%;left:20px;transform:translate(0%,-50%);color:white;cursor:pointer;opacity:1;z-index:2;cursor:pointer;"/>');
$('#lightbox_overlay').append('<img src="http://static1.squarespace.com/static/56fe5ba420c64743836b25e3/t/57a1d6cab3db2b02a17b349d/1470224074465/next_grey.png" id="lightbox_next" style="width:14px;height:24px; position:absolute;top:50%;right:20px;transform:translate(0%,-50%);color:white;cursor:pointer;opacity:1;z-index:2;cursor:pointer;"/>');
$('#lightbox_close_button').click(function(){
close_lightbox();
});
lightbox_image_1 = $('#lightbox_image_1');
lightbox_image_2 = $('#lightbox_image_2');
$('#lightbox_overlay').bind('mousemove',function(e){
if(e.pageX < page_width/2 && !lightbox_prev){
$('#lightbox_previous').animate({opacity:1},100);
$('#lightbox_next').animate({opacity:0},100);
$(this).unbind('click');
$(this).click(function(){
previous_lightbox_image();
});
lightbox_prev = true;
lightbox_next = false;
}
else if(e.pageX > page_width/2 && !lightbox_next){
$('#lightbox_previous').animate({opacity:0},100);
$('#lightbox_next').animate({opacity:1},100);
$(this).unbind('click');
$(this).click(function(){
next_lightbox_image();
});
lightbox_prev = false;
lightbox_next = true;
}
});
$('#lightbox_overlay').bind('mouseleave',function(e){
$('#lightbox_previous').animate({opacity:0},300);
$('#lightbox_next').animate({opacity:0},100);
$(this).unbind('click');
lightbox_prev = false;
lightbox_next = false;
});
$('#lightbox_background').animate({opacity: 0.93}, 200);
$('#lightbox_previous').animate({opacity:0},1400);
$('#lightbox_next').animate({opacity:0},1400);
if(lightbox_theme == 'light'){
$('#lightbox_background').css('background-color','#f2f2f2');
}
$('.scrollable').bind('touchmove', function(e){
e.stopPropagation();
});
$('#lightbox_overlay').bind('touchmove', function(e){
e.preventDefault();
});
resize_lightbox(lightbox_image_1);
}

function close_lightbox(){
$('body').css({
'overflow': 'auto',
'height': 'auto'
});
$('#lightbox_overlay').animate({opacity: 0}, 200,function(){
$('#lightbox_overlay').remove();
lightbox_prev = false;
lightbox_next = false;
lightbox_open = false;
});
$('.scrollable').bind('touchmove', function(e){
return true;
});
$('#lightbox_overlay').bind('touchmove', function(e){
return true;
});
}

function next_lightbox_image(){
lightbox_num++;
if(lightbox_num >= photos.length){
lightbox_num = 0;
}
crossfade_images();
}

function previous_lightbox_image(){
lightbox_num--;
if(lightbox_num < 0){
lightbox_num = photos.length - 1;
}
crossfade_images();
}

function crossfade_images(){
resize_lightbox(lightbox_image_2);
lightbox_image_2.attr('src',photos[lightbox_num].path);
lightbox_image_2.animate({opacity: 1}, 200);
lightbox_image_1.animate({opacity: 0}, 200);
var temp = lightbox_image_1;
lightbox_image_1 = lightbox_image_2;
lightbox_image_2 = temp;
}

document.addEventListener('pageChange', function(){
if(recent_page == false){ //Stops the plugin thinking the page has changed twice in short succession
init();
console.log('change');
recent_page = true;
setTimeout(function(){
recent_page = false;
},200);
}
});
window.onload = watch;
function watch(){MutationObserver=window.MutationObserver||window.WebKitMutationObserver;var a=new MutationObserver(function(a){for(var b=0;b<a.length;b++){var c=a[b];if("attributes"===c.type){var d=new Event("pageChange");document.dispatchEvent(d)}}});a.observe(document.body,{attributes:!0,attributeFilter:["id"]})}
});

</script>