<?xml version="1.0" encoding="UTF-8"?> 
<Module>
    <ModulePrefs title="What's on Twitter" 
        title_url="http://kalydo.com" 
        author="Maarten Siersema" 
        author_email="maarten@lowereast.nl"
        description="Twipick inspired gadget. Look at the latest images posted on twitpic or search for specific content. Refreshes every 36 seconds. It also shows the current trends on twitter."
        screenshot="http://ceegadgets.appspot.com/images/whatsontwitter.jpg"
        thumbnail="http://ceegadgets.appspot.com/images/whatsontwitterThumb.jpg"
        author_location="Eindhoven, The Netherlands"
        author_affiliation="None"
        author_aboutme="Bleeding edge Kalydo Developer"
        author_link="http://www.google.com/s2/profiles/105596731161512978294"
        height="255"> 
        <Require feature="dynamic-height"/>
    </ModulePrefs>
    <Content type="html">
    <![CDATA[
    
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript" src="http://ceegadgets.appspot.com/js/helper.js"></script>
    <script type="text/javascript">
        if(typeof jQuery == "undefined"){
          // Load jQuery 1.3.1
          google.load("jquery", "1.3.1", {uncompressed:false});
          google.load("jqueryui", "1.5.3");
        }
    </script>
    <style type="text/css">
    .hide {
        display: none;
    }
    #footer {
        font-family: arial,sans-serif;
        font-size: 10px;
        text-align: left;
    }
    #footer a {
        font-size: 10px;
    }
    img {
        cursor: pointer;
    }
    .left {
        float: left;
    }
    .right {
        float: right;
    }
    .center {
        text-align: center;
    }
    .tooltip {
        width: 110px;
        margin-left: 5px;
    }
    a:link, a:visited, a:hover, a:active {
        font-family:arial,sans-serif;
        font-size:12px;
        color:#0000CC;
        text-decoration:underline;
    }
    #infoBoxHeader {
        margin: 0 0 5px 0;
        padding: 0;
        color:#0000CC;
        cursor: pointer;
    }
    #infoBox img {
        margin-bottom: 5px;
    }
    #infoBox {
        position: absolute;
        z-index: 3000;
      	border: 1px solid #111;
      	background-color: #eee;
      	padding: 5px;
        font-family:arial,sans-serif;
        font-size:12px;
      	opacity: 0.85;
        width: 288px;
        display: none;
    }
    #closeInfoBox {
        float: right;
        cursor: pointer;
    }
    </style>

    <div id='wrapper'>
        <div id="siteContent" style="width:300px;height:270px;">
            <div id="infoBox">
                <div id="closeInfoBox">X</div>
                <h3 id="infoBoxHeader"></h3>
                <div id="infoBoxContent"></div>
            </div>
            <input type="text" name="search" style="width:300px;" onchange="gadget.update();" />
            <div id="pics" style="height:180px;"></div>
            <div id="current"></div>
            <div id="footer">by <a href="http://kalydo.com" target="_blank">Kalydo.com</a></div>
        </div>
    </div>
    
    <script type="text/javascript">
        $("#closeInfoBox").bind("click", function(){$("#infoBox").slideUp()});
        $("#infoBox").bind("click", function(){$("#infoBox").slideUp()});
        $.fn.viewInfo = function(params) {
            $("#infoBoxHeader").html(params.header || "");
            $("#infoBoxContent").html(params.content);
            $("#infoBox").slideDown();
        }

        getPicId = function(string) {
            var patt1 = "http://twitpic\.com/([a-z0-9]{5})";
            matchId = string.match(patt1)+""
            uriList = matchId.split(",");
            return uriList[uriList.length - 1];
        }

        $.makeRequest = function(url, parameters, callback) {       
            if(typeof gadgets != "undefined"){
                var params = {};
                params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
                params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
                params[gadgets.io.RequestParameters.REFRESH_INTERVAL] = 35;
                //params[gadgets.io.RequestParameters.POST_DATA] = gadgets.io.encodeValues(parameters);
                //params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.SIGNED;
                gadgets.io.makeRequest(url, callback, params);
            } else {
                $.getJSON(url, parameters, callback);
            }
        }

       //normalize response
       var prepareResponse = function(resp) {
           if (resp.data !== undefined) {
               return resp.data;
           }
           else return resp;
        }

        var gadget = {
          result: {},
          pics: {},
          current: {},
          proxy: "",
          init: function() {
            gadget.update();
            setInterval("gadget.update()", 36000);
            $('#pics img').live("click", function(){
                var params = {};
                params['content'] = "<div class='right center' style='margin-top: 15px;'><a href='http://twitter.com/"+gadget.pics[$(this).attr('rel')].from_user+"' target='_blank'><img src='"+gadget.pics[$(this).attr('rel')].profile_image_url+"' width='50' border='0'/><br/>"+gadget.pics[$(this).attr('rel')].from_user+"</a></div>" + "<img  onclick='window.open(\"http://twitpic.com/"+$(this).attr("id")+"\");' src=\"http://twitpic.com/show/thumb/"+$(this).attr('id')+"\"/><br/><i>Posted: " + gadget.pics[$(this).attr('rel')].created_at + "</i><br/>" + $(this).attr('title');
                $(this).viewInfo(params);
            });
            
            $('#current a').live("click", function(){
                var params = {};
                params['header'] = $(this).html();
                params['content'] = "Loading";
                $(this).viewInfo(params);
                current = $(this).html().toLowerCase();
                //current = current.replace(/#/, "");
                current = current.replace(/ /g, "+");
                current = escape(current);
                if (current.match("&") == null) {
                    /*$.makeRequest(gadget.proxy+"http://api.tagal.us/tag/"+current+"/show.json", {}, function(response){*/
                    $.makeRequest(gadget.proxy+"http://www.whatthetrend.com/api/trend/getByName/"+current+"/json", {}, function(response){                                      
                        if (typeof(response) == "object" && response != null) {
                            response = prepareResponse(response);
                            if (response != null) {
                                $("#infoBoxContent").html("<i>First Trend: "+ response.api.trend.dates.firstTrend+"</i><br/>"+response.api.trend.blurb.text);
                            } else return $("#infoBoxContent").html("no definition");
                        }
                        else return $("#infoBoxContent").html("no definition");
                    });
                    return "<div id='"+current+"' class='loading'>loading</div>";
                } else $("#infoBoxContent").html("no definition");
            });
            
            $('#infoBoxHeader').live("click", function(){
                window.open("http://search.twitter.com/search?q="+$(this).html().replace(/#/, "%23"));
            });
            
            setTimeout("gadget.getCurrent()", 1000);
            setInterval("gadget.getCurrent()", 300000);
            if(typeof gadgets != "undefined") gadgets.window.adjustHeight();
          },
          deletePic: function() {
              $('#pics img:last-child').fadeOut(1000, function(){$(this).remove()});
          },
          addPic: function(id, text, index) {
              if (id != '0') {
                $('#pics').prepend("<img class='hide' rel='"+i+"' id='"+id+"' width='60' src='http://twitpic.com/show/thumb/"+id+"' title='"+addslashes(text)+"'/>");
              }
          },
          drawPics: function() {
            for (i=0;i<this.result.results.length;i++) {
              $('#pics img:last-child').remove();
            }
            for (i=0;i<this.result.results.length;i++) {
              this.addPic(getPicId(this.result.results[i].text), this.result.results[i].text, i);
            }
            $('img.hide').fadeIn(1000);
          },
          update: function() {
              query = $("input[name=search]").val();
              if (query == "") query = "twitpic.com";
              else {
                  query = "twitpic.com+"+query;
                  if (gadget.result.query != query) {
                      $('#pics img').remove();
                      gadget.result.max_id = undefined;
                  }
              }
              
              if (typeof(gadget.result.max_id) != "undefined") proxy = this.proxy+"http://search.twitter.com/search.json?q="+query+"&since_id="+gadget.result.max_id;
              else proxy = this.proxy+"http://search.twitter.com/search.json?q="+query;
              $.makeRequest(proxy, {}, gadget.cb);
          },
          cb: function(response) {
              var response = prepareResponse(response);
              gadget.result = response;              
              for (i=0;i<response.results.length;i++) {
                  gadget.pics[i] = response.results[i];
              }
              gadget.drawPics();
          },
          getCurrent: function() {
              $.makeRequest(this.proxy+"http://search.twitter.com/trends/current.json", {}, gadget.currentCb);
          },
          currentCb: function(response) {
              var response = prepareResponse(response);
              gadget.current = response;
              
              $('#current a').remove() ;
              for (trend in gadget.current.trends) {
                  for (i=0; i<gadget.current.trends[trend].length; i++) {
                      $('#current').append("<a id='current"+i+"' href='javascript:;'>"+gadget.current.trends[trend][i].name+"</a> ");
                  }
              }
          }
        }
        google.setOnLoadCallback(function(){
            $(function(){
              gadget.init();
            });
        });
    </script>
    ]]>
    </Content> 
</Module>