+});\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
+});\r
+\r
+\r
+\r
+_kiwi.view.MenuBox = Backbone.View.extend({\r
+ events: {\r
+ 'click .ui_menu_foot .close': 'dispose'\r
+ },\r
+\r
+ initialize: function(title) {\r
+ var that = this;\r
+\r
+ this.$el = $('<div class="ui_menu"></div>');\r
+\r
+ this._title = title || '';\r
+ this._items = {};\r
+ this._display_footer = true;\r
+ this._close_on_blur = true;\r
+\r
+ this._close_proxy = function(event) {\r
+ that.onDocumentClick(event);\r
+ };\r
+ $(document).on('click', this._close_proxy);\r
+ },\r
+\r
+\r
+ render: function() {\r
+ var that = this;\r
+\r
+ this.$el.find('*').remove();\r
+\r
+ if (this._title) {\r
+ $('<div class="ui_menu_title"></div>')\r
+ .text(this._title)\r
+ .appendTo(this.$el);\r
+ }\r
+\r
+\r
+ _.each(this._items, function(item) {\r
+ var $item = $('<div class="ui_menu_content hover"></div>')\r
+ .append(item);\r
+\r
+ that.$el.append($item);\r
+ });\r
+\r
+ if (this._display_footer)\r
+ this.$el.append('<div class="ui_menu_foot"><a class="close" onclick="">Close <i class="icon-remove"></i></a></div>');\r
+ },\r
+\r
+\r
+ onDocumentClick: function(event) {\r
+ var $target = $(event.target);\r
+\r
+ if (!this._close_on_blur)\r
+ return;\r
+\r
+ // If this is not itself AND we don't contain this element, dispose $el\r
+ if ($target[0] != this.$el[0] && this.$el.has($target).length === 0)\r
+ this.dispose();\r
+ },\r
+\r
+\r
+ dispose: function() {\r
+ _.each(this._items, function(item) {\r
+ item.dispose && item.dispose();\r
+ item.remove && item.remove();\r
+ });\r
+\r
+ this._items = null;\r
+ this.remove();\r
+\r
+ $(document).off('click', this._close_proxy);\r
+ },\r
+\r
+\r
+ addItem: function(item_name, $item) {\r
+ $item = $($item);\r
+ if ($item.is('a')) $item.addClass('icon-chevron-right');\r
+ this._items[item_name] = $item;\r
+ },\r
+\r
+\r
+ removeItem: function(item_name) {\r
+ delete this._items[item_name];\r
+ },\r
+\r
+\r
+ showFooter: function(show) {\r
+ this._display_footer = show;\r
+ },\r
+\r
+\r
+ closeOnBlur: function(close_it) {\r
+ this._close_on_blur = close_it;\r
+ },\r
+\r
+\r
+ show: function() {\r
+ this.render();\r
+ this.$el.appendTo(_kiwi.app.view.$el);\r
+ }\r
+});\r