<html>
  <head>
    <title>
      Del.icio.us for
    </title>
    <script id="DeliciousFlake__PAGEFLAKE_" type="text/javascript"><![CDATA[
      function DeliciousFlake__PAGEFLAKE_() {
		var instance = null;
		var user = null;
		var tag = null;
		var count = 5;
		var page = 1;
		var USER__PAGEFLAKES_ = 'user__PAGEFLAKES_';
		var TITLE__PAGEFLAKES_ = 'Del.icio.us for ';
		var DELICIOUS__PAGEFLAKES_ = 'http://del.icio.us/feeds/json/';

        this.load = function (obj) {
          instance = obj;

          user = this.getValue('user');
          user = (user == null) ? 'chiru' : user;
          this.setFlakeTitle();
          $(USER__PAGEFLAKES_).value = user;
          $('count__PAGEFLAKES_').value = this.getCount();
          this.showTags(this.bind(this.fetchDeliciousPosts, this));
        }

        this.getValue = function(key) {
          return instance.Profiles[key];
        }

        this.setValue = function(key, value) {
          instance.Profiles[key] = value;
        }

        this.bind = function(funcRef, thisArg) {
          return function() {
            funcRef.apply(thisArg, arguments);
          };
        }

        this.showImage = function(img) {
          return function() {
            img.style.display = 'inline';
          };
        }

        this.incrementPage = function() {
          page ++;
        }

        this.decrementPage = function() {
          page --;
        }

        this.fetchDeliciousPosts = function() {
          var obj = this;
          App.ContentProxy.GetUrl(DELICIOUS__PAGEFLAKES_ + user + "/" + (tag != "" ? tag : "") + "?count=100",
            this.bind(
              function(details) {
                eval("var posts = " + this.parseDeliciousResponse(details, false));
                var postsDiv = $('_PAGEFLAKES_delicious_');
                postsDiv.innerHTML = '';
                if(posts.length > 0) {
                  var ub = (page * count);
                  ub = (ub > posts.length) ? posts.length : ub;
                  for(var i=((page-1)*count); i < ub; i++) {
                    var post = posts[i];
                    var div = document.createElement('div');
				    var a = document.createElement('a');
				    a.style.marginLeft = '20px';
				    var img = document.createElement('img');
				    img.style.position = 'absolute';
				    img.style.display = 'none';
				    img.height = img.width = 16;
				    img.src = post.u.split('/').splice(0,3).join('/')+'/favicon.ico';
				    img.onload = this.showImage(img);
				    a.setAttribute('href', post.u);
				    a.appendChild(document.createTextNode(post.d));
				    div.appendChild(img);
				    div.appendChild(a);
				    postsDiv.appendChild(div);
                  }
                  var showPrevious = page > 1;
                  var showNext = (page * count) < posts.length;
                  var dummy = document.createElement("div");
                  var navigation = '<table cellpadding="2" width="100%"><tr><td width="90%" align="right"><div style="white-space:nowrap" nowrap>';
                  if(showPrevious) {
                    navigation += '<a href="#" onclick="_PAGEFLAKES_.decrementPage();_PAGEFLAKES_.fetchDeliciousPosts();return false;">';
                    navigation += 'Previous ' + count + ' posts';
                    navigation += '</a>';
                  }
                  navigation += '</div></td><td width="10%"><div style="white-space:nowrap" nowrap>';
                  if(showNext) {
                    navigation += '<a href="#" onclick="_PAGEFLAKES_.incrementPage();_PAGEFLAKES_.fetchDeliciousPosts();return false;">';
                    navigation += 'Next ' + count + ' posts';
                    navigation += '</a>';
                  }
                  navigation += '</div></td></tr></table>';
                  dummy.innerHTML = navigation;
                  postsDiv.appendChild(dummy);
                } else {
                  postsDiv.innerHTML = 'No delicious posts found for user ' + user + (tag != '' ? ' with tag ' : '') + tag +'.';
                }
              },
            obj)
          );
        }

        this.addEventListener = function(element, name, observer, useCapture) {
          if (element.addEventListener) {
            element.addEventListener(name, observer, useCapture);
          } else if (element.attachEvent) {
            element.attachEvent('on' + name, observer);
          }
        }

        this.setFlakeTitle = function() {
          instance.setTitle(TITLE__PAGEFLAKES_ + user);
        }

        this.saveProfile = function() {
          var value = $(USER__PAGEFLAKES_).value;
          if(this.trim(value) != '') {
            page = 1;
            this.setValue('user', (user = value));
            instance.toggleEdit();
            this.setFlakeTitle();
            this.setValue('count', (count = this.getCount()));
            this.setValue('tag', (tag = this.getSelectedTag()));
            instance.save();
            this.fetchDeliciousPosts();
          }
        }

        this.toNumericValue = function(stringValue, defaultValue) {
          try {
            return parseInt(stringValue);
          }catch(e) {
            return defaultValue;
          }
        }

        this.getSelectedTag = function() {
          var s = $('tag__PAGEFLAKES_');
          return s.options[s.selectedIndex].value;
        }

        this.setSelectedTag = function(tag) {
          var s = $('tag__PAGEFLAKES_');
          var selectedIndex = 0;
          var options = s.options;
          for(var i=0; i < options.length; i++) {
            if(options[i].value == tag) {
              selectedIndex = i;
              break;
            }
          }
          s.selectedIndex = selectedIndex;
        }

        this.getCount = function() {
          var count = this.toNumericValue($('count__PAGEFLAKES_').value, 5);
          count = count <= 100 ? count : 5;
          $('count__PAGEFLAKES_').value = count;
          return count;
        }

        this.trim = function(value) {
          return value.replace(/^\s*|\s*$/g,"");
        }

        this.parseDeliciousResponse = function(details, tagsOrPosts) {
          var DELIMITER = "Delicious." + (tagsOrPosts ? "tags" : "posts") +" =";
          var index = details.indexOf(DELIMITER);
          if(index != -1) {
            return details.substring(index + DELIMITER.length);
          }
          return '';
        }

        this.showTags = function(funcRef) {
          App.ContentProxy.GetUrl(DELICIOUS__PAGEFLAKES_ + 'tags/' + $(USER__PAGEFLAKES_).value,
            this.bind(
              function(details) {
                var select = $('tag__PAGEFLAKES_');
                select.options.length = 1;
                details = this.parseDeliciousResponse(details, true);
                if(details != '') {
                  var deliciousTags = (function() {
                    eval('var tt = ' + details);
                    var a = [];
                    for(i in tt) {
                      a.push(i);
                    }
                    return a.sort();
                  })();
                  for(var i=0; i < deliciousTags.length; i++) {
                    select.options[select.length] = this.newOption(deliciousTags[i], deliciousTags[i]);
                  }
                }
                tag = this.getValue('tag');
                tag = (tag == null) ? '' : tag;
                this.setSelectedTag(tag);
                if(funcRef) {
                  funcRef();
                }
              },
            this)
          );
        }

        this.newOption = function(label, value) {
          return new Option(label, value);
        }
      }

      var _PAGEFLAKES_ = new DeliciousFlake__PAGEFLAKE_('_PAGEFLAKES_');
    ]]></script>
  </head>
  <body>
    <div id="_PAGEFLAKES_edit">
      <table cellpadding="2" cellspacing="2">
        <tr>
          <td>User</td>
          <td><input id="user__PAGEFLAKES_" type="text" onblur="_PAGEFLAKES_.showTags()" /></td>
        </tr>
        <tr>
          <td>Tag</td>
          <td><select id="tag__PAGEFLAKES_"><option value="">Select one</option></select></td>
        </tr>
        <tr>
          <td>Count</td>
          <td><input id="count__PAGEFLAKES_" type="text"/></td>
        </tr>
        <tr>
          <td>&nbsp;</td>
          <td><input id="submit__PAGEFLAKES_" type="button" value="Save" onclick="_PAGEFLAKES_.saveProfile()"/></td>
        </tr>
      </table>
    </div>
    <div id="_PAGEFLAKES_delicious_"></div>
  </body>
</html>