//////////////////////////////////////////////////////////////////
//
//  ShoutEm widget for Microsoft Windays 2009
//  www.shoutem.com 
//  
//  Author: Matija Smalcelj - matija@shoutem.com
//  ALL RIGHTS RESERVED ©ShoutEm 2009
//
//////////////////////////////////////////////////////////////////

/*
<div id="box">
	<div class="boxtitle">
		Službeni microblog
	</div>
	<div style="margin: 0px; padding: 0 16px; background: url('http://zrikka.com/js/microsoft/bg.png') bottom right no-repeat;">
		<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
		<script type='text/javascript' src='http://zrikka.com/js/microsoft/ShoutEmWindaysWidget.js'></script>
		<div id='ShoutEmWidget_2545'></div>
		<script type='text/javascript'>
		var ShoutEmWidget_2545 = new ShoutEmWindaysWidget();
		ShoutEmWidget_2545.init('ShoutEmWidget_2545', 'zrikka.com', 5);
		</script>
	</div>
	
</div>

*/




ShoutEmWindaysWidget = 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 = 0;
            this.refreshInterval = 10000;
        },

        // 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;
            /*window.setTimeout(boxId + ".fetchData(" + boxId + ", '" + boxId + "')", 50000);*/
			eval(boxId + ".fetchData(" + boxId + ", '" + boxId + "')");
        },

        // widget entry point
        fetchData: function(app, appId) {
            // 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) {
                window.setTimeout(appId + ".fetchData(" + appId + ", '" + appId + "')", app.config.refreshInterval);
                app.shoutEmWindaysCallback(app, json);
            });
        },

        // callback function for processing feed data
        shoutEmWindaysCallback: 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='font-size: 8pt; color: #FFFFFF;'>";
                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=" padding: 3px 3px 10px 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; border: 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=" padding: 3px 3px 10px 3px; overflow: hidden;"><b><a href="' + shouts[i].user.shoutem_profile_url + '" style="text-decoration: underline;">' + 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:100%; padding: 0 " + this.config.widgetPadding + "px 0 0; margin: 0; text-align: center;'>";
            statusHTML += "<a style='font-size:14px; font-weight:bold; text-decoration:none; color: #FFFFFF;' target='_blank' href='http://";
            statusHTML += "talk.mswindays.com"; //app.config.networkUrl;
            statusHTML += ("/'>Komentiraj i ti &raquo;</a></td>");
            /*
			statusHTML += "<td style='padding: 0; margin: 0; width: " + footerSmallColWidth + "px;'><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; border: 0;'/></a></td>";
			*/
			statusHTML += "</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;");
        }
    };
};