<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>