"use strict";

angular.module("hikeio").
	directive("photoStream", ["$document", "$rootScope", "$timeout", "config", function($document, $rootScope, $timeout, config) {

		var normalImage = "small";
		var biggerImage = "medium";
		var template = "<div class='preview-list'>" +
			"<a href='/hikes/{{hike.string_id}}' data-ng-repeat='hike in hikes'>" +
				"<div class='preview' >" +
					"<div data-ng-class='{\"featured-box\": $first}' >" +
						"<img data-ng-src='" + config.hikeImagesPath + "/{{hike.photo_preview.string_id}}{{ $first && \"-" + biggerImage + "\" || \"-" + normalImage + "\" }}.jpg' alt='{{hike.photo_preview.alt}}'></img>" +
						"<div class='preview-footer'>" +
							"<div>" +
								"<h4 class='preview-title'>{{hike.name}}</h4>" +
								"<h4 class='preview-location'>{{hike.locality}}</h4>" +
							"</div>" +
							"<div>" +
								"<h4 class='preview-distance'>{{hike.distance | distance:\"kilometers\":\"miles\":1}} mi.</h4>" +
							"</div>" +
						"</div>" +
					"</div>" +
				"</div>" +
			"</a>";

		return {
			replace: true,
			scope: {
				hikes: "="
			},
			template: template,
			link: function (scope, element) {
				var gutterWidth = 2;
				var maxColumnWidth = 400;

				scope.$watch("hikes", function(newValue, oldValue) {
					if (newValue.length === 0) return;
					$document.ready(function() {
						element.imagesLoaded(function(images, proper, broken) {
							element.css("opacity", "1");
							element.masonry({
								itemSelector: ".preview",
								gutterWidth: gutterWidth,
								isAnimated: true,
								columnWidth: function(containerWidth) {
									var boxes = Math.ceil(containerWidth / maxColumnWidth);
									var boxWidth = Math.floor((containerWidth - (boxes - 1) * gutterWidth) / boxes);
									element.find(".preview > div").width(boxWidth);
									if (boxes !== 1) {
										element.find(".preview > .featured-box").width(boxWidth * 2 + gutterWidth);
									}
									return boxWidth;
								}
							});
						});
					});
				}, true);
			}
		};
	}]);
@@ -1340,24 +1340,53 @@
 unction() %7B%0A
+%09%09%09%09%09%09$timeout(function() %7B%0A%09
 %09%09%09%09%09%09elemen
@@ -1434,32 +1434,33 @@
 roken) %7B%0A%09%09%09%09%09%09%09
+%09
 element.css(%22opa
@@ -1471,32 +1471,33 @@
 %22, %221%22);%0A%09%09%09%09%09%09%09
+%09
 element.masonry(
@@ -1498,16 +1498,17 @@
 sonry(%7B%0A
+%09
 %09%09%09%09%09%09%09%09
@@ -1541,16 +1541,17 @@
 %09%09%09%09%09%09%09%09
+%09
 gutterWi
@@ -1576,16 +1576,17 @@
 %09%09%09%09%09%09%09%09
+%09
 isAnimat
@@ -1595,16 +1595,17 @@
 : true,%0A
+%09
 %09%09%09%09%09%09%09%09
@@ -1649,24 +1649,25 @@
  %7B%0A%09%09%09%09%09%09%09%09%09
+%09
 var boxes = 
@@ -1702,32 +1702,33 @@
 axColumnWidth);%0A
+%09
 %09%09%09%09%09%09%09%09%09var box
@@ -1802,32 +1802,33 @@
 oxes);%0A%09%09%09%09%09%09%09%09%09
+%09
 element.find(%22.p
@@ -1851,32 +1851,33 @@
 idth(boxWidth);%0A
+%09
 %09%09%09%09%09%09%09%09%09if (box
@@ -1890,32 +1890,33 @@
  1) %7B%0A%09%09%09%09%09%09%09%09%09%09
+%09
 element.find(%22.p
@@ -1980,26 +1980,28 @@
 );%0A%09%09%09%09%09%09%09%09%09
+%09
 %7D%0A
+%09
 %09%09%09%09%09%09%09%09%09ret
@@ -2014,33 +2014,46 @@
 xWidth;%0A%09%09%09%09%09%09%09%09
-%7D
+%09%7D%0A%09%09%09%09%09%09%09%09%7D);
 %0A%09%09%09%09%09%09%09%7D);%0A%09%09%09%09

Add timeout? Maybe this will fix occasional masonry rendering issue on iPhone.