//////////////////////////////////////////////////////////////////
//
//  ShoutEm widget for Ning network front page, v1.0
//  www.shoutem.com
//  
//  Author: Matija Smalcelj - matija@shoutem.com
//  ALL RIGHTS RESERVED ©ShoutEm 2009
//
//
//  Usage:
//  1. paste this code below into Ning TextBox widget
//  2. replace UNIQUE_ID in ALL places with some unique id made of 
//     letters and numbers (e.g. ShoutEmWidget_8476544)
//  3. replace NETWORK_URL in BOTH with real Shout'Em network's url 
//     without http:// and any / (e.g. team.shoutem.com)
//  3. if you like you can change default feed size by changing last
//     parameter of init function
//
//  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" />
//  <script type='text/javascript' src='http://NETWORK_URL/js/ning/ShoutEmNingWidget.js' />
//  <div id='UNIQUE_ID'></div>
//  <script type="text/javascript">
//  var UNIQUE_ID = new ShoutEmNingWidget();
//  UNIQUE_ID.init("UNIQUE_ID", "NETWORK_URL", 7);
//  </script>
//
//////////////////////////////////////////////////////////////////


ShoutEmNingWidget = function() {
    return a = {
        // widget config
        config: new function() {
            this.tableSize = 490;
            this.columnSize = 560;
            this.boxId = "ShoutEmWidget";
            this.networkUrl = "team.shoutem.com";
            this.feedSize = "7";
            this.widgetPadding = 5;
        },

        // shoutem attachment types
        attTypes: new function() {
            this.link = "link";
            this.picture = "picture";
            this.location = "location";
        },

        // strings for identifying video links
        attLinkPatterns: new function() {
            this.youtube = "youtube.com/watch";
            this.vimeo = "vimeo.com/";
        },

        // widget entry point
        init: function(boxId, networkUrl, feedSize) {
    
            var app = this;

            if (boxId != "") app.config.boxId = boxId;
            if (networkUrl != "") app.config.networkUrl = networkUrl;
            if (feedSize != 0) app.config.feedSize = feedSize;
            $("#" + boxId + ":first").parent().css("padding", "0px");
            $("#" + boxId + ":first").css("padding", app.config.widgetPadding + "px");
            app.config.tableSize = $("#" + boxId + ":first").width() - app.config.widgetPadding * 2;
            app.config.columnSize = $("#" + boxId + ":first").width() - 30 - app.config.widgetPadding * 2;

            // request using JSONP - for this to work url must contain "callback=?" where questionmark
            // will be replaced with dinamically generated JSONP function call, without that request will
            // be banned by browser because of its built in cross-domain security policy
            var jsonUrl = "http://" + app.config.networkUrl + "/api/twitter/1.0/statuses/public_timeline.json?count=" + app.config.feedSize + "&include_shoutem_fields=true&callback=?";
            jQuery.getJSON(jsonUrl, function(json) {
                app.shoutEmNingCallback(app, json);
            });
        },

        // callback function for processing feed data
        shoutEmNingCallback: function(app, obj) {
            var shouts = obj;
            var statusHTML = "";

            // feed html generation
            if (shouts.length == 0) {
            }
            else {
                var networkName = app.config.networkUrl.split(".")[0];

                statusHTML += "<table cellpadding='0' cellspacing='0' style='width: " + app.config.tableSize + "px; table-layout: fixed;'>";
                for (var i = 0; i < shouts.length; i++) {
                    if (shouts[i].user.profile_image_url.indexOf("http://") == -1) shouts[i].user.profile_image_url = "http://" + app.config.networkUrl + shouts[i].user.profile_image_url;
                    shouts[i].url = "http://" + app.config.networkUrl + "/" + shouts[i].user.screen_name + "/shouts/" + shouts[i].id;

                    if (shouts[i].text == "") shouts[i].text = "&raquo;";
                    else shouts[i].text = app.encodeString(app, shouts[i].text);
                    shouts[i].user.screen_name = app.encodeString(app, shouts[i].user.screen_name);

                    statusHTML += '<tr><td style="border-bottom: dotted 1px; padding: 3px; vertical-align: top; width: 24px;">';
                    statusHTML += ('<a href="' + shouts[i].user.shoutem_profile_url + '"><img height="24" width="24" style="margin: 0; padding: 0;" src="' + shouts[i].user.profile_image_url + '" alt="' + shouts[i].user.screen_name + '" title="' + shouts[i].user.screen_name + '"/></a></td>');
                    statusHTML += ('<td style="border-bottom: dotted 1px; padding: 3px; width: ' + app.config.columnSize + 'px; overflow: hidden;"><b><a href="' + shouts[i].user.shoutem_profile_url + '" style="text-decoration: none;">' + shouts[i].user.screen_name + '</a></b>&nbsp;');
                    statusHTML += (shouts[i].text + ' - <a href="' + shouts[i].url + '" style="font-size: 0.9em; opacity: 0.9; text-decoration: none;">' + shouts[i].shoutem_relative_created_at + '</a>');
                    if (typeof (shouts[i].shoutem_attachments) != "undefined" && shouts[i].shoutem_attachments.length != 0) {
                        statusHTML += app.processAttachment(app, shouts[i]);
                    }
                    statusHTML += '</td></tr>';
                }
                statusHTML += "</table>";
            }
            
            // footer html generation
            var footerSmallColWidth = 65;
            var footerBigColWidth = $("#" + app.config.boxId + ":first").width() - 65 - this.config.widgetPadding;
            statusHTML += "<table cellpadding='0' cellspacing='0' style='table-layout: fixed; width: " + app.config.tableSize + "px; overflow: hidden;'><tr><td style='overflow: hidden; width: " + footerBigColWidth + "px; padding: 0 " + this.config.widgetPadding + "px 0 0; margin: 0;'>";
            statusHTML += "<a style='font-size:1.1em; font-weight:bold; text-decoration:none;' href='http://";
            statusHTML += app.config.networkUrl;
            statusHTML += ("/'>" + app.config.networkUrl.toLowerCase() + "</a></td><td style='padding: 0; margin: 0; width: " + footerSmallColWidth + "px;'>");
            statusHTML += "<a style='font-size:0.9em; text-decoration:none; position:relative; top: -3px;' ";
            statusHTML += "href='http://www.shoutem.com/' title='Roll your own Microblogging community'><img alt='ShoutEm' src='http://" + app.config.networkUrl + "/skins/shoutemLogo.png' style='position: relative; top: 2px; padding:0; margin:0;'/></a></td></tr></table>";

            // insertion into GUI
            $("#" + app.config.boxId).html(statusHTML);
        },

        // converts shout's attachments to html code
        processAttachment: function(app, shout) {
            var html = "";
            var att = shout.shoutem_attachments;
            for (var i = 0; i < att.length; i++) {
                if (att[i].type == app.attTypes.link) {
                    // link (can be: normal link || youtube || vimeo)

                    // part of html shared by all videos
                    var videoThumbHtml = "<br /><a href='" + shout.url + "' style='display: block; max-height: 80px; width: 80px; overflow: hidden; position: relative; padding: 2px 0 0 0;'>";
                    videoThumbHtml += "<img src='http://" + app.config.networkUrl + "/skins/youtubePlay.gif' alt='' style='border: none; position: absolute; height: 14px; width: 20px; z-index: 100; top: 24px; left: 31px;'/>";

                    if (att[i].url.indexOf(app.attLinkPatterns.youtube) != -1) {
                        // http://www.youtube.com/watch?v=yEQPpjzoqHs
                        var videoId = att[i].url.split("watch?v=")[1].split("&")[0];
                        html += videoThumbHtml;
                        html += "<img src='http://img.youtube.com/vi/" + videoId + "/2.jpg' style='border: none; width: 80px; height: auto;' /></a>";
                    }
                    else if (att[i].url.indexOf(app.attLinkPatterns.vimeo) != -1) {
                        // http://www.vimeo.com/2104162
                        var videoId = att[i].url.split("/")[3].split("?")[0];
                        html += videoThumbHtml;
                        html += "<img src='http://images.vimeo.com/17/08/73/170873299/170873299_80.jpg' style='border: none; height: auto;' /></a>";
                    }
                    else {
                        // normal link
                        var urlParts = att[i].url.split("/");
                        var shortUrl = "";
                        // if (urlParts.length > 3 && urlParts[3].length > 0) shortUrl = urlParts[2] + "/...";
                        // else shortUrl = att[i].url.replace("http://", "");
                        shortUrl = att[i].url.replace("http://", "");
                        html += "<br /><a href='" + att[i].url + "' style='text-decoration: none;'>" + shortUrl + "</a>";
                    }
                }
                else if (att[i].type == app.attTypes.picture) {
                    // picture
                    html += "<br /><a href='" + shout.url + "' style='display: block; max-height: 80px; width: 80px; overflow: hidden; padding: 2px 0 0 0;'>";
                    html += "<img src='" + att[i].url_thumbnail + "' style='border: none; width: 80px; height: auto;' /></a>";
                }
                else if (att[i].type == app.attTypes.location) {
                    // location
                }
            }
            return html;
        },

        // encodes characters for displaying in GUI
        encodeString: function(app, orig) {
            return orig.replace("<", "&lt;").replace(">", "&gt;");
        }
    };
};