+});\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+\r
+_kiwi.view.MediaMessage = Backbone.View.extend({\r
+ events: {\r
+ 'click .media_close': 'close'\r
+ },\r
+\r
+ initialize: function () {\r
+ // Get the URL from the data\r
+ this.url = this.$el.data('url');\r
+ },\r
+\r
+ // Close the media content and remove it from display\r
+ close: function () {\r
+ var that = this;\r
+ this.$content.slideUp('fast', function () {\r
+ that.$content.remove();\r
+ });\r
+ },\r
+\r
+ // Open the media content within its wrapper\r
+ open: function () {\r
+ // Create the content div if we haven't already\r
+ if (!this.$content) {\r
+ this.$content = $('<div class="media_content"><a class="media_close"><i class="icon-chevron-up"></i> Close media</a><br /><div class="content"></div></div>');\r
+ this.$content.find('.content').append(this.mediaTypes[this.$el.data('type')].apply(this, []) || 'Not found :(');\r
+ }\r
+\r
+ // Now show the content if not already\r
+ if (!this.$content.is(':visible')) {\r
+ // Hide it first so the slideDown always plays\r
+ this.$content.hide();\r
+\r
+ // Add the media content and slide it into view\r
+ this.$el.append(this.$content);\r
+ this.$content.slideDown();\r
+ }\r
+ },\r
+\r
+\r
+\r
+ // Generate the media content for each recognised type\r
+ mediaTypes: {\r
+ twitter: function () {\r
+ var tweet_id = this.$el.data('tweetid');\r
+ var that = this;\r
+\r
+ $.getJSON('https://api.twitter.com/1/statuses/oembed.json?id=' + tweet_id + '&callback=?', function (data) {\r
+ that.$content.find('.content').html(data.html);\r
+ });\r
+\r
+ return $('<div>Loading tweet..</div>');\r
+ },\r
+\r
+\r
+ image: function () {\r
+ return $('<a href="' + this.url + '" target="_blank"><img height="100" src="' + this.url + '" /></a>');\r
+ },\r
+\r
+\r
+ reddit: function () {\r
+ var that = this;\r
+ var matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(this.url);\r
+\r
+ $.getJSON('http://www.' + matches[0] + '.json?jsonp=?', function (data) {\r
+ console.log('Loaded reddit data', data);\r
+ var post = data[0].data.children[0].data;\r
+ var thumb = '';\r
+\r
+ // Show a thumbnail if there is one\r
+ if (post.thumbnail) {\r
+ //post.thumbnail = 'http://www.eurotunnel.com/uploadedImages/commercial/back-steps-icon-arrow.png';\r
+\r
+ // Hide the thumbnail if an over_18 image\r
+ if (post.over_18) {\r
+ thumb = '<span class="thumbnail_nsfw" onclick="$(this).find(\'p\').remove(); $(this).find(\'img\').css(\'visibility\', \'visible\');">';\r
+ thumb += '<p style="font-size:0.9em;line-height:1.2em;cursor:pointer;">Show<br />NSFW</p>';\r
+ thumb += '<img src="' + post.thumbnail + '" class="thumbnail" style="visibility:hidden;" />';\r
+ thumb += '</span>';\r
+ } else {\r
+ thumb = '<img src="' + post.thumbnail + '" class="thumbnail" />';\r
+ }\r
+ }\r
+\r
+ // Build the template string up\r
+ var tmpl = '<div>' + thumb + '<b><%- title %></b><br />Posted by <%- author %>. ';\r
+ tmpl += '<i class="icon-arrow-up"></i> <%- ups %> <i class="icon-arrow-down"></i> <%- downs %><br />';\r
+ tmpl += '<%- num_comments %> comments made. <a href="http://www.reddit.com<%- permalink %>">View post</a></div>';\r
+\r
+ that.$content.find('.content').html(_.template(tmpl, post));\r
+ });\r
+\r
+ return $('<div>Loading Reddit thread..</div>');\r
+ }\r
+ }\r
+\r
+}, {\r
+\r
+ // Build the closed media HTML from a URL\r
+ buildHtml: function (url) {\r
+ var html = '', matches;\r
+\r
+ // Is it an image?\r
+ if (url.match(/(\.jpe?g|\.gif|\.bmp|\.png)\??$/i)) {\r
+ html += '<span class="media image" data-type="image" data-url="' + url + '" title="Open Image"><a class="open"><i class="icon-chevron-right"></i></a></span>';\r
+ }\r
+\r
+ // Is it a tweet?\r
+ matches = (/https?:\/\/twitter.com\/([a-zA-Z0-9_]+)\/status\/([0-9]+)/ig).exec(url);\r
+ if (matches) {\r
+ html += '<span class="media twitter" data-type="twitter" data-url="' + url + '" data-tweetid="' + matches[2] + '" title="Show tweet information"><a class="open"><i class="icon-chevron-right"></i></a></span>';\r
+ }\r
+\r
+ // Is reddit?\r
+ matches = (/reddit\.com\/r\/([a-zA-Z0-9_\-]+)\/comments\/([a-z0-9]+)\/([^\/]+)?/gi).exec(url);\r
+ if (matches) {\r
+ html += '<span class="media reddit" data-type="reddit" data-url="' + url + '" title="Reddit thread"><a class="open"><i class="icon-chevron-right"></i></a></span>';\r
+ }\r
+\r
+ return html;\r
+ }\r